feat: updates card design for kits and homepage

packages/website/src/components/KitActionLinks.astro

@@ -1,41 +1,38 @@
 ---
 import cn from 'clsx';
 import { BriefcaseIcon } from '../icons/heroicons';
-import { GitHubIcon } from '../icons/GitHubIcon.tsx';
-import { ShareIcon } from '../icons/ShareIcon.tsx';
-import { REPO_URL, SHOWCASE_REPO_URL } from '../config.tsx';
+import { GitHubIcon } from '../icons/GitHubIcon';
+import { REPO_URL } from '../config';
 import { ShareDropdown } from './ShareDropdown';
 const { name, hasShowcase, inline } = Astro.props;
 ---
 
-<div class="flex flex-row items-center max-w-screen-2xl mx-auto">
-  <div class="space-x-4 invisible lg:visible">
+<div class="flex flex-row items-center justify-center max-w-screen-2xl mx-auto">
+  <div class=" hidden lg:block invisible lg:visible lg:space-x-4 ">
     <ShareDropdown kitname={name} client:only />
     <a
       class="link text-sm dark:dark-link hover:underline"
       target="_blank"
       href={`${REPO_URL}/discussions`}>Have a question?</a
     >
   </div>
-  <div class="ml-auto">
+  <div class="lg:ml-auto flex flex-wrap justify-center items-center">
     {
       hasShowcase && (
         <a
-          class="link text-sm dark:dark-link"
-          href={`${SHOWCASE_REPO_URL}/tree/main/${name}`}
-          target="_blank"
-          rel="noopener noreferrer"
+          class="btn link text-sm dark:dark-link mt-3 mb-auto"
+          href="#showcase-section"
         >
           <>
             <BriefcaseIcon className="h-3.5 w-3.5 inline ml-0.5 mb-[2px]" />
-            <span class="hover:underline ml-2">View Showcase</span>
+            <span class="hover:underline ml-2">View Showcases</span>
           </>
         </a>
       )
     }
 
     <a
-      class={cn('btn btn-primary text-sm mt-3 ml-3', !inline && 'mt-3.5')}
+      class={cn('btn btn-primary text-sm mt-3 ml-3 mb-3 lg:mb-auto', !inline && 'mt-3.5')}
       href={`${REPO_URL}/tree/main/starters/${name}`}
       target="_blank"
       rel="noopener noreferrer"

packages/website/src/components/KitHero.astro

@@ -2,17 +2,15 @@
 import cn from 'clsx';
 import Breadcrumbs from './Breadcrumbs.astro';
 import KitActionLinks from './KitActionLinks.astro';
-import TechItem from './TechItem.astro';
-
+import TechIcon from './TechIcon.astro';
 const { technologies, name, hasShowcase } = Astro.props;
-
 const crumbs = [
   {
     href: '/',
     title: 'Home',
   },
   {
-    title: 'Kits',
+    title: name,
   },
 ];
 ---
