File size: 8,788 Bytes
a566fb0 |
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 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 |
import React from 'react';
import { Link } from 'react-router-dom';
import { createPageUrl } from '@/utils';
import { motion } from 'framer-motion';
import { Brain, Eye, Smile, Activity, Sparkles, Rocket, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
const FloatingIcon = ({ children, delay = 0, className = "" }) => (
<motion.div
className={className}
animate={{
y: [0, -10, 0],
rotate: [0, 5, -5, 0],
}}
transition={{
duration: 4,
repeat: Infinity,
delay,
ease: "easeInOut"
}}
>
{children}
</motion.div>
);
const TopicCard = ({ icon: Icon, title, description, color, delay, href }) => (
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay }}
>
<Link to={href}>
<motion.div
whileHover={{ scale: 1.03, y: -5 }}
whileTap={{ scale: 0.98 }}
className={`relative overflow-hidden rounded-3xl p-8 cursor-pointer group h-full
bg-gradient-to-br ${color} backdrop-blur-xl border border-white/20 shadow-2xl`}
>
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2" />
<div className="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full translate-y-1/2 -translate-x-1/2" />
<motion.div
className="relative z-10"
whileHover={{ rotate: [0, -10, 10, 0] }}
transition={{ duration: 0.5 }}
>
<div className="w-16 h-16 rounded-2xl bg-white/20 flex items-center justify-center mb-6 group-hover:bg-white/30 transition-colors">
<Icon className="w-8 h-8 text-white" />
</div>
</motion.div>
<h3 className="text-2xl font-bold text-white mb-3">{title}</h3>
<p className="text-white/80 text-lg leading-relaxed">{description}</p>
<div className="mt-6 flex items-center gap-2 text-white/90 font-medium group-hover:text-white transition-colors">
<span>Start Learning</span>
<ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</div>
</motion.div>
</Link>
</motion.div>
);
export default function Home() {
return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
{/* Animated Background */}
<div className="fixed inset-0 overflow-hidden pointer-events-none">
<div className="absolute top-20 left-10 w-72 h-72 bg-blue-500/20 rounded-full blur-3xl animate-pulse" />
<div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }} />
<div className="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '2s' }} />
</div>
{/* Hero Section */}
<section className="relative pt--3 pb-32 px-6">
<div className="max-w-6xl mx-auto text-center">
{/* Floating Icons */}
<div className="relative h-32 mb-8">
</div>
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-8">
<Sparkles className="w-4 h-4 text-yellow-400" />
<span className="text-white/90 text-sm font-medium">Interactive Learning for Grades 5-8</span>
</div>
<h1 className="text-5xl md:text-7xl font-black text-transparent bg-clip-text bg-gradient-to-r from-white via-blue-200 to-purple-200 mb-6 leading-tight">
Computer Vision Lab
<br />
<span className="text-4xl md:text-5xl">for Students</span>
</h1>
<p className="text-xl md:text-2xl text-white/70 max-w-3xl mx-auto mb-10 leading-relaxed">
Discover how computers see and understand the world! Learn about
<span className="text-cyan-400 font-semibold"> Object Detection</span>,
<span className="text-purple-400 font-semibold"> Pose Estimation</span>, and
<span className="text-pink-400 font-semibold"> Emotion Recognition</span>.
</p>
<div className="flex flex-col sm:flex-row gap-6 justify-center">
<Link to={createPageUrl('Lessons')}>
<Button size="lg" className="text-lg px-10 py-7 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 rounded-2xl shadow-2xl shadow-purple-500/30 text-white font-bold border-0 group transition-all">
<Rocket className="w-6 h-6 mr-2 group-hover:rotate-12 transition-transform" />
Start Learning
</Button>
</Link>
<Link to={createPageUrl('Quiz')}>
<Button size="lg" className="text-lg px-10 py-7 rounded-2xl border-2 border-white/30 text-white bg-white/5 hover:bg-white/10 hover:border-white/50 font-bold transition-all">
Take the Quiz
</Button>
</Link>
</div>
</motion.div>
</div>
</section>
{/* Topics Section */}
<section className="relative px-6 pb-32">
<div className="max-w-6xl mx-auto">
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
What You'll Learn
</h2>
<p className="text-white/60 text-lg">
Three amazing AI technologies explained simply
</p>
</motion.div>
<div className="grid md:grid-cols-3 gap-6">
<TopicCard
icon={Eye}
title="Object Detection"
description="Learn how AI finds and identifies objects in images, just like self-driving cars!"
color="from-blue-600/90 to-cyan-600/90"
delay={0.1}
href={createPageUrl('Lessons') + '?chapter=1'}
/>
<TopicCard
icon={Activity}
title="Pose Estimation"
description="Discover how computers track body movements and create skeleton maps!"
color="from-purple-600/90 to-pink-600/90"
delay={0.2}
href={createPageUrl('Lessons') + '?chapter=2'}
/>
<TopicCard
icon={Smile}
title="Emotion Recognition"
description="See how AI can understand facial expressions and detect moods!"
color="from-emerald-600/90 to-teal-600/90"
delay={0.3}
href={createPageUrl('Lessons') + '?chapter=3'}
/>
</div>
</div>
</section>
{/* Stats Section */}
<section className="relative px-6 pb-32">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="max-w-4xl mx-auto"
>
<div className="rounded-3xl bg-white/5 backdrop-blur-xl border border-white/10 p-8 md:p-12">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
{[
{ value: "3", label: "AI Topics" },
{ value: "15+", label: "Slides" },
{ value: "12", label: "Quiz Questions" },
{ value: "∞", label: "Fun!" }
].map((stat, i) => (
<motion.div
key={i}
initial={{ scale: 0 }}
whileInView={{ scale: 1 }}
viewport={{ once: true }}
transition={{ delay: i * 0.1, type: "spring" }}
>
<div className="text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400">
{stat.value}
</div>
<div className="text-white/60 mt-2">{stat.label}</div>
</motion.div>
))}
</div>
</div>
</motion.div>
</section>
</div>
);
} |