Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Classroom Intro - ZenFlow Yoga</title> | |
| <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> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .sansita-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .classroom-bg { | |
| background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('http://static.photos/wellness/1200x630/23') no-repeat center center; | |
| background-size: cover; | |
| } | |
| .content-card { | |
| backdrop-filter: blur(10px); | |
| background: rgba(255, 255, 255, 0.95); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i data-feather="moon" class="text-green-600 mr-2"></i> | |
| <span class="sansita-font text-2xl font-bold text-gray-800">ZenFlow</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="index.html" class="text-gray-800 font-medium hover:text-green-600 transition">Home</a> | |
| <a href="classroom-intro.html" class="text-green-600 font-medium transition">Classroom</a> | |
| <a href="#" class="text-gray-800 font-medium hover:text-green-600 transition">Teachers</a> | |
| <a href="#" class="text-gray-800 font-medium hover:text-green-600 transition">About</a> | |
| <a href="#" class="px-4 py-2 bg-green-600 text-white rounded-full hover:bg-green-700 transition">Book Now</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button class="text-gray-800 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Classroom Hero --> | |
| <section class="classroom-bg text-white py-32"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="sansita-font text-5xl md:text-7xl font-bold mb-6">Our Classroom</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">A sacred space designed for your journey to inner peace and physical wellness</p> | |
| </div> | |
| </section> | |
| <!-- Classroom Content --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="content-card rounded-2xl shadow-xl p-8 md:p-12 mb-12"> | |
| <h2 class="sansita-font text-3xl font-bold text-gray-800 mb-6">Welcome to Your Sanctuary</h2> | |
| <div class="prose prose-lg max-w-none"> | |
| <p class="text-gray-700 mb-6">Our yoga classroom is more than just a space—it's a carefully crafted environment designed to support your practice and nurture your wellbeing.</p> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-8 mb-4">🌟 What to Expect</h3> | |
| <ul class="list-disc list-inside text-gray-700 space-y-2 mb-6"> | |
| <li><strong>Serene Atmosphere:</strong> Soft lighting, calming colors, and peaceful ambiance</li> | |
| <li><strong>Premium Equipment:</strong> High-quality mats, blocks, and props available</li> | |
| <li><strong>Optimal Temperature:</strong> Perfectly maintained for comfort and flexibility</li> | |
| <li><strong>Clean & Sanitized:</strong> Impeccable hygiene standards for your peace of mind</li> | |
| </ul> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-8 mb-4">🧘♀️ Class Guidelines</h3> | |
| <ul class="list-disc list-inside text-gray-700 space-y-2 mb-6"> | |
| <li>Arrive 10-15 minutes early to settle in</li> | |
| <li>Wear comfortable, breathable clothing</li> | |
| <li>Bring water and any personal props you prefer</li> | |
| <li>Silence electronic devices before entering</li> | |
| <li>Listen to your body and honor its limits</li> | |
| </ul> | |
| <h3 class="text-2xl font-bold text-gray-800 mt-8 mb-4">📋 Class Levels</h3> | |
| <div class="grid md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-green-50 p-6 rounded-lg"> | |
| <h4 class="font-bold text-green-800 mb-2">Beginner</h4> | |
| <p class="text-green-700 text-sm">Perfect for newcomers. Focus on foundational poses and proper alignment.</p> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <h4 class="font-bold text-blue-800 mb-2">Intermediate</h4> | |
| <p class="text-blue-700 text-sm">Build strength and flexibility with more challenging sequences.</p> | |
| </div> | |
| <div class="bg-purple-50 p-6 rounded-lg"> | |
| <h4 class="font-bold text-purple-800 mb-2">Advanced</h4> | |
| <p class="text-purple-700 text-sm">For experienced practitioners seeking deeper practice and mastery.</p> | |
| </div> | |
| <div class="bg-orange-50 p-6 rounded-lg"> | |
| <h4 class="font-bold text-orange-800 mb-2">Gentle/Restorative</h4> | |
| <p class="text-orange-700 text-sm">Slow-paced classes focusing on relaxation and stress relief.</p> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded-lg mb-8"> | |
| <div class="flex items-start"> | |
| <i data-feather="info" class="text-yellow-600 mr-3 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold text-yellow-800 mb-2">Important Note</h4> | |
| <p class="text-yellow-700">Please inform your instructor of any injuries or medical conditions before class begins. Your safety is our priority.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <h3 class="sansita-font text-3xl font-bold text-gray-800 mb-6">Ready to Begin Your Journey?</h3> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="px-8 py-3 bg-green-600 text-white rounded-full hover:bg-green-700 transition font-medium">Book Your First Class</a> | |
| <a href="#" class="px-8 py-3 border border-green-600 text-green-600 rounded-full hover:bg-green-600 hover:text-white transition font-medium">View Schedule</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |