Scaffolding Marketing Sections

Study these before writing new sections -- they demonstrate the project's patterns:

Archetype-to-Component Mapping

Hero (hero-with-demo)

Structure:
  <section> (full-width, gradient background)
    container (max-w-[1200px] mx-auto)
      grid (lg:grid-cols-12)
        left-col (lg:col-span-5) -- text content
          badge (optional)
          h1 (text-display-lg, font-bold, tracking-tight)
          p.subheadline (text-body-large, text-text-secondary)
          CTA row (flex gap-4)
            a.btn.btn-primary.btn-lg
            a.btn.btn-secondary
        right-col (lg:col-span-7) -- visual/demo
          <InteractiveTerminal /> or hero visual
      trust-mechanic (optional logo row below)

Section padding: pt-24 pb-16 lg:pt-32 lg:pb-24
Side padding: px-6 lg:px-16
Background: bg-gradient-hero or subtle radial gradients

Social Proof Bar (metric-plus-logos)

Structure:
  <section> (border-b border-border-subtle)
    container
      metrics-row (flex justify-center gap-12)
        metric (text-center)
          value (text-display, text-signal-action)
          label (text-label, text-text-tertiary, uppercase, tracking-wide)
      logos-row (flex items-center justify-center gap-6)
        "Works with" label (text-label, text-text-tertiary)
        logo pills (bg-surface-02, border, rounded-full, px-3 py-1.5)
      badges-row (flex justify-center gap-4)
        badge (bg-surface-02/50, border, rounded-full, text-label)

Section padding: py-12
No background change -- inherits page bg

Mechanism (code-then-output)

Structure:
  <section>
    container
      text-center header
        h2 (text-display, font-bold, tracking-tight)
        p.subheadline (text-body-large, text-text-secondary)
      code-block-pair (repeated for bundle + pipeline)
        grid (lg:grid-cols-2, gap-6)
          left-panel -- YAML config
            code-chrome (header bar + language label)
            pre > code (font-mono, text-data)
          right-panel -- CLI output
            terminal-chrome (header bar + "output" label)
            pre > code (font-mono, text-data)
      body-paragraph (text-body-large, text-text-secondary, max-w-3xl mx-auto)

Section padding: py-24 lg:py-32
See: building-code-displays skill for code block details

Value Grid (bento-grid)

Structure:
  <section>
    container
      text-center header
        h2 (text-display, font-bold, tracking-tight)
        p.subheadline (text-body-large, text-text-secondary)
      div.bento-grid
        card-1.bento-item.bento-large -- primary differentiator
          icon (w-10 h-10, bg-signal-action/10, text-signal-action)
          h3 (text-heading, text-text-primary)
          p (text-body, text-text-secondary)
          optional inline code reference
        card-2.bento-item.bento-large -- primary differentiator
          (same structure)
        card-3.bento-item -- supporting differentiator
          (same structure, no bento-large)
        card-4.bento-item -- supporting differentiator
          (same structure, no bento-large)

Section padding: py-24
Card classes: use .bento-item from app.css (NOT custom card styles)
Card hover: built into .bento-item (border-signal-action/50 on hover)

Proof Block (metric-showcase)

Structure:
  <section>
    container
      text-center header
        h2 (text-display, font-bold, tracking-tight)
        p.subheadline (text-body-large, text-text-secondary)
      founder-credential (card or glass panel)
        avatar/icon + name + role
        p (text-body-large, text-text-secondary)
      metrics-grid (grid md:grid-cols-3 gap-6)
        metric-card (card or bg-surface-02 rounded-lg p-6)
          value (text-display, text-signal-action or text-text-primary)
          label (text-body, text-text-secondary)

Section padding: py-24
Background: bg-surface-02 or subtle gradient for contrast

Community Block (centered-statement)

Structure:
  <section>
    container (text-center, max-w-2xl mx-auto)
      h2 (text-display, font-bold, tracking-tight)
      p.subheadline (text-body-large, text-text-secondary)
      links-row (flex justify-center gap-4)
        a.btn.btn-primary -- GitHub link
        a.btn.btn-secondary -- Discord link
      optional metrics (hidden until populated)

