feat: added pages, forms, and functionality.
All checks were successful
Smart Deploy / build-deploy (push) Successful in 2m38s
All checks were successful
Smart Deploy / build-deploy (push) Successful in 2m38s
This commit is contained in:
137
src/components/react/Hero.tsx
Normal file
137
src/components/react/Hero.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user