Spaces:
Running
Running
File size: 4,552 Bytes
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 80 |
import React from 'react';
import { User, Share2, Cpu, CheckCircle, Scale } from 'lucide-react';
const HowItWorks: React.FC = () => {
const steps = [
{ icon: <User />, label: "Persona Creation" },
{ icon: <Share2 />, label: "Focus Group Construction" },
{ icon: <Cpu />, label: "AI-driven Simulations" },
{ icon: <CheckCircle />, label: "Result Generation" },
{ icon: <Scale />, label: "Automatic A/B Testing" },
];
return (
<section id="how-it-works" className="py-24 bg-black border-t border-gray-900">
<div className="max-w-7xl mx-auto px-6 text-center">
<div className="inline-block px-4 py-1.5 rounded-full border border-gray-700 text-sm text-gray-300 mb-8">How It Works</div>
<h2 className="text-3xl md:text-5xl font-semibold mb-20">From raw data to real understanding</h2>
{/* Steps Navigation/Visual */}
<div className="flex flex-wrap justify-center gap-4 md:gap-8 mb-20">
{steps.map((step, idx) => (
<div key={idx} className="flex flex-col items-center gap-3 group cursor-default">
<div className="w-16 h-12 md:w-auto md:h-auto px-6 py-3 rounded-full border border-gray-700 bg-gray-900/50 flex items-center gap-2 text-gray-400 group-hover:text-white group-hover:border-gray-500 transition-all">
{step.icon}
<span className="text-sm font-medium hidden md:inline">{step.label}</span>
</div>
</div>
))}
</div>
{/* Abstract Visualization */}
<div className="relative h-[400px] w-full max-w-4xl mx-auto border border-gray-800 rounded-3xl bg-black overflow-hidden flex items-center justify-center">
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-20"></div>
{/* Radar/Network Graphic */}
<div className="relative w-96 h-96">
<div className="absolute inset-0 border border-blue-900/30 rounded-full animate-ping duration-[3000ms]"></div>
<div className="absolute inset-10 border border-blue-800/30 rounded-full"></div>
<div className="absolute inset-20 border border-blue-700/30 rounded-full"></div>
{/* Connecting Lines */}
<svg className="absolute inset-0 w-full h-full pointer-events-none">
{/* Center to Top (in) */}
<line x1="50%" y1="50%" x2="50%" y2="5%" stroke="#3b82f6" strokeWidth="2" strokeOpacity="0.5" />
{/* Center to Bottom Right (X) */}
<line x1="50%" y1="50%" x2="85%" y2="85%" stroke="#3b82f6" strokeWidth="2" strokeOpacity="0.5" />
{/* Center to Bottom Left (Globe) */}
<line x1="50%" y1="50%" x2="15%" y2="85%" stroke="#3b82f6" strokeWidth="2" strokeOpacity="0.5" />
</svg>
{/* Center Node */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-gray-900 rounded-full border-2 border-blue-500 flex items-center justify-center shadow-[0_0_30px_rgba(59,130,246,0.5)] z-10">
<User className="text-white w-6 h-6" />
</div>
{/* Satellite Nodes */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-10 h-10 bg-gray-900 border border-gray-600 rounded-full flex items-center justify-center z-10">
<span className="text-xs font-bold">in</span>
</div>
<div className="absolute bottom-10 right-10 w-10 h-10 bg-gray-900 border border-gray-600 rounded-full flex items-center justify-center z-10">
<span className="text-xs font-bold">X</span>
</div>
<div className="absolute bottom-10 left-10 w-10 h-10 bg-gray-900 border border-gray-600 rounded-full flex items-center justify-center z-10">
<GlobeIcon />
</div>
</div>
</div>
</div>
</section>
);
};
const GlobeIcon = () => (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4">
<circle cx="12" cy="12" r="10"></circle>
<line x1="2" y1="12" x2="22" y2="12"></line>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</svg>
);
export default HowItWorks; |