refactor(website): nav & landing

www/src/components/footer/footer.astro

@@ -7,9 +7,7 @@ export interface Props {
 const { path, isBlog } = Astro.props;
 ---
 
-<footer
-  class="transition-colors mt-auto pb-8 pt-8 flex flex-col bg-transparent"
->
+<footer class="transition-colors mt-auto flex flex-col bg-transparent">
   {isBlog && <AvatarList path={path} />}
   <div class="container px-6 mx-auto divide-gray-400 divide-opacity-50 pt-6">
     <div class="flex flex-col items-center justify-between w-full">

www/src/components/landingPage/about.astro

@@ -4,22 +4,28 @@ import PageSection from "./pageSection.astro";
 ---
 
 <PageSection
-  className="grid grid-cols-1 xl:grid-cols-2 gap-8 items-center mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 lg:grid lg:gap-x-8 xl:gap-x-12"
+  className="grid grid-cols-1 xl:grid-cols-2 gap-8 items-center mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8 lg:grid lg:gap-x-8 xl:gap-x-12"
   size={"24"}
   id="about"
 >
   <div class="flex flex-col gap-2 md:gap-4 max-w-[800px] xl:max-w-full mx-auto">
-    <h2 class="text-t3-purple-50 font-bold text-5xl w-full mb-2">
+    <h2
+      class="text-t3-purple-50 font-bold text-3xl lg:text-5xl md:text-5xl w-full mb-2"
+    >
       What is this? Some kinda template?
     </h2>
-    <p class="mt-4 text-xl text-t3-purple-200 max-w-3xl mx-auto">
+    <p
+      class="mt-4 text-base lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto"
+    >
       Kind of. We love all of the technologies that create-t3-app includes -
       check out <a href="https://init.tips" class="text-t3-purple-400"
-        >init.tips
-      </a> for even more info on topics such as state management and deployment -
-      but we do not believe these are needed on every project.
+        >init.tips</a
+      > for even more info on topics such as state management and deployment - but
+      we do not believe these are needed on every project.
     </p>
-    <p class="mt-4 text-xl text-t3-purple-200 max-w-3xl mx-auto">
+    <p
+      class="mt-4 text-base lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto"
+    >
       So we made create-t3-app to do one thing: Simplify complex boilerplate
       around the core T3 Stack tech without compromising the pieces modularity.
       This is NOT an all-inclusive template and we expect you to bring your own

www/src/components/landingPage/banner.astro

@@ -2,28 +2,30 @@
 import Button from "./button.astro";
 ---
 
-<div class="py-4 sm:py-8 md:py-12 lg:py-14 xl:py-12 2xl:py-28">
+<div class="py-12 sm:py-8 md:py-12 lg:py-14 xl:py-12 2xl:py-28">
   <div class="max-w-[800px] xl:max-w-7xl mx-auto">
     <div class="lg:px-8">
       <div class="flex flex-col items-center">
         <div
           class="max-w-md px-4 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl sm:px-6 lg:px-0"
         >
-          <div class="flex flex-col items-start justify-between">
-            <h1
-              class="text-5xl text-center tracking-tight font-bold text-white sm:text-6xl sm:tracking-tight lg:text-[4rem] xl:text-[6rem] 2xl:text-[6.5rem] xl:tracking-tight"
-            >
-              The best way to setup an
-              <span class="text-[hsl(200,100%,60%)]"> opinionated,</span>
-              <span class="text-[hsl(240,100%,70%)] whitespace-nowrap">
-                full-stack,</span
+          <div class="flex flex-col gap-4 w-full items-center">
+            <div class="flex flex-col items-start justify-between">
+              <h1
+                class="text-4xl text-center tracking-tight font-bold text-white sm:text-6xl sm:tracking-tight lg:text-[4rem] xl:text-[6rem] 2xl:text-[6.5rem] xl:tracking-tight"
               >
-              <span class="text-[hsl(280,100%,60%)]"> typesafe</span>
-              Next.js project
-            </h1>
+                The best way to setup an
+                <span class="text-[hsl(200,100%,60%)]"> opinionated,</span>
+                <span class="text-[hsl(240,100%,70%)] whitespace-nowrap">
+                  full-stack,</span
+                >
+                <span class="text-[hsl(280,100%,60%)]"> typesafe</span>
+                Next.js project
+              </h1>
 
-            <div class="flex flex-col mt-8 w-full items-center">
-              <div class="flex justify-center w-full gap-4 max-w-xs">
+              <div
+                class="flex justify-center items-center w-full gap-4 xl:mt-8 mt-4"
+              >
                 <Button
                   href="/en/introduction"
                   openInNewTab={false}
@@ -65,88 +67,91 @@ import Button from "./button.astro";
                   </svg>
                 </Button>
               </div>
-              <div class="flex justify-center mt-4 xl:mt-8 h-full relative">
-                <button
-                  class="px-3 py-3 text-base md:text-lg md:px-3 md:py-3 lg:px-5 lg:py-4 lg:text-xl rounded-md cursor-pointer bg-white/10 hover:bg-white/20 transition-all duration-300 relative flex flex-row items-center gap-2 border border-t3-purple-200/20 hover:border-t3-purple-300/50"
-                  title="Copy the command to get started"
-                  id="command"
-                >
-                  <code id="command-text">npx create-t3-app@latest</code>
-                  <svg
-                    id="copy-icon"
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"
-                    ></rect><path
-                      d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
-                    ></path>
-                  </svg>
-                  <svg
-                    id="check-icon"
-                    class="hidden"
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    ><polyline points="20 6 9 17 4 12"></polyline>
-                  </svg>
-                </button>
+
+              <div class="flex flex-col w-full items-center">
+                <div class="flex mt-4 xl:mt-8 h-full relative">
+                  <button
+                    class="px-2 py-2 text-sm md:text-lg md:px-3 md:py-3 lg:px-5 lg:py-4 lg:text-xl rounded-md cursor-pointer bg-t3-purple-100/10 hover:bg-t3-purple-100/20 transition-all duration-300 relative flex flex-row items-center gap-2 border border-t3-purple-200/20 hover:border-t3-purple-300/50"
+                    title="Copy the command to get started"
+                    id="command"
+                  >
+                    <code id="command-text">npx create-t3-app@latest</code>
+                    <svg
+                      id="copy-icon"
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"
+                      ></rect><path
+                        d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+                      ></path>
+                    </svg>
+                    <svg
+                      id="check-icon"
+                      class="hidden"
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      ><polyline points="20 6 9 17 4 12"></polyline>
+                    </svg>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <script is:inline>
-    const command = document.querySelector("#command");
-    const commandText = document.querySelector("#command-text");
-    const copyIcon = document.querySelector("#copy-icon");
-    const checkIcon = document.querySelector("#check-icon");
-    let cooldown = false;
-
-    function toggleIcons() {
-      copyIcon.classList.toggle("hidden");
-      checkIcon.classList.toggle("hidden");
-    }
+    <script is:inline>
+      const command = document.querySelector("#command");
+      const commandText = document.querySelector("#command-text");
+      const copyIcon = document.querySelector("#copy-icon");
+      const checkIcon = document.querySelector("#check-icon");
+      let cooldown = false;
 
-    command.addEventListener("click", () => {
-      if (cooldown === false) {
-        cooldown = true;
-        navigator.clipboard.writeText(commandText.innerText);
-        toggleIcons();
+      function toggleIcons() {
+        copyIcon.classList.toggle("hidden");
+        checkIcon.classList.toggle("hidden");
+      }
 
-        setTimeout(() => {
+      command.addEventListener("click", () => {
+        if (cooldown === false) {
+          cooldown = true;
+          navigator.clipboard.writeText(commandText.innerText);
           toggleIcons();
-          cooldown = false;
-        }, 2000);
-      }
-    });
-  </script>
-</div>
 
-<style>
-  #check-icon {
-    stroke-dasharray: 450;
-    stroke-dashoffset: -30;
-    animation: draw 2s linear normal;
-  }
+          setTimeout(() => {
+            toggleIcons();
+            cooldown = false;
+          }, 2000);
+        }
+      });
+    </script>
+  </div>
+
+  <style>
+    #check-icon {
+      stroke-dasharray: 450;
+      stroke-dashoffset: -30;
+      animation: draw 2s linear normal;
+    }
 
