@sarimarcus/content-sites-tourism 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 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.0",
   "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.0",
+    "@sarimarcus/content-sites-ui": "0.12.0"
   }
 }

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,73 @@
+---
+/**
+ * ItineraryTeaser — compact bordered strip on the neighbourhoods hub: a multi-neighbourhood route with one CTA and a
+ * numbered link per stop. Hrefs and strings come from the site adapter.
+ */
+import { Icon } from '@sarimarcus/content-sites-ui/primitives';
+
+export interface ItineraryTeaserStop {
+  name: string;
+  href: string;
+  highlight: string;
+}
+
+interface Props {
+  title: string;
+  description: string;
+  stops: ItineraryTeaserStop[];
+  ctaLabel: string;
+  ctaHref: string;
+  class?: string;
+}
+
+const {
+  title,
+  description,
+  stops,
+  ctaLabel,
+  ctaHref,
+  class: className,
+} = Astro.props;
+---
+
+<section class:list={['relative py-6 px-6 sm:px-8 border border-border rounded-xl bg-muted/30', className]}>
+  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
+    <div>
+      <div class="flex items-center gap-2 mb-1">
+        <svg class="w-4 h-4 text-muted-foreground" 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>
+        <h2 class="text-lg font-display font-normal text-foreground">
+          {title}
+        </h2>
+      </div>
+      <p class="text-sm text-muted-foreground">
+        {description}
+      </p>
+    </div>
+    <a
+      href={ctaHref}
+      class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary hover:text-primary-strong border border-primary/30 hover:border-primary/50 rounded-lg transition-colors whitespace-nowrap focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+    >
+      {ctaLabel}
+      <Icon name="arrow-right" class="w-3.5 h-3.5" />
+    </a>
+  </div>
+
+  <div class="flex flex-col sm:flex-row gap-3">
+    {stops.map((stop, index) => (
+      <a
+        href={stop.href}
+        class="flex-1 flex items-start gap-3 p-3 bg-background hover:bg-muted/50 border border-border rounded-lg transition-colors group"
+      >
+        <span class="flex-shrink-0 w-6 h-6 rounded-full bg-muted flex items-center justify-center text-xs font-display font-medium text-muted-foreground">
+          {index + 1}
+        </span>
+        <div class="min-w-0">
+          <p class="text-sm font-medium text-foreground group-hover:text-primary transition-colors">{stop.name}</p>
+          <p class="text-xs text-muted-foreground line-clamp-1">{stop.highlight}</p>
+        </div>
+      </a>
+    ))}
+  </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>

package/src/sections/WalkStops.astro

@@ -0,0 +1,89 @@
+---
+/**
+ * WalkStops — numbered stop-by-stop route for a walk detail page. The site adapter resolves each stop's href and type
+ * label and supplies the heading and tip label.
+ */
+import { Badge, Icon } from '@sarimarcus/content-sites-ui/primitives';
+
+export interface WalkStop {
+  order: number;
+  name: string;
+  description: string;
+  typeLabel: string;
+  /** Omitted when the stop has no page of its own. */
+  href?: string;
+  duration: string;
+  tip?: string;
+}
+
+interface Props {
+  stops: WalkStop[];
+  heading: string;
+  /** Prefix before a stop's tip, e.g. "Tip:". */
+  tipLabel: string;
+  class?: string;
+}
+
+const { stops, heading, tipLabel, class: className } = Astro.props;
+---
+
+<section class:list={['walk-stops', className]}>
+  <h2 class="text-2xl sm:text-3xl font-display font-semibold text-foreground mb-8">
+    {heading}
+  </h2>
+
+  <ol class="relative space-y-0">
+    {stops.map((stop, i) => {
+      const isLast = i === stops.length - 1;
+
+      return (
+        <li class="relative pl-14 pb-10 group">
+          {!isLast && (
+            <div class="absolute left-[19px] top-10 bottom-0 w-0.5 bg-border group-hover:bg-primary/30 transition-colors" />
+          )}
+
+          <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-primary text-overlay-foreground flex items-center justify-center font-bold text-sm shrink-0 shadow-md">
+            {stop.order}
+          </div>
+
+          <div class="bg-card rounded-xl border border-border p-5 sm:p-6 hover:border-primary/30 transition-colors">
+            <div class="flex flex-wrap items-start justify-between gap-2 mb-2">
+              <div>
+                {stop.href ? (
+                  <a href={stop.href} class="text-lg sm:text-xl font-display font-semibold text-foreground hover:text-primary transition-colors">
+                    {stop.name}
+                  </a>
+                ) : (
+                  <h3 class="text-lg sm:text-xl font-display font-semibold text-foreground">
+                    {stop.name}
+                  </h3>
+                )}
+                <div class="flex flex-wrap items-center gap-2 mt-1">
+                  <Badge tone="custom" toneClass="bg-muted text-muted-foreground" size="sm" lines={0} class="![font-weight:inherit] !gap-1">
+                    {stop.typeLabel}
+                  </Badge>
+                  <span class="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                    <Icon name="clock" class="w-3 h-3" />
+                    {stop.duration}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <p class="text-muted-foreground leading-relaxed mt-3">
+              {stop.description}
+            </p>
+
+            {stop.tip && (
+              <div class="mt-4 p-3 bg-accent/5 border border-accent/20 rounded-lg">
+                <p class="text-sm text-foreground">
+                  <span class="font-semibold text-accent-strong">{tipLabel}</span> {stop.tip}
+                </p>
+              </div>
+            )}
+          </div>
+        </li>
+      );
+    })}
+  </ol>
+</section>

