refactor: various landing page components

www/package.json

@@ -18,6 +18,7 @@
     "@fontsource/inter": "^4.5.12",
     "astro-seo": "^0.6.0",
     "clsx": "^1.2.1",
+    "swiper": "^8.4.2",
     "tailwind-scrollbar": "^2.0.1"
   },
   "devDependencies": {

www/src/components/landingPage/about.astro

@@ -1,15 +1,17 @@
 ---
 import CliPreview from "./cli";
+import PageSection from "./pageSection.astro";
 ---
 
-<section
-  class="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 lg:py-16"
+<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"
+  size={"24"}
 >
   <div class="flex flex-col gap-2 md:gap-4 max-w-[800px] xl:max-w-full mx-auto">
-    <h1 class="text-t3-purple-100 text-center font-bold text-4xl w-full mb-2">
+    <h2 class="text-t3-purple-50 text-center font-bold text-5xl w-full mb-2">
       What is this? Some kinda template?
-    </h1>
-    <p class="text-t3-purple-100 text-lg text-center">
+    </h2>
+    <p class="mt-4 text-xl text-t3-purple-200 max-w-3xl mx-auto text-center">
       Kind of. We love all of the technologies that create-t3-app includes -
       check out <a
         href="https://init.tips"
@@ -18,7 +20,7 @@ import CliPreview from "./cli";
       </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="text-t3-purple-100 text-lg text-center">
+    <p class="mt-4 text-xl text-t3-purple-200 max-w-3xl mx-auto text-center">
       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
@@ -28,4 +30,4 @@ import CliPreview from "./cli";
   <div>
     <CliPreview client:only="react" />
   </div>
-</section>
+</PageSection>

www/src/components/landingPage/banner.astro

@@ -1,6 +1,6 @@
 <section>
   <div class="overflow-x-hidden">
-    <div class="relative w-full h-full overflow-hidden py-16 xl:py-32 z-0">
+    <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"
       >
@@ -20,14 +20,13 @@
           >
             <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-6xl xl:tracking-tight"
+                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"
               >
-                <span class="block">
-                  The best way to setup an<br />
-                  <span class="text-t3-purple-200 text-4xl">
-                    opinionated, full-stack, typesafe Next.js project
-                  </span>
-                </span>
+                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>
 
               <div
@@ -83,11 +82,11 @@
                 </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 text-blue-300 rounded-md cursor-pointer bg-white/10 hover:bg-white/20 transition-all duration-300 relative flex flex-row items-center gap-2"
+                    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"
                   >
-                    <code id="command-text"> npx create-t3-app@latest</code>
+                    <code id="command-text">npx create-t3-app@latest</code>
                     <svg
                       id="copy-icon"
                       xmlns="http://www.w3.org/2000/svg"

www/src/components/landingPage/cli.tsx

@@ -3,10 +3,10 @@ import Typist from "react-typist";
 
 export default function CodeCard() {
   return (
-    <div className="md:w-[550px] w-full sm:w-[600px] mx-auto overflow-hidden my-5 rounded-lg">
+    <div className="md:w-[600px] w-full sm:w-[700px] mx-auto overflow-hidden rounded-lg">
       <div
-        className="coding inverse-toggle px-1 sm:px-2 md:px-5 shadow-lg text-green-400 text-[10px] sm:text-xs font-mono subpixel-antialiased 
-              bg-neutral pb-6 pt-4 rounded-lg leading-normal overflow-hidden h-[270px] sm:h-[290px] md:h-[350px] lg:h-[310px]"
+        className="inverse-toggle px-1 sm:px-2 md:px-5 shadow-lg text-t3-purple-50 text-[10px] sm:text-xs font-mono subpixel-antialiased 
+        border border-t3-purple-200/20 transition-all bg-white/10 pb-6 pt-4 rounded-lg leading-normal overflow-hidden h-[300px] sm:h-[400px] md:h-[450px] lg:h-[400px]"
       >
         <div className="top mb-2 flex">
           <div className="h-3 w-3 bg-red-500 rounded-full"></div>
@@ -18,7 +18,7 @@ export default function CodeCard() {
           <Typist.Delay ms={1250} />
         </Typist>
         <Typist
-          className="font-mono leading-1 text-transparent bg-clip-text bg-gradient-to-r text-[9px] sm:text-xs from-blue-400 via-green-300 to-pink-600"
+          className="font-mono leading-1 text-transparent bg-clip-text bg-gradient-to-r text-[6px] sm:text-xs from-blue-400 via-green-300 to-pink-600"
           cursor={{ show: false }}
           avgTypingDelay={-500}
         >

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

@@ -1,21 +1,24 @@
 ---
+import PageSection from "../pageSection.astro";
 import CommunityCard from "./communityCard.astro";
 
 // eslint-disable-next-line -- need to export something to make it a module
 export interface Props {}
 ---
 
-<section>
+<PageSection size={"24"} bottomPadding={false}>
   <div
-    class="flex flex-col items-center justify-center max-w-7xl text-t3-purple-100 mx-auto"
+    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"
   >
-    <h1 class="text-3xl py-3 font-bold">Community</h1>
-    <p class="text-center pb-8 px-4">
+    <h3 class="mt-2 text-5xl 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">
       Join our community to get help, share your projects, and even contribute
       to the project!
     </p>
     <div
-      class="flex flex-col sm:flex-row items-start justify-center space-y-4 sm:space-y-0 sm:space-x-6 mx-2 sm:mx-4 lg:mx-8"
+      class="flex flex-col sm:flex-row items-start justify-center space-y-4 sm:space-y-0 sm:space-x-6"
     >
       <CommunityCard
         title="Discord"
@@ -73,4 +76,4 @@ export interface Props {}
       </CommunityCard>
     </div>
   </div>
-</section>
+</PageSection>

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

@@ -12,11 +12,15 @@ const { text, title, href } = Astro.props;
   href={href}
   target="_blank"
   rel="noopener noreferrer"
-  class="py-8 flex flex-col items-center justify-center rounded-lg p-3 space-y-3 h-60 hover:bg-white/20 bg-white/10 transition-colors cursor-pointer w-full hover:no-underline"
+  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"
 >
-  <div class="w-14 h-14"><slot name="icon" /></div>
-  <h2 class="text-xl font-black">{title}</h2>
-  <p class="text-center">
-    {text}
-  </p>
+  <div
+    class="p-4 sm:p-2 md:p-4 flex flex-col items-center justify-center space-y-3 h-full"
+  >
+    <div class="w-14 h-14"><slot name="icon" /></div>
+    <h2 class="text-xl font-black">{title}</h2>
+    <p class="text-center">
+      {text}
+    </p>
+  </div>
 </a>

www/src/components/landingPage/pageSection.astro

@@ -0,0 +1,33 @@
+---
+export interface Props {
+  size: "6" | "12" | "16" | "24" | "32";
+  className?: string;
+  bottomPadding?: boolean;
+}
+
+const sizes = {
+  6: "py-2 md:py-4 lg:py-6",
+  12: "py-4 md:py-8 lg:py-12",
+  16: "py-6 md:py-10 lg:py-16",
+  24: "py-8 md:py-16 lg:py-24",
+  32: "py-12 md:py-20 lg:py-32",
+};
+
+const sizesOnlyTop = {
+  6: "pt-2 md:pt-4 lg:pt-6",
+  12: "pt-4 md:pt-8 lg:pt-12",
+  16: "pt-6 md:pt-10 lg:pt-16",
+  24: "pt-8 md:pt-16 lg:pt-24",
+  32: "pt-12 md:pt-20 lg:pt-32",
+};
+
+const { size, className, bottomPadding = true } = Astro.props;
+---
+
+<section
+  class={`${
+    bottomPadding === false ? sizesOnlyTop[size] : sizes[size]
+  } ${className}`}
+>
+  <slot />
+</section>

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

@@ -7,7 +7,9 @@ export interface Props {
 const { title, href } = Astro.props;
 ---
 
-<div class="relative bg-white/5 rounded-md flex flex-col justify-between">
+<div
+  class="relative bg-white/5 rounded-md flex flex-col justify-between border border-t3-purple-200/20 hover:border-t3-purple-300/50 transition-colors"
+>
   <a
     href={href}
     target="_blank"

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

@@ -1,27 +1,26 @@
 ---
+import PageSection from "../pageSection.astro";
 import Feature from "./card.astro";
 import NextAuthIcon from "./nextauth.png";
 ---
 
-<section>
-  <div
-    class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8 lg:grid lg:grid-cols-3 lg:gap-x-8 xl:gap-x-32 text-t3-purple-100"
-  >
-    <div>
-      <h2 class="text-2xl font-semibold text-t3-purple-100">
+<PageSection size={"24"}>
+  <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">
         Libraries that work
       </h2>
-      <p class="mt-2 text-4xl tracking-tight font-bold text-t3-purple-200">
+      <h3 class="mt-2 text-5xl tracking-tight font-bold text-t3-purple-50">
         Without the complex setup
-      </p>
-      <p class="mt-4 text-xl text-t3-purple-200">
+      </h3>
+      <p class="mt-4 text-xl text-t3-purple-200 max-w-3xl mx-auto">
         create-t3-app gives you the option to install libraries that you need
         without the hassle of scaffolding it all yourself.
       </p>
     </div>
-    <div class="mt-12 lg:mt-0 lg:col-span-2">
+    <div>
       <dl
-        class="space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:grid-rows-3 sm:grid-flow-col sm:gap-x-6 sm:gap-y-14 lg:gap-x-8"
+        class="space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 md:grid-cols-3 sm:grid-rows-3 md:grid-rows-2 sm:grid-flow-col sm:gap-x-6 sm:gap-y-14 lg:gap-x-8"
       >
         <Feature title="Next.js" href="https://nextjs.org/">
           <svg
@@ -154,4 +153,4 @@ import NextAuthIcon from "./nextauth.png";
       </dl>
     </div>
   </div>
-</section>
+</PageSection>