Gradient Hero Section

herofrom Community Creative

Live

AI Usage Rules

Use GradientHero for landing page hero sections with dark, gradient-rich aesthetics. The multi-layer blur background creates depth. Keep headline under 8 words. Subheadline should be 1-2 sentences explaining the value prop.

Code Template

interface GradientHeroProps {
  headline: string
  subheadline: string
  ctaText: string
  ctaLink: string
  secondaryText?: string
  secondaryLink?: string
}

export function GradientHero({ headline, subheadline, ctaText, ctaLink, secondaryText, secondaryLink }: GradientHeroProps) {
  return (
    <section className="relative min-h-screen overflow-hidden bg-black">
      <div className="absolute inset-0">
        <div className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-indigo-600/30 blur-[128px]" />
        <div className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-purple-600/20 blur-[128px]" />
        <div className="absolute top-1/2 left-1/2 h-64 w-64 -translate-x-1/2 -translate-y-1/2 rounded-full bg-pink-600/20 blur-[128px]" />
      </div>
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_20%,black_70%)]" />
      <div className="relative z-10 flex min-h-screen flex-col items-center justify-center px-6 text-center">
        <div className="mb-6 inline-flex items-center rounded-full border border-white/10 bg-white/5 px-4 py-1.5 text-sm text-gray-300 backdrop-blur-sm">
          ✨ Introducing something new
        </div>
        <h1 className="max-w-4xl text-5xl font-bold tracking-tight text-white sm:text-7xl">
          <span className="bg-gradient-to-r from-white via-gray-200 to-gray-500 bg-clip-text text-transparent">{headline}</span>
        </h1>
        <p className="mt-6 max-w-2xl text-lg leading-8 text-gray-400">{subheadline}</p>
        <div className="mt-10 flex items-center gap-4">
          <a href={ctaLink} className="inline-flex items-center rounded-full bg-white px-8 py-3 text-sm font-semibold text-black transition-all hover:bg-gray-200 hover:shadow-[0_0_30px_rgba(255,255,255,0.2)]">
            {ctaText}
          </a>
          {secondaryText && secondaryLink && (
            <a href={secondaryLink} className="inline-flex items-center rounded-full border border-white/20 px-8 py-3 text-sm font-semibold text-white transition-all hover:bg-white/5">
              {secondaryText} →
            </a>
          )}
        </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"
    }
  }
}