package/src/sections/WhoItsFor.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * WhoItsFor — an entity's audience and theme tags as a row of links to the pages that own those intents. The site
+ * adapter resolves the links (dropping tags with nowhere to go) and supplies the label and aria-label. Fewer than two
+ * links render nothing: one tag is an orphan, not a row.
+ */
+import { LinkArrow } from '@sarimarcus/content-sites-ui/primitives';
+
+export interface WhoItsForLink {
+  label: string;
+  href: string;
+  tone: 'primary' | 'secondary';
+}
+
+interface Props {
+  links: WhoItsForLink[];
+  label: string;
+  ariaLabel: string;
+  class?: string;
+}
+
+const { links, label, ariaLabel, class: className = '' } = Astro.props;
+
+const show = links.length >= 2;
+---
+
+{show && (
+  <nav
+    aria-label={ariaLabel}
+    class:list={['my-10', className]}
+    data-pagefind-ignore
+  >
+    <p class="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3">
+      {label}
+    </p>
+    <ul class="flex flex-wrap gap-2">
+      {links.map((link) => (
+        <li>
+          <LinkArrow
+            href={link.href}
+            color={link.tone}
+            class={`min-h-11 px-3 py-2 rounded-lg ${
+              link.tone === 'primary'
+                ? 'bg-primary/10 hover:bg-primary/15'
+                : 'bg-secondary/10 hover:bg-secondary/15'
+            }`}
+          >
+            {link.label}
+          </LinkArrow>
+        </li>
+      ))}
+    </ul>
+  </nav>
+)}

package/src/sections/hubHero.ts

@@ -0,0 +1,23 @@
+// NeighborhoodHubHero's controller: in-page category pills scroll smoothly and update the hash without a jump. Each
+// nav is wired once (data-hub-category-nav-ready), so a re-run after astro:page-load is a no-op.
+
+function initNav(nav: HTMLElement): void {
+  nav.querySelectorAll<HTMLAnchorElement>('a[href^="#"]').forEach((link) => {
+    link.addEventListener('click', (e) => {
+      const targetId = link.getAttribute('href')?.slice(1);
+      if (!targetId) return;
+      const target = document.getElementById(targetId);
+      if (!target) return;
+      e.preventDefault();
+      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      history.pushState(null, '', `#${targetId}`);
+    });
+  });
+}
+
+export function initHubCategoryNavs(): void {
+  document.querySelectorAll<HTMLElement>('[data-hub-category-nav]:not([data-hub-category-nav-ready])').forEach((nav) => {
+    nav.setAttribute('data-hub-category-nav-ready', '');
+    initNav(nav);
+  });
+}

package/src/sections/index.ts

