Spaces:
Build error
Build error
File size: 4,835 Bytes
9b65ca8 | 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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | import { motion } from 'framer-motion';
import { ArrowRight, Zap, Layers, Brain } from 'lucide-react';
export default function Hero() {
return (
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-slate-900 pt-20">
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-[30%] -left-[10%] w-[70%] h-[70%] rounded-full bg-purple-600/20 blur-[120px] animate-float"></div>
<div className="absolute top-[20%] -right-[10%] w-[60%] h-[60%] rounded-full bg-blue-600/20 blur-[100px] animate-float" style={{ animationDelay: '2s' }}></div>
<div className="absolute -bottom-[20%] left-[20%] w-[50%] h-[50%] rounded-full bg-cyan-600/20 blur-[90px] animate-float" style={{ animationDelay: '4s' }}></div>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<div className="inline-block mb-6 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 backdrop-blur-sm">
<span className="text-cyan-400 font-medium text-sm flex items-center gap-2">
<Zap size={16} />
Next-Gen AI Experience
</span>
</div>
<h1 className="text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-8 tracking-tight">
<span className="block">AI-Powered</span>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-cyan-400">
3D Scrolling
</span>
</h1>
<p className="text-xl md:text-2xl text-slate-400 mb-10 max-w-3xl mx-auto leading-relaxed">
Experience the future of web interaction with our cutting-edge AI-driven 3D scrolling technology.
Seamlessly blend reality with digital innovation.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<button className="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-xl font-bold text-lg transition-all duration-200 transform hover:scale-105 shadow-lg shadow-purple-500/30 flex items-center justify-center gap-2">
Start Scrolling
<ArrowRight size={20} />
</button>
<button className="w-full sm:w-auto px-8 py-4 bg-slate-800 hover:bg-slate-700 text-white rounded-xl font-bold text-lg transition-all duration-200 border border-slate-700 flex items-center justify-center gap-2">
View Demo
</button>
</div>
</motion.div>
<motion.div
className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-24"
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
>
{[
{
icon: <Brain className="w-8 h-8 text-purple-400" />,
title: "AI-Powered",
description: "Advanced neural networks power our scrolling experience"
},
{
icon: <Layers className="w-8 h-8 text-blue-400" />,
title: "3D Depth",
description: "Immersive three-dimensional interface for enhanced engagement"
},
{
icon: <Zap className="w-8 h-8 text-cyan-400" />,
title: "Real-Time",
description: "Instant responses with lightning-fast performance"
}
].map((feature, index) => (
<div
key={index}
className="p-6 rounded-2xl bg-slate-800/30 border border-slate-700 backdrop-blur-sm hover:bg-slate-800/50 transition-all duration-300 hover:shadow-xl hover:shadow-purple-500/10"
>
<div className="w-14 h-14 rounded-xl bg-slate-900/50 flex items-center justify-center mb-4">
{feature.icon}
</div>
<h3 className="text-xl font-bold text-white mb-2">{feature.title}</h3>
<p className="text-slate-400">{feature.description}</p>
</div>
))}
</motion.div>
</div>
<motion.div
className="absolute bottom-10 left-1/2 transform -translate-x-1/2"
animate={{ y: [0, 10, 0] }}
transition={{ duration: 2, repeat: Infinity }}
>
<div className="w-6 h-10 border-2 border-slate-500 rounded-full flex justify-center p-1">
<div className="w-1 h-2 bg-slate-400 rounded-full animate-bounce"></div>
</div>
</motion.div>
</section>
);
} |