From 4a8424aded44862c6cfe1b1658b0c80f5db8b92f Mon Sep 17 00:00:00 2001
From: asrvd <asheeshh@duck.com>
Date: Sun, 2 Oct 2022 20:37:45 +0530
Subject: [PATCH 1/9] refactor: nav & landing

---
 www/src/components/landingPage/about.astro    |  16 +-
 www/src/components/landingPage/banner.astro   | 177 +++++++++---------
 .../landingPage/community/communityCard.astro |   2 +-
 www/src/components/navigation/Search.tsx      |   4 +-
 .../components/navigation/leftSidebar.astro   |   2 +-
 www/src/components/navigation/navbar.astro    |   8 +-
 .../navigation/themeToggleButton.astro        |   6 +-
 www/src/styles/global.css                     |   2 +-
 8 files changed, 113 insertions(+), 104 deletions(-)

diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro
index ea0be936b7..b0cef9c131 100644
--- a/www/src/components/landingPage/about.astro
+++ b/www/src/components/landingPage/about.astro
@@ -8,18 +8,20 @@ import PageSection from "./pageSection.astro";
   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">
+  <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 text-center sm:text-center lg:text-left md:text-left 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-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
diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro
index d73617262b..07b931f760 100644
--- a/www/src/components/landingPage/banner.astro
+++ b/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 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-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>
diff --git a/www/src/components/landingPage/community/communityCard.astro b/www/src/components/landingPage/community/communityCard.astro
index 4a6c88d642..60ef4003a0 100644
--- a/www/src/components/landingPage/community/communityCard.astro
+++ b/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"
diff --git a/www/src/components/navigation/Search.tsx b/www/src/components/navigation/Search.tsx
index c2131a6d4a..e73d2ba84e 100644
--- a/www/src/components/navigation/Search.tsx
+++ b/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,
           },
         )}
diff --git a/www/src/components/navigation/leftSidebar.astro b/www/src/components/navigation/leftSidebar.astro
index 89b0acbdbc..73a01c3834 100644
--- a/www/src/components/navigation/leftSidebar.astro
+++ b/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">
diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro
index 93a2f0aa41..02576cec5a 100644
--- a/www/src/components/navigation/navbar.astro
+++ b/www/src/components/navigation/navbar.astro
@@ -47,15 +47,17 @@ 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,
                 },
               )}
diff --git a/www/src/components/navigation/themeToggleButton.astro b/www/src/components/navigation/themeToggleButton.astro
index 50cf1d1cfc..320bf46718 100644
--- a/www/src/components/navigation/themeToggleButton.astro
+++ b/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"));
diff --git a/www/src/styles/global.css b/www/src/styles/global.css
index a6375d31d7..ae549165f6 100644
--- a/www/src/styles/global.css
+++ b/www/src/styles/global.css
@@ -42,7 +42,7 @@
   }
 
   .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 */

From 9c4c77dfc9478440a23c4e5c80227793072abe4a Mon Sep 17 00:00:00 2001
From: asrvd <asheeshh@duck.com>
Date: Sun, 2 Oct 2022 20:47:40 +0530
Subject: [PATCH 2/9] fix: format again

---
 www/src/components/landingPage/about.astro | 16 ++++++++++------
 www/src/components/navigation/navbar.astro |  3 ++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro
index b0cef9c131..2d32cc6dfb 100644
--- a/www/src/components/landingPage/about.astro
+++ b/www/src/components/landingPage/about.astro
@@ -8,20 +8,24 @@ import PageSection from "./pageSection.astro";
   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 text-center sm:text-center lg:text-left md:text-left font-bold text-3xl lg:text-5xl md:text-5xl w-full mb-2">
+  <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 text-center sm:text-center lg:text-left md:text-left 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-lg lg:text-xl xl:text-xl md: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.
     </p>
