Hugging Face's logo

Spaces:
Youssefmahboub
/
dqsdsq
Running

App Files Community
Youssefmahboub commited on
Commit
747419e
·
verified ·
1 Parent(s): a66215a

Make the hero section as a background image and remove the the image on the right - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +973 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dqsdsq
3
- emoji: 🐢
4
- colorFrom: indigo
5
- colorTo: blue
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: dqsdsq
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: red
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,973 @@
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>Nexus | Creative 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
+ /* Custom animations */
11
+ @keyframes float {
12
+ 0%, 100% { transform: translateY(0); }
13
+ 50% { transform: translateY(-20px); }
14
+ }
15
+ .floating {
16
+ animation: float 6s ease-in-out infinite;
17
+ }
18
+
19
+ /* Gradient text */
20
+ .gradient-text {
21
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
22
+ -webkit-background-clip: text;
23
+ background-clip: text;
24
+ color: transparent;
25
+ }
26
+
27
+ /* Custom scrollbar */
28
+ ::-webkit-scrollbar {
29
+ width: 8px;
30
+ }
31
+ ::-webkit-scrollbar-track {
32
+ background: #f1f1f1;
33
+ }
34
+ ::-webkit-scrollbar-thumb {
35
+ background: linear-gradient(#3b82f6, #8b5cf6);
36
+ border-radius: 10px;
37
+ }
38
+
39
+ /* Glass morphism effect */
40
+ .glass {
41
+ background: rgba(255, 255, 255, 0.1);
42
+ backdrop-filter: blur(10px);
43
+ -webkit-backdrop-filter: blur(10px);
44
+ border: 1px solid rgba(255, 255, 255, 0.2);
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="font-sans bg-gray-50 text-gray-800 overflow-x-hidden">
49
+ <!-- Preloader -->
50
+ <div id="preloader" class="fixed inset-0 bg-white z-50 flex items-center justify-center">
51
+ <div class="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
52
+ </div>
53
+
54
+ <!-- Navigation -->
55
+ <nav class="fixed w-full z-40 glass py-4 px-6 lg:px-16 transition-all duration-300">
56
+ <div class="flex justify-between items-center">
57
+ <a href="#" class="text-2xl font-bold gradient-text">NEXUS</a>
58
+
59
+ <div class="hidden lg:flex space-x-10 items-center">
60
+ <a href="#home" class="hover:text-blue-500 transition">Home</a>
61
+ <a href="#services" class="hover:text-blue-500 transition">Services</a>
62
+ <a href="#portfolio" class="hover:text-blue-500 transition">Portfolio</a>
63
+ <a href="#about" class="hover:text-blue-500 transition">About</a>
64
+ <a href="#testimonials" class="hover:text-blue-500 transition">Testimonials</a>
65
+ <a href="#contact" class="hover:text-blue-500 transition">Contact</a>
66
+ <button class="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 py-2 rounded-full hover:shadow-lg transition">Get Started</button>
67
+ </div>
68
+
69
+ <button id="mobile-menu-button" class="lg:hidden text-gray-800">
70
+ <i class="fas fa-bars text-2xl"></i>
71
+ </button>
72
+ </div>
73
+
74
+ <!-- Mobile menu -->
75
+ <div id="mobile-menu" class="hidden lg:hidden bg-white mt-4 p-6 rounded-lg shadow-xl">
76
+ <div class="flex flex-col space-y-4">
77
+ <a href="#home" class="hover:text-blue-500 transition">Home</a>
78
+ <a href="#services" class="hover:text-blue-500 transition">Services</a>
79
+ <a href="#portfolio" class="hover:text-blue-500 transition">Portfolio</a>
80
+ <a href="#about" class="hover:text-blue-500 transition">About</a>
81
+ <a href="#testimonials" class="hover:text-blue-500 transition">Testimonials</a>
82
+ <a href="#contact" class="hover:text-blue-500 transition">Contact</a>
83
+ <button class="bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 py-2 rounded-full hover:shadow-lg transition">Get Started</button>
84
+ </div>
85
+ </div>
86
+ </nav>
87
+
88
+ <!-- Hero Section -->
89
+ <section id="home" class="min-h-screen flex items-center pt-20 pb-10 px-6 lg:px-16 bg-gradient-to-br from-gray-50 to-blue-50">
90
+ <div class="container mx-auto flex flex-col lg:flex-row items-center">
91
+ <div class="lg:w-1/2 mb-10 lg:mb-0">
92
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
93
+ Transform Your <span class="gradient-text">Brand</span> With Our Marketing Magic
94
+ </h1>
95
+ <p class="text-lg text-gray-600 mb-8">
96
+ We create stunning digital experiences that drive results. Our team of experts will help you stand out in the crowded digital landscape.
97
+ </p>
98
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6">
99
+ <button class="relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white px-10 py-4 rounded-full hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 group">
100
+ <span class="relative z-10">Get Started</span>
101
+ <span class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
102
+ </button>
103
+ <button class="border-2 border-blue-600 text-blue-600 px-10 py-4 rounded-full hover:bg-blue-50/50 transition-all duration-300 transform hover:-translate-y-1 flex items-center">
104
+ <span>Watch Demo</span>
105
+ <i class="fas fa-play-circle ml-2 text-xl"></i>
106
+ </button>
107
+ </div>
108
+
109
+ <div class="mt-10 flex items-center space-x-6">
110
+ <div class="flex -space-x-3">
111
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Client">
112
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Client">
113
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Client">
114
+ </div>
115
+ <div>
116
+ <div class="flex items-center">
117
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
118
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
119
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
120
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
121
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
122
+ <span class="ml-2 font-medium">5.0</span>
123
+ </div>
124
+ <p class="text-sm text-gray-500">Trusted by 500+ clients</p>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="lg:w-1/2 relative">
130
+ <div class="relative floating">
131
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Marketing Team" class="rounded-2xl shadow-2xl w-full max-w-lg mx-auto">
132
+ </div>
133
+ <div class="absolute -bottom-10 -left-10 bg-white p-6 rounded-xl shadow-lg hidden lg:block">
134
+ <div class="flex items-center">
135
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
136
+ <i class="fas fa-chart-line text-blue-500 text-xl"></i>
137
+ </div>
138
+ <div>
139
+ <h3 class="font-bold">+85% ROI</h3>
140
+ <p class="text-sm text-gray-500">Average client results</p>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ <div class="absolute -top-10 -right-10 bg-white p-6 rounded-xl shadow-lg hidden lg:block">
145
+ <div class="flex items-center">
146
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
147
+ <i class="fas fa-trophy text-purple-500 text-xl"></i>
148
+ </div>
149
+ <div>
150
+ <h3 class="font-bold">25 Awards</h3>
151
+ <p class="text-sm text-gray-500">Industry recognition</p>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </section>
158
+
159
+ <!-- Clients Section -->
160
+ <section class="py-12 bg-white">
161
+ <div class="container mx-auto px-6">
162
+ <p class="text-center text-gray-500 mb-8">TRUSTED BY INDUSTRY LEADERS</p>
163
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70">
164
+ <img src="https://logo.clearbit.com/google.com" alt="Google" class="h-8 md:h-10 grayscale hover:grayscale-0 transition">
165
+ <img src="https://logo.clearbit.com/spotify.com" alt="Spotify" class="h-8 md:h-10 grayscale hover:grayscale-0 transition">
166
+ <img src="https://logo.clearbit.com/airbnb.com" alt="Airbnb" class="h-8 md:h-10 grayscale hover:grayscale-0 transition">
167
+ <img src="https://logo.clearbit.com/slack.com" alt="Slack" class="h-8 md:h-10 grayscale hover:grayscale-0 transition">
168
+ <img src="https://logo.clearbit.com/uber.com" alt="Uber" class="h-8 md:h-10 grayscale hover:grayscale-0 transition">
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <!-- Services Section -->
174
+ <section id="services" class="py-20 bg-gray-50">
175
+ <div class="container mx-auto px-6">
176
+ <div class="text-center mb-16">
177
+ <span class="text-blue-500 font-semibold">OUR SERVICES</span>
178
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Comprehensive Marketing Solutions</h2>
179
+ <p class="max-w-2xl mx-auto text-gray-600">We offer a full spectrum of digital marketing services to help your business grow and thrive in the digital age.</p>
180
+ </div>
181
+
182
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
183
+ <!-- Service 1 -->
184
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition group">
185
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6 group-hover:bg-blue-500 transition">
186
+ <i class="fas fa-bullseye text-blue-500 text-2xl group-hover:text-white transition"></i>
187
+ </div>
188
+ <h3 class="text-xl font-bold mb-3">Brand Strategy</h3>
189
+ <p class="text-gray-600 mb-4">We develop powerful brand strategies that resonate with your target audience and differentiate you from competitors.</p>
190
+ <a href="#" class="text-blue-500 font-medium flex items-center group-hover:text-blue-700 transition">
191
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
192
+ </a>
193
+ </div>
194
+
195
+ <!-- Service 2 -->
196
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition group">
197
+ <div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-6 group-hover:bg-purple-500 transition">
198
+ <i class="fas fa-chart-line text-purple-500 text-2xl group-hover:text-white transition"></i>
199
+ </div>
200
+ <h3 class="text-xl font-bold mb-3">Digital Marketing</h3>
201
+ <p class="text-gray-600 mb-4">Our data-driven digital marketing campaigns deliver measurable results and maximize your return on investment.</p>
202
+ <a href="#" class="text-purple-500 font-medium flex items-center group-hover:text-purple-700 transition">
203
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
204
+ </a>
205
+ </div>
206
+
207
+ <!-- Service 3 -->
208
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition group">
209
+ <div class="w-16 h-16 bg-pink-100 rounded-lg flex items-center justify-center mb-6 group-hover:bg-pink-500 transition">
210
+ <i class="fas fa-paint-brush text-pink-500 text-2xl group-hover:text-white transition"></i>
211
+ </div>
212
+ <h3 class="text-xl font-bold mb-3">Creative Design</h3>
213
+ <p class="text-gray-600 mb-4">Stunning visuals that capture attention and communicate your brand message effectively across all platforms.</p>
214
+ <a href="#" class="text-pink-500 font-medium flex items-center group-hover:text-pink-700 transition">
215
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
216
+ </a>
217
+ </div>
218
+
219
+ <!-- Service 4 -->
220
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition group">
221
+ <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-6 group-hover:bg-green-500 transition">
222
+ <i class="fas fa-code text-green-500 text-2xl group-hover:text-white transition"></i>
223
+ </div>
224
+ <h3 class="text-xl font-bold mb-3">Web Development</h3>
225
+ <p class="text-gray-600 mb-4">Custom websites that are fast, secure, and optimized for conversions with seamless user experiences.</p>
226
+ <a href="#" class="text-green-500 font-medium flex items-center group-hover:text-green-700 transition">
227
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
228
+ </a>
229
+ </div>
230
+
231
+ <!-- Service 5 -->
232
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition group">
233
+ <div class="w-16 h-16 bg-yellow-100 rounded-lg flex items-center justify-center mb-6 group-hover:bg-yellow-500 transition">
234
+ <i class="fas fa-search text-yellow-500 text-2xl group-hover:text-white transition"></i>
235
+ </div>
236
+ <h3 class="text-xl font-bold mb-3">SEO Optimization</h3>
237
+ <p class="text-gray-600 mb-4">Increase your organic visibility and drive qualified traffic to your website with our proven SEO strategies.</p>
238
+ <a href="#" class="text-yellow-500 font-medium flex items-center group-hover:text-yellow-700 transition">
239
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
240
+ </a>
241
+ </div>
242
+
243
+ <!-- Service 6 -->
244
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition group">
245
+ <div class="w-16 h-16 bg-red-100 rounded-lg flex items-center justify-center mb-6 group-hover:bg-red-500 transition">
246
+ <i class="fas fa-video text-red-500 text-2xl group-hover:text-white transition"></i>
247
+ </div>
248
+ <h3 class="text-xl font-bold mb-3">Video Production</h3>
249
+ <p class="text-gray-600 mb-4">Engaging video content that tells your brand story and connects with your audience on an emotional level.</p>
250
+ <a href="#" class="text-red-500 font-medium flex items-center group-hover:text-red-700 transition">
251
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
252
+ </a>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- Stats Section -->
259
+ <section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
260
+ <div class="container mx-auto px-6">
261
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
262
+ <div class="p-6">
263
+ <h3 class="text-4xl font-bold mb-2">250+</h3>
264
+ <p class="text-blue-100">Projects Completed</p>
265
+ </div>
266
+ <div class="p-6">
267
+ <h3 class="text-4xl font-bold mb-2">98%</h3>
268
+ <p class="text-blue-100">Client Satisfaction</p>
269
+ </div>
270
+ <div class="p-6">
271
+ <h3 class="text-4xl font-bold mb-2">15+</h3>
272
+ <p class="text-blue-100">Years Experience</p>
273
+ </div>
274
+ <div class="p-6">
275
+ <h3 class="text-4xl font-bold mb-2">50+</h3>
276
+ <p class="text-blue-100">Team Members</p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </section>
281
+
282
+ <!-- Portfolio Section -->
283
+ <section id="portfolio" class="py-20 bg-white">
284
+ <div class="container mx-auto px-6">
285
+ <div class="text-center mb-16">
286
+ <span class="text-blue-500 font-semibold">OUR WORK</span>
287
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Featured Projects</h2>
288
+ <p class="max-w-2xl mx-auto text-gray-600">Explore our portfolio of successful marketing campaigns and creative projects.</p>
289
+ </div>
290
+
291
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
292
+ <!-- Project 1 -->
293
+ <div class="group relative overflow-hidden rounded-xl shadow-md hover:shadow-xl transition">
294
+ <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 1" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
295
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition-opacity">
296
+ <div>
297
+ <h3 class="text-white text-xl font-bold mb-1">EcoLife Branding</h3>
298
+ <p class="text-gray-200">Brand Strategy, Visual Identity</p>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Project 2 -->
304
+ <div class="group relative overflow-hidden rounded-xl shadow-md hover:shadow-xl transition">
305
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 2" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
306
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition-opacity">
307
+ <div>
308
+ <h3 class="text-white text-xl font-bold mb-1">TechFlow Website</h3>
309
+ <p class="text-gray-200">Web Design, Development</p>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Project 3 -->
315
+ <div class="group relative overflow-hidden rounded-xl shadow-md hover:shadow-xl transition">
316
+ <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Project 3" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
317
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6 opacity-0 group-hover:opacity-100 transition-opacity">
318
+ <div>
319
+ <h3 class="text-white text-xl font-bold mb-1">UrbanFit Campaign</h3>
320
+ <p class="text-gray-200">Digital Marketing, Social Media</p>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <div class="text-center">
327
+ <button class="border-2 border-blue-500 text-blue-500 px-8 py-3 rounded-full hover:bg-blue-50 transition transform hover:-translate-y-1">
328
+ View All Projects
329
+ </button>
330
+ </div>
331
+ </div>
332
+ </section>
333
+
334
+ <!-- Process Section -->
335
+ <section class="py-20 bg-gray-50">
336
+ <div class="container mx-auto px-6">
337
+ <div class="text-center mb-16">
338
+ <span class="text-blue-500 font-semibold">OUR PROCESS</span>
339
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">How We Work</h2>
340
+ <p class="max-w-2xl mx-auto text-gray-600">Our proven process ensures we deliver exceptional results for every client.</p>
341
+ </div>
342
+
343
+ <div class="relative">
344
+ <!-- Timeline -->
345
+ <div class="hidden lg:block absolute left-1/2 top-0 h-full w-1 bg-gradient-to-b from-blue-500 to-purple-500 transform -translate-x-1/2"></div>
346
+
347
+ <!-- Process Steps -->
348
+ <div class="space-y-16 lg:space-y-0">
349
+ <!-- Step 1 -->
350
+ <div class="lg:flex lg:items-center lg:justify-between lg:odd:flex-row-reverse">
351
+ <div class="lg:w-5/12 mb-8 lg:mb-0">
352
+ <div class="bg-white p-8 rounded-xl shadow-md">
353
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
354
+ <span class="text-blue-500 font-bold">01</span>
355
+ </div>
356
+ <h3 class="text-xl font-bold mb-3">Discovery</h3>
357
+ <p class="text-gray-600">We start by deeply understanding your business, goals, and challenges through research and workshops.</p>
358
+ </div>
359
+ </div>
360
+ <div class="lg:w-5/12 flex justify-center">
361
+ <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg border-4 border-blue-500">
362
+ <i class="fas fa-search text-blue-500 text-2xl"></i>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Step 2 -->
368
+ <div class="lg:flex lg:items-center lg:justify-between lg:odd:flex-row-reverse">
369
+ <div class="lg:w-5/12 mb-8 lg:mb-0">
370
+ <div class="bg-white p-8 rounded-xl shadow-md">
371
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
372
+ <span class="text-purple-500 font-bold">02</span>
373
+ </div>
374
+ <h3 class="text-xl font-bold mb-3">Strategy</h3>
375
+ <p class="text-gray-600">We develop a customized marketing strategy tailored to your specific needs and objectives.</p>
376
+ </div>
377
+ </div>
378
+ <div class="lg:w-5/12 flex justify-center">
379
+ <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg border-4 border-purple-500">
380
+ <i class="fas fa-chess text-purple-500 text-2xl"></i>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Step 3 -->
386
+ <div class="lg:flex lg:items-center lg:justify-between lg:odd:flex-row-reverse">
387
+ <div class="lg:w-5/12 mb-8 lg:mb-0">
388
+ <div class="bg-white p-8 rounded-xl shadow-md">
389
+ <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mb-4">
390
+ <span class="text-pink-500 font-bold">03</span>
391
+ </div>
392
+ <h3 class="text-xl font-bold mb-3">Execution</h3>
393
+ <p class="text-gray-600">Our team implements the strategy with precision, creativity, and attention to detail.</p>
394
+ </div>
395
+ </div>
396
+ <div class="lg:w-5/12 flex justify-center">
397
+ <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg border-4 border-pink-500">
398
+ <i class="fas fa-rocket text-pink-500 text-2xl"></i>
399
+ </div>
400
+ </div>
401
+ </div>
402
+
403
+ <!-- Step 4 -->
404
+ <div class="lg:flex lg:items-center lg:justify-between lg:odd:flex-row-reverse">
405
+ <div class="lg:w-5/12 mb-8 lg:mb-0">
406
+ <div class="bg-white p-8 rounded-xl shadow-md">
407
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
408
+ <span class="text-green-500 font-bold">04</span>
409
+ </div>
410
+ <h3 class="text-xl font-bold mb-3">Optimization</h3>
411
+ <p class="text-gray-600">We continuously analyze results and refine our approach to maximize performance.</p>
412
+ </div>
413
+ </div>
414
+ <div class="lg:w-5/12 flex justify-center">
415
+ <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-lg border-4 border-green-500">
416
+ <i class="fas fa-chart-line text-green-500 text-2xl"></i>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </section>
424
+
425
+ <!-- About Section -->
426
+ <section id="about" class="py-20 bg-white">
427
+ <div class="container mx-auto px-6">
428
+ <div class="flex flex-col lg:flex-row items-center">
429
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
430
+ <span class="text-blue-500 font-semibold">ABOUT US</span>
431
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">We're More Than Just a Marketing Agency</h2>
432
+ <p class="text-gray-600 mb-6">Founded in 2008, Nexus has grown from a small creative studio to a full-service digital marketing agency with a global client base. Our mission is to help businesses thrive in the digital world through innovative strategies and exceptional execution.</p>
433
+
434
+ <div class="space-y-4">
435
+ <div class="flex items-start">
436
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
437
+ <i class="fas fa-check text-blue-500"></i>
438
+ </div>
439
+ <p class="text-gray-600">Award-winning team of strategists, designers, and developers</p>
440
+ </div>
441
+ <div class="flex items-start">
442
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
443
+ <i class="fas fa-check text-blue-500"></i>
444
+ </div>
445
+ <p class="text-gray-600">Data-driven approach with measurable results</p>
446
+ </div>
447
+ <div class="flex items-start">
448
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
449
+ <i class="fas fa-check text-blue-500"></i>
450
+ </div>
451
+ <p class="text-gray-600">Client-focused service with transparent communication</p>
452
+ </div>
453
+ </div>
454
+
455
+ <button class="mt-8 bg-gradient-to-r from-blue-500 to-purple-500 text-white px-8 py-3 rounded-full hover:shadow-lg transition transform hover:-translate-y-1">
456
+ Learn More About Us
457
+ </button>
458
+ </div>
459
+
460
+ <div class="lg:w-1/2 relative">
461
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Team" class="rounded-2xl shadow-xl w-full">
462
+
463
+ <div class="absolute -bottom-8 -right-8 bg-white p-6 rounded-xl shadow-lg hidden lg:block">
464
+ <div class="flex items-center">
465
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
466
+ <i class="fas fa-award text-purple-500 text-xl"></i>
467
+ </div>
468
+ <div>
469
+ <h3 class="font-bold">Top 5 Agency</h3>
470
+ <p class="text-sm text-gray-500">Marketing Week Awards 2023</p>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </section>
478
+
479
+ <!-- Testimonials Section -->
480
+ <section id="testimonials" class="py-20 bg-gray-50">
481
+ <div class="container mx-auto px-6">
482
+ <div class="text-center mb-16">
483
+ <span class="text-blue-500 font-semibold">TESTIMONIALS</span>
484
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">What Our Clients Say</h2>
485
+ <p class="max-w-2xl mx-auto text-gray-600">Don't just take our word for it - hear from some of our satisfied clients.</p>
486
+ </div>
487
+
488
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
489
+ <!-- Testimonial 1 -->
490
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition">
491
+ <div class="flex items-center mb-6">
492
+ <div class="flex items-center">
493
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
494
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
495
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
496
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
497
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
498
+ </div>
499
+ </div>
500
+ <p class="text-gray-600 italic mb-6">"Nexus transformed our digital presence completely. Our website traffic increased by 300% and our conversion rates doubled within six months of working with them."</p>
501
+ <div class="flex items-center">
502
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4">
503
+ <div>
504
+ <h4 class="font-bold">Sarah Johnson</h4>
505
+ <p class="text-sm text-gray-500">CEO, GreenLife Organics</p>
506
+ </div>
507
+ </div>
508
+ </div>
509
+
510
+ <!-- Testimonial 2 -->
511
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition">
512
+ <div class="flex items-center mb-6">
513
+ <div class="flex items-center">
514
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
515
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
516
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
517
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
518
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
519
+ </div>
520
+ </div>
521
+ <p class="text-gray-600 italic mb-6">"The team at Nexus understood our brand perfectly and delivered a campaign that exceeded all our expectations. Their creative approach and attention to detail are unmatched."</p>
522
+ <div class="flex items-center">
523
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4">
524
+ <div>
525
+ <h4 class="font-bold">Michael Chen</h4>
526
+ <p class="text-sm text-gray-500">Marketing Director, TechFlow</p>
527
+ </div>
528
+ </div>
529
+ </div>
530
+
531
+ <!-- Testimonial 3 -->
532
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition">
533
+ <div class="flex items-center mb-6">
534
+ <div class="flex items-center">
535
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
536
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
537
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
538
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
539
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
540
+ </div>
541
+ </div>
542
+ <p class="text-gray-600 italic mb-6">"Working with Nexus has been a game-changer for our business. Their strategic insights and execution have helped us expand into three new markets this year alone."</p>
543
+ <div class="flex items-center">
544
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez" class="w-12 h-12 rounded-full mr-4">
545
+ <div>
546
+ <h4 class="font-bold">Emma Rodriguez</h4>
547
+ <p class="text-sm text-gray-500">Founder, UrbanFit</p>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </section>
554
+
555
+ <!-- CTA Section -->
556
+ <section class="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
557
+ <div class="container mx-auto px-6 text-center">
558
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Marketing?</h2>
559
+ <p class="max-w-2xl mx-auto text-blue-100 mb-8">Let's discuss how we can help you achieve your business goals with our tailored marketing solutions.</p>
560
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
561
+ <button class="bg-white text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition transform hover:-translate-y-1">
562
+ Get Started
563
+ </button>
564
+ <button class="border-2 border-white text-white px-8 py-3 rounded-full hover:bg-white/10 transition transform hover:-translate-y-1">
565
+ Book a Consultation
566
+ </button>
567
+ </div>
568
+ </div>
569
+ </section>
570
+
571
+ <!-- Team Section -->
572
+ <section class="py-20 bg-white">
573
+ <div class="container mx-auto px-6">
574
+ <div class="text-center mb-16">
575
+ <span class="text-blue-500 font-semibold">OUR TEAM</span>
576
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Meet The Experts</h2>
577
+ <p class="max-w-2xl mx-auto text-gray-600">Our talented team brings diverse skills and perspectives to deliver exceptional results.</p>
578
+ </div>
579
+
580
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
581
+ <!-- Team Member 1 -->
582
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
583
+ <div class="h-64 bg-gray-200 overflow-hidden">
584
+ <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Alex Johnson" class="w-full h-full object-cover">
585
+ </div>
586
+ <div class="p-6">
587
+ <h3 class="text-xl font-bold mb-1">Alex Johnson</h3>
588
+ <p class="text-blue-500 mb-4">CEO & Founder</p>
589
+ <p class="text-gray-600 text-sm">With 20 years in the industry, Alex leads our strategic vision and client relationships.</p>
590
+ <div class="flex space-x-4 mt-4">
591
+ <a href="#" class="text-gray-400 hover:text-blue-500 transition"><i class="fab fa-linkedin-in"></i></a>
592
+ <a href="#" class="text-gray-400 hover:text-blue-500 transition"><i class="fab fa-twitter"></i></a>
593
+ </div>
594
+ </div>
595
+ </div>
596
+
597
+ <!-- Team Member 2 -->
598
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
599
+ <div class="h-64 bg-gray-200 overflow-hidden">
600
+ <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Sarah Miller" class="w-full h-full object-cover">
601
+ </div>
602
+ <div class="p-6">
603
+ <h3 class="text-xl font-bold mb-1">Sarah Miller</h3>
604
+ <p class="text-blue-500 mb-4">Creative Director</p>
605
+ <p class="text-gray-600 text-sm">Sarah oversees all creative work, ensuring brand consistency and innovative design.</p>
606
+ <div class="flex space-x-4 mt-4">
607
+ <a href="#" class="text-gray-400 hover:text-blue-500 transition"><i class="fab fa-linkedin-in"></i></a>
608
+ <a href="#" class="text-gray-400 hover:text-blue-500 transition"><i class="fab fa-twitter"></i></a>
609
+ </div>
610
+ </div>
611
+ </div>
612
+
613
+ <!-- Team Member 3 -->
614
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
615
+ <div class="h-64 bg-gray-200 overflow-hidden">
616
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="David Chen" class="w-full h-full object-cover">
617
+ </div>
618
+ <div class="p-6">
619
+ <h3 class="text-xl font-bold mb-1">David Chen</h3>
620
+ <p class="text-blue-500 mb-4">Digital Strategist</p>
621
+ <p class="text-gray-600 text-sm">David develops data-driven marketing strategies that deliver measurable results.</p>
622
+ <div class="flex space-x-4 mt-4">
623
+ <a href="#" class="text-gray-400 hover:text-blue-500 transition"><i class="fab fa-linkedin-in"></i></a>
624
+ <a href="#" class="text-gray-400 hover:text-blue-500 transition"><i class="fab fa-twitter"></i></a>
625
+ </div>
626
+ </div>
627
+ </div>
628
+
629
+ <!-- Team Member 4 -->
630
+ <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
631
+ <div class="h-64 bg-gray-200 overflow-hidden">
632
+ <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Maria Garcia" class="w-full h-full object-cover">
633
+ </div>
634
+ <div class="p-6">
635
+ <h3 class="text-xl font-bold mb-1">Maria Garcia</h3>
636
+ <p class="text-blue-500 mb-4">Head of Development</p>
637
+ <p class="text-gray-600 text-sm">Maria leads our technical team in building high-performance digital experiences.</p>
638
+ <div class="flex space-x-4 mt-4">
639
+ <a href="#" class="text-gray-400 hover:text-blue-500 transition"><i class="fab fa-linkedin-in"></i></a>
640
+ <a href="#" class="text-gray-400 hover:text-blue-500 transition"><i class="fab fa-twitter"></i></a>
641
+ </div>
642
+ </div>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </section>
647
+
648
+ <!-- Blog Section -->
649
+ <section class="py-20 bg-gray-50">
650
+ <div class="container mx-auto px-6">
651
+ <div class="text-center mb-16">
652
+ <span class="text-blue-500 font-semibold">OUR BLOG</span>
653
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Latest Insights</h2>
654
+ <p class="max-w-2xl mx-auto text-gray-600">Stay updated with the latest trends and strategies in digital marketing.</p>
655
+ </div>
656
+
657
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
658
+ <!-- Blog Post 1 -->
659
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition">
660
+ <div class="h-48 bg-gray-200 overflow-hidden">
661
+ <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Blog Post 1" class="w-full h-full object-cover">
662
+ </div>
663
+ <div class="p-6">
664
+ <div class="flex items-center text-sm text-gray-500 mb-3">
665
+ <span>June 15, 2023</span>
666
+ <span class="mx-2">•</span>
667
+ <span>5 min read</span>
668
+ </div>
669
+ <h3 class="text-xl font-bold mb-3">The Future of AI in Digital Marketing</h3>
670
+ <p class="text-gray-600 mb-4">Explore how artificial intelligence is revolutionizing marketing strategies and customer experiences.</p>
671
+ <a href="#" class="text-blue-500 font-medium flex items-center hover:text-blue-700 transition">
672
+ Read more <i class="fas fa-arrow-right ml-2"></i>
673
+ </a>
674
+ </div>
675
+ </div>
676
+
677
+ <!-- Blog Post 2 -->
678
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition">
679
+ <div class="h-48 bg-gray-200 overflow-hidden">
680
+ <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" alt="Blog Post 2" class="w-full h-full object-cover">
681
+ </div>
682
+ <div class="p-6">
683
+ <div class="flex items-center text-sm text-gray-500 mb-3">
684
+ <span>May 28, 2023</span>
685
+ <span class="mx-2">•</span>
686
+ <span>7 min read</span>
687
+ </div>
688
+ <h3 class="text-xl font-bold mb-3">Branding in the Age of Social Media</h3>
689
+ <p class="text-gray-600 mb-4">Learn how to build a powerful brand identity that resonates with today's social media audiences.</p>
690
+ <a href="#" class="text-blue-500 font-medium flex items-center hover:text-blue-700 transition">
691
+ Read more <i class="fas fa-arrow-right ml-2"></i>
692
+ </a>
693
+ </div>
694
+ </div>
695
+
696
+ <!-- Blog Post 3 -->
697
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition">
698
+ <div class="h-48 bg-gray-200 overflow-hidden">
699
+ <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1415&q=80" alt="Blog Post 3" class="w-full h-full object-cover">
700
+ </div>
701
+ <div class="p-6">
702
+ <div class="flex items-center text-sm text-gray-500 mb-3">
703
+ <span>May 10, 2023</span>
704
+ <span class="mx-2">•</span>
705
+ <span>4 min read</span>
706
+ </div>
707
+ <h3 class="text-xl font-bold mb-3">Data-Driven Marketing: Turning Insights into Action</h3>
708
+ <p class="text-gray-600 mb-4">Discover how to leverage analytics to make informed marketing decisions that drive growth.</p>
709
+ <a href="#" class="text-blue-500 font-medium flex items-center hover:text-blue-700 transition">
710
+ Read more <i class="fas fa-arrow-right ml-2"></i>
711
+ </a>
712
+ </div>
713
+ </div>
714
+ </div>
715
+
716
+ <div class="text-center mt-12">
717
+ <button class="border-2 border-blue-500 text-blue-500 px-8 py-3 rounded-full hover:bg-blue-50 transition transform hover:-translate-y-1">
718
+ View All Articles
719
+ </button>
720
+ </div>
721
+ </div>
722
+ </section>
723
+
724
+ <!-- Contact Section -->
725
+ <section id="contact" class="py-20 bg-white">
726
+ <div class="container mx-auto px-6">
727
+ <div class="flex flex-col lg:flex-row">
728
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
729
+ <span class="text-blue-500 font-semibold">CONTACT US</span>
730
+ <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Let's Work Together</h2>
731
+ <p class="text-gray-600 mb-8">Have a project in mind or want to learn more about our services? Get in touch with our team—we'd love to hear from you.</p>
732
+
733
+ <div class="space-y-6">
734
+ <div class="flex items-start">
735
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
736
+ <i class="fas fa-map-marker-alt text-blue-500"></i>
737
+ </div>
738
+ <div>
739
+ <h3 class="font-bold mb-1">Our Office</h3>
740
+ <p class="text-gray-600">123 Marketing Ave, Suite 400<br>San Francisco, CA 94107</p>
741
+ </div>
742
+ </div>
743
+
744
+ <div class="flex items-start">
745
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
746
+ <i class="fas fa-envelope text-blue-500"></i>
747
+ </div>
748
+ <div>
749
+ <h3 class="font-bold mb-1">Email Us</h3>
750
+ <p class="text-gray-600">hello@nexusmarketing.com<br>support@nexusmarketing.com</p>
751
+ </div>
752
+ </div>
753
+
754
+ <div class="flex items-start">
755
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
756
+ <i class="fas fa-phone-alt text-blue-500"></i>
757
+ </div>
758
+ <div>
759
+ <h3 class="font-bold mb-1">Call Us</h3>
760
+ <p class="text-gray-600">+1 (555) 123-4567<br>Mon-Fri, 9am-6pm PST</p>
761
+ </div>
762
+ </div>
763
+ </div>
764
+
765
+ <div class="mt-8 flex space-x-4">
766
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 hover:bg-blue-500 hover:text-white transition">
767
+ <i class="fab fa-facebook-f"></i>
768
+ </a>
769
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 hover:bg-blue-500 hover:text-white transition">
770
+ <i class="fab fa-twitter"></i>
771
+ </a>
772
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 hover:bg-blue-500 hover:text-white transition">
773
+ <i class="fab fa-instagram"></i>
774
+ </a>
775
+ <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500 hover:bg-blue-500 hover:text-white transition">
776
+ <i class="fab fa-linkedin-in"></i>
777
+ </a>
778
+ </div>
779
+ </div>
780
+
781
+ <div class="lg:w-1/2">
782
+ <form class="bg-gray-50 p-8 rounded-xl shadow-md">
783
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
784
+ <div>
785
+ <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
786
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your name">
787
+ </div>
788
+ <div>
789
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
790
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your email">
791
+ </div>
792
+ </div>
793
+
794
+ <div class="mb-6">
795
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label>
796
+ <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Subject">
797
+ </div>
798
+
799
+ <div class="mb-6">
800
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
801
+ <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your message"></textarea>
802
+ </div>
803
+
804
+ <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white px-6 py-3 rounded-full hover:shadow-lg transition">
805
+ Send Message
806
+ </button>
807
+ </form>
808
+ </div>
809
+ </div>
810
+ </div>
811
+ </section>
812
+
813
+ <!-- Map Section -->
814
+ <div class="h-96 w-full bg-gray-200 overflow-hidden">
815
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.035073058992!2d-122.40366492453818!3d37.7867554719809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085807d10af6e51%3A0x1122879b36a2e8a3!2s123%20Marketing%20Ave%2C%20San%20Francisco%2C%20CA%2094107%2C%20USA!5e0!3m2!1sen!2s!4v1689876543210!5m2!1sen!2s" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
816
+ </div>
817
+
818
+ <!-- Footer -->
819
+ <footer class="bg-gray-900 text-white py-16">
820
+ <div class="container mx-auto px-6">
821
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
822
+ <div>
823
+ <a href="#" class="text-2xl font-bold gradient-text mb-4 inline-block">NEXUS</a>
824
+ <p class="text-gray-400 mb-6">We help businesses grow through innovative marketing strategies and creative solutions.</p>
825
+ <div class="flex space-x-4">
826
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:bg-blue-500 hover:text-white transition">
827
+ <i class="fab fa-facebook-f"></i>
828
+ </a>
829
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:bg-blue-400 hover:text-white transition">
830
+ <i class="fab fa-twitter"></i>
831
+ </a>
832
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:bg-pink-500 hover:text-white transition">
833
+ <i class="fab fa-instagram"></i>
834
+ </a>
835
+ <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:bg-blue-600 hover:text-white transition">
836
+ <i class="fab fa-linkedin-in"></i>
837
+ </a>
838
+ </div>
839
+ </div>
840
+
841
+ <div>
842
+ <h3 class="text-lg font-bold mb-6">Quick Links</h3>
843
+ <ul class="space-y-3">
844
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li>
845
+ <li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li>
846
+ <li><a href="#portfolio" class="text-gray-400 hover:text-white transition">Portfolio</a></li>
847
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li>
848
+ <li><a href="#testimonials" class="text-gray-400 hover:text-white transition">Testimonials</a></li>
849
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
850
+ </ul>
851
+ </div>
852
+
853
+ <div>
854
+ <h3 class="text-lg font-bold mb-6">Services</h3>
855
+ <ul class="space-y-3">
856
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Brand Strategy</a></li>
857
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Digital Marketing</a></li>
858
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Creative Design</a></li>
859
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Web Development</a></li>
860
+ <li><a href="#" class="text-gray-400 hover:text-white transition">SEO Optimization</a></li>
861
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Video Production</a></li>
862
+ </ul>
863
+ </div>
864
+
865
+ <div>
866
+ <h3 class="text-lg font-bold mb-6">Newsletter</h3>
867
+ <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates and marketing insights.</p>
868
+ <form class="flex">
869
+ <input type="email" placeholder="Your email" class="px-4 py-3 rounded-l-lg w-full focus:outline-none text-gray-900">
870
+ <button type="submit" class="bg-gradient-to-r from-blue-500 to-purple-500 px-4 py-3 rounded-r-lg hover:shadow-lg transition">
871
+ <i class="fas fa-paper-plane"></i>
872
+ </button>
873
+ </form>
874
+ </div>
875
+ </div>
876
+
877
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
878
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Nexus Marketing. All rights reserved.</p>
879
+ <div class="flex space-x-6">
880
+ <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
881
+ <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
882
+ <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
883
+ </div>
884
+ </div>
885
+ </div>
886
+ </footer>
887
+
888
+ <script>
889
+ // Preloader
890
+ window.addEventListener('load', function() {
891
+ const preloader = document.getElementById('preloader');
892
+ preloader.style.transition = 'opacity 0.5s ease';
893
+ preloader.style.opacity = '0';
894
+ setTimeout(() => {
895
+ preloader.style.display = 'none';
896
+ }, 500);
897
+ });
898
+
899
+ // Mobile menu toggle
900
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
901
+ const mobileMenu = document.getElementById('mobile-menu');
902
+
903
+ mobileMenuButton.addEventListener('click', function() {
904
+ mobileMenu.classList.toggle('hidden');
905
+ });
906
+
907
+ // Smooth scrolling for anchor links
908
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
909
+ anchor.addEventListener('click', function(e) {
910
+ e.preventDefault();
911
+
912
+ const targetId = this.getAttribute('href');
913
+ const targetElement = document.querySelector(targetId);
914
+
915
+ if (targetElement) {
916
+ window.scrollTo({
917
+ top: targetElement.offsetTop - 80,
918
+ behavior: 'smooth'
919
+ });
920
+
921
+ // Close mobile menu if open
922
+ if (!mobileMenu.classList.contains('hidden')) {
923
+ mobileMenu.classList.add('hidden');
924
+ }
925
+ }
926
+ });
927
+ });
928
+
929
+ // Navbar scroll effect
930
+ window.addEventListener('scroll', function() {
931
+ const nav = document.querySelector('nav');
932
+ if (window.scrollY > 50) {
933
+ nav.classList.add('shadow-lg');
934
+ nav.classList.add('bg-white/90');
935
+ nav.classList.remove('glass');
936
+ } else {
937
+ nav.classList.remove('shadow-lg');
938
+ nav.classList.remove('bg-white/90');
939
+ nav.classList.add('glass');
940
+ }
941
+ });
942
+
943
+ // Animation on scroll
944
+ function animateOnScroll() {
945
+ const elements = document.querySelectorAll('.animate-on-scroll');
946
+
947
+ elements.forEach(element => {
948
+ const elementPosition = element.getBoundingClientRect().top;
949
+ const windowHeight = window.innerHeight;
950
+
951
+ if (elementPosition < windowHeight - 100) {
952
+ element.classList.add('opacity-100', 'translate-y-0');
953
+ }
954
+ });
955
+ }
956
+
957
+ // Initialize elements with animation classes
958
+ document.addEventListener('DOMContentLoaded', function() {
959
+ const sections = document.querySelectorAll('section');
960
+
961
+ sections.forEach(section => {
962
+ section.classList.add('animate-on-scroll', 'opacity-0', 'translate-y-10', 'transition', 'duration-500', 'ease-out');
963
+ });
964
+
965
+ // Initial check
966
+ animateOnScroll();
967
+ });
968
+
969
+ // Check on scroll
970
+ window.addEventListener('scroll', animateOnScroll);
971
+ </script>
972
+ <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=Youssefmahboub/dqsdsq" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
973
+ </html>