Hugging Face's logo

Spaces:
Nonoms9
/
foot-store
Running

App Files Community
Nonoms9 commited on
Commit
101b644
·
verified ·
1 Parent(s): d691e35

the pictures shall be abt foot only - Initial Deployment

Browse files
Files changed (5) hide show
  1. README.md +7 -5
  2. index.html +361 -18
  3. product.html +335 -0
  4. prompts.txt +44 -0
  5. shop.html +407 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Foot Store
3
- emoji: 🌖
4
- colorFrom: purple
5
- colorTo: purple
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: foot-store
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
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,362 @@
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>FootStyle | Premium Football Apparel</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
+ <style>
14
+ .hero-gradient {
15
+ background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
16
+ }
17
+ .product-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .instagram-feed {
22
+ display: grid;
23
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
24
+ gap: 1rem;
25
+ }
26
+ </style>
27
+ </head>
28
+ <body class="font-sans antialiased">
29
+ <!-- Navigation -->
30
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
31
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
32
+ <div class="flex justify-between h-16">
33
+ <div class="flex items-center">
34
+ <a href="index.html" class="flex-shrink-0 flex items-center">
35
+ <span class="text-xl font-bold text-gray-900">FOOT<span class="text-blue-600">STYLE</span></span>
36
+ </a>
37
+ </div>
38
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
39
+ <a href="index.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-blue-500 text-sm font-medium">Home</a>
40
+ <a href="shop.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Shop</a>
41
+ <a href="about.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">About</a>
42
+ <a href="contact.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Contact</a>
43
+ </div>
44
+ <div class="flex items-center">
45
+ <button class="p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
46
+ <i data-feather="search"></i>
47
+ </button>
48
+ <button class="ml-4 p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
49
+ <i data-feather="user"></i>
50
+ </button>
51
+ <button class="ml-4 p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none relative">
52
+ <i data-feather="shopping-cart"></i>
53
+ <span class="absolute top-0 right-0 h-4 w-4 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center">3</span>
54
+ </button>
55
+ <button class="md:hidden ml-4 p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
56
+ <i data-feather="menu"></i>
57
+ </button>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ </nav>
62
+
63
+ <!-- Hero Section -->
64
+ <div class="hero-gradient text-white">
65
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
66
+ <div class="text-center">
67
+ <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
68
+ <span class="block">Football Style,</span>
69
+ <span class="block text-blue-600">Premium Quality</span>
70
+ </h1>
71
+ <p class="mt-3 max-w-md mx-auto text-base text-blue-100 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
72
+ Official-style football jerseys, training gear and accessories for players and fans
73
+ </p>
74
+ <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
75
+ <div class="rounded-md shadow">
76
+ <a href="shop.html" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
77
+ Shop Now
78
+ </a>
79
+ </div>
80
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
81
+ <a href="#new-arrivals" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
82
+ New Arrivals
83
+ </a>
84
+ </div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- New Arrivals -->
91
+ <div id="new-arrivals" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
92
+ <div class="text-center mb-12">
93
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
94
+ New Arrivals
95
+ </h2>
96
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
97
+ Fresh styles added this week
98
+ </p>
99
+ </div>
100
+ <div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4">
101
+ <!-- Product 1 -->
102
+ <div class="group relative product-card transition-all duration-300">
103
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
104
+ <img src="http://static.photos/sport/640x360/201" alt="Football Jersey" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
105
+ </div>
106
+ <div class="mt-4 flex justify-between">
107
+ <div>
108
+ <h3 class="text-sm text-gray-700">
109
+ <a href="product.html">
110
+ <span aria-hidden="true" class="absolute inset-0"></span>
111
+ Matchday Jersey 2024
112
+ </a>
113
+ </h3>
114
+ <p class="mt-1 text-sm text-gray-500">Black</p>
115
+ </div>
116
+ <p class="text-sm font-medium text-gray-900">$24.99</p>
117
+ </div>
118
+ </div>
119
+ <!-- Product 2 -->
120
+ <div class="group relative product-card transition-all duration-300">
121
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
122
+ <img src="http://static.photos/sport/640x360/202" alt="Football Shorts" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
123
+ </div>
124
+ <div class="mt-4 flex justify-between">
125
+ <div>
126
+ <h3 class="text-sm text-gray-700">
127
+ <a href="product.html">
128
+ <span aria-hidden="true" class="absolute inset-0"></span>
129
+ Training Shorts
130
+ </a>
131
+ </h3>
132
+ <p class="mt-1 text-sm text-gray-500">Navy Blue</p>
133
+ </div>
134
+ <p class="text-sm font-medium text-gray-900">$29.99</p>
135
+ </div>
136
+ </div>
137
+ <!-- Product 3 -->
138
+ <div class="group relative product-card transition-all duration-300">
139
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
140
+ <img src="http://static.photos/sport/640x360/203" alt="Football Jacket" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
141
+ </div>
142
+ <div class="mt-4 flex justify-between">
143
+ <div>
144
+ <h3 class="text-sm text-gray-700">
145
+ <a href="product.html">
146
+ <span aria-hidden="true" class="absolute inset-0"></span>
147
+ Stadium Jacket
148
+ </a>
149
+ </h3>
150
+ <p class="mt-1 text-sm text-gray-500">Gray</p>
151
+ </div>
152
+ <p class="text-sm font-medium text-gray-900">$39.99</p>
153
+ </div>
154
+ </div>
155
+ <!-- Product 4 -->
156
+ <div class="group relative product-card transition-all duration-300">
157
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
158
+ <img src="http://static.photos/sport/640x360/204" alt="Football Scarf" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
159
+ </div>
160
+ <div class="mt-4 flex justify-between">
161
+ <div>
162
+ <h3 class="text-sm text-gray-700">
163
+ <a href="product.html">
164
+ <span aria-hidden="true" class="absolute inset-0"></span>
165
+ Football Scarf
166
+ </a>
167
+ </h3>
168
+ <p class="mt-1 text-sm text-gray-500">Black/White</p>
169
+ </div>
170
+ <p class="text-sm font-medium text-gray-900">$19.99</p>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ <div class="mt-12 text-center">
175
+ <a href="shop.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
176
+ View All Products
177
+ <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
178
+ </a>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Featured Categories -->
183
+ <div class="bg-gray-50">
184
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
185
+ <div class="text-center mb-12">
186
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
187
+ Football Gear
188
+ </h2>
189
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
190
+ Everything for players and supporters
191
+ </p>
192
+ </div>
193
+ <div class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 lg:grid-cols-3 gap-x-6">
194
+ <a href="shop.html?category=t-shirts" class="group relative bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
195
+ <div class="aspect-w-3 aspect-h-2 bg-gray-200 group-hover:opacity-75">
196
+ <img src="http://static.photos/sport/640x360/205" alt="Football Jerseys" class="w-full h-full object-center object-cover">
197
+ </div>
198
+ <div class="p-6">
199
+ <h3 class="text-lg font-medium text-gray-900">
200
+ <span aria-hidden="true" class="absolute inset-0"></span>
201
+ Match Jerseys
202
+ </h3>
203
+ <p class="mt-2 text-sm text-gray-500">Shop now</p>
204
+ </div>
205
+ </a>
206
+ <a href="shop.html?category=shorts" class="group relative bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
207
+ <div class="aspect-w-3 aspect-h-2 bg-gray-200 group-hover:opacity-75">
208
+ <img src="http://static.photos/sport/640x360/206" alt="Football Shorts" class="w-full h-full object-center object-cover">
209
+ </div>
210
+ <div class="p-6">
211
+ <h3 class="text-lg font-medium text-gray-900">
212
+ <span aria-hidden="true" class="absolute inset-0"></span>
213
+ Training Wear
214
+ </h3>
215
+ <p class="mt-2 text-sm text-gray-500">Shop now</p>
216
+ </div>
217
+ </a>
218
+ <a href="shop.html?category=accessories" class="group relative bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300">
219
+ <div class="aspect-w-3 aspect-h-2 bg-gray-200 group-hover:opacity-75">
220
+ <img src="http://static.photos/sport/640x360/207" alt="Football Boots" class="w-full h-full object-center object-cover">
221
+ </div>
222
+ <div class="p-6">
223
+ <h3 class="text-lg font-medium text-gray-900">
224
+ <span aria-hidden="true" class="absolute inset-0"></span>
225
+ Football Boots
226
+ </h3>
227
+ <p class="mt-2 text-sm text-gray-500">Shop now</p>
228
+ </div>
229
+ </a>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Instagram Feed -->
235
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
236
+ <div class="text-center mb-12">
237
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
238
+ #FootStyle
239
+ </h2>
240
+ <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
241
+ Follow us for matchday outfits and football fashion
242
+ </p>
243
+ <a href="https://instagram.com" class="mt-4 inline-flex items-center text-blue-600 hover:text-blue-800">
244
+ @footstyle
245
+ <i data-feather="external-link" class="ml-2 w-4 h-4"></i>
246
+ </a>
247
+ </div>
248
+ <div class="instagram-feed">
249
+ <img src="http://static.photos/sport/320x240/208" alt="Football player wearing jersey" class="rounded-lg">
250
+ <img src="http://static.photos/sport/320x240/209" alt="Football boots closeup" class="rounded-lg">
251
+ <img src="http://static.photos/sport/320x240/210" alt="Football stadium merchandise" class="rounded-lg">
252
+ <img src="http://static.photos/sport/320x240/211" alt="Football training session" class="rounded-lg">
253
+ <img src="http://static.photos/sport/320x240/212" alt="Football fan with scarf" class="rounded-lg">
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Newsletter -->
258
+ <div class="bg-blue-600">
259
+ <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">
260
+ <div class="lg:w-0 lg:flex-1">
261
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
262
+ Sign up for our newsletter
263
+ </h2>
264
+ <p class="mt-3 max-w-3xl text-lg leading-6 text-blue-100">
265
+ Get exclusive offers, new product announcements, and style inspiration.
266
+ </p>
267
+ </div>
268
+ <div class="mt-8 lg:mt-0 lg:ml-8">
269
+ <form class="sm:flex">
270
+ <label for="email-address" class="sr-only">Email address</label>
271
+ <input id="email-address" name="email-address" type="email" autocomplete="email" required class="w-full px-5 py-3 border border-transparent placeholder-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white focus:border-white sm:max-w-xs rounded-md" placeholder="Enter your email">
272
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
273
+ <button type="submit" class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white">
274
+ Subscribe
275
+ </button>
276
+ </div>
277
+ </form>
278
+ <p class="mt-3 text-sm text-blue-100">
279
+ We care about your data. Read our <a href="#" class="text-white font-medium underline">Privacy Policy</a>.
280
+ </p>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Footer -->
286
+ <footer class="bg-gray-900">
287
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
288
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
289
+ <div>
290
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Shop</h3>
291
+ <ul class="mt-4 space-y-4">
292
+ <li><a href="shop.html?category=t-shirts" class="text-base text-gray-300 hover:text-white">T-Shirts</a></li>
293
+ <li><a href="shop.html?category=shorts" class="text-base text-gray-300 hover:text-white">Shorts</a></li>
294
+ <li><a href="shop.html?category=hoodies" class="text-base text-gray-300 hover:text-white">Hoodies</a></li>
295
+ <li><a href="shop.html?category=accessories" class="text-base text-gray-300 hover:text-white">Accessories</a></li>
296
+ </ul>
297
+ </div>
298
+ <div>
299
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
300
+ <ul class="mt-4 space-y-4">
301
+ <li><a href="about.html" class="text-base text-gray-300 hover:text-white">About Us</a></li>
302
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Sustainability</a></li>
303
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
304
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms & Conditions</a></li>
305
+ </ul>
306
+ </div>
307
+ <div>
308
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Customer Service</h3>
309
+ <ul class="mt-4 space-y-4">
310
+ <li><a href="contact.html" class="text-base text-gray-300 hover:text-white">Contact Us</a></li>
311
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Shipping Policy</a></li>
312
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Returns & Exchanges</a></li>
313
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">FAQs</a></li>
314
+ </ul>
315
+ </div>
316
+ <div>
317
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
318
+ <div class="mt-4 flex space-x-6">
319
+ <a href="#" class="text-gray-400 hover:text-white">
320
+ <i data-feather="facebook" class="h-6 w-6"></i>
321
+ </a>
322
+ <a href="#" class="text-gray-400 hover:text-white">
323
+ <i data-feather="instagram" class="h-6 w-6"></i>
324
+ </a>
325
+ <a href="#" class="text-gray-400 hover:text-white">
326
+ <i data-feather="twitter" class="h-6 w-6"></i>
327
+ </a>
328
+ <a href="#" class="text-gray-400 hover:text-white">
329
+ <i data-feather="youtube" class="h-6 w-6"></i>
330
+ </a>
331
+ </div>
332
+ <div class="mt-6">
333
+ <h4 class="text-sm font-medium text-gray-400">Payment Methods</h4>
334
+ <div class="mt-2 flex space-x-4">
335
+ <i data-feather="credit-card" class="h-6 w-6 text-gray-400"></i>
336
+ <i data-feather="dollar-sign" class="h-6 w-6 text-gray-400"></i>
337
+ <i data-feather="shopping-bag" class="h-6 w-6 text-gray-400"></i>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ <div class="mt-12 border-t border-gray-800 pt-8">
343
+ <p class="text-base text-gray-400 text-center">
344
+ &copy; 2023 FootStyle. All rights reserved.
345
+ </p>
346
+ </div>
347
+ </div>
348
+ </footer>
349
+
350
+ <script>
351
+ AOS.init();
352
+ feather.replace();
353
+
354
+ // Simple cart functionality
355
+ document.querySelectorAll('.product-card').forEach(card => {
356
+ card.addEventListener('click', function() {
357
+ window.location.href = 'product.html';
358
+ });
359
+ });
360
+ </script>
361
+ </body>
362
  </html>
