Marketing

Hero

Full-screen hero section with animated floating shapes, gradient headline, badge, subtitle, and CTA buttons. Dark-first with radial gradient background.

Open in Storybook

Usage

tsx

import { Hero } from '@/components/marketing/hero'

export default function Page() {
  return (
    <Hero
      badge="AI & Fintech"
      title="AI Trading."
      highlightedTitle="A New Level"
      subtitle="Next-generation AI-powered algorithmic trading platform."
      primaryCta={{ label: 'Read Whitepaper', href: '/whitepaper' }}
      secondaryCta={{ label: 'Invest', href: '#investment' }}
    />
  )
}

Props

Prop	Type	Default	Description
badge	string	—	Small pill label above the title
title*	string	—	Main headline text (gradient from-foreground)
highlightedTitle	string	—	Second line with accent gradient
subtitle*	string	—	Supporting paragraph text
primaryCta	{ label: string; href: string }	—	Primary CTA button
secondaryCta	{ label: string; href: string }	—	Secondary CTA button
className	string	—	Additional CSS classes