feat(hero): redesign

www/src/components/landingPage/banner.astro

@@ -1,124 +1,109 @@
-<section>
-  <div class="overflow-x-hidden">
-    <div class="relative w-full h-full overflow-hidden py-8 md:py-16 z-0">
-      <div
-        class="absolute top-20 left-[10%] lg:left-[33%] w-36 h-36 sm:w-48 sm:h-48 lg:w-72 lg:h-72 bg-t3-purple-200 opacity-10 mix-blend-overlay rounded-full filter blur-xl animate-blob -z-10 select-none touch-none overflow-hidden"
-      >
-      </div>
-      <div
-        class="absolute top-16 right-[10%] lg:right-[33%] w-36 h-36 sm:w-48 sm:h-48 lg:w-72 lg:h-72 bg-t3-purple-200 opacity-10 mix-blend-overlay rounded-full filter blur-xl animate-blob animation-delay-2000 -z-10 select-none touch-none overflow-hidden"
-      >
-      </div>
-      <div
-        class="absolute bottom-32 sm:bottom-8 right-[33%] sm:right-[38%] lg:right-[42%] lg:bottom-10 w-36 h-36 sm:w-48 sm:h-48 lg:w-72 lg:h-72 bg-t3-purple-200 opacity-10 mix-blend-overlay rounded-full filter blur-xl animate-blob animation-delay-4000 -z-10 select-none touch-none overflow-hidden"
-      >
-      </div>
-      <div class="mx-auto max-w-8xl lg:px-8">
-        <div class="flex flex-col items-center justify-center text-center">
-          <div
-            class="mx-auto max-w-md px-4 sm:max-w-2xl md:max-w-3xl sm:px-6 sm:text-center lg:px-0 lg:flex lg:items-center"
-          >
-            <div class="lg:py-12 flex flex-col items-start justify-between">
-              <h1
-                class="mt-4 text-5xl tracking-tight font-bold text-white sm:mt-5 sm:text-6xl sm:tracking-tight lg:mt-6 xl:text-7xl xl:tracking-tight"
-              >
-                The best way to setup an
-                <span class="text-purple-400"> opinionated,</span>
-                <span class="text-purple-600"> full-stack,</span>
-                <span class="text-t3-purple-400"> typesafe</span>
-                Next.js project
-              </h1>
+---
+import Button from "./button.astro";
+import PageSection from "./pageSection.astro";
+---
 
-              <div
-                class="flex flex-col items-center justify-center mt-8 w-full"
+<PageSection size="16">
+  <div class="max-w-[800px] xl:max-w-7xl mx-auto">
+    <div class="max-w-8xl 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="lg:py-12 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-7xl 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 items-center justify-center w-full gap-4 max-w-xs"
+              <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">
+                <Button
+                  href="/en/introduction"
+                  openInNewTab={false}
+                  rounded="md"
+                  className="group"
+                  rounded="full"
+                  specialHover={true}
                 >
-                  <a
-                    href="/en/introduction"
-                    class="inline-flex items-center rounded-full p-1 pr-2 sm:text-base lg:text-sm xl:text-base cursor-pointer hover:no-underline"
+                  Documentation
+                  <svg
+                    class="mt-0.5 h-3 ml-2 -mr-1 stroke-current stroke stroke-2"
+                    fill="none"
+                    viewBox="0 0 10 10"
+                    aria-hidden="true"
                   >
-                    <span
-                      class="group inline-flex items-center px-5 py-3 text-slate-800 text-sm font-semibold leading-5 bg-t3-purple-100 rounded-full transition justify-between hover:bg-t3-purple-200"
-                    >
-                      Documentation
-                      <svg
-                        class="mt-0.5 h-3 ml-2 -mr-1 stroke-current stroke stroke-2"
-                        fill="none"
-                        viewBox="0 0 10 10"
-                        aria-hidden="true"
-                      >
-                        <path
-                          class="opacity-0 transition group-hover:opacity-100"
-                          d="M0 5h7"></path>
-                        <path
-                          class="transition group-hover:translate-x-[3px]"
-                          d="M1 1l4 4-4 4"></path>
-                      </svg>
-                    </span>
-                  </a>
-                  <a
-                    href="https://github.com/t3-oss/create-t3-app"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="inline-flex items-center rounded-full px-5 py-3 font-semibold sm:text-base lg:text-sm xl:text-base cursor-pointer bg-white/10 hover:bg-white/20 hover:no-underline"
-                  >
-                    <span
-                      class="ml-1 px-2 py-0.5 text-sm flex items-center justify-between text-white"
-                    >
-                      Github
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 448 512"
-                        class="h-3 ml-2 fill-white"
-                      >
-                        <path
-                          d="M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z"
-                        ></path>
-                      </svg>
-                    </span>
-                  </a>
-                </div>
-                <div class="mt-8 block h-full relative mx-auto">
-                  <button
-                    class="px-2 py-2 text-lg sm:px-5 sm:py-4 sm: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"
+                    <path
+                      class="opacity-0 transition group-hover:opacity-100"
+                      d="M0 5h7"></path>
+                    <path
+                      class="transition group-hover:translate-x-[3px]"
+                      d="M1 1l4 4-4 4"></path>
+                  </svg>
+                </Button>
+                <Button
+                  href="https://github.com/t3-oss/create-t3-app"
+                  openInNewTab={true}
+                  variant="secondary"
+                  rounded="full"
+                >
+                  Github
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 448 512"
+                    class="h-3 ml-2 fill-white"
                   >
