Site Marketing

Marketing Website

The marketing site (capsem.org) is a single-page landing built with Astro 7 + Svelte 5 + Tailwind v4. Source lives in web/marketing/.

Dev workflow

cd web/marketing && pnpm run dev     # localhost:4321
cd web/marketing && pnpm run build   # Production build
cd web/marketing && pnpm run preview # Preview production build

CI and deploy rail

ci.yaml runs the merge-blocking site-build job under pr-gate. site.yaml deploys only on every push to main and smokes https://capsem.org/. This deploy rail is independent from binary releases, manual VM asset releases, and the release.capsem.org asset-channel workflow.

Architecture

Single page (web/marketing/src/pages/index.astro) composed of Svelte components. All marketing copy is centralized in web/marketing/src/lib/data.ts -- edit that file to change text, not the components.

web/marketing/
  astro.config.mjs           Astro config (site: capsem.org, Svelte + Tailwind)
  package.json               capsem-marketing package
  src/
    pages/index.astro        Single landing page, composes all sections
    layouts/Base.astro       HTML shell (meta, fonts, skip-to-content)
    lib/data.ts              All copy: site metadata, nav, features, FAQ, footer
    lib/icons.ts             Icon SVG paths
    styles/global.css        Tailwind theme tokens, base styles, button utilities
    components/
      Nav.svelte             Top navigation (client:load)
      Hero.svelte            Hero section with install command
      Features.svelte        Feature cards grid
      ProductOverview.svelte Architecture diagram (host/guest/vsock)
      HowItWorks.svelte      Step-by-step explanation
      FAQ.svelte             Accordion FAQ (client:visible)
      CTA.svelte             Call-to-action (client:visible)
      Footer.svelte          Footer with link columns
      Section.svelte         Reusable section wrapper
      SectionHeader.svelte   Reusable heading + subtitle
      Card.svelte            Reusable card component
      Badge.svelte           Reusable badge component
      Icon.svelte            SVG icon component
      InstallCommand.svelte  Copy-to-clipboard install snippet

Content editing

All text lives in web/marketing/src/lib/data.ts as typed const exports:

Theme

Defined in web/marketing/src/styles/global.css using Tailwind v4 @theme tokens:

• Accent: --color-accent (blue), --color-accent-secondary (purple), gradient between them
• Surfaces: light (--color-surface) and dark (--color-surface-dark) variants
• Text: separate light-bg and dark-bg tokens, all WCAG AA compliant
• Buttons: 4 pill variants as @utility classes: btn-primary (gradient), btn-dark, btn-outline, btn-outline-dark
• Font: Inter (loaded from Google Fonts in Base.astro)

Component patterns

• Sections alternate light/dark backgrounds using section-dark utility class
• Section.svelte and SectionHeader.svelte provide consistent spacing and headings
• Interactive components use Svelte hydration directives: client:load (Nav) or client:visible (FAQ, CTA)
• gradient-text utility for accent-colored headings

Graphics and icons

Icons use inline SVG paths from web/marketing/src/lib/icons.ts, rendered via Icon.svelte. Favicons in web/marketing/public/ are generated from web/graphics/icon/1024w/capsem-logo-color.png.