Hugging Face's logo

Spaces:
gokul9
/
deepseek-v3-react-19-dont-works
Running

App Files Community
gokul9 commited on
Commit
e19e0aa
·
verified ·
1 Parent(s): 7e84e17

create amazing visually attractive website using react 19 and tailwind css - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +641 -521
index.html CHANGED
@@ -3,565 +3,685 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Nexus - Modern React Website</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://unpkg.com/react@19.0.0/umd/react.development.js"></script>
9
- <script src="https://unpkg.com/react-dom@19.0.0/umd/react-dom.development.js"></script>
10
- <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
11
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  <style>
13
- @keyframes float {
14
- 0%, 100% { transform: translateY(0); }
15
- 50% { transform: translateY(-20px); }
 
 
 
 
16
  }
17
- .floating {
18
- animation: float 6s ease-in-out infinite;
19
- }
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
  .card-hover {
27
- transition: all 0.3s ease;
28
  }
 
29
  .card-hover:hover {
30
  transform: translateY(-10px);
31
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  }
33
- .bg-glass {
34
- background: rgba(255, 255, 255, 0.1);
35
- backdrop-filter: blur(10px);
36
- -webkit-backdrop-filter: blur(10px);
37
- border: 1px solid rgba(255, 255, 255, 0.2);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  }
39
  </style>
40
  </head>
41
- <body class="bg-gray-900 text-white">
42
- <div id="root">
43
- <div class="flex items-center justify-center h-screen bg-gray-900">
44
- <div class="text-center">
45
- <div class="text-2xl text-white mb-4">Loading Nexus...</div>
46
- <div class="w-12 h-12 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mx-auto"></div>
 
 
 
 
 
 
 
