69 lines
2.9 KiB
TypeScript
69 lines
2.9 KiB
TypeScript
import { Zap, Globe, FlaskConical, AtSign, Link } from 'lucide-react';
|
|
import { WaitlistEmailForm } from './WaitlistEmailForm';
|
|
|
|
const badges = [
|
|
{ icon: Zap, text: 'API-First', variant: 'default' },
|
|
{ icon: Globe, text: 'Built-in CDN', variant: 'default' },
|
|
{ icon: FlaskConical, text: 'Web Lab', variant: 'default' },
|
|
{ icon: AtSign, text: 'Style References', variant: 'default' },
|
|
{ icon: Link, text: 'Prompt URLs', variant: 'cyan' },
|
|
];
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<section className="relative pt-12 sm:pt-16 md:pt-20 lg:pt-24 pb-12 sm:pb-16 md:pb-20 px-4 sm:px-6">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
{/* Beta Badge */}
|
|
<div className="inline-flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-[10px] sm:text-xs mb-5 sm:mb-6">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
|
|
In Active Development
|
|
</div>
|
|
|
|
{/* Heading */}
|
|
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 sm:mb-8 md:mb-10 leading-tight">
|
|
AI Image Generation
|
|
<br />
|
|
<span className="bg-[linear-gradient(90deg,#818cf8_0%,#c084fc_25%,#f472b6_50%,#c084fc_75%,#818cf8_100%)] bg-[length:200%_100%] bg-clip-text text-transparent animate-gradient-shift-hero">
|
|
Inside Your Workflow
|
|
</span>
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<p className="text-base sm:text-lg md:text-xl text-gray-400 mb-8 sm:mb-12 md:mb-16 lg:mb-20 max-w-2xl mx-auto">
|
|
Generate images via API, SDK, CLI, Lab, or live URLs.
|
|
<br className="hidden sm:inline" />
|
|
<span className="sm:hidden"> </span>
|
|
Production-ready CDN delivery in seconds.
|
|
</p>
|
|
|
|
{/* Email Form */}
|
|
<WaitlistEmailForm />
|
|
|
|
{/* Fine Print */}
|
|
<p className="text-xs sm:text-sm text-gray-500 mb-8 sm:mb-12 md:mb-16 lg:mb-20">
|
|
Free early access. No credit card required.
|
|
</p>
|
|
|
|
{/* Feature Badges */}
|
|
<div className="flex flex-wrap gap-2 sm:gap-3 md:gap-4 justify-center">
|
|
{badges.map((badge, i) => (
|
|
<span
|
|
key={i}
|
|
className={`px-3 sm:px-4 md:px-6 py-1.5 sm:py-2 md:py-2.5 rounded-full text-xs sm:text-sm flex items-center gap-1.5 sm:gap-2 md:gap-2.5 whitespace-nowrap ${
|
|
badge.variant === 'cyan'
|
|
? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
|
|
: 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
|
|
}`}
|
|
>
|
|
<badge.icon
|
|
className={`w-3.5 sm:w-4 h-3.5 sm:h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
|
|
/>
|
|
{badge.text}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|