Hugging Face's logo

Spaces:
Tingchenliang
/
undefined
Running

App Files Community
undefined
File size: 8,051 Bytes 
4bc1eac
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<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>