-                    <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>
+                    <path
+                      d="M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z"
+                    ></path>
+                  </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>
             </div>
           </div>
@@ -151,7 +136,7 @@
       }
     });
   </script>
-</section>
+</PageSection>
 
 <style>
   #check-icon {

www/src/components/landingPage/button.astro

@@ -0,0 +1,39 @@
+---
+export interface Props {
+  href?: string;
+  openInNewTab?: boolean;
+  rounded?: "full" | "md" | "none";
+  variant?: "primary" | "secondary";
+  specialHover?: boolean;
+  className?: string;
+}
+
+const {
+  href = "",
+  rounded = "md",
+  variant = "primary",
+  openInNewTab = false,
+  className = "",
+  specialHover = false,
+} = Astro.props;
+
+const roundedClass =
+  rounded === "full" ? "rounded-full" : rounded === "md" ? "rounded-md" : "";
+const variantClass =
+  variant === "primary"
+    ? "bg-t3-purple-100 hover:bg-t3-purple-200 text-slate-800"
+    : "bg-white/10 hover:bg-white/20 text-white";
+
+const specialHoverClass = specialHover
+  ? "hover:shadow hover:shadow-[#300171] duration-500"
+  : "";
+---
+
+<a
+  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`}
+>
+  <slot />
+</a>

www/src/components/landingPage/pageSection.astro

@@ -5,7 +5,7 @@ export interface Props {
   size: "6" | "12" | "16" | "24" | "32";
   className?: string;
   bottomPadding?: boolean;
-  id: string;
+  id?: string;
 }
 
 const sizes = {
@@ -24,7 +24,7 @@ const sizesOnlyTop = {
   32: "pt-12 md:pt-20 lg:pt-32",
 };
 
-const { size, className, bottomPadding = true, id } = Astro.props;
+const { size, className, bottomPadding = true, id = "" } = Astro.props;
 ---
 
 <section

www/src/components/navigation/Search.tsx

@@ -55,7 +55,8 @@ 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",
           {
-            "bg-white/10 hover:bg-white/20": isLanding,
+            "border border-t3-purple-200/20 bg-white/10 hover:border-t3-purple-300/50 hover:bg-white/20":
+              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":
               !isLanding,
           },

www/src/components/navigation/navbar.astro

@@ -52,7 +52,7 @@ const navbarLinks: Array<{ href: string; label: string }> = [
           navbarLinks.map((navbarLink) => (
             <a
               class={clsx(
-                "relative inline-flex items-center rounded-md border border-transparent px-3 py-2 font-medium",
+                "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":

www/src/layouts/landingPage.astro

@@ -21,17 +21,23 @@ const currentPage = Astro.url.pathname;
     <title>{SITE.title}</title>
   </head>
   <body class="bg-gradient-to-b from-gray-900 via-[#300171] to-slate-900">
-    <Navbar />
+    <img
+      src="/images/background-pattern.svg"
+      class="absolute inset-0 opacity-5 h-max w-max object-cover"
+    />
     <div class="relative">
-      <aside id="grid-left" class="hidden" title="Site Navigation">
-        <div
-          class="fixed top-0 pt-16 h-screen md:pt-0 md:h-auto md:sticky md:top-20 z-40 bg-gradient-to-b via-[#300171] from-gray-900 to-slate-900 w-full overflow-y-auto"
-        >
-          <LeftSidebar currentPage={currentPage} />
-        </div>
-      </aside>
+      <Navbar />
+      <main class="relative">
+        <aside id="grid-left" class="hidden" title="Site Navigation">
+          <div
+            class="fixed top-0 pt-16 h-screen md:pt-0 md:h-auto md:sticky md:top-20 z-40 bg-gradient-to-b via-[#300171] from-gray-900 to-slate-900 w-full overflow-y-auto"
+          >
+            <LeftSidebar currentPage={currentPage} />
+          </div>
+        </aside>
+      </main>
+      <slot />
+      <Footer isBlog={false} path="/" />
     </div>
-    <slot />
-    <Footer isBlog={false} path="/" />
   </body>
 </html>

www/src/styles/global.css

@@ -7,7 +7,7 @@
   html {
     --color-default: 236 228 236;
     --color-neutral: 29 40 58;
-    --color-primary: 122 98 246;
+    --color-primary: 112 64 255;
     --color-secondary: 58 191 248;
     --color-accent: 244 113 181;
     --color-warning: 244 193 82;
@@ -23,7 +23,7 @@
   html.dark {
     --color-default: 15 23 41;
     --color-neutral: 29 40 58;
-    --color-primary: 122 98 246;
+    --color-primary: 112 64 255;
     --color-secondary: 58 191 248;
     --color-accent: 244 113 181;
     --color-warning: 244 193 82;