| name | site-marketing |
| description | Capsem marketing website (capsem.org). Use when editing marketing copy, adding sections, working with components, or changing the site theme. Covers site structure, data-driven content, component library, Tailwind theme, and dev workflow. |
Marketing Website
The marketing site (capsem.org) is a single-page landing built with Astro 6 + Svelte 5 + Tailwind v4. Source lives in site/.
Dev workflow
cd site && pnpm run dev
cd site && pnpm run build
cd site && pnpm run preview
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 (site/src/pages/index.astro) composed of Svelte components. All marketing copy is centralized in site/src/lib/data.ts -- edit that file to change text, not the components.
site/
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 site/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 site/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 site/src/lib/icons.ts, rendered via Icon.svelte. Favicons in site/public/ are generated from graphics/icon/1024w/capsem-logo-color.png.