@@ -1,2 +1,15 @@
-// Public surface of @sarimarcus/content-sites-tourism/sections. Components land here from SLA-2742 on.
-export {};
+// Public surface of @sarimarcus/content-sites-tourism/sections.
+export { default as WalkStops } from './WalkStops.astro';
+export { default as RankedListingRow } from './RankedListingRow.astro';
+export { default as WhoItsFor } from './WhoItsFor.astro';
+export { default as NeighborhoodCategory } from './NeighborhoodCategory.astro';
+export { default as SituationalNav } from './SituationalNav.astro';
+export { default as NeighborhoodHubHero } from './NeighborhoodHubHero.astro';
+export { default as ItineraryTeaser } from './ItineraryTeaser.astro';
+export { default as HomeMonuments } from './HomeMonuments.astro';
+export type { WalkStop } from './WalkStops.astro';
+export type { WhoItsForLink } from './WhoItsFor.astro';
+export type { NeighborhoodCategoryType } from './NeighborhoodCategory.astro';
+export type { SituationalScenario } from './SituationalNav.astro';
+export type { HubCategoryPill } from './NeighborhoodHubHero.astro';
+export type { ItineraryTeaserStop } from './ItineraryTeaser.astro';

package/src/templates/FacetEmpty.astro

@@ -0,0 +1,20 @@
+---
+/**
+ * FacetEmpty — internal to the facet templates: the state shown when a facet has no items.
+ */
+import { Icon } from '@sarimarcus/content-sites-ui/primitives';
+import type { FacetEmptyState } from './facet';
+
+type Props = FacetEmptyState;
+
+const { icon, message, link } = Astro.props;
+---
+
+<div class="text-center py-16">
+  {icon && <Icon name={icon} class="w-10 h-10 text-muted-foreground/40 mx-auto mb-4" />}
+  <p class="text-lg text-muted-foreground mb-6">{message}</p>
+  <a href={link.href} class="inline-flex items-center gap-2 text-sm font-medium text-primary hover:text-primary-strong transition-colors">
+    <Icon name="arrow-left" class="w-4 h-4" />
+    {link.label}
+  </a>
+</div>

package/src/templates/FacetHero.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * FacetHero — internal to the facet templates: the breadcrumb strip and the hero (badge, h1, lede). The badge icon is
+ * an Icon name (`icon`) or, without it, the `icon` slot.
+ */
+import { Badge, Icon } from '@sarimarcus/content-sites-ui/primitives';
+import { Container } from '@sarimarcus/content-sites-ui/layout';
+
+interface Props {
+  /** Hero background classes, e.g. a full `bg-gradient-to-b from-… to-…` string. */
+  bgClass: string;
+  /** Badge toneClass. */
+  badgeToneClass: string;
+  badgeLabel: string;
+  heading: string;
+  lede: string;
+  icon?: string;
+}
+
+const { bgClass, badgeToneClass, badgeLabel, heading, lede, icon } = Astro.props;
+---
+
+<div class="pt-16 bg-muted/50 border-b border-border">
+  <Container class="py-3">
+    <slot name="breadcrumb" />
+  </Container>
+</div>
+
+<section class={`relative py-16 lg:py-24 ${bgClass} text-overlay-foreground overflow-hidden`}>
+  <Container class="relative">
+    <div class="max-w-measure">
+      <Badge tone="custom" toneClass={badgeToneClass} size="lg" lines={0} class="mb-6 !py-1 ![font-weight:inherit] !gap-2">
+        {icon ? <Icon name={icon} class="w-4 h-4" /> : <slot name="icon" />}
+        {badgeLabel}
+      </Badge>
+      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-medium mb-6 font-display">
+        {heading}
+      </h1>
+      <p class="text-lg sm:text-xl text-overlay-foreground/90 leading-relaxed">
+        {lede}
+      </p>
+    </div>
+  </Container>
+</section>

package/src/templates/NeighborhoodFacetPage.astro

