SaaS Hero

herofrom SaaS Clean

Live

AI Usage Rules

Use for the main landing page hero. Keep headline under 10 words. Subheadline should explain the value proposition in one sentence.

Code Template

<section className="relative overflow-hidden bg-white py-24 sm:py-32">
  <div className="mx-auto max-w-7xl px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">{headline}</h1>
      <p className="mt-6 text-lg leading-8 text-gray-600">{subheadline}</p>
      <div className="mt-10 flex items-center justify-center gap-x-6">
        <a href="{ctaLink}" className="rounded-lg bg-blue-500 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-blue-600">{ctaText}</a>
        <a href="{secondaryLink}" className="text-sm font-semibold leading-6 text-gray-900">{secondaryText} →</a>
      </div>
    </div>
  </div>
</section>

Props Schema

Property	Type	Default
ctaLink	string	—
ctaText	string	—
headline	string	—
subheadline	string	—
secondaryLink	string	—
secondaryText	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "ctaLink": {
      "type": "string"
    },
    "ctaText": {
      "type": "string"
    },
    "headline": {
      "type": "string"
    },
    "subheadline": {
      "type": "string"
    },
    "secondaryLink": {
      "type": "string"
    },
    "secondaryText": {
      "type": "string"
    }
  }
}