# Site Marketing

> The marketing website, capsem.org. Use when editing copy, adding sections, or changing the site theme.

- Skill: `google/site-marketing` (Agent Skill)
- Install (CLI): `npx skillmds@latest add google/site-marketing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/google/site-marketing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: Google (https://skillmd.com/u/google)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/google/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

```bash
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:

| Export | Content |
|--------|---------|
| `SITE` | Name, tagline, description, URLs (GitHub, docs, releases) |
| `NAV_LINKS` | Top nav items |
| `AGENTS` | Supported AI agents list |
| `SECURITY_BLOCKS` | Three security pillars (isolation, inspection, control) |
| `HOST_COMPONENTS` | Host-side architecture diagram items |
| `GUEST_COMPONENTS` | Guest-side architecture diagram items |
| `VSOCK_CHANNELS` | Vsock port labels for architecture diagram |
| `FAQS` | FAQ question/answer pairs |
| `FOOTER_COLUMNS` | Footer link groups |
| `MCP_TOOLS` | MCP tool examples |
| `PACKAGES` | Pre-installed packages list |
| `ROADMAP` | Roadmap items |

## 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`.