Spaces:
Paused
Paused
File size: 3,804 Bytes
17b60d4 dc436d6 17b60d4 dc436d6 17b60d4 463943e 17b60d4 dc436d6 17b60d4 dc436d6 17b60d4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import React, { useState, useEffect } from 'react';
import Button from './ui/Button';
import RealNetworkGraph from './RealNetworkGraph';
interface HeroProps {
onStart?: () => void;
}
const Hero: React.FC<HeroProps> = ({ onStart }) => {
const [currentSlide, setCurrentSlide] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCurrentSlide((prev) => (prev === 0 ? 1 : 0));
}, 6000);
return () => clearInterval(interval);
}, []);
return (
<section className="relative min-h-[90vh] flex flex-col items-center justify-center pt-32 pb-20 overflow-hidden">
{/* Background Ambience */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-purple-900/10 rounded-full blur-[120px] pointer-events-none" />
<div className="relative z-10 max-w-7xl mx-auto px-6 w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{/* Left Content - Animated Transitions */}
<div className="space-y-8 relative h-[400px]">
{/* Slide 1 */}
<div className={`absolute top-0 left-0 w-full transition-all duration-1000 ease-in-out transform ${currentSlide === 0 ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10 pointer-events-none'}`}>
<h1 className="text-5xl md:text-7xl font-bold leading-tight">
Branding Simulation <span className="text-gray-400">API</span> for Global Teams
</h1>
<p className="text-xl text-gray-400 mt-6 max-w-lg">
Programmatically test your brand narratives. Integrate accurate audience simulation into your creative workflow. Free for developers.
</p>
<div className="flex flex-wrap gap-4 mt-8">
<Button variant="primary" size="lg" onClick={onStart}>Try Branding Simulation</Button>
<Button variant="outline" size="lg" onClick={() => window.location.href='#features'}>How it Works</Button>
</div>
</div>
{/* Slide 2 */}
<div className={`absolute top-0 left-0 w-full transition-all duration-1000 ease-in-out transform ${currentSlide === 1 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10 pointer-events-none'}`}>
<h1 className="text-5xl md:text-7xl font-bold leading-tight">
Test your Brand. <span className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">Before you launch.</span>
</h1>
<p className="text-xl text-gray-400 mt-6 max-w-lg">
Validate brand voice and campaign ideas with AI-generated focus groups. The new standard for agentic brand testing and narrative validation.
</p>
<div className="flex flex-wrap gap-4 mt-8">
<Button variant="primary" size="lg" onClick={onStart}>Start Building</Button>
<Button variant="outline" size="lg" onClick={() => window.location.href='#docs'}>Documentation</Button>
</div>
</div>
</div>
{/* Right Visuals - Real Network Graph */}
<div className="relative h-[500px] w-full flex items-center justify-center">
<div
className="w-full h-full opacity-80"
style={{
maskImage: 'linear-gradient(to bottom, black 0%, black 70%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 70%, transparent 100%)'
}}
>
<RealNetworkGraph />
</div>
{/* Overlay Elements for depth */}
<div className="absolute inset-0 pointer-events-none bg-gradient-to-t from-black via-transparent to-transparent"></div>
</div>
</div>
</section>
);
};
export default Hero;
|