Section padding: py-24
Minimal decoration -- centered-statement should breathe

CTA Block (centered-statement)

Structure:
  <section>
    container (text-center, max-w-2xl mx-auto)
      h2 (text-display-lg or text-display, font-bold, tracking-tight)
      p.subheadline (text-body-large, text-text-secondary)
      install-command (code block, copyable, centered)
        pre > code (font-mono, text-body-large)
        CopyButton
      secondary-links (flex justify-center gap-4)
        a (text-signal-action, hover:underline)
      friction-reducers (flex justify-center gap-4)
        span.badge or inline pill per reducer

Section padding: py-32 (extra breathing room for final CTA)
Background: optional subtle gradient-mesh-subtle

Content Slot-to-Markup Translation Table

Component File Pattern

<script lang="ts">
  // 1. Imports (Svelte lifecycle, GSAP if animated, child components)
  import { onMount } from 'svelte';

  // 2. Props (if the section takes external data)
  // Most sections are self-contained with hardcoded IA copy

  // 3. State (if interactive)
  let sectionRef: HTMLElement;
</script>

<!-- Section with semantic ID for anchor navigation -->
<section
  id="section-anchor-id"
  bind:this={sectionRef}
  class="py-24 px-6 lg:px-16"
  aria-labelledby="section-heading-id"
>
  <div class="mx-auto max-w-[1200px]">
    <!-- Section header -->
    <div class="text-center mb-12">
      <h2
        id="section-heading-id"
        class="text-display font-bold tracking-tight text-text-primary mb-4"
      >
        {/* IA section-headline slot */}
      </h2>
      <p class="text-body-large text-text-secondary max-w-2xl mx-auto">
        {/* IA section-subheadline slot */}
      </p>
    </div>

    <!-- Section body (archetype-specific layout) -->
    <!-- ... -->
  </div>
</section>

File naming: SectionName.svelte in PascalCase. Place in apps/marketing-site/src/lib/components/.

Examples: CategoryStake.svelte, CredibilityBar.svelte, MechanismSection.svelte, ValueGrid.svelte, ProofBlock.svelte, CommunityBlock.svelte, CtaBlock.svelte.

Props Interface Pattern

Most marketing sections are self-contained (copy comes from wireframe, not props). Use $props() only when a component needs external data:

<script lang="ts">
  // Props for reusable sub-components
  interface Props {
    title: string;
    description: string;
    icon?: string;
  }

  let { title, description, icon }: Props = $props();
</script>

For top-level sections, hardcode the IA copy directly -- this makes the component a self-documenting artifact that matches the IA exactly.

Trust Mechanic Integration

Each IA section specifies a trust mechanic. Integrate them as follows:

Responsive Patterns

Every section must work at 375px, 768px, and 1280px:

• Grid columns: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 (or lg:grid-cols-12 for hero)
• Side padding: px-6 md:px-10 lg:px-16
• Section padding: py-24 standard, py-32 for CTA block
• Text alignment: text-center lg:text-left for hero; text-center for all others
• Stacking: Grid items stack to single column on mobile

Anti-Patterns

Workflow

1. Read the IA section definition -- archetype, layout pattern, content slots, trust mechanic
2. Read the wireframe copy -- exact text for every content slot
3. Check existing components -- does a component already cover this archetype?
4. Scaffold the component using the archetype-to-component mapping above
5. Fill content slots using the slot-to-markup translation table
6. Add trust mechanic per the integration table
7. Add anchor id for in-page navigation (e.g., id="mechanism")
8. Add aria-labelledby pointing to the section heading
9. Test responsive at 375px, 768px, 1280px widths (mentally or via dev tools)

Related Skills

• building-code-displays -- detailed guidance for code-then-output layout pattern (Mechanism section)
• animating-scroll-reveals -- when and how to add scroll animations to scaffolded sections
• assembling-pages -- how to compose sections into the final +page.svelte
• auditing-design-compliance -- post-implementation QC pass