Hugging Face's logo

Spaces:
krishgokul92
/
marketspire3
Running

App Files Community
krishgokul92 commited on
Commit
65153c9
·
verified ·
1 Parent(s): ad239d4

- Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +726 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Marketspire3
3
- emoji: 👁
4
- colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: marketspire3
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: green
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,726 @@
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>Marketspire - Premium Retail & Food Experiences</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=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #3a86ff;
14
+ --secondary: #8338ec;
15
+ --accent: #ff006e;
16
+ --dark: #1a1a2e;
17
+ --light: #f8f9fa;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Inter', sans-serif;
22
+ background-color: #f8f9fa;
23
+ color: #333;
24
+ overflow-x: hidden;
25
+ }
26
+
27
+ h1, h2, h3, h4, h5, h6 {
28
+ font-family: 'Playfair Display', serif;
29
+ }
30
+
31
+ .hero-gradient {
32
+ background: linear-gradient(135deg, rgba(58,134,255,0.1) 0%, rgba(131,56,236,0.1) 100%);
33
+ }
34
+
35
+ .card-hover {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .card-hover:hover {
40
+ transform: translateY(-5px);
41
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
42
+ }
43
+
44
+ .nav-link {
45
+ position: relative;
46
+ }
47
+
48
+ .nav-link::after {
49
+ content: '';
50
+ position: absolute;
51
+ width: 0;
52
+ height: 2px;
53
+ bottom: -2px;
54
+ left: 0;
55
+ background-color: var(--primary);
56
+ transition: width 0.3s ease;
57
+ }
58
+
59
+ .nav-link:hover::after {
60
+ width: 100%;
61
+ }
62
+
63
+ .btn-primary {
64
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
65
+ transition: all 0.3s ease;
66
+ }
67
+
68
+ .btn-primary:hover {
69
+ transform: translateY(-2px);
70
+ box-shadow: 0 5px 15px rgba(58,134,255,0.3);
71
+ }
72
+
73
+ .btn-secondary {
74
+ transition: all 0.3s ease;
75
+ }
76
+
77
+ .btn-secondary:hover {
78
+ transform: translateY(-2px);
79
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
80
+ }
81
+
82
+ .section-divider {
83
+ height: 100px;
84
+ background: linear-gradient(180deg, rgba(248,249,250,1) 0%, rgba(255,255,255,1) 100%);
85
+ }
86
+
87
+ .testimonial-card {
88
+ background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.9) 100%);
89
+ backdrop-filter: blur(10px);
90
+ }
91
+
92
+ .floating {
93
+ animation: floating 6s ease-in-out infinite;
94
+ }
95
+
96
+ @keyframes floating {
97
+ 0% { transform: translateY(0px); }
98
+ 50% { transform: translateY(-15px); }
99
+ 100% { transform: translateY(0px); }
100
+ }
101
+
102
+ .rotate-animation {
103
+ animation: rotate 20s linear infinite;
104
+ }
105
+
106
+ @keyframes rotate {
107
+ 0% { transform: rotate(0deg); }
108
+ 100% { transform: rotate(360deg); }
109
+ }
110
+ </style>
111
+ </head>
112
+ <body>
113
+ <!-- Navigation -->
114
+ <nav class="fixed w-full bg-white shadow-sm z-50">
115
+ <div class="container mx-auto px-6 py-4">
116
+ <div class="flex justify-between items-center">
117
+ <div class="flex items-center">
118
+ <i class="fas fa-store text-2xl text-primary mr-2"></i>
119
+ <span class="text-2xl font-bold text-dark">MARKETSPIRE</span>
120
+ </div>
121
+
122
+ <div class="hidden md:flex space-x-8">
123
+ <a href="#about" class="nav-link text-gray-700 hover:text-primary">About</a>
124
+ <a href="#values" class="nav-link text-gray-700 hover:text-primary">Values</a>
125
+ <a href="#services" class="nav-link text-gray-700 hover:text-primary">Services</a>
126
+ <a href="#locations" class="nav-link text-gray-700 hover:text-primary">Locations</a>
127
+ <a href="#contact" class="nav-link text-gray-700 hover:text-primary">Contact</a>
128
+ </div>
129
+
130
+ <div class="md:hidden">
131
+ <button class="text-gray-700 focus:outline-none">
132
+ <i class="fas fa-bars text-2xl"></i>
133
+ </button>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </nav>
138
+
139
+ <!-- Hero Section -->
140
+ <section class="pt-32 pb-20 hero-gradient">
141
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
142
+ <div class="md:w-1/2 mb-12 md:mb-0">
143
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-dark mb-6 leading-tight">
144
+ Elevating Your <span class="text-primary">Retail Experience</span>
145
+ </h1>
146
+ <p class="text-lg text-gray-600 mb-8 max-w-lg">
147
+ Discover premium retail and dining experiences crafted with care and quality at every Marketspire location.
148
+ </p>
149
+ <div class="flex flex-wrap gap-4">
150
+ <a href="#services" class="btn-primary text-white font-semibold px-8 py-3 rounded-lg">Our Services</a>
151
+ <a href="#locations" class="btn-secondary bg-white text-primary font-semibold px-8 py-3 rounded-lg border border-primary">Find Locations</a>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="md:w-1/2 relative">
156
+ <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
157
+ alt="Marketspire Store"
158
+ class="rounded-xl shadow-xl w-full max-w-md mx-auto">
159
+
160
+ <div class="absolute -top-8 -left-8 w-24 h-24 bg-accent rounded-full opacity-20 floating" style="animation-delay: 0.5s;"></div>
161
+ <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-primary rounded-full opacity-20 floating"></div>
162
+ </div>
163
+ </div>
164
+ </section>
165
+
166
+ <!-- About Section -->
167
+ <section id="about" class="py-20 bg-white">
168
+ <div class="container mx-auto px-6">
169
+ <div class="text-center mb-16">
170
+ <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">About Marketspire</h2>
171
+ <div class="w-24 h-1 bg-primary mx-auto mb-6"></div>
172
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
173
+ We are a premier retail and food service provider committed to delivering exceptional experiences across multiple locations.
174
+ </p>
175
+ </div>
176
+
177
+ <div class="flex flex-col md:flex-row items-center gap-12">
178
+ <div class="md:w-1/2">
179
+ <div class="relative">
180
+ <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
181
+ alt="Marketspire Team"
182
+ class="rounded-xl shadow-lg w-full">
183
+ <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-md">
184
+ <div class="flex items-center">
185
+ <div class="bg-primary p-3 rounded-full mr-3">
186
+ <i class="fas fa-award text-white text-xl"></i>
187
+ </div>
188
+ <div>
189
+ <p class="font-bold text-dark">5+ Years</p>
190
+ <p class="text-sm text-gray-600">Of Excellence</p>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="md:w-1/2">
198
+ <h3 class="text-2xl font-bold text-dark mb-6">Our Story</h3>
199
+ <p class="text-gray-600 mb-6">
200
+ Founded with a vision to redefine retail experiences, Marketspire has grown from a single location to a network of premium outlets serving thousands of satisfied customers daily.
201
+ </p>
202
+
203
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
204
+ <div class="bg-gray-50 p-6 rounded-lg">
205
+ <div class="text-primary text-3xl mb-3">
206
+ <i class="fas fa-store"></i>
207
+ </div>
208
+ <h4 class="font-bold text-dark mb-2">Multiple Locations</h4>
209
+ <p class="text-gray-600 text-sm">Conveniently located across the city for easy access</p>
210
+ </div>
211
+
212
+ <div class="bg-gray-50 p-6 rounded-lg">
213
+ <div class="text-primary text-3xl mb-3">
214
+ <i class="fas fa-users"></i>
215
+ </div>
216
+ <h4 class="font-bold text-dark mb-2">Expert Team</h4>
217
+ <p class="text-gray-600 text-sm">Trained professionals dedicated to your satisfaction</p>
218
+ </div>
219
+ </div>
220
+
221
+ <a href="#values" class="inline-flex items-center text-primary font-semibold">
222
+ Learn More About Us <i class="fas fa-arrow-right ml-2"></i>
223
+ </a>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </section>
228
+
229
+ <!-- Values Section -->
230
+ <section id="values" class="py-20 bg-gray-50">
231
+ <div class="container mx-auto px-6">
232
+ <div class="text-center mb-16">
233
+ <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Our Core Values</h2>
234
+ <div class="w-24 h-1 bg-primary mx-auto mb-6"></div>
235
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
236
+ These principles guide everything we do at Marketspire
237
+ </p>
238
+ </div>
239
+
240
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
241
+ <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
242
+ <div class="text-primary text-4xl mb-4">
243
+ <i class="fas fa-star"></i>
244
+ </div>
245
+ <h3 class="text-xl font-bold text-dark mb-3">Quality</h3>
246
+ <p class="text-gray-600">
247
+ We source only the finest ingredients and products to ensure premium quality in everything we offer.
248
+ </p>
249
+ </div>
250
+
251
+ <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
252
+ <div class="text-primary text-4xl mb-4">
253
+ <i class="fas fa-heart"></i>
254
+ </div>
255
+ <h3 class="text-xl font-bold text-dark mb-3">Passion</h3>
256
+ <p class="text-gray-600">
257
+ Our team is driven by genuine passion for delivering exceptional retail and dining experiences.
258
+ </p>
259
+ </div>
260
+
261
+ <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
262
+ <div class="text-primary text-4xl mb-4">
263
+ <i class="fas fa-lightbulb"></i>
264
+ </div>
265
+ <h3 class="text-xl font-bold text-dark mb-3">Innovation</h3>
266
+ <p class="text-gray-600">
267
+ We constantly evolve our offerings to stay ahead of trends and meet changing customer needs.
268
+ </p>
269
+ </div>
270
+
271
+ <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
272
+ <div class="text-primary text-4xl mb-4">
273
+ <i class="fas fa-handshake"></i>
274
+ </div>
275
+ <h3 class="text-xl font-bold text-dark mb-3">Integrity</h3>
276
+ <p class="text-gray-600">
277
+ Honesty and transparency form the foundation of all our business relationships.
278
+ </p>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </section>
283
+
284
+ <!-- Services Section -->
285
+ <section id="services" class="py-20 bg-white">
286
+ <div class="container mx-auto px-6">
287
+ <div class="text-center mb-16">
288
+ <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Our Services</h2>
289
+ <div class="w-24 h-1 bg-primary mx-auto mb-6"></div>
290
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
291
+ Comprehensive retail and food solutions tailored to your needs
292
+ </p>
293
+ </div>
294
+
295
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
296
+ <div class="relative overflow-hidden rounded-xl shadow-md card-hover">
297
+ <img src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
298
+ alt="Retail Shopping"
299
+ class="w-full h-48 object-cover">
300
+ <div class="p-6">
301
+ <h3 class="text-xl font-bold text-dark mb-2">Premium Retail</h3>
302
+ <p class="text-gray-600 mb-4">
303
+ Carefully curated selection of high-quality products for your everyday needs.
304
+ </p>
305
+ <a href="#" class="text-primary font-semibold inline-flex items-center">
306
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
307
+ </a>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="relative overflow-hidden rounded-xl shadow-md card-hover">
312
+ <img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
313
+ alt="Food Service"
314
+ class="w-full h-48 object-cover">
315
+ <div class="p-6">
316
+ <h3 class="text-xl font-bold text-dark mb-2">Gourmet Food</h3>
317
+ <p class="text-gray-600 mb-4">
318
+ Freshly prepared meals using quality ingredients for dine-in or takeaway.
319
+ </p>
320
+ <a href="#" class="text-primary font-semibold inline-flex items-center">
321
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
322
+ </a>
323
+ </div>
324
+ </div>
325
+
326
+ <div class="relative overflow-hidden rounded-xl shadow-md card-hover">
327
+ <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
328
+ alt="Catering Service"
329
+ class="w-full h-48 object-cover">
330
+ <div class="p-6">
331
+ <h3 class="text-xl font-bold text-dark mb-2">Event Catering</h3>
332
+ <p class="text-gray-600 mb-4">
333
+ Custom catering solutions for corporate events and special occasions.
334
+ </p>
335
+ <a href="#" class="text-primary font-semibold inline-flex items-center">
336
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
337
+ </a>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <div class="text-center mt-12">
343
+ <a href="#contact" class="btn-primary text-white font-semibold px-8 py-3 rounded-lg inline-block">Get In Touch</a>
344
+ </div>
345
+ </div>
346
+ </section>
347
+
348
+ <!-- Locations Section -->
349
+ <section id="locations" class="py-20 bg-gray-50">
350
+ <div class="container mx-auto px-6">
351
+ <div class="text-center mb-16">
352
+ <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Our Locations</h2>
353
+ <div class="w-24 h-1 bg-primary mx-auto mb-6"></div>
354
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
355
+ Visit us at one of our conveniently located outlets
356
+ </p>
357
+ </div>
358
+
359
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
360
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
361
+ <div class="text-primary text-3xl mb-4">
362
+ <i class="fas fa-map-marker-alt"></i>
363
+ </div>
364
+ <h3 class="text-xl font-bold text-dark mb-3">Downtown</h3>
365
+ <p class="text-gray-600 mb-4">
366
+ 123 Main Street<br>
367
+ Open 7am-10pm Daily
368
+ </p>
369
+ <a href="#" class="text-primary text-sm font-semibold">Get Directions</a>
370
+ </div>
371
+
372
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
373
+ <div class="text-primary text-3xl mb-4">
374
+ <i class="fas fa-map-marker-alt"></i>
375
+ </div>
376
+ <h3 class="text-xl font-bold text-dark mb-3">Westside</h3>
377
+ <p class="text-gray-600 mb-4">
378
+ 456 Oak Avenue<br>
379
+ Open 7am-10pm Daily
380
+ </p>
381
+ <a href="#" class="text-primary text-sm font-semibold">Get Directions</a>
382
+ </div>
383
+
384
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
385
+ <div class="text-primary text-3xl mb-4">
386
+ <i class="fas fa-map-marker-alt"></i>
387
+ </div>
388
+ <h3 class="text-xl font-bold text-dark mb-3">East End</h3>
389
+ <p class="text-gray-600 mb-4">
390
+ 789 Elm Boulevard<br>
391
+ Open 7am-10pm Daily
392
+ </p>
393
+ <a href="#" class="text-primary text-sm font-semibold">Get Directions</a>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
398
+ <div class="h-64 w-full bg-gray-200">
399
+ <!-- Map would go here -->
400
+ <div class="flex items-center justify-center h-full text-gray-500">
401
+ <i class="fas fa-map text-4xl"></i>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </section>
407
+
408
+ <!-- Testimonials Section -->
409
+ <section class="py-20 bg-primary text-white">
410
+ <div class="container mx-auto px-6">
411
+ <div class="text-center mb-16">
412
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Customers Say</h2>
413
+ <div class="w-24 h-1 bg-white mx-auto mb-6"></div>
414
+ <p class="text-lg opacity-90 max-w-3xl mx-auto">
415
+ Hear from those who've experienced the Marketspire difference
416
+ </p>
417
+ </div>
418
+
419
+ <div class="grid md:grid-cols-3 gap-8">
420
+ <div class="testimonial-card p-8 rounded-xl text-gray-800 card-hover">
421
+ <div class="flex items-center mb-4">
422
+ <div class="text-yellow-400 text-xl mr-2">
423
+ <i class="fas fa-star"></i>
424
+ <i class="fas fa-star"></i>
425
+ <i class="fas fa-star"></i>
426
+ <i class="fas fa-star"></i>
427
+ <i class="fas fa-star"></i>
428
+ </div>
429
+ </div>
430
+ <p class="mb-6 italic">
431
+ "The quality of products at Marketspire is unmatched. I do all my shopping here because I know I can trust their standards."
432
+ </p>
433
+ <div class="flex items-center">
434
+ <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 overflow-hidden">
435
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-full h-full object-cover">
436
+ </div>
437
+ <div>
438
+ <h4 class="font-bold">Sarah J.</h4>
439
+ <p class="text-sm text-gray-600">Regular Customer</p>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="testimonial-card p-8 rounded-xl text-gray-800 card-hover">
445
+ <div class="flex items-center mb-4">
446
+ <div class="text-yellow-400 text-xl mr-2">
447
+ <i class="fas fa-star"></i>
448
+ <i class="fas fa-star"></i>
449
+ <i class="fas fa-star"></i>
450
+ <i class="fas fa-star"></i>
451
+ <i class="fas fa-star"></i>
452
+ </div>
453
+ </div>
454
+ <p class="mb-6 italic">
455
+ "Their prepared foods section has become my go-to for quick, healthy meals. So much better than fast food!"
456
+ </p>
457
+ <div class="flex items-center">
458
+ <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 overflow-hidden">
459
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-full h-full object-cover">
460
+ </div>
461
+ <div>
462
+ <h4 class="font-bold">Michael T.</h4>
463
+ <p class="text-sm text-gray-600">Local Business Owner</p>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="testimonial-card p-8 rounded-xl text-gray-800 card-hover">
469
+ <div class="flex items-center mb-4">
470
+ <div class="text-yellow-400 text-xl mr-2">
471
+ <i class="fas fa-star"></i>
472
+ <i class="fas fa-star"></i>
473
+ <i class="fas fa-star"></i>
474
+ <i class="fas fa-star"></i>
475
+ <i class="fas fa-star-half-alt"></i>
476
+ </div>
477
+ </div>
478
+ <p class="mb-6 italic">
479
+ "We use Marketspire for all our office catering needs. The food is always fresh and delivered on time."
480
+ </p>
481
+ <div class="flex items-center">
482
+ <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 overflow-hidden">
483
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Jennifer L." class="w-full h-full object-cover">
484
+ </div>
485
+ <div>
486
+ <h4 class="font-bold">Jennifer L.</h4>
487
+ <p class="text-sm text-gray-600">Office Manager</p>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </section>
494
+
495
+ <!-- Contact Section -->
496
+ <section id="contact" class="py-20 bg-white">
497
+ <div class="container mx-auto px-6">
498
+ <div class="text-center mb-16">
499
+ <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">Contact Us</h2>
500
+ <div class="w-24 h-1 bg-primary mx-auto mb-6"></div>
501
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
502
+ We'd love to hear from you. Get in touch with any questions or feedback.
503
+ </p>
504
+ </div>
505
+
506
+ <div class="flex flex-col md:flex-row gap-12">
507
+ <div class="md:w-1/2">
508
+ <form class="space-y-6">
509
+ <div>
510
+ <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label>
511
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
512
+ </div>
513
+
514
+ <div>
515
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
516
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
517
+ </div>
518
+
519
+ <div>
520
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
521
+ <input type="text" id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
522
+ </div>
523
+
524
+ <div>
525
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
526
+ <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
527
+ </div>
528
+
529
+ <button type="submit" class="btn-primary text-white font-semibold px-8 py-3 rounded-lg w-full">
530
+ Send Message
531
+ </button>
532
+ </form>
533
+ </div>
534
+
535
+ <div class="md:w-1/2">
536
+ <div class="bg-gray-50 p-8 rounded-xl h-full">
537
+ <h3 class="text-xl font-bold text-dark mb-6">Contact Information</h3>
538
+
539
+ <div class="space-y-6">
540
+ <div class="flex items-start">
541
+ <div class="text-primary text-xl mr-4 mt-1">
542
+ <i class="fas fa-map-marker-alt"></i>
543
+ </div>
544
+ <div>
545
+ <h4 class="font-bold text-dark mb-1">Headquarters</h4>
546
+ <p class="text-gray-600">123 Business Avenue, Suite 100<br>City, State 12345</p>
547
+ </div>
548
+ </div>
549
+
550
+ <div class="flex items-center">
551
+ <div class="text-primary text-xl mr-4">
552
+ <i class="fas fa-phone-alt"></i>
553
+ </div>
554
+ <div>
555
+ <h4 class="font-bold text-dark mb-1">Phone</h4>
556
+ <p class="text-gray-600">(123) 456-7890</p>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="flex items-center">
561
+ <div class="text-primary text-xl mr-4">
562
+ <i class="fas fa-envelope"></i>
563
+ </div>
564
+ <div>
565
+ <h4 class="font-bold text-dark mb-1">Email</h4>
566
+ <p class="text-gray-600">info@marketspire.com</p>
567
+ </div>
568
+ </div>
569
+
570
+ <div class="flex items-center">
571
+ <div class="text-primary text-xl mr-4">
572
+ <i class="fas fa-clock"></i>
573
+ </div>
574
+ <div>
575
+ <h4 class="font-bold text-dark mb-1">Hours</h4>
576
+ <p class="text-gray-600">Monday - Friday: 9am - 6pm<br>Saturday: 10am - 4pm</p>
577
+ </div>
578
+ </div>
579
+ </div>
580
+
581
+ <div class="mt-8">
582
+ <h4 class="font-bold text-dark mb-4">Follow Us</h4>
583
+ <div class="flex space-x-4">
584
+ <a href="#" class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center hover:bg-primary-dark transition">
585
+ <i class="fab fa-facebook-f"></i>
586
+ </a>
587
+ <a href="#" class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center hover:bg-primary-dark transition">
588
+ <i class="fab fa-twitter"></i>
589
+ </a>
590
+ <a href="#" class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center hover:bg-primary-dark transition">
591
+ <i class="fab fa-instagram"></i>
592
+ </a>
593
+ <a href="#" class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center hover:bg-primary-dark transition">
594
+ <i class="fab fa-linkedin-in"></i>
595
+ </a>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </section>
603
+
604
+ <!-- Newsletter Section -->
605
+ <section class="py-16 bg-gray-50">
606
+ <div class="container mx-auto px-6 max-w-4xl text-center">
607
+ <h2 class="text-2xl md:text-3xl font-bold text-dark mb-4">Stay Updated</h2>
608
+ <p class="text-gray-600 mb-8">
609
+ Subscribe to our newsletter for the latest updates, promotions, and news from Marketspire.
610
+ </p>
611
+
612
+ <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
613
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
614
+ <button type="submit" class="btn-primary text-white font-semibold px-6 py-3 rounded-lg whitespace-nowrap">
615
+ Subscribe
616
+ </button>
617
+ </form>
618
+ </div>
619
+ </section>
620
+
621
+ <!-- Footer -->
622
+ <footer class="bg-dark text-white py-12">
623
+ <div class="container mx-auto px-6">
624
+ <div class="grid md:grid-cols-4 gap-12 mb-12">
625
+ <div>
626
+ <div class="flex items-center mb-4">
627
+ <i class="fas fa-store text-2xl text-primary mr-2"></i>
628
+ <span class="text-xl font-bold">MARKETSPIRE</span>
629
+ </div>
630
+ <p class="text-gray-400 mb-4">
631
+ Premium retail and food experiences crafted with care and quality.
632
+ </p>
633
+ <div class="flex space-x-4">
634
+ <a href="#" class="text-gray-400 hover:text-white transition">
635
+ <i class="fab fa-facebook-f"></i>
636
+ </a>
637
+ <a href="#" class="text-gray-400 hover:text-white transition">
638
+ <i class="fab fa-twitter"></i>
639
+ </a>
640
+ <a href="#" class="text-gray-400 hover:text-white transition">
641
+ <i class="fab fa-instagram"></i>
642
+ </a>
643
+ <a href="#" class="text-gray-400 hover:text-white transition">
644
+ <i class="fab fa-linkedin-in"></i>
645
+ </a>
646
+ </div>
647
+ </div>
648
+
649
+ <div>
650
+ <h4 class="text-lg font-bold mb-4">Quick Links</h4>
651
+ <ul class="space-y-2">
652
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li>
653
+ <li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li>
654
+ <li><a href="#locations" class="text-gray-400 hover:text-white transition">Locations</a></li>
655
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
656
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
657
+ </ul>
658
+ </div>
659
+
660
+ <div>
661
+ <h4 class="text-lg font-bold mb-4">Services</h4>
662
+ <ul class="space-y-2">
663
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Retail Shopping</a></li>
664
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Gourmet Food</a></li>
665
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Catering</a></li>
666
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Online Ordering</a></li>
667
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Delivery</a></li>
668
+ </ul>
669
+ </div>
670
+
671
+ <div>
672
+ <h4 class="text-lg font-bold mb-4">Contact</h4>
673
+ <ul class="space-y-2">
674
+ <li class="flex items-start">
675
+ <i class="fas fa-map-marker-alt text-gray-400 mt-1 mr-2"></i>
676
+ <span class="text-gray-400">123 Business Ave, City</span>
677
+ </li>
678
+ <li class="flex items-center">
679
+ <i class="fas fa-phone-alt text-gray-400 mr-2"></i>
680
+ <span class="text-gray-400">(123) 456-7890</span>
681
+ </li>
682
+ <li class="flex items-center">
683
+ <i class="fas fa-envelope text-gray-400 mr-2"></i>
684
+ <span class="text-gray-400">info@marketspire.com</span>
685
+ </li>
686
+ </ul>
687
+ </div>
688
+ </div>
689
+
690
+ <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
691
+ <p class="text-gray-400 mb-4 md:mb-0">
692
+ &copy; 2023 Marketspire. All rights reserved.
693
+ </p>
694
+ <div class="flex space-x-6">
695
+ <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
696
+ <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
697
+ <a href="#" class="text-gray-400 hover:text-white transition">Sitemap</a>
698
+ </div>
699
+ </div>
700
+ </div>
701
+ </footer>
702
+
703
+ <script>
704
+ // Smooth scroll for anchor links with offset for fixed header
705
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
706
+ anchor.addEventListener('click', function(e) {
707
+ const targetId = this.getAttribute('href').slice(1);
708
+ const target = document.getElementById(targetId);
709
+ if (target) {
710
+ e.preventDefault();
711
+ const headerOffset = document.querySelector('nav').offsetHeight;
712
+ const elementPosition = target.getBoundingClientRect().top + window.pageYOffset;
713
+ const offsetPosition = elementPosition - headerOffset;
714
+
715
+ window.scrollTo({
716
+ top: offsetPosition,
717
+ behavior: 'smooth'
718
+ });
719
+ }
720
+ });
721
+ });
722
+
723
+ // Mobile menu toggle functionality would go here
724
+ </script>
725
+ <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=krishgokul92/marketspire3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
726
+ </html>