Section: Hero

The hero section is the first thing visitors see. It features a headline, description, and call-to-action button. This is your most important section for converting visitors.

Props

Name	Type	Required	Description	Default
`heading`	string	Yes	Main headline text	—
`description`	string	No	Supporting description below headline	—
`ctaText`	string	No	Primary button label	—
`ctaHref`	string	No	Primary button link URL	—
`secondaryCtaText`	string	No	Secondary button label	—
`secondaryCtaHref`	string	No	Secondary button link URL	—
`label`	string	No	Small label/badge above heading	—
`image`	string	No	Hero image URL	—
`className`	string	No	Custom CSS class	—

Minimal Example

{
  "type": "hero",
  "heading": "Build Sites with API"
}

Full Example

{
  "type": "hero",
  "label": "✨ Now in Public Beta",
  "heading": "Build and Manage Sites with a Single API",
  "description": "Create landing pages, blogs, docs, and directories programmatically. Designed for developers and AI agents.",
  "ctaText": "Get Started Free",
  "ctaHref": "/signup",
  "secondaryCtaText": "View Documentation",
  "secondaryCtaHref": "/docs"
}

Headline Best Practices

Structure

The most effective headlines follow one of these patterns:

Value statement: "Ship Landing Pages 10x Faster"
How statement: "Build Sites with a Single API Call"
Outcome: "From Idea to Published Page in 60 Seconds"

Rules

❌ Weak	✅ Strong
Welcome to our platform	Ship Landing Pages 10x Faster
The best page builder	Build Sites with a Single API Call
Try our product today	From Idea to Published Page in 60 Seconds

Keep it under 10 words
Lead with the benefit, not the product name
Be specific — numbers and timeframes build credibility

Description Tips

1-2 sentences max — expand on the headline, don't repeat it
Mention the audience — "for developers", "for AI agents"
Address the how — briefly explain your approach

CTA Button Tips

Primary CTA: Action-oriented verb ("Get Started", "Start Building", "Try Free")
Secondary CTA: Lower commitment ("View Docs", "See Demo", "Learn More")
Having both buttons gives users a choice and increases overall conversion

Common Patterns

SaaS Product

{
  "type": "hero",
  "label": "🚀 Trusted by 1,000+ teams",
  "heading": "Ship Landing Pages 10x Faster",
  "description": "Create, publish, and iterate on pages without touching code. API-first, AI-ready.",
  "ctaText": "Start Free",
  "ctaHref": "/signup",
  "secondaryCtaText": "See Demo",
  "secondaryCtaHref": "/demo"
}

Developer Tool

{
  "type": "hero",
  "heading": "The CMS Built for AI Agents",
  "description": "Full REST API. 4 page types. 14 section components. Create entire sites programmatically.",
  "ctaText": "Read the Docs",
  "ctaHref": "/docs",
  "secondaryCtaText": "View on GitHub",
  "secondaryCtaHref": "https://github.com/..."
}

Placement

Always the first section on a landing page. Everything else follows from the hero's promise.