Recipe — Marketing Landing Page
A complete marketing landing page assembled entirely from WireKit components. Twelve sections — navbar, hero, logo cloud, feature grid, two alternating detail blocks, stats, testimonials, pricing, FAQ, final call-to-action, footer — every one a chrome-vs-content surface with edge-to-edge background and content centered to the same max="xl" spine. Zero custom CSS; every visible element is a WireKit primitive.
If you're new to WireKit and need ONE worked example to copy-paste-and-tweak for a launch-ready marketing site, this is it.
Minimum Viable Marketing Page
Ship faster, in less time.
Acme halves your time-to-deploy. Push to Git and we handle build, global distribution, rollback, and observability — automatically, in under a second. No YAML deserts, no pipeline maintenance.
TRUSTED BY ENGINEERING TEAMS AT
WHY ACME
Everything you need to ship. Nothing you don't.
Three pillars, one platform. No plugin sprawl, no hidden add-ons.
Instant deploys
Sub-second deploys straight from your git push. Edge cache warm in 200 ms.
Global failover
99.99% uptime with automatic regional failover across 14 edge locations.
Security & compliance
SOC 2 Type II audited. Zero-trust by default. SSO, audit logs, BYOK encryption.
DEPLOY PIPELINE
From git push to global edge in under 800 ms.
Classic CI/CD pipelines burn minutes on build queues, sequential stages, and artifact uploads. Acme parallelizes every stage and uses a content-addressable cache that only rebuilds what actually changed.
The result: 92% of deploys hit cache; the rest build incrementally. No YAML, no worker configuration — the pipeline derives itself from your package.json.
- Parallel builds — frontend, API, and worker compile concurrently.
- Atomic rollbacks — one click that takes database schemas with it.
- Preview URLs per PR — with isolated DB and seed data.
$ git push origin main
→ Detected changes in src/api/*
→ Cache hit on frontend (skipped)
→ Building api... done (412 ms)
→ Deploying to 14 edge regions...
✓ Live at acme.app (total: 781 ms)OBSERVABILITY
Logs, traces, metrics. All three. Built-in.
Stop paying the tool tax: Datadog, Sentry, Logflare, Grafana — each one its own bill, its own login, its own query language. Acme writes logs, traces, and metrics into one store and makes them searchable through a single query surface.
30-day retention on the Hobby tier, 90 days on Pro. PII fields are automatically masked before they're persisted.
Read the observability docs →LOVED BY BUILDERS
What teams say after switching
We cut our deploy time from 6 minutes to under a second. The team actually wants to deploy on Fridays now.
Casey Lin
Staff Engineer, Lumenize
We replaced three different tools with one. Our infra bill dropped 70% and incidents dropped to near zero. The migration took an afternoon, not a quarter.
Priya Sandhu
CTO, Routerly
The preview-per-PR feature alone is worth it. Designers can review without us spinning up a staging environment.
Tomás Reyes
Tech Lead, Tessellate
PRICING
Simple, transparent pricing.
Pay for what you use. No negotiation, no "Contact Sales" walls.
Hobby
For personal projects and prototypes.
$0.00 /forever- 100 GB bandwidth
- 1 concurrent build
- Community support
- 30-day log retention
- Free SSL certificates
Pro
Most popularFor teams that ship professionally.
$20.00 /user/month- 1 TB bandwidth
- 10 concurrent builds
- Email + chat support
- 90-day log retention
- Custom domains, SSL
Enterprise
For regulated industries and large teams.
Custom
- Unlimited bandwidth
- SSO / SAML / SCIM
- Dedicated Slack channel
- 99.99% uptime SLA
- On-premise option
FAQ
Frequently asked questions
Ship faster today.
14-day Pro trial, then $0 forever on the Hobby plan. No credit card, no sales calls.
The Full Page
The preview above shows the canonical composition. The companion source block below ships the full Blade view ready to paste into resources/views/marketing/landing.blade.php — every section is a WireKit component; the only "custom code" is the four <div><h3><ul><li> link groupings inside the footer's columns slot, which match the canonical layout for the footer's four-column grid. Replace the placeholder copy + logo asset with your own.
{{-- resources/views/marketing/landing.blade.php --}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Acme — Ship faster, in less time.</title>
<meta name="description" content="Acme halves your time-to-deploy. Sub-second deploys, 99.99% uptime, SOC 2 Type II.">
@vite('resources/css/app.css')
@wirekitStyles
</head>
<body class="bg-[var(--color-wk-bg)] text-[color:var(--color-wk-text)]">
<x-wirekit::stack gap="none" class="w-full">
{{-- Navbar — sticky, container-wrapped content + 4 nav items
+ ghost Sign in + primary Get started. The `container max="xl"`
pair keeps the brand-bar-style chrome edge-to-edge while
aligning the brand + nav items with the body content spine. --}}
<x-wirekit::navbar sticky container max="xl">
<x-slot:brand>
<x-wirekit::brand logo="{{ asset('brand/logo.svg') }}" name="Acme" href="/" />
</x-slot:brand>
<x-wirekit::navbar.item href="#features">Features</x-wirekit::navbar.item>
<x-wirekit::navbar.item href="#pricing">Pricing</x-wirekit::navbar.item>
<x-wirekit::navbar.item href="#faq">FAQ</x-wirekit::navbar.item>
<x-wirekit::navbar.item href="/docs">Docs</x-wirekit::navbar.item>
<x-slot:actions>
<x-wirekit::button intent="neutral" surface="ghost" href="/login">Sign in</x-wirekit::button>
<x-wirekit::button href="/register">Get started</x-wirekit::button>
</x-slot:actions>
</x-wirekit::navbar>
{{-- Hero — eyebrow badge, title, lede paragraph, dual CTA --}}
<x-wirekit::hero size="lg" layout="centered" gradient animateIn="fade">
<x-slot:eyebrow>
<x-wirekit::badge intent="accent">New — Edge runtime v2</x-wirekit::badge>
</x-slot:eyebrow>
<x-slot:title>Ship faster, in less time.</x-slot:title>
<x-slot:lede>
Acme halves your time-to-deploy. Push to Git and we handle build, global distribution, rollback, and observability — automatically, in under a second.
</x-slot:lede>
<x-slot:actions>
<x-wirekit::button size="lg" href="/register">Get started — it's free</x-wirekit::button>
<x-wirekit::button size="lg" intent="neutral" surface="outline" href="#github">View on GitHub</x-wirekit::button>
</x-slot:actions>
</x-wirekit::hero>
{{-- Logo cloud — social proof above the fold --}}
<x-wirekit::section padding="xl">
<x-wirekit::container max="xl">
<x-wirekit::stack gap="lg" align="center">
<x-wirekit::text size="xs" variant="muted">TRUSTED BY ENGINEERING TEAMS AT</x-wirekit::text>
<x-wirekit::row gap="xl" justify="center" :wrap="true">
<x-wirekit::avatar alt="Lumenize" size="md" />
<x-wirekit::avatar alt="Routerly" size="md" />
<x-wirekit::avatar alt="Tessellate" size="md" />
<x-wirekit::avatar alt="Northbeam" size="md" />
<x-wirekit::avatar alt="Pivotmint" size="md" />
<x-wirekit::avatar alt="Helmwave" size="md" />
</x-wirekit::row>
</x-wirekit::stack>
</x-wirekit::container>
</x-wirekit::section>
{{-- Feature grid — 3 icon-led cards on a muted-tinted band --}}
<x-wirekit::section id="features" padding="2xl" background="muted">
<x-wirekit::container max="xl">
<x-wirekit::stack gap="xl" align="center">
<x-wirekit::stack gap="sm" align="center">
<x-wirekit::text size="xs" variant="muted">WHY ACME</x-wirekit::text>
<x-wirekit::heading level="2" size="3xl">Everything you need to ship. Nothing you don't.</x-wirekit::heading>
<x-wirekit::text variant="muted" align="center">Three pillars, one platform. No plugin sprawl, no hidden add-ons.</x-wirekit::text>
</x-wirekit::stack>
<x-wirekit::feature-grid cols="1 sm:2 lg:3" gap="lg" stagger>
<x-wirekit::feature animateIn="slide-up" icon="bolt" title="Instant deploys" class="items-center text-center">
Sub-second deploys straight from your git push. Edge cache warm in 200 ms.
</x-wirekit::feature>
<x-wirekit::feature animateIn="slide-up" icon="shield-check" title="Global failover" class="items-center text-center">
99.99% uptime with automatic regional failover across 14 edge locations.
</x-wirekit::feature>
<x-wirekit::feature animateIn="slide-up" icon="lock-closed" title="Security & compliance" class="items-center text-center">
SOC 2 Type II audited. Zero-trust by default. SSO, audit logs, BYOK encryption.
</x-wirekit::feature>
</x-wirekit::feature-grid>
</x-wirekit::stack>
</x-wirekit::container>
</x-wirekit::section>
{{-- Detail feature 1 — text left, code-block right --}}
<x-wirekit::section padding="2xl">
<x-wirekit::container max="xl">
<x-wirekit::grid cols="1 md:2" gap="xl" align="center">
<x-wirekit::stack gap="md">
<x-wirekit::text size="xs" variant="muted">DEPLOY PIPELINE</x-wirekit::text>
<x-wirekit::heading level="2" size="3xl">From git push to global edge in under 800 ms.</x-wirekit::heading>
<x-wirekit::text variant="muted">
Classic CI/CD pipelines burn minutes on build queues, sequential stages, and artifact uploads. Acme parallelizes every stage and uses a content-addressable cache that only rebuilds what actually changed.
</x-wirekit::text>
<x-wirekit::list spacing="sm">
<x-wirekit::list.item><strong>Parallel builds</strong> — frontend, API, and worker compile concurrently.</x-wirekit::list.item>
<x-wirekit::list.item><strong>Atomic rollbacks</strong> — one click that takes database schemas with it.</x-wirekit::list.item>
<x-wirekit::list.item><strong>Preview URLs per PR</strong> — with isolated DB and seed data.</x-wirekit::list.item>
</x-wirekit::list>
<x-wirekit::link href="/docs/build-cache">How our build cache works →</x-wirekit::link>
</x-wirekit::stack>
<x-wirekit::code-block language="bash" filename="~/projects/acme">$ git push origin main
→ Detected changes in src/api/*
→ Cache hit on frontend (skipped)
→ Building api... done (412 ms)
→ Deploying to 14 edge regions...
✓ Live at acme.app (total: 781 ms)</x-wirekit::code-block>
</x-wirekit::grid>
</x-wirekit::container>
</x-wirekit::section>
{{-- Stats — 3 metrics with semantically colored sparklines on a
diagonal dark gradient. Sparkline strokes use red / green /
gray hex literals so they stay visible against the hardcoded
dark gradient regardless of light/dark theme. --}}
<x-wirekit::section padding="2xl" style="background: linear-gradient(135deg, var(--color-wk-bg-inverse) 0%, color-mix(in srgb, var(--color-wk-bg-inverse) 90%, var(--color-wk-text-inverse)) 100%); color: var(--color-wk-text-inverse);">
<x-wirekit::container max="lg">
<x-wirekit::stats cols="3" stagger>
<x-wirekit::stat animateIn="slide-up" animate label="Avg. deploy time" value="781" description="ms" trend="down" change="-12">
<x-slot:sparkline>{{-- red polyline (--color-wk-danger); see preview above --}}</x-slot:sparkline>
</x-wirekit::stat>
<x-wirekit::stat animateIn="slide-up" animate label="Uptime SLA" value="99.99" description="%" trend="up" change="+0.03">
<x-slot:sparkline>{{-- green polyline (--color-wk-success) --}}</x-slot:sparkline>
</x-wirekit::stat>
<x-wirekit::stat animateIn="slide-up" animate label="GitHub stars" value="12400" change="+8" trend="up">
<x-slot:sparkline>{{-- muted polyline, derived from --color-wk-text-inverse --}}</x-slot:sparkline>
</x-wirekit::stat>
</x-wirekit::stats>
</x-wirekit::container>
</x-wirekit::section>
{{-- Testimonials — 3 cards with blockquote + avatar + name + role --}}
<x-wirekit::section padding="2xl">
<x-wirekit::container max="xl">
<x-wirekit::stack gap="xl" align="center">
<x-wirekit::stack gap="sm" align="center">
<x-wirekit::text size="xs" variant="muted">LOVED BY BUILDERS</x-wirekit::text>
<x-wirekit::heading level="2" size="3xl">What teams say after switching</x-wirekit::heading>
</x-wirekit::stack>
<x-wirekit::grid cols="1 md:3" gap="md">
{{-- … one card per testimonial; see preview above for the canonical shape. --}}
</x-wirekit::grid>
</x-wirekit::stack>
</x-wirekit::container>
</x-wirekit::section>
{{-- Pricing — 3 tiers, middle one carries a "Most popular" badge --}}
<x-wirekit::section id="pricing" padding="2xl" background="muted">
<x-wirekit::container max="xl">
<x-wirekit::stack gap="xl" align="center">
<x-wirekit::stack gap="sm" align="center">
<x-wirekit::text size="xs" variant="muted">PRICING</x-wirekit::text>
<x-wirekit::heading level="2" size="3xl">Simple, transparent pricing.</x-wirekit::heading>
</x-wirekit::stack>
<x-wirekit::grid cols="1 md:3" gap="md">
{{-- … three pricing cards; see preview above for the canonical shape. --}}
</x-wirekit::grid>
</x-wirekit::stack>
</x-wirekit::container>
</x-wirekit::section>
{{-- FAQ — native <x-wirekit::accordion>; tight container width
keeps the accordion from re-centering when items expand. --}}
<x-wirekit::section id="faq" padding="2xl">
<x-wirekit::container max="md">
<x-wirekit::stack gap="xl" align="center">
<x-wirekit::stack gap="sm" align="center">
<x-wirekit::text size="xs" variant="muted">FAQ</x-wirekit::text>
<x-wirekit::heading level="2" size="3xl">Frequently asked questions</x-wirekit::heading>
</x-wirekit::stack>
<x-wirekit::accordion class="w-full">
<x-wirekit::accordion.item title="How fast is 'sub-second' really?">
The median is 781 ms (P50); the 95th percentile is 1.4 s. On cache miss, a deploy can take up to 8 s. All numbers are published live on status.acme.app.
</x-wirekit::accordion.item>
{{-- … remaining FAQ items; see preview above. --}}
</x-wirekit::accordion>
</x-wirekit::stack>
</x-wirekit::container>
</x-wirekit::section>
{{-- Final CTA — single dark banner, one button (neutral filled on the dark surface) --}}
<x-wirekit::cta variant="dark" size="lg" animateIn="fade">
<x-slot:title>Ship faster today.</x-slot:title>
<x-slot:description>14-day Pro trial, then $0 forever on the Hobby plan. No credit card, no sales calls.</x-slot:description>
<x-slot:actions>
<x-wirekit::button intent="neutral" surface="filled" href="/register">Start free trial →</x-wirekit::button>
</x-slot:actions>
</x-wirekit::cta>
{{-- Footer — 4-column link grid + a single copyright line +
legal links on the bottom row (no logo / brand re-print). --}}
<x-wirekit::footer max="xl">
<x-slot:columns>{{-- … four <div> link groups; see preview above. --}}</x-slot:columns>
<x-slot:brand>
<x-wirekit::text size="xs" variant="muted">© 2026 Acme, Inc. All rights reserved.</x-wirekit::text>
</x-slot:brand>
<x-slot:legal>
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
<a href="/cookies">Cookies</a>
</x-slot:legal>
</x-wirekit::footer>
</x-wirekit::stack>
@wirekitScripts
</body>
</html>
Why This Composition Works
1. Same X-coordinate spine across every section.
Every chrome surface reads from the same max="xl" token: navbar's inner content, hero + cta (internal max-w-[var(--size-wk-container-xl)]), every <x-wirekit::container max="xl"> inside a <x-wirekit::section>, and the footer (max="xl"). The brand logo's left edge, every section header's left edge, and the footer legal row's left edge ALL sit on the same vertical X-coordinate. The eye tracks down cleanly without micro-adjustments.
2. Every chrome surface stays edge-to-edge.
Each chrome component (<x-wirekit::navbar>, <x-wirekit::hero>, <x-wirekit::section>, <x-wirekit::cta>, <x-wirekit::footer>) renders its own root element at viewport-edge level — no outer container wraps them. Backgrounds, borders, and gradients fill viewport-edge-to-edge; the content INSIDE each section is what's centered to the xl spine. The <x-wirekit::stack gap="none"> wrapper neutralizes any default body margins so adjacent sections sit flush against each other.
3. Chrome rhythm via alternating background tiers.
Adjacent default-background sections share the page background and read as one continuous surface. Inserting a background="muted" (subtle tint), background="inverse" (full dark), background="accent" (accent-colored), or a style="" gradient section in between creates a natural rhythm marker. This page alternates: hero (default) → logo cloud (default) → features (muted) → deploy pipeline (default) → observability (muted) → stats (diagonal dark gradient) → testimonials (default) → pricing (muted) → FAQ (default) → final CTA (dark) — default bands separated by tinted bands, no two muted bands adjacent.
4. Conversion-weighted button hierarchy.
The navbar carries TWO actions: the primary "Get started" uses the default button surface (filled, accent-colored) so it draws the most visual weight; the secondary "Sign in" uses intent="neutral" surface="ghost" so it reads as available-but-quiet. The hero's primary CTA matches the navbar's primary button to reinforce the conversion goal; the secondary "View on GitHub" uses surface="outline" so it remains tappable for a technical audience without competing with the primary path. Both hero buttons explicitly carry size="lg" so they match the hero's size="lg" rhythm and read as visually equal. The final CTA banner uses intent="neutral" surface="filled" on its button — required because the surrounding variant="dark" paints the inverse-bg surface, and a default primary button there would resolve to --color-wk-accent which collides with the near-black inverse background on the stock theme (same color on same color, button reads as invisible).
5. Section headers via the eyebrow + heading + lede pattern.
Every content-heavy section (features, testimonials, pricing, FAQ) opens with a three-line header: a small uppercase eyebrow (<x-wirekit::text size="xs" variant="muted">) categorizes the section, a <x-wirekit::heading level="2" size="3xl"> carries the main claim, and an optional <x-wirekit::text variant="muted" align="center"> lede expands the claim into one sentence. Wrap the trio in <x-wirekit::stack gap="sm" align="center"> for symmetric vertical rhythm.
6. Counter animations + semantically colored sparklines for stats.
<x-wirekit::stat animate> ticks 0 → target on scroll-into-view. The three stats on the diagonal-gradient band stagger their entrance via <x-wirekit::stats stagger> and each carries a tiny inline-SVG polyline in its sparkline slot. The stroke colors are picked semantically — red for the decreasing trend (Avg. deploy time), green for the improving trend (Uptime SLA), gray for the neutral-good trend (GitHub stars) — so the visual cue matches the trend indicator without needing a legend. Hex literals (not tokens) are used so the strokes stay visible against the hardcoded dark gradient regardless of light/dark theme. Both the counter and entrance animations honor prefers-reduced-motion: reduce — counters snap to target, entrances skip the fade.
7. FAQ via native <x-wirekit::accordion>.
The accordion primitive renders the FAQ items with built-in ARIA wiring (role="button", aria-expanded, aria-controls, keyboard navigation). No custom JavaScript, no Alpine state in the recipe — drop in the markup and the keyboard model works. The accordion sits inside a max="md" container with class="w-full" on the accordion itself, so its width stays constant whether items are collapsed or expanded — no horizontal re-centering on click.
8. Per-section entrance animations.
The page does not wrap a master fade around the whole composition — the docs site's replay button replaces a [data-replayable] ancestor's inner HTML, and a single master wrapper would re-mount every inner stat counter on click which has subtle re-init implications. Instead, each section carries its own animateIn (<x-wirekit::hero animateIn="fade">, <x-wirekit::feature animateIn="slide-up">, <x-wirekit::stat animateIn="slide-up">, <x-wirekit::cta animateIn="fade">), so every chrome surface reveals independently on scroll-into-view and replay re-triggers exactly the surface the user clicked on. The outer <x-wirekit::stack gap="none" class="w-full"> provides full-width centering without any animation scope of its own.
Customizations
Change the brand color theme: override --color-wk-accent (and any other --color-wk-* token) in your app.css :root {} block, or run php artisan wirekit:theme cupertino to apply a bundled preset.
Tighter mobile spacing: drop the hero / final CTA from size="lg" to size="md" or size="sm". Drop section padding from padding="2xl" to padding="xl" or padding="lg".
Wider content column: change every max="xl" to max="2xl" (or pick a different value — they all read from --size-wk-container-* tokens). Two sections deliberately use narrower containers: stats uses max="lg" to center the three stat cards comfortably without overshooting the gradient band, and the FAQ uses max="md" for shorter line lengths plus to keep the accordion's width constant on item expansion. Keep those two constrained even when widening the rest.
Trim to the minimum viable surface: drop the logo cloud + deploy pipeline + observability + testimonials + FAQ sections (five sections) to ship a 7-section landing page (navbar, hero, features, stats, pricing, CTA, footer). Add them back when you have real customer logos, real performance numbers worth showing in a code block, real customer quotes, and real FAQ traffic to populate them with.
Add a newsletter capture in the footer: wrap an <x-wirekit::input type="email"> + <x-wirekit::button>Subscribe</x-wirekit::button> row inside a 5th column in the footer columns slot. The footer's column grid is responsive and absorbs the extra cell cleanly.
Re-introduce the brand row in the footer: put a <x-wirekit::brand logo="…" name="Acme" /> BEFORE the copyright line inside <x-slot:brand>. The recipe omits the logo on the bottom row by default — the brand identity is already established by the sticky navbar at the top — but a logo-and-name re-print is the conventional shape for footers and entirely valid.
Cross-references
- Composition Patterns — Chrome vs. Content — the underlying design contract.
- Navbar, Brand, Hero, Section, Feature Grid, Code Block, Stat, Stats, Card, Blockquote, Avatar, Price, List, Accordion, CTA, Footer — per-component reference.
- Spine Contract — which components join the content-edge X-coordinate.
- Animations — the
animateInpreset catalog. - Theming — token overrides + the responsive-token pattern.