Spaces:
Build error
Build error
File size: 7,241 Bytes
a5ad6eb | 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 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | import { motion } from 'framer-motion';
import { MousePointer2, Move3D, Touch, Play } from 'lucide-react';
export default function InteractiveDemo() {
return (
<section id="demo" className="py-24 bg-slate-900 relative overflow-hidden">
<div className="absolute inset-0 overflow-hidden">
<div className="absolute top-[20%] left-[10%] w-[50%] h-[50%] rounded-full bg-blue-600/10 blur-[100px]"></div>
<div className="absolute bottom-[20%] right-[10%] w-[40%] h-[40%] rounded-full bg-purple-600/10 blur-[80px]"></div>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div>
<motion.div
className="inline-block mb-6 px-4 py-2 rounded-full bg-slate-800/50 border border-slate-700 backdrop-blur-sm"
initial={{ opacity: 0, x: -40 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
>
<span className="text-purple-400 font-medium text-sm">Interactive Experience</span>
</motion.div>
<motion.h2
className="text-4xl md:text-5xl font-bold text-white mb-8"
initial={{ opacity: 0, x: -40 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
>
Experience the <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">Future</span> of Interaction
</motion.h2>
<motion.p
className="text-xl text-slate-400 mb-8"
initial={{ opacity: 0, x: -40 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.2 }}
>
Our AI-powered 3D scrolling technology transforms how users interact with your content.
Simply scroll to discover an immersive journey that feels incredibly natural and intuitive.
</motion.p>
<motion.div
className="space-y-6"
initial={{ opacity: 0, x: -40 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.4 }}
>
{[
{ icon: <MousePointer2 className="w-6 h-6 text-cyan-400" />, text: "Intuitive mouse tracking for 3D depth" },
{ icon: <Move3D className="w-6 h-6 text-purple-400" />, text: "Seamless parallax effects on scroll" },
{ icon: <Touch className="w-6 h-6 text-blue-400" />, text: "Touch-optimized for mobile devices" }
].map((item, index) => (
<div key={index} className="flex items-center gap-4 p-4 rounded-xl bg-slate-800/30 border border-slate-700">
<div className="w-12 h-12 rounded-xl bg-slate-900/50 flex items-center justify-center">
{item.icon}
</div>
<span className="text-slate-300">{item.text}</span>
</div>
))}
</motion.div>
</div>
<motion.div
className="relative"
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ delay: 0.3 }}
>
<div className="aspect-video rounded-2xl overflow-hidden bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700 relative group">
<div className="absolute inset-0 flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-slate-700/20 to-transparent"></div>
<motion.div
className="absolute w-32 h-32 bg-purple-500/30 rounded-full blur-2xl"
animate={{
y: [0, -30, 0],
x: [0, 20, 0],
scale: [1, 1.1, 1]
transition={{ duration: 6, repeat: Infinity }}
/>
<motion.div
className="absolute w-48 h-48 bg-blue-500/20 rounded-full blur-3xl"
animate={{
y: [0, 40, 0],
x: [0, -30, 0],
scale: [1, 1.2, 1]
transition={{ duration: 8, repeat: Infinity, delay: 1 }}
/>
<motion.div
className="absolute w-24 h-24 bg-cyan-500/30 rounded-full blur-xl"
animate={{
y: [0, -20, 0],
x: [0, -15, 0],
scale: [1, 1.1, 1]
transition={{ duration: 7, repeat: Infinity, delay: 2 }}
/>
<div className="relative z-10 text-center p-8">
<div className="w-24 h-24 mx-auto mb-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-2xl shadow-purple-500/30 group-hover:scale-110 transition-transform duration-300">
<Play className="w-10 h-10 text-white ml-1" />
</div>
<h3 className="text-2xl font-bold text-white mb-2">Interactive Preview</h3>
<p className="text-slate-400">Hover and scroll to experience 3D depth</p>
{[...Array(6)].map((_, i) => (
<motion.div
key={i}
className="absolute w-2 h-2 bg-white rounded-full"
initial={{ opacity: 0 }}
animate={{
opacity: [0, 1, 0],
x: Math.random() * 200 - 100,
y: Math.random() * 200 - 100
transition={{
duration: 3,
repeat: Infinity,
delay: Math.random() * 2
/>
))}
</div>
</div>
<div className="absolute inset-0 bg-gradient-to-t from-slate-900/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
<button className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-medium flex items-center gap-2">
<Play className="w-4 h-4" />
View Full Demo
</button>
</div>
</div>
<div className="absolute -top-6 -right-6 w-24 h-24 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full blur-2xl opacity-30 animate-pulse"></div>
<div className="absolute -bottom-6 -left-6 w-32 h-32 bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-full blur-2xl opacity-20 animate-pulse" style={{ animationDelay: '1s' }}></div>
</motion.div>
</div>
</div>
</section>
);
} |