Gradient Hero

herofrom Startup Bold

Live

AI Usage Rules

Use gradient text for headlines. Keep dark background. Bold and impactful messaging.

Code Template

<section className="relative overflow-hidden bg-[#0F0F23] py-32"><div className="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-pink-600/20" /><div className="relative mx-auto max-w-5xl px-6 text-center"><h1 className="text-5xl font-bold tracking-tight text-white sm:text-7xl bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">{headline}</h1><p className="mt-8 text-xl text-gray-300">{subheadline}</p><div className="mt-12 flex justify-center gap-4"><a href="{ctaLink}" className="rounded-xl bg-gradient-to-r from-purple-600 to-pink-600 px-8 py-4 font-bold text-white shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40">{ctaText}</a></div></div></section>

Props Schema

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

View raw JSON schema

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