Hugging Face's logo

Spaces:
rolead
/
mobeyond
Running

App Files Community
rolead commited on
Commit
ad2cb22
·
verified ·
1 Parent(s): 2eba019

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +528 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mobeyond
3
- emoji: 🔥
4
- colorFrom: indigo
5
- colorTo: pink
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: mobeyond
3
+ emoji: 🐳
4
+ colorFrom: red
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,528 @@
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 Digital | 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 fadeIn {
12
+ from { opacity: 0; transform: translateY(20px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+
16
+ .animate-fade-in {
17
+ animation: fadeIn 0.8s ease-out forwards;
18
+ }
19
+
20
+ .delay-100 { animation-delay: 0.1s; }
21
+ .delay-200 { animation-delay: 0.2s; }
22
+ .delay-300 { animation-delay: 0.3s; }
23
+
24
+ /* Custom gradient text */
25
+ .gradient-text {
26
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
27
+ -webkit-background-clip: text;
28
+ background-clip: text;
29
+ color: transparent;
30
+ }
31
+
32
+ /* Smooth scroll */
33
+ html {
34
+ scroll-behavior: smooth;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="font-sans bg-gray-50 text-gray-800">
39
+ <!-- Navigation -->
40
+ <nav class="fixed w-full bg-white shadow-md z-50 transition-all duration-300">
41
+ <div class="container mx-auto px-6 py-3 flex justify-between items-center">
42
+ <a href="#" class="text-2xl font-bold gradient-text">Nexus Digital</a>
43
+ <div class="hidden md:flex space-x-8">
44
+ <a href="#home" class="hover:text-blue-600 transition">Home</a>
45
+ <a href="#services" class="hover:text-blue-600 transition">Services</a>
46
+ <a href="http://github.com/mobeyond" target="_blank" class="hover:text-blue-600 transition">GitHub</a>
47
+ <a href="#contact" class="hover:text-blue-600 transition">Contact</a>
48
+ </div>
49
+ <button class="md:hidden focus:outline-none" id="menu-toggle">
50
+ <i class="fas fa-bars text-2xl"></i>
51
+ </button>
52
+ </div>
53
+ <!-- Mobile menu -->
54
+ <div class="hidden md:hidden bg-white w-full px-6 py-3" id="mobile-menu">
55
+ <div class="flex flex-col space-y-4">
56
+ <a href="#home" class="hover:text-blue-600 transition">Home</a>
57
+ <a href="#services" class="hover:text-blue-600 transition">Services</a>
58
+ <a href="http://github.com/mobeyond" target="_blank" class="hover:text-blue-600 transition">GitHub</a>
59
+ <a href="#contact" class="hover:text-blue-600 transition">Contact</a>
60
+ </div>
61
+ </div>
62
+ </nav>
63
+
64
+ <!-- Hero Section -->
65
+ <section id="home" class="pt-32 pb-20 px-6 bg-gradient-to-r from-blue-50 to-purple-50">
66
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
67
+ <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in">
68
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Transform Your <span class="gradient-text">Digital Presence</span></h1>
69
+ <p class="text-lg text-gray-600 mb-8">We craft innovative digital solutions that drive growth and engage your audience. Let's build something amazing together.</p>
70
+ <div class="flex space-x-4">
71
+ <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition">Get Started</a>
72
+ <a href="#services" class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition">Learn More</a>
73
+ </div>
74
+ </div>
75
+ <div class="md:w-1/2 animate-fade-in delay-100">
76
+ <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="Digital marketing" class="rounded-xl shadow-xl w-full">
77
+ </div>
78
+ </div>
79
+ </section>
80
+
81
+ <!-- Services Section -->
82
+ <section id="services" class="py-20 px-6 bg-white">
83
+ <div class="container mx-auto">
84
+ <div class="text-center mb-16 animate-fade-in">
85
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="gradient-text">Services</span></h2>
86
+ <p class="text-gray-600 max-w-2xl mx-auto">We offer comprehensive digital solutions tailored to your business needs.</p>
87
+ </div>
88
+
89
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
90
+ <!-- Service 1 -->
91
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition animate-fade-in delay-100">
92
+ <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
93
+ <i class="fas fa-globe text-blue-600 text-2xl"></i>
94
+ </div>
95
+ <h3 class="text-xl font-bold mb-3">Web Development</h3>
96
+ <p class="text-gray-600">Custom websites built for performance, security, and seamless user experience across all devices.</p>
97
+ </div>
98
+
99
+ <!-- Service 2 -->
100
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition animate-fade-in delay-200">
101
+ <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
102
+ <i class="fas fa-chart-line text-purple-600 text-2xl"></i>
103
+ </div>
104
+ <h3 class="text-xl font-bold mb-3">Digital Marketing</h3>
105
+ <p class="text-gray-600">Strategic campaigns that increase visibility, drive traffic, and convert visitors into customers.</p>
106
+ </div>
107
+
108
+ <!-- Service 3 -->
109
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition animate-fade-in delay-300">
110
+ <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-6">
111
+ <i class="fas fa-paint-brush text-green-600 text-2xl"></i>
112
+ </div>
113
+ <h3 class="text-xl font-bold mb-3">Brand Design</h3>
114
+ <p class="text-gray-600">Memorable brand identities that communicate your values and resonate with your audience.</p>
115
+ </div>
116
+
117
+ <!-- Service 4 -->
118
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition animate-fade-in delay-100">
119
+ <div class="w-14 h-14 bg-yellow-100 rounded-lg flex items-center justify-center mb-6">
120
+ <i class="fas fa-mobile-alt text-yellow-600 text-2xl"></i>
121
+ </div>
122
+ <h3 class="text-xl font-bold mb-3">App Development</h3>
123
+ <p class="text-gray-600">Native and cross-platform mobile applications designed for engagement and retention.</p>
124
+ </div>
125
+
126
+ <!-- Service 5 -->
127
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition animate-fade-in delay-200">
128
+ <div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center mb-6">
129
+ <i class="fas fa-search text-red-600 text-2xl"></i>
130
+ </div>
131
+ <h3 class="text-xl font-bold mb-3">SEO Optimization</h3>
132
+ <p class="text-gray-600">Improve your search rankings and organic traffic with our data-driven SEO strategies.</p>
133
+ </div>
134
+
135
+ <!-- Service 6 -->
136
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition animate-fade-in delay-300">
137
+ <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
138
+ <i class="fas fa-video text-indigo-600 text-2xl"></i>
139
+ </div>
140
+ <h3 class="text-xl font-bold mb-3">Content Creation</h3>
141
+ <p class="text-gray-600">Engaging multimedia content that tells your story and connects with your customers.</p>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </section>
146
+
147
+ <!-- Portfolio Section -->
148
+ <section id="portfolio" class="py-20 px-6 bg-gray-50">
149
+ <div class="container mx-auto">
150
+ <div class="text-center mb-16 animate-fade-in">
151
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="gradient-text">Portfolio</span></h2>
152
+ <p class="text-gray-600 max-w-2xl mx-auto">Explore some of our recent projects and see the results we've delivered.</p>
153
+ </div>
154
+
155
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
156
+ <!-- Project 1 -->
157
+ <div class="group relative overflow-hidden rounded-xl shadow-md animate-fade-in delay-100">
158
+ <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="Project 1" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
159
+ <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 duration-300">
160
+ <div>
161
+ <h3 class="text-white text-xl font-bold mb-2">E-commerce Platform</h3>
162
+ <p class="text-gray-200">A custom online store with integrated payment processing and inventory management.</p>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Project 2 -->
168
+ <div class="group relative overflow-hidden rounded-xl shadow-md animate-fade-in delay-200">
169
+ <img src="https://images.unsplash.com/photo-1559028012-481c04fa702d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1336&q=80" alt="Project 2" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
170
+ <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 duration-300">
171
+ <div>
172
+ <h3 class="text-white text-xl font-bold mb-2">Corporate Website</h3>
173
+ <p class="text-gray-200">A responsive corporate site with CMS integration and multilingual support.</p>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Project 3 -->
179
+ <div class="group relative overflow-hidden rounded-xl shadow-md animate-fade-in delay-300">
180
+ <img src="https://images.unsplash.com/photo-1555774698-0b77e0d5fac6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 3" class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
181
+ <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 duration-300">
182
+ <div>
183
+ <h3 class="text-white text-xl font-bold mb-2">Mobile Application</h3>
184
+ <p class="text-gray-200">A fitness tracking app with social features and personalized recommendations.</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="text-center mt-12 animate-fade-in delay-200">
191
+ <a href="#" class="inline-block border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition">View All Projects</a>
192
+ </div>
193
+ </div>
194
+ </section>
195
+
196
+ <!-- About Section -->
197
+ <section id="about" class="py-20 px-6 bg-white">
198
+ <div class="container mx-auto">
199
+ <div class="flex flex-col md:flex-row items-center">
200
+ <div class="md:w-1/2 mb-10 md:mb-0 animate-fade-in">
201
+ <img src="https://images.unsplash.com/photo-1579389083078-4e7018379f7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our team" class="rounded-xl shadow-xl w-full">
202
+ </div>
203
+ <div class="md:w-1/2 md:pl-12 animate-fade-in delay-100">
204
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">About <span class="gradient-text">Nexus Digital</span></h2>
205
+ <p class="text-gray-600 mb-6">Founded in 2015, we've grown from a small startup to a trusted digital partner for businesses across multiple industries. Our team of designers, developers, and marketers are passionate about creating digital experiences that make an impact.</p>
206
+ <p class="text-gray-600 mb-8">We believe in transparency, collaboration, and delivering measurable results. Every project is an opportunity to push boundaries and exceed expectations.</p>
207
+
208
+ <div class="grid grid-cols-2 gap-6 mb-8">
209
+ <div>
210
+ <h3 class="text-3xl font-bold text-blue-600 mb-2">150+</h3>
211
+ <p class="text-gray-600">Projects Completed</p>
212
+ </div>
213
+ <div>
214
+ <h3 class="text-3xl font-bold text-purple-600 mb-2">40+</h3>
215
+ <p class="text-gray-600">Happy Clients</p>
216
+ </div>
217
+ <div>
218
+ <h3 class="text-3xl font-bold text-green-600 mb-2">12</h3>
219
+ <p class="text-gray-600">Team Members</p>
220
+ </div>
221
+ <div>
222
+ <h3 class="text-3xl font-bold text-yellow-600 mb-2">5</h3>
223
+ <p class="text-gray-600">Years Experience</p>
224
+ </div>
225
+ </div>
226
+
227
+ <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition inline-block">Meet Our Team</a>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </section>
232
+
233
+ <!-- Testimonials -->
234
+ <section class="py-20 px-6 bg-gray-50">
235
+ <div class="container mx-auto">
236
+ <div class="text-center mb-16 animate-fade-in">
237
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our <span class="gradient-text">Clients Say</span></h2>
238
+ <p class="text-gray-600 max-w-2xl mx-auto">Don't just take our word for it - hear from businesses we've helped grow.</p>
239
+ </div>
240
+
241
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
242
+ <!-- Testimonial 1 -->
243
+ <div class="bg-white p-8 rounded-xl shadow-sm animate-fade-in delay-100">
244
+ <div class="flex items-center mb-4">
245
+ <div class="text-yellow-400 mr-2">
246
+ <i class="fas fa-star"></i>
247
+ <i class="fas fa-star"></i>
248
+ <i class="fas fa-star"></i>
249
+ <i class="fas fa-star"></i>
250
+ <i class="fas fa-star"></i>
251
+ </div>
252
+ </div>
253
+ <p class="text-gray-600 mb-6">"Nexus Digital transformed our online presence. Our website traffic increased by 300% within 3 months of working with them."</p>
254
+ <div class="flex items-center">
255
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4">
256
+ <div>
257
+ <h4 class="font-bold">Sarah Johnson</h4>
258
+ <p class="text-gray-500 text-sm">CEO, Bright Solutions</p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Testimonial 2 -->
264
+ <div class="bg-white p-8 rounded-xl shadow-sm animate-fade-in delay-200">
265
+ <div class="flex items-center mb-4">
266
+ <div class="text-yellow-400 mr-2">
267
+ <i class="fas fa-star"></i>
268
+ <i class="fas fa-star"></i>
269
+ <i class="fas fa-star"></i>
270
+ <i class="fas fa-star"></i>
271
+ <i class="fas fa-star"></i>
272
+ </div>
273
+ </div>
274
+ <p class="text-gray-600 mb-6">"Their team understood our vision immediately and delivered beyond expectations. The mobile app they built has 50,000+ downloads."</p>
275
+ <div class="flex items-center">
276
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4">
277
+ <div>
278
+ <h4 class="font-bold">Michael Chen</h4>
279
+ <p class="text-gray-500 text-sm">Founder, FitTrack</p>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Testimonial 3 -->
285
+ <div class="bg-white p-8 rounded-xl shadow-sm animate-fade-in delay-300">
286
+ <div class="flex items-center mb-4">
287
+ <div class="text-yellow-400 mr-2">
288
+ <i class="fas fa-star"></i>
289
+ <i class="fas fa-star"></i>
290
+ <i class="fas fa-star"></i>
291
+ <i class="fas fa-star"></i>
292
+ <i class="fas fa-star"></i>
293
+ </div>
294
+ </div>
295
+ <p class="text-gray-600 mb-6">"From branding to digital strategy, Nexus has been an invaluable partner. Our revenue grew by 120% in the first year."</p>
296
+ <div class="flex items-center">
297
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emma Rodriguez" class="w-12 h-12 rounded-full mr-4">
298
+ <div>
299
+ <h4 class="font-bold">Emma Rodriguez</h4>
300
+ <p class="text-gray-500 text-sm">Marketing Director, Verde</p>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </section>
307
+
308
+ <!-- Contact Section -->
309
+ <section id="contact" class="py-20 px-6 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
310
+ <div class="container mx-auto">
311
+ <div class="text-center mb-16 animate-fade-in">
312
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to <span class="gradient-text">Get Started?</span></h2>
313
+ <p class="max-w-2xl mx-auto opacity-90">Let's discuss how we can help your business grow. Reach out and we'll get back to you within 24 hours.</p>
314
+ </div>
315
+
316
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden animate-fade-in delay-100">
317
+ <div class="md:flex">
318
+ <div class="md:w-1/2 bg-blue-700 p-10 flex flex-col justify-center">
319
+ <h3 class="text-2xl font-bold mb-6">Contact Information</h3>
320
+ <div class="space-y-6">
321
+ <div class="flex items-start">
322
+ <div class="mr-4 mt-1">
323
+ <i class="fas fa-map-marker-alt text-blue-300"></i>
324
+ </div>
325
+ <div>
326
+ <h4 class="font-bold mb-1">Our Office</h4>
327
+ <p class="text-blue-200">123 Digital Way, Suite 400<br>San Francisco, CA 94103</p>
328
+ </div>
329
+ </div>
330
+ <div class="flex items-start">
331
+ <div class="mr-4 mt-1">
332
+ <i class="fas fa-envelope text-blue-300"></i>
333
+ </div>
334
+ <div>
335
+ <h4 class="font-bold mb-1">Email Us</h4>
336
+ <p class="text-blue-200">hello@nexusdigital.com</p>
337
+ </div>
338
+ </div>
339
+ <div class="flex items-start">
340
+ <div class="mr-4 mt-1">
341
+ <i class="fas fa-phone-alt text-blue-300"></i>
342
+ </div>
343
+ <div>
344
+ <h4 class="font-bold mb-1">Call Us</h4>
345
+ <p class="text-blue-200">(555) 123-4567</p>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ <div class="md:w-1/2 p-10 text-gray-800">
351
+ <form id="contactForm">
352
+ <div class="mb-6">
353
+ <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label>
354
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
355
+ </div>
356
+ <div class="mb-6">
357
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
358
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
359
+ </div>
360
+ <div class="mb-6">
361
+ <label for="service" class="block text-gray-700 font-medium mb-2">Service Interested In</label>
362
+ <select id="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
363
+ <option value="">Select a service</option>
364
+ <option value="web">Web Development</option>
365
+ <option value="marketing">Digital Marketing</option>
366
+ <option value="design">Brand Design</option>
367
+ <option value="app">App Development</option>
368
+ <option value="seo">SEO Optimization</option>
369
+ <option value="content">Content Creation</option>
370
+ </select>
371
+ </div>
372
+ <div class="mb-6">
373
+ <label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label>
374
+ <textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
375
+ </div>
376
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition">Send Message</button>
377
+ </form>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </section>
383
+
384
+ <!-- Newsletter -->
385
+ <section class="py-16 px-6 bg-white">
386
+ <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl p-10 text-center animate-fade-in">
387
+ <h3 class="text-2xl font-bold mb-4">Stay Updated</h3>
388
+ <p class="text-gray-600 mb-6 max-w-2xl mx-auto">Subscribe to our newsletter for the latest digital trends, tips, and exclusive offers.</p>
389
+ <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
390
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
391
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition whitespace-nowrap">Subscribe</button>
392
+ </form>
393
+ </div>
394
+ </section>
395
+
396
+ <!-- Footer -->
397
+ <footer class="bg-gray-900 text-white py-12 px-6">
398
+ <div class="container mx-auto">
399
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
400
+ <div>
401
+ <h3 class="text-xl font-bold mb-6 gradient-text">Nexus Digital</h3>
402
+ <p class="text-gray-400">Innovative digital solutions to help your business thrive in the online world.</p>
403
+ <div class="flex space-x-4 mt-6">
404
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
405
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
406
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
407
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a>
408
+ </div>
409
+ </div>
410
+ <div>
411
+ <h4 class="font-bold text-lg mb-6">Quick Links</h4>
412
+ <ul class="space-y-3">
413
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li>
414
+ <li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li>
415
+ <li><a href="#portfolio" class="text-gray-400 hover:text-white transition">Portfolio</a></li>
416
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li>
417
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
418
+ </ul>
419
+ </div>
420
+ <div>
421
+ <h4 class="font-bold text-lg mb-6">Services</h4>
422
+ <ul class="space-y-3">
423
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Web Development</a></li>
424
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Digital Marketing</a></li>
425
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Brand Design</a></li>
426
+ <li><a href="#" class="text-gray-400 hover:text-white transition">App Development</a></li>
427
+ <li><a href="#" class="text-gray-400 hover:text-white transition">SEO Optimization</a></li>
428
+ </ul>
429
+ </div>
430
+ <div>
431
+ <h4 class="font-bold text-lg mb-6">Contact Info</h4>
432
+ <ul class="space-y-3 text-gray-400">
433
+ <li class="flex items-start">
434
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-400"></i>
435
+ <span>123 Digital Way, Suite 400<br>San Francisco, CA 94103</span>
436
+ </li>
437
+ <li class="flex items-center">
438
+ <i class="fas fa-envelope mr-3 text-blue-400"></i>
439
+ <span>hello@nexusdigital.com</span>
440
+ </li>
441
+ <li class="flex items-center">
442
+ <i class="fas fa-phone-alt mr-3 text-blue-400"></i>
443
+ <span>(555) 123-4567</span>
444
+ </li>
445
+ </ul>
446
+ </div>
447
+ </div>
448
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
449
+ <p>&copy; 2023 Nexus Digital. All rights reserved.</p>
450
+ </div>
451
+ </div>
452
+ </footer>
453
+
454
+ <!-- Back to top button -->
455
+ <button id="backToTop" class="fixed bottom-6 right-6 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
456
+ <i class="fas fa-arrow-up"></i>
457
+ </button>
458
+
459
+ <script>
460
+ // Mobile menu toggle
461
+ document.getElementById('menu-toggle').addEventListener('click', function() {
462
+ const menu = document.getElementById('mobile-menu');
463
+ menu.classList.toggle('hidden');
464
+ });
465
+
466
+ // Back to top button
467
+ const backToTopButton = document.getElementById('backToTop');
468
+
469
+ window.addEventListener('scroll', function() {
470
+ if (window.pageYOffset > 300) {
471
+ backToTopButton.classList.remove('opacity-0', 'invisible');
472
+ backToTopButton.classList.add('opacity-100', 'visible');
473
+ } else {
474
+ backToTopButton.classList.remove('opacity-100', 'visible');
475
+ backToTopButton.classList.add('opacity-0', 'invisible');
476
+ }
477
+ });
478
+
479
+ backToTopButton.addEventListener('click', function() {
480
+ window.scrollTo({
481
+ top: 0,
482
+ behavior: 'smooth'
483
+ });
484
+ });
485
+
486
+ // Form submission
487
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
488
+ e.preventDefault();
489
+
490
+ // Get form values
491
+ const name = document.getElementById('name').value;
492
+ const email = document.getElementById('email').value;
493
+ const service = document.getElementById('service').value;
494
+ const message = document.getElementById('message').value;
495
+
496
+ // Here you would typically send this data to a server
497
+ console.log('Form submitted:', { name, email, service, message });
498
+
499
+ // Show success message
500
+ alert('Thank you for your message! We will get back to you soon.');
501
+
502
+ // Reset form
503
+ this.reset();
504
+ });
505
+
506
+ // Animate elements when they come into view
507
+ const animateOnScroll = function() {
508
+ const elements = document.querySelectorAll('.animate-fade-in');
509
+
510
+ elements.forEach(element => {
511
+ const elementPosition = element.getBoundingClientRect().top;
512
+ const windowHeight = window.innerHeight;
513
+
514
+ if (elementPosition < windowHeight - 100) {
515
+ element.style.opacity = '1';
516
+ element.style.transform = 'translateY(0)';
517
+ }
518
+ });
519
+ };
520
+
521
+ // Run once on page load
522
+ animateOnScroll();
523
+
524
+ // Then run on scroll
525
+ window.addEventListener('scroll', animateOnScroll);
526
+ </script>
527
+ <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=rolead/mobeyond" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
528
+ </html>