Hugging Face's logo

Spaces:
shemmz
/
prototype-landing-page
Running

App Files Community
shemmz commited on
Commit
745f4e4
·
verified ·
1 Parent(s): e7dbdf4

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +627 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Prototype Landing Page
3
- emoji: 📈
4
- colorFrom: purple
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: prototype-landing-page
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,627 @@
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 - Modern Web 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 CSS for animations and effects */
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(20px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+
16
+ .fade-in {
17
+ animation: fadeIn 1s ease-out forwards;
18
+ }
19
+
20
+ .delay-1 { animation-delay: 0.2s; }
21
+ .delay-2 { animation-delay: 0.4s; }
22
+ .delay-3 { animation-delay: 0.6s; }
23
+
24
+ .gradient-text {
25
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
26
+ -webkit-background-clip: text;
27
+ background-clip: text;
28
+ color: transparent;
29
+ }
30
+
31
+ .card-hover:hover {
32
+ transform: translateY(-5px);
33
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
34
+ }
35
+
36
+ .transition-all {
37
+ transition: all 0.3s ease;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-50 font-sans">
42
+ <!-- Navigation -->
43
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
44
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
45
+ <div class="flex justify-between h-16">
46
+ <div class="flex items-center">
47
+ <div class="flex-shrink-0 flex items-center">
48
+ <i class="fas fa-cube text-indigo-600 text-2xl mr-2"></i>
49
+ <span class="text-xl font-bold text-gray-900">Nexus</span>
50
+ </div>
51
+ </div>
52
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
53
+ <a href="features.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium transition-all">Features</a>
54
+ <a href="solutions.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium transition-all">Solutions</a>
55
+ <a href="pricing.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium transition-all">Pricing</a>
56
+ <a href="testimonials.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium transition-all">Testimonials</a>
57
+ <a href="contact.html" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition-all">Contact Us</a>
58
+ </div>
59
+ <div class="-mr-2 flex items-center md:hidden">
60
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
61
+ <span class="sr-only">Open main menu</span>
62
+ <i class="fas fa-bars"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Mobile menu -->
69
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200">
70
+ <div class="pt-2 pb-3 space-y-1">
71
+ <a href="features.html" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Features</a>
72
+ <a href="solutions.html" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Solutions</a>
73
+ <a href="pricing.html" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Pricing</a>
74
+ <a href="testimonials.html" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Testimonials</a>
75
+ <a href="contact.html" class="block px-3 py-2 text-base font-medium text-indigo-600 hover:bg-indigo-50">Contact Us</a>
76
+ </div>
77
+ </div>
78
+ </nav>
79
+
80
+ <!-- Hero Section -->
81
+ <section class="bg-gradient-to-r from-indigo-50 to-blue-50 py-20">
82
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
83
+ <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
84
+ <div class="fade-in">
85
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
86
+ Build <span class="gradient-text">amazing</span> digital experiences
87
+ </h1>
88
+ <p class="text-lg text-gray-600 mb-8">
89
+ Nexus provides cutting-edge web solutions to help your business thrive in the digital world. Our platform combines power with simplicity.
90
+ </p>
91
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
92
+ <a href="register.html" class="bg-indigo-600 text-white px-6 py-3 rounded-lg text-lg font-medium hover:bg-indigo-700 transition-all text-center">
93
+ Get Started
94
+ </a>
95
+ <a href="features.html" class="border border-gray-300 bg-white text-gray-700 px-6 py-3 rounded-lg text-lg font-medium hover:bg-gray-50 transition-all text-center">
96
+ Learn More
97
+ </a>
98
+ </div>
99
+ </div>
100
+ <div class="fade-in delay-1 mt-10 lg:mt-0">
101
+ <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Web development" class="rounded-xl shadow-xl w-full h-auto">
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </section>
106
+
107
+ <!-- Features Section -->
108
+ <section class="py-20 bg-white">
109
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
110
+ <div class="text-center mb-16 fade-in">
111
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Powerful Features</h2>
112
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
113
+ Our platform is packed with features designed to help you succeed in today's digital landscape.
114
+ </p>
115
+ <a href="features.html" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
116
+ See all features
117
+ <i class="fas fa-arrow-right ml-2"></i>
118
+ </a>
119
+ </div>
120
+
121
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
122
+ <div class="bg-gray-50 p-8 rounded-xl transition-all card-hover fade-in delay-1">
123
+ <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6">
124
+ <i class="fas fa-bolt text-indigo-600 text-2xl"></i>
125
+ </div>
126
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Lightning Fast</h3>
127
+ <p class="text-gray-600">
128
+ Optimized for speed with cutting-edge technology to ensure your site loads in milliseconds.
129
+ </p>
130
+ <a href="feature-detail.html?feature=lightning-fast" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
131
+ Learn more
132
+ <i class="fas fa-chevron-right ml-1 text-sm"></i>
133
+ </a>
134
+ </div>
135
+
136
+ <div class="bg-gray-50 p-8 rounded-xl transition-all card-hover fade-in delay-2">
137
+ <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
138
+ <i class="fas fa-mobile-alt text-blue-600 text-2xl"></i>
139
+ </div>
140
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Fully Responsive</h3>
141
+ <p class="text-gray-600">
142
+ Looks perfect on any device, from desktop to mobile, with adaptive layouts.
143
+ </p>
144
+ <a href="feature-detail.html?feature=responsive" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
145
+ Learn more
146
+ <i class="fas fa-chevron-right ml-1 text-sm"></i>
147
+ </a>
148
+ </div>
149
+
150
+ <div class="bg-gray-50 p-8 rounded-xl transition-all card-hover fade-in delay-3">
151
+ <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6">
152
+ <i class="fas fa-shield-alt text-purple-600 text-2xl"></i>
153
+ </div>
154
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Enterprise Security</h3>
155
+ <p class="text-gray-600">
156
+ Military-grade encryption and security protocols to protect your data.
157
+ </p>
158
+ <a href="feature-detail.html?feature=security" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
159
+ Learn more
160
+ <i class="fas fa-chevron-right ml-1 text-sm"></i>
161
+ </a>
162
+ </div>
163
+
164
+ <div class="bg-gray-50 p-8 rounded-xl transition-all card-hover fade-in delay-1">
165
+ <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-6">
166
+ <i class="fas fa-chart-line text-green-600 text-2xl"></i>
167
+ </div>
168
+ <h3 class="text-xl font-bold text-gray-900 mb-3">SEO Optimized</h3>
169
+ <p class="text-gray-600">
170
+ Built-in SEO tools to help your content rank higher in search results.
171
+ </p>
172
+ <a href="feature-detail.html?feature=seo" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
173
+ Learn more
174
+ <i class="fas fa-chevron-right ml-1 text-sm"></i>
175
+ </a>
176
+ </div>
177
+
178
+ <div class="bg-gray-50 p-8 rounded-xl transition-all card-hover fade-in delay-2">
179
+ <div class="w-14 h-14 bg-yellow-100 rounded-lg flex items-center justify-center mb-6">
180
+ <i class="fas fa-cog text-yellow-600 text-2xl"></i>
181
+ </div>
182
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Easy Customization</h3>
183
+ <p class="text-gray-600">
184
+ Intuitive interface with drag-and-drop functionality for easy customization.
185
+ </p>
186
+ <a href="feature-detail.html?feature=customization" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
187
+ Learn more
188
+ <i class="fas fa-chevron-right ml-1 text-sm"></i>
189
+ </a>
190
+ </div>
191
+
192
+ <div class="bg-gray-50 p-8 rounded-xl transition-all card-hover fade-in delay-3">
193
+ <div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center mb-6">
194
+ <i class="fas fa-headset text-red-600 text-2xl"></i>
195
+ </div>
196
+ <h3 class="text-xl font-bold text-gray-900 mb-3">24/7 Support</h3>
197
+ <p class="text-gray-600">
198
+ Our expert team is available around the clock to assist you.
199
+ </p>
200
+ <a href="feature-detail.html?feature=support" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
201
+ Learn more
202
+ <i class="fas fa-chevron-right ml-1 text-sm"></i>
203
+ </a>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </section>
208
+
209
+ <!-- Solutions Section -->
210
+ <section class="py-20 bg-gray-50">
211
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
212
+ <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
213
+ <div class="fade-in">
214
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">Tailored Solutions for Your Business</h2>
215
+ <p class="text-lg text-gray-600 mb-8">
216
+ We understand that every business is unique. That's why we offer customized solutions that fit your specific needs and goals.
217
+ </p>
218
+ <ul class="space-y-4">
219
+ <li class="flex items-start">
220
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
221
+ <span class="text-gray-700">Custom web application development</span>
222
+ </li>
223
+ <li class="flex items-start">
224
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
225
+ <span class="text-gray-700">E-commerce solutions with secure payments</span>
226
+ </li>
227
+ <li class="flex items-start">
228
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
229
+ <span class="text-gray-700">Content management systems</span>
230
+ </li>
231
+ <li class="flex items-start">
232
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
233
+ <span class="text-gray-700">API integration and development</span>
234
+ </li>
235
+ </ul>
236
+ <a href="solutions.html" class="mt-6 inline-flex items-center bg-indigo-600 text-white px-6 py-3 rounded-lg text-lg font-medium hover:bg-indigo-700 transition-all">
237
+ Explore Solutions
238
+ </a>
239
+ </div>
240
+ <div class="fade-in delay-1 mt-10 lg:mt-0">
241
+ <div class="bg-white p-6 rounded-xl shadow-lg">
242
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Team working" class="rounded-lg w-full h-auto mb-6">
243
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Our Approach</h3>
244
+ <p class="text-gray-600 mb-4">
245
+ We work closely with you to understand your business objectives and deliver solutions that drive real results.
246
+ </p>
247
+ <a href="process.html" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
248
+ Learn more about our process
249
+ <i class="fas fa-arrow-right ml-2"></i>
250
+ </a>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </section>
256
+
257
+ <!-- Pricing Section -->
258
+ <section class="py-20 bg-white">
259
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
260
+ <div class="text-center mb-16 fade-in">
261
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Simple, Transparent Pricing</h2>
262
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
263
+ Choose the plan that fits your needs. No hidden fees, cancel anytime.
264
+ </p>
265
+ <a href="pricing.html" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
266
+ Detailed pricing comparison
267
+ <i class="fas fa-arrow-right ml-2"></i>
268
+ </a>
269
+ </div>
270
+
271
+ <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
272
+ <div class="bg-gray-50 rounded-xl p-8 transition-all card-hover fade-in delay-1">
273
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Starter</h3>
274
+ <p class="text-gray-600 mb-6">Perfect for small projects and personal websites</p>
275
+ <div class="mb-6">
276
+ <span class="text-4xl font-bold text-gray-900">$19</span>
277
+ <span class="text-gray-600">/month</span>
278
+ </div>
279
+ <ul class="space-y-3 mb-8">
280
+ <li class="flex items-start">
281
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
282
+ <span class="text-gray-700">1 Website</span>
283
+ </li>
284
+ <li class="flex items-start">
285
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
286
+ <span class="text-gray-700">10 GB Storage</span>
287
+ </li>
288
+ <li class="flex items-start">
289
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
290
+ <span class="text-gray-700">Basic Analytics</span>
291
+ </li>
292
+ <li class="flex items-start">
293
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
294
+ <span class="text-gray-700">Email Support</span>
295
+ </li>
296
+ </ul>
297
+ <a href="checkout.html?plan=starter" class="block w-full bg-gray-200 text-gray-800 text-center py-3 rounded-lg font-medium hover:bg-gray-300 transition-all">
298
+ Select Plan
299
+ </a>
300
+ </div>
301
+
302
+ <div class="bg-indigo-600 rounded-xl p-8 text-white transition-all card-hover fade-in">
303
+ <div class="mb-4">
304
+ <span class="inline-block bg-indigo-700 text-xs font-semibold px-3 py-1 rounded-full">POPULAR</span>
305
+ </div>
306
+ <h3 class="text-xl font-bold mb-2">Professional</h3>
307
+ <p class="text-indigo-100 mb-6">Ideal for growing businesses and professionals</p>
308
+ <div class="mb-6">
309
+ <span class="text-4xl font-bold">$49</span>
310
+ <span class="text-indigo-100">/month</span>
311
+ </div>
312
+ <ul class="space-y-3 mb-8">
313
+ <li class="flex items-start">
314
+ <i class="fas fa-check text-white mt-1 mr-3"></i>
315
+ <span>5 Websites</span>
316
+ </li>
317
+ <li class="flex items-start">
318
+ <i class="fas fa-check text-white mt-1 mr-3"></i>
319
+ <span>50 GB Storage</span>
320
+ </li>
321
+ <li class="flex items-start">
322
+ <i class="fas fa-check text-white mt-1 mr-3"></i>
323
+ <span>Advanced Analytics</span>
324
+ </li>
325
+ <li class="flex items-start">
326
+ <i class="fas fa-check text-white mt-1 mr-3"></i>
327
+ <span>Priority Support</span>
328
+ </li>
329
+ <li class="flex items-start">
330
+ <i class="fas fa-check text-white mt-1 mr-3"></i>
331
+ <span>SEO Tools</span>
332
+ </li>
333
+ </ul>
334
+ <a href="checkout.html?plan=professional" class="block w-full bg-white text-indigo-600 text-center py-3 rounded-lg font-medium hover:bg-gray-100 transition-all">
335
+ Select Plan
336
+ </a>
337
+ </div>
338
+
339
+ <div class="bg-gray-50 rounded-xl p-8 transition-all card-hover fade-in delay-2">
340
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Enterprise</h3>
341
+ <p class="text-gray-600 mb-6">For large businesses with custom needs</p>
342
+ <div class="mb-6">
343
+ <span class="text-4xl font-bold text-gray-900">$99</span>
344
+ <span class="text-gray-600">/month</span>
345
+ </div>
346
+ <ul class="space-y-3 mb-8">
347
+ <li class="flex items-start">
348
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
349
+ <span class="text-gray-700">Unlimited Websites</span>
350
+ </li>
351
+ <li class="flex items-start">
352
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
353
+ <span class="text-gray-700">500 GB Storage</span>
354
+ </li>
355
+ <li class="flex items-start">
356
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
357
+ <span class="text-gray-700">Premium Analytics</span>
358
+ </li>
359
+ <li class="flex items-start">
360
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
361
+ <span class="text-gray-700">24/7 VIP Support</span>
362
+ </li>
363
+ <li class="flex items-start">
364
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
365
+ <span class="text-gray-700">Dedicated Account Manager</span>
366
+ </li>
367
+ </ul>
368
+ <a href="checkout.html?plan=enterprise" class="block w-full bg-gray-200 text-gray-800 text-center py-3 rounded-lg font-medium hover:bg-gray-300 transition-all">
369
+ Select Plan
370
+ </a>
371
+ </div>
372
+ </div>
373
+
374
+ <div class="mt-12 text-center fade-in delay-3">
375
+ <p class="text-gray-600 mb-4">Need something custom?</p>
376
+ <a href="contact.html" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
377
+ Contact us for enterprise solutions
378
+ <i class="fas fa-arrow-right ml-2"></i>
379
+ </a>
380
+ </div>
381
+ </div>
382
+ </section>
383
+
384
+ <!-- Testimonials Section -->
385
+ <section class="py-20 bg-gray-50">
386
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
387
+ <div class="text-center mb-16 fade-in">
388
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Clients Say</h2>
389
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
390
+ Don't just take our word for it. Here's what our clients have to say about working with us.
391
+ </p>
392
+ <a href="testimonials.html" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center">
393
+ Read all testimonials
394
+ <i class="fas fa-arrow-right ml-2"></i>
395
+ </a>
396
+ </div>
397
+
398
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
399
+ <div class="bg-white p-8 rounded-xl shadow-sm transition-all card-hover fade-in delay-1">
400
+ <div class="flex items-center mb-4">
401
+ <div class="flex-shrink-0">
402
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
403
+ </div>
404
+ <div class="ml-4">
405
+ <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4>
406
+ <p class="text-gray-600">CEO, TechStart</p>
407
+ </div>
408
+ </div>
409
+ <p class="text-gray-600 italic">
410
+ "Nexus transformed our online presence. Our website traffic increased by 300% within the first month of launch. Their team is incredibly talented and responsive."
411
+ </p>
412
+ <div class="mt-4 flex text-yellow-400">
413
+ <i class="fas fa-star"></i>
414
+ <i class="fas fa-star"></i>
415
+ <i class="fas fa-star"></i>
416
+ <i class="fas fa-star"></i>
417
+ <i class="fas fa-star"></i>
418
+ </div>
419
+ <a href="testimonial-detail.html?id=1" class="mt-4 inline-flex items-center text-sm text-indigo-600 font-medium hover:text-indigo-700">
420
+ Read full testimonial
421
+ </a>
422
+ </div>
423
+
424
+ <div class="bg-white p-8 rounded-xl shadow-sm transition-all card-hover fade-in delay-2">
425
+ <div class="flex items-center mb-4">
426
+ <div class="flex-shrink-0">
427
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/43.jpg" alt="Michael Chen">
428
+ </div>
429
+ <div class="ml-4">
430
+ <h4 class="text-lg font-medium text-gray-900">Michael Chen</h4>
431
+ <p class="text-gray-600">Founder, GreenLeaf</p>
432
+ </div>
433
+ </div>
434
+ <p class="text-gray-600 italic">
435
+ "The e-commerce solution Nexus built for us has been flawless. Our conversion rates have never been higher, and the platform is so easy to manage."
436
+ </p>
437
+ <div class="mt-4 flex text-yellow-400">
438
+ <i class="fas fa-star"></i>
439
+ <i class="fas fa-star"></i>
440
+ <i class="fas fa-star"></i>
441
+ <i class="fas fa-star"></i>
442
+ <i class="fas fa-star"></i>
443
+ </div>
444
+ <a href="testimonial-detail.html?id=2" class="mt-4 inline-flex items-center text-sm text-indigo-600 font-medium hover:text-indigo-700">
445
+ Read full testimonial
446
+ </a>
447
+ </div>
448
+
449
+ <div class="bg-white p-8 rounded-xl shadow-sm transition-all card-hover fade-in delay-3">
450
+ <div class="flex items-center mb-4">
451
+ <div class="flex-shrink-0">
452
+ <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez">
453
+ </div>
454
+ <div class="ml-4">
455
+ <h4 class="text-lg font-medium text-gray-900">Emma Rodriguez</h4>
456
+ <p class="text-gray-600">Marketing Director, BrightCo</p>
457
+ </div>
458
+ </div>
459
+ <p class="text-gray-600 italic">
460
+ "Working with Nexus was a game-changer for our digital strategy. Their insights and technical expertise helped us reach new audiences and grow our business."
461
+ </p>
462
+ <div class="mt-4 flex text-yellow-400">
463
+ <i class="fas fa-star"></i>
464
+ <i class="fas fa-star"></i>
465
+ <i class="fas fa-star"></i>
466
+ <i class="fas fa-star"></i>
467
+ <i class="fas fa-star-half-alt"></i>
468
+ </div>
469
+ <a href="testimonial-detail.html?id=3" class="mt-4 inline-flex items-center text-sm text-indigo-600 font-medium hover:text-indigo-700">
470
+ Read full testimonial
471
+ </a>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </section>
476
+
477
+ <!-- CTA Section -->
478
+ <section class="py-16 bg-indigo-700 text-white">
479
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
480
+ <h2 class="text-3xl font-bold mb-6 fade-in">Ready to transform your digital presence?</h2>
481
+ <p class="text-xl mb-8 max-w-3xl mx-auto fade-in delay-1">
482
+ Join thousands of businesses who trust Nexus for their web solutions.
483
+ </p>
484
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 fade-in delay-2">
485
+ <a href="register.html" class="bg-white text-indigo-700 px-8 py-4 rounded-lg text-lg font-bold hover:bg-gray-100 transition-all">
486
+ Get Started for Free
487
+ </a>
488
+ <a href="demo.html" class="border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-bold hover:bg-indigo-600 transition-all">
489
+ Request a Demo
490
+ </a>
491
+ </div>
492
+ </div>
493
+ </section>
494
+
495
+ <!-- Footer -->
496
+ <footer class="bg-gray-900 text-white py-12">
497
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
498
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
499
+ <div>
500
+ <h3 class="text-lg font-semibold mb-4">Company</h3>
501
+ <ul class="space-y-2">
502
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition-all">About Us</a></li>
503
+ <li><a href="careers.html" class="text-gray-400 hover:text-white transition-all">Careers</a></li>
504
+ <li><a href="blog.html" class="text-gray-400 hover:text-white transition-all">Blog</a></li>
505
+ <li><a href="press.html" class="text-gray-400 hover:text-white transition-all">Press</a></li>
506
+ </ul>
507
+ </div>
508
+ <div>
509
+ <h3 class="text-lg font-semibold mb-4">Products</h3>
510
+ <ul class="space-y-2">
511
+ <li><a href="platform.html" class="text-gray-400 hover:text-white transition-all">Web Platform</a></li>
512
+ <li><a href="ecommerce.html" class="text-gray-400 hover:text-white transition-all">E-commerce</a></li>
513
+ <li><a href="cms.html" class="text-gray-400 hover:text-white transition-all">CMS</a></li>
514
+ <li><a href="api.html" class="text-gray-400 hover:text-white transition-all">API</a></li>
515
+ </ul>
516
+ </div>
517
+ <div>
518
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
519
+ <ul class="space-y-2">
520
+ <li><a href="docs.html" class="text-gray-400 hover:text-white transition-all">Documentation</a></li>
521
+ <li><a href="guides.html" class="text-gray-400 hover:text-white transition-all">Guides</a></li>
522
+ <li><a href="support.html" class="text-gray-400 hover:text-white transition-all">Support</a></li>
523
+ <li><a href="community.html" class="text-gray-400 hover:text-white transition-all">Community</a></li>
524
+ </ul>
525
+ </div>
526
+ <div>
527
+ <h3 class="text-lg font-semibold mb-4">Legal</h3>
528
+ <ul class="space-y-2">
529
+ <li><a href="privacy.html" class="text-gray-400 hover:text-white transition-all">Privacy</a></li>
530
+ <li><a href="terms.html" class="text-gray-400 hover:text-white transition-all">Terms</a></li>
531
+ <li><a href="security.html" class="text-gray-400 hover:text-white transition-all">Security</a></li>
532
+ <li><a href="cookies.html" class="text-gray-400 hover:text-white transition-all">Cookies</a></li>
533
+ </ul>
534
+ </div>
535
+ </div>
536
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
537
+ <div class="flex items-center mb-4 md:mb-0">
538
+ <i class="fas fa-cube text-indigo-400 text-2xl mr-2"></i>
539
+ <span class="text-xl font-bold">Nexus</span>
540
+ </div>
541
+ <div class="text-gray-400 text-sm mb-4 md:mb-0">
542
+ &copy; 2023 Nexus Technologies. All rights reserved.
543
+ </div>
544
+ <div class="flex space-x-6">
545
+ <a href="https://facebook.com" class="text-gray-400 hover:text-white transition-all">
546
+ <i class="fab fa-facebook-f"></i>
547
+ </a>
548
+ <a href="https://twitter.com" class="text-gray-400 hover:text-white transition-all">
549
+ <i class="fab fa-twitter"></i>
550
+ </a>
551
+ <a href="https://instagram.com" class="text-gray-400 hover:text-white transition-all">
552
+ <i class="fab fa-instagram"></i>
553
+ </a>
554
+ <a href="https://linkedin.com" class="text-gray-400 hover:text-white transition-all">
555
+ <i class="fab fa-linkedin-in"></i>
556
+ </a>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </footer>
561
+
562
+ <!-- Back to Top Button -->
563
+ <button id="backToTop" class="fixed bottom-8 right-8 bg-indigo-600 text-white p-3 rounded-full shadow-lg hover:bg-indigo-700 transition-all hidden">
564
+ <i class="fas fa-arrow-up"></i>
565
+ </button>
566
+
567
+ <script>
568
+ // Mobile menu toggle
569
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
570
+ const mobileMenu = document.getElementById('mobile-menu');
571
+
572
+ mobileMenuButton.addEventListener('click', () => {
573
+ mobileMenu.classList.toggle('hidden');
574
+ });
575
+
576
+ // Back to top button
577
+ const backToTopButton = document.getElementById('backToTop');
578
+
579
+ window.addEventListener('scroll', () => {
580
+ if (window.pageYOffset > 300) {
581
+ backToTopButton.classList.remove('hidden');
582
+ } else {
583
+ backToTopButton.classList.add('hidden');
584
+ }
585
+ });
586
+
587
+ backToTopButton.addEventListener('click', () => {
588
+ window.scrollTo({
589
+ top: 0,
590
+ behavior: 'smooth'
591
+ });
592
+ });
593
+
594
+ // Form submission
595
+ const contactForm = document.getElementById('contactForm');
596
+ const formSuccess = document.getElementById('formSuccess');
597
+
598
+ contactForm.addEventListener('submit', (e) => {
599
+ e.preventDefault();
600
+ // Here you would normally send the form data to your server
601
+ // For demo purposes, we'll just show the success message
602
+ formSuccess.classList.remove('hidden');
603
+ contactForm.reset();
604
+ setTimeout(() => {
605
+ formSuccess.classList.add('hidden');
606
+ }, 5000);
607
+ });
608
+
609
+ // Fade in animation when elements come into view
610
+ const fadeElements = document.querySelectorAll('.fade-in');
611
+
612
+ const fadeInObserver = new IntersectionObserver((entries) => {
613
+ entries.forEach(entry => {
614
+ if (entry.isIntersecting) {
615
+ entry.target.classList.add('animate-fadeIn');
616
+ }
617
+ });
618
+ }, {
619
+ threshold: 0.1
620
+ });
621
+
622
+ fadeElements.forEach(element => {
623
+ fadeInObserver.observe(element);
624
+ });
625
+ </script>
626
+ <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=shemmz/prototype-landing-page" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
627
+ </html>