@@ -0,0 +1,99 @@
+---
+/**
+ * NeighborhoodFacetPage — one content type inside one neighbourhood (/neighborhood/<slug>/<type>). The route keeps
+ * paths, data, SEO and schema, and renders the site Layout around this template. It passes the site Breadcrumb in
+ * the `breadcrumb` slot, an optional block above the grid in `before-grid`, and the cards, rendered through its own
+ * card adapters, as default-slot children. The hero badge icon is an Icon name (`icon`); a custom glyph goes in the
+ * `icon` slot instead. Every string arrives as a prop.
+ */
+import { ArrowLabel, Icon } from '@sarimarcus/content-sites-ui/primitives';
+import { Container } from '@sarimarcus/content-sites-ui/layout';
+import FacetHero from './FacetHero.astro';
+import type { TrustedHtml } from '@sarimarcus/content-sites-ui/types';
+import type { FacetLink } from './facet';
+
+export type NeighborhoodFacetTone = 'overlay-secondary' | 'secondary' | 'primary-overlay' | 'accent-overlay';
+
+interface Props {
+  /** Hero gradient, top to bottom. */
+  tone: NeighborhoodFacetTone;
+  /** Icon name for the hero badge; without it the `icon` slot supplies the glyph. */
+  icon?: string;
+  badgeLabel: string;
+  heading: string;
+  lede: string;
+  /** The neighbourhood's own intro for this type: textAsHtml() for plain text, trustedHtml() for rendered markdown. */
+  introHtml?: TrustedHtml;
+  /** Back to the neighbourhood page, above the grid. */
+  backLink: FacetLink;
+  /** First bottom link, back to the neighbourhood guide. */
+  guideLink: FacetLink;
+  /** Further bottom links (the type's listing, all neighbourhoods). */
+  moreLinks: FacetLink[];
+  columns?: 2 | 3;
+}
+
+const { tone, icon, badgeLabel, heading, lede, introHtml, backLink, guideLink, moreLinks, columns = 2 } = Astro.props;
+
+const heroTones: Record<NeighborhoodFacetTone, string> = {
+  'overlay-secondary': 'bg-gradient-to-b from-overlay to-secondary-strong',
+  secondary: 'bg-gradient-to-b from-secondary to-secondary-strong',
+  'primary-overlay': 'bg-gradient-to-b from-primary to-overlay',
+  'accent-overlay': 'bg-gradient-to-b from-accent-strong to-overlay',
+};
+const gridClass = columns === 3 ? 'grid gap-6 sm:grid-cols-2 lg:grid-cols-3' : 'grid gap-6 lg:grid-cols-2';
+---
+
+<FacetHero
+  bgClass={heroTones[tone]}
+  badgeToneClass="bg-overlay-foreground/20 text-overlay-foreground"
+  badgeLabel={badgeLabel}
+  heading={heading}
+  lede={lede}
+  icon={icon}
+>
+  <slot name="breadcrumb" slot="breadcrumb" />
+  <slot name="icon" slot="icon" />
+</FacetHero>
+
+<main class="py-12 lg:py-20">
+  <Container>
+    <a
+      href={backLink.href}
+      class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors mb-10"
+    >
+      <Icon name="arrow-left" class="w-4 h-4" />
+      {backLink.label}
+    </a>
+
+    {introHtml && (
+      <div class="mb-10 p-6 lg:p-8 bg-muted/30 rounded-2xl">
+        <p class="text-foreground/80 leading-relaxed" set:html={introHtml} />
+      </div>
+    )}
+
+    <slot name="before-grid" />
+
+    <div class={gridClass}>
+      <slot />
+    </div>
+
+    <div class="mt-12 flex flex-wrap gap-4 justify-center">
+      <a
+        href={guideLink.href}
+        class="group inline-flex items-center gap-2 text-sm font-medium text-primary hover:text-primary-strong transition-colors"
+      >
+        <Icon name="arrow-left" class="w-4 h-4" />
+        {guideLink.label}
+      </a>
+      {moreLinks.map((link) => (
+        <a
+          href={link.href}
+          class="group inline-flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
+        >
+          <ArrowLabel>{link.label}</ArrowLabel>
+        </a>
+      ))}
+    </div>
+  </Container>
+</main>

package/src/templates/ProximityFacetPage.astro

