Spaces:
Running
Running
make it mobile only and user should click on it as it comes and make it for whatsapp button to enroll lik button will have whatsapp group link and make it better to use and feel - Follow Up Deployment
34bfee3 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>Free Beginner Guitar Workshop | BLU X MEDIA</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"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Raleway:wght@700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'guitar-blue': '#0c2461', | |
| 'guitar-gold': '#f6b93b', | |
| 'guitar-dark': '#1e272e', | |
| }, | |
| fontFamily: { | |
| 'heading': ['Raleway', 'sans-serif'], | |
| 'body': ['Poppins', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .text-shadow { | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.5); | |
| } | |
| .guitar-strings { | |
| background-image: repeating-linear-gradient( | |
| to bottom, | |
| transparent, | |
| transparent 8px, | |
| rgba(255,255,255,0.1) 8px, | |
| rgba(255,255,255,0.1) 10px | |
| ); | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| @keyframes pulse-glow { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); | |
| } | |
| } | |
| .animate-pulse-glow { | |
| animation: pulse-glow 2s infinite; | |
| } | |
| .animate-bounce-slow { | |
| animation: bounce-slow 3s infinite; | |
| } | |
| @keyframes bounce-slow { | |
| 0%, 100% { transform: translateY(0) rotate(12deg); } | |
| 50% { transform: translateY(-20px) rotate(12deg); } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .float-animation { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 25% { transform: translateX(-5px); } | |
| 75% { transform: translateX(5px); } | |
| } | |
| .shake-animation { | |
| animation: shake 0.5s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-guitar-dark overflow-x-hidden"> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-guitar-blue/95 to-black/90"> | |
| <!-- Guitar Strings Background --> | |
| <div class="absolute inset-0 guitar-strings"></div> | |
| <!-- Decorative Elements --> | |
| <div class="absolute top-10 left-10 w-24 h-24 rounded-full border-2 border-guitar-gold/30 animate-pulse"></div> | |
| <div class="absolute top-1/3 right-8 w-16 h-16 rounded-full border-2 border-guitar-gold/20 animate-pulse-slow"></div> | |
| <div class="absolute bottom-32 left-1/4 w-12 h-12 rounded-full border-2 border-guitar-gold/40 animate-pulse"></div> | |
| <div class="absolute bottom-1/3 right-1/3 w-8 h-8 rounded-full border-2 border-guitar-gold/30 animate-pulse-slow"></div> | |
| <!-- Guitar Neck Decoration --> | |
| <div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-black/70 to-transparent flex justify-center"> | |
| <div class="w-1/2 h-full flex justify-around items-start"> | |
| <div class="w-1 h-16 bg-white"></div> | |
| <div class="w-1 h-16 bg-white"></div> | |
| <div class="w-1 h-16 bg-white"></div> | |
| <div class="w-1 h-16 bg-white"></div> | |
| <div class="w-1 h-16 bg-white"></div> | |
| <div class="w-1 h-16 bg-white"></div> | |
| </div> | |
| </div> | |
| <!-- Content Container --> | |
| <div class="relative z-10 max-w-sm mx-auto px-4 py-16 text-center"> | |
| <!-- Badge --> | |
| <div class="inline-block bg-guitar-gold text-guitar-dark font-bold py-2 px-6 rounded-full mb-6 transform -rotate-3 shadow-lg float-animation"> | |
| <i class="fas fa-guitar mr-2"></i>FREE WORKSHOP | |
| </div> | |
| <!-- Main Heading --> | |
| <h1 class="text-4xl font-heading font-extrabold text-white mb-6 text-shadow leading-tight"> | |
| Beginner <span class="text-guitar-gold">Guitar</span> Workshop | |
| </h1> | |
| <!-- Subheading --> | |
| <p class="text-lg text-gray-200 mb-8 font-body"> | |
| Master the fundamentals in just 2 hours - perfect for complete beginners! | |
| </p> | |
| <!-- Instructor Card --> | |
| <div class="bg-black/40 backdrop-blur-sm rounded-xl p-6 mb-8 border border-white/10 transform hover:scale-105 transition-transform duration-300"> | |
| <div class="flex items-center gap-4"> | |
| <div class="relative"> | |
| <div class="bg-gradient-to-br from-guitar-gold to-yellow-600 rounded-full w-16 h-16 flex items-center justify-center text-guitar-dark text-2xl font-bold"> | |
| G | |
| </div> | |
| <div class="absolute -bottom-2 -right-2 bg-guitar-gold text-guitar-dark p-1 rounded-full"> | |
| <i class="fas fa-music text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="text-left"> | |
| <p class="text-gray-300 text-sm font-body">Led by</p> | |
| <h3 class="text-xl font-bold text-white font-heading">GOURAV KUMAR</h3> | |
| <p class="text-guitar-gold text-sm flex items-center"> | |
| <i class="fas fa-star mr-1"></i> | |
| <i class="fas fa-star mr-1"></i> | |
| <i class="fas fa-star mr-1"></i> | |
| <i class="fas fa-star mr-1"></i> | |
| <i class="fas fa-star mr-1"></i> | |
| Professional Guitarist | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Details --> | |
| <div class="grid grid-cols-1 gap-4 mb-8"> | |
| <div class="bg-black/30 backdrop-blur-sm p-4 rounded-lg border border-white/10"> | |
| <i class="fas fa-calendar-alt text-guitar-gold text-2xl mb-2"></i> | |
| <h3 class="text-white font-bold">Date</h3> | |
| <p class="text-gray-200">July 10th</p> | |
| </div> | |
| <div class="bg-black/30 backdrop-blur-sm p-4 rounded-lg border border-white/10"> | |
| <i class="fas fa-clock text-guitar-gold text-2xl mb-2"></i> | |
| <h3 class="text-white font-bold">Time</h3> | |
| <p class="text-gray-200">8 PM - 10 PM</p> | |
| </div> | |
| <div class="bg-black/30 backdrop-blur-sm p-4 rounded-lg border border-white/10"> | |
| <i class="fas fa-globe text-guitar-gold text-2xl mb-2"></i> | |
| <h3 class="text-white font-bold">Where</h3> | |
| <p class="text-gray-200">Online</p> | |
| </div> | |
| </div> | |
| <!-- What You'll Learn --> | |
| <div class="bg-black/30 backdrop-blur-sm p-4 rounded-lg border border-white/10 mb-8"> | |
| <h3 class="text-white font-bold text-lg mb-3"> | |
| <i class="fas fa-graduation-cap text-guitar-gold mr-2"></i> | |
| What You'll Learn | |
| </h3> | |
| <div class="grid grid-cols-2 gap-2 text-sm"> | |
| <div class="flex items-center text-gray-200"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> | |
| Basic chords | |
| </div> | |
| <div class="flex items-center text-gray-200"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> | |
| Strumming | |
| </div> | |
| <div class="flex items-center text-gray-200"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> | |
| First song | |
| </div> | |
| <div class="flex items-center text-gray-200"> | |
| <i class="fas fa-check text-green-400 mr-2"></i> | |
| Finger position | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Presented by --> | |
| <p class="text-white/80 font-body"> | |
| Presented by <span class="font-bold text-white">BLU X MEDIA</span> | |
| </p> | |
| </div> | |
| <!-- Floating Guitar Animation --> | |
| <div class="absolute bottom-28 right-5 w-16 h-40 flex justify-center items-start"> | |
| <div class="relative"> | |
| <div class="absolute w-24 h-24 bg-guitar-gold/10 rounded-full -top-8 -left-4 animate-ping"></div> | |
| <div class="relative z-10"> | |
| <i class="fas fa-guitar text-5xl text-white transform rotate-12 animate-bounce-slow"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="relative bg-guitar-dark py-12 px-4"> | |
| <!-- Guitar Strings Background --> | |
| <div class="absolute inset-0 guitar-strings opacity-30"></div> | |
| <!-- Decorative Elements --> | |
| <div class="absolute top-5 left-5 w-16 h-16 rounded-full border-2 border-guitar-gold/20 animate-pulse"></div> | |
| <div class="absolute top-1/2 right-8 w-12 h-12 rounded-full border-2 border-guitar-gold/30 animate-pulse-slow"></div> | |
| <div class="absolute bottom-5 left-1/3 w-8 h-8 rounded-full border-2 border-guitar-gold/25 animate-pulse"></div> | |
| <div class="relative z-10 text-center max-w-sm mx-auto"> | |
| <!-- Urgency Badge --> | |
| <div class="bg-red-500 text-white font-bold py-2 px-4 rounded-full mb-6 inline-block shake-animation"> | |
| <i class="fas fa-hourglass-half mr-2"></i> | |
| LIMITED SEATS! | |
| </div> | |
| <!-- Call to Action --> | |
| <h2 class="text-2xl font-heading font-bold text-white mb-4"> | |
| Ready to Start Your | |
| <span class="text-guitar-gold">Guitar Journey?</span> | |
| </h2> | |
| <p class="text-gray-300 mb-6 font-body text-sm"> | |
| Join hundreds of students who've already started their musical journey with us! | |
| </p> | |
| <!-- Social Proof --> | |
| <div class="flex justify-center items-center mb-8 space-x-4"> | |
| <div class="flex -space-x-2"> | |
| <div class="w-8 h-8 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">A</div> | |
| <div class="w-8 h-8 bg-gradient-to-br from-green-400 to-green-600 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">R</div> | |
| <div class="w-8 h-8 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">S</div> | |
| <div class="w-8 h-8 bg-gradient-to-br from-red-400 to-red-600 rounded-full border-2 border-white flex items-center justify-center text-white text-xs font-bold">+</div> | |
| </div> | |
| <p class="text-gray-300 text-sm"> | |
| <span class="text-guitar-gold font-bold">200+</span> students joined | |
| </p> | |
| </div> | |
| <!-- Main WhatsApp Button --> | |
| <div class="mb-6"> | |
| <a href="https://chat.whatsapp.com/IShLgdzMd3T9raZELw4Vy4?mode=ac_t" | |
| class="block bg-[#25D366] text-white font-bold font-heading py-5 px-8 rounded-2xl text-lg shadow-2xl transform transition-all duration-300 hover:scale-105 animate-pulse-glow relative overflow-hidden"> | |
| <div class="flex items-center justify-center"> | |
| <i class="fab fa-whatsapp mr-3 text-2xl"></i> | |
| <div class="text-center"> | |
| <div class="text-lg">Join FREE Workshop</div> | |
| <div class="text-sm opacity-90">Click to join WhatsApp group</div> | |
| </div> | |
| </div> | |
| <span class="absolute -top-2 -right-2 flex h-6 w-6"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-6 w-6 bg-red-500 items-center justify-center text-xs font-bold">NEW</span> | |
| </span> | |
| </a> | |
| </div> | |
| <!-- Trust Indicators --> | |
| <div class="bg-black/40 backdrop-blur-sm p-4 rounded-xl border border-white/10"> | |
| <div class="flex items-center justify-center space-x-4 text-sm text-gray-300"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-shield-alt text-green-400 mr-1"></i> | |
| <span>100% Safe</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-users text-blue-400 mr-1"></i> | |
| <span>Live Support</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-gift text-guitar-gold mr-1"></i> | |
| <span>Free</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Fixed WhatsApp Button (Always Visible) --> | |
| <div class="fixed bottom-4 left-4 right-4 z-50"> | |
| <a href="https://chat.whatsapp.com/IShLgdzMd3T9raZELw4Vy4?mode=ac_t" | |
| class="flex items-center justify-center bg-[#25D366] text-white font-bold font-heading py-4 px-6 rounded-full text-lg shadow-2xl transform transition-all duration-300 hover:scale-105 animate-pulse-glow"> | |
| <i class="fab fa-whatsapp mr-3 text-2xl"></i> | |
| <span>Join Workshop Now - FREE!</span> | |
| <span class="absolute -top-2 -right-2 flex h-6 w-6"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-6 w-6 bg-red-500 items-center justify-center text-xs">NEW</span> | |
| </span> | |
| </a> | |
| </div> | |
| <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=Nityam2007/govkum" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |