# Marketing Page A dark landing page with a hero, a three-feature row, three pricing tiers, and a footer. The recipe leans on `@elements/style`: a hero CTA is ``, the pricing tiers are `.card` with `.head` / `.body` / `.foot` children, the dark surface is one class on the page that overrides a handful of CSS variables. No database, no RPC, no LiveTable: the recipe is a route, a template, and a `style.css`. ## Page setup ```bash Terminal elements create page marketing ``` The page has no attributes and no rpc. The route renders the template; the template carries all the content and the `style.css` carries the dark theme overrides. ```ts app/pages/marketing/index.ts import { Request, Response } from "@elements/app"; import marketing from "./template"; export default function route(req: Request, res: Response) { return new marketing(); } ``` ```ehtml app/pages/marketing/template.ehtml import "./style.css"; interface Tier { name: string; price: string; blurb: string; features: string[]; cta: string; emphasis: boolean; } const TIERS: Tier[] = [ { name: "starter", price: "$9", blurb: "for side projects and prototypes.", features: ["1 app", "shared workers", "email support"], cta: "choose starter", emphasis: false, }, { name: "pro", price: "$29", blurb: "for teams shipping production apps.", features: ["unlimited apps", "dedicated workers", "priority support"], cta: "choose pro", emphasis: true, }, { name: "enterprise", price: "custom", blurb: "for orgs with security and compliance needs.", features: ["everything in pro", "SSO + SAML", "managed onboarding"], cta: "talk to sales", emphasis: false, }, ]; const FEATURES = [ { title: "one workspace", body: "projects, tasks, and files in one place, shared with your whole team.", }, { title: "real-time by default", body: "every change appears for everyone on the team the moment it is made.", }, { title: "set up in minutes", body: "import your projects, invite your team, and start the same afternoon.", }, ];

ship projects in days, not months.

acme keeps your projects, your tasks, and your team in one live workspace.

get started read the docs

everything you need, nothing you don't.

simple pricing.

{t.name}

{t.price}/mo

{t.blurb}

  • {feat}
{t.cta}
``` The `` tag carries the page class, matching what `elements create page marketing` produces. The class is the anchor for every page-scoped style rule below. The hero CTA uses `` so the anchor renders as a button (anchor coercion via `.button`) and `accent hero` selects the fill color and the marketing-CTA height. The pricing tiers iterate `TIERS` and emit `
` (or `card stark` for the emphasized tier). The card uses scoped children (`.head`, `.body`, `.foot`), the standard `@elements/style` card layout. The emphasized tier's CTA is `accent block`; the rest are plain `block` buttons. The feature row uses a `