@sarimarcus/content-sites-tourism 0.11.0 → 0.12.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.12.1 (2026-10-01)
+
+- `ItineraryTeaser` takes Granada's journey design (owner decision): badge, numbered stops with an optional duration each, large CTA (SLA-2739).
+
+## 0.12.0 (2026-10-01)
+
+- `./sections`: WalkStops, RankedListingRow, WhoItsFor, NeighborhoodCategory, SituationalNav, NeighborhoodHubHero (bundled controller, once per instance), ItineraryTeaser, HomeMonuments. `./templates`: NeighborhoodFacetPage, ProximityFacetPage, TierFacetPage — the route keeps data, paths, SEO and schema; the template owns the repeated markup (SLA-2739).
+
 ## 0.11.0 (2026-10-01)
 
 - First release with components: `./cards` exports MonumentCard (also as MuseumCard), WalkCard, DishCard, RestaurantCard, BarCard, NeighborhoodCard, HotelCard and ActivityCard. Every visible string, image, href and data-key label arrives from the site adapter; the cards carry layout and theme roles only (SLA-2739).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-tourism",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "City-tourism vertical: city-entity components, pages templates and utilities for the tourism sites.",
   "type": "module",
   "license": "MIT",
@@ -35,7 +35,7 @@
   "peerDependencies": {
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.11.0",
-    "@sarimarcus/content-sites-ui": "0.11.0"
+    "@sarimarcus/content-sites-core": "0.12.1",
+    "@sarimarcus/content-sites-ui": "0.12.1"
   }
 }

package/src/sections/HomeMonuments.astro

@@ -0,0 +1,70 @@
+---
+/**
+ * HomeMonuments — the home page's monuments band: badge, heading, tagline and a view-all link over a card grid, then
+ * an optional panel of context guides. The site adapter renders its monument cards in the default slot and its guide
+ * cards in the `guides` slot; the panel shows only when `guidesHeading` is given and that slot renders something.
+ */
+import { Badge, Icon, LinkArrow } from '@sarimarcus/content-sites-ui/primitives';
+import { Container } from '@sarimarcus/content-sites-ui/layout';
+
+interface Props {
+  /** Section anchor id. */
+  id: string;
+  badgeLabel: string;
+  heading: string;
+  tagline: string;
+  viewAllHref: string;
+  viewAllLabel: string;
+  guidesHeading?: string;
+  guidesNote?: string;
+}
+
+const { id, badgeLabel, heading, tagline, viewAllHref, viewAllLabel, guidesHeading, guidesNote } = Astro.props;
+
+// Astro.slots.has() is true for a conditional slot whose condition is false, so test what the slot renders.
+const guidesHtml = guidesHeading && Astro.slots.has('guides') ? (await Astro.slots.render('guides')).trim() : '';
+const showGuides = guidesHtml !== '';
+---
+
+<section id={id} data-guide-section class="py-16 lg:py-24">
+  <Container>
+    <div class="mb-10 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+      <div>
+        <Badge tone="custom" toneClass="bg-primary/10 text-primary" size="lg" lines={0} class="mb-4 !py-1 ![font-weight:inherit] !gap-2">
+          <Icon name="building" class="h-4 w-4" />
+          {badgeLabel}
+        </Badge>
+        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-normal text-foreground font-display">{heading}</h2>
+        <p class="mt-3 max-w-deck text-muted-foreground">
+          {tagline}
+        </p>
+      </div>
+      <LinkArrow href={viewAllHref} size="base" color="primary" class="shrink-0">
+        {viewAllLabel}
+      </LinkArrow>
+    </div>
+
+    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      <slot />
+    </div>
+
+    {showGuides && (
+      <div class="mt-8 rounded-2xl border border-border bg-card p-5 lg:p-6">
+        <div class="mb-4 flex flex-col gap-2 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+            <h3 class="text-xl font-semibold font-display">{guidesHeading}</h3>
+          </div>
+          {guidesNote && (
+            <p class="max-w-deck text-sm text-muted-foreground">
+              {guidesNote}
+            </p>
+          )}
+        </div>
+
+        <div class="grid gap-4 md:grid-cols-3">
+          <Fragment set:html={guidesHtml} />
+        </div>
+      </div>
+    )}
+  </Container>
+</section>