-  @keyframes draw {
-    to {
-      stroke-dashoffset: 200;
+    @keyframes draw {
+      to {
+        stroke-dashoffset: 200;
+      }
     }
-  }
-</style>
+  </style>
+</div>

www/src/components/landingPage/button.astro

@@ -33,7 +33,7 @@ const specialHoverClass = specialHover
   href={href}
   target={openInNewTab ? "_blank" : "_self"}
   rel="noopener noreferrer"
-  class={`${specialHoverClass} ${roundedClass} ${variantClass} ${className} inline-flex items-center px-4 md:px-5 py-3 text-sm md:text-base font-semibold cursor-pointer hover:no-underline transition-all`}
+  class={`${specialHoverClass} ${roundedClass} ${variantClass} ${className} inline-flex items-center px-3 lg:px-4 lg:py-3 md:px-5 py-2 text-sm md:text-base font-semibold cursor-pointer hover:no-underline transition-all`}
 >
   <slot />
 </a>

www/src/components/landingPage/community/community.astro

@@ -10,10 +10,14 @@ export interface Props {}
   <div
     class="flex flex-col items-center justify-center max-w-7xl text-t3-purple-100 mx-auto px-4 sm:px-6 lg:px-8"
   >
-    <h3 class="mt-2 text-5xl tracking-tight font-bold text-t3-purple-50">
+    <h3
+      class="w-full mt-2 text-3xl lg:text-5xl md:text-5xl text-left lg:text-center md:text-center tracking-tight font-bold text-t3-purple-50"
+    >
       Community
     </h3>
-    <p class="mt-4 text-xl text-t3-purple-200 mb-10 max-w-3xl text-center">
+    <p
+      class="mt-4 lg:text-center md:text-center text-base lg:text-xl md:text-xl text-t3-purple-200 mb-10 max-w-3xl"
+    >
       Join our community to get help, share your projects, and even contribute
       to the project!
     </p>

www/src/components/landingPage/community/communityCard.astro

@@ -12,7 +12,7 @@ const { text, title, href } = Astro.props;
   href={href}
   target="_blank"
   rel="noopener noreferrer"
-  class="rounded-lg hover:bg-white/20 bg-white/10 transition-colors cursor-pointer w-full sm:h-64 hover:no-underline border border-t3-purple-200/20 hover:border-t3-purple-300/50"
+  class="rounded-lg hover:bg-t3-purple-200/20 bg-t3-purple-200/10 transition-colors cursor-pointer w-full sm:h-64 hover:no-underline border border-t3-purple-200/20 hover:border-t3-purple-300/50"
 >
   <div
     class="p-4 sm:p-2 md:p-4 flex flex-col items-center justify-center space-y-3 h-full"

www/src/components/landingPage/stack/stack.astro

@@ -5,16 +5,22 @@ import Feature from "./card.astro";
 ---
 
 <PageSection size={"24"} id="stack">
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-t3-purple-100">
-    <div class="text-center mb-10">
-      <h2 class="text-2xl font-semibold text-t3-purple-200">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 text-t3-purple-100">
+    <div class="lg:text-center md:text-center mb-10">
+      <h2
+        class="text-xl lg:text-2xl md:text-2xl font-semibold text-t3-purple-200"
+      >
         Libraries that work
       </h2>
-      <h3 class="mt-2 text-5xl tracking-tight font-bold text-t3-purple-50">
+      <h3
+        class="mt-2 text-3xl lg:text-5xl md:text-5xl tracking-tight font-bold text-t3-purple-50"
+      >
         Without the complex setup
       </h3>
 
-      <p class="mt-4 text-xl text-t3-purple-200 max-w-[40ch] mx-auto">
+      <p
+        class="mt-4 text-base lg:text-lg md:text-lg text-t3-purple-200 max-w-[40ch] mx-auto"
+      >
         create-t3-app gives you the option to install libraries that you need
         without the hassle of scaffolding it all yourself.
       </p>

www/src/components/landingPage/tweets/tweets.astro

@@ -64,19 +64,25 @@ if (import.meta.env.MODE === "CI" || !token) {
 
 <PageSection
   size={"24"}
-  className="grid grid-cols-1 md:grid-cols-2 max-w-7xl mx-auto gap-4 md:gap-10 px-4 sm:px-6 lg:px-8"
+  className="grid grid-cols-1 md:grid-cols-2 max-w-7xl mx-auto gap-4 md:gap-10 px-4 pb-12 sm:px-6 lg:px-8"
   id="love"
 >
   <div
     class="flex flex-col items-start text-left order-first md:order-last mb-10"
   >
-    <h2 class="text-2xl font-semibold text-t3-purple-200">
+    <h2
+      class="text-xl lg:text-2xl md:text-2xl font-semibold text-t3-purple-200"
+    >
       Loved by the community
     </h2>
-    <h3 class="mt-2 text-5xl tracking-tight font-bold text-t3-purple-50">
+    <h3
+      class="mt-2 text-3xl lg:text-5xl md:text-5xl tracking-tight font-bold text-t3-purple-50"
+    >
       What others have to say about create-t3-app
     </h3>
-    <p class="mt-4 text-xl text-t3-purple-200 max-w-3xl">
+    <p
+      class="mt-4 text-base lg:text-lg md:text-lg text-t3-purple-200 max-w-3xl"
+    >
       Want to be listed here? Mention <a
         href="twitter.com"
         rel="noopener noreferrer"

www/src/components/navigation/Search.tsx

@@ -55,9 +55,9 @@ export default function Search({ isLanding }: { isLanding: boolean }) {
         className={clsx(
           "transition-500 flex w-full cursor-text items-center justify-between rounded-lg px-4 py-2 text-sm font-medium transition-all",
           {
-            "border border-t3-purple-200/20 bg-white/10 hover:border-t3-purple-300/50 hover:bg-white/20":
+            "hover:bg-t3-purple/20 border border-t3-purple-200/20 bg-t3-purple-200/10 duration-300 hover:border-t3-purple-200/50":
               isLanding,
-            "bg-t3-purple-200/50 hover:bg-t3-purple-200/75 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-800":
+            "dark:hover:bg-t3-purple/20 border bg-t3-purple-200/50 duration-300 hover:bg-t3-purple-200/75 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:text-slate-100 dark:hover:border-t3-purple-200/50":
               !isLanding,
           },
         )}

www/src/components/navigation/leftSidebar.astro

@@ -18,7 +18,7 @@ const sidebar = SIDEBAR[langCode];
   aria-labelledby="grid-left"
   class="flex flex-col gap-4 pb-4 pt-6 md:pt-0 w-full md:w-auto max-h-full overflow-y-hidden hover:overflow-y-auto fixed top-20 bottom-0"
 >
-  <div class="w-full mx-auto p6-4 md:px-8 md:hidden">
+  <div class="w-full mx-auto px-6 md:px-8 md:hidden">
     <Search isLanding={isLanding} client:idle />
   </div>
   <div class="t3-scrollbar">