refactor: landing page improvements (#493)

* feat: remove read more from stack card * feat: change order of stack cards * feat: better styles on link to init.tips * Coyenn/card refactorings (#501) * docs: refactor/flesh out docker docs (#498) * refactor: remove swiper and use embla carousel instead (#499) * fix: grammar error on landing page banner (#500) * refactor: make body of cards with links clickable Co-authored-by: Anthony Campolo <12433465+ajcwebdev@users.noreply.github.com> Co-authored-by: jln13x <85513960+jln13x@users.noreply.github.com> Co-authored-by: Mohit Yadav <www.mohit2004@gmail.com> Co-authored-by: Tim Ritter <timritter@MacBook-Air-von-Tim.local> * fix: terminal font size on small devices (#509) * fix: card link text underline (#511) * fix bad merge Co-authored-by: Julius Marminge <julius0216@outlook.com> Co-authored-by: Tim <61044138+Coyenn@users.noreply.github.com> Co-authored-by: Anthony Campolo <12433465+ajcwebdev@users.noreply.github.com> Co-authored-by: jln13x <85513960+jln13x@users.noreply.github.com> Co-authored-by: Mohit Yadav <www.mohit2004@gmail.com> Co-authored-by: Tim Ritter <timritter@MacBook-Air-von-Tim.local> Co-authored-by: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com>
t3-oss · Sep 26, 2022 · a7e1ae4 · a7e1ae4 · vercel · Sep 26, 2022
1 parent f03d03e
commit a7e1ae4
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 57 deletions.
diff --git a/www/src/components/landingPage/about.astro b/www/src/components/landingPage/about.astro
@@ -8,17 +8,13 @@ import PageSection from "./pageSection.astro";
   size={"24"}
   id="about"
 >
-  <div
-    class="flex flex-col h-8 gap-2 md:gap-4 max-w-[800px] xl:max-w-full mx-auto w-8"
-  >
+  <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">
       What is this? Some kinda template?
     </h2>
     <p class="mt-4 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="underline decoration-dotted underline-offset-4"
+      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.

diff --git a/www/src/components/landingPage/cli.tsx b/www/src/components/landingPage/cli.tsx
@@ -6,7 +6,7 @@ export default function CodeCard() {
     <div className="mx-auto w-full overflow-hidden rounded-lg sm:w-[700px] md:w-[600px]">
       <div
         className="inverse-toggle h-[300px] overflow-hidden rounded-lg border border-t3-purple-200/20 bg-white/10 px-1 pb-6 pt-4 
-        font-mono text-[10px] leading-normal text-t3-purple-50 subpixel-antialiased shadow-lg transition-all sm:h-[400px] sm:px-2 sm:text-xs md:h-[450px] md:px-5 lg:h-[400px]"
+         font-mono text-[10px] leading-normal text-t3-purple-50 subpixel-antialiased shadow-lg transition-all sm:h-[400px] sm:px-2 sm:text-xs md:h-[450px] md:px-5 lg:h-[400px]"
       >
         <div className="top mb-2 flex">
           <div className="h-3 w-3 rounded-full bg-red-500"></div>
@@ -18,7 +18,7 @@ export default function CodeCard() {
           <Typist.Delay ms={1250} />
         </Typist>
         <Typist
-          className="leading-1 bg-gradient-to-r from-blue-400 via-green-300 to-pink-600 bg-clip-text font-mono text-sm text-transparent sm:text-xs md:text-sm"
+          className="leading-1 bg-gradient-to-r from-blue-400 via-green-300 to-pink-600 bg-clip-text font-mono text-[7px] text-transparent sm:text-xs md:text-sm"
           cursor={{ show: false }}
           avgTypingDelay={-500}
         >

diff --git a/www/src/components/landingPage/stack/card.astro b/www/src/components/landingPage/stack/card.astro
@@ -14,7 +14,7 @@ const { title, href } = Astro.props;
     href={href}
     target="_blank"
     rel="noopener noreferrer"
-    class="hover:no-underline"
+    class="hover:no-underline active:no-underline focus:no-underline"
     ><dt
       class="flex space-x-4 items-center bg-white/10 p-2 pl-5 rounded-tr-md rounded-tl-md hover:bg-white/20 transition-colors"
     >
@@ -23,29 +23,10 @@ const { title, href } = Astro.props;
         {title}
       </p>
     </dt>
-  </a>
-
-  <dd
-    class="m-6 text-sm md:text-base text-t3-purple-100 subpixel-antialiased h-full"
-  >
-    <slot name="description" />
-  </dd>
-
-  <a
-    href={href}
-    target="_blank"
-    rel="noopener noreferrer"
-    class="font-bold text-t3-purple-200 text-lg hover:text-t3-purple-400 transition-colors mx-6 mb-6 flex items-center"
-  >
-    <span>Read more</span>
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 448 512"
-      class="h-4 ml-2 fill-current"
+    <dd
+      class="m-6 text-sm md:text-base text-t3-purple-100 subpixel-antialiased h-full"
     >
-      <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>
+      <slot name="description" />
+    </dd>
   </a>
 </div>
diff --git a/www/src/components/landingPage/stack/stack.astro b/www/src/components/landingPage/stack/stack.astro
@@ -13,6 +13,7 @@ import NextAuthIcon from "./nextauth.png";
       <h3 class="mt-2 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">
         create-t3-app gives you the option to install libraries that you need
         without the hassle of scaffolding it all yourself.
@@ -46,6 +47,7 @@ import NextAuthIcon from "./nextauth.png";
             towards good decisions.
           </Fragment>
         </Feature>
+
         <Feature title="Prisma" href="https://www.prisma.io/">
           <svg
             slot="icon"
@@ -67,27 +69,33 @@ import NextAuthIcon from "./nextauth.png";
           </Fragment>
         </Feature>
 
-        <Feature title="tRPC" href="https://trpc.io/">
+        <Feature title="Typescript" href="https://www.typescriptlang.org/">
           <svg
             slot="icon"
+            version="1.1"
             viewBox="0 0 512 512"
+            class="h-10 aspect-square py-1"
             xmlns="http://www.w3.org/2000/svg"
-            class="h-10 aspect-square fill-[#398CCB] py-1"
           >
-            <rect width="512" height="512" rx="150" fill="#398CCB"></rect>
+            <title>TypeScript</title>
+            <rect width="512" height="512" rx="50" fill="#3178c6"></rect>
             <path
-              fill-rule="evenodd"
+              d="m317 407v50c8.1 4.2 18 7.3 29 9.4s23 3.1 35 3.1c12 0 23-1.1 34-3.4 11-2.3 20-6.1 28-11 8.1-5.3 15-12 19-21s7.1-19 7.1-32c0-9.1-1.4-17-4.1-24s-6.6-13-12-18c-5.1-5.3-11-10-18-14s-15-8.2-24-12c-6.6-2.7-12-5.3-18-7.9-5.2-2.6-9.7-5.2-13-7.8-3.7-2.7-6.5-5.5-8.5-8.4-2-3-3-6.3-3-10 0-3.4 0.89-6.5 2.7-9.3s4.3-5.1 7.5-7.1c3.2-2 7.2-3.5 12-4.6 4.7-1.1 9.9-1.6 16-1.6 4.2 0 8.6 0.31 13 0.94 4.6 0.63 9.3 1.6 14 2.9 4.7 1.3 9.3 2.9 14 4.9 4.4 2 8.5 4.3 12 6.9v-47c-7.6-2.9-16-5.1-25-6.5s-19-2.1-31-2.1c-12 0-23 1.3-34 3.8s-20 6.5-28 12c-8.1 5.4-14 12-19 21-4.7 8.4-7 18-7 30 0 15 4.3 28 13 38 8.6 11 22 19 39 27 6.9 2.8 13 5.6 19 8.3s11 5.5 15 8.4c4.3 2.9 7.7 6.1 10 9.5 2.5 3.4 3.8 7.4 3.8 12 0 3.2-0.78 6.2-2.3 9s-3.9 5.2-7.1 7.2-7.1 3.6-12 4.8c-4.7 1.1-10 1.7-17 1.7-11 0-22-1.9-32-5.7-11-3.8-21-9.5-30-17zm-84-123h64v-41h-179v41h64v183h51z"
               clip-rule="evenodd"
-              d="M255.446 75L326.523 116.008V138.556L412.554 188.238V273.224L435.631 286.546V368.608L364.6 409.615L333.065 391.378L256.392 435.646L180.178 391.634L149.085 409.615L78.0538 368.538V286.546L100.231 273.743V188.238L184.415 139.638L184.462 139.636V116.008L255.446 75ZM326.523 159.879V198.023L255.492 239.031L184.462 198.023V160.936L184.415 160.938L118.692 198.9V263.084L149.085 245.538L220.115 286.546V368.538L198.626 380.965L256.392 414.323L314.618 380.712L293.569 368.538V286.546L364.6 245.538L394.092 262.565V198.9L326.523 159.879ZM312.031 357.969V307.915L355.369 332.931V382.985L312.031 357.969ZM417.169 307.846L373.831 332.862V382.985L417.169 357.9V307.846ZM96.5154 357.9V307.846L139.854 332.862V382.915L96.5154 357.9ZM201.654 307.846L158.315 332.862V382.915L201.654 357.9V307.846ZM321.262 291.923L364.6 266.908L407.938 291.923L364.6 316.962L321.262 291.923ZM149.085 266.838L105.746 291.923L149.085 316.892L192.423 291.923L149.085 266.838ZM202.923 187.362V137.308L246.215 162.346V212.377L202.923 187.362ZM308.015 137.308L264.723 162.346V212.354L308.015 187.362V137.308ZM212.154 121.338L255.446 96.3231L298.785 121.338L255.446 146.354L212.154 121.338Z"
-              fill="white"></path>
+              fill="#fff"
+              fill-rule="evenodd"
+              style="fill:#fff"></path>
           </svg>
           <Fragment slot="description">
-            If you use TypeScript on both the frontend and backend, you should
-            use tRPC to infer types to create a full stack type-safe API. It can
-            be used in place or alongside Next.js' API routes, or as a
-            standalone server.
+            Javascript is hard. Why add more rules? We firmly believe the
+            experience TypeScript provides will help you be a better developer,
+            regardless of where you are in your career as an engineer. Whether
+            you're new to web development or a seasoned pro, the "strictness" of
+            TypeScript will provide a less frustrating, more consistent
+            experience than vanilla JS.
           </Fragment>
         </Feature>
+
         <Feature title="TailwindCSS" href="https://tailwindcss.com/">
           <svg
             slot="icon"
@@ -109,32 +117,28 @@ import NextAuthIcon from "./nextauth.png";
           </Fragment>
         </Feature>
 
-        <Feature title="Typescript" href="https://www.typescriptlang.org/">
+        <Feature title="tRPC" href="https://trpc.io/">
           <svg
             slot="icon"
-            version="1.1"
             viewBox="0 0 512 512"
-            class="h-10 aspect-square py-1"
             xmlns="http://www.w3.org/2000/svg"
+            class="h-10 aspect-square fill-[#398CCB] py-1"
           >
-            <title>TypeScript</title>
-            <rect width="512" height="512" rx="50" fill="#3178c6"></rect>
+            <rect width="512" height="512" rx="150" fill="#398CCB"></rect>
             <path
-              d="m317 407v50c8.1 4.2 18 7.3 29 9.4s23 3.1 35 3.1c12 0 23-1.1 34-3.4 11-2.3 20-6.1 28-11 8.1-5.3 15-12 19-21s7.1-19 7.1-32c0-9.1-1.4-17-4.1-24s-6.6-13-12-18c-5.1-5.3-11-10-18-14s-15-8.2-24-12c-6.6-2.7-12-5.3-18-7.9-5.2-2.6-9.7-5.2-13-7.8-3.7-2.7-6.5-5.5-8.5-8.4-2-3-3-6.3-3-10 0-3.4 0.89-6.5 2.7-9.3s4.3-5.1 7.5-7.1c3.2-2 7.2-3.5 12-4.6 4.7-1.1 9.9-1.6 16-1.6 4.2 0 8.6 0.31 13 0.94 4.6 0.63 9.3 1.6 14 2.9 4.7 1.3 9.3 2.9 14 4.9 4.4 2 8.5 4.3 12 6.9v-47c-7.6-2.9-16-5.1-25-6.5s-19-2.1-31-2.1c-12 0-23 1.3-34 3.8s-20 6.5-28 12c-8.1 5.4-14 12-19 21-4.7 8.4-7 18-7 30 0 15 4.3 28 13 38 8.6 11 22 19 39 27 6.9 2.8 13 5.6 19 8.3s11 5.5 15 8.4c4.3 2.9 7.7 6.1 10 9.5 2.5 3.4 3.8 7.4 3.8 12 0 3.2-0.78 6.2-2.3 9s-3.9 5.2-7.1 7.2-7.1 3.6-12 4.8c-4.7 1.1-10 1.7-17 1.7-11 0-22-1.9-32-5.7-11-3.8-21-9.5-30-17zm-84-123h64v-41h-179v41h64v183h51z"
-              clip-rule="evenodd"
-              fill="#fff"
               fill-rule="evenodd"
-              style="fill:#fff"></path>
+              clip-rule="evenodd"
+              d="M255.446 75L326.523 116.008V138.556L412.554 188.238V273.224L435.631 286.546V368.608L364.6 409.615L333.065 391.378L256.392 435.646L180.178 391.634L149.085 409.615L78.0538 368.538V286.546L100.231 273.743V188.238L184.415 139.638L184.462 139.636V116.008L255.446 75ZM326.523 159.879V198.023L255.492 239.031L184.462 198.023V160.936L184.415 160.938L118.692 198.9V263.084L149.085 245.538L220.115 286.546V368.538L198.626 380.965L256.392 414.323L314.618 380.712L293.569 368.538V286.546L364.6 245.538L394.092 262.565V198.9L326.523 159.879ZM312.031 357.969V307.915L355.369 332.931V382.985L312.031 357.969ZM417.169 307.846L373.831 332.862V382.985L417.169 357.9V307.846ZM96.5154 357.9V307.846L139.854 332.862V382.915L96.5154 357.9ZM201.654 307.846L158.315 332.862V382.915L201.654 357.9V307.846ZM321.262 291.923L364.6 266.908L407.938 291.923L364.6 316.962L321.262 291.923ZM149.085 266.838L105.746 291.923L149.085 316.892L192.423 291.923L149.085 266.838ZM202.923 187.362V137.308L246.215 162.346V212.377L202.923 187.362ZM308.015 137.308L264.723 162.346V212.354L308.015 187.362V137.308ZM212.154 121.338L255.446 96.3231L298.785 121.338L255.446 146.354L212.154 121.338Z"
+              fill="white"></path>
           </svg>
           <Fragment slot="description">
-            Javascript is hard. Why add more rules? We firmly believe the
-            experience TypeScript provides will help you be a better developer,
-            regardless of where you are in your career as an engineer. Whether
-            you're new to web development or a seasoned pro, the "strictness" of
-            TypeScript will provide a less frustrating, more consistent
-            experience than vanilla JS.
+            If you use TypeScript on both the frontend and backend, you should
+            use tRPC to infer types to create a full stack type-safe API. It can
+            be used in place or alongside Next.js' API routes, or as a
+            standalone server.
           </Fragment>
         </Feature>
+
         <Feature title="NextAuth.js" href="https://next-auth.js.org/">
           <img
             slot="icon"