| <!DOCTYPE html> | |
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VibeCoder Masterclass | Code with Groove</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gradient-to-br from-purple-900 via-indigo-800 to-blue-900 text-white font-sans overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-black bg-opacity-70 backdrop-blur-lg border-b border-purple-500 border-opacity-30"> | |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <a href="#" class="flex items-center space-x-2"> | |
| <i data-feather="code" class="text-purple-400 h-6 w-6"></i> | |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400">VibeCoder</span> | |
| </a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#about" class="hover:text-purple-300 transition-colors duration-300">About</a> | |
| <a href="#workshops" class="hover:text-purple-300 transition-colors duration-300">Workshops</a> | |
| <a href="#testimonials" class="hover:text-purple-300 transition-colors duration-300">Vibes</a> | |
| <a href="#contact" class="hover:text-purple-300 transition-colors duration-300">Connect</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="menu-toggle"> | |
| <i data-feather="menu" class="h-6 w-6"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden bg-black bg-opacity-90 w-full absolute left-0 px-6 pt-2 pb-6 space-y-4 text-center border-t border-purple-500 border-opacity-30"> | |
| <a href="#about" class="block py-2 hover:text-purple-300 transition-colors duration-300">About</a> | |
| <a href="#workshops" class="block py-2 hover:text-purple-300 transition-colors duration-300">Workshops</a> | |
| <a href="#testimonials" class="block py-2 hover:text-purple-300 transition-colors duration-300">Vibes</a> | |
| <a href="#contact" class="block py-2 hover:text-purple-300 transition-colors duration-300">Connect</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center pt-20 pb-32 px-6"> | |
| <div class="container mx-auto flex flex-col lg:flex-row items-center justify-between"> | |
| <div class="lg:w-1/2 mb-16 lg:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| Code with <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400">VIBE</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-purple-100 mb-10 max-w-lg"> | |
| Transform your coding skills while grooving to the perfect rhythm. My workshops blend technical mastery with pure creative flow. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#workshops" class="px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full font-bold hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-purple-500/30 text-center"> | |
| Explore Workshops | |
| </a> | |
| <a href="#contact" class="px-8 py-3 bg-transparent border-2 border-purple-400 rounded-full font-bold hover:bg-purple-900 hover:border-purple-600 transition-all duration-300 transform hover:scale-105 text-center"> | |
| Get in Touch | |
| </a> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 relative"> | |
| <img src="http://static.photos/technology/640x360/42" alt="Coding with vibe" class="rounded-xl shadow-2xl border-2 border-purple-500 border-opacity-50 w-full max-w-lg mx-auto"> | |
| <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-purple-600 rounded-full opacity-30 animate-pulse-slow"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-6 bg-black bg-opacity-30 backdrop-blur-sm"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| Why <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400">Vibe Coding?</span> | |
| </h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-10"> | |
| <div class="bg-gradient-to-br from-purple-900 to-purple-800 p-8 rounded-xl border border-purple-700 hover:border-pink-500 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20"> | |
| <div class="w-16 h-16 bg-purple-700 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="cpu" class="h-8 w-8 text-pink-300"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Technical Mastery</h3> | |
| <p class="text-purple-100">Deep dive into cutting-edge technologies with hands-on exercises that make concepts stick.</p> | |
| </div> | |
| <div class="bg-gradient-to-br from-purple-900 to-purple-800 p-8 rounded-xl border border-purple-700 hover:border-pink-500 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20"> | |
| <div class="w-16 h-16 bg-purple-700 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="music" class="h-8 w-8 text-pink-300"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Curated Vibes</h3> | |
| <p class="text-purple-100">Each session comes with a perfectly crafted playlist to enhance focus and creativity.</p> | |
| </div> | |
| <div class="bg-gradient-to-br from-purple-900 to-purple-800 p-8 rounded-xl border border-purple-700 hover:border-pink-500 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20"> | |
| <div class="w-16 h-16 bg-purple-700 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="users" class="h-8 w-8 text-pink-300"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Community Flow</h3> | |
| <p class="text-purple-100">Join a tribe of developers who learn together, grow together, and vibe together.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Workshops Section --> | |
| <section id="workshops" class="py-20 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| Upcoming <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400">Workshops</span> | |
| </h2> | |
| <p class="text-xl text-purple-200 max-w-2xl mx-auto">Choose your vibe and level up your skills</p> | |
| <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Workshop 1 --> | |
| <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-purple-500 transition-all duration-300 transform hover:-translate-y-2"> | |
| <div class="h-48 bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center"> | |
| <i data-feather="code" class="h-16 w-16 text-white opacity-80"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">JavaScript Flow State</h3> | |
| <span class="bg-purple-900 text-purple-100 text-xs px-3 py-1 rounded-full">Beginner</span> | |
| </div> | |
| <p class="text-gray-300 mb-4">Master JavaScript fundamentals while grooving to chill beats designed for optimal learning.</p> | |
| <div class="flex items-center text-sm text-gray-400 mb-4"> | |
| <i data-feather="calendar" class="h-4 w-4 mr-2"></i> | |
| <span>Next session: June 15</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-400 mb-4"> | |
| <i data-feather="clock" class="h-4 w-4 mr-2"></i> | |
| <span>4 sessions × 2 hours</span> | |
| </div> | |
| <a href="#" class="inline-block w-full text-center px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg hover:from-purple-700 hover:to-pink-700 transition-all duration-300">Join the Vibe</a> | |
| </div> | |
| </div> | |
| <!-- Workshop 2 --> | |
| <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-purple-500 transition-all duration-300 transform hover:-translate-y-2"> | |
| <div class="h-48 bg-gradient-to-r from-pink-500 to-red-600 flex items-center justify-center"> | |
| <i data-feather="layers" class="h-16 w-16 text-white opacity-80"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">React in the Zone</h3> | |
| <span class="bg-purple-900 text-purple-100 text-xs px-3 py-1 rounded-full">Intermediate</span> | |
| </div> | |
| <p class="text-gray-300 mb-4">Build React applications with deep focus sessions powered by electronic downtempo music.</p> | |
| <div class="flex items-center text-sm text-gray-400 mb-4"> | |
| <i data-feather="calendar" class="h-4 w-4 mr-2"></i> | |
| <span>Next session: June 22</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-400 mb-4"> | |
| <i data-feather="clock" class="h-4 w-4 mr-2"></i> | |
| <span>6 sessions × 2.5 hours</span> | |
| </div> | |
| <a href="#" class="inline-block w-full text-center px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg hover:from-purple-700 hover:to-pink-700 transition-all duration-300">Join the Vibe</a> | |
| </div> | |
| </div> | |
| <!-- Workshop 3 --> | |
| <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-purple-500 transition-all duration-300 transform hover:-translate-y-2"> | |
| <div class="h-48 bg-gradient-to-r from-blue-500 to-teal-600 flex items-center justify-center"> | |
| <i data-feather="database" class="h-16 w-16 text-white opacity-80"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Backend Groove</h3> | |
| <span class="bg-purple-900 text-purple-100 text-xs px-3 py-1 rounded-full">Advanced</span> | |
| </div> | |
| <p class="text-gray-300 mb-4">Design robust backend systems with jazz-infused coding sessions that stimulate creativity.</p> | |
| <div class="flex items-center text-sm text-gray-400 mb-4"> | |
| <i data-feather="calendar" class="h-4 w-4 mr-2"></i> | |
| <span>Next session: July 5</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-400 mb-4"> | |
| <i data-feather="clock" class="h-4 w-4 mr-2"></i> | |
| <span>8 sessions × 3 hours</span> | |
| </div> | |
| <a href="#" class="inline-block w-full text-center px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg hover:from-purple-700 hover:to-pink-700 transition-all duration-300">Join the Vibe</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 px-6 bg-black bg-opacity-30 backdrop-blur-sm"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| The <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400">Vibes</span> | |
| </h2> | |
| <p class="text-xl text-purple-200 max-w-2xl mx-auto">What people are saying about the experience</p> | |
| <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gradient-to-br from-purple-900 to-purple-800 p-8 rounded-xl border border-purple-700"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/1" alt="Alex" class="w-12 h-12 rounded-full mr-4 border-2 border-pink-400"> | |
| <div> | |
| <h4 class="font-bold">Alex</h4> | |
| <p class="text-sm text-purple-300">Frontend Developer</p> | |
| </div> | |
| </div> | |
| <p class="text-purple-100 italic mb-4">"The JavaScript Flow State workshop completely changed how I approach coding. The curated playlists helped me enter a state of flow I never knew was possible."</p> | |
| <div class="flex"> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gradient-to-br from-purple-900 to-purple-800 p-8 rounded-xl border border-purple-700"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/2" alt="Sam" class="w-12 h-12 rounded-full mr-4 border-2 border-pink-400"> | |
| <div> | |
| <h4 class="font-bold">Sam</h4> | |
| <p class="text-sm text-purple-300">Fullstack Engineer</p> | |
| </div> | |
| </div> | |
| <p class="text-purple-100 italic mb-4">"I've attended many coding workshops, but none matched the energy and effectiveness of VibeCoder. The combination of technical depth and perfect music selection is magical."</p> | |
| <div class="flex"> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gradient-to-br from-purple-900 to-purple-800 p-8 rounded-xl border border-purple-700"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/3" alt="Jordan" class="w-12 h-12 rounded-full mr-4 border-2 border-pink-400"> | |
| <div> | |
| <h4 class="font-bold">Jordan</h4> | |
| <p class="text-sm text-purple-300">Backend Specialist</p> | |
| </div> | |
| </div> | |
| <p class="text-purple-100 italic mb-4">"Backend Groove turned what I thought would be dry topics into an exciting journey. The jazz coding sessions were unexpectedly perfect for problem-solving."</p> | |
| <div class="flex"> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-yellow-400"></i> | |
| <i data-feather="star" class="h-5 w-5 text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-6"> | |
| <div class="container mx-auto max-w-4xl"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| Join the <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400">Vibe</span> | |
| </h2> | |
| <p class="text-xl text-purple-200 max-w-2xl mx-auto">Ready to transform your coding experience?</p> | |
| <div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto mt-4"></div> | |
| </div> | |
| <div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-8 md:p-12 border border-gray-700 shadow-2xl"> | |
| <form class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-purple-200 mb-2">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300" placeholder="Enter your name"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-purple-200 mb-2">Your Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300" placeholder="Enter your email"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="workshop" class="block text-purple-200 mb-2">Workshop Interest</label> | |
| <select id="workshop" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300"> | |
| <option value="">Select a workshop</option> | |
| <option value="javascript">JavaScript Flow State</option> | |
| <option value="react">React in the Zone</option> | |
| <option value="backend">Backend Groove</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-purple-200 mb-2">Your Vibe</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300" placeholder="Tell us about your coding experience and what you hope to achieve"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-bold hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105"> | |
| Get on the List | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-6 bg-black bg-opacity-50 border-t border-purple-900"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <a href="#" class="flex items-center space-x-2"> | |
| <i data-feather="code" class="text-purple-400 h-6 w-6"></i> | |
| <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400">VibeCoder</span> | |
| </a> | |
| <p class="text-purple-300 mt-2">Code with rhythm. Learn with vibe.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-purple-300 hover:text-purple-100 transition-colors duration-300"> | |
| <i data-feather="instagram" class="h-6 w-6"></i> | |
| </a> | |
| <a href="#" class="text-purple-300 hover:text-purple-100 transition-colors duration-300"> | |
| <i data-feather="twitter" class="h-6 w-6"></i> | |
| </a> | |
| <a href="#" class="text-purple-300 hover:text-purple-100 transition-colors duration-300"> | |
| <i data-feather="github" class="h-6 w-6"></i> | |
| </a> | |
| <a href="#" class="text-purple-300 hover:text-purple-100 transition-colors duration-300"> | |
| <i data-feather="linkedin" class="h-6 w-6"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-purple-900 mt-8 pt-8 text-center text-purple-400 text-sm"> | |
| <p>© 2023 VibeCoder. All vibes reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating music player --> | |
| <div class="fixed bottom-6 right-6 bg-black bg-opacity-70 backdrop-blur-lg rounded-full p-3 shadow-xl border border-purple-500 border-opacity-30 hover:bg-opacity-90 transition-all duration-300 cursor-pointer"> | |
| <i data-feather="music" class="h-6 w-6 text-purple-300 animate-pulse"></i> | |
| </div> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |