Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeGenius - AI-Powered Coding for Kids</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .code-block { | |
| font-family: 'Courier New', monospace; | |
| background-color: #2d3748; | |
| color: #f7fafc; | |
| border-radius: 0.5rem; | |
| padding: 1.5rem; | |
| position: relative; | |
| } | |
| .floating-robot { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .glow-hover:hover { | |
| box-shadow: 0 0 15px rgba(167, 119, 227, 0.6); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-robot text-3xl text-purple-600 mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">CodeGenius</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#features" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Features</a> | |
| <a href="#courses" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Courses</a> | |
| <a href="#testimonials" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Success Stories</a> | |
| <a href="#pricing" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Pricing</a> | |
| <button class="gradient-bg text-white px-4 py-2 rounded-md font-medium hover:opacity-90 transition">Start Free Trial</button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Unlock Your Child's Creative Potential with AI</h1> | |
| <p class="text-xl mb-8">The next generation of builders is here. With our AI-powered platform, kids 9-13 can create anything they imagine!</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-purple-600 px-6 py-3 rounded-md font-bold text-lg hover:bg-gray-100 transition">Start Free Trial</button> | |
| <button class="border-2 border-white text-white px-6 py-3 rounded-md font-bold text-lg hover:bg-white hover:text-purple-600 transition">Watch Demo</button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative floating-robot"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/4712/4712035.png" alt="AI Robot" class="w-64 h-64"> | |
| <div class="absolute -bottom-10 -right-10 bg-yellow-400 text-gray-900 px-4 py-2 rounded-full font-bold"> | |
| <i class="fas fa-bolt mr-2"></i>Powered by AI | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Why Choose CodeGenius?</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">We're revolutionizing how kids learn to code by combining AI assistance with creative projects they love.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-xl transition"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">AI Pair Programming</h3> | |
| <p class="text-gray-600">Our AI assistant helps kids through every step, explaining concepts and suggesting improvements in real-time.</p> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-xl transition"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-gamepad text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Learn Through Play</h3> | |
| <p class="text-gray-600">Kids build games, animations, and interactive stories while learning fundamental coding concepts.</p> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-xl transition"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-rocket text-white text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Rapid Prototyping</h3> | |
| <p class="text-gray-600">With AI assistance, kids can bring their wildest ideas to life in minutes, not days.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Coding Demo --> | |
| <section class="py-20 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">See AI-Powered Coding in Action</h2> | |
| <p class="text-gray-600 mb-6">Watch how our AI assistant helps 10-year-old Mia build her first game in just 15 minutes.</p> | |
| <div class="code-block mb-6"> | |
| <div class="flex mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <pre class="overflow-x-auto"> | |
| <span class="text-green-400"># Mia's Space Adventure Game</span> | |
| <span class="text-blue-400">import</span> pygame | |
| <span class="text-blue-400">import</span> random | |
| <span class="text-purple-400">class</span> <span class="text-yellow-400">Spaceship</span>: | |
| <span class="text-purple-400">def</span> <span class="text-yellow-400">__init__</span>(<span class="text-green-500">self</span>): | |
| <span class="text-green-500">self</span>.x = <span class="text-orange-400">400</span> | |
| <span class="text-green-500">self</span>.y = <span class="text-orange-400">500</span> | |
| <span class="text-green-500">self</span>.speed = <span class="text-orange-400">5</span> | |
| <span class="text-purple-400">def</span> <span class="text-yellow-400">move</span>(<span class="text-green-500">self</span>, direction): | |
| <span class="text-purple-400">if</span> direction == <span class="text-blue-400">"left"</span>: | |
| <span class="text-green-500">self</span>.x -= <span class="text-green-500">self</span>.speed | |
| <span class="text-purple-400">elif</span> direction == <span class="text-blue-400">"right"</span>: | |
| <span class="text-green-500">self</span>.x += <span class="text-green-500">self</span>.speed</pre> | |
| </div> | |
| <button class="gradient-bg text-white px-6 py-3 rounded-md font-bold hover:opacity-90 transition"> | |
| <i class="fas fa-play mr-2"></i>Try Live Demo | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 pl-10"> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold">AI</div> | |
| <div class="ml-4 bg-gray-100 p-3 rounded-lg"> | |
| <p class="text-sm">Great start Mia! Would you like to add asteroids for your spaceship to avoid? I can help you with that!</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold">M</div> | |
| <div class="ml-4 bg-purple-100 p-3 rounded-lg"> | |
| <p class="text-sm">Yes please! And can we make them different colors?</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold">AI</div> | |
| <div class="ml-4 bg-gray-100 p-3 rounded-lg"> | |
| <p class="text-sm">Absolutely! Here's how we can create colorful asteroids...</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 border-t pt-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Ask the AI assistant anything..." class="w-full border rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <i class="fas fa-paper-plane absolute right-3 top-3 text-purple-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Courses Section --> | |
| <section id="courses" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Our AI-Powered Courses</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Designed specifically for kids aged 9-13 to learn at their own pace with AI guidance.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="border rounded-xl overflow-hidden hover:shadow-lg transition glow-hover"> | |
| <div class="gradient-bg p-6 text-white"> | |
| <h3 class="text-xl font-bold mb-2">Adventure in Python</h3> | |
| <p class="opacity-90">Create games while learning Python basics</p> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <span>4.9</span> | |
| </div> | |
| <span class="mx-2">•</span> | |
| <span>Ages 9+</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>20 interactive lessons</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>5 game projects</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>AI debugging assistant</span> | |
| </li> | |
| </ul> | |
| <button class="w-full gradient-bg text-white py-2 rounded-md font-medium">Start Learning</button> | |
| </div> | |
| </div> | |
| <div class="border rounded-xl overflow-hidden hover:shadow-lg transition glow-hover"> | |
| <div class="gradient-bg p-6 text-white"> | |
| <h3 class="text-xl font-bold mb-2">Web Wizardry</h3> | |
| <p class="opacity-90">Build interactive websites with HTML/CSS/JS</p> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <span>4.8</span> | |
| </div> | |
| <span class="mx-2">•</span> | |
| <span>Ages 10+</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>15 creative projects</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>AI design suggestions</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Publish your sites online</span> | |
| </li> | |
| </ul> | |
| <button class="w-full gradient-bg text-white py-2 rounded-md font-medium">Start Learning</button> | |
| </div> | |
| </div> | |
| <div class="border rounded-xl overflow-hidden hover:shadow-lg transition glow-hover"> | |
| <div class="gradient-bg p-6 text-white"> | |
| <h3 class="text-xl font-bold mb-2">AI Creators Lab</h3> | |
| <p class="opacity-90">Build your own AI apps and chatbots</p> | |
| <div class="mt-4 flex items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-star text-yellow-300 mr-1"></i> | |
| <span>5.0</span> | |
| </div> | |
| <span class="mx-2">•</span> | |
| <span>Ages 12+</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>10 AI experiments</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Train your own models</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Ethics and safety lessons</span> | |
| </li> | |
| </ul> | |
| <button class="w-full gradient-bg text-white py-2 rounded-md font-medium">Start Learning</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" class="py-20 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Young Builders Say</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear from the next generation of creators who are building amazing things with AI.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 text-2xl font-bold">L</div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Liam, 11</h4> | |
| <p class="text-gray-500">Created 3 games in 2 weeks</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-4">"The AI helper is like having a teacher available 24/7. I built my first game in one afternoon and now all my friends want to play it!"</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-2xl font-bold">S</div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Sophia, 10</h4> | |
| <p class="text-gray-500">Published her first website</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-4">"I made a website for my dog with pictures and animations! The AI showed me how to add a button that plays barks when you click it."</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center text-green-600 text-2xl font-bold">E</div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Ethan, 13</h4> | |
| <p class="text-gray-500">Built an AI chatbot</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-4">"I trained an AI to talk like my favorite YouTuber. It's not perfect but it's crazy that I could make this myself!"</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center text-pink-600 text-2xl font-bold">O</div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Olivia, 9</h4> | |
| <p class="text-gray-500">Created animated stories</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic mb-4">"I made a cartoon where unicorns race rainbows! The AI helped me when I got stuck on the colors."</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing --> | |
| <section id="pricing" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Simple, Affordable Pricing</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Start for free, upgrade as your child's skills grow</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="border rounded-xl p-8 hover:shadow-lg transition"> | |
| <h3 class="text-xl font-bold mb-2">Explorer</h3> | |
| <p class="text-gray-600 mb-6">Perfect for trying out coding</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$0</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Basic AI assistant</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>5 beginner projects</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Community support</span> | |
| </li> | |
| </ul> | |
| <button class="w-full border border-purple-600 text-purple-600 py-2 rounded-md font-medium hover:bg-purple-50">Get Started</button> | |
| </div> | |
| <div class="border-2 border-purple-500 rounded-xl p-8 hover:shadow-lg transition relative"> | |
| <div class="absolute top-0 right-0 bg-purple-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">MOST POPULAR</div> | |
| <h3 class="text-xl font-bold mb-2">Creator</h3> | |
| <p class="text-gray-600 mb-6">For kids who want to build more</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$15</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Advanced AI assistant</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>All courses & projects</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Weekly live workshops</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Project publishing</span> | |
| </li> | |
| </ul> | |
| <button class="w-full gradient-bg text-white py-2 rounded-md font-medium hover:opacity-90">Start 7-Day Free Trial</button> | |
| </div> | |
| <div class="border rounded-xl p-8 hover:shadow-lg transition"> | |
| <h3 class="text-xl font-bold mb-2">Family</h3> | |
| <p class="text-gray-600 mb-6">For siblings learning together</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$25</span> | |
| <span class="text-gray-500">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Everything in Creator</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Up to 3 child accounts</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Parent dashboard</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Collaboration features</span> | |
| </li> | |
| </ul> | |
| <button class="w-full border border-purple-600 text-purple-600 py-2 rounded-md font-medium hover:bg-purple-50">Choose Family</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Unleash Your Child's Creativity?</h2> | |
| <p class="text-xl mb-8">Join thousands of kids who are discovering they can build anything they imagine with AI.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-purple-600 px-8 py-4 rounded-md font-bold text-lg hover:bg-gray-100 transition">Start Free Trial</button> | |
| <button class="border-2 border-white text-white px-8 py-4 rounded-md font-bold text-lg hover:bg-white hover:text-purple-600 transition">Talk to Our Team</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-robot text-3xl text-purple-400 mr-2"></i> | |
| <span class="text-xl font-bold">CodeGenius</span> | |
| </div> | |
| <p class="text-gray-400">Empowering the next generation of builders with AI-powered coding education.</p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-tiktok"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Courses</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Adventure in Python</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Web Wizardry</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">AI Creators Lab</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Game Design</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Parents Guide</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Safety</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 CodeGenius. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white">COPPA Compliance</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for the code block | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const codeBlock = document.querySelector('.code-block'); | |
| if (codeBlock) { | |
| setTimeout(() => { | |
| codeBlock.style.transform = 'translateY(-5px)'; | |
| codeBlock.style.boxShadow = '0 10px 25px rgba(0,0,0,0.1)'; | |
| }, 500); | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=HassanStar/vibekid" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |