Hugging Face's logo

Spaces:
fwvldz36
/
pod-website
Running

App Files Community
fwvldz36 commited on
Commit
411f58e
·
verified ·
1 Parent(s): 1fefcf7

can you build me clothing and items with a viral website theme - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +475 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pod Website
3
- emoji: 🏢
4
- colorFrom: yellow
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: pod-website
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,476 @@
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>ViralThreads | Trendy Clothing & Items</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
16
+ body {
17
+ font-family: 'Montserrat', sans-serif;
18
+ background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
19
+ color: #fff;
20
+ }
21
+ .gradient-text {
22
+ background: linear-gradient(90deg, #ff8a00, #e52e71, #00c3ff);
23
+ -webkit-background-clip: text;
24
+ -webkit-text-fill-color: transparent;
25
+ background-clip: text;
26
+ }
27
+ .product-card:hover {
28
+ transform: translateY(-10px);
29
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
30
+ }
31
+ .trending-badge {
32
+ background: linear-gradient(45deg, #ff416c, #ff4b2b);
33
+ }
34
+ .hero-bg {
35
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://static.photos/black/1200x630/1');
36
+ background-size: cover;
37
+ background-position: center;
38
+ }
39
+ .category-card {
40
+ transition: all 0.3s ease;
41
+ }
42
+ .category-card:hover {
43
+ transform: scale(1.05);
44
+ }
45
+ .floating {
46
+ animation: floating 3s ease-in-out infinite;
47
+ }
48
+ @keyframes floating {
49
+ 0% { transform: translateY(0px); }
50
+ 50% { transform: translateY(-15px); }
51
+ 100% { transform: translateY(0px); }
52
+ }
53
+ </style>
54
+ </head>
55
+ <body>
56
+ <!-- Navigation -->
57
+ <nav class="bg-black bg-opacity-70 backdrop-blur-md fixed w-full z-50">
58
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
59
+ <div class="flex items-center justify-between h-16">
60
+ <div class="flex items-center">
61
+ <div class="flex-shrink-0 flex items-center">
62
+ <i data-feather="zap" class="text-pink-500 mr-2"></i>
63
+ <span class="font-bold text-xl gradient-text">ViralThreads</span>
64
+ </div>
65
+ <div class="hidden md:block">
66
+ <div class="ml-10 flex items-baseline space-x-4">
67
+ <a href="#" class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
68
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Shop</a>
69
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Categories</a>
70
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">New Arrivals</a>
71
+ <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Deals</a>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ <div class="hidden md:block">
76
+ <div class="ml-4 flex items-center md:ml-6">
77
+ <button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
78
+ <i data-feather="search" class="h-5 w-5"></i>
79
+ </button>
80
+ <button class="ml-3 bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
81
+ <i data-feather="heart" class="h-5 w-5"></i>
82
+ </button>
83
+ <button class="ml-3 bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none relative">
84
+ <i data-feather="shopping-cart" class="h-5 w-5"></i>
85
+ <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-pink-500 rounded-full">3</span>
86
+ </button>
87
+ </div>
88
+ </div>
89
+ <div class="-mr-2 flex md:hidden">
90
+ <button class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
91
+ <i data-feather="menu" class="h-6 w-6"></i>
92
+ </button>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </nav>
97
+
98
+ <!-- Hero Section -->
99
+ <div class="hero-bg h-screen flex items-center">
100
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
101
+ <div class="text-center">
102
+ <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight">
103
+ <span class="block">TRENDSETTER</span>
104
+ <span class="block gradient-text mt-2">CLOTHING & ACCESSORIES</span>
105
+ </h1>
106
+ <p class="mt-6 max-w-lg mx-auto text-xl text-gray-300">Discover the latest viral fashion trends that everyone is talking about. Stand out from the crowd with our exclusive collection.</p>
107
+ <div class="mt-10 flex justify-center">
108
+ <div class="rounded-md shadow">
109
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-black bg-gradient-to-r from-yellow-400 to-pink-500 hover:from-yellow-500 hover:to-pink-600 md:py-4 md:text-lg md:px-10">
110
+ Shop Now
111
+ </a>
112
+ </div>
113
+ <div class="ml-3 rounded-md shadow">
114
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-800 hover:bg-gray-700 md:py-4 md:text-lg md:px-10">
115
+ View Collection
116
+ </a>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Trending Products -->
124
+ <div class="py-12 bg-gray-900">
125
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
126
+ <div class="text-center">
127
+ <h2 class="text-base text-pink-500 font-semibold tracking-wide uppercase">Trending Now</h2>
128
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
129
+ Viral Collection
130
+ </p>
131
+ <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto">
132
+ The most sought-after items that are taking social media by storm
133
+ </p>
134
+ </div>
135
+
136
+ <div class="mt-10">
137
+ <div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
138
+ <!-- Product 1 -->
139
+ <div class="group product-card bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300" data-aos="fade-up">
140
+ <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-t-xl overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
141
+ <img src="http://static.photos/red/640x360/1" alt="Red Hoodie" class="w-full h-64 object-cover object-center group-hover:opacity-90">
142
+ </div>
143
+ <div class="p-6">
144
+ <div class="flex justify-between items-start">
145
+ <div>
146
+ <h3 class="text-lg font-bold text-white">Viral Hoodie</h3>
147
+ <p class="mt-1 text-sm text-gray-400">Premium Cotton</p>
148
+ </div>
149
+ <span class="trending-badge text-white text-xs font-bold px-2 py-1 rounded-full">TRENDING</span>
150
+ </div>
151
+ <div class="mt-4 flex items-center justify-between">
152
+ <p class="text-xl font-bold text-white">$59.99</p>
153
+ <div class="flex items-center">
154
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
155
+ <span class="ml-1 text-gray-300">4.8</span>
156
+ </div>
157
+ </div>
158
+ <button class="mt-4 w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white py-2 px-4 rounded-lg transition duration-300">
159
+ Add to Cart
160
+ </button>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Product 2 -->
165
+ <div class="group product-card bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
166
+ <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-t-xl overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
167
+ <img src="http://static.photos/black/640x360/2" alt="Black T-Shirt" class="w-full h-64 object-cover object-center group-hover:opacity-90">
168
+ </div>
169
+ <div class="p-6">
170
+ <div class="flex justify-between items-start">
171
+ <div>
172
+ <h3 class="text-lg font-bold text-white">Graphic Tee</h3>
173
+ <p class="mt-1 text-sm text-gray-400">Limited Edition</p>
174
+ </div>
175
+ <span class="trending-badge text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span>
176
+ </div>
177
+ <div class="mt-4 flex items-center justify-between">
178
+ <p class="text-xl font-bold text-white">$34.99</p>
179
+ <div class="flex items-center">
180
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
181
+ <span class="ml-1 text-gray-300">4.9</span>
182
+ </div>
183
+ </div>
184
+ <button class="mt-4 w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white py-2 px-4 rounded-lg transition duration-300">
185
+ Add to Cart
186
+ </button>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Product 3 -->
191
+ <div class="group product-card bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
192
+ <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-t-xl overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
193
+ <img src="http://static.photos/blue/640x360/3" alt="Blue Jacket" class="w-full h-64 object-cover object-center group-hover:opacity-90">
194
+ </div>
195
+ <div class="p-6">
196
+ <div class="flex justify-between items-start">
197
+ <div>
198
+ <h3 class="text-lg font-bold text-white">Denim Jacket</h3>
199
+ <p class="mt-1 text-sm text-gray-400">Classic Style</p>
200
+ </div>
201
+ <span class="trending-badge text-white text-xs font-bold px-2 py-1 rounded-full">BEST SELLER</span>
202
+ </div>
203
+ <div class="mt-4 flex items-center justify-between">
204
+ <p class="text-xl font-bold text-white">$79.99</p>
205
+ <div class="flex items-center">
206
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
207
+ <span class="ml-1 text-gray-300">4.7</span>
208
+ </div>
209
+ </div>
210
+ <button class="mt-4 w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white py-2 px-4 rounded-lg transition duration-300">
211
+ Add to Cart
212
+ </button>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Product 4 -->
217
+ <div class="group product-card bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
218
+ <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-t-xl overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
219
+ <img src="http://static.photos/yellow/640x360/4" alt="Yellow Sweater" class="w-full h-64 object-cover object-center group-hover:opacity-90">
220
+ </div>
221
+ <div class="p-6">
222
+ <div class="flex justify-between items-start">
223
+ <div>
224
+ <h3 class="text-lg font-bold text-white">Oversized Sweater</h3>
225
+ <p class="mt-1 text-sm text-gray-400">Cozy Fit</p>
226
+ </div>
227
+ <span class="trending-badge text-white text-xs font-bold px-2 py-1 rounded-full">HOT</span>
228
+ </div>
229
+ <div class="mt-4 flex items-center justify-between">
230
+ <p class="text-xl font-bold text-white">$49.99</p>
231
+ <div class="flex items-center">
232
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
233
+ <span class="ml-1 text-gray-300">4.6</span>
234
+ </div>
235
+ </div>
236
+ <button class="mt-4 w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white py-2 px-4 rounded-lg transition duration-300">
237
+ Add to Cart
238
+ </button>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Categories Section -->
247
+ <div class="py-12 bg-black">
248
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
249
+ <div class="text-center">
250
+ <h2 class="text-base text-pink-500 font-semibold tracking-wide uppercase">Shop by Category</h2>
251
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
252
+ Explore Our Collections
253
+ </p>
254
+ </div>
255
+
256
+ <div class="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
257
+ <!-- Category 1 -->
258
+ <div class="category-card bg-gradient-to-br from-purple-900 to-pink-700 rounded-xl p-6 text-center shadow-xl" data-aos="zoom-in">
259
+ <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-white bg-opacity-20">
260
+ <i data-feather="t-shirt" class="h-8 w-8 text-white"></i>
261
+ </div>
262
+ <h3 class="mt-4 text-lg font-bold text-white">T-Shirts</h3>
263
+ <p class="mt-1 text-sm text-gray-300">24 items</p>
264
+ </div>
265
+
266
+ <!-- Category 2 -->
267
+ <div class="category-card bg-gradient-to-br from-blue-900 to-cyan-700 rounded-xl p-6 text-center shadow-xl" data-aos="zoom-in" data-aos-delay="100">
268
+ <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-white bg-opacity-20">
269
+ <i data-feather="shirt" class="h-8 w-8 text-white"></i>
270
+ </div>
271
+ <h3 class="mt-4 text-lg font-bold text-white">Shirts</h3>
272
+ <p class="mt-1 text-sm text-gray-300">18 items</p>
273
+ </div>
274
+
275
+ <!-- Category 3 -->
276
+ <div class="category-card bg-gradient-to-br from-green-900 to-teal-700 rounded-xl p-6 text-center shadow-xl" data-aos="zoom-in" data-aos-delay="200">
277
+ <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-white bg-opacity-20">
278
+ <i data-feather="shopping-bag" class="h-8 w-8 text-white"></i>
279
+ </div>
280
+ <h3 class="mt-4 text-lg font-bold text-white">Accessories</h3>
281
+ <p class="mt-1 text-sm text-gray-300">32 items</p>
282
+ </div>
283
+
284
+ <!-- Category 4 -->
285
+ <div class="category-card bg-gradient-to-br from-yellow-900 to-orange-700 rounded-xl p-6 text-center shadow-xl" data-aos="zoom-in" data-aos-delay="300">
286
+ <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-white bg-opacity-20">
287
+ <i data-feather="briefcase" class="h-8 w-8 text-white"></i>
288
+ </div>
289
+ <h3 class="mt-4 text-lg font-bold text-white">Outerwear</h3>
290
+ <p class="mt-1 text-sm text-gray-300">15 items</p>
291
+ </div>
292
+
293
+ <!-- Category 5 -->
294
+ <div class="category-card bg-gradient-to-br from-red-900 to-pink-700 rounded-xl p-6 text-center shadow-xl" data-aos="zoom-in" data-aos-delay="400">
295
+ <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-white bg-opacity-20">
296
+ <i data-feather="droplet" class="h-8 w-8 text-white"></i>
297
+ </div>
298
+ <h3 class="mt-4 text-lg font-bold text-white">Activewear</h3>
299
+ <p class="mt-1 text-sm text-gray-300">27 items</p>
300
+ </div>
301
+
302
+ <!-- Category 6 -->
303
+ <div class="category-card bg-gradient-to-br from-indigo-900 to-purple-700 rounded-xl p-6 text-center shadow-xl" data-aos="zoom-in" data-aos-delay="500">
304
+ <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-white bg-opacity-20">
305
+ <i data-feather="gift" class="h-8 w-8 text-white"></i>
306
+ </div>
307
+ <h3 class="mt-4 text-lg font-bold text-white">Specials</h3>
308
+ <p class="mt-1 text-sm text-gray-300">9 items</p>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Testimonials -->
315
+ <div class="py-12 bg-gray-900">
316
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
317
+ <div class="text-center">
318
+ <h2 class="text-base text-pink-500 font-semibold tracking-wide uppercase">Testimonials</h2>
319
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
320
+ What Our Customers Say
321
+ </p>
322
+ </div>
323
+
324
+ <div class="mt-10">
325
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
326
+ <!-- Testimonial 1 -->
327
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg" data-aos="fade-right">
328
+ <div class="flex items-center">
329
+ <div class="flex-shrink-0">
330
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/320x240/1" alt="Customer">
331
+ </div>
332
+ <div class="ml-4">
333
+ <h4 class="text-lg font-bold text-white">Alex Johnson</h4>
334
+ <div class="flex items-center mt-1">
335
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
336
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
337
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
338
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
339
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ <p class="mt-4 text-gray-300">"The quality of these clothes is exceptional! I've received so many compliments on my viral hoodie. Worth every penny!"</p>
344
+ </div>
345
+
346
+ <!-- Testimonial 2 -->
347
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg" data-aos="fade-up">
348
+ <div class="flex items-center">
349
+ <div class="flex-shrink-0">
350
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/320x240/2" alt="Customer">
351
+ </div>
352
+ <div class="ml-4">
353
+ <h4 class="text-lg font-bold text-white">Sarah Williams</h4>
354
+ <div class="flex items-center mt-1">
355
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
356
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
357
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
358
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
359
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ <p class="mt-4 text-gray-300">"Fast shipping and the clothes look exactly like the photos. My new favorite online store for trendy fashion!"</p>
364
+ </div>
365
+
366
+ <!-- Testimonial 3 -->
367
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg" data-aos="fade-left">
368
+ <div class="flex items-center">
369
+ <div class="flex-shrink-0">
370
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/320x240/3" alt="Customer">
371
+ </div>
372
+ <div class="ml-4">
373
+ <h4 class="text-lg font-bold text-white">Michael Chen</h4>
374
+ <div class="flex items-center mt-1">
375
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
376
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
377
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
378
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
379
+ <i data-feather="star" class="text-yellow-400 fill-current"></i>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ <p class="mt-4 text-gray-300">"The oversized sweater is so comfortable and stylish. I've already recommended this brand to all my friends!"</p>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- CTA Section -->
391
+ <div class="bg-gradient-to-r from-purple-900 to-pink-800">
392
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
393
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
394
+ <span class="block">Ready to upgrade your wardrobe?</span>
395
+ <span class="block text-pink-300">Join thousands of satisfied customers today.</span>
396
+ </h2>
397
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
398
+ <div class="inline-flex rounded-md shadow">
399
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-900 bg-white hover:bg-pink-50">
400
+ Shop Now
401
+ </a>
402
+ </div>
403
+ <div class="ml-3 inline-flex rounded-md shadow">
404
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-pink-600 bg-opacity-60 hover:bg-opacity-70">
405
+ Learn more
406
+ </a>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+
412
+ <!-- Footer -->
413
+ <footer class="bg-black">
414
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
415
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
416
+ <div>
417
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Products</h3>
418
+ <ul class="mt-4 space-y-4">
419
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Clothing</a></li>
420
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Accessories</a></li>
421
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">New Arrivals</a></li>
422
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Best Sellers</a></li>
423
+ </ul>
424
+ </div>
425
+ <div>
426
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
427
+ <ul class="mt-4 space-y-4">
428
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
429
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
430
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li>
431
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
432
+ </ul>
433
+ </div>
434
+ <div>
435
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
436
+ <ul class="mt-4 space-y-4">
437
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
438
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
439
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Refunds</a></li>
440
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Shipping</a></li>
441
+ </ul>
442
+ </div>
443
+ <div>
444
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
445
+ <ul class="mt-4 space-y-4">
446
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Instagram</a></li>
447
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li>
448
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li>
449
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">TikTok</a></li>
450
+ </ul>
451
+ </div>
452
+ </div>
453
+ <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
454
+ <p class="text-base text-gray-400">&copy; 2023 ViralThreads. All rights reserved.</p>
455
+ <div class="mt-6 flex space-x-6 md:mt-0">
456
+ <a href="#" class="text-gray-400 hover:text-gray-300">
457
+ <i data-feather="facebook"></i>
458
+ </a>
459
+ <a href="#" class="text-gray-400 hover:text-gray-300">
460
+ <i data-feather="instagram"></i>
461
+ </a>
462
+ <a href="#" class="text-gray-400 hover:text-gray-300">
463
+ <i data-feather="twitter"></i>
464
+ </a>
465
+ <a href="#" class="text-gray-400 hover:text-gray-300">
466
+ <i data-feather="twitch"></i>
467
+ </a>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </footer>
472
+
473
+ <script>AOS.init();</script>
474
+ <script>feather.replace();</script>
475
+ </body>
476
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ can you build me clothing and items with a viral website theme