@@ -24,7 +22,7 @@ const crumbs = [
       class="my-5 bg-white dark:dark-bg border border-gray-400 dark:border-gray-700 rounded-lg"
     >
       <div
-        class="flex flex-wrap items-center justify-start space-x-3 space-y-3 p-4"
+        class="grid grid-cols-fill-20 justify-center justify-items-center gap-x-4 p-2 md:flex md:flex-wrap md:items-center md:justify-start md:gap-0 md:space-x-3 md:space-y-3 md:p-4"
       >
         {
           technologies.map((tech, i) => (
@@ -34,14 +32,12 @@ const crumbs = [
                   'hidden text-3xl text-gray-300 font-light',
                   i > 0 && 'lg:inline'
                 )}
-              >
-                /
-              </span>
+              />
               <a
                 href={`/kits-by-tool/${tech.key}`}
                 class="group inline-block my-2"
               >
-                <TechItem {...tech} />
+                <TechIcon {...tech} />
               </a>
             </>
           ))

packages/website/src/components/KitItem.astro

@@ -1,48 +1,17 @@
 ---
-import { ArrowRightIcon } from '../icons/heroicons';
 import TechIcon from './TechIcon.astro';
-import { GitHubIcon } from '../icons/GitHubIcon.tsx';
 const { kit } = Astro.props;
-const technologyStubsCount = kit.technologies.length < 3 ? (3 - kit.technologies.length) : 0;
 ---
 
 <div
-  class="bg dark:bg-gray-800 border border-gray-400 dark:border-gray-700 rounded-lg group hover:bg-brand-500 hover:dark:bg-brand-500 transition-colors overflow-hidden"
+  class="flex flex-col bg dark:bg-gray-800 border border-gray-400 dark:border-gray-700 rounded-lg group group-hover:bg-brand-500 group-hover:dark:bg-brand-500 transition-colors overflow-hidden px-4"
 >
-  <div class="px-4 py-6 space-y-4">
-    {kit.technologies.map(({ name, Icon, tags }) => (
-      <div class="flex items-center space-x-6">
+<h2 class="text-lg font-bold md:ml-3 lg:mx-6 pt-6 h-16 t-dark dark:dark-t group-hover:text-white">{kit.name}</h2>
+  <div class="grid grid-cols-fill-20 gap-x-2 gap-y-3 justify-items-center justify-between items-end xl:grid-cols-4 md:grid-rows-4 lg:grid-rows-3 md:gap-y-1 lg:mx-6 pt-4 pb-6 md:space-y-4">
+    {kit.technologies.map(({ Icon }) => (
+      <div>
         { Icon && <TechIcon {Icon} />}
-        <div>
-          <div class="heading-6 t-dark dark:dark-t-light group-hover:text-white">{name}</div>
-          <div class="t-light dark:dark-t text-sm group-hover:text-gray-100">{tags.join(', ')}</div>
-        </div>
       </div>
     ))}
-    {Array(technologyStubsCount).fill().map(() => (
-      <div class="flex items-center space-x-6">
-        <div class="h-20"></div>
-      </div>
-    ))}
-  </div>
-  <div
-    class="px-4 py-2.5 flex items-center border-t dark:border-gray-700 border-gray-200 dark:bg-gray-800 group-hover:bg-brand-600 group-hover:border-brand-600"
-  >
-    <a
-      href={`/kits/${kit.name}`}
-      class="inline-flex items-center justify-center t-light dark:dark-t group-hover:text-white font-medium"
-    >
-      View Kit  <ArrowRightIcon className="inline w-4 h-4 ml-2" />
-    </a>
-    <a
-      href={`https://github.com/thisdot/starter.dev/tree/main/starters/${kit.name}`}
-      target="_blank"
-      rel="noopener noreferrer"
-      class="inline-flex items-center ml-auto justify-center py-2.5 px-4 rounded-lg border border-gray-400 dark:border-white group-hover:border-white group-hover:bg-brand-500"
-      ><GitHubIcon
-        size={22}
-        className="t-light dark:text-gray-100 group-hover:text-white"
-      /></a
-    >
   </div>
-</div>
+</div>

packages/website/src/components/KitList.astro

@@ -3,11 +3,11 @@ import KitItem from './KitItem.astro';
 const { kits } = Astro.props;
 ---
 
-<div class="px-4 grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-6">
+<div class="px-4 grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-6">
   {
     kits.map((kit) => (
       <div class="col-span-1">
-        <a href={`/kits/${kit.name}`} class="group inline-block my-2">
+        <a href={`/kits/${kit.name}`} class="group my-2">
           <KitItem kit={kit} />
         </a>
       </div>

packages/website/src/components/KitShowcases.astro

@@ -0,0 +1,31 @@
+---
+import ShowcaseLinks from './ShowcaseLinks.astro';
+const { showcases, hasShowcase } = Astro.props;
+---
+
+{
+  hasShowcase ? (
+    <div id="showcase-section" class="pt-24 max-w-screen-2xl mx-auto scroll-mt-20">
+      <h1 class="heading-1 font-medium mb-8">
+        See kits in action via our showcases
+      </h1>
+      <div class="not-prose flex flex-col sm:col-span-1 md:flex-row flex-wrap gap-4">
+        {showcases.map(({ name, repo, app, Icon }) => (
+          <div class="border bg-gray-100 dark:bg-gray-800 group-hover:bg-blue-500 border-gray-400 dark:border-gray-700 rounded-xl items-center t-dark dark:dark-t-light p-4 ">
+            <div class="flex items-center pb-4">
+              <div class="justify-center p-1.5 border dark:bg-gray-800 group-hover:bg-blue-500 border-gray-400 dark:border-gray-700 rounded-xl flex items-center font-medium justify-start min-w-[48px] min-h-[48px]">
+                <Icon className="inline w-6 h-6 mb-px" />
+              </div>
+              <div class="mx-4">
+                <p class="text-base t-dark dark:dark-t-light group-hover:text-white leading-snug">
+                  {name}
+                </p>
+              </div>
+            </div>
+            <ShowcaseLinks app={app} repo={repo} />
+          </div>
+        ))}
+      </div>
+    </div>
+  ) : null
+}

packages/website/src/components/ShowcaseLink.astro

@@ -0,0 +1,21 @@
+---
+import { ArrowRightIcon } from '../icons/heroicons';
+const { app, repo, name } = Astro.props;
+let showcase;
+
+if (app !== undefined) {
+  showcase = app;
+} else {
+  showcase = repo;
+}
+---
+
+<a
+  href={showcase}
+  class="link text-sm font-light dark:dark-link hover:underline"
+  target="_blank"
+  rel="noopener noreferrer"
+>
+  {name}
+  <ArrowRightIcon className="inline w-4 h-4 ml-2" />
+</a>

packages/website/src/components/ShowcaseLinks.astro

@@ -0,0 +1,15 @@
+---
+import ShowcaseLink from './ShowcaseLink.astro';
+const { app, repo } = Astro.props;
+---
+
+<div class="pb-3">
+  <ShowcaseLink repo={repo} name="Repository" />
+</div>
+{
+  app !== '' ? (
+    <div class="pb-4">
+      <ShowcaseLink repo={app} name="Live Application" />
+    </div>
+  ) : null
+}

packages/website/src/components/StickyHero.astro

@@ -1,8 +1,7 @@
 ---
 import { BriefcaseIcon } from '../icons/heroicons';
-import { ShareIcon } from '../icons/ShareIcon.tsx';
 import { GitHubIcon } from '../icons/GitHubIcon.tsx';
-import { REPO_URL, SHOWCASE_REPO_URL } from '../config.tsx';
+import { REPO_URL } from '../config.tsx';
 import { ShareDropdown } from './ShareDropdown';
 const { name, hasShowcase } = Astro.props;
 ---
@@ -23,15 +22,10 @@ const { name, hasShowcase } = Astro.props;
     <div class="ml-auto space-x-4">
       {
         hasShowcase && (
-          <a
-            class="link text-sm dark:dark-link"
-            href={`${SHOWCASE_REPO_URL}/tree/main/${name}`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <a class="link text-sm dark:dark-link" href="#showcase-section">
             <>
               <BriefcaseIcon className="h-3.5 w-3.5 inline ml-0.5 mb-[2px]" />
-              <span class="hover:underline ml-2">View Showcase</span>
+              <span class="hover:underline ml-2">View Showcases</span>
             </>
           </a>
         )

packages/website/src/components/TechIcon.astro

@@ -5,11 +5,11 @@ const { Icon, variant = 'base' } = Astro.props;
 const sizeMap = {
   base: {
     size: 48,
-    container: 'w-20 h-20 bg-white dark:bg-gray-900',
+    container: 'w-20 h-20 bg-gray-100 dark:bg-gray-900',
   },
   lg: {
     size: 64,
-    container: 'w-28 h-28 bg-white dark:bg-gray-800',
+    container: 'w-28 h-28 bg-gray-100 dark:bg-gray-800',
   },
 };
 
@@ -18,7 +18,7 @@ const size = sizeMap[variant];
 
 <span
   class={cn(
-    'inline-flex items-center justify-center rounded-xl border border-gray-100 bg-white dark:bg-white dark:border-gray-600 group-hover:border-white dark:group-hover:bg-white',
+    'inline-flex items-center justify-center rounded-xl border border-gray-200 bg-gray-100 dark:bg-white dark:border-gray-600 group-hover:border-white dark:group-hover:bg-white',
     size.container
   )}
 >