mido09 commited on
Commit
313d55c
·
verified ·
1 Parent(s): efdce17

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +566 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Usgrafi
3
- emoji: 😻
4
- colorFrom: gray
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: usgrafi
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: yellow
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,566 @@
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>LUXE | Premium Marketing Solutions</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=Montserrat:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .hero-gradient {
18
+ background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
19
+ }
20
+
21
+ .service-card:hover {
22
+ transform: translateY(-10px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+
26
+ .testimonial-card {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ .testimonial-card:hover {
31
+ transform: scale(1.03);
32
+ }
33
+
34
+ .nav-link::after {
35
+ content: '';
36
+ display: block;
37
+ width: 0;
38
+ height: 2px;
39
+ background: #d4af37;
40
+ transition: width 0.3s;
41
+ }
42
+
43
+ .nav-link:hover::after {
44
+ width: 100%;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-50 text-gray-800">
49
+ <!-- Navigation -->
50
+ <nav class="fixed w-full bg-white/90 backdrop-blur-md shadow-sm z-50">
51
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
52
+ <div class="flex justify-between h-20 items-center">
53
+ <div class="flex-shrink-0 flex items-center">
54
+ <span class="text-2xl font-bold text-gray-900 tracking-tight">LUXE</span>
55
+ <span class="ml-2 text-xs font-light text-gray-500">MARKETING GROUP</span>
56
+ </div>
57
+ <div class="hidden md:block">
58
+ <div class="ml-10 flex items-center space-x-8">
59
+ <a href="#home" class="nav-link text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">Home</a>
60
+ <a href="#services" class="nav-link text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">Services</a>
61
+ <a href="#about" class="nav-link text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">About</a>
62
+ <a href="#clients" class="nav-link text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">Clients</a>
63
+ <a href="#contact" class="nav-link text-gray-900 hover:text-gray-600 px-3 py-2 text-sm font-medium">Contact</a>
64
+ <a href="#contact" class="bg-black text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition duration-300">Get Started</a>
65
+ </div>
66
+ </div>
67
+ <div class="-mr-2 flex md:hidden">
68
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 focus:outline-none">
69
+ <i class="fas fa-bars text-xl"></i>
70
+ </button>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Mobile menu -->
76
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
77
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
78
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-gray-600">Home</a>
79
+ <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-gray-600">Services</a>
80
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-gray-600">About</a>
81
+ <a href="#clients" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-gray-600">Clients</a>
82
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-gray-600">Contact</a>
83
+ <a href="#contact" class="block w-full text-center bg-black text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition duration-300 mt-2">Get Started</a>
84
+ </div>
85
+ </div>
86
+ </nav>
87
+
88
+ <!-- Hero Section -->
89
+ <section id="home" class="relative h-screen flex items-center justify-center bg-gray-900 overflow-hidden">
90
+ <div class="absolute inset-0">
91
+ <img src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Luxury Office" class="w-full h-full object-cover">
92
+ <div class="absolute inset-0 hero-gradient"></div>
93
+ </div>
94
+
95
+ <div class="relative z-10 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto text-center">
96
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">
97
+ Elevate Your <span class="text-yellow-500">Brand</span> <br>To New Heights
98
+ </h1>
99
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10">
100
+ We craft bespoke marketing strategies that transform local businesses into market leaders.
101
+ </p>
102
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
103
+ <a href="#contact" class="bg-yellow-600 hover:bg-yellow-700 text-white px-8 py-4 rounded-full text-lg font-semibold transition duration-300">
104
+ Schedule Consultation
105
+ </a>
106
+ <a href="#services" class="bg-transparent border-2 border-white hover:bg-white/10 text-white px-8 py-4 rounded-full text-lg font-semibold transition duration-300">
107
+ Explore Services
108
+ </a>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="absolute bottom-10 left-0 right-0 flex justify-center">
113
+ <a href="#services" class="text-white animate-bounce">
114
+ <i class="fas fa-chevron-down text-2xl"></i>
115
+ </a>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- Stats Section -->
120
+ <section class="py-16 bg-white">
121
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
122
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
123
+ <div class="p-6">
124
+ <div class="text-4xl font-bold text-yellow-600 mb-2">250+</div>
125
+ <div class="text-gray-600">Satisfied Clients</div>
126
+ </div>
127
+ <div class="p-6">
128
+ <div class="text-4xl font-bold text-yellow-600 mb-2">$500M+</div>
129
+ <div class="text-gray-600">Revenue Generated</div>
130
+ </div>
131
+ <div class="p-6">
132
+ <div class="text-4xl font-bold text-yellow-600 mb-2">98%</div>
133
+ <div class="text-gray-600">Client Retention</div>
134
+ </div>
135
+ <div class="p-6">
136
+ <div class="text-4xl font-bold text-yellow-600 mb-2">15+</div>
137
+ <div class="text-gray-600">Industry Awards</div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </section>
142
+
143
+ <!-- Services Section -->
144
+ <section id="services" class="py-20 bg-gray-50">
145
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
146
+ <div class="text-center mb-16">
147
+ <span class="text-yellow-600 font-semibold">OUR EXPERTISE</span>
148
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mt-4">Premium Marketing Solutions</h2>
149
+ <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
150
+ We deliver exceptional results through our comprehensive suite of marketing services tailored for ambitious businesses.
151
+ </p>
152
+ </div>
153
+
154
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
155
+ <!-- Service 1 -->
156
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
157
+ <div class="h-48 bg-gray-900 flex items-center justify-center">
158
+ <i class="fas fa-bullseye text-5xl text-yellow-500"></i>
159
+ </div>
160
+ <div class="p-8">
161
+ <div class="uppercase tracking-wide text-sm text-yellow-600 font-semibold">Brand Strategy</div>
162
+ <h3 class="mt-2 text-xl font-semibold text-gray-900">Luxury Brand Positioning</h3>
163
+ <p class="mt-3 text-gray-600">
164
+ Craft a distinctive brand identity that commands premium pricing and customer loyalty in your market.
165
+ </p>
166
+ <div class="mt-6 flex items-center">
167
+ <a href="#" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn more</a>
168
+ <i class="fas fa-arrow-right ml-2 text-yellow-600"></i>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Service 2 -->
174
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
175
+ <div class="h-48 bg-gray-900 flex items-center justify-center">
176
+ <i class="fas fa-chart-line text-5xl text-yellow-500"></i>
177
+ </div>
178
+ <div class="p-8">
179
+ <div class="uppercase tracking-wide text-sm text-yellow-600 font-semibold">Digital Growth</div>
180
+ <h3 class="mt-2 text-xl font-semibold text-gray-900">Performance Marketing</h3>
181
+ <p class="mt-3 text-gray-600">
182
+ Data-driven campaigns that deliver measurable ROI through precision targeting and conversion optimization.
183
+ </p>
184
+ <div class="mt-6 flex items-center">
185
+ <a href="#" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn more</a>
186
+ <i class="fas fa-arrow-right ml-2 text-yellow-600"></i>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Service 3 -->
192
+ <div class="service-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
193
+ <div class="h-48 bg-gray-900 flex items-center justify-center">
194
+ <i class="fas fa-users text-5xl text-yellow-500"></i>
195
+ </div>
196
+ <div class="p-8">
197
+ <div class="uppercase tracking-wide text-sm text-yellow-600 font-semibold">Community</div>
198
+ <h3 class="mt-2 text-xl font-semibold text-gray-900">Local Influence</h3>
199
+ <p class="mt-3 text-gray-600">
200
+ Build authentic connections with your community through strategic partnerships and influencer collaborations.
201
+ </p>
202
+ <div class="mt-6 flex items-center">
203
+ <a href="#" class="text-yellow-600 hover:text-yellow-700 font-medium">Learn more</a>
204
+ <i class="fas fa-arrow-right ml-2 text-yellow-600"></i>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="mt-16 text-center">
211
+ <a href="#contact" class="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-black hover:bg-gray-800 transition duration-300">
212
+ View All Services
213
+ <i class="fas fa-arrow-right ml-2"></i>
214
+ </a>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- About Section -->
220
+ <section id="about" class="py-20 bg-white">
221
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
222
+ <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
223
+ <div class="mb-12 lg:mb-0">
224
+ <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Our Team" class="rounded-xl shadow-xl w-full h-auto">
225
+ </div>
226
+ <div>
227
+ <span class="text-yellow-600 font-semibold">ABOUT US</span>
228
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mt-4">The LUXE Difference</h2>
229
+ <p class="mt-6 text-gray-600">
230
+ Founded in 2010, LUXE Marketing Group has established itself as the premier marketing partner for discerning local businesses seeking exponential growth without compromising their values.
231
+ </p>
232
+ <p class="mt-4 text-gray-600">
233
+ Our team of elite strategists, creatives, and analysts bring decades of combined experience from luxury retail, hospitality, and premium service industries.
234
+ </p>
235
+
236
+ <div class="mt-8 grid grid-cols-2 gap-4">
237
+ <div class="flex items-start">
238
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
239
+ <i class="fas fa-check text-yellow-600"></i>
240
+ </div>
241
+ <div class="ml-4">
242
+ <h4 class="text-lg font-medium text-gray-900">Bespoke Solutions</h4>
243
+ <p class="mt-1 text-gray-600">No cookie-cutter approaches</p>
244
+ </div>
245
+ </div>
246
+ <div class="flex items-start">
247
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
248
+ <i class="fas fa-check text-yellow-600"></i>
249
+ </div>
250
+ <div class="ml-4">
251
+ <h4 class="text-lg font-medium text-gray-900">Discretion Assured</h4>
252
+ <p class="mt-1 text-gray-600">Your secrets are safe with us</p>
253
+ </div>
254
+ </div>
255
+ <div class="flex items-start">
256
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
257
+ <i class="fas fa-check text-yellow-600"></i>
258
+ </div>
259
+ <div class="ml-4">
260
+ <h4 class="text-lg font-medium text-gray-900">Elite Network</h4>
261
+ <p class="mt-1 text-gray-600">Access to premium partnerships</p>
262
+ </div>
263
+ </div>
264
+ <div class="flex items-start">
265
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
266
+ <i class="fas fa-check text-yellow-600"></i>
267
+ </div>
268
+ <div class="ml-4">
269
+ <h4 class="text-lg font-medium text-gray-900">White Glove Service</h4>
270
+ <p class="mt-1 text-gray-600">Dedicated account management</p>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="mt-10">
276
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full text-white bg-black hover:bg-gray-800 transition duration-300">
277
+ Meet Our Team
278
+ <i class="fas fa-arrow-right ml-2"></i>
279
+ </a>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </section>
285
+
286
+ <!-- Clients Section -->
287
+ <section id="clients" class="py-20 bg-gray-900 text-white">
288
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
289
+ <div class="text-center mb-16">
290
+ <span class="text-yellow-500 font-semibold">OUR PRESTIGE</span>
291
+ <h2 class="text-3xl md:text-4xl font-bold mt-4">Trusted by Elite Brands</h2>
292
+ <p class="mt-4 text-gray-300 max-w-2xl mx-auto">
293
+ We've had the privilege of partnering with some of the most respected names in luxury retail, hospitality, and professional services.
294
+ </p>
295
+ </div>
296
+
297
+ <!-- Client Logos -->
298
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-center">
299
+ <div class="flex justify-center p-6 grayscale hover:grayscale-0 transition duration-300">
300
+ <span class="text-2xl font-bold italic">Savoir</span>
301
+ </div>
302
+ <div class="flex justify-center p-6 grayscale hover:grayscale-0 transition duration-300">
303
+ <span class="text-2xl font-bold italic">Montclair</span>
304
+ </div>
305
+ <div class="flex justify-center p-6 grayscale hover:grayscale-0 transition duration-300">
306
+ <span class="text-2xl font-bold italic">The Row</span>
307
+ </div>
308
+ <div class="flex justify-center p-6 grayscale hover:grayscale-0 transition duration-300">
309
+ <span class="text-2xl font-bold italic">Vesper</span>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Testimonials -->
314
+ <div class="mt-20 grid grid-cols-1 md:grid-cols-2 gap-8">
315
+ <!-- Testimonial 1 -->
316
+ <div class="testimonial-card bg-gray-800 rounded-xl p-8">
317
+ <div class="flex items-center mb-6">
318
+ <div class="flex-shrink-0 h-12 w-12 rounded-full bg-gray-700 flex items-center justify-center">
319
+ <i class="fas fa-user text-gray-400"></i>
320
+ </div>
321
+ <div class="ml-4">
322
+ <h4 class="text-lg font-medium text-white">Sarah Kensington</h4>
323
+ <p class="text-gray-400">CEO, The Kensington Group</p>
324
+ </div>
325
+ </div>
326
+ <p class="text-gray-300 italic">
327
+ "LUXE transformed our boutique hotel chain from a local secret to an internationally recognized brand. Their strategic approach to luxury marketing is unparalleled."
328
+ </p>
329
+ <div class="mt-4 flex text-yellow-400">
330
+ <i class="fas fa-star"></i>
331
+ <i class="fas fa-star ml-1"></i>
332
+ <i class="fas fa-star ml-1"></i>
333
+ <i class="fas fa-star ml-1"></i>
334
+ <i class="fas fa-star ml-1"></i>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Testimonial 2 -->
339
+ <div class="testimonial-card bg-gray-800 rounded-xl p-8">
340
+ <div class="flex items-center mb-6">
341
+ <div class="flex-shrink-0 h-12 w-12 rounded-full bg-gray-700 flex items-center justify-center">
342
+ <i class="fas fa-user text-gray-400"></i>
343
+ </div>
344
+ <div class="ml-4">
345
+ <h4 class="text-lg font-medium text-white">James Vanderbilt</h4>
346
+ <p class="text-gray-400">Founder, Vanderbilt Jewelers</p>
347
+ </div>
348
+ </div>
349
+ <p class="text-gray-300 italic">
350
+ "Working with LUXE was the best business decision we've made. They understand the nuances of luxury consumer behavior better than anyone in the industry."
351
+ </p>
352
+ <div class="mt-4 flex text-yellow-400">
353
+ <i class="fas fa-star"></i>
354
+ <i class="fas fa-star ml-1"></i>
355
+ <i class="fas fa-star ml-1"></i>
356
+ <i class="fas fa-star ml-1"></i>
357
+ <i class="fas fa-star ml-1"></i>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </section>
363
+
364
+ <!-- CTA Section -->
365
+ <section class="py-20 bg-yellow-600 text-white">
366
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
367
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Business?</h2>
368
+ <p class="text-xl text-yellow-100 max-w-3xl mx-auto mb-10">
369
+ Schedule a confidential consultation with our executive team to discuss your unique needs.
370
+ </p>
371
+ <a href="#contact" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-full text-yellow-700 bg-white hover:bg-gray-100 transition duration-300">
372
+ Get Started Today
373
+ <i class="fas fa-arrow-right ml-2"></i>
374
+ </a>
375
+ </div>
376
+ </section>
377
+
378
+ <!-- Contact Section -->
379
+ <section id="contact" class="py-20 bg-white">
380
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
381
+ <div class="lg:grid lg:grid-cols-2 lg:gap-16">
382
+ <div class="mb-12 lg:mb-0">
383
+ <span class="text-yellow-600 font-semibold">GET IN TOUCH</span>
384
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mt-4">Let's Elevate Your Brand Together</h2>
385
+ <p class="mt-6 text-gray-600">
386
+ Our executive team is available for discreet consultations to discuss how we can help you achieve your business objectives.
387
+ </p>
388
+
389
+ <div class="mt-10 space-y-6">
390
+ <div class="flex items-start">
391
+ <div class="flex-shrink-0 h-12 w-12 rounded-full bg-yellow-100 flex items-center justify-center">
392
+ <i class="fas fa-map-marker-alt text-yellow-600"></i>
393
+ </div>
394
+ <div class="ml-4">
395
+ <h4 class="text-lg font-medium text-gray-900">Our Headquarters</h4>
396
+ <p class="mt-1 text-gray-600">450 Park Avenue, 15th Floor<br>New York, NY 10022</p>
397
+ </div>
398
+ </div>
399
+ <div class="flex items-start">
400
+ <div class="flex-shrink-0 h-12 w-12 rounded-full bg-yellow-100 flex items-center justify-center">
401
+ <i class="fas fa-phone-alt text-yellow-600"></i>
402
+ </div>
403
+ <div class="ml-4">
404
+ <h4 class="text-lg font-medium text-gray-900">Contact</h4>
405
+ <p class="mt-1 text-gray-600">+1 (212) 555-0100<br>[email protected]</p>
406
+ </div>
407
+ </div>
408
+ <div class="flex items-start">
409
+ <div class="flex-shrink-0 h-12 w-12 rounded-full bg-yellow-100 flex items-center justify-center">
410
+ <i class="fas fa-clock text-yellow-600"></i>
411
+ </div>
412
+ <div class="ml-4">
413
+ <h4 class="text-lg font-medium text-gray-900">Hours</h4>
414
+ <p class="mt-1 text-gray-600">Monday - Friday: 9am - 6pm<br>By appointment only</p>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="bg-gray-50 rounded-xl p-8 shadow-md">
421
+ <h3 class="text-2xl font-bold text-gray-900 mb-6">Schedule a Consultation</h3>
422
+ <form>
423
+ <div class="grid grid-cols-1 gap-6">
424
+ <div>
425
+ <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
426
+ <input type="text" id="name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-yellow-500 focus:ring-yellow-500 py-3 px-4" placeholder="Your name">
427
+ </div>
428
+ <div>
429
+ <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
430
+ <input type="email" id="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-yellow-500 focus:ring-yellow-500 py-3 px-4" placeholder="Your email">
431
+ </div>
432
+ <div>
433
+ <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
434
+ <input type="tel" id="phone" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-yellow-500 focus:ring-yellow-500 py-3 px-4" placeholder="Your phone">
435
+ </div>
436
+ <div>
437
+ <label for="service" class="block text-sm font-medium text-gray-700">Service Interest</label>
438
+ <select id="service" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-yellow-500 focus:ring-yellow-500 py-3 px-4">
439
+ <option>Select a service</option>
440
+ <option>Brand Strategy</option>
441
+ <option>Digital Marketing</option>
442
+ <option>Influence & PR</option>
443
+ <option>Comprehensive Package</option>
444
+ </select>
445
+ </div>
446
+ <div>
447
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
448
+ <textarea id="message" rows="4" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-yellow-500 focus:ring-yellow-500 py-3 px-4" placeholder="Tell us about your business needs"></textarea>
449
+ </div>
450
+ <div>
451
+ <button type="submit" class="w-full flex justify-center items-center px-6 py-4 border border-transparent rounded-full shadow-sm text-base font-medium text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 transition duration-300">
452
+ Submit Request
453
+ <i class="fas fa-paper-plane ml-2"></i>
454
+ </button>
455
+ </div>
456
+ </div>
457
+ </form>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </section>
462
+
463
+ <!-- Footer -->
464
+ <footer class="bg-gray-900 text-white py-12">
465
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
466
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
467
+ <div>
468
+ <h3 class="text-xl font-bold mb-4">LUXE</h3>
469
+ <p class="text-gray-400">
470
+ Premium marketing solutions for discerning businesses seeking exponential growth.
471
+ </p>
472
+ <div class="mt-6 flex space-x-4">
473
+ <a href="#" class="text-gray-400 hover:text-white">
474
+ <i class="fab fa-twitter"></i>
475
+ </a>
476
+ <a href="#" class="text-gray-400 hover:text-white">
477
+ <i class="fab fa-linkedin-in"></i>
478
+ </a>
479
+ <a href="#" class="text-gray-400 hover:text-white">
480
+ <i class="fab fa-instagram"></i>
481
+ </a>
482
+ </div>
483
+ </div>
484
+ <div>
485
+ <h4 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Services</h4>
486
+ <ul class="space-y-2">
487
+ <li><a href="#" class="text-gray-400 hover:text-white">Brand Strategy</a></li>
488
+ <li><a href="#" class="text-gray-400 hover:text-white">Digital Marketing</a></li>
489
+ <li><a href="#" class="text-gray-400 hover:text-white">Influence & PR</a></li>
490
+ <li><a href="#" class="text-gray-400 hover:text-white">Market Research</a></li>
491
+ </ul>
492
+ </div>
493
+ <div>
494
+ <h4 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Company</h4>
495
+ <ul class="space-y-2">
496
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
497
+ <li><a href="#" class="text-gray-400 hover:text-white">Our Team</a></li>
498
+ <li><a href="#" class="text-gray-400 hover:text-white">Case Studies</a></li>
499
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
500
+ </ul>
501
+ </div>
502
+ <div>
503
+ <h4 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Legal</h4>
504
+ <ul class="space-y-2">
505
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
506
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
507
+ <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
508
+ </ul>
509
+ </div>
510
+ </div>
511
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
512
+ <p class="text-gray-400 text-sm">
513
+ &copy; 2023 LUXE Marketing Group. All rights reserved.
514
+ </p>
515
+ <div class="mt-4 md:mt-0">
516
+ <a href="#" class="text-gray-400 hover:text-white text-sm mr-4">Privacy Policy</a>
517
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </footer>
522
+
523
+ <script>
524
+ // Mobile menu toggle
525
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
526
+ const menu = document.getElementById('mobile-menu');
527
+ menu.classList.toggle('hidden');
528
+ });
529
+
530
+ // Smooth scrolling for anchor links
531
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
532
+ anchor.addEventListener('click', function (e) {
533
+ e.preventDefault();
534
+
535
+ const targetId = this.getAttribute('href');
536
+ if (targetId === '#') return;
537
+
538
+ const targetElement = document.querySelector(targetId);
539
+ if (targetElement) {
540
+ // Close mobile menu if open
541
+ const mobileMenu = document.getElementById('mobile-menu');
542
+ if (!mobileMenu.classList.contains('hidden')) {
543
+ mobileMenu.classList.add('hidden');
544
+ }
545
+
546
+ // Scroll to target
547
+ window.scrollTo({
548
+ top: targetElement.offsetTop - 80,
549
+ behavior: 'smooth'
550
+ });
551
+ }
552
+ });
553
+ });
554
+
555
+ // Add shadow to navbar on scroll
556
+ window.addEventListener('scroll', function() {
557
+ const nav = document.querySelector('nav');
558
+ if (window.scrollY > 10) {
559
+ nav.classList.add('shadow-lg');
560
+ } else {
561
+ nav.classList.remove('shadow-lg');
562
+ }
563
+ });
564
+ </script>
565
+ <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=mido09/usgrafi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
566
+ </html>