Hugging Face's logo

Spaces:
Tingchenliang
/
undefined
Running

App Files Community
undefined
File size: 10,196 Bytes 
4bc1eac
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1a7d85f
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZenFlow Yoga Studio</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;
        }
        
        .hero-bg {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://static.photos/nature/1200x630/42') no-repeat center center;
            background-size: cover;
        }
        
        .sansita-font {
            font-family: 'Playfair Display', serif;
        }
        
        .pose-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
    </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-gray-800 font-medium hover:text-green-600 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>

    <!-- Hero Section -->
    <section class="hero-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">Find Your Balance</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Join our yoga community and discover mindfulness through movement. Begin your journey to inner peace today.</p>
            <div class="flex justify-center space-x-4">
                <a href="#" class="px-8 py-3 bg-green-600 text-white rounded-full hover:bg-green-700 transition font-medium">Start Free Trial</a>
                <a href="#" class="px-8 py-3 border border-white text-white rounded-full hover:bg-white hover:text-gray-800 transition font-medium">Learn More</a>
            </div>
        </div>
    </section>

    <!-- Features -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="sansita-font text-4xl font-bold text-gray-800 mb-4">Why Choose ZenFlow</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">We combine traditional yoga with modern techniques to help you achieve your wellness goals.</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-12">
                <div class="text-center">
                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i data-feather="activity" class="text-green-600 w-10 h-10"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Expert Instructors</h3>
                    <p class="text-gray-600">Our certified teachers guide you safely through every pose with personalized attention.</p>
                </div>
                
                <div class="text-center">
                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i data-feather="heart" class="text-green-600 w-10 h-10"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Holistic Approach</h3>
                    <p class="text-gray-600">We focus on physical postures, breathing techniques, meditation, and relaxation.</p>
                </div>
                
                <div class="text-center">
                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i data-feather="users" class="text-green-600 w-10 h-10"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Community</h3>
                    <p class="text-gray-600">Join a supportive environment where you can grow and connect with like-minded individuals.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Class Highlight -->
    <section class="py-20 bg-gray-100">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <img src="http://static.photos/nature/640x360/12" alt="Yoga Class" class="rounded-lg shadow-xl pose-animation">
                </div>
                <div class="md:w-1/2 md:pl-12">
                    <h2 class="sansita-font text-4xl font-bold text-gray-800 mb-6">Beginner's Vinyasa Flow</h2>
                    <p class="text-gray-600 mb-6">Our most popular class for newcomers. Learn the foundations of yoga in a welcoming environment designed for beginners.</p>
                    <ul class="mb-8 space-y-3">
                        <li class="flex items-center">
                            <i data-feather="check" class="text-green-600 mr-2"></i>
                            <span class="text-gray-700">All equipment provided for your convenience</span>
                        </li>
                    </ul>
                    <a href="classroom-intro.html" class="inline-block px-6 py-3 bg-green-600 text-white rounded-full hover:bg-green-700 transition font-medium">Explore Our Classroom</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center mb-4">
                        <i data-feather="moon" class="text-green-400 mr-2"></i>
                        <span class="sansita-font text-xl font-bold">ZenFlow</span>
                    </div>
                    <p class="text-gray-400">Find your balance, discover your peace, transform your life.</p>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
                        <li><a href="classroom-intro.html" class="text-gray-400 hover:text-white transition">Classroom</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Schedule</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Teachers</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Contact</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li>123 Yoga Street</li>
                        <li>Serenity City, SC 12345</li>
                        <li>info@zenflowyoga.com</li>
                        <li>(555) 123-4567</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Follow Us</h4>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2024 ZenFlow Yoga Studio. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        feather.replace();
    </script>
</body>
</html>
span class="text-gray-700">Gentle introduction to basic poses</span>
                        </li>
                        <li class="flex items-center">
                            <i data-feather="check" class="text-green-600 mr-2"></i>
                            <span class="text-gray-700">Breath-focused movement</span>
                        </li>
                        <li class="flex items-center">
                            <i data-feather="check" class="text-green-600 mr-2"></i>
                            <span class="text-gray-700">Small class sizes for personal attention</span>
                        </li>
                        <li class="flex items-center">
                            <i data-feather="check" class="text-green-600 mr-2"></i>
                            <
</body>
</html>