feat: redesign featured section as stacked content cards

Replace the 4-column card grid with a single-column stacked layout.
Each card now shows the project title, highlights as metadata tags,
the summary, and an excerpt pulled from the detail page body content.
Uses a left accent border instead of top border for visual hierarchy.

Author: danielnaab

src/design/components/featured-card/index.tsx

@@ -1,25 +1,38 @@
 import type { CatalogEntry } from '../../../catalog/types'
 import { url } from '../../../build/config'
+import { raw } from 'hono/html'
+
+/** Extract first <p>…</p> from rendered HTML body */
+function firstParagraph(html: string): string | null {
+  const match = html.match(/<p>([\s\S]*?)<\/p>/)
+  return match ? match[1] : null
+}
 
 export function FeaturedCard({ entry, basePath }: { entry: CatalogEntry; basePath: string }) {
   const href = url(`/work/${entry.name}/`, basePath)
   const title = entry.overlay?.title ?? entry.name
   const summary = entry.overlay?.summary ?? entry.description ?? ''
   const highlights = entry.overlay?.highlights
+  const excerpt = entry.overlay?.body ? firstParagraph(entry.overlay.body) : null
 
   return (
     <article class="featured-card">
-      <h3 class="featured-card__title">
-        <a href={href}>{title}</a>
-      </h3>
-      {summary ? <p class="featured-card__summary">{summary}</p> : null}
-      {highlights ? (
-        <ul class="featured-card__highlights">
-          {highlights.map((h) => <li>{h}</li>)}
-        </ul>
-      ) : null}
+      <div class="featured-card__header">
+        <h3 class="featured-card__title">
+          <a href={href}>{title}</a>
+        </h3>
+        {highlights ? (
+          <ul class="featured-card__tags">
+            {highlights.map((h) => <li>{h}</li>)}
+          </ul>
+        ) : null}
+      </div>
+      <div class="featured-card__body">
+        <p class="featured-card__summary">{summary}</p>
+        {excerpt ? <p class="featured-card__excerpt">{raw(excerpt)}</p> : null}
+      </div>
       <p class="featured-card__cta">
-        <a href={href}>Learn more &rarr;</a>
+        <a href={href}>Explore {title} &rarr;</a>
       </p>
     </article>
   )

src/design/components/featured-card/styles.css

@@ -1,17 +1,22 @@
 .featured-card {
-  padding: var(--space-5);
-  border: 1px solid var(--color-surface-alt);
-  border-block-start: 3px solid var(--color-accent);
-  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-4);
+  padding: var(--space-5) var(--space-6);
+  border-inline-start: 3px solid var(--color-accent);
+  border-radius: var(--radius-sm);
   background: var(--color-surface);
   box-shadow: var(--shadow-card);
-  display: grid;
+}
+
+.featured-card__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
   gap: var(--space-3);
-  align-content: start;
 }
 
 .featured-card__title {
-  font-size: var(--step-1);
+  font-size: var(--step-2);
   line-height: 1.2;
 }
 
@@ -24,28 +29,43 @@
   color: var(--color-link-hover);
 }
 
-.featured-card__summary {
-  color: var(--color-ink-subtle);
-  font-size: var(--step--1);
-}
-
-.featured-card__highlights {
+.featured-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
   list-style: none;
   padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
+  margin: 0;
+}
+
+.featured-card__tags li {
   font-size: var(--step--1);
+  color: var(--color-ink-subtle);
+  padding: var(--space-1) var(--space-3);
+  background: var(--color-surface-highlight);
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+}
+
+.featured-card__body {
+  display: grid;
+  gap: var(--space-3);
+  max-inline-size: var(--measure-prose);
 }
 
-.featured-card__highlights li::before {
-  content: "\2713\0020";
-  color: var(--color-tier-active);
-  font-weight: 700;
+.featured-card__summary {
+  font-size: var(--step-0);
+  color: var(--color-ink-subtle);
+  font-weight: 500;
+}
+
+.featured-card__excerpt {
+  font-size: var(--step--1);
+  color: var(--color-ink-subtle);
+  line-height: 1.6;
 }
 
 .featured-card__cta {
-  margin-block-start: auto;
   font-size: var(--step--1);
 }
 

src/design/layout.css

@@ -66,20 +66,22 @@
     margin-inline: calc(-1 * var(--space-5));
     border-radius: var(--radius-md);
   }
-  .home-featured__grid,
+  .home-featured__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
   .home-stats__grid,
   .work-index__list {
     display: grid;
     gap: var(--space-5);
     container-type: inline-size;
   }
   @container (min-width: 48rem) {
-    .home-featured__grid { grid-template-columns: repeat(2, 1fr); }
     .home-stats__grid { grid-template-columns: repeat(3, 1fr); }
     .work-index__list { grid-template-columns: repeat(2, 1fr); }
   }
   @container (min-width: 72rem) {
-    .home-featured__grid { grid-template-columns: repeat(4, 1fr); }
     .work-index__list { grid-template-columns: repeat(3, 1fr); }
   }
   .work-index__section-heading {

src/pages/home.tsx

@@ -37,8 +37,8 @@ export function Home({
       </section>
 
       <section class="home-featured" aria-labelledby="featured-heading">
-        <h2 id="featured-heading">Featured labs</h2>
-        <div class="home-featured__grid">
+        <h2 id="featured-heading">Featured</h2>
+        <div class="home-featured__list">
           {featured.map((entry) => (
             <FeaturedCard entry={entry} basePath={config.basePath} />
           ))}