package/src/sections/ItineraryTeaser.astro

@@ -0,0 +1,99 @@
+---
+/**
+ * ItineraryTeaser — dark gradient panel on the neighbourhoods hub: a numbered multi-stop journey joined by a line on
+ * desktop, one card per stop and a large CTA. A stop's duration row renders only when the site has a duration for it.
+ * Hrefs and strings come from the site adapter.
+ */
+import { Badge, Icon } from '@sarimarcus/content-sites-ui/primitives';
+
+export interface ItineraryTeaserStop {
+  name: string;
+  href: string;
+  description: string;
+  duration?: string;
+}
+
+interface Props {
+  badgeLabel: string;
+  title: string;
+  description: string;
+  stops: ItineraryTeaserStop[];
+  ctaLabel: string;
+  ctaHref: string;
+  class?: string;
+}
+
+const {
+  badgeLabel,
+  title,
+  description,
+  stops,
+  ctaLabel,
+  ctaHref,
+  class: className,
+} = Astro.props;
+---
+
+<section class:list={['relative py-12 px-6 sm:px-8 bg-gradient-to-br from-overlay to-muted-foreground rounded-2xl overflow-hidden', className]}>
+  <div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl" aria-hidden="true"></div>
+  <div class="absolute bottom-0 left-0 w-48 h-48 bg-accent/10 rounded-full blur-3xl" aria-hidden="true"></div>
+
+  <div class="relative">
+    <div class="mb-8">
+      <Badge tone="custom" toneClass="bg-accent/20 text-accent" size="lg" lines={0} class="mb-4 !gap-2">
+        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M9 20l-5.447-2.724A1 1 0 0 1 3 16.382V5.618a1 1 0 0 1 1.447-.894L9 7m0 13l6-3m-6 3V7m6 10l5.447 2.724A1 1 0 0 0 21 18.382V7.618a1 1 0 0 0-.553-.894L15 4m0 13V4m0 0L9 7" />
+        </svg>
+        {badgeLabel}
+      </Badge>
+      <h2 class="text-2xl sm:text-3xl font-display font-medium text-overlay-foreground mb-3">
+        {title}
+      </h2>
+      <p class="text-overlay-foreground/70 max-w-deck">
+        {description}
+      </p>
+    </div>
+
+    <div class="relative mt-12">
+      <div class="hidden md:block absolute top-8 left-8 right-8 h-0.5 bg-gradient-to-r from-primary via-accent to-secondary" aria-hidden="true"></div>
+
+      <div class="grid gap-6 md:grid-cols-3 relative">
+        {stops.map((stop, index) => (
+          <div class="relative">
+            <div class="absolute -top-4 left-0 md:left-1/2 md:-translate-x-1/2 w-8 h-8 rounded-full bg-overlay-foreground flex items-center justify-center text-foreground font-display font-medium text-sm z-10">
+              {index + 1}
+            </div>
+
+            <a
+              href={stop.href}
+              class="block mt-6 p-5 bg-overlay-foreground/5 hover:bg-overlay-foreground/10 border border-overlay-foreground/10 hover:border-overlay-foreground/20 rounded-xl transition-all duration-200 group"
+            >
+              <h3 class="text-lg font-display font-medium text-overlay-foreground mb-2 group-hover:text-accent transition-colors">
+                {stop.name}
+              </h3>
+              <p class:list={['text-sm text-overlay-foreground/60', stop.duration && 'mb-3']}>
+                {stop.description}
+              </p>
+              {stop.duration && (
+                <div class="flex items-center gap-2 text-xs text-overlay-foreground/50">
+                  <Icon name="clock" class="w-3.5 h-3.5" />
+                  {stop.duration}
+                </div>
+              )}
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div class="mt-10 flex justify-center">
+      <a
+        href={ctaHref}
+        class="inline-flex items-center gap-3 px-6 py-3 bg-primary hover:bg-primary-strong text-overlay-foreground rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-overlay"
+      >
+        {ctaLabel}
+        <Icon name="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1" />
+      </a>
+    </div>
+  </div>
+</section>

package/src/sections/NeighborhoodCategory.astro

@@ -0,0 +1,90 @@
+---
+/**
+ * NeighborhoodCategory — a thematic group of neighbourhood cards on the neighbourhoods hub, with a category-tinted
+ * header. Cards go in the default slot. The site adapter supplies the title, description and count label.
+ */
+
+export type NeighborhoodCategoryType = 'historic' | 'authentic' | 'modern';
+
+interface Props {
+  id: string;
+  title: string;
+  description: string;
+  category: NeighborhoodCategoryType;
+  /** e.g. "3 neighborhoods" */
+  countLabel: string;
+  class?: string;
+}
+
+const {
+  id,
+  title,
+  description,
+  category,
+  countLabel,
+  class: className,
+} = Astro.props;
+
+const categoryConfig: Record<NeighborhoodCategoryType, {
+  accentColor: string;
+  iconBg: string;
+}> = {
+  'historic': {
+    accentColor: 'text-primary',
+    iconBg: 'bg-primary/10',
+  },
+  'authentic': {
+    accentColor: 'text-secondary',
+    iconBg: 'bg-secondary/10',
+  },
+  'modern': {
+    accentColor: 'text-accent-strong',
+    iconBg: 'bg-accent/10',
+  },
+};
+
+const config = categoryConfig[category];
+
+const categoryIcons: Record<NeighborhoodCategoryType, string> = {
+  'historic': 'M3 21h18M3 7v1a3 3 0 0 0 6 0V7m0 1a3 3 0 0 0 6 0V7m0 1a3 3 0 0 0 6 0V7M6 21V7m6 0v14m6-14v14M4 7h16M4 21h16',
+  'authentic': 'M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
+  'modern': 'M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2 M18 14h-8M15 18h-5',
+};
+---
+
+<section
+  id={id}
+  class:list={['scroll-mt-20', className]}
+  data-category-section={category}
+>
+  <div class="mb-8 pb-6">
+    <div class="flex items-start gap-4 mb-3">
+      <div class:list={['flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center', config.iconBg]}>
+        <svg class:list={['w-5 h-5', config.accentColor]} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d={categoryIcons[category]} />
+        </svg>
+      </div>
+
+      <div class="flex-1 min-w-0">
+        <h2 class:list={['text-2xl sm:text-3xl font-display font-normal', config.accentColor]}>
+          {title}
+        </h2>
+
+        <div class="mt-1.5">
+          <span class="inline-flex items-center text-xs font-medium text-muted-foreground">
+            {countLabel}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-base text-muted-foreground leading-relaxed">
+      {description}
+    </p>
+
+  </div>
+
+  <div class="grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3">
+    <slot />
+  </div>
+</section>

package/src/sections/NeighborhoodHubHero.astro

@@ -0,0 +1,89 @@
+---
+/**
+ * NeighborhoodHubHero — hero for the neighbourhoods hub: badge, title, narrative and in-page category pills that
+ * smooth-scroll via ./hubHero.ts. The site's own motif goes in the `decoration` slot (an absolutely positioned,
+ * aria-hidden layer). Every string comes from the site adapter.
+ */
+import { Badge, Icon } from '@sarimarcus/content-sites-ui/primitives';
+import { Container } from '@sarimarcus/content-sites-ui/layout';
+
+export interface HubCategoryPill {
+  /** Id of the in-page section the pill scrolls to. */
+  id: string;
+  label: string;
+  count: number;
+}
+
+interface Props {
+  title: string;
+  subtitle: string;
+  narrativeText: string;
+  /** e.g. "8 unique neighborhoods" */
+  badgeLabel: string;
+  categories: HubCategoryPill[];
+  /** aria-label of the category pill nav. */
+  navLabel: string;
+  class?: string;
+}
+
+const {
+  title,
+  subtitle,
+  narrativeText,
+  badgeLabel,
+  categories,
+  navLabel,
+  class: className,
+} = Astro.props;
+---
+
+<section class:list={['relative overflow-hidden bg-gradient-to-br from-secondary via-secondary-strong to-overlay', className]}>
+  <slot name="decoration" />
+  <Container class="relative py-16 lg:py-24">
+    <div class="max-w-measure-wide mx-auto">
+      <div class="space-y-6">
+        <Badge tone="custom" toneClass="bg-overlay-foreground/10 text-overlay-foreground/90 backdrop-blur-sm border border-overlay-foreground/10" size="lg" lines={0} class="!px-4 !py-2 !gap-2">
+          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+            <circle cx="12" cy="10" r="3" />
+          </svg>
+          {badgeLabel}
+        </Badge>
+
+        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-medium text-overlay-foreground leading-[1.1] tracking-tight">
+          {title}
+        </h1>
+
+        <p class="text-xl sm:text-2xl text-accent font-display italic">
+          {subtitle}
+        </p>
+
+        <p class="text-lg text-overlay-foreground/80 leading-relaxed max-w-deck">
+          {narrativeText}
+        </p>
+
+        <nav class="flex flex-wrap gap-3 pt-4" aria-label={navLabel} data-hub-category-nav>
+          {categories.map((cat) => (
+            <a
+              href={`#${cat.id}`}
+              class="group inline-flex items-center gap-2 px-4 py-2.5 bg-overlay-foreground/5 hover:bg-overlay-foreground/15 text-overlay-foreground border border-overlay-foreground/20 hover:border-overlay-foreground/40 rounded-lg text-sm font-medium transition-all duration-200 focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-secondary"
+            >
+              <span>{cat.label}</span>
+              <span class="text-xs text-overlay-foreground/50 group-hover:text-overlay-foreground/70 transition-colors">
+                {cat.count}
+              </span>
+              <Icon name="chevron-down" class="w-3.5 h-3.5 opacity-50 group-hover:opacity-100 group-hover:translate-y-0.5 transition-all" />
+            </a>
+          ))}
+        </nav>
+      </div>
+    </div>
+  </Container>
+</section>
+
+<script>
+  import { initHubCategoryNavs } from './hubHero.ts';
+
+  initHubCategoryNavs();
+  document.addEventListener('astro:page-load', initHubCategoryNavs);
+</script>

package/src/sections/RankedListingRow.astro

@@ -0,0 +1,145 @@
+---
+/**
+ * RankedListingRow — one entry in a numbered editorial ranking list, e.g. a proximity page that reads top-to-bottom by
+ * distance. Rendered inside the caller's `<ol>`. The whole row is one real link, so the name stays selectable text.
+ * The site adapter resolves the image and supplies every visible string.
+ */
+import { Picture } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+import { Icon } from '@sarimarcus/content-sites-ui/primitives';
+
+interface Props {
+  rank: number;
+  href: string;
+  image?: ImageMetadata;
+  /** Shown when `image` is absent. */
+  fallbackSrc: string;
+  imageAlt: string;
+  name: string;
+  distanceText: string;
+  /** e.g. "6 min walk" */
+  walkLabel: string;
+  rating?: number;
+  /** Screen-reader suffix after the rating, e.g. "out of 5". */
+  ratingSuffix: string;
+  /** Cuisine, category or star line. */
+  meta?: string;
+  priceLine?: string;
+  specialties?: string[];
+  description: string;
+  ctaLabel: string;
+}
+
+const {
+  rank,
+  href,
+  image,
+  fallbackSrc,
+  imageAlt,
+  name,
+  distanceText,
+  walkLabel,
+  rating,
+  ratingSuffix,
+  meta,
+  priceLine,
+  specialties = [],
+  description,
+  ctaLabel,
+} = Astro.props;
+
+const paddedRank = String(rank).padStart(2, '0');
+---
+
+<li class="relative group border-b border-border last:border-b-0">
+  <a
+    href={href}
+    class="grid grid-cols-[auto_1fr] gap-x-4 sm:gap-x-6 py-6 sm:py-7 items-start focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary rounded-sm"
+  >
+    <span
+      class="font-display text-2xl sm:text-3xl text-primary/70 tabular-nums leading-none pt-1 w-10 sm:w-14 shrink-0"
+      aria-hidden="true"
+    >
+      {paddedRank}
+    </span>
+
+    <div class="col-start-2 grid grid-cols-[5.5rem_1fr] sm:grid-cols-[9rem_1fr] gap-4 sm:gap-6 w-full min-w-0">
+      <div class="relative aspect-square rounded-lg overflow-hidden img-placeholder border border-border shrink-0">
+        {image ? (
+          <Picture
+            src={image}
+            alt={imageAlt}
+            widths={[160, 240, 320]}
+            sizes="(max-width: 639px) 88px, 144px"
+            formats={['avif', 'webp']}
+            fallbackFormat="webp"
+            pictureAttributes={{ class: 'block w-full h-full' }}
+            class="w-full h-full object-cover transition-transform duration-500 ease-out group-hover:scale-[1.04]"
+            loading={rank <= 2 ? 'eager' : 'lazy'}
+            decoding="async"
+          />
+        ) : (
+          <img
+            src={fallbackSrc}
+            alt={imageAlt}
+            width="320"
+            height="320"
+            class="w-full h-full object-cover transition-transform duration-500 ease-out group-hover:scale-[1.04]"
+            loading={rank <= 2 ? 'eager' : 'lazy'}
+            decoding="async"
+          />
+        )}
+      </div>
+
+      <div class="min-w-0">
+        <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+          <h3 class="text-lg font-semibold font-display text-card-foreground leading-tight group-hover:text-primary-strong transition-colors">
+            {name}
+          </h3>
+          {typeof rating === 'number' && (
+            <span class="inline-flex items-center gap-1 text-sm tabular-nums">
+              <Icon name="star" class="w-3.5 h-3.5 text-accent fill-current" />
+              <span class="font-medium">{rating.toFixed(1)}</span>
+              <span class="sr-only">{ratingSuffix}</span>
+            </span>
+          )}
+        </div>
+
+        <p class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm">
+          <span class="inline-flex items-center gap-1.5 font-medium text-secondary">
+            <Icon name="footprints" class="w-4 h-4" />
+            {walkLabel}
+          </span>
+          <span class="text-muted-foreground tabular-nums" aria-hidden="true">·</span>
+          <span class="text-muted-foreground tabular-nums">{distanceText}</span>
+          {meta && (
+            <>
+              <span class="text-muted-foreground" aria-hidden="true">·</span>
+              <span class="text-muted-foreground">{meta}</span>
+            </>
+          )}
+        </p>
+
+        <p class="mt-2 text-sm sm:text-base text-muted-foreground leading-relaxed line-clamp-2 text-pretty">
+          {description}
+        </p>
+
+        {(priceLine || specialties.length > 0) && (
+          <p class="mt-2.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+            {priceLine && (
+              <span class="font-medium text-card-foreground tabular-nums">{priceLine}</span>
+            )}
+            {specialties.length > 0 && (
+              <span class="text-muted-foreground truncate">{specialties.slice(0, 3).join(', ')}</span>
+            )}
+          </p>
+        )}
+
+        <span class="mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-primary group-hover:text-primary-strong transition-colors">
+          {ctaLabel}
+          <Icon name="arrow-right" class="w-4 h-4 transition-transform group-hover:translate-x-1" />
+        </span>
+      </div>
+    </div>
+  </a>
+</li>

package/src/sections/SituationalNav.astro

@@ -0,0 +1,120 @@
+---
+/**
+ * SituationalNav — visitor-scenario cards on the neighbourhoods hub ("one day", "with family"…), each naming the
+ * neighbourhoods that suit it. Every scenario, href and string comes from the site adapter. A CTA pointing at an
+ * in-page anchor gets a down chevron, any other href a right arrow.
+ */
+import { Icon } from '@sarimarcus/content-sites-ui/primitives';
+
+export interface SituationalScenario {
+  title: string;
+  description: string;
+  /** Display names, joined with a middle dot. */
+  neighborhoods: string[];
+  cta: { label: string; href: string };
+  secondaryLink?: { label: string; href: string };
+  /** SVG path data for the 24×24 icon. */
+  icon: string;
+  tone: 'primary' | 'secondary' | 'accent';
+}
+
+interface Props {
+  heading: string;
+  intro: string;
+  scenarios: SituationalScenario[];
+  class?: string;
+}
+
+const { heading, intro, scenarios, class: className } = Astro.props;
+
+const toneConfig = {
+  primary: {
+    bg: 'bg-primary/5 hover:bg-primary/10',
+    border: 'border-primary/20 hover:border-primary/40',
+    icon: 'text-primary',
+    iconBg: 'bg-primary/10',
+    text: 'text-primary-strong',
+    cta: 'text-primary hover:text-primary-strong',
+  },
+  secondary: {
+    bg: 'bg-secondary/5 hover:bg-secondary/10',
+    border: 'border-secondary/20 hover:border-secondary/40',
+    icon: 'text-secondary',
+    iconBg: 'bg-secondary/10',
+    text: 'text-secondary-strong',
+    cta: 'text-secondary hover:text-secondary-strong',
+  },
+  accent: {
+    bg: 'bg-accent/5 hover:bg-accent/10',
+    border: 'border-accent/20 hover:border-accent/40',
+    icon: 'text-accent-strong',
+    iconBg: 'bg-accent/10',
+    text: 'text-accent-strong',
+    cta: 'text-accent-strong hover:text-foreground',
+  },
+};
+---
+
+<section class:list={['py-12', className]}>
+  <div class="mb-6">
+    <h2 class="text-2xl sm:text-3xl font-display font-normal text-foreground mb-3">
+      {heading}
+    </h2>
+    <p class="text-muted-foreground max-w-deck">
+      {intro}
+    </p>
+  </div>
+
+  <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+    {scenarios.map((scenario) => {
+      const colors = toneConfig[scenario.tone];
+      return (
+        <article class:list={[
+          'relative p-6 rounded-xl border transition-all duration-200',
+          colors.bg,
+          colors.border
+        ]}>
+          <div class:list={['w-12 h-12 rounded-xl flex items-center justify-center mb-4', colors.iconBg]}>
+            <svg class:list={['w-6 h-6', colors.icon]} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d={scenario.icon} />
+            </svg>
+          </div>
+
+          <h3 class:list={['text-lg font-display font-medium mb-2', colors.text]}>
+            {scenario.title}
+          </h3>
+          <p class="text-base text-muted-foreground mb-4">
+            {scenario.description}
+          </p>
+
+          <p class="text-xs text-muted-foreground mb-4">
+            {scenario.neighborhoods.join(' · ')}
+          </p>
+
+          <a
+            href={scenario.cta.href}
+            class:list={['inline-flex items-center gap-2 text-sm font-medium transition-colors', colors.cta]}
+          >
+            {scenario.cta.label}
+            {scenario.cta.href.startsWith('#') ? (
+              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M19 14l-7 7-7-7" />
+              </svg>
+            ) : (
+              <Icon name="arrow-right" class="w-4 h-4" />
+            )}
+          </a>
+          {scenario.secondaryLink && (
+            <a
+              href={scenario.secondaryLink.href}
+              class="mt-2 inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {scenario.secondaryLink.label}
+              <Icon name="arrow-right" class="w-3 h-3" />
+            </a>
+          )}
+        </article>
+      );
+    })}
+  </div>
+</section>