Hugging Face's logo

Spaces:
Miracle9
/
miracle
Running

App Files Community
Miracle9 commited on
Commit
09754ca
·
verified ·
1 Parent(s): f04af1e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +563 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Miracle
3
- emoji: 🔥
4
- colorFrom: purple
5
- colorTo: yellow
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: miracle
3
+ emoji: 🐳
4
+ colorFrom: blue
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,563 @@
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>NexusWeb | Digital Innovation</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);
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: #888;
36
+ border-radius: 4px;
37
+ }
38
+ ::-webkit-scrollbar-thumb:hover {
39
+ background: #555;
40
+ }
41
+
42
+ /* Pulse animation */
43
+ @keyframes pulse {
44
+ 0%, 100% { opacity: 1; }
45
+ 50% { opacity: 0.5; }
46
+ }
47
+ .pulse {
48
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="font-sans bg-gray-50 text-gray-800">
53
+ <!-- Navigation -->
54
+ <nav class="fixed w-full bg-white shadow-md z-50 transition-all duration-300">
55
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
56
+ <div class="flex justify-between h-16">
57
+ <div class="flex items-center">
58
+ <div class="flex-shrink-0 flex items-center">
59
+ <i class="fas fa-bolt text-blue-500 text-2xl mr-2"></i>
60
+ <span class="text-xl font-bold gradient-text">NexusWeb</span>
61
+ </div>
62
+ <div class="hidden md:block ml-10">
63
+ <div class="flex space-x-8">
64
+ <a href="#home" class="text-blue-600 hover:text-blue-800 px-3 py-2 font-medium">Home</a>
65
+ <a href="#services" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">Services</a>
66
+ <a href="#about" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">About</a>
67
+ <a href="#portfolio" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">Portfolio</a>
68
+ <a href="#contact" class="text-gray-600 hover:text-blue-600 px-3 py-2 font-medium">Contact</a>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ <div class="hidden md:flex items-center">
73
+ <button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-2 rounded-full font-medium hover:shadow-lg transition-all duration-300 transform hover:scale-105">
74
+ Get Started
75
+ </button>
76
+ </div>
77
+ <div class="md:hidden flex items-center">
78
+ <button id="mobile-menu-button" class="text-gray-600 hover:text-blue-600 focus:outline-none">
79
+ <i class="fas fa-bars text-2xl"></i>
80
+ </button>
81
+ </div>
82
+ </div>
83
+ </div>
84
+
85
+ <!-- Mobile menu -->
86
+ <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
87
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
88
+ <a href="#home" class="block px-3 py-2 text-blue-600 font-medium">Home</a>
89
+ <a href="#services" class="block px-3 py-2 text-gray-600 hover:text-blue-600">Services</a>
90
+ <a href="#about" class="block px-3 py-2 text-gray-600 hover:text-blue-600">About</a>
91
+ <a href="#portfolio" class="block px-3 py-2 text-gray-600 hover:text-blue-600">Portfolio</a>
92
+ <a href="#contact" class="block px-3 py-2 text-gray-600 hover:text-blue-600">Contact</a>
93
+ <button class="w-full mt-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-2 rounded-full font-medium">
94
+ Get Started
95
+ </button>
96
+ </div>
97
+ </div>
98
+ </nav>
99
+
100
+ <!-- Hero Section -->
101
+ <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-br from-blue-50 to-purple-50">
102
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
103
+ <div class="flex flex-col md:flex-row items-center">
104
+ <div class="md:w-1/2 mb-10 md:mb-0">
105
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
106
+ Building <span class="gradient-text">Digital</span> Experiences That Matter
107
+ </h1>
108
+ <p class="text-lg text-gray-600 mb-8">
109
+ We help businesses transform their digital presence with cutting-edge web solutions, mobile apps, and cloud technologies.
110
+ </p>
111
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
112
+ <button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transition-all duration-300 transform hover:scale-105">
113
+ Explore Services
114
+ </button>
115
+ <button class="border-2 border-blue-500 text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-blue-50 transition-all duration-300">
116
+ <i class="fas fa-play-circle mr-2"></i> Watch Demo
117
+ </button>
118
+ </div>
119
+ <div class="mt-8 flex items-center">
120
+ <div class="flex -space-x-2">
121
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Client">
122
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client">
123
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Client">
124
+ </div>
125
+ <div class="ml-4">
126
+ <p class="text-sm font-medium text-gray-600">Trusted by 500+ clients worldwide</p>
127
+ <div class="flex">
128
+ <i class="fas fa-star text-yellow-400"></i>
129
+ <i class="fas fa-star text-yellow-400"></i>
130
+ <i class="fas fa-star text-yellow-400"></i>
131
+ <i class="fas fa-star text-yellow-400"></i>
132
+ <i class="fas fa-star text-yellow-400"></i>
133
+ <span class="ml-2 text-sm font-medium">5.0 (120 reviews)</span>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ <div class="md:w-1/2 relative">
139
+ <div class="relative floating">
140
+ <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"
141
+ alt="Digital Solutions"
142
+ class="rounded-xl shadow-2xl w-full max-w-lg mx-auto">
143
+ <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg w-48">
144
+ <div class="flex items-center mb-2">
145
+ <div class="bg-green-100 p-2 rounded-full mr-2">
146
+ <i class="fas fa-check text-green-500"></i>
147
+ </div>
148
+ <p class="font-medium">Project Completed</p>
149
+ </div>
150
+ <h3 class="text-2xl font-bold gradient-text">250+</h3>
151
+ </div>
152
+ <div class="absolute -top-6 -right-6 bg-white p-4 rounded-xl shadow-lg w-48">
153
+ <div class="flex items-center mb-2">
154
+ <div class="bg-blue-100 p-2 rounded-full mr-2">
155
+ <i class="fas fa-users text-blue-500"></i>
156
+ </div>
157
+ <p class="font-medium">Happy Clients</p>
158
+ </div>
159
+ <h3 class="text-2xl font-bold gradient-text">98%</h3>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </section>
166
+
167
+ <!-- Clients Section -->
168
+ <section class="py-12 bg-white">
169
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
170
+ <p class="text-center text-gray-500 mb-8">TRUSTED BY INNOVATIVE COMPANIES</p>
171
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center">
172
+ <img src="https://via.placeholder.com/150x60?text=TechCorp" alt="TechCorp" class="h-12 opacity-70 hover:opacity-100 transition-opacity">
173
+ <img src="https://via.placeholder.com/150x60?text=Digital+" alt="Digital+" class="h-12 opacity-70 hover:opacity-100 transition-opacity">
174
+ <img src="https://via.placeholder.com/150x60?text=WebSolutions" alt="WebSolutions" class="h-12 opacity-70 hover:opacity-100 transition-opacity">
175
+ <img src="https://via.placeholder.com/150x60?text=CloudNine" alt="CloudNine" class="h-12 opacity-70 hover:opacity-100 transition-opacity">
176
+ <img src="https://via.placeholder.com/150x60?text=AppWorks" alt="AppWorks" class="h-12 opacity-70 hover:opacity-100 transition-opacity">
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- Services Section -->
182
+ <section id="services" class="py-16 bg-gray-50">
183
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
184
+ <div class="text-center mb-16">
185
+ <span class="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-600 rounded-full mb-4">OUR SERVICES</span>
186
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Solutions We Provide</h2>
187
+ <p class="max-w-2xl mx-auto text-gray-600">We offer comprehensive digital solutions to help your business grow and thrive in the online world.</p>
188
+ </div>
189
+
190
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
191
+ <!-- Service 1 -->
192
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
193
+ <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
194
+ <i class="fas fa-globe text-blue-500 text-2xl"></i>
195
+ </div>
196
+ <h3 class="text-xl font-bold mb-3">Web Development</h3>
197
+ <p class="text-gray-600 mb-4">Custom websites built with modern technologies to ensure performance, security, and scalability.</p>
198
+ <a href="#" class="text-blue-500 font-medium flex items-center">
199
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
200
+ </a>
201
+ </div>
202
+
203
+ <!-- Service 2 -->
204
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
205
+ <div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
206
+ <i class="fas fa-mobile-alt text-purple-500 text-2xl"></i>
207
+ </div>
208
+ <h3 class="text-xl font-bold mb-3">Mobile Apps</h3>
209
+ <p class="text-gray-600 mb-4">Native and cross-platform mobile applications for iOS and Android with beautiful UI/UX.</p>
210
+ <a href="#" class="text-blue-500 font-medium flex items-center">
211
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
212
+ </a>
213
+ </div>
214
+
215
+ <!-- Service 3 -->
216
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
217
+ <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center mb-6">
218
+ <i class="fas fa-cloud text-green-500 text-2xl"></i>
219
+ </div>
220
+ <h3 class="text-xl font-bold mb-3">Cloud Solutions</h3>
221
+ <p class="text-gray-600 mb-4">Secure and reliable cloud infrastructure and services to power your digital transformation.</p>
222
+ <a href="#" class="text-blue-500 font-medium flex items-center">
223
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
224
+ </a>
225
+ </div>
226
+
227
+ <!-- Service 4 -->
228
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
229
+ <div class="w-16 h-16 bg-yellow-100 rounded-lg flex items-center justify-center mb-6">
230
+ <i class="fas fa-search-dollar text-yellow-500 text-2xl"></i>
231
+ </div>
232
+ <h3 class="text-xl font-bold mb-3">SEO & Marketing</h3>
233
+ <p class="text-gray-600 mb-4">Comprehensive digital marketing strategies to increase your online visibility and conversions.</p>
234
+ <a href="#" class="text-blue-500 font-medium flex items-center">
235
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
236
+ </a>
237
+ </div>
238
+
239
+ <!-- Service 5 -->
240
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
241
+ <div class="w-16 h-16 bg-red-100 rounded-lg flex items-center justify-center mb-6">
242
+ <i class="fas fa-paint-brush text-red-500 text-2xl"></i>
243
+ </div>
244
+ <h3 class="text-xl font-bold mb-3">UI/UX Design</h3>
245
+ <p class="text-gray-600 mb-4">Beautiful and intuitive user interfaces designed to enhance user experience and engagement.</p>
246
+ <a href="#" class="text-blue-500 font-medium flex items-center">
247
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
248
+ </a>
249
+ </div>
250
+
251
+ <!-- Service 6 -->
252
+ <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300">
253
+ <div class="w-16 h-16 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
254
+ <i class="fas fa-chart-line text-indigo-500 text-2xl"></i>
255
+ </div>
256
+ <h3 class="text-xl font-bold mb-3">Data Analytics</h3>
257
+ <p class="text-gray-600 mb-4">Powerful data analysis and visualization to drive informed business decisions and strategies.</p>
258
+ <a href="#" class="text-blue-500 font-medium flex items-center">
259
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
260
+ </a>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </section>
265
+
266
+ <!-- About Section -->
267
+ <section id="about" class="py-16 bg-white">
268
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
269
+ <div class="flex flex-col md:flex-row items-center">
270
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
271
+ <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"
272
+ alt="Our Team"
273
+ class="rounded-xl shadow-lg w-full">
274
+ </div>
275
+ <div class="md:w-1/2">
276
+ <span class="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-600 rounded-full mb-4">ABOUT US</span>
277
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Innovative Digital Agency</h2>
278
+ <p class="text-gray-600 mb-6">
279
+ Founded in 2015, NexusWeb has grown from a small startup to a leading digital solutions provider with a team of 50+ experts. We combine creativity, technology, and business acumen to deliver exceptional results for our clients.
280
+ </p>
281
+
282
+ <div class="grid grid-cols-2 gap-6 mb-8">
283
+ <div class="flex items-start">
284
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
285
+ <i class="fas fa-lightbulb text-blue-500"></i>
286
+ </div>
287
+ <div>
288
+ <h4 class="font-bold mb-1">Creative Solutions</h4>
289
+ <p class="text-gray-600 text-sm">Unique approaches to complex problems</p>
290
+ </div>
291
+ </div>
292
+ <div class="flex items-start">
293
+ <div class="bg-purple-100 p-2 rounded-full mr-4">
294
+ <i class="fas fa-headset text-purple-500"></i>
295
+ </div>
296
+ <div>
297
+ <h4 class="font-bold mb-1">24/7 Support</h4>
298
+ <p class="text-gray-600 text-sm">Always available for our clients</p>
299
+ </div>
300
+ </div>
301
+ <div class="flex items-start">
302
+ <div class="bg-green-100 p-2 rounded-full mr-4">
303
+ <i class="fas fa-rocket text-green-500"></i>
304
+ </div>
305
+ <div>
306
+ <h4 class="font-bold mb-1">Fast Delivery</h4>
307
+ <p class="text-gray-600 text-sm">Projects completed on time</p>
308
+ </div>
309
+ </div>
310
+ <div class="flex items-start">
311
+ <div class="bg-yellow-100 p-2 rounded-full mr-4">
312
+ <i class="fas fa-medal text-yellow-500"></i>
313
+ </div>
314
+ <div>
315
+ <h4 class="font-bold mb-1">Award Winning</h4>
316
+ <p class="text-gray-600 text-sm">Recognized industry excellence</p>
317
+ </div>
318
+ </div>
319
+ </div>
320
+
321
+ <button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-full font-medium hover:shadow-lg transition-all duration-300">
322
+ Learn More About Us
323
+ </button>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </section>
328
+
329
+ <!-- Stats Section -->
330
+ <section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
331
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
332
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
333
+ <div class="p-6">
334
+ <h3 class="text-4xl md:text-5xl font-bold mb-2">250+</h3>
335
+ <p class="text-blue-100">Projects Completed</p>
336
+ </div>
337
+ <div class="p-6">
338
+ <h3 class="text-4xl md:text-5xl font-bold mb-2">120+</h3>
339
+ <p class="text-blue-100">Happy Clients</p>
340
+ </div>
341
+ <div class="p-6">
342
+ <h3 class="text-4xl md:text-5xl font-bold mb-2">50+</h3>
343
+ <p class="text-blue-100">Expert Team</p>
344
+ </div>
345
+ <div class="p-6">
346
+ <h3 class="text-4xl md:text-5xl font-bold mb-2">15+</h3>
347
+ <p class="text-blue-100">Awards Won</p>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </section>
352
+
353
+ <!-- Portfolio Section -->
354
+ <section id="portfolio" class="py-16 bg-gray-50">
355
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
356
+ <div class="text-center mb-16">
357
+ <span class="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-600 rounded-full mb-4">OUR WORK</span>
358
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Projects</h2>
359
+ <p class="max-w-2xl mx-auto text-gray-600">Explore some of our recent work that showcases our expertise and creativity.</p>
360
+ </div>
361
+
362
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
363
+ <!-- Project 1 -->
364
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300">
365
+ <div class="relative overflow-hidden h-60">
366
+ <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"
367
+ alt="E-commerce Platform"
368
+ class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
369
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
370
+ <div>
371
+ <span class="inline-block px-2 py-1 text-xs font-medium bg-blue-500 text-white rounded mb-2">Web Development</span>
372
+ <h3 class="text-xl font-bold text-white">E-commerce Platform</h3>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ <div class="p-6">
377
+ <p class="text-gray-600 mb-4">A fully customized e-commerce solution with advanced features and seamless user experience.</p>
378
+ <a href="#" class="text-blue-500 font-medium flex items-center">
379
+ View Case Study <i class="fas fa-arrow-right ml-2"></i>
380
+ </a>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Project 2 -->
385
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300">
386
+ <div class="relative overflow-hidden h-60">
387
+ <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
388
+ alt="Mobile Banking App"
389
+ class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
390
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
391
+ <div>
392
+ <span class="inline-block px-2 py-1 text-xs font-medium bg-purple-500 text-white rounded mb-2">Mobile App</span>
393
+ <h3 class="text-xl font-bold text-white">Mobile Banking App</h3>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ <div class="p-6">
398
+ <p class="text-gray-600 mb-4">A secure and user-friendly banking application with biometric authentication and budgeting tools.</p>
399
+ <a href="#" class="text-blue-500 font-medium flex items-center">
400
+ View Case Study <i class="fas fa-arrow-right ml-2"></i>
401
+ </a>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- Project 3 -->
406
+ <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300">
407
+ <div class="relative overflow-hidden h-60">
408
+ <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"
409
+ alt="Corporate Website"
410
+ class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
411
+ <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-6">
412
+ <div>
413
+ <span class="inline-block px-2 py-1 text-xs font-medium bg-green-500 text-white rounded mb-2">Web Design</span>
414
+ <h3 class="text-xl font-bold text-white">Corporate Website</h3>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ <div class="p-6">
419
+ <p class="text-gray-600 mb-4">A modern and responsive corporate website with CMS integration and multilingual support.</p>
420
+ <a href="#" class="text-blue-500 font-medium flex items-center">
421
+ View Case Study <i class="fas fa-arrow-right ml-2"></i>
422
+ </a>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="text-center">
428
+ <button class="border-2 border-blue-500 text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-blue-50 transition-all duration-300">
429
+ View All Projects
430
+ </button>
431
+ </div>
432
+ </div>
433
+ </section>
434
+
435
+ <!-- Testimonials Section -->
436
+ <section class="py-16 bg-white">
437
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
438
+ <div class="text-center mb-16">
439
+ <span class="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-600 rounded-full mb-4">TESTIMONIALS</span>
440
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Clients Say</h2>
441
+ <p class="max-w-2xl mx-auto text-gray-600">Hear from businesses that have transformed their digital presence with our solutions.</p>
442
+ </div>
443
+
444
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
445
+ <!-- Testimonial 1 -->
446
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md">
447
+ <div class="flex items-center mb-6">
448
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4">
449
+ <div>
450
+ <h4 class="font-bold">Sarah Johnson</h4>
451
+ <p class="text-gray-600 text-sm">CEO, TechStart Inc.</p>
452
+ </div>
453
+ </div>
454
+ <p class="text-gray-600 mb-6">
455
+ "NexusWeb transformed our outdated website into a modern, high-performing platform that has significantly increased our lead generation and customer engagement."
456
+ </p>
457
+ <div class="flex">
458
+ <i class="fas fa-star text-yellow-400"></i>
459
+ <i class="fas fa-star text-yellow-400"></i>
460
+ <i class="fas fa-star text-yellow-400"></i>
461
+ <i class="fas fa-star text-yellow-400"></i>
462
+ <i class="fas fa-star text-yellow-400"></i>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- Testimonial 2 -->
467
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md">
468
+ <div class="flex items-center mb-6">
469
+ <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4">
470
+ <div>
471
+ <h4 class="font-bold">Michael Chen</h4>
472
+ <p class="text-gray-600 text-sm">Marketing Director, GlobalRetail</p>
473
+ </div>
474
+ </div>
475
+ <p class="text-gray-600 mb-6">
476
+ "The mobile app developed by NexusWeb has been a game-changer for our business. User engagement has doubled, and the feedback from our customers has been overwhelmingly positive."
477
+ </p>
478
+ <div class="flex">
479
+ <i class="fas fa-star text-yellow-400"></i>
480
+ <i class="fas fa-star text-yellow-400"></i>
481
+ <i class="fas fa-star text-yellow-400"></i>
482
+ <i class="fas fa-star text-yellow-400"></i>
483
+ <i class="fas fa-star text-yellow-400"></i>
484
+ </div>
485
+ </div>
486
+
487
+ <!-- Testimonial 3 -->
488
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md">
489
+ <div class="flex items-center mb-6">
490
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez" class="w-12 h-12 rounded-full mr-4">
491
+ <div>
492
+ <h4 class="font-bold">Emily Rodriguez</h4>
493
+ <p class="text-gray-600 text-sm">Founder, GreenLife</p>
494
+ </div>
495
+ </div>
496
+ <p class="text-gray-600 mb-6">
497
+ "Working with NexusWeb was a seamless experience. Their team understood our vision and delivered a website that perfectly represents our brand while exceeding our performance expectations."
498
+ </p>
499
+ <div class="flex">
500
+ <i class="fas fa-star text-yellow-400"></i>
501
+ <i class="fas fa-star text-yellow-400"></i>
502
+ <i class="fas fa-star text-yellow-400"></i>
503
+ <i class="fas fa-star text-yellow-400"></i>
504
+ <i class="fas fa-star text-yellow-400"></i>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </section>
510
+
511
+ <!-- CTA Section -->
512
+ <section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
513
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
514
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Digital Presence?</h2>
515
+ <p class="max-w-2xl mx-auto text-blue-100 mb-8">Let's discuss how we can help your business achieve its digital goals. Get in touch with our team today.</p>
516
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
517
+ <button class="bg-white text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition-all duration-300">
518
+ Get a Free Consultation
519
+ </button>
520
+ <button class="border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white/10 transition-all duration-300">
521
+ <i class="fas fa-phone-alt mr-2"></i> Call Us Now
522
+ </button>
523
+ </div>
524
+ </div>
525
+ </section>
526
+
527
+ <!-- Contact Section -->
528
+ <section id="contact" class="py-16 bg-white">
529
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
530
+ <div class="flex flex-col md:flex-row">
531
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
532
+ <span class="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-600 rounded-full mb-4">CONTACT US</span>
533
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Get In Touch</h2>
534
+ <p class="text-gray-600 mb-8">
535
+ Have a project in mind or want to learn more about our services? Fill out the form or contact us directly. Our team will get back to you within 24 hours.
536
+ </p>
537
+
538
+ <div class="space-y-6">
539
+ <div class="flex items-start">
540
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
541
+ <i class="fas fa-map-marker-alt text-blue-500"></i>
542
+ </div>
543
+ <div>
544
+ <h4 class="font-bold mb-1">Our Office</h4>
545
+ <p class="text-gray-600">123 Tech Street, Silicon Valley, CA 94025</p>
546
+ </div>
547
+ </div>
548
+ <div class="flex items-start">
549
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
550
+ <i class="fas fa-envelope text-purple-500"></i>
551
+ </div>
552
+ <div>
553
+ <h4 class="font-bold mb-1">Email Us</h4>
554
+ <p class="text-gray-600">info@nexusweb.com<br>support@nexusweb.com</p>
555
+ </div>
556
+ </div>
557
+ <div class="flex items-start">
558
+ <div class="bg-green-100 p-3 rounded-full mr-4">
559
+ <i class="fas fa-phone-alt text-green-500"></i>
560
+ </div>
561
+ <div>
562
+ <h4 class="font-bold mb-1">Call Us
563
+ </html>