47
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  </div>
49
- </div>
50
-
51
- <script type="text/babel" data-presets="react">
52
- const { useState, useEffect } = React;
53
-
54
- const App = () => {
55
- const [activeTab, setActiveTab] = useState('home');
56
- const [isMenuOpen, setIsMenuOpen] = useState(false);
57
- const [scrollY, setScrollY] = useState(0);
58
-
59
- useEffect(() => {
60
- const handleScroll = () => {
61
- setScrollY(window.scrollY);
62
- };
63
- window.addEventListener('scroll', handleScroll);
64
- return () => window.removeEventListener('scroll', handleScroll);
65
- }, []);
66
-
67
- const navItems = [
68
- { id: 'home', label: 'Home' },
69
- { id: 'features', label: 'Features' },
70
- { id: 'pricing', label: 'Pricing' },
71
- { id: 'testimonials', label: 'Testimonials' },
72
- { id: 'contact', label: 'Contact' }
73
- ];
74
-
75
- const features = [
76
- {
77
- icon: 'rocket',
78
- title: 'Lightning Fast',
79
- description: 'Optimized for performance with React 19 and modern tooling.'
80
- },
81
- {
82
- icon: 'palette',
83
- title: 'Beautiful UI',
84
- description: 'Stunning designs with Tailwind CSS and custom animations.'
85
- },
86
- {
87
- icon: 'mobile',
88
- title: 'Fully Responsive',
89
- description: 'Looks perfect on all devices from mobile to desktop.'
90
- },
91
- {
92
- icon: 'lock',
93
- title: 'Secure',
94
- description: 'Built with security best practices in mind.'
95
- }
96
- ];
97
-
98
- const testimonials = [
99
- {
100
- name: 'Sarah Johnson',
101
- role: 'Product Manager',
102
- quote: 'This platform transformed our workflow. The performance is unmatched!',
103
- avatar: 'https://randomuser.me/api/portraits/women/44.jpg'
104
- },
105
- {
106
- name: 'Michael Chen',
107
- role: 'CTO',
108
- quote: 'The clean codebase and modern architecture saved us months of development.',
109
- avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
110
- },
111
- {
112
- name: 'Emma Williams',
113
- role: 'UX Designer',
114
- quote: 'Finally a template that actually looks good and works perfectly on all devices.',
115
- avatar: 'https://randomuser.me/api/portraits/women/68.jpg'
116
- }
117
- ];
118
-
119
- const pricingPlans = [
120
- {
121
- name: 'Starter',
122
- price: '$19',
123
- period: '/month',
124
- features: ['Basic features', 'Email support', 'Limited access', 'Community forum'],
125
- cta: 'Get Started',
126
- popular: false
127
- },
128
- {
129
- name: 'Professional',
130
- price: '$49',
131
- period: '/month',
132
- features: ['All starter features', 'Priority support', 'Full access', 'API access'],
133
- cta: 'Get Professional',
134
- popular: true
135
- },
136
- {
137
- name: 'Enterprise',
138
- price: '$99',
139
- period: '/month',
140
- features: ['All professional features', '24/7 support', 'Dedicated account manager', 'Custom solutions'],
141
- cta: 'Contact Sales',
142
- popular: false
143
- }
144
- ];
145
-
146
- return (
147
- <div className="min-h-screen">
148
- {/* Navigation */}
149
- <header className={`fixed w-full z-50 transition-all duration-300 ${scrollY > 50 ? 'bg-gray-900/90 py-2 shadow-lg' : 'bg-transparent py-4'}`}>
150
- <div className="container mx-auto px-6">
151
- <div className="flex justify-between items-center">
152
- <div className="flex items-center">
153
- <div className="text-2xl font-bold gradient-text">Nexus</div>
154
- </div>
155
-
156
- {/* Desktop Navigation */}
157
- <nav className="hidden md:flex space-x-8">
158
- {navItems.map(item => (
159
- <button
160
- key={item.id}
161
- onClick={() => setActiveTab(item.id)}
162
- className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${activeTab === item.id ? 'bg-indigo-600 text-white' : 'text-gray-300 hover:text-white hover:bg-gray-700'}`}
163
- >
164
- {item.label}
165
- </button>
166
- ))}
167
- </nav>
168
-
169
- <div className="hidden md:block">
170
- <button className="bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-2 rounded-full text-white font-medium hover:opacity-90 transition-opacity">
171
- Get Started
172
- </button>
173
- </div>
174
-
175
- {/* Mobile menu button */}
176
- <div className="md:hidden">
177
- <button
178
- onClick={() => setIsMenuOpen(!isMenuOpen)}
179
- className="text-gray-300 hover:text-white focus:outline-none"
180
- >
181
- <i className={`fas ${isMenuOpen ? 'fa-times' : 'fa-bars'} text-2xl`}></i>
182
- </button>
183
- </div>
184
  </div>
185
-
186
- {/* Mobile Navigation */}
187
- {isMenuOpen && (
188
- <div className="md:hidden mt-4 pb-4">
189
- <div className="flex flex-col space-y-2">
190
- {navItems.map(item => (
191
- <button
192
- key={item.id}
193
- onClick={() => {
194
- setActiveTab(item.id);
195
- setIsMenuOpen(false);
196
- }}
197
- className={`px-3 py-2 rounded-md text-left text-sm font-medium ${activeTab === item.id ? 'bg-indigo-600 text-white' : 'text-gray-300 hover:text-white hover:bg-gray-700'}`}
198
- >
199
- {item.label}
200
- </button>
201
- ))}
202
- <button className="bg-gradient-to-r from-indigo-500 to-purple-600 px-4 py-2 rounded-full text-white font-medium mt-2">
203
- Get Started
204
- </button>
205
- </div>
206
- </div>
207
- )}
208
- </div>
209
- </header>
210
-
211
- {/* Hero Section */}
212
- <section id="home" className="pt-32 pb-20 px-6">
213
- <div className="container mx-auto">
214
- <div className="flex flex-col lg:flex-row items-center">
215
- <div className="lg:w-1/2 mb-12 lg:mb-0">
216
- <h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
217
- Build <span className="gradient-text">amazing</span> digital experiences
218
- </h1>
219
- <p className="text-xl text-gray-300 mb-8 max-w-lg">
220
- Nexus combines the power of React 19 with beautiful Tailwind CSS to help you create stunning websites in record time.
221
- </p>
222
- <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
223
- <button className="bg-gradient-to-r from-indigo-500 to-purple-600 px-8 py-4 rounded-full text-white font-medium hover:opacity-90 transition-opacity shadow-lg">
224
- Get Started for Free
225
- </button>
226
- <button className="bg-gray-800 px-8 py-4 rounded-full text-white font-medium hover:bg-gray-700 transition-colors border border-gray-700">
227
- <i className="fas fa-play mr-2"></i> Watch Demo
228
- </button>
229
  </div>
230
- <div className="mt-8 flex items-center space-x-4">
231
- <div className="flex -space-x-2">
232
- <img className="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User" />
233
- <img className="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/15.jpg" alt="User" />
234
- <img className="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/33.jpg" alt="User" />
235
- </div>
236
- <div className="text-gray-400">
237
- Trusted by <span className="text-white font-medium">10,000+</span> developers
238
- </div>
239
  </div>
240
- </div>
241
- <div className="lg:w-1/2 relative">
242
- <div className="relative floating">
243
- <div className="absolute -top-10 -left-10 w-32 h-32 bg-purple-600 rounded-full filter blur-3xl opacity-20"></div>
244
- <div className="absolute -bottom-10 -right-10 w-32 h-32 bg-indigo-600 rounded-full filter blur-3xl opacity-20"></div>
245
- <div className="bg-glass p-6 rounded-3xl shadow-2xl border border-gray-700 overflow-hidden">
246
- <div className="bg-gray-800 rounded-2xl p-4">
247
- <div className="flex space-x-2 mb-4">
248
- <div className="w-3 h-3 rounded-full bg-red-500"></div>
249
- <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
250
- <div className="w-3 h-3 rounded-full bg-green-500"></div>
251
- </div>
252
- <div className="bg-gray-900 rounded-lg p-4 font-mono text-sm overflow-x-auto">
253
- <code className="text-green-400">import</code> <code className="text-white">React</code> <code className="text-green-400">from</code> <code className="text-yellow-300">'react'</code><br/>
254
- <code className="text-green-400">import</code> <code className="text-white">{`{ Home }`}</code> <code className="text-green-400">from</code> <code className="text-yellow-300">'./pages'</code><br/><br/>
255
- <code className="text-blue-400">function</code> <code className="text-white">App() {`{`}</code><br/>
256
- <code className="text-white ml-4"> </code><code className="text-purple-400">return</code> <code className="text-white">(</code><br/>
257
- <code className="text-white ml-8"> </code><code className="text-gray-500">{`{/* Your amazing UI */}`}</code><br/>
258
- <code className="text-white ml-8"> </code><code className="text-yellow-300">&lt;Home</code> <code className="text-blue-400">/&gt;</code><br/>
259
- <code className="text-white ml-4"> </code><code className="text-white">)</code><br/>
260
- <code className="text-white">}</code><br/><br/>
261
- <code className="text-green-400">export</code> <code className="text-purple-400">default</code> <code className="text-white">App</code>
262
- </div>
263
- </div>
264
- </div>
265
  </div>
266
  </div>
267
  </div>
268
  </div>
269
- </section>
270
-
271
- {/* Features Section */}
272
- <section id="features" className="py-20 bg-gray-800/50">
273
- <div className="container mx-auto px-6">
274
- <div className="text-center mb-16">
275
- <h2 className="text-3xl md:text-4xl font-bold mb-4">Powerful Features</h2>
276
- <p className="text-xl text-gray-400 max-w-2xl mx-auto">
277
- Everything you need to build modern, beautiful, and high-performance web applications.
278
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
279
  </div>
280
 
281
- <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
282
- {features.map((feature, index) => (
283
- <div key={index} className="bg-gray-800 rounded-xl p-8 card-hover">
284
- <div className="w-14 h-14 bg-indigo-600/20 rounded-lg flex items-center justify-center mb-6">
285
- <i className={`fas fa-${feature.icon} text-2xl text-indigo-400`}></i>
286
- </div>
287
- <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
288
- <p className="text-gray-400">{feature.description}</p>
289
- </div>
290
- ))}
291
  </div>
292
 
293
- <div className="mt-20 bg-gradient-to-r from-indigo-600/20 to-purple-600/20 rounded-2xl p-8 md:p-12">
294
- <div className="flex flex-col lg:flex-row items-center">
295
- <div className="lg:w-1/2 mb-8 lg:mb-0">
296
- <h3 className="text-2xl md:text-3xl font-bold mb-4">Ready to get started?</h3>
297
- <p className="text-gray-300 mb-6">
298
- Join thousands of developers who are already building amazing things with Nexus.
299
- </p>
300
- <button className="bg-white text-gray-900 px-8 py-3 rounded-full font-medium hover:bg-gray-200 transition-colors">
301
- Get Started Now
302
- </button>
303
- </div>
304
- <div className="lg:w-1/2 flex justify-center">
305
- <div className="relative">
306
- <div className="absolute -top-6 -left-6 w-24 h-24 bg-purple-600 rounded-full filter blur-xl opacity-20"></div>
307
- <div className="absolute -bottom-6 -right-6 w-24 h-24 bg-indigo-600 rounded-full filter blur-xl opacity-20"></div>
308
- <div className="bg-gray-900 p-4 rounded-xl border border-gray-700">
309
- <div className="flex items-center space-x-3 mb-4">
310
- <div className="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
311
- <i className="fas fa-code text-white"></i>
312
- </div>
313
- <div>
314
- <div className="font-medium">React 19 Components</div>
315
- <div className="text-xs text-gray-500">Latest version</div>
316
- </div>
317
- </div>
318
- <div className="bg-gray-800 rounded-lg p-4 text-sm">
319
- <div className="flex justify-between text-gray-500 mb-2">
320
- <span>Progress</span>
321
- <span>85%</span>
322
- </div>
323
- <div className="w-full bg-gray-700 rounded-full h-2">
324
- <div className="bg-gradient-to-r from-indigo-500 to-purple-600 h-2 rounded-full" style={{width: '85%'}}></div>
325
- </div>
326
- </div>
327
- </div>
328
- </div>
329
- </div>
330
  </div>
331
  </div>
332
  </div>
333
- </section>
334
-
335
- {/* Pricing Section */}
336
- <section id="pricing" className="py-20">
337
- <div className="container mx-auto px-6">
338
- <div className="text-center mb-16">
339
- <h2 className="text-3xl md:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2>
340
- <p className="text-xl text-gray-400 max-w-2xl mx-auto">
341
- Choose the plan that fits your needs. No hidden fees, cancel anytime.
342
- </p>
343
  </div>
344
 
345
- <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
346
- {pricingPlans.map((plan, index) => (
347
- <div key={index} className={`relative rounded-2xl overflow-hidden ${plan.popular ? 'ring-2 ring-purple-500' : 'border border-gray-800'}`}>
348
- {plan.popular && (
349
- <div className="absolute top-0 right-0 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">
350
- POPULAR
351
- </div>
352
- )}
353
- <div className="p-8 bg-gray-800">
354
- <h3 className="text-xl font-bold mb-2">{plan.name}</h3>
355
- <div className="mb-6">
356
- <span className="text-4xl font-bold">{plan.price}</span>
357
- <span className="text-gray-400">{plan.period}</span>
358
- </div>
359
- <ul className="space-y-3 mb-8">
360
- {plan.features.map((feature, i) => (
361
- <li key={i} className="flex items-center">
362
- <i className="fas fa-check text-green-500 mr-3"></i>
363
- <span>{feature}</span>
364
- </li>
365
- ))}
366
- </ul>
367
- <button className={`w-full py-3 rounded-lg font-medium ${plan.popular ? 'bg-gradient-to-r from-purple-600 to-indigo-600 text-white' : 'bg-gray-700 hover:bg-gray-600 text-white'}`}>
368
- {plan.cta}
369
- </button>
370
- </div>
371
- </div>
372
- ))}
373
  </div>
374
 
375
- <div className="mt-12 text-center text-gray-400">
376
- Need something custom? <a href="#contact" className="text-indigo-400 hover:underline">Contact our sales team</a>
377
- </div>
378
- </div>
379
- </section>
380
-
381
- {/* Testimonials Section */}
382
- <section id="testimonials" className="py-20 bg-gray-800/50">
383
- <div className="container mx-auto px-6">
384
- <div className="text-center mb-16">
385
- <h2 className="text-3xl md:text-4xl font-bold mb-4">What Our Customers Say</h2>
386
- <p className="text-xl text-gray-400 max-w-2xl mx-auto">
387
- Don't just take our word for it. Here's what our users have to say.
388
- </p>
389
  </div>
390
 
391
- <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
392
- {testimonials.map((testimonial, index) => (
393
- <div key={index} className="bg-gray-800 rounded-xl p-8 card-hover">
394
- <div className="flex items-center mb-6">
395
- <img src={testimonial.avatar} alt={testimonial.name} className="w-12 h-12 rounded-full mr-4" />
396
- <div>
397
- <h4 className="font-bold">{testimonial.name}</h4>
398
- <p className="text-gray-400 text-sm">{testimonial.role}</p>
399
- </div>
400
- </div>
401
- <p className="text-gray-300 mb-6">"{testimonial.quote}"</p>
402
- <div className="flex text-yellow-400">
403
- <i className="fas fa-star"></i>
404
- <i className="fas fa-star"></i>
405
- <i className="fas fa-star"></i>
406
- <i className="fas fa-star"></i>
407
- <i className="fas fa-star"></i>
408
- </div>
409
- </div>
410
- ))}
411
- </div>
412
- </div>
413
- </section>
414
-
415
- {/* Contact Section */}
416
- <section id="contact" className="py-20">
417
- <div className="container mx-auto px-6">
418
- <div className="flex flex-col lg:flex-row">
419
- <div className="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
420
- <h2 className="text-3xl md:text-4xl font-bold mb-6">Get in Touch</h2>
421
- <p className="text-xl text-gray-400 mb-8">
422
- Have questions or want to learn more? Our team is here to help.
423
- </p>
424
- <div className="space-y-6">
425
- <div className="flex items-center">
426
- <div className="w-12 h-12 bg-indigo-600/20 rounded-lg flex items-center justify-center mr-4">
427
- <i className="fas fa-envelope text-indigo-400"></i>
428
- </div>
429
- <div>
430
- <div className="text-gray-400">Email us</div>
431
- <div className="font-medium">support@nexus.dev</div>
432
- </div>
433
- </div>
434
- <div className="flex items-center">
435
- <div className="w-12 h-12 bg-indigo-600/20 rounded-lg flex items-center justify-center mr-4">
436
- <i className="fas fa-phone-alt text-indigo-400"></i>
437
- </div>
438
- <div>
439
- <div className="text-gray-400">Call us</div>
440
- <div className="font-medium">+1 (555) 123-4567</div>
441
- </div>
442
- </div>
443
- <div className="flex items-center">
444
- <div className="w-12 h-12 bg-indigo-600/20 rounded-lg flex items-center justify-center mr-4">
445
- <i className="fas fa-map-marker-alt text-indigo-400"></i>
446
- </div>
447
- <div>
448
- <div className="text-gray-400">Visit us</div>
449
- <div className="font-medium">123 Tech Street, San Francisco</div>
450
- </div>
451
- </div>
452
- </div>
453
- <div className="mt-8 flex space-x-4">
454
- <a href="#" className="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700">
455
- <i className="fab fa-twitter"></i>
456
- </a>
457
- <a href="#" className="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700">
458
- <i className="fab fa-github"></i>
459
- </a>
460
- <a href="#" className="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700">
461
- <i className="fab fa-linkedin-in"></i>
462
- </a>
463
- <a href="#" className="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700">
464
- <i className="fab fa-discord"></i>
465
- </a>
466
- </div>
467
- </div>
468
- <div className="lg:w-1/2">
469
- <div className="bg-gray-800 rounded-xl p-8">
470
- <h3 className="text-2xl font-bold mb-6">Send us a message</h3>
471
- <form className="space-y-6">
472
- <div>
473
- <label htmlFor="name" className="block text-sm font-medium mb-2">Name</label>
474
- <input type="text" id="name" className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" placeholder="Your name" />
475
- </div>
476
- <div>
477
- <label htmlFor="email" className="block text-sm font-medium mb-2">Email</label>
478
- <input type="email" id="email" className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" placeholder="your@email.com" />
479
- </div>
480
- <div>
481
- <label htmlFor="subject" className="block text-sm font-medium mb-2">Subject</label>
482
- <input type="text" id="subject" className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" placeholder="How can we help?" />
483
- </div>
484
- <div>
485
- <label htmlFor="message" className="block text-sm font-medium mb-2">Message</label>
486
- <textarea id="message" rows="4" className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" placeholder="Your message..."></textarea>
487
- </div>
488
- <button type="submit" className="w-full bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-3 rounded-lg text-white font-medium hover:opacity-90 transition-opacity">
489
- Send Message
490
- </button>
491
- </form>
492
- </div>
493
- </div>
494
- </div>
495
- </div>
496
- </section>
497
-
498
- {/* Footer */}
499
- <footer className="bg-gray-900 border-t border-gray-800 py-12">
500
- <div className="container mx-auto px-6">
501
- <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
502
- <div>
503
- <div className="text-2xl font-bold gradient-text mb-4">Nexus</div>
504
- <p className="text-gray-400 mb-4">
505
- Build amazing digital experiences with React 19 and Tailwind CSS.
506
- </p>
507
- <div className="flex space-x-4">
508
- <a href="#" className="text-gray-400 hover:text-white">
509
- <i className="fab fa-twitter"></i>
510
- </a>
511
- <a href="#" className="text-gray-400 hover:text-white">
512
- <i className="fab fa-github"></i>
513
- </a>
514
- <a href="#" className="text-gray-400 hover:text-white">
515
- <i className="fab fa-linkedin-in"></i>
516
- </a>
517
- </div>
518
- </div>
519
- <div>
520
- <h4 className="text-lg font-bold mb-4">Product</h4>
521
- <ul className="space-y-2">
522
- <li><a href="#" className="text-gray-400 hover:text-white">Features</a></li>
523
- <li><a href="#" className="text-gray-400 hover:text-white">Pricing</a></li>
524
- <li><a href="#" className="text-gray-400 hover:text-white">Documentation</a></li>
525
- <li><a href="#" className="text-gray-400 hover:text-white">Releases</a></li>
526
- </ul>
527
- </div>
528
- <div>
529
- <h4 className="text-lg font-bold mb-4">Company</h4>
530
- <ul className="space-y-2">
531
- <li><a href="#" className="text-gray-400 hover:text-white">About</a></li>
532
- <li><a href="#" className="text-gray-400 hover:text-white">Careers</a></li>
533
- <li><a href="#" className="text-gray-400 hover:text-white">Blog</a></li>
534
- <li><a href="#" className="text-gray-400 hover:text-white">Press</a></li>
535
- </ul>
536
- </div>
537
- <div>
538
- <h4 className="text-lg font-bold mb-4">Legal</h4>
539
- <ul className="space-y-2">
540
- <li><a href="#" className="text-gray-400 hover:text-white">Privacy</a></li>
541
- <li><a href="#" className="text-gray-400 hover:text-white">Terms</a></li>
542
- <li><a href="#" className="text-gray-400 hover:text-white">Cookie Policy</a></li>
543
- <li><a href="#" className="text-gray-400 hover:text-white">Contact</a></li>
544
- </ul>
545
- </div>
546
- </div>
547
- <div className="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
548
- <div className="text-gray-400 mb-4 md:mb-0">
549
- &copy; {new Date().getFullYear()} Nexus. All rights reserved.
550
- </div>
551
- <div className="flex space-x-6">
552
- <a href="#" className="text-gray-400 hover:text-white">Privacy Policy</a>
553
- <a href="#" className="text-gray-400 hover:text-white">Terms of Service</a>
554
- <a href="#" className="text-gray-400 hover:text-white">Cookies</a>
555
- </div>
556
- </div>
557
  </div>
558
- </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
559
  </div>
560
- );
561
- };
562
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
563
  document.addEventListener('DOMContentLoaded', function() {
564
- ReactDOM.render(<App />, document.getElementById('root'));
 
 
 
 
 
 
 
 
 
 
 
 
565
  });
566
  </script>
567
  <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=gokul9/deepseek-v3-react-19-dont-works" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nexus | Creative Agency</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6366f1',
15
+ secondary: '#8b5cf6',
16
+ dark: '#0f172a',
17
+ light: '#f8fafc'
18
+ },
19
+ animation: {
20
+ 'float': 'float 6s ease-in-out infinite',
21
+ 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite'
22
+ },
23
+ keyframes: {
24
+ float: {
25
+ '0%, 100%': { transform: 'translateY(0)' },
26
+ '50%': { transform: 'translateY(-20px)' }
27
+ }
28
+ }
29
+ }
30
+ }
31
+ }
32
+ </script>
33
  <style>
34
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
35
+
36
+ body {
37
+ font-family: 'Poppins', sans-serif;
38
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
39
+ color: #f8fafc;
40
+ overflow-x: hidden;
41
  }
42
+
43
+ .gradient-bg {
44
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
 
 
 
 
 
45
  }
46
+
47
  .card-hover {
48
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
49
  }
50
+
51
  .card-hover:hover {
52
  transform: translateY(-10px);
53
+ box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25);
54
+ }
55
+
56
+ .text-gradient {
57
+ background: linear-gradient(to right, #8b5cf6, #6366f1);
58
+ -webkit-background-clip: text;
59
+ -webkit-text-fill-color: transparent;
60
+ }
61
+
62
+ .blob {
63
+ position: absolute;
64
+ border-radius: 50%;
65
+ filter: blur(80px);
66
+ opacity: 0.5;
67
+ z-index: -1;
68
+ }
69
+
70
+ .blob-1 {
71
+ width: 500px;
72
+ height: 500px;
73
+ background: #8b5cf6;
74
+ top: -100px;
75
+ left: -100px;
76
+ }
77
+
78
+ .blob-2 {
79
+ width: 400px;
80
+ height: 400px;
81
+ background: #6366f1;
82
+ bottom: -100px;
83
+ right: -100px;
84
+ }
85
+
86
+ .hero-pattern {
87
+ background-image: radial-gradient(#4f46e5 1px, transparent 1px);
88
+ background-size: 30px 30px;
89
+ }
90
+
91
+ .service-icon {
92
+ transition: all 0.3s ease;
93
  }
94
+
95
+ .service-card:hover .service-icon {
96
+ transform: scale(1.1);
97
+ color: #8b5cf6;
98
+ }
99
+
100
+ .portfolio-item {
101
+ position: relative;
102
+ overflow: hidden;
103
+ border-radius: 12px;
104
+ }
105
+
106
+ .portfolio-overlay {
107
+ position: absolute;
108
+ top: 0;
109
+ left: 0;
110
+ width: 100%;
111
+ height: 100%;
112
+ background: rgba(99, 102, 241, 0.85);
113
+ display: flex;
114
+ flex-direction: column;
115
+ justify-content: center;
116
+ align-items: center;
117
+ opacity: 0;
118
+ transition: all 0.4s ease;
119
+ padding: 20px;
120
+ text-align: center;
121
+ }
122
+
123
+ .portfolio-item:hover .portfolio-overlay {
124
+ opacity: 1;
125
+ }
126
+
127
+ .testimonial-card {
128
+ transition: all 0.3s ease;
129
+ }
130
+
131
+ .testimonial-card:hover {
132
+ transform: translateY(-5px);
133
+ }
134
+
135
+ .animate-on-scroll {
136
+ opacity: 0;
137
+ transform: translateY(30px);
138
+ transition: opacity 0.6s ease-out, transform 0.6s ease-out;
139
+ }
140
+
141
+ .animate-on-scroll.visible {
142
+ opacity: 1;
143
+ transform: translateY(0);
144
  }
145
  </style>
146
  </head>
147
+ <body class="min-h-screen">
148
+ <!-- Blobs for background effect -->
149
+ <div class="blob blob-1"></div>
150
+ <div class="blob blob-2"></div>
151
+
152
+ <!-- Navigation -->
153
+ <nav class="fixed w-full z-50 py-4 px-6 backdrop-blur-md bg-dark/80">
154
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
155
+ <div class="flex items-center space-x-2">
156
+ <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
157
+ <i class="fas fa-infinity text-white text-xl"></i>
158
+ </div>
159
+ <span class="text-2xl font-bold">Nexus</span>
160
  </div>
161
+
162
+ <div class="hidden md:flex space-x-10">
163
+ <a href="#" class="hover:text-primary transition-colors">Home</a>
164
+ <a href="#" class="hover:text-primary transition-colors">Services</a>
165
+ <a href="#" class="hover:text-primary transition-colors">Portfolio</a>
166
+ <a href="#" class="hover:text-primary transition-colors">About</a>
167
+ <a href="#" class="hover:text-primary transition-colors">Contact</a>
168
+ </div>
169
+
170
+ <button class="hidden md:block px-6 py-2 rounded-full gradient-bg text-white font-medium hover:opacity-90 transition-opacity">
171
+ Get Started
172
+ </button>
173
+
174
+ <button class="md:hidden text-2xl">
175
+ <i class="fas fa-bars"></i>
176
+ </button>
177
  </div>
178
+ </nav>
179
+
180
+ <!-- Hero Section -->
181
+ <section class="min-h-screen flex items-center pt-16 pb-20 px-6">
182
+ <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
183
+ <div class="animate-on-scroll">
184
+ <h1 class="text-5xl md:text-7xl font-bold leading-tight">
185
+ Transform Your <span class="text-gradient">Digital</span> Presence
186
+ </h1>
187
+ <p class="mt-6 text-xl text-gray-300 max-w-lg">
188
+ We create stunning digital experiences that help your business stand out in the crowded marketplace.
189
+ </p>
190
+ <div class="mt-10 flex flex-wrap gap-4">
191
+ <button class="px-8 py-4 rounded-full gradient-bg text-white font-medium text-lg hover:opacity-90 transition-opacity shadow-lg shadow-indigo-500/30">
192
+ Start Your Project
193
+ </button>
194
+ <button class="px-8 py-4 rounded-full border-2 border-gray-700 text-white font-medium text-lg hover:border-primary transition-colors">
195
+ View Our Work
196
+ </button>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="relative animate-on-scroll">
201
+ <div class="relative z-10">
202
+ <div class="bg-dark/30 backdrop-blur-sm border border-gray-800 rounded-2xl p-6 transform rotate-3">
203
+ <div class="bg-gray-800 rounded-xl overflow-hidden">
204
+ <div class="p-4 bg-gray-900 flex items-center space-x-2">
205
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
206
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
207
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
208
  </div>
209
+ <div class="p-6">
210
+ <div class="h-4 bg-gray-700 rounded w-3/4 mb-4"></div>
211
+ <div class="h-4 bg-gray-700 rounded w-full mb-4"></div>
212
+ <div class="h-4 bg-gray-700 rounded w-5/6 mb-6"></div>
213
+ <div class="flex space-x-4">
214
+ <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center">
215
+ <i class="fas fa-lightbulb text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  </div>
217
+ <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center">
218
+ <i class="fas fa-paint-brush text-white"></i>
 
 
 
 
 
 
 
219
  </div>
220
+ <div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center">
221
+ <i class="fas fa-code text-white"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
222
  </div>
223
  </div>
224
  </div>
225
  </div>
226
+ </div>
227
+ </div>
228
+
229
+ <div class="absolute -top-6 -right-6 w-32 h-32 rounded-full bg-purple-500/20 blur-2xl animate-pulse"></div>
230
+ <div class="absolute -bottom-6 -left-6 w-40 h-40 rounded-full bg-indigo-500/20 blur-2xl animate-pulse-slow"></div>
231
+ </div>
232
+ </div>
233
+ </section>
234
+
235
+ <!-- Services Section -->
236
+ <section class="py-20 px-6">
237
+ <div class="max-w-7xl mx-auto">
238
+ <div class="text-center max-w-3xl mx-auto animate-on-scroll">
239
+ <h2 class="text-4xl font-bold">Our <span class="text-gradient">Services</span></h2>
240
+ <p class="mt-4 text-xl text-gray-300">
241
+ We offer a comprehensive suite of digital services to help your business thrive online.
242
+ </p>
243
+ </div>
244
+
245
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
246
+ <!-- Service 1 -->
247
+ <div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 card-hover animate-on-scroll">
248
+ <div class="w-16 h-16 rounded-xl gradient-bg flex items-center justify-center service-icon">
249
+ <i class="fas fa-laptop-code text-2xl text-white"></i>
250
+ </div>
251
+ <h3 class="text-2xl font-bold mt-6">Web Development</h3>
252
+ <p class="mt-4 text-gray-300">
253
+ Custom websites and web applications built with the latest technologies for optimal performance.
254
+ </p>
255
+ <a href="#" class="mt-6 inline-flex items-center text-primary hover:text-indigo-400 transition-colors">
256
+ Learn more
257
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
258
+ </a>
259
+ </div>
260
+
261
+ <!-- Service 2 -->
262
+ <div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 card-hover animate-on-scroll">
263
+ <div class="w-16 h-16 rounded-xl gradient-bg flex items-center justify-center service-icon">
264
+ <i class="fas fa-paint-brush text-2xl text-white"></i>
265
+ </div>
266
+ <h3 class="text-2xl font-bold mt-6">UI/UX Design</h3>
267
+ <p class="mt-4 text-gray-300">
268
+ Beautiful, intuitive interfaces that provide exceptional user experiences across all devices.
269
+ </p>
270
+ <a href="#" class="mt-6 inline-flex items-center text-primary hover:text-indigo-400 transition-colors">
271
+ Learn more
272
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
273
+ </a>
274
+ </div>
275
+
276
+ <!-- Service 3 -->
277
+ <div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 card-hover animate-on-scroll">
278
+ <div class="w-16 h-16 rounded-xl gradient-bg flex items-center justify-center service-icon">
279
+ <i class="fas fa-mobile-alt text-2xl text-white"></i>
280
+ </div>
281
+ <h3 class="text-2xl font-bold mt-6">App Development</h3>
282
+ <p class="mt-4 text-gray-300">
283
+ Native and cross-platform mobile applications that engage users and deliver results.
284
+ </p>
285
+ <a href="#" class="mt-6 inline-flex items-center text-primary hover:text-indigo-400 transition-colors">
286
+ Learn more
287
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
288
+ </a>
289
+ </div>
290
+
291
+ <!-- Service 4 -->
292
+ <div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 card-hover animate-on-scroll">
293
+ <div class="w-16 h-16 rounded-xl gradient-bg flex items-center justify-center service-icon">
294
+ <i class="fas fa-chart-line text-2xl text-white"></i>
295
+ </div>
296
+ <h3 class="text-2xl font-bold mt-6">Digital Marketing</h3>
297
+ <p class="mt-4 text-gray-300">
298
+ Data-driven marketing strategies to increase your online visibility and drive conversions.
299
+ </p>
300
+ <a href="#" class="mt-6 inline-flex items-center text-primary hover:text-indigo-400 transition-colors">
301
+ Learn more
302
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
303
+ </a>
304
+ </div>
305
+
306
+ <!-- Service 5 -->
307
+ <div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 card-hover animate-on-scroll">
308
+ <div class="w-16 h-16 rounded-xl gradient-bg flex items-center justify-center service-icon">
309
+ <i class="fas fa-search text-2xl text-white"></i>
310
+ </div>
311
+ <h3 class="text-2xl font-bold mt-6">SEO Optimization</h3>
312
+ <p class="mt-4 text-gray-300">
313
+ Improve your search engine rankings and attract more organic traffic to your website.
314
+ </p>
315
+ <a href="#" class="mt-6 inline-flex items-center text-primary hover:text-indigo-400 transition-colors">
316
+ Learn more
317
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
318
+ </a>
319
+ </div>
320
+
321
+ <!-- Service 6 -->
322
+ <div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 card-hover animate-on-scroll">
323
+ <div class="w-16 h-16 rounded-xl gradient-bg flex items-center justify-center service-icon">
324
+ <i class="fas fa-cloud text-2xl text-white"></i>
325
+ </div>
326
+ <h3 class="text-2xl font-bold mt-6">Cloud Solutions</h3>
327
+ <p class="mt-4 text-gray-300">
328
+ Scalable cloud infrastructure and services to power your business operations.
329
+ </p>
330
+ <a href="#" class="mt-6 inline-flex items-center text-primary hover:text-indigo-400 transition-colors">
331
+ Learn more
332
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
333
+ </a>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </section>
338
+
339
+ <!-- Portfolio Section -->
340
+ <section class="py-20 px-6">
341
+ <div class="max-w-7xl mx-auto">
342
+ <div class="text-center max-w-3xl mx-auto animate-on-scroll">
343
+ <h2 class="text-4xl font-bold">Our <span class="text-gradient">Portfolio</span></h2>
344
+ <p class="mt-4 text-xl text-gray-300">
345
+ Explore our recent projects and see how we've helped businesses achieve their goals.
346
+ </p>
347
+ </div>
348
+
349
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
350
+ <!-- Portfolio Item 1 -->
351
+ <div class="portfolio-item animate-on-scroll">
352
+ <div class="bg-gray-800 rounded-2xl overflow-hidden aspect-video">
353
+ <div class="w-full h-full bg-gradient-to-r from-indigo-500 to-purple-600"></div>
354
+ </div>
355
+ <div class="portfolio-overlay">
356
+ <h3 class="text-2xl font-bold text-white">E-commerce Platform</h3>
357
+ <p class="mt-2 text-indigo-100">Web Development, UI/UX Design</p>
358
+ <button class="mt-6 px-6 py-2 rounded-full border border-white text-white hover:bg-white hover:text-dark transition-colors">
359
+ View Case Study
360
+ </button>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- Portfolio Item 2 -->
365
+ <div class="portfolio-item animate-on-scroll">
366
+ <div class="bg-gray-800 rounded-2xl overflow-hidden aspect-video">
367
+ <div class="w-full h-full bg-gradient-to-r from-purple-500 to-pink-600"></div>
368
+ </div>
369
+ <div class="portfolio-overlay">
370
+ <h3 class="text-2xl font-bold text-white">Finance Dashboard</h3>
371
+ <p class="mt-2 text-indigo-100">Web Application, Data Visualization</p>
372
+ <button class="mt-6 px-6 py-2 rounded-full border border-white text-white hover:bg-white hover:text-dark transition-colors">
373
+ View Case Study
374
+ </button>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Portfolio Item 3 -->
379
+ <div class="portfolio-item animate-on-scroll">
380
+ <div class="bg-gray-800 rounded-2xl overflow-hidden aspect-video">
381
+ <div class="w-full h-full bg-gradient-to-r from-teal-500 to-blue-600"></div>
382
+ </div>
383
+ <div class="portfolio-overlay">
384
+ <h3 class="text-2xl font-bold text-white">Travel App</h3>
385
+ <p class="mt-2 text-indigo-100">Mobile App, UI/UX Design</p>
386
+ <button class="mt-6 px-6 py-2 rounded-full border border-white text-white hover:bg-white hover:text-dark transition-colors">
387
+ View Case Study
388
+ </button>
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Portfolio Item 4 -->
393
+ <div class="portfolio-item animate-on-scroll">
394
+ <div class="bg-gray-800 rounded-2xl overflow-hidden aspect-video">
395
+ <div class="w-full h-full bg-gradient-to-r from-amber-500 to-orange-600"></div>
396
+ </div>
397
+ <div class="portfolio-overlay">
398
+ <h3 class="text-2xl font-bold text-white">Restaurant Booking</h3>
399
+ <p class="mt-2 text-indigo-100">Web Application, E-commerce</p>
400
+ <button class="mt-6 px-6 py-2 rounded-full border border-white text-white hover:bg-white hover:text-dark transition-colors">
401
+ View Case Study
402
+ </button>
403
+ </div>
404
+ </div>
405
+
406
+ <!-- Portfolio Item 5 -->
407
+ <div class="portfolio-item animate-on-scroll">
408
+ <div class="bg-gray-800 rounded-2xl overflow-hidden aspect-video">
409
+ <div class="w-full h-full bg-gradient-to-r from-emerald-500 to-green-600"></div>
410
+ </div>
411
+ <div class="portfolio-overlay">
412
+ <h3 class="text-2xl font-bold text-white">Fitness Tracker</h3>
413
+ <p class="mt-2 text-indigo-100">Mobile App, Wearable Integration</p>
414
+ <button class="mt-6 px-6 py-2 rounded-full border border-white text-white hover:bg-white hover:text-dark transition-colors">
415
+ View Case Study
416
+ </button>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- Portfolio Item 6 -->
421
+ <div class="portfolio-item animate-on-scroll">
422
+ <div class="bg-gray-800 rounded-2xl overflow-hidden aspect-video">
423
+ <div class="w-full h-full bg-gradient-to-r from-rose-500 to-pink-600"></div>
424
+ </div>
425
+ <div class="portfolio-overlay">
426
+ <h3 class="text-2xl font-bold text-white">Social Media Platform</h3>
427
+ <p class="mt-2 text-indigo-100">Web Development, Real-time Features</p>
428
+ <button class="mt-6 px-6 py-2 rounded-full border border-white text-white hover:bg-white hover:text-dark transition-colors">
429
+ View Case Study
430
+ </button>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="text-center mt-12 animate-on-scroll">
436
+ <button class="px-8 py-4 rounded-full border-2 border-gray-700 text-white font-medium text-lg hover:border-primary transition-colors">
437
+ View All Projects
438
+ </button>
439
+ </div>
440
+ </div>
441
+ </section>
442
+
443
+ <!-- Testimonials Section -->
444
+ <section class="py-20 px-6">
445
+ <div class="max-w-7xl mx-auto">
446
+ <div class="text-center max-w-3xl mx-auto animate-on-scroll">
447
+ <h2 class="text-4xl font-bold">What Our <span class="text-gradient">Clients Say</span></h2>
448
+ <p class="mt-4 text-xl text-gray-300">
449
+ Don't just take our word for it. Here's what our clients have to say about working with us.
450
+ </p>
451
+ </div>
452
+
453
+ <div class="grid md:grid-cols-3 gap-8 mt-16">
454
+ <!-- Testimonial 1 -->
455
+ <div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 testimonial-card animate-on-scroll">
456
+ <div class="flex items-center">
457
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center">
458
+ <span class="text-2xl font-bold">JD</span>
459
+ </div>
460
+ <div class="ml-4">
461
+ <h4 class="text-xl font-bold">John Doe</h4>
462
+ <p class="text-gray-400">CEO, TechCorp</p>
463
+ </div>
464
+ </div>
465
+ <p class="mt-6 text-gray-300 italic">
466
+ "The team at Nexus transformed our online presence. Our conversion rates increased by 150% after the redesign. Their attention to detail and creative approach exceeded our expectations."
467
+ </p>
468
+ <div class="mt-6 flex text-yellow-400">
469
+ <i class="fas fa-star"></i>
470
+ <i class="fas fa-star"></i>
471
+ <i class="fas fa-star"></i>
472
+ <i class="fas fa-star"></i>
473
+ <i class="fas fa-star"></i>
474
+ </div>
475
+ </div>
476
+
477
+ <!-- Testimonial 2 -->
478
+ <div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 testimonial-card animate-on-scroll">
479
+ <div class="flex items-center">
480
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center">
481
+ <span class="text-2xl font-bold">AS</span>
482
+ </div>
483
+ <div class="ml-4">
484
+ <h4 class="text-xl font-bold">Alice Smith</h4>
485
+ <p class="text-gray-400">Marketing Director, GrowthCo</p>
486
+ </div>
487
+ </div>
488
+ <p class="mt-6 text-gray-300 italic">
489
+ "Working with Nexus was a game-changer for our business. They delivered our mobile app ahead of schedule and it's been a huge success with our users. Highly recommended!"
490
+ </p>
491
+ <div class="mt-6 flex text-yellow-400">
492
+ <i class="fas fa-star"></i>
493
+ <i class="fas fa-star"></i>
494
+ <i class="fas fa-star"></i>
495
+ <i class="fas fa-star"></i>
496
+ <i class="fas fa-star"></i>
497
+ </div>
498
+ </div>
499
+
500
+ <!-- Testimonial 3 -->
501
+ <div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-2xl p-8 testimonial-card animate-on-scroll">
502
+ <div class="flex items-center">
503
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-teal-500 to-blue-600 flex items-center justify-center">
504
+ <span class="text-2xl font-bold">MR</span>
505
+ </div>
506
+ <div class="ml-4">
507
+ <h4 class="text-xl font-bold">Michael Roberts</h4>
508
+ <p class="text-gray-400">Founder, StartupX</p>
509
+ </div>
510
+ </div>
511
+ <p class="mt-6 text-gray-300 italic">
512
+ "The Nexus team brought our vision to life with an incredible website that perfectly captures our brand. Their technical expertise and creative solutions helped us stand out in our industry."
513
+ </p>
514
+ <div class="mt-6 flex text-yellow-400">
515
+ <i class="fas fa-star"></i>
516
+ <i class="fas fa-star"></i>
517
+ <i class="fas fa-star"></i>
518
+ <i class="fas fa-star"></i>
519
+ <i class="fas fa-star-half-alt"></i>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </section>
525
+
526
+ <!-- Contact Section -->
527
+ <section class="py-20 px-6">
528
+ <div class="max-w-7xl mx-auto">
529
+ <div class="bg-dark/50 backdrop-blur-sm border border-gray-800 rounded-3xl overflow-hidden">
530
+ <div class="grid lg:grid-cols-2">
531
+ <div class="p-12">
532
+ <h2 class="text-4xl font-bold">Let's <span class="text-gradient">Work Together</span></h2>
533
+ <p class="mt-4 text-xl text-gray-300">
534
+ Have a project in mind? Get in touch with us and let's create something amazing together.
535
+ </p>
536
+
537
+ <div class="mt-10 space-y-6">
538
+ <div class="flex items-start">
539
+ <div class="w-12 h-12 rounded-xl gradient-bg flex items-center justify-center flex-shrink-0">
540
+ <i class="fas fa-envelope text-white"></i>
541
+ </div>
542
+ <div class="ml-4">
543
+ <h3 class="text-xl font-bold">Email Us</h3>
544
+ <p class="mt-1 text-gray-300">contact@nexus.example.com</p>
545
+ </div>
546
  </div>
547
 
548
+ <div class="flex items-start">
549
+ <div class="w-12 h-12 rounded-xl gradient-bg flex items-center justify-center flex-shrink-0">
550
+ <i class="fas fa-phone-alt text-white"></i>
551
+ </div>
552
+ <div class="ml-4">
553
+ <h3 class="text-xl font-bold">Call Us</h3>
554
+ <p class="mt-1 text-gray-300">+1 (555) 123-4567</p>
555
+ </div>
 
 
556
  </div>
557
 
558
+ <div class="flex items-start">
559
+ <div class="w-12 h-12 rounded-xl gradient-bg flex items-center justify-center flex-shrink-0">
560
+ <i class="fas fa-map-marker-alt text-white"></i>
561
+ </div>
562
+ <div class="ml-4">
563
+ <h3 class="text-xl font-bold">Visit Us</h3>
564
+ <p class="mt-1 text-gray-300">123 Innovation Street, Tech City</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
565
  </div>
566
  </div>
567
  </div>
568
+ </div>
569
+
570
+ <div class="bg-gradient-to-br from-indigo-900/50 to-purple-900/50 p-12">
571
+ <form class="space-y-6">
572
+ <div>
573
+ <label class="block text-gray-300 mb-2">Your Name</label>
574
+ <input type="text" class="w-full bg-dark/50 border border-gray-700 rounded-xl px-4 py-3 focus:outline-none focus:border-primary transition-colors" placeholder="John Doe">
 
 
 
575
  </div>
576
 
577
+ <div>
578
+ <label class="block text-gray-300 mb-2">Email Address</label>
579
+ <input type="email" class="w-full bg-dark/50 border border-gray-700 rounded-xl px-4 py-3 focus:outline-none focus:border-primary transition-colors" placeholder="john@example.com">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
580
  </div>
581
 
582
+ <div>
583
+ <label class="block text-gray-300 mb-2">Project Details</label>
584
+ <textarea rows="4" class="w-full bg-dark/50 border border-gray-700 rounded-xl px-4 py-3 focus:outline-none focus:border-primary transition-colors" placeholder="Tell us about your project..."></textarea>
 
 
 
 
 
 
 
 
 
 
 
585
  </div>
586
 
587
+ <button class="w-full px-6 py-4 rounded-xl gradient-bg text-white font-medium text-lg hover:opacity-90 transition-opacity">
588
+ Send Message
589
+ </button>
590
+ </form>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+ </section>
596
+
597
+ <!-- Footer -->
598
+ <footer class="py-12 px-6 border-t border-gray-800">
599
+ <div class="max-w-7xl mx-auto">
600
+ <div class="grid md:grid-cols-4 gap-8">
601
+ <div>
602
+ <div class="flex items-center space-x-2">
603
+ <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
604
+ <i class="fas fa-infinity text-white text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
605
  </div>
606
+ <span class="text-2xl font-bold">Nexus</span>
607
+ </div>
608
+ <p class="mt-4 text-gray-400">
609
+ Creating digital experiences that inspire and engage audiences worldwide.
610
+ </p>
611
+ <div class="flex space-x-4 mt-6">
612
+ <a href="#" class="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center hover:border-primary transition-colors">
613
+ <i class="fab fa-twitter"></i>
614
+ </a>
615
+ <a href="#" class="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center hover:border-primary transition-colors">
616
+ <i class="fab fa-facebook-f"></i>
617
+ </a>
618
+ <a href="#" class="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center hover:border-primary transition-colors">
619
+ <i class="fab fa-instagram"></i>
620
+ </a>
621
+ <a href="#" class="w-10 h-10 rounded-full border border-gray-700 flex items-center justify-center hover:border-primary transition-colors">
622
+ <i class="fab fa-linkedin-in"></i>
623
+ </a>
624
+ </div>
625
  </div>
626
+
627
+ <div>
628
+ <h3 class="text-xl font-bold">Services</h3>
629
+ <ul class="mt-6 space-y-3">
630
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Web Development</a></li>
631
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">UI/UX Design</a></li>
632
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">App Development</a></li>
633
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Digital Marketing</a></li>
634
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">SEO Optimization</a></li>
635
+ </ul>
636
+ </div>
637
+
638
+ <div>
639
+ <h3 class="text-xl font-bold">Company</h3>
640
+ <ul class="mt-6 space-y-3">
641
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">About Us</a></li>
642
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Our Team</a></li>
643
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Careers</a></li>
644
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Blog</a></li>
645
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Contact</a></li>
646
+ </ul>
647
+ </div>
648
+
649
+ <div>
650
+ <h3 class="text-xl font-bold">Newsletter</h3>
651
+ <p class="mt-6 text-gray-400">
652
+ Subscribe to our newsletter for the latest updates and offers.
653
+ </p>
654
+ <div class="mt-4 flex">
655
+ <input type="email" class="bg-dark/50 border border-gray-700 rounded-l-xl px-4 py-3 w-full focus:outline-none" placeholder="Your email">
656
+ <button class="px-4 rounded-r-xl gradient-bg">
657
+ <i class="fas fa-paper-plane text-white"></i>
658
+ </button>
659
+ </div>
660
+ </div>
661
+ </div>
662
+
663
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
664
+ <p>© 2023 Nexus. All rights reserved.</p>
665
+ </div>
666
+ </div>
667
+ </footer>
668
+
669
+ <script>
670
+ // Animation on scroll
671
  document.addEventListener('DOMContentLoaded', function() {
672
+ const observer = new IntersectionObserver((entries) => {
673
+ entries.forEach(entry => {
674
+ if (entry.isIntersecting) {
675
+ entry.target.classList.add('visible');
676
+ }
677
+ });
678
+ }, {
679
+ threshold: 0.1
680
+ });
681
+
682
+ document.querySelectorAll('.animate-on-scroll').forEach(el => {
683
+ observer.observe(el);
684
+ });
685
  });
686
  </script>
687
  <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=gokul9/deepseek-v3-react-19-dont-works" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>