refactor(website): nav & landing

www/src/components/landingPage/about.astro

@@ -12,14 +12,18 @@ import PageSection from "./pageSection.astro";
     <h2 class="text-t3-purple-50 font-bold 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-lg 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-lg 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

@@ -9,21 +9,23 @@ import Button from "./button.astro";
         <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-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"
               >
-              <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-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-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/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-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-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

@@ -6,7 +6,7 @@ import NextAuthIcon from "./nextauth.png";
 
 <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">
+    <div class="lg:text-center md:text-center mb-10">
       <h2 class="text-2xl font-semibold text-t3-purple-200">
         Libraries that work
       </h2>

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">

www/src/components/navigation/navbar.astro

@@ -34,7 +34,7 @@ const navbarLinks: Array<{ href: string; label: string }> = [
   })}
   aria-label="Global"
 >
-  <div class="flex items-center justify-between w-full px-10">
+  <div class="flex items-center justify-between w-full px-4 lg:px-10 md:px-10">
     <div class="flex justify-between items-center w-full md:w-auto">
       <div>
         <a href="/">
@@ -47,15 +47,18 @@ const navbarLinks: Array<{ href: string; label: string }> = [
           />
         </a>
       </div>
-      <div class="hidden -space-x-1 md:flex md:ml-10">
+      <div class="hidden -space-x-1 md:flex md:ml-10 gap-2">
         {
           navbarLinks.map((navbarLink) => (
             <a
               class={clsx(
                 "relative inline-flex items-center rounded-md border border-transparent px-3 py-2 transition-colors hover:no-underline",
                 {
-                  "text-t3-purple-100 hover:text-t3-purple-300": isLanding,
-                  "text-t3-purple-500 dark:text-t3-purple-100 hover:text-t3-purple-400":
+                  "bg-t3-purple-200/10 text-t3-purple-300":
+                    navbarLink.href === currentPage,
+                  "text-t3-purple-100 hover:text-t3-purple-300 hover:bg-t3-purple-200/10 rounded-lg":
+                    isLanding,
+                  "text-t3-purple-500 dark:text-t3-purple-100 dark:hover:text-t3-purple-300 hover:text-t3-purple-400 dark:hover:bg-t3-purple-200/10 hover:bg-t3-purple-200/30 rounded-lg":
                     !isLanding,
                 },
               )}

www/src/components/navigation/sidebarToggle.astro

@@ -39,5 +39,9 @@ const isLanding = currentPage === "/";
   button.addEventListener("click", () => {
     body.classList.toggle("mobile-sidebar-toggle");
     button.toggleAttribute("aria-pressed");
+    button.innerHTML =
+      button.getAttribute("aria-pressed") === null
+        ? `<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 stroke-current fill-transparent" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg><span class="sr-only">Close sidebar</span>`
+        : `<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 stroke-current fill-transparent" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg><span class="sr-only">Toggle sidebar</span>`;
   });
 </script>

www/src/components/navigation/themeToggleButton.astro

@@ -1,5 +1,5 @@
 <div
-  class="flex bg-t3-purple-200/50 dark:bg-slate-700 p-2 w-fit mx-auto rounded-lg gap-3"
+  class="flex bg-t3-purple-200/50 dark:bg-t3-purple-200/10 border dark:border-t3-purple-200/20 dark:hover:border-t3-purple-200/50 duration-300 p-2 w-fit mx-auto rounded-lg gap-3"
 >
   <label class="cursor-pointer text-t3-purple-500 dark:text-slate-50">
     <!-- Sun -->
@@ -72,8 +72,8 @@
 
   const toggleTheme = (t) => {
     localStorage.setItem("theme", t);
-    html.classList.toggle("light");
-    html.classList.toggle("dark");
+    html.classList.add(t === "dark" ? "dark" : "light");
+    html.classList.remove(t === "dark" ? "light" : "dark");
   };
 
   lightToggle.addEventListener("change", () => toggleTheme("light"));

www/src/styles/global.css

@@ -39,10 +39,11 @@
   html {
     scroll-padding-top: 7rem;
     scroll-behavior: smooth;
+    @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-t3-purple-300 scrollbar-track-rounded-sm scrollbar-thumb-rounded-sm dark:scrollbar-track-transparent dark:scrollbar-thumb-t3-purple-200;
   }
 
   .t3-scrollbar {
-    @apply scrollbar-thin scrollbar-track-slate-300 scrollbar-thumb-t3-purple-300 scrollbar-track-rounded-sm scrollbar-thumb-rounded-sm dark:scrollbar-track-slate-600 dark:scrollbar-thumb-t3-purple-50;
+    @apply scrollbar-thin scrollbar-track-slate-300 scrollbar-thumb-t3-purple-300 scrollbar-track-rounded-sm scrollbar-thumb-rounded-sm dark:scrollbar-track-slate-600 dark:scrollbar-thumb-t3-purple-200;
   }
 
   /* Typewriter */