@@ -0,0 +1,187 @@
+---
+/**
+ * ProximityFacetPage — places within walking distance of an area's landmarks (/hotels/near/<area>,
+ * /restaurants/near/<area>). The route keeps the distance ranking, SEO, schema and URLs, and renders the site Layout
+ * around this template. Site components arrive through slots: the Breadcrumb (`breadcrumb`), the map facts panel
+ * (`orientation`), the ranked rows (default slot), an optional block under the ranking (`after-ranking`), the FAQ
+ * (`faq`) and the related links (`related`). Intro and editorial HTML is rendered by the route. Every string arrives
+ * as a prop.
+ */
+import { Icon, SectionDivider } from '@sarimarcus/content-sites-ui/primitives';
+import { Container } from '@sarimarcus/content-sites-ui/layout';
+import type { TrustedHtml } from '@sarimarcus/content-sites-ui/types';
+import FacetHero from './FacetHero.astro';
+import FacetEmpty from './FacetEmpty.astro';
+import type { FacetEmptyState, FacetLink } from './facet';
+
+export interface ProximityIntroSection {
+  /** Anchor id of the subsection. */
+  id: string;
+  /** Subsection heading, set only when the area groups several landmarks. */
+  heading?: string;
+  html: TrustedHtml;
+}
+
+export interface ProximityEditorialGroup {
+  /** Group heading, set only when the area groups several landmarks; the group's sections then nest under it. */
+  heading?: string;
+  sections: { heading: string; html: TrustedHtml }[];
+}
+
+interface Props {
+  badgeLabel: string;
+  /** Icon name for the hero badge. */
+  icon: string;
+  heading: string;
+  lede: string;
+  intro?: { heading: string; sections: ProximityIntroSection[] };
+  /** Prose classes for the intro and editorial HTML, between `prose` and `prose-lg`. */
+  proseClass: string;
+  ranking: { id: string; heading: string; lede: string; allLink: FacetLink };
+  /** Ranked rows in the default slot; 0 shows `empty` instead. */
+  itemCount: number;
+  empty: FacetEmptyState;
+  editorial?: ProximityEditorialGroup[];
+  areaNav: { label: string; heading: string; links: FacetLink[] };
+}
+
+const {
+  badgeLabel,
+  icon,
+  heading,
+  lede,
+  intro,
+  proseClass,
+  ranking,
+  itemCount,
+  empty,
+  editorial = [],
+  areaNav,
+} = Astro.props;
+
+const introSections = intro?.sections ?? [];
+const hasEditorial = editorial.some((g) => g.sections.length > 0);
+---
+
+<FacetHero
+  bgClass="bg-secondary-strong"
+  badgeToneClass="bg-overlay-foreground/10 text-overlay-foreground/90"
+  badgeLabel={badgeLabel}
+  heading={heading}
+  lede={lede}
+  icon={icon}
+>
+  <slot name="breadcrumb" slot="breadcrumb" />
+</FacetHero>
+
+<main class="py-12 lg:py-20">
+  <Container>
+    {intro && introSections.length > 0 && (
+      <section class="mb-12 lg:mb-16">
+        <div class="max-w-measure">
+          <h2 class="font-display text-2xl sm:text-3xl text-foreground mb-6">
+            {intro.heading}
+          </h2>
+          <div class:list={['prose', proseClass, 'prose-lg']}>
+            {introSections.map((s, i) => (
+              <>
+                {i > 0 && <SectionDivider variant="dots" />}
+                {s.heading && (
+                  <h3 id={s.id} class="scroll-mt-28">{s.heading}</h3>
+                )}
+                <div set:html={s.html} />
+              </>
+            ))}
+          </div>
+        </div>
+      </section>
+    )}
+
+    <div class="mb-14 lg:mb-20">
+      <slot name="orientation" />
+    </div>
+
+    <section aria-labelledby={ranking.id} class="scroll-mt-28">
+      <div class="flex flex-wrap items-end justify-between gap-x-6 gap-y-3 mb-8">
+        <div>
+          <h2 id={ranking.id} class="font-display text-2xl sm:text-3xl text-foreground">
+            {ranking.heading}
+          </h2>
+          <p class="mt-2 text-muted-foreground max-w-deck">
+            {ranking.lede}
+          </p>
+        </div>
+        <a
+          href={ranking.allLink.href}
+          class="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:text-primary-strong transition-colors"
+        >
+          {ranking.allLink.label}
+          <Icon name="arrow-right" class="w-4 h-4" />
+        </a>
+      </div>
+
+      {itemCount > 0 && (
+        <ol class="list-none border-t border-border">
+          <slot />
+        </ol>
+      )}
+
+      {itemCount === 0 && <FacetEmpty {...empty} />}
+    </section>
+
+    <slot name="after-ranking" />
+
+    {hasEditorial && (
+      <div class="mt-16 lg:mt-24 max-w-measure">
+        {editorial.map((group) => {
+          if (!group.sections.length) return null;
+          const nested = group.heading !== undefined;
+          const SectionHeading = nested ? 'h3' : 'h2';
+          return (
+            <>
+              {nested && (
+                <h2 class="font-display text-2xl sm:text-3xl text-foreground mt-16 first:mt-0 mb-2">
+                  {group.heading}
+                </h2>
+              )}
+              {group.sections.map((sec) => (
+                <section class="mt-12 first:mt-0">
+                  <SectionHeading
+                    class:list={[
+                      'font-display text-foreground mb-5 scroll-mt-28',
+                      nested ? 'text-xl sm:text-2xl' : 'text-2xl sm:text-3xl',
+                    ]}
+                  >
+                    {sec.heading}
+                  </SectionHeading>
+                  <div class:list={['prose', proseClass, 'prose-lg']} set:html={sec.html} />
+                </section>
+              ))}
+            </>
+          );
+        })}
+      </div>
+    )}
+
+    <slot name="faq" />
+
+    <slot name="related" />
+
+    <nav aria-label={areaNav.label} class="mt-16 pt-8 border-t border-border">
+      <p class="text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-3">{areaNav.heading}</p>
+      <ul class="flex flex-wrap gap-x-6 gap-y-2 list-none p-0 m-0">
+        {areaNav.links.map((link) => (
+          <li>
+            <a
+              href={link.href}
+              class="inline-flex items-center gap-1.5 text-sm text-foreground hover:text-primary transition-colors"
+            >
+              {link.label}
+              <Icon name="arrow-right" class="w-3 h-3" />
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  </Container>
+</main>

package/src/templates/TierFacetPage.astro

@@ -0,0 +1,133 @@
+---
+/**
+ * TierFacetPage — one price tier of a content type (/activities/price/<tier>, /restaurants/price/<tier>). The route
+ * keeps the tiers, filtering, SEO, schema and URLs, and renders the site Layout around this template. It passes the
+ * site Breadcrumb in the `breadcrumb` slot, the cards (through its card adapters) as default-slot children and its
+ * closing links in `footer`. Every string arrives as a prop.
+ */
+import { Badge, Chip, Icon } from '@sarimarcus/content-sites-ui/primitives';
+import { Container } from '@sarimarcus/content-sites-ui/layout';
+import type { TrustedHtml } from '@sarimarcus/content-sites-ui/types';
+import FacetHero from './FacetHero.astro';
+import FacetEmpty from './FacetEmpty.astro';
+import type { FacetEmptyState, FacetLink } from './facet';
+
+export type TierFacetTone = 'secondary' | 'secondary-overlay';
+
+export interface TierNavItem {
+  href: string;
+  label: string;
+  /** Range shown after the label, punctuation included, e.g. "(Under €25)". */
+  detail: string;
+  count: number;
+  active: boolean;
+}
+
+export interface TierNav {
+  /** `panel`: boxed, headed, large outline chips. `inline`: bare row of muted chips. */
+  variant: 'panel' | 'inline';
+  /** Panel heading; `panel` only. */
+  heading?: string;
+  /** aria-label of the chip nav. */
+  label: string;
+  /** The unfiltered listing. */
+  all: { href: string; label: string; count: number };
+  tiers: TierNavItem[];
+}
+
+interface Props {
+  tone: TierFacetTone;
+  /** Icon name for the hero badge. */
+  icon: string;
+  badgeLabel: string;
+  heading: string;
+  lede: string;
+  nav: TierNav;
+  introHtml?: TrustedHtml;
+  backLink: FacetLink;
+  /** Cards in the default slot; 0 shows `empty` under the grid. */
+  itemCount: number;
+  empty: FacetEmptyState;
+  columns?: 2 | 3;
+}
+
+const { tone, icon, badgeLabel, heading, lede, nav, introHtml, backLink, itemCount, empty, columns = 2 } = Astro.props;
+
+const heroTones: Record<TierFacetTone, string> = {
+  secondary: 'bg-gradient-to-b from-secondary to-secondary-strong',
+  'secondary-overlay': 'bg-gradient-to-b from-secondary to-overlay',
+};
+const panel = nav.variant === 'panel';
+const NavWrap = panel ? 'section' : 'div';
+const navWrapClass = panel
+  ? 'mb-10 p-6 bg-gradient-to-r from-secondary/5 via-primary/5 to-secondary/5 rounded-2xl border border-border'
+  : 'mb-10';
+const chip = panel
+  ? { size: 'lg' as const, tone: 'outline' as const, accent: 'primary' as const }
+  : { size: 'md' as const, tone: 'muted' as const, accent: 'primary' as const };
+const allChipProps = panel ? { href: nav.all.href, ...chip, class: 'gap-2' } : { href: nav.all.href, ...chip };
+const tierChipProps = (t: TierNavItem) => ({
+  href: t.href,
+  ...chip,
+  active: t.active,
+  'aria-current': t.active ? ('page' as const) : undefined,
+  ...(panel ? { class: t.active ? 'gap-2 shadow-md' : 'gap-2' } : {}),
+});
+const countTone = (active: boolean) => (active ? 'bg-overlay-foreground/20' : panel ? 'bg-muted' : 'bg-background');
+const countClass = panel ? '![font-weight:inherit]' : '!px-1.5 ![font-weight:inherit]';
+const gridClass = columns === 3 ? 'grid gap-6 sm:grid-cols-2 lg:grid-cols-3' : 'grid gap-6 lg:grid-cols-2';
+---
+
+<FacetHero
+  bgClass={heroTones[tone]}
+  badgeToneClass="bg-overlay-foreground/20 text-overlay-foreground"
+  badgeLabel={badgeLabel}
+  heading={heading}
+  lede={lede}
+  icon={icon}
+>
+  <slot name="breadcrumb" slot="breadcrumb" />
+</FacetHero>
+
+<main class="py-12 lg:py-20">
+  <Container>
+    <NavWrap class={navWrapClass}>
+      {panel && <h2 class="text-lg font-normal text-foreground font-display mb-5">{nav.heading}</h2>}
+      <nav class={panel ? 'flex flex-wrap gap-3' : 'flex flex-wrap gap-2'} aria-label={nav.label}>
+        <Chip {...allChipProps}>
+          {nav.all.label}
+          <Badge tone="custom" toneClass={countTone(false)} size="sm" lines={0} class={countClass}>{nav.all.count}</Badge>
+        </Chip>
+        {nav.tiers.map((t) => (
+          <Chip {...tierChipProps(t)}>
+            {t.label}<span class="text-xs opacity-75">{t.detail}</span>
+            <Badge tone="custom" toneClass={countTone(t.active)} size="sm" lines={0} class={countClass}>{t.count}</Badge>
+          </Chip>
+        ))}
+      </nav>
+    </NavWrap>
+
+    {introHtml && (
+      <div class="mb-10 p-6 lg:p-8 bg-muted/30 rounded-2xl">
+        <div class="prose prose-lg max-w-measure-wide">
+          <p class="text-foreground/80 leading-relaxed" set:html={introHtml} />
+        </div>
+      </div>
+    )}
+
+    <a
+      href={backLink.href}
+      class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors mb-8"
+    >
+      <Icon name="arrow-left" class="w-4 h-4" />
+      {backLink.label}
+    </a>
+
+    <div class={gridClass}>
+      <slot />
+    </div>
+
+    {itemCount === 0 && <FacetEmpty {...empty} />}
+    <slot name="footer" />
+  </Container>
+</main>

package/src/templates/facet.ts

@@ -0,0 +1,14 @@
+// Types shared by the facet page templates.
+
+export interface FacetLink {
+  href: string;
+  label: string;
+}
+
+/** What a facet with no items shows instead of its list. */
+export interface FacetEmptyState {
+  /** Icon name above the message. */
+  icon?: string;
+  message: string;
+  link: FacetLink;
+}

package/src/templates/index.ts

@@ -1,2 +1,8 @@
-// Public surface of @sarimarcus/content-sites-tourism/templates. Components land here from SLA-2742 on.
-export {};
+// Public surface of @sarimarcus/content-sites-tourism/templates.
+export { default as NeighborhoodFacetPage } from './NeighborhoodFacetPage.astro';
+export { default as ProximityFacetPage } from './ProximityFacetPage.astro';
+export { default as TierFacetPage } from './TierFacetPage.astro';
+export type { FacetEmptyState, FacetLink } from './facet';
+export type { NeighborhoodFacetTone } from './NeighborhoodFacetPage.astro';
+export type { ProximityIntroSection, ProximityEditorialGroup } from './ProximityFacetPage.astro';
+export type { TierFacetTone, TierNav, TierNavItem } from './TierFacetPage.astro';