# 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 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. `app/pages/marketing/index.ts`: ```ts import marketing from "./template"; export default function route(req, res) { return new marketing(); } ``` `app/pages/marketing/template.html`: ```html import "./style.css"; interface Tier { name: string; price: string; blurb: string; features: string[]; cta: string; emphasis: boolean; } const TIERS: Tier[] = [ { name: "free", price: "$0", blurb: "for hobby projects and prototypes.", features: ["1 app", "shared workers", "community support"], cta: "start free", emphasis: false, }, { name: "pro", price: "$29", blurb: "for teams shipping production apps.", features: ["unlimited apps", "dedicated workers", "priority support"], cta: "start a trial", 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 mental model", body: "html with bindings, sql with template strings, rpc with one decorator.", }, { title: "real-time by default", body: "livetables and channels are built in. broadcast on insert, listen in a template.", }, { title: "deploy in seconds", body: "elements deploy ships your app to any ubuntu box in a single command.", }, ];

build apps in days, not months.

elements gives you html, sql, real-time, and deploy in one mental model.

get started free 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 `