feat(home): rewrite home page with featured labs and learn-more row

Author: danielnaab

src/build/entry.tsx

@@ -4,6 +4,7 @@ import { renderToHtml } from './render'
 import { createConfig, getBasePath } from './config'
 import { loadCatalog } from '../catalog/load'
 import { loadHero } from './hero'
+import { loadFeatured } from './featured'
 import { allRoutes } from './routes'
 import { Home } from '../pages/home'
 import { WorkIndex } from '../pages/work/index'
@@ -32,9 +33,10 @@ export async function buildSite(options: BuildOptions): Promise<void> {
     buildTime: now.toISOString(),
   }
 
-  const [catalog, hero] = await Promise.all([
+  const [catalog, hero, featured] = await Promise.all([
     loadCatalog(rootDir),
     loadHero(rootDir),
+    loadFeatured(rootDir),
   ])
   const commitmentBody = await loadContentBody(
     join(rootDir, 'content', 'commitment.md'),
@@ -48,6 +50,7 @@ export async function buildSite(options: BuildOptions): Promise<void> {
       route,
       catalog,
       hero,
+      featured,
       commitmentBody,
       aboutBody,
       config,
@@ -82,14 +85,15 @@ async function render(
   route: ReturnType<typeof allRoutes>[number],
   catalog: Awaited<ReturnType<typeof loadCatalog>>,
   hero: Awaited<ReturnType<typeof loadHero>>,
+  featured: Awaited<ReturnType<typeof loadFeatured>>,
   commitmentBody: string,
   aboutBody: string,
   config: { basePath: string; buildTime: string },
   now: Date,
 ): Promise<string> {
   switch (route.view) {
     case 'home':
-      return renderToHtml(<Home catalog={catalog} hero={hero} config={config} />)
+      return renderToHtml(<Home hero={hero} featured={featured} config={config} />)
     case 'work-index':
       return renderToHtml(<WorkIndex catalog={catalog} config={config} />)
     case 'health':

src/design/layout.css

@@ -55,16 +55,22 @@
     font-size: var(--step-4);
     max-inline-size: 22ch;
   }
-  .home-hero__intro {
+  .home-hero__subtitle {
     font-size: var(--step-1);
     color: var(--color-ink-subtle);
+    font-weight: 500;
     max-inline-size: var(--measure-prose);
   }
-  .home-stats {
-    background: var(--color-surface-highlight);
-    padding: var(--space-6) var(--space-5);
-    margin-inline: calc(-1 * var(--space-5));
-    border-radius: var(--radius-md);
+  .home-intro {
+    font-size: var(--step-0);
+    color: var(--color-ink);
+    max-inline-size: var(--measure-prose);
+  }
+  .home-intro p {
+    margin-block-end: var(--space-3);
+  }
+  .home-intro p:last-child {
+    margin-block-end: 0;
   }
   .home-featured__header {
     display: grid;
@@ -80,15 +86,30 @@
     gap: var(--space-5);
     margin-block-start: var(--space-4);
   }
-  .home-stats__grid,
+  .home-learn-more__grid {
+    display: grid;
+    gap: var(--space-5);
+    container-type: inline-size;
+    margin-block-start: var(--space-4);
+  }
+  .home-learn-more__item {
+    padding: var(--space-5);
+    background: var(--color-surface);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-card);
+  }
+  .home-learn-more__item h3 {
+    font-size: var(--step-1);
+    margin-block-end: var(--space-2);
+  }
   .work-index__featured-grid {
     display: grid;
     gap: var(--space-5);
     container-type: inline-size;
   }
   @container (min-width: 48rem) {
-    .home-stats__grid { grid-template-columns: repeat(3, 1fr); }
     .work-index__featured-grid { grid-template-columns: repeat(2, 1fr); }
+    .home-learn-more__grid { grid-template-columns: repeat(2, 1fr); }
   }
   @container (min-width: 72rem) {
     .work-index__list { grid-template-columns: repeat(3, 1fr); }