-    <p class="mt-4 text-lg lg:text-xl xl:text-xl md: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
diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro
index 02576cec5a..bf8fa5866b 100644
--- a/www/src/components/navigation/navbar.astro
+++ b/www/src/components/navigation/navbar.astro
@@ -54,7 +54,8 @@ const navbarLinks: Array<{ href: string; label: string }> = [
               class={clsx(
                 "relative inline-flex items-center rounded-md border border-transparent px-3 py-2 transition-colors hover:no-underline",
                 {
-                  "bg-t3-purple-200/10 text-t3-purple-300": navbarLink.href === currentPage,
+                  "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":

From 6c562374e679df179824e93102e6f83b6b4b46c8 Mon Sep 17 00:00:00 2001
From: asrvd <asheeshh@duck.com>
Date: Mon, 3 Oct 2022 16:20:04 +0530
Subject: [PATCH 3/9] feat: better toggle button

---
 www/src/components/landingPage/about.astro               | 2 +-
 www/src/components/landingPage/banner.astro              | 4 +++-
 www/src/components/landingPage/community/community.astro | 4 ++--
 www/src/components/landingPage/stack/stack.astro         | 2 +-
 www/src/components/navigation/navbar.astro               | 2 +-
 www/src/components/navigation/sidebarToggle.astro        | 4 ++++
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro
index 2d32cc6dfb..8e8d73f2d6 100644
--- a/www/src/components/landingPage/about.astro
+++ b/www/src/components/landingPage/about.astro
@@ -10,7 +10,7 @@ import PageSection from "./pageSection.astro";
 >
   <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 text-center sm:text-center lg:text-left md:text-left font-bold text-3xl lg:text-5xl md:text-5xl w-full mb-2"
+      class="text-t3-purple-50 font-bold text-5xl w-full mb-2"
     >
       What is this? Some kinda template?
     </h2>
diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro
index 07b931f760..61d2010ac8 100644
--- a/www/src/components/landingPage/banner.astro
+++ b/www/src/components/landingPage/banner.astro
@@ -69,7 +69,9 @@ import Button from "./button.astro";
               </div>
 
               <div class="flex flex-col w-full items-center">
-                <div class="flex justify-center mt-4 xl:mt-8 h-full relative">
+                <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"
diff --git a/www/src/components/landingPage/community/community.astro b/www/src/components/landingPage/community/community.astro
index b43592de42..7c2e6f10c9 100644
--- a/www/src/components/landingPage/community/community.astro
+++ b/www/src/components/landingPage/community/community.astro
@@ -10,10 +10,10 @@ 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>
diff --git a/www/src/components/landingPage/stack/stack.astro b/www/src/components/landingPage/stack/stack.astro
index 210cc5ba59..28d46d0e7a 100644
--- a/www/src/components/landingPage/stack/stack.astro
+++ b/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>
diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro
index bf8fa5866b..6470f89692 100644
--- a/www/src/components/navigation/navbar.astro
+++ b/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="/">
diff --git a/www/src/components/navigation/sidebarToggle.astro b/www/src/components/navigation/sidebarToggle.astro
index 4001f38be8..cfc45aaeee 100644
--- a/www/src/components/navigation/sidebarToggle.astro
+++ b/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>

From da4110d4b8f3839fb53cb59a5e576c630fefb883 Mon Sep 17 00:00:00 2001
From: asrvd <asheeshh@duck.com>
Date: Mon, 3 Oct 2022 16:24:28 +0530
Subject: [PATCH 4/9] refactor: global scrollbar

---
 www/src/styles/global.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/www/src/styles/global.css b/www/src/styles/global.css
index ae549165f6..d8225521d4 100644
--- a/www/src/styles/global.css
+++ b/www/src/styles/global.css
@@ -39,6 +39,7 @@
   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 {

From a7fd53117bab1fbe42c2c7b77cc09dcb86c28aa2 Mon Sep 17 00:00:00 2001
From: asrvd <asheeshh@duck.com>
Date: Mon, 3 Oct 2022 16:26:47 +0530
Subject: [PATCH 5/9] fix: forgor prettier

---
 www/src/components/landingPage/about.astro               | 4 +---
 www/src/components/landingPage/banner.astro              | 4 +---
 www/src/components/landingPage/community/community.astro | 8 ++++++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro
index 8e8d73f2d6..0202ac33e0 100644
--- a/www/src/components/landingPage/about.astro
+++ b/www/src/components/landingPage/about.astro
@@ -9,9 +9,7 @@ import PageSection from "./pageSection.astro";
   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-5xl w-full mb-2">
       What is this? Some kinda template?
     </h2>
     <p
diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro
index 61d2010ac8..0339cece2e 100644
--- a/www/src/components/landingPage/banner.astro
+++ b/www/src/components/landingPage/banner.astro
@@ -69,9 +69,7 @@ import Button from "./button.astro";
               </div>
 
               <div class="flex flex-col w-full items-center">
-                <div
-                  class="flex mt-4 xl:mt-8 h-full relative"
-                >
+                <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"
diff --git a/www/src/components/landingPage/community/community.astro b/www/src/components/landingPage/community/community.astro
index 7c2e6f10c9..57baf33a54 100644
--- a/www/src/components/landingPage/community/community.astro
+++ b/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="w-full mt-2 text-5xl text-left lg:text-center md:text-center 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 lg:text-center md:text-center text-xl text-t3-purple-200 mb-10 max-w-3xl">
+    <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>

From 133829bd86a1643fd2ccce3a95056d1afe01b40a Mon Sep 17 00:00:00 2001
From: asrvd <asheeshh@duck.com>
Date: Mon, 3 Oct 2022 16:45:05 +0530
Subject: [PATCH 6/9] refactor: make the scrollbar thumb colors same

---
 www/src/styles/global.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/src/styles/global.css b/www/src/styles/global.css
index d8225521d4..b4cf395870 100644
--- a/www/src/styles/global.css
+++ b/www/src/styles/global.css
@@ -39,11 +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;
+    @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-300;
   }
 
   .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-200;
+    @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-300;
   }
 
   /* Typewriter */

From 7965f94b3e62a205d41b4153c54129a025582552 Mon Sep 17 00:00:00 2001
From: asrvd <asheeshh@duck.com>
Date: Mon, 3 Oct 2022 16:52:31 +0530
Subject: [PATCH 7/9] refactor: more scrollbar changes

---
 www/src/styles/global.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/src/styles/global.css b/www/src/styles/global.css
index b4cf395870..05e6cec9e5 100644
--- a/www/src/styles/global.css
+++ b/www/src/styles/global.css
@@ -39,11 +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-300;
+    @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-t3-purple-300 dark:scrollbar-track-transparent dark:scrollbar-thumb-t3-purple-300 ;
   }
 
   .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-300;
+    @apply scrollbar-thin scrollbar-track-slate-300 scrollbar-thumb-t3-purple-300 dark:scrollbar-track-t3-purple-200/10 dark:scrollbar-thumb-t3-purple-300;
   }
 
   /* Typewriter */

From 0ed3bb1a004065274bc3109a205ccfc5257dfe81 Mon Sep 17 00:00:00 2001
From: asrvd <asheeshh@duck.com>
Date: Mon, 3 Oct 2022 17:36:17 +0530
Subject: [PATCH 8/9] refactor: more refactoring

---
 www/src/components/footer/footer.astro             |  4 +---
 www/src/components/landingPage/about.astro         | 10 ++++++----
 www/src/components/landingPage/banner.astro        |  6 +++---
 www/src/components/landingPage/button.astro        |  2 +-
 .../landingPage/community/community.astro          |  4 ++--
 www/src/components/landingPage/stack/stack.astro   | 14 ++++++++++----
 www/src/components/landingPage/tweets/tweets.astro | 14 ++++++++++----
 www/src/layouts/landingPage.astro                  |  2 +-
 8 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/www/src/components/footer/footer.astro b/www/src/components/footer/footer.astro
index 60204abfff..cf86442992 100644
--- a/www/src/components/footer/footer.astro
+++ b/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-16 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 space-y-3 divide-y divide-gray-400 md:space-y-12 divide-opacity-50 pt-6"
diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro
index 0202ac33e0..548a268b28 100644
--- a/www/src/components/landingPage/about.astro
+++ b/www/src/components/landingPage/about.astro
@@ -4,16 +4,18 @@ 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-lg lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto"
+      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"
@@ -22,7 +24,7 @@ import PageSection from "./pageSection.astro";
       we do not believe these are needed on every project.
     </p>
     <p
-      class="mt-4 text-lg lg:text-xl xl:text-xl md:text-xl text-t3-purple-200 max-w-3xl mx-auto"
+      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.
diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro
index 0339cece2e..a19c30da15 100644
--- a/www/src/components/landingPage/banner.astro
+++ b/www/src/components/landingPage/banner.astro
@@ -2,7 +2,7 @@
 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">
@@ -12,7 +12,7 @@ import Button from "./button.astro";
           <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"
+                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"
               >
                 The best way to setup an
                 <span class="text-[hsl(200,100%,60%)]"> opinionated,</span>
@@ -71,7 +71,7 @@ import Button from "./button.astro";
               <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"
+                    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"
                   >
diff --git a/www/src/components/landingPage/button.astro b/www/src/components/landingPage/button.astro
index f2c250a13b..6c07689fd4 100644
--- a/www/src/components/landingPage/button.astro
+++ b/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>
diff --git a/www/src/components/landingPage/community/community.astro b/www/src/components/landingPage/community/community.astro
index 57baf33a54..0ea528922b 100644
--- a/www/src/components/landingPage/community/community.astro
+++ b/www/src/components/landingPage/community/community.astro
@@ -11,12 +11,12 @@ export interface Props {}
     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="w-full mt-2 text-5xl text-left lg:text-center md:text-center tracking-tight font-bold text-t3-purple-50"
+      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 lg:text-center md:text-center text-xl text-t3-purple-200 mb-10 max-w-3xl"
+      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!
diff --git a/www/src/components/landingPage/stack/stack.astro b/www/src/components/landingPage/stack/stack.astro
index 28d46d0e7a..40ef22d43e 100644
--- a/www/src/components/landingPage/stack/stack.astro
+++ b/www/src/components/landingPage/stack/stack.astro
@@ -5,16 +5,22 @@ 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="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-2xl font-semibold text-t3-purple-200">
+      <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>
diff --git a/www/src/components/landingPage/tweets/tweets.astro b/www/src/components/landingPage/tweets/tweets.astro
index 68d64f0409..6b6d9064d6 100644
--- a/www/src/components/landingPage/tweets/tweets.astro
+++ b/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"
diff --git a/www/src/layouts/landingPage.astro b/www/src/layouts/landingPage.astro
index 5f2e316fa9..54f44c9df1 100644
--- a/www/src/layouts/landingPage.astro
+++ b/www/src/layouts/landingPage.astro
@@ -26,7 +26,7 @@ const currentPage = Astro.url.pathname;
     <JumpToContent />
     <img
       src="/images/background-pattern.svg"
-      class="absolute inset-0 opacity-5 h-max w-max object-cover"
+      class="absolute inset-0 opacity-5 h-min w-min object-cover"
     />
     <div class="relative">
       <Navbar />

From 1cde649d1c28571f217aaad84214c6b913f6d97e Mon Sep 17 00:00:00 2001
From: asrvd <asheeshh@duck.com>
Date: Wed, 5 Oct 2022 19:55:04 +0530
Subject: [PATCH 9/9] fix: idk what happened

---
 www/src/components/navigation/navbar.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro
index 641e17358c..8a429787c4 100644
--- a/www/src/components/navigation/navbar.astro
+++ b/www/src/components/navigation/navbar.astro
@@ -56,9 +56,9 @@ const navbarLinks: Array<{ href: string; label: string }> = [
                 {
                   "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":
+                  "rounded-lg text-t3-purple-100 hover:bg-t3-purple-200/10 hover:text-t3-purple-300":
                     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":
+                  "rounded-lg text-t3-purple-500 hover:bg-t3-purple-200/30 hover:text-t3-purple-400 dark:text-t3-purple-100 dark:hover:bg-t3-purple-200/10 dark:hover:text-t3-purple-300":
                     !isLanding,
                 },
               )}