Hugging Face's logo

Spaces:
vu-daryl
/
thd-lion-dance
Running

App Files Community
vu-daryl commited on
Commit
19e60fd
·
verified ·
1 Parent(s): 7275903

can you make a website for "THD Lion Dance" with overview, team members, inventory, and design it based off of chinese new year - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +646 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Thd Lion Dance
3
- emoji: 👀
4
- colorFrom: green
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: thd-lion-dance
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,646 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>THD Lion Dance - Traditional Chinese Performance Troupe</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;700&display=swap');
11
+
12
+ :root {
13
+ --red-primary: #e63946;
14
+ --gold-primary: #ffd700;
15
+ --dark-red: #9a031e;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Noto Sans SC', sans-serif;
20
+ background-color: #fef6e4;
21
+ color: #333;
22
+ }
23
+
24
+ .chinese-font {
25
+ font-family: 'Ma Shan Zheng', cursive;
26
+ }
27
+
28
+ .nav-link {
29
+ position: relative;
30
+ }
31
+
32
+ .nav-link:after {
33
+ content: '';
34
+ position: absolute;
35
+ width: 0;
36
+ height: 2px;
37
+ bottom: -2px;
38
+ left: 0;
39
+ background-color: var(--gold-primary);
40
+ transition: width 0.3s ease;
41
+ }
42
+
43
+ .nav-link:hover:after {
44
+ width: 100%;
45
+ }
46
+
47
+ .lion-head {
48
+ animation: bounce 3s infinite ease-in-out;
49
+ }
50
+
51
+ @keyframes bounce {
52
+ 0%, 100% { transform: translateY(0); }
53
+ 50% { transform: translateY(-15px); }
54
+ }
55
+
56
+ .firecracker {
57
+ position: absolute;
58
+ width: 8px;
59
+ height: 40px;
60
+ background: linear-gradient(to bottom, #ff0000, #ff6600);
61
+ border-radius: 4px;
62
+ }
63
+
64
+ .firecracker::before {
65
+ content: '';
66
+ position: absolute;
67
+ top: -10px;
68
+ left: -2px;
69
+ width: 12px;
70
+ height: 12px;
71
+ background-color: #ffcc00;
72
+ border-radius: 50%;
73
+ }
74
+
75
+ .lantern {
76
+ width: 60px;
77
+ height: 80px;
78
+ background-color: var(--red-primary);
79
+ border-radius: 30px;
80
+ position: relative;
81
+ box-shadow: 0 0 20px rgba(230, 57, 70, 0.6);
82
+ }
83
+
84
+ .lantern::before {
85
+ content: '';
86
+ position: absolute;
87
+ top: 10px;
88
+ left: 15px;
89
+ width: 30px;
90
+ height: 40px;
91
+ background-color: var(--gold-primary);
92
+ border-radius: 15px;
93
+ }
94
+
95
+ .lantern::after {
96
+ content: '福';
97
+ position: absolute;
98
+ top: 50%;
99
+ left: 50%;
100
+ transform: translate(-50%, -50%);
101
+ color: var(--dark-red);
102
+ font-size: 24px;
103
+ font-family: 'Ma Shan Zheng', cursive;
104
+ }
105
+
106
+ .section-divider {
107
+ height: 50px;
108
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 0L0 0 892.25 114.72 1200 0z' fill='%23e63946'%3E%3C/path%3E%3C/svg%3E");
109
+ background-size: cover;
110
+ transform: rotate(180deg);
111
+ }
112
+
113
+ .section-divider-bottom {
114
+ height: 50px;
115
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 0L0 0 892.25 114.72 1200 0z' fill='%23e63946'%3E%3C/path%3E%3C/svg%3E");
116
+ background-size: cover;
117
+ }
118
+
119
+ .team-card:hover {
120
+ transform: translateY(-10px);
121
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
122
+ }
123
+
124
+ .inventory-item:hover .inventory-overlay {
125
+ opacity: 1;
126
+ }
127
+ </style>
128
+ </head>
129
+ <body>
130
+ <!-- Firecrackers decoration -->
131
+ <div class="fixed top-10 left-10 z-0 opacity-30">
132
+ <div class="firecracker"></div>
133
+ </div>
134
+ <div class="fixed top-20 right-20 z-0 opacity-30">
135
+ <div class="firecracker"></div>
136
+ </div>
137
+ <div class="fixed bottom-20 left-1/4 z-0 opacity-30">
138
+ <div class="firecracker"></div>
139
+ </div>
140
+ <div class="fixed bottom-10 right-1/3 z-0 opacity-30">
141
+ <div class="firecracker"></div>
142
+ </div>
143
+
144
+ <!-- Lanterns decoration -->
145
+ <div class="fixed top-5 right-5 z-0 opacity-20">
146
+ <div class="lantern"></div>
147
+ </div>
148
+ <div class="fixed bottom-5 left-5 z-0 opacity-20">
149
+ <div class="lantern"></div>
150
+ </div>
151
+
152
+ <!-- Navigation -->
153
+ <nav class="bg-red-600 text-white shadow-lg sticky top-0 z-50">
154
+ <div class="container mx-auto px-6 py-3">
155
+ <div class="flex justify-between items-center">
156
+ <div class="flex items-center">
157
+ <i class="fas fa-dragon text-2xl mr-2 text-yellow-400"></i>
158
+ <span class="chinese-font text-xl font-semibold">THD Lion Dance</span>
159
+ </div>
160
+ <div class="hidden md:flex space-x-8">
161
+ <a href="#home" class="nav-link py-2">Home</a>
162
+ <a href="#about" class="nav-link py-2">Overview</a>
163
+ <a href="#team" class="nav-link py-2">Team</a>
164
+ <a href="#inventory" class="nav-link py-2">Inventory</a>
165
+ <a href="#contact" class="nav-link py-2">Contact</a>
166
+ </div>
167
+ <div class="md:hidden">
168
+ <button class="mobile-menu-button">
169
+ <i class="fas fa-bars text-xl"></i>
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </nav>
175
+
176
+ <!-- Mobile Menu -->
177
+ <div class="mobile-menu hidden md:hidden bg-red-700 text-white">
178
+ <a href="#home" class="block py-2 px-4 hover:bg-red-600">Home</a>
179
+ <a href="#about" class="block py-2 px-4 hover:bg-red-600">Overview</a>
180
+ <a href="#team" class="block py-2 px-4 hover:bg-red-600">Team</a>
181
+ <a href="#inventory" class="block py-2 px-4 hover:bg-red-600">Inventory</a>
182
+ <a href="#contact" class="block py-2 px-4 hover:bg-red-600">Contact</a>
183
+ </div>
184
+
185
+ <!-- Hero Section -->
186
+ <section id="home" class="relative bg-gradient-to-b from-red-600 to-red-800 text-white py-20">
187
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
188
+ <div class="md:w-1/2 mb-10 md:mb-0">
189
+ <h1 class="chinese-font text-4xl md:text-6xl font-bold mb-4">THD Lion Dance</h1>
190
+ <p class="text-xl mb-8">Preserving Tradition, Celebrating Culture</p>
191
+ <div class="flex space-x-4">
192
+ <a href="#contact" class="bg-yellow-500 hover:bg-yellow-600 text-red-900 font-bold py-3 px-6 rounded-full transition duration-300">
193
+ Book Performance
194
+ </a>
195
+ <a href="#about" class="border-2 border-white hover:bg-white hover:text-red-800 text-white font-bold py-3 px-6 rounded-full transition duration-300">
196
+ Learn More
197
+ </a>
198
+ </div>
199
+ </div>
200
+ <div class="md:w-1/2 flex justify-center">
201
+ <img src="https://i.imgur.com/JQ1XH0p.png" alt="Lion Dance" class="lion-head max-w-xs md:max-w-md">
202
+ </div>
203
+ </div>
204
+ <div class="section-divider-bottom"></div>
205
+ </section>
206
+
207
+ <!-- Overview Section -->
208
+ <section id="about" class="py-20 bg-white">
209
+ <div class="section-divider"></div>
210
+ <div class="container mx-auto px-6">
211
+ <div class="text-center mb-16">
212
+ <h2 class="chinese-font text-4xl font-bold text-red-700 mb-4">Our Story</h2>
213
+ <div class="w-20 h-1 bg-yellow-500 mx-auto mb-6"></div>
214
+ <p class="text-gray-700 max-w-3xl mx-auto">THD Lion Dance has been performing traditional Chinese lion dances for over 15 years, bringing luck, prosperity, and festive joy to celebrations throughout the region.</p>
215
+ </div>
216
+
217
+ <div class="flex flex-col md:flex-row items-center mb-16">
218
+ <div class="md:w-1/2 mb-10 md:mb-0">
219
+ <img src="https://i.imgur.com/LzWQc2V.jpg" alt="Lion Dance Performance" class="rounded-lg shadow-xl w-full">
220
+ </div>
221
+ <div class="md:w-1/2 md:pl-12">
222
+ <h3 class="text-3xl font-bold text-red-700 mb-4 chinese-font">Cultural Significance</h3>
223
+ <p class="text-gray-700 mb-6">The lion dance is a traditional Chinese dance performed during festivals, especially Chinese New Year, to bring good luck and fortune. The dance is believed to scare away evil spirits and summon good luck and fortune.</p>
224
+ <p class="text-gray-700 mb-6">Our troupe specializes in both the Northern and Southern styles of lion dance, each with its own unique characteristics and movements.</p>
225
+ <div class="flex space-x-4">
226
+ <div class="bg-red-100 p-4 rounded-lg">
227
+ <i class="fas fa-drum text-red-600 text-2xl mb-2"></i>
228
+ <h4 class="font-bold text-red-700">Live Music</h4>
229
+ <p class="text-sm text-gray-600">Traditional drum, gong, and cymbals</p>
230
+ </div>
231
+ <div class="bg-red-100 p-4 rounded-lg">
232
+ <i class="fas fa-award text-red-600 text-2xl mb-2"></i>
233
+ <h4 class="font-bold text-red-700">Award Winning</h4>
234
+ <p class="text-sm text-gray-600">Multiple competition champions</p>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <div class="flex flex-col md:flex-row items-center">
241
+ <div class="md:w-1/2 order-2 md:order-1 md:pr-12">
242
+ <h3 class="text-3xl font-bold text-red-700 mb-4 chinese-font">Our Performances</h3>
243
+ <p class="text-gray-700 mb-6">We perform at various events including Chinese New Year celebrations, business openings, weddings, and cultural festivals. Each performance is tailored to the occasion while maintaining traditional authenticity.</p>
244
+ <ul class="space-y-3 mb-6">
245
+ <li class="flex items-start">
246
+ <i class="fas fa-check-circle text-yellow-500 mt-1 mr-2"></i>
247
+ <span class="text-gray-700">Traditional blessing ceremony</span>
248
+ </li>
249
+ <li class="flex items-start">
250
+ <i class="fas fa-check-circle text-yellow-500 mt-1 mr-2"></i>
251
+ <span class="text-gray-700">Custom choreography</span>
252
+ </li>
253
+ <li class="flex items-start">
254
+ <i class="fas fa-check-circle text-yellow-500 mt-1 mr-2"></i>
255
+ <span class="text-gray-700">Interactive elements</span>
256
+ </li>
257
+ </ul>
258
+ <a href="#contact" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
259
+ Book Now
260
+ </a>
261
+ </div>
262
+ <div class="md:w-1/2 mb-10 md:mb-0 order-1 md:order-2">
263
+ <img src="https://i.imgur.com/5zQY9Xx.jpg" alt="Lion Dance Performance" class="rounded-lg shadow-xl w-full">
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </section>
268
+
269
+ <!-- Team Section -->
270
+ <section id="team" class="py-20 bg-red-50">
271
+ <div class="section-divider"></div>
272
+ <div class="container mx-auto px-6">
273
+ <div class="text-center mb-16">
274
+ <h2 class="chinese-font text-4xl font-bold text-red-700 mb-4">Our Team</h2>
275
+ <div class="w-20 h-1 bg-yellow-500 mx-auto mb-6"></div>
276
+ <p class="text-gray-700 max-w-3xl mx-auto">Meet the talented individuals who bring the lions to life with their skill, energy, and dedication to preserving this ancient art form.</p>
277
+ </div>
278
+
279
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
280
+ <!-- Team Member 1 -->
281
+ <div class="bg-white rounded-lg overflow-hidden shadow-md team-card transition duration-300">
282
+ <img src="https://i.imgur.com/JvPq5Yk.jpg" alt="Team Member" class="w-full h-64 object-cover">
283
+ <div class="p-6">
284
+ <h3 class="text-xl font-bold text-red-700 mb-1 chinese-font">Zhang Wei</h3>
285
+ <p class="text-yellow-600 font-semibold mb-3">Head Lion Dancer</p>
286
+ <p class="text-gray-600">With over 20 years of experience, Zhang leads our performances with precision and flair.</p>
287
+ <div class="flex mt-4 space-x-3">
288
+ <a href="#" class="text-red-600 hover:text-red-800"><i class="fab fa-facebook-f"></i></a>
289
+ <a href="#" class="text-red-600 hover:text-red-800"><i class="fab fa-instagram"></i></a>
290
+ <a href="#" class="text-red-600 hover:text-red-800"><i class="fab fa-linkedin-in"></i></a>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Team Member 2 -->
296
+ <div class="bg-white rounded-lg overflow-hidden shadow-md team-card transition duration-300">
297
+ <img src="https://i.imgur.com/mW5XqGk.jpg" alt="Team Member" class="w-full h-64 object-cover">
298
+ <div class="p-6">
299
+ <h3 class="text-xl font-bold text-red-700 mb-1 chinese-font">Li Jing</h3>
300
+ <p class="text-yellow-600 font-semibold mb-3">Lead Drummer</p>
301
+ <p class="text-gray-600">The heartbeat of our performances, Li's rhythmic mastery drives the lion's movements.</p>
302
+ <div class="flex mt-4 space-x-3">
303
+ <a href="#" class="text-red-600 hover:text-red-800"><i class="fab fa-facebook-f"></i></a>
304
+ <a href="#" class="text-red-600 hover:text-red-800"><i class="fab fa-instagram"></i></a>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Team Member 3 -->
310
+ <div class="bg-white rounded-lg overflow-hidden shadow-md team-card transition duration-300">
311
+ <img src="https://i.imgur.com/8nLyxjy.jpg" alt="Team Member" class="w-full h-64 object-cover">
312
+ <div class="p-6">
313
+ <h3 class="text-xl font-bold text-red-700 mb-1 chinese-font">Chen Yang</h3>
314
+ <p class="text-yellow-600 font-semibold mb-3">Acrobatics Specialist</p>
315
+ <p class="text-gray-600">Chen's gymnastic background brings incredible athleticism to our performances.</p>
316
+ <div class="flex mt-4 space-x-3">
317
+ <a href="#" class="text-red-600 hover:text-red-800"><i class="fab fa-instagram"></i></a>
318
+ <a href="#" class="text-red-600 hover:text-red-800"><i class="fab fa-youtube"></i></a>
319
+ </div>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Team Member 4 -->
324
+ <div class="bg-white rounded-lg overflow-hidden shadow-md team-card transition duration-300">
325
+ <img src="https://i.imgur.com/vYp4X1T.jpg" alt="Team Member" class="w-full h-64 object-cover">
326
+ <div class="p-6">
327
+ <h3 class="text-xl font-bold text-red-700 mb-1 chinese-font">Wang Mei</h3>
328
+ <p class="text-yellow-600 font-semibold mb-3">Costume Designer</p>
329
+ <p class="text-gray-600">Wang keeps our lions looking vibrant and authentic with her meticulous craftsmanship.</p>
330
+ <div class="flex mt-4 space-x-3">
331
+ <a href="#" class="text-red-600 hover:text-red-800"><i class="fab fa-pinterest-p"></i></a>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <div class="text-center mt-16">
338
+ <a href="#contact" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
339
+ Join Our Team
340
+ </a>
341
+ </div>
342
+ </div>
343
+ <div class="section-divider-bottom"></div>
344
+ </section>
345
+
346
+ <!-- Inventory Section -->
347
+ <section id="inventory" class="py-20 bg-white">
348
+ <div class="section-divider"></div>
349
+ <div class="container mx-auto px-6">
350
+ <div class="text-center mb-16">
351
+ <h2 class="chinese-font text-4xl font-bold text-red-700 mb-4">Our Inventory</h2>
352
+ <div class="w-20 h-1 bg-yellow-500 mx-auto mb-6"></div>
353
+ <p class="text-gray-700 max-w-3xl mx-auto">We maintain a complete collection of authentic lion dance equipment, all meticulously cared for and regularly updated.</p>
354
+ </div>
355
+
356
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
357
+ <!-- Inventory Item 1 -->
358
+ <div class="inventory-item relative overflow-hidden rounded-lg shadow-lg">
359
+ <img src="https://i.imgur.com/KjQ3BQx.jpg" alt="Lion Heads" class="w-full h-64 object-cover">
360
+ <div class="inventory-overlay absolute inset-0 bg-red-700 bg-opacity-80 flex items-center justify-center opacity-0 transition duration-300">
361
+ <div class="text-center text-white p-6">
362
+ <h3 class="text-xl font-bold mb-2 chinese-font">Lion Heads</h3>
363
+ <p>Traditional handcrafted lion heads in various styles and colors, each with unique characteristics.</p>
364
+ <p class="mt-2 text-yellow-300">8 available</p>
365
+ </div>
366
+ </div>
367
+ </div>
368
+
369
+ <!-- Inventory Item 2 -->
370
+ <div class="inventory-item relative overflow-hidden rounded-lg shadow-lg">
371
+ <img src="https://i.imgur.com/5QzG9tF.jpg" alt="Costumes" class="w-full h-64 object-cover">
372
+ <div class="inventory-overlay absolute inset-0 bg-red-700 bg-opacity-80 flex items-center justify-center opacity-0 transition duration-300">
373
+ <div class="text-center text-white p-6">
374
+ <h3 class="text-xl font-bold mb-2 chinese-font">Costumes</h3>
375
+ <p>Vibrant, durable costumes made with traditional fabrics and modern reinforcements.</p>
376
+ <p class="mt-2 text-yellow-300">12 complete sets</p>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Inventory Item 3 -->
382
+ <div class="inventory-item relative overflow-hidden rounded-lg shadow-lg">
383
+ <img src="https://i.imgur.com/9tLdRjw.jpg" alt="Musical Instruments" class="w-full h-64 object-cover">
384
+ <div class="inventory-overlay absolute inset-0 bg-red-700 bg-opacity-80 flex items-center justify-center opacity-0 transition duration-300">
385
+ <div class="text-center text-white p-6">
386
+ <h3 class="text-xl font-bold mb-2 chinese-font">Musical Instruments</h3>
387
+ <p>Traditional drums, gongs, and cymbals specially tuned for lion dance performances.</p>
388
+ <p class="mt-2 text-yellow-300">5 complete sets</p>
389
+ </div>
390
+ </div>
391
+ </div>
392
+
393
+ <!-- Inventory Item 4 -->
394
+ <div class="inventory-item relative overflow-hidden rounded-lg shadow-lg">
395
+ <img src="https://i.imgur.com/mTn3P0k.jpg" alt="Props" class="w-full h-64 object-cover">
396
+ <div class="inventory-overlay absolute inset-0 bg-red-700 bg-opacity-80 flex items-center justify-center opacity-0 transition duration-300">
397
+ <div class="text-center text-white p-6">
398
+ <h3 class="text-xl font-bold mb-2 chinese-font">Performance Props</h3>
399
+ <p>Stilts, poles, and platforms for advanced performances and competitions.</p>
400
+ <p class="mt-2 text-yellow-300">Various sizes available</p>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- Inventory Item 5 -->
406
+ <div class="inventory-item relative overflow-hidden rounded-lg shadow-lg">
407
+ <img src="https://i.imgur.com/JvPq5Yk.jpg" alt="Training Equipment" class="w-full h-64 object-cover">
408
+ <div class="inventory-overlay absolute inset-0 bg-red-700 bg-opacity-80 flex items-center justify-center opacity-0 transition duration-300">
409
+ <div class="text-center text-white p-6">
410
+ <h3 class="text-xl font-bold mb-2 chinese-font">Training Equipment</h3>
411
+ <p>Practice heads, mats, and training aids for new members to learn safely.</p>
412
+ <p class="mt-2 text-yellow-300">6 training sets</p>
413
+ </div>
414
+ </div>
415
+ </div>
416
+
417
+ <!-- Inventory Item 6 -->
418
+ <div class="inventory-item relative overflow-hidden rounded-lg shadow-lg">
419
+ <img src="https://i.imgur.com/vYp4X1T.jpg" alt="Maintenance" class="w-full h-64 object-cover">
420
+ <div class="inventory-overlay absolute inset-0 bg-red-700 bg-opacity-80 flex items-center justify-center opacity-0 transition duration-300">
421
+ <div class="text-center text-white p-6">
422
+ <h3 class="text-xl font-bold mb-2 chinese-font">Maintenance Supplies</h3>
423
+ <p>Specialized tools and materials for repairing and maintaining all equipment.</p>
424
+ <p class="mt-2 text-yellow-300">Complete workshop</p>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="text-center mt-16">
431
+ <a href="#contact" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
432
+ Equipment Rental
433
+ </a>
434
+ </div>
435
+ </div>
436
+ </section>
437
+
438
+ <!-- Contact Section -->
439
+ <section id="contact" class="py-20 bg-red-600 text-white">
440
+ <div class="section-divider"></div>
441
+ <div class="container mx-auto px-6">
442
+ <div class="text-center mb-16">
443
+ <h2 class="chinese-font text-4xl font-bold mb-4">Contact Us</h2>
444
+ <div class="w-20 h-1 bg-yellow-500 mx-auto mb-6"></div>
445
+ <p class="max-w-3xl mx-auto">Book a performance for your next event or inquire about joining our troupe.</p>
446
+ </div>
447
+
448
+ <div class="flex flex-col md:flex-row">
449
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
450
+ <h3 class="text-2xl font-bold mb-6 chinese-font">Get In Touch</h3>
451
+
452
+ <div class="mb-8">
453
+ <div class="flex items-start mb-6">
454
+ <i class="fas fa-map-marker-alt text-yellow-400 mt-1 mr-4 text-xl"></i>
455
+ <div>
456
+ <h4 class="font-bold">Address</h4>
457
+ <p>123 Prosperity Street<br>Chinatown District<br>Hong Kong</p>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="flex items-start mb-6">
462
+ <i class="fas fa-phone-alt text-yellow-400 mt-1 mr-4 text-xl"></i>
463
+ <div>
464
+ <h4 class="font-bold">Phone</h4>
465
+ <p>+852 1234 5678</p>
466
+ </div>
467
+ </div>
468
+
469
+ <div class="flex items-start">
470
+ <i class="fas fa-envelope text-yellow-400 mt-1 mr-4 text-xl"></i>
471
+ <div>
472
+ <h4 class="font-bold">Email</h4>
473
+ <p>info@thdliondance.com</p>
474
+ </div>
475
+ </div>
476
+ </div>
477
+
478
+ <h3 class="text-2xl font-bold mb-4 chinese-font">Follow Us</h3>
479
+ <div class="flex space-x-4">
480
+ <a href="#" class="bg-white text-red-600 hover:bg-yellow-400 hover:text-red-800 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
481
+ <i class="fab fa-facebook-f"></i>
482
+ </a>
483
+ <a href="#" class="bg-white text-red-600 hover:bg-yellow-400 hover:text-red-800 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
484
+ <i class="fab fa-instagram"></i>
485
+ </a>
486
+ <a href="#" class="bg-white text-red-600 hover:bg-yellow-400 hover:text-red-800 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
487
+ <i class="fab fa-youtube"></i>
488
+ </a>
489
+ <a href="#" class="bg-white text-red-600 hover:bg-yellow-400 hover:text-red-800 w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
490
+ <i class="fab fa-tiktok"></i>
491
+ </a>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="md:w-1/2">
496
+ <form class="bg-white text-gray-800 p-8 rounded-lg shadow-lg">
497
+ <div class="mb-6">
498
+ <label for="name" class="block text-gray-700 font-bold mb-2">Name</label>
499
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
500
+ </div>
501
+
502
+ <div class="mb-6">
503
+ <label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
504
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
505
+ </div>
506
+
507
+ <div class="mb-6">
508
+ <label for="phone" class="block text-gray-700 font-bold mb-2">Phone</label>
509
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
510
+ </div>
511
+
512
+ <div class="mb-6">
513
+ <label for="event" class="block text-gray-700 font-bold mb-2">Event Type</label>
514
+ <select id="event" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
515
+ <option value="">Select event type</option>
516
+ <option value="new-year">Chinese New Year</option>
517
+ <option value="wedding">Wedding</option>
518
+ <option value="business">Business Opening</option>
519
+ <option value="festival">Cultural Festival</option>
520
+ <option value="other">Other</option>
521
+ </select>
522
+ </div>
523
+
524
+ <div class="mb-6">
525
+ <label for="message" class="block text-gray-700 font-bold mb-2">Message</label>
526
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"></textarea>
527
+ </div>
528
+
529
+ <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
530
+ Send Message
531
+ </button>
532
+ </form>
533
+ </div>
534
+ </div>
535
+ </div>
536
+ <div class="section-divider-bottom"></div>
537
+ </section>
538
+
539
+ <!-- Footer -->
540
+ <footer class="bg-red-900 text-white py-12">
541
+ <div class="container mx-auto px-6">
542
+ <div class="flex flex-col md:flex-row justify-between">
543
+ <div class="mb-8 md:mb-0">
544
+ <div class="flex items-center mb-4">
545
+ <i class="fas fa-dragon text-2xl mr-2 text-yellow-400"></i>
546
+ <span class="chinese-font text-xl font-semibold">THD Lion Dance</span>
547
+ </div>
548
+ <p class="max-w-xs">Preserving the ancient art of lion dance for modern celebrations.</p>
549
+ </div>
550
+
551
+ <div class="mb-8 md:mb-0">
552
+ <h3 class="text-lg font-bold mb-4 chinese-font">Quick Links</h3>
553
+ <ul class="space-y-2">
554
+ <li><a href="#home" class="hover:text-yellow-400 transition duration-300">Home</a></li>
555
+ <li><a href="#about" class="hover:text-yellow-400 transition duration-300">Overview</a></li>
556
+ <li><a href="#team" class="hover:text-yellow-400 transition duration-300">Team</a></li>
557
+ <li><a href="#inventory" class="hover:text-yellow-400 transition duration-300">Inventory</a></li>
558
+ <li><a href="#contact" class="hover:text-yellow-400 transition duration-300">Contact</a></li>
559
+ </ul>
560
+ </div>
561
+
562
+ <div class="mb-8 md:mb-0">
563
+ <h3 class="text-lg font-bold mb-4 chinese-font">Performance Types</h3>
564
+ <ul class="space-y-2">
565
+ <li>Chinese New Year</li>
566
+ <li>Business Openings</li>
567
+ <li>Weddings</li>
568
+ <li>Cultural Festivals</li>
569
+ <li>Private Events</li>
570
+ </ul>
571
+ </div>
572
+
573
+ <div>
574
+ <h3 class="text-lg font-bold mb-4 chinese-font">Newsletter</h3>
575
+ <p class="mb-4">Subscribe for performance schedules and cultural insights.</p>
576
+ <div class="flex">
577
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg text-gray-800 w-full">
578
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-red-900 font-bold px-4 py-2 rounded-r-lg transition duration-300">
579
+ <i class="fas fa-paper-plane"></i>
580
+ </button>
581
+ </div>
582
+ </div>
583
+ </div>
584
+
585
+ <div class="border-t border-red-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
586
+ <p>&copy; 2023 THD Lion Dance. All rights reserved.</p>
587
+ <div class="flex space-x-6 mt-4 md:mt-0">
588
+ <a href="#" class="hover:text-yellow-400 transition duration-300">Privacy Policy</a>
589
+ <a href="#" class="hover:text-yellow-400 transition duration-300">Terms of Service</a>
590
+ </div>
591
+ </div>
592
+ </div>
593
+ </footer>
594
+
595
+ <script>
596
+ // Mobile menu toggle
597
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
598
+ const mobileMenu = document.querySelector('.mobile-menu');
599
+
600
+ mobileMenuButton.addEventListener('click', () => {
601
+ mobileMenu.classList.toggle('hidden');
602
+ });
603
+
604
+ // Smooth scrolling for navigation links
605
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
606
+ anchor.addEventListener('click', function (e) {
607
+ e.preventDefault();
608
+
609
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
610
+ behavior: 'smooth'
611
+ });
612
+
613
+ // Close mobile menu if open
614
+ mobileMenu.classList.add('hidden');
615
+ });
616
+ });
617
+
618
+ // Form submission
619
+ const contactForm = document.querySelector('form');
620
+ if (contactForm) {
621
+ contactForm.addEventListener('submit', function(e) {
622
+ e.preventDefault();
623
+ alert('Thank you for your message! We will contact you soon.');
624
+ this.reset();
625
+ });
626
+ }
627
+
628
+ // Add animation to inventory items on scroll
629
+ const observerOptions = {
630
+ threshold: 0.1
631
+ };
632
+
633
+ const observer = new IntersectionObserver((entries) => {
634
+ entries.forEach(entry => {
635
+ if (entry.isIntersecting) {
636
+ entry.target.classList.add('animate-fadeIn');
637
+ }
638
+ });
639
+ }, observerOptions);
640
+
641
+ document.querySelectorAll('.inventory-item').forEach(item => {
642
+ observer.observe(item);
643
+ });
644
+ </script>
645
+ <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=vu-daryl/thd-lion-dance" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
646
+ </html>