Back to cookbook
Recipe
Marketing landing hero + features
You need a landing page with hero, 3-feature grid, and a CTA section.
Recommended:
v0
Figma Make
Prompt
Use @gunjo/ui. Reference https://gunjo.dev/api/specs/patterns/landing-template.
Build a landing page:
- Hero: full-bleed dark gradient. Centered: small Badge ("Now in beta"), large h1 (text-5xl font-bold), one-line subtitle in text-muted, two Buttons (primary "Get started" / outline "View docs").
- Features section: 3-column Card grid. Each Card has an Icon (lucide-react: Zap, Shield, Layers), title, 2-line description.
- Stats row: 4 inline Statistic components with metric + label.
- CTA: full-width Card with title "Ready to ship?" + Button "Sign up free".
- Footer: minimal, with Separator above and small text + nav links.
Match the design system's gunjō (#4D5AAF) primary color. Don't hardcode — use bg-primary etc.Expected output
A polished landing page using LandingTemplate, Card, Badge, Button, Statistic, Separator.
Components used
LandingTemplate
Card
Badge
Button
Statistic
Separator