138 lines
8.0 KiB
TypeScript
138 lines
8.0 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import { Zap, ChevronRight, Terminal } from 'lucide-react';
|
|
import { CodeWindow } from './CodeWindow';
|
|
|
|
export const Hero = () => {
|
|
return (
|
|
<section className="relative pt-32 pb-20 overflow-hidden">
|
|
{/* Background Grid Pattern */}
|
|
<div
|
|
className="absolute inset-0 z-0 opacity-10 pointer-events-none"
|
|
style={{
|
|
backgroundImage: 'radial-gradient(#6366F1 0.5px, transparent 0.5px)',
|
|
backgroundSize: '24px 24px',
|
|
}}
|
|
/>
|
|
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-indigo-500/10 blur-[120px] rounded-full -z-10" />
|
|
<div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-amber-500/5 blur-[120px] rounded-full -z-10" />
|
|
|
|
<div className="container mx-auto px-6 relative z-10">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<div className="inline-flex items-center gap-2 bg-indigo-500/10 border border-indigo-500/20 px-3 py-1 rounded-full text-indigo-400 text-xs font-bold mb-6 tracking-wide uppercase">
|
|
<Zap size={14} /> Future-Proof Your Career
|
|
</div>
|
|
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold font-heading leading-[1.1] mb-8 text-white">
|
|
Don't Fear the AI. <br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-amber-600">
|
|
Build with AI.
|
|
</span>
|
|
</h1>
|
|
<p className="text-xl text-slate-400 mb-10 leading-relaxed max-w-xl font-sans">
|
|
The safe harbor for developers, students, and founders to stop watching tutorials and
|
|
start shipping. Master MCP, UCP, and Agents by building real products together.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<button
|
|
onClick={() => {
|
|
window.dispatchEvent(
|
|
new CustomEvent('open-join-modal', {
|
|
detail: { mode: 'opensource' },
|
|
})
|
|
);
|
|
}}
|
|
className="w-full sm:w-auto bg-amber-500 hover:bg-amber-400 text-slate-900 font-bold px-8 py-4 rounded-xl transition-all flex items-center justify-center gap-2 group cursor-pointer"
|
|
>
|
|
Join the Community
|
|
</button>
|
|
<button className="w-full sm:w-auto border border-slate-700 hover:border-slate-500 bg-white/5 px-8 py-4 rounded-xl font-bold transition-all text-white flex items-center justify-center gap-2 cursor-pointer">
|
|
Read Manifesto
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-12 flex flex-col sm:flex-row items-start sm:items-center gap-6">
|
|
<div className="flex -space-x-3">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div
|
|
key={i}
|
|
className="w-10 h-10 rounded-full border-2 border-slate-900 bg-slate-700 flex items-center justify-center overflow-hidden"
|
|
>
|
|
<img
|
|
src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${i + 123}`}
|
|
alt="avatar"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
))}
|
|
<div className="w-10 h-10 rounded-full border-2 border-slate-900 bg-indigo-600 flex items-center justify-center text-[10px] font-bold text-white">
|
|
+
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-0">
|
|
<p
|
|
className="text-sm text-slate-500 flex items-center gap-2"
|
|
style={{
|
|
fontWeight: '400',
|
|
fontStyle: 'normal',
|
|
color: '#90a1b9',
|
|
}}
|
|
>
|
|
Join the Founding Class of 2026
|
|
</p>
|
|
<button
|
|
onClick={() => {
|
|
const buildSection = document.getElementById('build-season');
|
|
buildSection?.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'center',
|
|
});
|
|
}}
|
|
className="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-500 text-xs font-bold hover:bg-amber-500/20 transition-all cursor-pointer sm:ml-2"
|
|
>
|
|
Learn More <ChevronRight size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="relative mt-12 lg:mt-0"
|
|
>
|
|
<div className="relative z-10">
|
|
<CodeWindow />
|
|
</div>
|
|
|
|
{/* Decorative elements */}
|
|
<div className="absolute -top-12 -right-8 w-64 h-64 bg-indigo-500/20 rounded-full blur-[80px] -z-10" />
|
|
<div className="absolute -bottom-8 -left-12 w-48 h-48 bg-amber-500/10 rounded-full blur-[60px] -z-10" />
|
|
|
|
{/* Floating Badge */}
|
|
<motion.div
|
|
animate={{ y: [0, -10, 0] }}
|
|
transition={{ duration: 4, repeat: Infinity, ease: 'easeInOut' }}
|
|
className="absolute -bottom-6 right-10 z-20 bg-slate-800 border border-slate-700 p-4 rounded-xl shadow-2xl flex items-center gap-3"
|
|
>
|
|
<div className="p-2 bg-amber-500/10 text-amber-500 rounded-lg">
|
|
<Terminal size={20} />
|
|
</div>
|
|
<div>
|
|
<div className="text-[10px] text-slate-500 uppercase font-bold tracking-widest">
|
|
Active Stack
|
|
</div>
|
|
<div className="text-sm font-bold text-white">Gemini 3 Pro + MCP</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|