Marketing

Four-tile bento grid (4 cols × 2 rows on lg). One large 2×2 hero tile with a mini progress + stats illustration; one wide 2×1 secondary tile; two square 1×1 tiles (a big-number setup-time stat and a compliance line). Each tile is a raw Card with the content spelled out inline — swap any one without affecting the others.

Two-column contact section. Left column has eyebrow, headline, lede, three icon-prefixed contact rows (email / phone / office), and a map placeholder. Right column is a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state after submit. Emits "submit" with the form payload.

Two-column contact section. Left: eyebrow, headline, lede, icon contact rows (email / phone / office) and a live Mapbox map pinned to your office (pass access-token + location; falls back to a placeholder without a token). Right: a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state. Emits "submit" with the payload.

Centered call-to-action section. Soft gradient backdrop, large headline, supporting copy, primary + outline buttons, and a fine-print line for trial / cancel terms.

Single-column FAQ section. Eyebrow + headline + email-CTA lede, then six accordion items (trial / migration / security / pricing / support / cancel). Uses Accordion in single-collapsible mode so only one answer expands at a time. Questions are spelled out inline so consumers can rewrite them directly.

Three-column features grid (six cards). Eyebrow + headline + lede, then each card has a tinted icon-box, a short title, and a one-paragraph description. Cards are spelled out inline — swap, reorder, or change icons without unwiring a wrapper.

Site footer with brand mark + newsletter form on the left and four link columns (Product / Company / Resources / Legal) on the right. Separator divides into a copyright + social icon row. Each link is spelled out inline so copy lives in one place.

Sticky marketing top-bar. Brand mark on the left, five inline anchor links in the centre on desktop, "Sign in" + primary trial CTA on the right. Below the md breakpoint the right side collapses into a hamburger that opens a right-side Sheet with the same links and CTAs stacked. Translucent background uses backdrop-blur so content can scroll behind it.

Two-column hero with badge eyebrow, large headline, supporting copy, primary + outline CTAs, social proof row, and a collage of three rotated KPI cards (active users / uptime / onboarding queue) on the right.

Customer-logo cloud strip. "Trusted by teams at" eyebrow over a responsive grid of six grayscale wordmarks (2 / 3 / 6 columns by breakpoint). Each logo is an inline SVG sitting on currentColor so the muted-foreground → foreground hover swap works. Ships with placeholder marks — swap the SVGs with real customer logos before shipping.

Single-row infinite marquee of customer logos. Track is duplicated and translated -50% on a 30s linear loop for a seamless seam; edges fade out via CSS mask-image; pauses on hover; respects prefers-reduced-motion.

Three-row logo marquee with alternating scroll directions and slightly different speeds (32s left, 26s right, 38s left) so the eye does not lock onto a single rhythm. Edges fade out via CSS mask-image; the whole section pauses on hover; respects prefers-reduced-motion.

Three-tier pricing table (Starter / Team / Enterprise) with a monthly/yearly ToggleGroup that flips prices live. Middle tier is highlighted with a ring + "Most popular" badge. Each tier spells out its bullet list inline so consumers can edit any line directly.

Centered single-card testimonial carousel. Quote icon, large pull-quote, avatar with initials, name + role + company line. Pip row underneath flips between three testimonials with an animated active pill.