Hugging Face's logo

Spaces:
Jobwengi
/
myshop1
Running

App Files Community
Jobwengi commited on
Commit
34d86e1
·
verified ·
1 Parent(s): 5b40f1f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +682 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Myshop1
3
- emoji: 🔥
4
- colorFrom: indigo
5
  colorTo: gray
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: myshop1
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: gray
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,682 @@
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>New Life Fashion - Premium Ladies Clothing in Nairobi</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=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ }
15
+
16
+ .heading-font {
17
+ font-family: 'Playfair Display', serif;
18
+ }
19
+
20
+ .hero-image {
21
+ background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
22
+ background-size: cover;
23
+ background-position: center;
24
+ }
25
+
26
+ .product-card:hover .product-image {
27
+ transform: scale(1.05);
28
+ transition: transform 0.3s ease;
29
+ }
30
+
31
+ .product-image {
32
+ transition: transform 0.3s ease;
33
+ }
34
+
35
+ .testimonial-card {
36
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
37
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
38
+ }
39
+
40
+ .testimonial-card:hover {
41
+ transform: translateY(-5px);
42
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
43
+ }
44
+
45
+ .nav-link {
46
+ position: relative;
47
+ }
48
+
49
+ .nav-link:after {
50
+ content: '';
51
+ position: absolute;
52
+ width: 0;
53
+ height: 2px;
54
+ bottom: -2px;
55
+ left: 0;
56
+ background-color: #d1a054;
57
+ transition: width 0.3s ease;
58
+ }
59
+
60
+ .nav-link:hover:after {
61
+ width: 100%;
62
+ }
63
+
64
+ .mobile-menu {
65
+ max-height: 0;
66
+ overflow: hidden;
67
+ transition: max-height 0.3s ease-out;
68
+ }
69
+
70
+ .mobile-menu.open {
71
+ max-height: 500px;
72
+ }
73
+ </style>
74
+ </head>
75
+ <body class="bg-gray-50">
76
+ <!-- Top Bar -->
77
+ <div class="bg-black text-white text-sm py-2 px-4">
78
+ <div class="container mx-auto flex justify-between items-center">
79
+ <div class="flex space-x-4">
80
+ <span><i class="fas fa-phone-alt mr-1"></i> +254 712 345 678</span>
81
+ <span><i class="fas fa-envelope mr-1"></i> [email protected]</span>
82
+ </div>
83
+ <div class="flex space-x-4">
84
+ <a href="#" class="hover:text-amber-200"><i class="fab fa-facebook-f"></i></a>
85
+ <a href="#" class="hover:text-amber-200"><i class="fab fa-instagram"></i></a>
86
+ <a href="#" class="hover:text-amber-200"><i class="fab fa-twitter"></i></a>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Navigation -->
92
+ <nav class="bg-white shadow-md sticky top-0 z-50">
93
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
94
+ <!-- Logo -->
95
+ <div class="flex items-center">
96
+ <a href="#" class="flex items-center">
97
+ <i class="fas fa-tshirt text-3xl text-amber-600 mr-2"></i>
98
+ <span class="heading-font text-2xl font-bold">New Life Fashion</span>
99
+ </a>
100
+ </div>
101
+
102
+ <!-- Desktop Menu -->
103
+ <div class="hidden md:flex space-x-8">
104
+ <a href="#" class="nav-link font-medium">Home</a>
105
+ <a href="#shop" class="nav-link font-medium">Shop</a>
106
+ <a href="#collections" class="nav-link font-medium">Collections</a>
107
+ <a href="#about" class="nav-link font-medium">About</a>
108
+ <a href="#contact" class="nav-link font-medium">Contact</a>
109
+ </div>
110
+
111
+ <!-- Icons -->
112
+ <div class="hidden md:flex items-center space-x-6">
113
+ <a href="#" class="hover:text-amber-600"><i class="fas fa-search"></i></a>
114
+ <a href="#" class="hover:text-amber-600"><i class="far fa-user"></i></a>
115
+ <a href="#" class="hover:text-amber-600 relative">
116
+ <i class="fas fa-shopping-bag"></i>
117
+ <span class="absolute -top-2 -right-2 bg-amber-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
118
+ </a>
119
+ </div>
120
+
121
+ <!-- Mobile Menu Button -->
122
+ <button id="mobile-menu-button" class="md:hidden text-gray-800 focus:outline-none">
123
+ <i class="fas fa-bars text-2xl"></i>
124
+ </button>
125
+ </div>
126
+
127
+ <!-- Mobile Menu -->
128
+ <div id="mobile-menu" class="mobile-menu md:hidden bg-white">
129
+ <div class="px-4 py-3 space-y-4">
130
+ <a href="#" class="block py-2 hover:text-amber-600">Home</a>
131
+ <a href="#shop" class="block py-2 hover:text-amber-600">Shop</a>
132
+ <a href="#collections" class="block py-2 hover:text-amber-600">Collections</a>
133
+ <a href="#about" class="block py-2 hover:text-amber-600">About</a>
134
+ <a href="#contact" class="block py-2 hover:text-amber-600">Contact</a>
135
+ <div class="flex space-x-4 pt-2">
136
+ <a href="#" class="hover:text-amber-600"><i class="fas fa-search"></i></a>
137
+ <a href="#" class="hover:text-amber-600"><i class="far fa-user"></i></a>
138
+ <a href="#" class="hover:text-amber-600 relative">
139
+ <i class="fas fa-shopping-bag"></i>
140
+ <span class="absolute -top-2 -right-2 bg-amber-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
141
+ </a>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </nav>
146
+
147
+ <!-- Hero Section -->
148
+ <section class="hero-image text-white py-20 md:py-32">
149
+ <div class="container mx-auto px-4 text-center">
150
+ <h1 class="heading-font text-4xl md:text-6xl font-bold mb-4">Elevate Your Style</h1>
151
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Discover Kenya's finest collection of ladies fashion at New Life Fashion in Ruiru</p>
152
+ <a href="#shop" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-8 rounded-full inline-block transition duration-300">Shop Now</a>
153
+ </div>
154
+ </section>
155
+
156
+ <!-- Featured Categories -->
157
+ <section class="py-12 bg-white">
158
+ <div class="container mx-auto px-4">
159
+ <h2 class="heading-font text-3xl font-bold text-center mb-12">Shop By Category</h2>
160
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
161
+ <a href="#" class="group relative overflow-hidden rounded-lg shadow-md">
162
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Dresses" class="w-full h-48 md:h-64 object-cover group-hover:opacity-90 transition duration-300">
163
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
164
+ <h3 class="text-white text-xl font-bold">Dresses</h3>
165
+ </div>
166
+ </a>
167
+ <a href="#" class="group relative overflow-hidden rounded-lg shadow-md">
168
+ <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Tops" class="w-full h-48 md:h-64 object-cover group-hover:opacity-90 transition duration-300">
169
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
170
+ <h3 class="text-white text-xl font-bold">Tops</h3>
171
+ </div>
172
+ </a>
173
+ <a href="#" class="group relative overflow-hidden rounded-lg shadow-md">
174
+ <img src="https://images.unsplash.com/photo-1595341888016-a392ef81b7de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1479&q=80" alt="Skirts" class="w-full h-48 md:h-64 object-cover group-hover:opacity-90 transition duration-300">
175
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
176
+ <h3 class="text-white text-xl font-bold">Skirts</h3>
177
+ </div>
178
+ </a>
179
+ <a href="#" class="group relative overflow-hidden rounded-lg shadow-md">
180
+ <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" alt="Accessories" class="w-full h-48 md:h-64 object-cover group-hover:opacity-90 transition duration-300">
181
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
182
+ <h3 class="text-white text-xl font-bold">Accessories</h3>
183
+ </div>
184
+ </a>
185
+ </div>
186
+ </div>
187
+ </section>
188
+
189
+ <!-- Featured Products -->
190
+ <section id="shop" class="py-16 bg-gray-50">
191
+ <div class="container mx-auto px-4">
192
+ <div class="flex justify-between items-center mb-12">
193
+ <h2 class="heading-font text-3xl font-bold">Featured Products</h2>
194
+ <a href="#" class="text-amber-600 hover:text-amber-700 font-medium">View All <i class="fas fa-arrow-right ml-1"></i></a>
195
+ </div>
196
+
197
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
198
+ <!-- Product 1 -->
199
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
200
+ <div class="relative overflow-hidden">
201
+ <img src="https://images.unsplash.com/photo-1572804013309-59a88b7e92f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=746&q=80" alt="African Print Dress" class="product-image w-full h-64 object-cover">
202
+ <div class="absolute top-3 right-3">
203
+ <span class="bg-amber-600 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span>
204
+ </div>
205
+ </div>
206
+ <div class="p-4">
207
+ <h3 class="font-semibold text-lg mb-1">African Print Maxi Dress</h3>
208
+ <div class="flex items-center mb-2">
209
+ <div class="flex text-amber-400">
210
+ <i class="fas fa-star"></i>
211
+ <i class="fas fa-star"></i>
212
+ <i class="fas fa-star"></i>
213
+ <i class="fas fa-star"></i>
214
+ <i class="fas fa-star-half-alt"></i>
215
+ </div>
216
+ <span class="text-gray-600 text-sm ml-2">(24)</span>
217
+ </div>
218
+ <div class="flex justify-between items-center">
219
+ <span class="font-bold text-lg">KSh 2,499</span>
220
+ <button class="bg-amber-600 hover:bg-amber-700 text-white rounded-full w-10 h-10 flex items-center justify-center">
221
+ <i class="fas fa-shopping-cart"></i>
222
+ </button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Product 2 -->
228
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
229
+ <div class="relative overflow-hidden">
230
+ <img src="https://images.unsplash.com/photo-1585487000160-6ebcfceb0d03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Denim Jacket" class="product-image w-full h-64 object-cover">
231
+ </div>
232
+ <div class="p-4">
233
+ <h3 class="font-semibold text-lg mb-1">Classic Denim Jacket</h3>
234
+ <div class="flex items-center mb-2">
235
+ <div class="flex text-amber-400">
236
+ <i class="fas fa-star"></i>
237
+ <i class="fas fa-star"></i>
238
+ <i class="fas fa-star"></i>
239
+ <i class="fas fa-star"></i>
240
+ <i class="far fa-star"></i>
241
+ </div>
242
+ <span class="text-gray-600 text-sm ml-2">(18)</span>
243
+ </div>
244
+ <div class="flex justify-between items-center">
245
+ <span class="font-bold text-lg">KSh 1,899</span>
246
+ <button class="bg-amber-600 hover:bg-amber-700 text-white rounded-full w-10 h-10 flex items-center justify-center">
247
+ <i class="fas fa-shopping-cart"></i>
248
+ </button>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Product 3 -->
254
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
255
+ <div class="relative overflow-hidden">
256
+ <img src="https://images.unsplash.com/photo-1595341595379-cf2a3d574a3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Floral Skirt" class="product-image w-full h-64 object-cover">
257
+ <div class="absolute top-3 right-3">
258
+ <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">SALE</span>
259
+ </div>
260
+ </div>
261
+ <div class="p-4">
262
+ <h3 class="font-semibold text-lg mb-1">Floral Midi Skirt</h3>
263
+ <div class="flex items-center mb-2">
264
+ <div class="flex text-amber-400">
265
+ <i class="fas fa-star"></i>
266
+ <i class="fas fa-star"></i>
267
+ <i class="fas fa-star"></i>
268
+ <i class="fas fa-star"></i>
269
+ <i class="fas fa-star"></i>
270
+ </div>
271
+ <span class="text-gray-600 text-sm ml-2">(32)</span>
272
+ </div>
273
+ <div class="flex justify-between items-center">
274
+ <div>
275
+ <span class="font-bold text-lg text-amber-600">KSh 1,299</span>
276
+ <span class="text-gray-500 text-sm line-through ml-2">KSh 1,799</span>
277
+ </div>
278
+ <button class="bg-amber-600 hover:bg-amber-700 text-white rounded-full w-10 h-10 flex items-center justify-center">
279
+ <i class="fas fa-shopping-cart"></i>
280
+ </button>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Product 4 -->
286
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
287
+ <div class="relative overflow-hidden">
288
+ <img src="https://images.unsplash.com/photo-1520367445093-50dc08a59d9d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Elegant Blouse" class="product-image w-full h-64 object-cover">
289
+ </div>
290
+ <div class="p-4">
291
+ <h3 class="font-semibold text-lg mb-1">Elegant Silk Blouse</h3>
292
+ <div class="flex items-center mb-2">
293
+ <div class="flex text-amber-400">
294
+ <i class="fas fa-star"></i>
295
+ <i class="fas fa-star"></i>
296
+ <i class="fas fa-star"></i>
297
+ <i class="fas fa-star"></i>
298
+ <i class="fas fa-star-half-alt"></i>
299
+ </div>
300
+ <span class="text-gray-600 text-sm ml-2">(21)</span>
301
+ </div>
302
+ <div class="flex justify-between items-center">
303
+ <span class="font-bold text-lg">KSh 2,199</span>
304
+ <button class="bg-amber-600 hover:bg-amber-700 text-white rounded-full w-10 h-10 flex items-center justify-center">
305
+ <i class="fas fa-shopping-cart"></i>
306
+ </button>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </section>
313
+
314
+ <!-- Seasonal Collection -->
315
+ <section id="collections" class="py-16 bg-white">
316
+ <div class="container mx-auto px-4">
317
+ <h2 class="heading-font text-3xl font-bold text-center mb-12">Seasonal Collections</h2>
318
+
319
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
320
+ <div class="relative rounded-lg overflow-hidden shadow-lg h-96">
321
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Summer Collection" class="w-full h-full object-cover">
322
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent flex items-end p-8">
323
+ <div>
324
+ <h3 class="heading-font text-3xl font-bold text-white mb-2">Summer Vibes</h3>
325
+ <p class="text-white mb-4">Bright colors and lightweight fabrics for the sunny season</p>
326
+ <a href="#" class="bg-white hover:bg-gray-100 text-black font-medium py-2 px-6 rounded-full inline-block transition duration-300">Shop Collection</a>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ <div class="relative rounded-lg overflow-hidden shadow-lg h-96">
331
+ <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Winter Collection" class="w-full h-full object-cover">
332
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent flex items-end p-8">
333
+ <div>
334
+ <h3 class="heading-font text-3xl font-bold text-white mb-2">Winter Essentials</h3>
335
+ <p class="text-white mb-4">Cozy layers and warm fabrics to keep you stylish in the cold</p>
336
+ <a href="#" class="bg-white hover:bg-gray-100 text-black font-medium py-2 px-6 rounded-full inline-block transition duration-300">Shop Collection</a>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <div class="text-center">
343
+ <a href="#" class="border-2 border-black hover:bg-black hover:text-white font-bold py-3 px-8 rounded-full inline-block transition duration-300">View All Collections</a>
344
+ </div>
345
+ </div>
346
+ </section>
347
+
348
+ <!-- About Section -->
349
+ <section id="about" class="py-16 bg-gray-50">
350
+ <div class="container mx-auto px-4">
351
+ <div class="flex flex-col md:flex-row items-center">
352
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
353
+ <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="About New Life Fashion" class="rounded-lg shadow-lg w-full">
354
+ </div>
355
+ <div class="md:w-1/2">
356
+ <h2 class="heading-font text-3xl font-bold mb-6">Our Story</h2>
357
+ <p class="text-gray-700 mb-4">Founded in 2015, New Life Fashion has grown from a small boutique in Ruiru to one of Nairobi's most beloved destinations for women's fashion. Our journey began with a simple mission: to provide high-quality, stylish clothing at affordable prices.</p>
358
+ <p class="text-gray-700 mb-6">Today, we're proud to offer a carefully curated selection of clothing that combines international trends with African-inspired designs. Our team of fashion experts travels across the continent to source unique fabrics and designs that you won't find anywhere else.</p>
359
+ <div class="grid grid-cols-2 gap-4 mb-6">
360
+ <div class="flex items-center">
361
+ <div class="bg-amber-100 rounded-full p-3 mr-3">
362
+ <i class="fas fa-check-circle text-amber-600"></i>
363
+ </div>
364
+ <span class="font-medium">Quality Materials</span>
365
+ </div>
366
+ <div class="flex items-center">
367
+ <div class="bg-amber-100 rounded-full p-3 mr-3">
368
+ <i class="fas fa-check-circle text-amber-600"></i>
369
+ </div>
370
+ <span class="font-medium">Affordable Prices</span>
371
+ </div>
372
+ <div class="flex items-center">
373
+ <div class="bg-amber-100 rounded-full p-3 mr-3">
374
+ <i class="fas fa-check-circle text-amber-600"></i>
375
+ </div>
376
+ <span class="font-medium">Unique Designs</span>
377
+ </div>
378
+ <div class="flex items-center">
379
+ <div class="bg-amber-100 rounded-full p-3 mr-3">
380
+ <i class="fas fa-check-circle text-amber-600"></i>
381
+ </div>
382
+ <span class="font-medium">Ethical Sourcing</span>
383
+ </div>
384
+ </div>
385
+ <a href="#" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-8 rounded-full inline-block transition duration-300">Learn More</a>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </section>
390
+
391
+ <!-- Testimonials -->
392
+ <section class="py-16 bg-white">
393
+ <div class="container mx-auto px-4">
394
+ <h2 class="heading-font text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
395
+
396
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
397
+ <div class="testimonial-card bg-gray-50 rounded-lg p-6">
398
+ <div class="flex items-center mb-4">
399
+ <div class="flex text-amber-400 mr-2">
400
+ <i class="fas fa-star"></i>
401
+ <i class="fas fa-star"></i>
402
+ <i class="fas fa-star"></i>
403
+ <i class="fas fa-star"></i>
404
+ <i class="fas fa-star"></i>
405
+ </div>
406
+ <span class="text-gray-500 text-sm">2 weeks ago</span>
407
+ </div>
408
+ <p class="text-gray-700 mb-4">"The African print dress I bought is absolutely stunning! I've received so many compliments. The quality is excellent and the fit is perfect."</p>
409
+ <div class="flex items-center">
410
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Grace M." class="w-10 h-10 rounded-full mr-3">
411
+ <div>
412
+ <h4 class="font-bold">Grace M.</h4>
413
+ <p class="text-gray-500 text-sm">Nairobi</p>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="testimonial-card bg-gray-50 rounded-lg p-6">
419
+ <div class="flex items-center mb-4">
420
+ <div class="flex text-amber-400 mr-2">
421
+ <i class="fas fa-star"></i>
422
+ <i class="fas fa-star"></i>
423
+ <i class="fas fa-star"></i>
424
+ <i class="fas fa-star"></i>
425
+ <i class="fas fa-star-half-alt"></i>
426
+ </div>
427
+ <span class="text-gray-500 text-sm">1 month ago</span>
428
+ </div>
429
+ <p class="text-gray-700 mb-4">"I'm always impressed with the unique pieces at New Life Fashion. Their customer service is exceptional and they really understand style."</p>
430
+ <div class="flex items-center">
431
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah K." class="w-10 h-10 rounded-full mr-3">
432
+ <div>
433
+ <h4 class="font-bold">Sarah K.</h4>
434
+ <p class="text-gray-500 text-sm">Ruiru</p>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="testimonial-card bg-gray-50 rounded-lg p-6">
440
+ <div class="flex items-center mb-4">
441
+ <div class="flex text-amber-400 mr-2">
442
+ <i class="fas fa-star"></i>
443
+ <i class="fas fa-star"></i>
444
+ <i class="fas fa-star"></i>
445
+ <i class="fas fa-star"></i>
446
+ <i class="fas fa-star"></i>
447
+ </div>
448
+ <span class="text-gray-500 text-sm">3 days ago</span>
449
+ </div>
450
+ <p class="text-gray-700 mb-4">"The denim jacket I ordered fits perfectly and is such great quality. Delivery was fast and the packaging was beautiful. Will definitely shop here again!"</p>
451
+ <div class="flex items-center">
452
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Amina W." class="w-10 h-10 rounded-full mr-3">
453
+ <div>
454
+ <h4 class="font-bold">Amina W.</h4>
455
+ <p class="text-gray-500 text-sm">Thika</p>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </section>
462
+
463
+ <!-- Newsletter -->
464
+ <section class="py-16 bg-amber-600 text-white">
465
+ <div class="container mx-auto px-4 text-center">
466
+ <h2 class="heading-font text-3xl font-bold mb-4">Join Our Newsletter</h2>
467
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Subscribe to get updates on new arrivals, special offers and fashion tips</p>
468
+ <form class="max-w-md mx-auto flex">
469
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-900">
470
+ <button type="submit" class="bg-black hover:bg-gray-900 px-6 py-3 rounded-r-lg font-bold transition duration-300">Subscribe</button>
471
+ </form>
472
+ </div>
473
+ </section>
474
+
475
+ <!-- Contact Section -->
476
+ <section id="contact" class="py-16 bg-gray-50">
477
+ <div class="container mx-auto px-4">
478
+ <h2 class="heading-font text-3xl font-bold text-center mb-12">Visit Us</h2>
479
+
480
+ <div class="flex flex-col md:flex-row">
481
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
482
+ <div class="bg-white p-6 rounded-lg shadow-md h-full">
483
+ <h3 class="text-xl font-bold mb-4">Our Location</h3>
484
+ <div class="space-y-4">
485
+ <div class="flex items-start">
486
+ <i class="fas fa-map-marker-alt text-amber-600 mt-1 mr-3"></i>
487
+ <div>
488
+ <h4 class="font-bold">Address</h4>
489
+ <p class="text-gray-700">123 Fashion Street, Ruiru<br>Nairobi, Kenya</p>
490
+ </div>
491
+ </div>
492
+ <div class="flex items-start">
493
+ <i class="fas fa-phone-alt text-amber-600 mt-1 mr-3"></i>
494
+ <div>
495
+ <h4 class="font-bold">Phone</h4>
496
+ <p class="text-gray-700">+254 712 345 678</p>
497
+ </div>
498
+ </div>
499
+ <div class="flex items-start">
500
+ <i class="fas fa-envelope text-amber-600 mt-1 mr-3"></i>
501
+ <div>
502
+ <h4 class="font-bold">Email</h4>
503
+ <p class="text-gray-700">[email protected]</p>
504
+ </div>
505
+ </div>
506
+ <div class="flex items-start">
507
+ <i class="fas fa-clock text-amber-600 mt-1 mr-3"></i>
508
+ <div>
509
+ <h4 class="font-bold">Opening Hours</h4>
510
+ <p class="text-gray-700">Monday - Friday: 9:00 AM - 6:00 PM<br>Saturday: 9:00 AM - 4:00 PM<br>Sunday: Closed</p>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="md:w-1/2">
518
+ <div class="bg-white p-6 rounded-lg shadow-md h-full">
519
+ <h3 class="text-xl font-bold mb-4">Send Us a Message</h3>
520
+ <form>
521
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
522
+ <div>
523
+ <label for="name" class="block text-gray-700 mb-1">Name</label>
524
+ <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-amber-500">
525
+ </div>
526
+ <div>
527
+ <label for="email" class="block text-gray-700 mb-1">Email</label>
528
+ <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-amber-500">
529
+ </div>
530
+ </div>
531
+ <div class="mb-4">
532
+ <label for="subject" class="block text-gray-700 mb-1">Subject</label>
533
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500">
534
+ </div>
535
+ <div class="mb-4">
536
+ <label for="message" class="block text-gray-700 mb-1">Message</label>
537
+ <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-amber-500"></textarea>
538
+ </div>
539
+ <button type="submit" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300">Send Message</button>
540
+ </form>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </section>
546
+
547
+ <!-- Footer -->
548
+ <footer class="bg-black text-white py-12">
549
+ <div class="container mx-auto px-4">
550
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
551
+ <div>
552
+ <a href="#" class="flex items-center mb-4">
553
+ <i class="fas fa-tshirt text-3xl text-amber-600 mr-2"></i>
554
+ <span class="heading-font text-2xl font-bold">New Life Fashion</span>
555
+ </a>
556
+ <p class="text-gray-400">Your premier destination for stylish ladies fashion in Nairobi, Kenya.</p>
557
+ <div class="flex space-x-4 mt-4">
558
+ <a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-facebook-f"></i></a>
559
+ <a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-instagram"></i></a>
560
+ <a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-twitter"></i></a>
561
+ <a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-pinterest"></i></a>
562
+ </div>
563
+ </div>
564
+
565
+ <div>
566
+ <h3 class="text-lg font-bold mb-4">Quick Links</h3>
567
+ <ul class="space-y-2">
568
+ <li><a href="#" class="text-gray-400 hover:text-amber-400">Home</a></li>
569
+ <li><a href="#shop" class="text-gray-400 hover:text-amber-400">Shop</a></li>
570
+ <li><a href="#collections" class="text-gray-400 hover:text-amber-400">Collections</a></li>
571
+ <li><a href="#about" class="text-gray-400 hover:text-amber-400">About Us</a></li>
572
+ <li><a href="#contact" class="text-gray-400 hover:text-amber-400">Contact</a></li>
573
+ </ul>
574
+ </div>
575
+
576
+ <div>
577
+ <h3 class="text-lg font-bold mb-4">Customer Service</h3>
578
+ <ul class="space-y-2">
579
+ <li><a href="#" class="text-gray-400 hover:text-amber-400">My Account</a></li>
580
+ <li><a href="#" class="text-gray-400 hover:text-amber-400">Order Tracking</a></li>
581
+ <li><a href="#" class="text-gray-400 hover:text-amber-400">Wishlist</a></li>
582
+ <li><a href="#" class="text-gray-400 hover:text-amber-400">Shipping Policy</a></li>
583
+ <li><a href="#" class="text-gray-400 hover:text-amber-400">Returns & Exchanges</a></li>
584
+ </ul>
585
+ </div>
586
+
587
+ <div>
588
+ <h3 class="text-lg font-bold mb-4">Contact Info</h3>
589
+ <ul class="space-y-2">
590
+ <li class="flex items-start">
591
+ <i class="fas fa-map-marker-alt text-amber-400 mt-1 mr-3"></i>
592
+ <span class="text-gray-400">123 Fashion Street, Ruiru, Nairobi</span>
593
+ </li>
594
+ <li class="flex items-start">
595
+ <i class="fas fa-phone-alt text-amber-400 mt-1 mr-3"></i>
596
+ <span class="text-gray-400">+254 712 345 678</span>
597
+ </li>
598
+ <li class="flex items-start">
599
+ <i class="fas fa-envelope text-amber-400 mt-1 mr-3"></i>
600
+ <span class="text-gray-400">[email protected]</span>
601
+ </li>
602
+ </ul>
603
+ </div>
604
+ </div>
605
+
606
+ <div class="border-t border-gray-800 pt-8">
607
+ <div class="flex flex-col md:flex-row justify-between items-center">
608
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 New Life Fashion. All rights reserved.</p>
609
+ <div class="flex space-x-6">
610
+ <a href="#" class="text-gray-400 hover:text-amber-400">Privacy Policy</a>
611
+ <a href="#" class="text-gray-400 hover:text-amber-400">Terms of Service</a>
612
+ <a href="#" class="text-gray-400 hover:text-amber-400">Sitemap</a>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ </footer>
618
+
619
+ <!-- Back to Top Button -->
620
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-amber-600 text-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg hover:bg-amber-700 transition duration-300 hidden">
621
+ <i class="fas fa-arrow-up"></i>
622
+ </button>
623
+
624
+ <script>
625
+ // Mobile Menu Toggle
626
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
627
+ const mobileMenu = document.getElementById('mobile-menu');
628
+
629
+ mobileMenuButton.addEventListener('click', () => {
630
+ mobileMenu.classList.toggle('open');
631
+ const icon = mobileMenuButton.querySelector('i');
632
+ if (mobileMenu.classList.contains('open')) {
633
+ icon.classList.remove('fa-bars');
634
+ icon.classList.add('fa-times');
635
+ } else {
636
+ icon.classList.remove('fa-times');
637
+ icon.classList.add('fa-bars');
638
+ }
639
+ });
640
+
641
+ // Back to Top Button
642
+ const backToTopButton = document.getElementById('back-to-top');
643
+
644
+ window.addEventListener('scroll', () => {
645
+ if (window.pageYOffset > 300) {
646
+ backToTopButton.classList.remove('hidden');
647
+ } else {
648
+ backToTopButton.classList.add('hidden');
649
+ }
650
+ });
651
+
652
+ backToTopButton.addEventListener('click', () => {
653
+ window.scrollTo({ top: 0, behavior: 'smooth' });
654
+ });
655
+
656
+ // Smooth scrolling for anchor links
657
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
658
+ anchor.addEventListener('click', function(e) {
659
+ e.preventDefault();
660
+
661
+ const targetId = this.getAttribute('href');
662
+ if (targetId === '#') return;
663
+
664
+ const targetElement = document.querySelector(targetId);
665
+ if (targetElement) {
666
+ targetElement.scrollIntoView({
667
+ behavior: 'smooth'
668
+ });
669
+
670
+ // Close mobile menu if open
671
+ if (mobileMenu.classList.contains('open')) {
672
+ mobileMenu.classList.remove('open');
673
+ const icon = mobileMenuButton.querySelector('i');
674
+ icon.classList.remove('fa-times');
675
+ icon.classList.add('fa-bars');
676
+ }
677
+ }
678
+ });
679
+ });
680
+ </script>
681
+ <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=Jobwengi/myshop1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
682
+ </html>
prompts.txt ADDED
File without changes