krishgokul92 commited on
Commit
6bea982
·
verified ·
1 Parent(s): 994a610

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +622 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Marketspire
3
- emoji: 😻
4
  colorFrom: pink
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: marketspire
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: blue
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,622 @@
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 - The Business Conglomerate</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
19
+ }
20
+
21
+ .portfolio-item:hover .portfolio-overlay {
22
+ opacity: 1;
23
+ transform: translateY(0);
24
+ }
25
+
26
+ .portfolio-overlay {
27
+ opacity: 0;
28
+ transform: translateY(20px);
29
+ transition: all 0.3s ease;
30
+ }
31
+
32
+ .nav-link::after {
33
+ content: '';
34
+ display: block;
35
+ width: 0;
36
+ height: 2px;
37
+ background: #3b82f6;
38
+ transition: width 0.3s;
39
+ }
40
+
41
+ .nav-link:hover::after {
42
+ width: 100%;
43
+ }
44
+
45
+ .animate-float {
46
+ animation: float 6s ease-in-out infinite;
47
+ }
48
+
49
+ @keyframes float {
50
+ 0% { transform: translateY(0px); }
51
+ 50% { transform: translateY(-20px); }
52
+ 100% { transform: translateY(0px); }
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="bg-gray-50">
57
+ <!-- Navigation -->
58
+ <nav class="fixed w-full bg-white shadow-md z-50">
59
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
60
+ <div class="flex justify-between h-20 items-center">
61
+ <div class="flex-shrink-0 flex items-center">
62
+ <a href="#" class="text-2xl font-bold text-blue-600">
63
+ <span class="text-blue-900">Market</span>spire
64
+ </a>
65
+ </div>
66
+ <div class="hidden md:block">
67
+ <div class="ml-10 flex items-center space-x-8">
68
+ <a href="#home" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Home</a>
69
+ <a href="#about" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">About</a>
70
+ <a href="#businesses" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Our Businesses</a>
71
+ <a href="#values" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Values</a>
72
+ <a href="#contact" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Contact</a>
73
+ </div>
74
+ </div>
75
+ <div class="md:hidden">
76
+ <button id="menu-toggle" class="text-gray-700 hover:text-blue-600 focus:outline-none">
77
+ <i class="fas fa-bars text-2xl"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <!-- Mobile menu -->
83
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
84
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
85
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Home</a>
86
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">About</a>
87
+ <a href="#businesses" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Our Businesses</a>
88
+ <a href="#values" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Values</a>
89
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50">Contact</a>
90
+ </div>
91
+ </div>
92
+ </nav>
93
+
94
+ <!-- Hero Section -->
95
+ <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 gradient-bg text-white">
96
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
97
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
98
+ <div class="mb-12 lg:mb-0">
99
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
100
+ Building Tomorrow's <span class="text-yellow-300">Business</span> Empire
101
+ </h1>
102
+ <p class="text-xl md:text-2xl mb-8 text-blue-100">
103
+ Marketspire is a diversified business conglomerate driving innovation across multiple industries.
104
+ </p>
105
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
106
+ <a href="#businesses" class="bg-white text-blue-600 hover:bg-blue-50 px-8 py-3 rounded-lg font-semibold text-center transition duration-300">
107
+ Explore Our Businesses
108
+ </a>
109
+ <a href="#contact" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-8 py-3 rounded-lg font-semibold text-center transition duration-300">
110
+ Get In Touch
111
+ </a>
112
+ </div>
113
+ </div>
114
+ <div class="relative">
115
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
116
+ alt="Business growth"
117
+ class="rounded-xl shadow-2xl animate-float">
118
+ <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-yellow-400 rounded-full opacity-20"></div>
119
+ <div class="absolute -top-6 -right-6 w-24 h-24 bg-blue-300 rounded-full opacity-20"></div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </section>
124
+
125
+ <!-- About Section -->
126
+ <section id="about" class="py-16 md:py-24 bg-white">
127
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
128
+ <div class="text-center mb-16">
129
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">About Marketspire</h2>
130
+ <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
131
+ </div>
132
+
133
+ <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
134
+ <div class="mb-12 lg:mb-0">
135
+ <div class="bg-gray-100 p-6 rounded-xl shadow-md">
136
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Our Vision</h3>
137
+ <p class="text-gray-600 mb-6">
138
+ To be the most respected and innovative business conglomerate, creating sustainable value across diverse industries while positively impacting communities worldwide.
139
+ </p>
140
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Our Mission</h3>
141
+ <p class="text-gray-600">
142
+ We identify, acquire, and grow businesses with strong potential, leveraging our expertise, resources, and network to create synergies that drive exceptional performance and long-term success.
143
+ </p>
144
+ </div>
145
+ </div>
146
+ <div>
147
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Our Story</h3>
148
+ <p class="text-gray-600 mb-6">
149
+ Founded in 2010, Marketspire began as a single enterprise and has since evolved into a diversified business conglomerate with operations across multiple sectors. Our journey has been marked by strategic acquisitions, organic growth, and a relentless focus on innovation.
150
+ </p>
151
+ <div class="grid grid-cols-2 gap-4">
152
+ <div class="bg-blue-50 p-4 rounded-lg">
153
+ <div class="text-blue-600 text-3xl mb-2">
154
+ <i class="fas fa-building"></i>
155
+ </div>
156
+ <h4 class="font-bold text-gray-800">25+</h4>
157
+ <p class="text-sm text-gray-600">Companies</p>
158
+ </div>
159
+ <div class="bg-blue-50 p-4 rounded-lg">
160
+ <div class="text-blue-600 text-3xl mb-2">
161
+ <i class="fas fa-globe"></i>
162
+ </div>
163
+ <h4 class="font-bold text-gray-800">12</h4>
164
+ <p class="text-sm text-gray-600">Countries</p>
165
+ </div>
166
+ <div class="bg-blue-50 p-4 rounded-lg">
167
+ <div class="text-blue-600 text-3xl mb-2">
168
+ <i class="fas fa-users"></i>
169
+ </div>
170
+ <h4 class="font-bold text-gray-800">5,000+</h4>
171
+ <p class="text-sm text-gray-600">Employees</p>
172
+ </div>
173
+ <div class="bg-blue-50 p-4 rounded-lg">
174
+ <div class="text-blue-600 text-3xl mb-2">
175
+ <i class="fas fa-chart-line"></i>
176
+ </div>
177
+ <h4 class="font-bold text-gray-800">$1.2B</h4>
178
+ <p class="text-sm text-gray-600">Annual Revenue</p>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </section>
185
+
186
+ <!-- Our Businesses Section -->
187
+ <section id="businesses" class="py-16 md:py-24 bg-gray-50">
188
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
189
+ <div class="text-center mb-16">
190
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Business Portfolio</h2>
191
+ <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
192
+ <p class="max-w-2xl mx-auto mt-6 text-gray-600">
193
+ Marketspire's diversified portfolio spans across multiple industries, each contributing to our collective success.
194
+ </p>
195
+ </div>
196
+
197
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
198
+ <!-- Business 1 -->
199
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
200
+ <div class="h-48 bg-blue-100 flex items-center justify-center">
201
+ <i class="fas fa-shopping-cart text-6xl text-blue-600"></i>
202
+ </div>
203
+ <div class="p-6">
204
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Retail & E-Commerce</h3>
205
+ <p class="text-gray-600 mb-4">
206
+ Innovative retail solutions and e-commerce platforms that connect consumers with quality products.
207
+ </p>
208
+ <div class="flex flex-wrap gap-2">
209
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">SpireMart</span>
210
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">UrbanCart</span>
211
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">QuickBuy</span>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Business 2 -->
217
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
218
+ <div class="h-48 bg-green-100 flex items-center justify-center">
219
+ <i class="fas fa-leaf text-6xl text-green-600"></i>
220
+ </div>
221
+ <div class="p-6">
222
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Sustainable Energy</h3>
223
+ <p class="text-gray-600 mb-4">
224
+ Clean energy solutions and sustainable technologies for a greener tomorrow.
225
+ </p>
226
+ <div class="flex flex-wrap gap-2">
227
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">EcoPower</span>
228
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">SolarSpire</span>
229
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">GreenGrid</span>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Business 3 -->
235
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
236
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
237
+ <i class="fas fa-laptop-code text-6xl text-purple-600"></i>
238
+ </div>
239
+ <div class="p-6">
240
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Technology Solutions</h3>
241
+ <p class="text-gray-600 mb-4">
242
+ Cutting-edge software, AI, and digital transformation services for businesses.
243
+ </p>
244
+ <div class="flex flex-wrap gap-2">
245
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">TechNova</span>
246
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">DataSpire</span>
247
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">CloudForge</span>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Business 4 -->
253
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
254
+ <div class="h-48 bg-yellow-100 flex items-center justify-center">
255
+ <i class="fas fa-home text-6xl text-yellow-600"></i>
256
+ </div>
257
+ <div class="p-6">
258
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Real Estate</h3>
259
+ <p class="text-gray-600 mb-4">
260
+ Premium residential and commercial properties with innovative community designs.
261
+ </p>
262
+ <div class="flex flex-wrap gap-2">
263
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full">SpireHomes</span>
264
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full">UrbanNest</span>
265
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full">PrimeSpace</span>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Business 5 -->
271
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
272
+ <div class="h-48 bg-red-100 flex items-center justify-center">
273
+ <i class="fas fa-heartbeat text-6xl text-red-600"></i>
274
+ </div>
275
+ <div class="p-6">
276
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Healthcare</h3>
277
+ <p class="text-gray-600 mb-4">
278
+ Advanced healthcare services, medical technology, and wellness solutions.
279
+ </p>
280
+ <div class="flex flex-wrap gap-2">
281
+ <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">MediSpire</span>
282
+ <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">VitaCare</span>
283
+ <span class="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">HealthPlus</span>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Business 6 -->
289
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
290
+ <div class="h-48 bg-indigo-100 flex items-center justify-center">
291
+ <i class="fas fa-plane text-6xl text-indigo-600"></i>
292
+ </div>
293
+ <div class="p-6">
294
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Logistics & Transportation</h3>
295
+ <p class="text-gray-600 mb-4">
296
+ Efficient supply chain solutions and smart transportation networks.
297
+ </p>
298
+ <div class="flex flex-wrap gap-2">
299
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">SwiftLogix</span>
300
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">CargoSpire</span>
301
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">TransGlobal</span>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="text-center mt-16">
308
+ <a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold px-8 py-3 rounded-lg transition duration-300">
309
+ Explore Partnership Opportunities
310
+ </a>
311
+ </div>
312
+ </div>
313
+ </section>
314
+
315
+ <!-- Values Section -->
316
+ <section id="values" class="py-16 md:py-24 bg-white">
317
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
318
+ <div class="text-center mb-16">
319
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Core Values</h2>
320
+ <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
321
+ <p class="max-w-2xl mx-auto mt-6 text-gray-600">
322
+ These principles guide every decision we make and every action we take across all our businesses.
323
+ </p>
324
+ </div>
325
+
326
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
327
+ <div class="text-center p-6 bg-blue-50 rounded-xl">
328
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
329
+ <i class="fas fa-lightbulb text-2xl text-blue-600"></i>
330
+ </div>
331
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Innovation</h3>
332
+ <p class="text-gray-600">
333
+ We embrace change and continuously seek better ways to serve our customers and improve our businesses.
334
+ </p>
335
+ </div>
336
+
337
+ <div class="text-center p-6 bg-green-50 rounded-xl">
338
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
339
+ <i class="fas fa-handshake text-2xl text-green-600"></i>
340
+ </div>
341
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Integrity</h3>
342
+ <p class="text-gray-600">
343
+ We conduct business with honesty, transparency, and respect for all stakeholders.
344
+ </p>
345
+ </div>
346
+
347
+ <div class="text-center p-6 bg-yellow-50 rounded-xl">
348
+ <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
349
+ <i class="fas fa-chart-line text-2xl text-yellow-600"></i>
350
+ </div>
351
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Excellence</h3>
352
+ <p class="text-gray-600">
353
+ We strive for the highest standards in everything we do, delivering quality and value consistently.
354
+ </p>
355
+ </div>
356
+
357
+ <div class="text-center p-6 bg-purple-50 rounded-xl">
358
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
359
+ <i class="fas fa-users text-2xl text-purple-600"></i>
360
+ </div>
361
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Collaboration</h3>
362
+ <p class="text-gray-600">
363
+ We believe in the power of teamwork and shared success across our diverse portfolio.
364
+ </p>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="mt-16 bg-gray-100 rounded-xl p-8 md:p-12">
369
+ <div class="md:flex items-center">
370
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
371
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Our Growth Strategy</h3>
372
+ <p class="text-gray-600 mb-6">
373
+ Marketspire follows a disciplined approach to growth, combining strategic acquisitions with organic expansion. We identify businesses with strong fundamentals and growth potential, then provide the resources and expertise to help them thrive.
374
+ </p>
375
+ <ul class="space-y-3 text-gray-600">
376
+ <li class="flex items-start">
377
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
378
+ <span>Strategic acquisitions in high-growth sectors</span>
379
+ </li>
380
+ <li class="flex items-start">
381
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
382
+ <span>Operational excellence across all businesses</span>
383
+ </li>
384
+ <li class="flex items-start">
385
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
386
+ <span>Cross-business synergies and collaboration</span>
387
+ </li>
388
+ <li class="flex items-start">
389
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
390
+ <span>Investment in innovation and technology</span>
391
+ </li>
392
+ </ul>
393
+ </div>
394
+ <div class="md:w-1/2">
395
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
396
+ alt="Business growth"
397
+ class="rounded-lg shadow-md w-full">
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </section>
403
+
404
+ <!-- Contact Section -->
405
+ <section id="contact" class="py-16 md:py-24 bg-gray-50">
406
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
407
+ <div class="text-center mb-16">
408
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Get In Touch</h2>
409
+ <div class="w-20 h-1 bg-blue-600 mx-auto"></div>
410
+ <p class="max-w-2xl mx-auto mt-6 text-gray-600">
411
+ Whether you're interested in partnership opportunities, investment inquiries, or media relations, we'd love to hear from you.
412
+ </p>
413
+ </div>
414
+
415
+ <div class="grid md:grid-cols-2 gap-12">
416
+ <div>
417
+ <form class="space-y-6">
418
+ <div>
419
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
420
+ <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-300" placeholder="Your name">
421
+ </div>
422
+ <div>
423
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
424
+ <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-300" placeholder="your@email.com">
425
+ </div>
426
+ <div>
427
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
428
+ <select id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-300">
429
+ <option value="">Select a subject</option>
430
+ <option value="partnership">Business Partnership</option>
431
+ <option value="investment">Investment Inquiry</option>
432
+ <option value="media">Media Relations</option>
433
+ <option value="careers">Career Opportunities</option>
434
+ <option value="other">Other</option>
435
+ </select>
436
+ </div>
437
+ <div>
438
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
439
+ <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-300" placeholder="Your message"></textarea>
440
+ </div>
441
+ <div>
442
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg transition duration-300">
443
+ Send Message
444
+ </button>
445
+ </div>
446
+ </form>
447
+ </div>
448
+
449
+ <div>
450
+ <div class="bg-white p-8 rounded-xl shadow-md h-full">
451
+ <h3 class="text-xl font-bold text-gray-800 mb-6">Contact Information</h3>
452
+
453
+ <div class="space-y-6">
454
+ <div class="flex items-start">
455
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg">
456
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
457
+ </div>
458
+ <div class="ml-4">
459
+ <h4 class="font-medium text-gray-800">Headquarters</h4>
460
+ <p class="text-gray-600 mt-1">123 Business Avenue, Suite 500<br>New York, NY 10001, USA</p>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="flex items-start">
465
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg">
466
+ <i class="fas fa-phone-alt text-blue-600"></i>
467
+ </div>
468
+ <div class="ml-4">
469
+ <h4 class="font-medium text-gray-800">Phone</h4>
470
+ <p class="text-gray-600 mt-1">+1 (212) 555-0100<br>Mon-Fri, 9am-6pm EST</p>
471
+ </div>
472
+ </div>
473
+
474
+ <div class="flex items-start">
475
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-lg">
476
+ <i class="fas fa-envelope text-blue-600"></i>
477
+ </div>
478
+ <div class="ml-4">
479
+ <h4 class="font-medium text-gray-800">Email</h4>
480
+ <p class="text-gray-600 mt-1">info@marketspire.com<br>inquiries@marketspire.com</p>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="mt-8">
486
+ <h4 class="font-medium text-gray-800 mb-4">Follow Us</h4>
487
+ <div class="flex space-x-4">
488
+ <a href="#" class="w-10 h-10 bg-blue-100 hover:bg-blue-200 rounded-full flex items-center justify-center text-blue-600 transition duration-300">
489
+ <i class="fab fa-linkedin-in"></i>
490
+ </a>
491
+ <a href="#" class="w-10 h-10 bg-blue-100 hover:bg-blue-200 rounded-full flex items-center justify-center text-blue-600 transition duration-300">
492
+ <i class="fab fa-twitter"></i>
493
+ </a>
494
+ <a href="#" class="w-10 h-10 bg-blue-100 hover:bg-blue-200 rounded-full flex items-center justify-center text-blue-600 transition duration-300">
495
+ <i class="fab fa-facebook-f"></i>
496
+ </a>
497
+ <a href="#" class="w-10 h-10 bg-blue-100 hover:bg-blue-200 rounded-full flex items-center justify-center text-blue-600 transition duration-300">
498
+ <i class="fab fa-instagram"></i>
499
+ </a>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </section>
507
+
508
+ <!-- Footer -->
509
+ <footer class="bg-gray-900 text-white py-12">
510
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
511
+ <div class="grid md:grid-cols-4 gap-8">
512
+ <div>
513
+ <a href="#" class="text-2xl font-bold text-white mb-4 inline-block">
514
+ <span class="text-blue-400">Market</span>spire
515
+ </a>
516
+ <p class="text-gray-400 mb-6">
517
+ Building businesses that shape the future through innovation, collaboration, and sustainable growth.
518
+ </p>
519
+ <div class="flex space-x-4">
520
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
521
+ <i class="fab fa-linkedin-in"></i>
522
+ </a>
523
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
524
+ <i class="fab fa-twitter"></i>
525
+ </a>
526
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
527
+ <i class="fab fa-facebook-f"></i>
528
+ </a>
529
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
530
+ <i class="fab fa-instagram"></i>
531
+ </a>
532
+ </div>
533
+ </div>
534
+
535
+ <div>
536
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
537
+ <ul class="space-y-2">
538
+ <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
539
+ <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
540
+ <li><a href="#businesses" class="text-gray-400 hover:text-white transition duration-300">Our Businesses</a></li>
541
+ <li><a href="#values" class="text-gray-400 hover:text-white transition duration-300">Our Values</a></li>
542
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
543
+ </ul>
544
+ </div>
545
+
546
+ <div>
547
+ <h4 class="text-lg font-semibold mb-4">Business Areas</h4>
548
+ <ul class="space-y-2">
549
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Retail & E-Commerce</a></li>
550
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Sustainable Energy</a></li>
551
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Technology Solutions</a></li>
552
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Real Estate</a></li>
553
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Healthcare</a></li>
554
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Logistics</a></li>
555
+ </ul>
556
+ </div>
557
+
558
+ <div>
559
+ <h4 class="text-lg font-semibold mb-4">Newsletter</h4>
560
+ <p class="text-gray-400 mb-4">
561
+ Subscribe to our newsletter for the latest updates and insights from Marketspire.
562
+ </p>
563
+ <form class="flex">
564
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full">
565
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition duration-300">
566
+ <i class="fas fa-paper-plane"></i>
567
+ </button>
568
+ </form>
569
+ </div>
570
+ </div>
571
+
572
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
573
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">
574
+ &copy; 2023 Marketspire. All rights reserved.
575
+ </p>
576
+ <div class="flex space-x-6">
577
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Privacy Policy</a>
578
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Terms of Service</a>
579
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Cookies Policy</a>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </footer>
584
+
585
+ <script>
586
+ // Mobile menu toggle
587
+ document.getElementById('menu-toggle').addEventListener('click', function() {
588
+ const mobileMenu = document.getElementById('mobile-menu');
589
+ mobileMenu.classList.toggle('hidden');
590
+ });
591
+
592
+ // Smooth scrolling for anchor links
593
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
594
+ anchor.addEventListener('click', function (e) {
595
+ e.preventDefault();
596
+
597
+ const targetId = this.getAttribute('href');
598
+ const targetElement = document.querySelector(targetId);
599
+
600
+ if (targetElement) {
601
+ // Close mobile menu if open
602
+ const mobileMenu = document.getElementById('mobile-menu');
603
+ mobileMenu.classList.add('hidden');
604
+
605
+ // Scroll to target
606
+ window.scrollTo({
607
+ top: targetElement.offsetTop - 80,
608
+ behavior: 'smooth'
609
+ });
610
+ }
611
+ });
612
+ });
613
+
614
+ // Form submission (prevent default for demo)
615
+ document.querySelector('form').addEventListener('submit', function(e) {
616
+ e.preventDefault();
617
+ alert('Thank you for your message! This is a demo form and no data will be sent.');
618
+ this.reset();
619
+ });
620
+ </script>
621
+ <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/marketspire" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
622
+ </html>