product.html ADDED
@@ -0,0 +1,335 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Product | FootStyle</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
+ <style>
14
+ .product-thumbnail:hover {
15
+ border-color: #2563eb;
16
+ }
17
+ .product-thumbnail.active {
18
+ border-color: #2563eb;
19
+ }
20
+ .review-star {
21
+ color: #f59e0b;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="font-sans antialiased">
26
+ <!-- Navigation -->
27
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex justify-between h-16">
30
+ <div class="flex items-center">
31
+ <a href="index.html" class="flex-shrink-0 flex items-center">
32
+ <span class="text-xl font-bold text-gray-900">FOOT<span class="text-blue-600">STYLE</span></span>
33
+ </a>
34
+ </div>
35
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
36
+ <a href="index.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Home</a>
37
+ <a href="shop.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-blue-500 text-sm font-medium">Shop</a>
38
+ <a href="about.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">About</a>
39
+ <a href="contact.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Contact</a>
40
+ </div>
41
+ <div class="flex items-center">
42
+ <button class="p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
43
+ <i data-feather="search"></i>
44
+ </button>
45
+ <button class="ml-4 p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
46
+ <i data-feather="user"></i>
47
+ </button>
48
+ <button class="ml-4 p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none relative">
49
+ <i data-feather="shopping-cart"></i>
50
+ <span class="absolute top-0 right-0 h-4 w-4 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center">3</span>
51
+ </button>
52
+ <button class="md:hidden ml-4 p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
53
+ <i data-feather="menu"></i>
54
+ </button>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </nav>
59
+
60
+ <!-- Product Section -->
61
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 bg-blue-50 rounded-lg">
62
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
63
+ <!-- Product Images -->
64
+ <div class="mb-8 lg:mb-0">
65
+ <div class="mb-4 rounded-lg overflow-hidden">
66
+ <img id="main-image" src="http://static.photos/sport/1024x576/221" alt="Football Jersey" class="w-full h-auto object-cover object-center">
67
+ </div>
68
+ <div class="grid grid-cols-4 gap-2">
69
+ <button class="product-thumbnail border-2 border-transparent rounded-md overflow-hidden">
70
+ <img src="http://static.photos/sport/320x240/221" alt="Football Jersey - Front" class="w-full h-auto object-cover object-center" data-main="http://static.photos/sport/1024x576/221">
71
+ </button>
72
+ <button class="product-thumbnail border-2 border-transparent rounded-md overflow-hidden">
73
+ <img src="http://static.photos/sport/320x240/222" alt="Football Jersey - Back" class="w-full h-auto object-cover object-center" data-main="http://static.photos/sport/1024x576/222">
74
+ </button>
75
+ <button class="product-thumbnail border-2 border-transparent rounded-md overflow-hidden">
76
+ <img src="http://static.photos/sport/320x240/223" alt="Football Jersey - Detail" class="w-full h-auto object-cover object-center" data-main="http://static.photos/sport/1024x576/223">
77
+ </button>
78
+ <button class="product-thumbnail border-2 border-transparent rounded-md overflow-hidden">
79
+ <img src="http://static.photos/sport/320x240/224" alt="Football Jersey - On Player" class="w-full h-auto object-cover object-center" data-main="http://static.photos/sport/1024x576/224">
80
+ </button>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Product Details -->
85
+ <div>
86
+ <h1 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">Home Jersey 2024</h1>
87
+ <div class="mt-4 flex items-center">
88
+ <div class="flex items-center">
89
+ <i data-feather="star" class="review-star w-5 h-5"></i>
90
+ <i data-feather="star" class="review-star w-5 h-5"></i>
91
+ <i data-feather="star" class="review-star w-5 h-5"></i>
92
+ <i data-feather="star" class="review-star w-5 h-5"></i>
93
+ <i data-feather="star" class="text-gray-300 w-5 h-5"></i>
94
+ </div>
95
+ <a href="#reviews" class="ml-2 text-sm font-medium text-blue-600 hover:text-blue-500">24 reviews</a>
96
+ </div>
97
+
98
+ <div class="mt-6">
99
+ <h2 class="text-2xl font-bold text-gray-900">$24.99</h2>
100
+ <p class="mt-2 text-sm text-gray-500">Including VAT</p>
101
+ </div>
102
+
103
+ <div class="mt-6">
104
+ <h3 class="text-sm font-medium text-gray-900">Color</h3>
105
+ <div class="mt-2 flex space-x-2">
106
+ <button class="w-8 h-8 rounded-full bg-black border-2 border-black focus:outline-none"></button>
107
+ <button class="w-8 h-8 rounded-full bg-white border-2 border-gray-300 focus:outline-none"></button>
108
+ <button class="w-8 h-8 rounded-full bg-gray-500 border-2 border-transparent focus:outline-none"></button>
109
+ <button class="w-8 h-8 rounded-full bg-blue-500 border-2 border-transparent focus:outline-none"></button>
110
+ </div>
111
+ </div>
112
+
113
+ <div class="mt-6">
114
+ <h3 class="text-sm font-medium text-gray-900">Size</h3>
115
+ <div class="mt-2 grid grid-cols-5 gap-2">
116
+ <button class="px-4 py-2 border rounded-md text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">XS</button>
117
+ <button class="px-4 py-2 border rounded-md text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">S</button>
118
+ <button class="px-4 py-2 border rounded-md text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">M</button>
119
+ <button class="px-4 py-2 border rounded-md text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">L</button>
120
+ <button class="px-4 py-2 border rounded-md text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">XL</button>
121
+ </div>
122
+ <a href="#" class="mt-2 text-sm font-medium text-blue-600 hover:text-blue-500">Size guide</a>
123
+ </div>
124
+
125
+ <div class="mt-6">
126
+ <h3 class="text-sm font-medium text-gray-900">Quantity</h3>
127
+ <div class="mt-2 flex items-center">
128
+ <button class="px-3 py-1 border rounded-l-md text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500">-</button>
129
+ <input type="text" value="1" class="w-12 text-center border-t border-b border-gray-300 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500">
130
+ <button class="px-3 py-1 border rounded-r-md text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500">+</button>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="mt-6 flex space-x-4">
135
+ <button class="flex-1 bg-blue-600 text-white py-3 px-8 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
136
+ Add to Cart
137
+ </button>
138
+ <button class="p-3 border border-gray-300 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
139
+ <i data-feather="heart" class="w-5 h-5"></i>
140
+ </button>
141
+ </div>
142
+
143
+ <div class="mt-8 border-t border-gray-200 pt-8">
144
+ <h3 class="text-sm font-medium text-gray-900">Description</h3>
145
+ <div class="mt-4 prose prose-sm text-gray-500">
146
+ <p>Our Athletic Fit T-Shirt is designed for comfort and performance. Made from premium breathable fabric, it wicks moisture away from your body to keep you cool and dry during workouts or casual wear.</p>
147
+ <ul class="mt-4">
148
+ <li>Authentic club/national team design</li>
149
+ <li>Breathable, moisture-wicking fabric</li>
150
+ <li>Vented panels for airflow</li>
151
+ <li>Reinforced stitching for durability</li>
152
+ <li>Officially licensed replica</li>
153
+ </ul>
154
+ </div>
155
+ </div>
156
+
157
+ <div class="mt-8 border-t border-gray-200 pt-8">
158
+ <h3 class="text-sm font-medium text-gray-900">Fabric & Care</h3>
159
+ <div class="mt-4 prose prose-sm text-gray-500">
160
+ <ul>
161
+ <li>100% Polyester performance fabric</li>
162
+ <li>Machine wash at 30°C</li>
163
+ <li>Do not tumble dry</li>
164
+ <li>Do not bleach</li>
165
+ <li>Iron inside out on low heat</li>
166
+ </ul>
167
+ </div>
168
+ </div>
169
+
170
+ <div class="mt-8 border-t border-gray-200 pt-8">
171
+ <h3 class="text-sm font-medium text-gray-900">Shipping & Returns</h3>
172
+ <div class="mt-4 prose prose-sm text-gray-500">
173
+ <p>Free standard shipping on orders over $50. Returns accepted within 30 days of purchase.</p>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Reviews Section -->
180
+ <div id="reviews" class="mt-16">
181
+ <h2 class="text-2xl font-bold text-gray-900">Customer Reviews</h2>
182
+
183
+ <div class="mt-8 space-y-8">
184
+ <!-- Review 1 -->
185
+ <div class="border-b border-gray-200 pb-8">
186
+ <div class="flex items-center">
187
+ <div class="flex items-center">
188
+ <i data-feather="star" class="review-star w-5 h-5"></i>
189
+ <i data-feather="star" class="review-star w-5 h-5"></i>
190
+ <i data-feather="star" class="review-star w-5 h-5"></i>
191
+ <i data-feather="star" class="review-star w-5 h-5"></i>
192
+ <i data-feather="star" class="review-star w-5 h-5"></i>
193
+ </div>
194
+ <h3 class="ml-2 text-sm font-medium text-gray-900">Perfect fit and comfort</h3>
195
+ </div>
196
+ <div class="mt-2 text-sm text-gray-500">
197
+ <p>Posted by Michael on June 12, 2023</p>
198
+ </div>
199
+ <div class="mt-4 prose prose-sm text-gray-700">
200
+ <p>This t-shirt fits perfectly and is incredibly comfortable. The fabric is soft but durable, and it holds up well after multiple washes. I've already bought two more in different colors!</p>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Review 2 -->
205
+ <div class="border-b border-gray-200 pb-8">
206
+ <div class="flex items-center">
207
+ <div class="flex items-center">
208
+ <i data-feather="star" class="review-star w-5 h-5"></i>
209
+ <i data-feather="star" class="review-star w-5 h-5"></i>
210
+ <i data-feather="star" class="review-star w-5 h-5"></i>
211
+ <i data-feather="star" class="review-star w-5 h-5"></i>
212
+ <i data-feather="star" class="text-gray-300 w-5 h-5"></i>
213
+ </div>
214
+ <h3 class="ml-2 text-sm font-medium text-gray-900">Great quality</h3>
215
+ </div>
216
+ <div class="mt-2 text-sm text-gray-500">
217
+ <p>Posted by Sarah on May 28, 2023</p>
218
+ </div>
219
+ <div class="mt-4 prose prose-sm text-gray-700">
220
+ <p>Really happy with this purchase. The shirt is well-made and fits as expected. The only reason I'm not giving 5 stars is that I wish it came in more color options.</p>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Review 3 -->
225
+ <div class="border-b border-gray-200 pb-8">
226
+ <div class="flex items-center">
227
+ <div class="flex items-center">
228
+ <i data-feather="star" class="review-star w-5 h-5"></i>
229
+ <i data-feather="star" class="review-star w-5 h-5"></i>
230
+ <i data-feather="star" class="review-star w-5 h-5"></i>
231
+ <i data-feather="star" class="review-star w-5 h-5"></i>
232
+ <i data-feather="star" class="review-star w-5 h-5"></i>
233
+ </div>
234
+ <h3 class="ml-2 text-sm font-medium text-gray-900">Best t-shirt I've owned</h3>
235
+ </div>
236
+ <div class="mt-2 text-sm text-gray-500">
237
+ <p>Posted by David on April 15, 2023</p>
238
+ </div>
239
+ <div class="mt-4 prose prose-sm text-gray-700">
240
+ <p>I wear this shirt for workouts and casual outings. It's versatile, comfortable, and looks great. The material is high quality and the stitching is solid. Will definitely buy again!</p>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Review Form -->
246
+ <div class="mt-12">
247
+ <h3 class="text-lg font-medium text-gray-900">Share your thoughts</h3>
248
+ <p class="mt-1 text-sm text-gray-500">If you've used this product, share your experience with other customers</p>
249
+
250
+ <form class="mt-6">
251
+ <div>
252
+ <label for="rating" class="block text-sm font-medium text-gray-700">Rating</label>
253
+ <div class="mt-1 flex items-center">
254
+ <select id="rating" name="rating" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
255
+ <option>5 stars</option>
256
+ <option>4 stars</option>
257
+ <option>3 stars</option>
258
+ <option>2 stars</option>
259
+ <option>1 star</option>
260
+ </select>
261
+ </div>
262
+ </div>
263
+
264
+ <div class="mt-4">
265
+ <label for="review" class="block text-sm font-medium text-gray-700">Review</label>
266
+ <div class="mt-1">
267
+ <textarea id="review" name="review" rows="4" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border border-gray-300 rounded-md"></textarea>
268
+ </div>
269
+ </div>
270
+
271
+ <div class="mt-4">
272
+ <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
273
+ <div class="mt-1">
274
+ <input type="text" id="name" name="name" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border border-gray-300 rounded-md">
275
+ </div>
276
+ </div>
277
+
278
+ <div class="mt-4">
279
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
280
+ <div class="mt-1">
281
+ <input type="email" id="email" name="email" class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border border-gray-300 rounded-md">
282
+ </div>
283
+ </div>
284
+
285
+ <div class="mt-6">
286
+ <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
287
+ Submit Review
288
+ </button>
289
+ </div>
290
+ </form>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Related Products -->
295
+ <div class="mt-16">
296
+ <h2 class="text-2xl font-bold text-gray-900">You may also like</h2>
297
+
298
+ <div class="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4">
299
+ <!-- Product 1 -->
300
+ <div class="group relative">
301
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
302
+ <img src="http://static.photos/sport/640x360/225" alt="Football Shorts" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
303
+ </div>
304
+ <div class="mt-4 flex justify-between">
305
+ <div>
306
+ <h3 class="text-sm text-gray-700">
307
+ <a href="product.html">
308
+ <span aria-hidden="true" class="absolute inset-0"></span>
309
+ Performance Shorts
310
+ </a>
311
+ </h3>
312
+ <p class="mt-1 text-sm text-gray-500">Navy Blue</p>
313
+ </div>
314
+ <p class="text-sm font-medium text-gray-900">$29.99</p>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Product 2 -->
319
+ <div class="group relative">
320
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
321
+ <img src="http://static.photos/sport/640x360/226" alt="Football Jacket" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
322
+ </div>
323
+ <div class="mt-4 flex justify-between">
324
+ <div>
325
+ <h3 class="text-sm text-gray-700">
326
+ <a href="product.html">
327
+ <span aria-hidden="true" class="absolute inset-0"></span>
328
+ Lightweight Hoodie
329
+ </a>
330
+ </h3>
331
+ <p class="mt-1 text-sm text-gray-500">Gray</p>
332
+ </div>
333
+ <p class="text-sm font-medium text-gray-900">$39.
334
+ </body>
335
+ </html>
prompts.txt ADDED
@@ -0,0 +1,44 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ Website Request Prompt
2
+
3
+ Hello, I’d like to have an e-commerce website (online shop) built for my clothing brand. Here are the details:
4
+
5
+ Business type: Online shop selling affordable t-shirts, shorts, and sports-inspired casual wear (not original brands, just stylish and fair-priced items).
6
+
7
+ Target audience: Young people and sports lovers who want trendy clothes at reasonable prices.
8
+
9
+ Design style: Clean, modern, mobile-friendly, easy to navigate. Should feel sporty and stylish.
10
+
11
+ Pages needed:
12
+
13
+ Home (showing new arrivals & featured products)
14
+
15
+ Shop (with categories like T-Shirts, Shorts, Accessories, etc.)
16
+
17
+ Product page (with photos, sizes, price, description, “add to cart”)
18
+
19
+ About Us (brand story)
20
+
21
+ Contact page (email / form / WhatsApp)
22
+
23
+
24
+ Features required:
25
+
26
+ Shopping cart + checkout
27
+
28
+ Secure payment methods (PayPal, credit card, etc.)
29
+
30
+ Option for discounts/promo codes
31
+
32
+ Customer reviews section (optional)
33
+
34
+ Easy to update (so I can add new products myself)
35
+
36
+
37
+ Extra: Connect to Instagram/TikTok for promotions.
38
+
39
+
40
+ The website should be simple to manage since I’ll be adding new items often. Please recommend whether Shopify, Wix, or WordPress/WooCommerce would be best for me.
41
+ i want the background colour to be in blue
42
+ i would like the website to be abt foot only
43
+ and even the pictures
44
+ the pictures shall be abt foot only
shop.html ADDED
@@ -0,0 +1,407 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Shop | FootStyle</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
+ <style>
14
+ .product-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
17
+ }
18
+ .category-filter.active {
19
+ background-color: #2563eb;
20
+ color: white;
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="font-sans antialiased">
25
+ <!-- Navigation -->
26
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex items-center">
30
+ <a href="index.html" class="flex-shrink-0 flex items-center">
31
+ <span class="text-xl font-bold text-gray-900">FOOT<span class="text-blue-600">STYLE</span></span>
32
+ </a>
33
+ </div>
34
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
35
+ <a href="index.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Home</a>
36
+ <a href="shop.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-blue-500 text-sm font-medium">Shop</a>
37
+ <a href="about.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">About</a>
38
+ <a href="contact.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-300 text-sm font-medium">Contact</a>
39
+ </div>
40
+ <div class="flex items-center">
41
+ <button class="p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
42
+ <i data-feather="search"></i>
43
+ </button>
44
+ <button class="ml-4 p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
45
+ <i data-feather="user"></i>
46
+ </button>
47
+ <button class="ml-4 p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none relative">
48
+ <i data-feather="shopping-cart"></i>
49
+ <span class="absolute top-0 right-0 h-4 w-4 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center">3</span>
50
+ </button>
51
+ <button class="md:hidden ml-4 p-2 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
52
+ <i data-feather="menu"></i>
53
+ </button>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </nav>
58
+
59
+ <!-- Shop Header -->
60
+ <div class="bg-blue-50">
61
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
62
+ <h1 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
63
+ Football Store
64
+ </h1>
65
+ <p class="mt-2 text-lg text-gray-600">
66
+ Authentic football jerseys, training gear and accessories
67
+ </p>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Shop Content -->
72
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
73
+ <div class="lg:grid lg:grid-cols-4 lg:gap-8">
74
+ <!-- Filters -->
75
+ <div class="lg:col-span-1 mb-8 lg:mb-0">
76
+ <h2 class="text-lg font-medium text-gray-900 mb-4">Filters</h2>
77
+
78
+ <!-- Categories -->
79
+ <div class="mb-6">
80
+ <h3 class="text-sm font-medium text-gray-900 mb-2">Categories</h3>
81
+ <div class="space-y-2">
82
+ <button class="category-filter block w-full text-left px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100 active">
83
+ All Products
84
+ </button>
85
+ <button class="category-filter block w-full text-left px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100">
86
+ Match Jerseys
87
+ </button>
88
+ <button class="category-filter block w-full text-left px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100">
89
+ Training Wear
90
+ </button>
91
+ <button class="category-filter block w-full text-left px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100">
92
+ Football Boots
93
+ </button>
94
+ <button class="category-filter block w-full text-left px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100">
95
+ Club Merchandise
96
+ </button>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Price -->
101
+ <div class="mb-6">
102
+ <h3 class="text-sm font-medium text-gray-900 mb-2">Price</h3>
103
+ <div class="space-y-2">
104
+ <div class="flex items-center">
105
+ <input id="price-all" name="price" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
106
+ <label for="price-all" class="ml-2 text-sm text-gray-700">All Prices</label>
107
+ </div>
108
+ <div class="flex items-center">
109
+ <input id="price-1" name="price" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
110
+ <label for="price-1" class="ml-2 text-sm text-gray-700">$0 - $25</label>
111
+ </div>
112
+ <div class="flex items-center">
113
+ <input id="price-2" name="price" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
114
+ <label for="price-2" class="ml-2 text-sm text-gray-700">$25 - $50</label>
115
+ </div>
116
+ <div class="flex items-center">
117
+ <input id="price-3" name="price" type="radio" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
118
+ <label for="price-3" class="ml-2 text-sm text-gray-700">$50+</label>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Color -->
124
+ <div class="mb-6">
125
+ <h3 class="text-sm font-medium text-gray-900 mb-2">Color</h3>
126
+ <div class="flex flex-wrap gap-2">
127
+ <button class="w-6 h-6 rounded-full bg-black border border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"></button>
128
+ <button class="w-6 h-6 rounded-full bg-white border border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"></button>
129
+ <button class="w-6 h-6 rounded-full bg-gray-500 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"></button>
130
+ <button class="w-6 h-6 rounded-full bg-blue-500 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"></button>
131
+ <button class="w-6 h-6 rounded-full bg-red-500 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"></button>
132
+ <button class="w-6 h-6 rounded-full bg-green-500 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"></button>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Size -->
137
+ <div class="mb-6">
138
+ <h3 class="text-sm font-medium text-gray-900 mb-2">Size</h3>
139
+ <div class="flex flex-wrap gap-2">
140
+ <button class="px-3 py-1 border rounded-md text-sm font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">XS</button>
141
+ <button class="px-3 py-1 border rounded-md text-sm font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">S</button>
142
+ <button class="px-3 py-1 border rounded-md text-sm font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">M</button>
143
+ <button class="px-3 py-1 border rounded-md text-sm font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">L</button>
144
+ <button class="px-3 py-1 border rounded-md text-sm font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">XL</button>
145
+ <button class="px-3 py-1 border rounded-md text-sm font-medium hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">XXL</button>
146
+ </div>
147
+ </div>
148
+
149
+ <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
150
+ Apply Filters
151
+ </button>
152
+ </div>
153
+
154
+ <!-- Products -->
155
+ <div class="lg:col-span-3">
156
+ <div class="flex justify-between items-center mb-6">
157
+ <div>
158
+ <p class="text-sm text-gray-700">
159
+ Showing <span class="font-medium">1</span> to <span class="font-medium">12</span> of <span class="font-medium">24</span> results
160
+ </p>
161
+ </div>
162
+ <div class="flex items-center">
163
+ <label for="sort" class="mr-2 text-sm font-medium text-gray-700">Sort by:</label>
164
+ <select id="sort" name="sort" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
165
+ <option>Most Popular</option>
166
+ <option>Price: Low to High</option>
167
+ <option>Price: High to Low</option>
168
+ <option>Newest</option>
169
+ </select>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3">
174
+ <!-- Product 1 -->
175
+ <div class="group relative product-card transition-all duration-300">
176
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
177
+ <img src="http://static.photos/sport/640x360/213" alt="Football Jersey" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
178
+ </div>
179
+ <div class="mt-4 flex justify-between">
180
+ <div>
181
+ <h3 class="text-sm text-gray-700">
182
+ <a href="product.html">
183
+ <span aria-hidden="true" class="absolute inset-0"></span>
184
+ Athletic Fit T-Shirt
185
+ </a>
186
+ </h3>
187
+ <p class="mt-1 text-sm text-gray-500">Black</p>
188
+ </div>
189
+ <p class="text-sm font-medium text-gray-900">$24.99</p>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Product 2 -->
194
+ <div class="group relative product-card transition-all duration-300">
195
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
196
+ <img src="http://static.photos/sport/640x360/214" alt="Football Shorts" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
197
+ </div>
198
+ <div class="mt-4 flex justify-between">
199
+ <div>
200
+ <h3 class="text-sm text-gray-700">
201
+ <a href="product.html">
202
+ <span aria-hidden="true" class="absolute inset-0"></span>
203
+ Performance Running Shorts
204
+ </a>
205
+ </h3>
206
+ <p class="mt-1 text-sm text-gray-500">Navy Blue</p>
207
+ </div>
208
+ <p class="text-sm font-medium text-gray-900">$29.99</p>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Product 3 -->
213
+ <div class="group relative product-card transition-all duration-300">
214
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
215
+ <img src="http://static.photos/sport/640x360/215" alt="Football Jacket" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
216
+ </div>
217
+ <div class="mt-4 flex justify-between">
218
+ <div>
219
+ <h3 class="text-sm text-gray-700">
220
+ <a href="product.html">
221
+ <span aria-hidden="true class="absolute inset-0"></span>
222
+ Lightweight Hoodie
223
+ </a>
224
+ </h3>
225
+ <p class="mt-1 text-sm text-gray-500">Gray</p>
226
+ </div>
227
+ <p class="text-sm font-medium text-gray-900">$39.99</p>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Product 4 -->
232
+ <div class="group relative product-card transition-all duration-300">
233
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
234
+ <img src="http://static.photos/sport/640x360/216" alt="Football Cap" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
235
+ </div>
236
+ <div class="mt-4 flex justify-between">
237
+ <div>
238
+ <h3 class="text-sm text-gray-700">
239
+ <a href="product.html">
240
+ <span aria-hidden="true" class="absolute inset-0"></span>
241
+ Sport Performance Cap
242
+ </a>
243
+ </h3>
244
+ <p class="mt-1 text-sm text-gray-500">Black/White</p>
245
+ </div>
246
+ <p class="text-sm font-medium text-gray-900">$19.99</p>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Product 5 -->
251
+ <div class="group relative product-card transition-all duration-300">
252
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
253
+ <img src="http://static.photos/sport/640x360/217" alt="Football Training Top" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
254
+ </div>
255
+ <div class="mt-4 flex justify-between">
256
+ <div>
257
+ <h3 class="text-sm text-gray-700">
258
+ <a href="product.html">
259
+ <span aria-hidden="true" class="absolute inset-0"></span>
260
+ Muscle Fit Tank Top
261
+ </a>
262
+ </h3>
263
+ <p class="mt-1 text-sm text-gray-500">White</p>
264
+ </div>
265
+ <p class="text-sm font-medium text-gray-900">$22.99</p>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Product 6 -->
270
+ <div class="group relative product-card transition-all duration-300">
271
+ <div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
272
+ <img src="http://static.photos/sport/640x360/218" alt="Football Pants" class="w-full h-full object-center object-cover lg:w-full lg:h-full">
273
+ </div>
274
+ <div class="mt-4 flex justify-between">
275
+ <div>
276
+ <h3 class="text-sm text-gray-700">
277
+ <a href="product.html">
278
+ <span aria-hidden="true" class="absolute inset-0"></span>
279
+ Slim Fit Joggers
280
+ </a>
281
+ </h3>
282
+ <p class="mt-1 text-sm text-gray-500">Charcoal</p>
283
+ </div>
284
+ <p class="text-sm font-medium text-gray-900">$34.99</p>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Pagination -->
290
+ <div class="mt-12 flex items-center justify-between border-t border-gray-200 pt-6">
291
+ <div>
292
+ <nav class="flex space-x-2" aria-label="Pagination">
293
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
294
+ <span class="sr-only">Previous</span>
295
+ <i data-feather="chevron-left" class="h-5 w-5"></i>
296
+ </a>
297
+ <a href="#" aria-current="page" class="relative z-10 inline-flex items-center px-4 py-2 border border-blue-500 bg-blue-50 text-sm font-medium text-blue-600">1</a>
298
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">2</a>
299
+ <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">3</a>
300
+ <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
301
+ <span class="sr-only">Next</span>
302
+ <i data-feather="chevron-right" class="h-5 w-5"></i>
303
+ </a>
304
+ </nav>
305
+ </div>
306
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
307
+ <div>
308
+ <p class="text-sm text-gray-700">
309
+ Showing <span class="font-medium">1</span> to <span class="font-medium">6</span> of <span class="font-medium">24</span> results
310
+ </p>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Footer -->
319
+ <footer class="bg-gray-900">
320
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
321
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
322
+ <div>
323
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Shop</h3>
324
+ <ul class="mt-4 space-y-4">
325
+ <li><a href="shop.html?category=t-shirts" class="text-base text-gray-300 hover:text-white">T-Shirts</a></li>
326
+ <li><a href="shop.html?category=shorts" class="text-base text-gray-300 hover:text-white">Shorts</a></li>
327
+ <li><a href="shop.html?category=hoodies" class="text-base text-gray-300 hover:text-white">Hoodies</a></li>
328
+ <li><a href="shop.html?category=accessories" class="text-base text-gray-300 hover:text-white">Accessories</a></li>
329
+ </ul>
330
+ </div>
331
+ <div>
332
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
333
+ <ul class="mt-4 space-y-4">
334
+ <li><a href="about.html" class="text-base text-gray-300 hover:text-white">About Us</a></li>
335
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Sustainability</a></li>
336
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
337
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms & Conditions</a></li>
338
+ </ul>
339
+ </div>
340
+ <div>
341
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Customer Service</h3>
342
+ <ul class="mt-4 space-y-4">
343
+ <li><a href="contact.html" class="text-base text-gray-300 hover:text-white">Contact Us</a></li>
344
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Shipping Policy</a></li>
345
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Returns & Exchanges</a></li>
346
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">FAQs</a></li>
347
+ </ul>
348
+ </div>
349
+ <div>
350
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
351
+ <div class="mt-4 flex space-x-6">
352
+ <a href="#" class="text-gray-400 hover:text-white">
353
+ <i data-feather="facebook" class="h-6 w-6"></i>
354
+ </a>
355
+ <a href="#" class="text-gray-400 hover:text-white">
356
+ <i data-feather="instagram" class="h-6 w-6"></i>
357
+ </a>
358
+ <a href="#" class="text-gray-400 hover:text-white">
359
+ <i data-feather="twitter" class="h-6 w-6"></i>
360
+ </a>
361
+ <a href="#" class="text-gray-400 hover:text-white">
362
+ <i data-feather="youtube" class="h-6 w-6"></i>
363
+ </a>
364
+ </div>
365
+ <div class="mt-6">
366
+ <h4 class="text-sm font-medium text-gray-400">Payment Methods</h4>
367
+ <div class="mt-2 flex space-x-4">
368
+ <i data-feather="credit-card" class="h-6 w-6 text-gray-400"></i>
369
+ <i data-feather="dollar-sign" class="h-6 w-6 text-gray-400"></i>
370
+ <i data-feather="shopping-bag" class="h-6 w-6 text-gray-400"></i>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ <div class="mt-12 border-t border-gray-800 pt-8">
376
+ <p class="text-base text-gray-400 text-center">
377
+ &copy; 2023 FootStyle. All rights reserved.
378
+ </p>
379
+ </div>
380
+ </div>
381
+ </footer>
382
+
383
+ <script>
384
+ AOS.init();
385
+ feather.replace();
386
+
387
+ // Category filter functionality
388
+ document.querySelectorAll('.category-filter').forEach(button => {
389
+ button.addEventListener('click', function() {
390
+ document.querySelectorAll('.category-filter').forEach(btn => {
391
+ btn.classList.remove('active', 'bg-blue-600', 'text-white');
392
+ btn.classList.add('text-gray-700', 'hover:bg-gray-100');
393
+ });
394
+ this.classList.add('active', 'bg-blue-600', 'text-white');
395
+ this.classList.remove('text-gray-700', 'hover:bg-gray-100');
396
+ });
397
+ });
398
+
399
+ // Product card click
400
+ document.querySelectorAll('.product-card').forEach(card => {
401
+ card.addEventListener('click', function() {
402
+ window.location.href = 'product.html';
403
+ });
404
+ });
405
+ </script>
406
+ </body>
407
+ </html>