Hugging Face's logo

Spaces:
ngandugilbert
/
nexa-cloud
Running

App Files Community
ngandugilbert commited on
Commit
06a8d16
·
verified ·
1 Parent(s): 3815434

create a modern saas landing page with nice animations - Follow Up Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +766 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nexa Cloud
3
- emoji: 🐨
4
- colorFrom: green
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: nexa-cloud
3
+ emoji: 🐳
4
+ colorFrom: gray
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,766 @@
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>NexaCloud - Modern Cloud Solutions</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ theme: {
11
+ extend: {
12
+ colors: {
13
+ primary: '#6366f1',
14
+ secondary: '#8b5cf6',
15
+ dark: '#0f172a',
16
+ light: '#f8fafc'
17
+ },
18
+ animation: {
19
+ 'float': 'float 6s ease-in-out infinite',
20
+ 'pulse-slow': 'pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite',
21
+ 'wave': 'wave 8s linear infinite',
22
+ },
23
+ keyframes: {
24
+ float: {
25
+ '0%, 100%': { transform: 'translateY(0)' },
26
+ '50%': { transform: 'translateY(-20px)' },
27
+ },
28
+ wave: {
29
+ '0%': { transform: 'translateX(0)' },
30
+ '100%': { transform: 'translateX(-100%)' },
31
+ }
32
+ }
33
+ }
34
+ }
35
+ }
36
+ </script>
37
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
38
+ <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
39
+ <style>
40
+ /* Custom Wave Background */
41
+ .wave-bg {
42
+ position: absolute;
43
+ bottom: 0;
44
+ left: 0;
45
+ width: 200%;
46
+ height: 150px;
47
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 150"><path fill="%23ffffff" fill-opacity="0.9" d="M0,64L48,80C96,96,192,128,288,128C384,128,480,96,576,85.3C672,75,768,85,864,96C960,107,1056,117,1152,117.3C1248,117,1344,107,1392,101.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
48
+ background-size: 50% 100%;
49
+ background-repeat: repeat-x;
50
+ transform: rotate(180deg);
51
+ z-index: 0;
52
+ }
53
+
54
+ /* Feature Card Hover Effect */
55
+ .feature-card {
56
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
57
+ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
58
+ }
59
+
60
+ .feature-card:hover {
61
+ transform: translateY(-10px);
62
+ box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25);
63
+ }
64
+
65
+ /* Pricing Card Glow Effect */
66
+ .pricing-card {
67
+ transition: all 0.4s ease;
68
+ }
69
+
70
+ .pricing-card.popular {
71
+ position: relative;
72
+ border: 2px solid transparent;
73
+ background-clip: padding-box;
74
+ z-index: 1;
75
+ }
76
+
77
+ .pricing-card.popular::before {
78
+ content: '';
79
+ position: absolute;
80
+ top: -2px; right: -2px; bottom: -2px; left: -2px;
81
+ background: linear-gradient(45deg, #6366f1, #8b5cf6);
82
+ border-radius: 0.75rem;
83
+ z-index: -1;
84
+ }
85
+
86
+ /* Button Pulse Animation */
87
+ @keyframes pulse-glow {
88
+ 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6); }
89
+ 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
90
+ 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
91
+ }
92
+
93
+ .btn-pulse {
94
+ animation: pulse-glow 2s infinite;
95
+ }
96
+
97
+ /* Wave Animation */
98
+ .moving-wave {
99
+ animation: wave 20s linear infinite;
100
+ }
101
+
102
+ /* Responsive Design */
103
+ @media (max-width: 768px) {
104
+ .hero-image {
105
+ width: 85%;
106
+ margin: 0 auto;
107
+ }
108
+ }
109
+ </style>
110
+ </head>
111
+ <body class="bg-light font-sans text-dark">
112
+ <!-- Navbar -->
113
+ <nav class="sticky top-0 z-50 bg-white bg-opacity-90 backdrop-blur-sm border-b border-gray-200">
114
+ <div class="container mx-auto px-4 py-4 flex items-center justify-between">
115
+ <a href="#" class="flex items-center space-x-2">
116
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
117
+ <i class="text-white text-xl fas fa-cloud"></i>
118
+ </div>
119
+ <span class="text-xl font-bold text-dark">Nexa<span class="text-primary">Cloud</span></span>
120
+ </a>
121
+
122
+ <div class="hidden md:flex space-x-8">
123
+ <a href="#features" class="hover:text-primary transition-colors">Features</a>
124
+ <a href="#solutions" class="hover:text-primary transition-colors">Solutions</a>
125
+ <a href="#pricing" class="hover:text-primary transition-colors">Pricing</a>
126
+ <a href="#testimonials" class="hover:text-primary transition-colors">Testimonials</a>
127
+ </div>
128
+
129
+ <div class="flex items-center space-x-4">
130
+ <a href="#" class="text-dark hover:text-primary transition-colors">Sign In</a>
131
+ <a href="#pricing" class="bg-primary text-white px-5 py-2 rounded-full shadow-lg hover:bg-primary/90 transition-colors">Get Started</a>
132
+ </div>
133
+
134
+ <button class="md:hidden text-xl">
135
+ <i class="fas fa-bars"></i>
136
+ </button>
137
+ </div>
138
+ </nav>
139
+
140
+ <!-- Hero Section -->
141
+ <section class="relative py-16 md:py-24 overflow-hidden">
142
+ <div class="absolute inset-0 z-0">
143
+ <div class="absolute top-20 right-0 w-64 h-64 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-40 animate-pulse-slow"></div>
144
+ <div class="absolute bottom-20 left-0 w-80 h-80 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-pulse-slow"></div>
145
+ </div>
146
+
147
+ <div class="container mx-auto px-4 relative z-10">
148
+ <div class="flex flex-col md:flex-row items-center">
149
+ <div class="md:w-1/2 mb-12 md:mb-0">
150
+ <div
151
+ class="inline-block bg-primary/10 text-primary text-sm px-4 py-2 rounded-full mb-6"
152
+ data-aos="fade-up"
153
+ >
154
+ <span>✨</span> Transform Your Digital Experience
155
+ </div>
156
+
157
+ <h1
158
+ class="text-4xl md:text-6xl font-bold mb-6 leading-tight"
159
+ data-aos="fade-up" data-aos-delay="100"
160
+ >
161
+ Cloud Solutions for the <span class="text-primary">Modern Era</span>
162
+ </h1>
163
+
164
+ <p
165
+ class="text-lg text-gray-600 mb-8 max-w-xl"
166
+ data-aos="fade-up" data-aos-delay="200"
167
+ >
168
+ NexaCloud revolutionizes cloud infrastructure with intelligent solutions designed for speed, security, and scalability. Empower your business today.
169
+ </p>
170
+
171
+ <div
172
+ class="flex flex-col sm:flex-row gap-4"
173
+ data-aos="fade-up" data-aos-delay="300"
174
+ >
175
+ <a href="#pricing" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-full shadow-lg transition-colors flex items-center justify-center">
176
+ Start Free Trial <i class="ml-2 fas fa-arrow-right"></i>
177
+ </a>
178
+ <a href="#features" class="bg-dark text-white px-8 py-4 rounded-full hover:bg-dark/80 transition-colors flex items-center justify-center">
179
+ <i class="fas fa-play-circle mr-2"></i> See it in Action
180
+ </a>
181
+ </div>
182
+
183
+ <div
184
+ class="mt-10 flex items-center text-gray-500"
185
+ data-aos="fade-up" data-aos-delay="400"
186
+ >
187
+ <div class="flex">
188
+ <div class="w-8 h-8 rounded-full border-2 border-white -ml-2 flex items-center justify-center bg-blue-500 text-white">
189
+ <span>A</span>
190
+ </div>
191
+ <div class="w-8 h-8 rounded-full border-2 border-white -ml-2 flex items-center justify-center bg-purple-500 text-white">
192
+ <span>B</span>
193
+ </div>
194
+ <div class="w-8 h-8 rounded-full border-2 border-white -ml-2 flex items-center justify-center bg-indigo-500 text-white">
195
+ <span>C</span>
196
+ </div>
197
+ </div>
198
+ <p class="ml-3">Trusted by 5,000+ businesses worldwide</p>
199
+ </div>
200
+ </div>
201
+
202
+ <div
203
+ class="md:w-1/2 flex justify-center hero-image"
204
+ data-aos="fade-left" data-aos-duration="800"
205
+ >
206
+ <div class="relative">
207
+ <div class="absolute -top-12 -left-12 w-64 h-64 bg-indigo-500/10 rounded-full animate-pulse-slow"></div>
208
+ <div class="absolute -bottom-8 -right-8 w-56 h-56 bg-purple-500/10 rounded-full animate-pulse-slow"></div>
209
+
210
+ <div class="relative bg-white p-6 rounded-2xl shadow-xl border border-gray-100" style="transform: perspective(1400px) rotateY(10deg);">
211
+ <div class="flex items-center justify-between mb-6">
212
+ <h3 class="font-bold">Your Cloud Dashboard</h3>
213
+ <div class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</div>
214
+ </div>
215
+
216
+ <div class="grid grid-cols-3 gap-4 mb-6">
217
+ <div class="bg-indigo-50 p-4 rounded-lg">
218
+ <div class="text-primary text-xl mb-1"><i class="fas fa-server"></i></div>
219
+ <h4 class="font-semibold text-sm mb-1">Servers</h4>
220
+ <p class="text-xs text-gray-500">12 deployed</p>
221
+ </div>
222
+ <div class="bg-purple-50 p-4 rounded-lg">
223
+ <div class="text-purple-500 text-xl mb-1"><i class="fas fa-database"></i></div>
224
+ <h4 class="font-semibold text-sm mb-1">Storage</h4>
225
+ <p class="text-xs text-gray-500">256GB used</p>
226
+ </div>
227
+ <div class="bg-blue-50 p-4 rounded-lg">
228
+ <div class="text-blue-500 text-xl mb-1"><i class="fas fa-chart-line"></i></div>
229
+ <h4 class="font-semibold text-sm mb-1">Traffic</h4>
230
+ <p class="text-xs text-gray-500">+25.4%</p>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
235
+ <div class="flex justify-between items-center mb-2">
236
+ <span class="text-sm font-medium">Storage Usage</span>
237
+ <span class="text-sm font-semibold">65%</span>
238
+ </div>
239
+ <div class="w-full bg-gray-200 rounded-full h-2">
240
+ <div
241
+ class="bg-gradient-to-r from-primary to-purple-500 h-2 rounded-full"
242
+ style="width: 65%"
243
+ data-aos="progress"
244
+ data-aos-duration="1000"
245
+ ></div>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="flex justify-between">
250
+ <button class="text-primary font-semibold text-sm">Manage Settings</button>
251
+ <button class="bg-primary hover:bg-primary/90 text-white px-4 py-1 rounded-full text-sm transition-colors">
252
+ Add Resource
253
+ </button>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Wave bottom -->
262
+ <div class="absolute bottom-0 left-0 w-full overflow-hidden">
263
+ <div class="wave-bg"></div>
264
+ </div>
265
+ </section>
266
+
267
+ <!-- Logos Section -->
268
+ <section class="py-12 bg-white">
269
+ <div class="container mx-auto px-4">
270
+ <h3 class="text-center text-gray-500 mb-12">Trusted by innovative companies worldwide</h3>
271
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
272
+ <i class="text-4xl text-gray-400 hover:text-primary transition-colors fab fa-apple"></i>
273
+ <i class="text-4xl text-gray-400 hover:text-primary transition-colors fab fa-microsoft"></i>
274
+ <i class="text-4xl text-gray-400 hover:text-primary transition-colors fab fa-google"></i>
275
+ <i class="text-4xl text-gray-400 hover:text-primary transition-colors fab fa-spotify"></i>
276
+ <i class="text-4xl text-gray-400 hover:text-primary transition-colors fab fa-slack"></i>
277
+ </div>
278
+ </div>
279
+ </section>
280
+
281
+ <!-- Features Section -->
282
+ <section id="features" class="py-20 bg-light">
283
+ <div class="container mx-auto px-4">
284
+ <div class="text-center mb-16" data-aos="fade-up">
285
+ <h2 class="text-4xl font-bold mb-4">Powerful Features</h2>
286
+ <p class="text-gray-600 max-w-xl mx-auto">Everything you need to scale your business with confidence</p>
287
+ </div>
288
+
289
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
290
+ <div
291
+ class="feature-card bg-white p-8 rounded-2xl border border-gray-100 hover:border-primary/30"
292
+ data-aos="fade-up" data-aos-delay="100"
293
+ >
294
+ <div class="w-16 h-16 bg-primary/10 text-primary flex items-center justify-center rounded-xl mb-6">
295
+ <i class="fas fa-bolt text-2xl"></i>
296
+ </div>
297
+ <h3 class="text-xl font-semibold mb-3">Lightning Fast Deployment</h3>
298
+ <p class="text-gray-600 mb-4">Deploy your applications in seconds with our optimized cloud infrastructure. Experience 99.9% uptime.</p>
299
+ <a href="#" class="text-primary font-medium flex items-center group">
300
+ Learn more
301
+ <i class="ml-2 fas fa-arrow-right transition-all duration-300 group-hover:translate-x-1"></i>
302
+ </a>
303
+ </div>
304
+
305
+ <div
306
+ class="feature-card bg-white p-8 rounded-2xl border border-gray-100 hover:border-primary/30"
307
+ data-aos="fade-up" data-aos-delay="200"
308
+ >
309
+ <div class="w-16 h-16 bg-purple-500/10 text-purple-500 flex items-center justify-center rounded-xl mb-6">
310
+ <i class="fas fa-shield-alt text-2xl"></i>
311
+ </div>
312
+ <h3 class="text-xl font-semibold mb-3">Enterprise-grade Security</h3>
313
+ <p class="text-gray-600 mb-4">Military-grade encryption and advanced threat protection to keep your data safe at all times.</p>
314
+ <a href="#" class="text-primary font-medium flex items-center group">
315
+ Learn more
316
+ <i class="ml-2 fas fa-arrow-right transition-all duration-300 group-hover:translate-x-1"></i>
317
+ </a>
318
+ </div>
319
+
320
+ <div
321
+ class="feature-card bg-white p-8 rounded-2xl border border-gray-100 hover:border-primary/30"
322
+ data-aos="fade-up" data-aos-delay="300"
323
+ >
324
+ <div class="w-16 h-16 bg-indigo-500/10 text-indigo-500 flex items-center justify-center rounded-xl mb-6">
325
+ <i class="fas fa-arrows-alt text-2xl"></i>
326
+ </div>
327
+ <h3 class="text-xl font-semibold mb-3">Effortless Scalability</h3>
328
+ <p class="text-gray-600 mb-4">Scale your resources up or down instantly based on traffic demands. Pay only for what you use.</p>
329
+ <a href="#" class="text-primary font-medium flex items-center group">
330
+ Learn more
331
+ <i class="ml-2 fas fa-arrow-right transition-all duration-300 group-hover:translate-x-1"></i>
332
+ </a>
333
+ </div>
334
+
335
+ <div
336
+ class="feature-card bg-white p-8 rounded-2xl border border-gray-100 hover:border-primary/30"
337
+ data-aos="fade-up" data-aos-delay="100"
338
+ >
339
+ <div class="w-16 h-16 bg-blue-500/10 text-blue-500 flex items-center justify-center rounded-xl mb-6">
340
+ <i class="fas fa-sync-alt text-2xl"></i>
341
+ </div>
342
+ <h3 class="text-xl font-semibold mb-3">Continuous Backups</h3>
343
+ <p class="text-gray-600 mb-4">Automated daily backups and snapshot tools to protect your business-critical data.</p>
344
+ <a href="#" class="text-primary font-medium flex items-center group">
345
+ Learn more
346
+ <i class="ml-2 fas fa-arrow-right transition-all duration-300 group-hover:translate-x-1"></i>
347
+ </a>
348
+ </div>
349
+
350
+ <div
351
+ class="feature-card bg-white p-8 rounded-2xl border border-gray-100 hover:border-primary/30"
352
+ data-aos="fade-up" data-aos-delay="200"
353
+ >
354
+ <div class="w-16 h-16 bg-green-500/10 text-green-500 flex items-center justify-center rounded-xl mb-6">
355
+ <i class="fas fa-globe text-2xl"></i>
356
+ </div>
357
+ <h3 class="text-xl font-semibold mb-3">Global Edge Network</h3>
358
+ <p class="text-gray-600 mb-4">Deliver content faster worldwide with our 42-location global CDN network.</p>
359
+ <a href="#" class="text-primary font-medium flex items-center group">
360
+ Learn more
361
+ <i class="ml-2 fas fa-arrow-right transition-all duration-300 group-hover:translate-x-1"></i>
362
+ </a>
363
+ </div>
364
+
365
+ <div
366
+ class="feature-card bg-white p-8 rounded-2xl border border-gray-100 hover:border-primary/30"
367
+ data-aos="fade-up" data-aos-delay="300"
368
+ >
369
+ <div class="w-16 h-16 bg-orange-500/10 text-orange-500 flex items-center justify-center rounded-xl mb-6">
370
+ <i class="fas fa-headset text-2xl"></i>
371
+ </div>
372
+ <h3 class="text-xl font-semibold mb-3">24/7 Expert Support</h3>
373
+ <p class="text-gray-600 mb-4">Our technical experts are available round-the-clock to solve your challenges.</p>
374
+ <a href="#" class="text-primary font-medium flex items-center group">
375
+ Learn more
376
+ <i class="ml-2 fas fa-arrow-right transition-all duration-300 group-hover:translate-x-1"></i>
377
+ </a>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </section>
382
+
383
+ <!-- Solutions Section -->
384
+ <section id="solutions" class="py-20 bg-gradient-to-r from-primary/5 to-purple-500/5">
385
+ <div class="container mx-auto px-4">
386
+ <div class="text-center mb-20" data-aos="fade-up">
387
+ <h2 class="text-4xl font-bold mb-4">Solutions for Every Need</h2>
388
+ <p class="text-gray-600 max-w-xl mx-auto">Tailored cloud solutions to fit your unique requirements</p>
389
+ </div>
390
+
391
+ <div class="flex flex-col lg:flex-row items-center gap-12">
392
+ <div class="lg:w-1/2" data-aos="fade-right">
393
+ <div class="bg-white p-10 rounded-2xl shadow-lg relative">
394
+ <div class="absolute top-6 right-6 w-10 h-10 bg-primary/10 text-primary flex items-center justify-center rounded-full">
395
+ <i class="fas fa-ellipsis-v"></i>
396
+ </div>
397
+
398
+ <h3 class="text-2xl font-semibold mb-4">Cloud Infrastructure Solutions</h3>
399
+ <p class="text-gray-600 mb-6">Deploy your applications on our high-performance cloud platform. Optimized for scale, security, and speed.</p>
400
+
401
+ <div class="flex flex-wrap gap-3 mb-8">
402
+ <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Dedicated Servers</span>
403
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Kubernetes</span>
404
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Virtual Machines</span>
405
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Managed Hosting</span>
406
+ </div>
407
+
408
+ <button class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-colors flex items-center">
409
+ Explore Solutions <i class="ml-2 fas fa-arrow-right"></i>
410
+ </button>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="lg:w-1/2 space-y-8" data-aos="fade-left" data-aos-delay="200">
415
+ <div class="flex items-start">
416
+ <div class="w-12 h-12 bg-primary/10 text-primary flex items-center justify-center rounded-xl mr-6 mt-1">
417
+ <i class="fas fa-database"></i>
418
+ </div>
419
+ <div>
420
+ <h3 class="text-xl font-semibold mb-2">Cloud Storage Solutions</h3>
421
+ <p class="text-gray-600">Scalable storage solutions with high availability and enterprise-grade security.</p>
422
+ </div>
423
+ </div>
424
+
425
+ <div class="flex items-start">
426
+ <div class="w-12 h-12 bg-purple-500/10 text-purple-500 flex items-center justify-center rounded-xl mr-6 mt-1">
427
+ <i class="fas fa-cloud-upload-alt"></i>
428
+ </div>
429
+ <div>
430
+ <h3 class="text-xl font-semibold mb-2">Content Delivery Network</h3>
431
+ <p class="text-gray-600">Accelerate content delivery with our global edge network across 42 locations.</p>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="flex items-start">
436
+ <div class="w-12 h-12 bg-indigo-500/10 text-indigo-500 flex items-center justify-center rounded-xl mr-6 mt-1">
437
+ <i class="fas fa-lock"></i>
438
+ </div>
439
+ <div>
440
+ <h3 class="text-xl font-semibold mb-2">Security Solutions</h3>
441
+ <p class="text-gray-600">Protect your applications with DDoS protection, WAF, and threat monitoring.</p>
442
+ </div>
443
+ </div>
444
+
445
+ <div class="flex items-start">
446
+ <div class="w-12 h-12 bg-green-500/10 text-green-500 flex items-center justify-center rounded-xl mr-6 mt-1">
447
+ <i class="fas fa-server"></i>
448
+ </div>
449
+ <div>
450
+ <h3 class="text-xl font-semibold mb-2">Hybrid Cloud Solutions</h3>
451
+ <p class="text-gray-600">Bridge private and public cloud environments with our hybrid deployment options.</p>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </section>
458
+
459
+ <!-- Pricing Section -->
460
+ <section id="pricing" class="py-20 bg-white">
461
+ <div class="container mx-auto px-4">
462
+ <div class="text-center mb-20" data-aos="fade-up">
463
+ <h2 class="text-4xl font-bold mb-4">Simple, Transparent Pricing</h2>
464
+ <p class="text-gray-600 max-w-xl mx-auto mb-8">No hidden fees. Start for free, upgrade anytime.</p>
465
+
466
+ <div class="inline-flex bg-gray-100 p-1 rounded-full mb-4">
467
+ <button class="px-6 py-2 rounded-full bg-primary text-white">Monthly</button>
468
+ <button class="px-6 py-2 rounded-full text-gray-700 hover:text-primary transition-colors">Yearly <span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded-full ml-1">Save 20%</span></button>
469
+ </div>
470
+ </div>
471
+
472
+ <div class="grid md:grid-cols-3 gap-8">
473
+ <div class="pricing-card bg-white border border-gray-200 p-8 rounded-2xl" data-aos="zoom-in">
474
+ <div class="mb-6">
475
+ <h3 class="text-xl font-semibold mb-2">Starter</h3>
476
+ <p class="text-gray-600 text-sm">Perfect for small projects and testing</p>
477
+ </div>
478
+ <div class="mb-8">
479
+ <div class="text-4xl font-bold mb-1">$29</div>
480
+ <div class="text-gray-600">per month</div>
481
+ </div>
482
+
483
+ <ul class="space-y-4 mb-8">
484
+ <li class="flex items-start">
485
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
486
+ <span>1 Virtual Server</span>
487
+ </li>
488
+ <li class="flex items-start">
489
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
490
+ <span>25GB SSD Storage</span>
491
+ </li>
492
+ <li class="flex items-start">
493
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
494
+ <span>1TB Data Transfer</span>
495
+ </li>
496
+ <li class="flex items-start text-gray-400">
497
+ <i class="fas fa-times mr-3 mt-1"></i>
498
+ <span>Load Balancer</span>
499
+ </li>
500
+ <li class="flex items-start text-gray-400">
501
+ <i class="fas fa-times mr-3 mt-1"></i>
502
+ <span>24/7 Phone Support</span>
503
+ </li>
504
+ </ul>
505
+
506
+ <button class="w-full text-center py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
507
+ Get Started
508
+ </button>
509
+ </div>
510
+
511
+ <div class="pricing-card popular bg-white p-8 rounded-2xl shadow-lg relative z-10" data-aos="zoom-in" data-aos-delay="100">
512
+ <div class="absolute top-0 right-6 bg-primary text-white py-1 px-4 rounded-b-lg text-sm font-medium">
513
+ Most Popular
514
+ </div>
515
+
516
+ <div class="mb-6">
517
+ <h3 class="text-xl font-semibold mb-2">Professional</h3>
518
+ <p class="text-gray-600 text-sm">For growing businesses</p>
519
+ </div>
520
+ <div class="mb-8">
521
+ <div class="text-4xl font-bold mb-1">$79</div>
522
+ <div class="text-gray-600">per month</div>
523
+ </div>
524
+
525
+ <ul class="space-y-4 mb-8">
526
+ <li class="flex items-start">
527
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
528
+ <span>4 Virtual Servers</span>
529
+ </li>
530
+ <li class="flex items-start">
531
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
532
+ <span>100GB SSD Storage</span>
533
+ </li>
534
+ <li class="flex items-start">
535
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
536
+ <span>5TB Data Transfer</span>
537
+ </li>
538
+ <li class="flex items-start">
539
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
540
+ <span>Load Balancer</span>
541
+ </li>
542
+ <li class="flex items-start">
543
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
544
+ <span>24/7 Phone Support</span>
545
+ </li>
546
+ </ul>
547
+
548
+ <button class="btn-pulse w-full text-center py-3 bg-primary text-white hover:bg-primary/90 rounded-lg transition-colors">
549
+ Get Started
550
+ </button>
551
+ </div>
552
+
553
+ <div class="pricing-card bg-white border border-gray-200 p-8 rounded-2xl" data-aos="zoom-in" data-aos-delay="200">
554
+ <div class="mb-6">
555
+ <h3 class="text-xl font-semibold mb-2">Enterprise</h3>
556
+ <p class="text-gray-600 text-sm">For mission-critical projects</p>
557
+ </div>
558
+ <div class="mb-8">
559
+ <div class="text-4xl font-bold mb-1">$149</div>
560
+ <div class="text-gray-600">per month</div>
561
+ </div>
562
+
563
+ <ul class="space-y-4 mb-8">
564
+ <li class="flex items-start">
565
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
566
+ <span>10+ Virtual Servers</span>
567
+ </li>
568
+ <li class="flex items-start">
569
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
570
+ <span>500GB SSD Storage</span>
571
+ </li>
572
+ <li class="flex items-start">
573
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
574
+ <span>Unlimited Transfer</span>
575
+ </li>
576
+ <li class="flex items-start">
577
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
578
+ <span>Load Balancer</span>
579
+ </li>
580
+ <li class="flex items-start">
581
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
582
+ <span>24/7 Dedicated Support</span>
583
+ </li>
584
+ </ul>
585
+
586
+ <button class="w-full text-center py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
587
+ Get Started
588
+ </button>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </section>
593
+
594
+ <!-- Testimonials Section -->
595
+ <section id="testimonials" class="py-20 bg-gradient-to-r from-primary/5 to-purple-500/5">
596
+ <div class="container mx-auto px-4">
597
+ <div class="text-center mb-20" data-aos="fade-up">
598
+ <h2 class="text-4xl font-bold mb-4">Loved by Businesses Worldwide</h2>
599
+ <p class="text-gray-600 max-w-xl mx-auto">Join thousands of companies that trust NexaCloud for their critical infrastructure</p>
600
+ </div>
601
+
602
+ <div class="grid md:grid-cols-3 gap-8">
603
+ <div class="bg-white p-8 rounded-2xl shadow-sm" data-aos="fade-up" data-aos-delay="100">
604
+ <div class="flex items-center mb-6">
605
+ <div class="text-3xl text-primary mr-2">★</div>
606
+ <div class="text-3xl text-primary mr-2">★</div>
607
+ <div class="text-3xl text-primary mr-2">★</div>
608
+ <div class="text-3xl text-primary mr-2">★</div>
609
+ <div class="text-3xl text-primary">★</div>
610
+ </div>
611
+ <p class="text-gray-600 italic mb-6">"NexaCloud has completely transformed how we deploy our applications. Deployment times are 90% faster and cost savings are significant."</p>
612
+ <div class="flex items-center">
613
+ <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Alex Johnson">
614
+ <div>
615
+ <h4 class="font-semibold">Alex Johnson</h4>
616
+ <p class="text-gray-600 text-sm">CTO at TechNova</p>
617
+ </div>
618
+ </div>
619
+ </div>
620
+
621
+ <div class="bg-white p-8 rounded-2xl shadow-sm" data-aos="fade-up" data-aos-delay="200">
622
+ <div class="flex items-center mb-6">
623
+ <div class="text-3xl text-primary mr-2">★</div>
624
+ <div class="text-3xl text-primary mr-2">★</div>
625
+ <div class="text-3xl text-primary mr-2">★</div>
626
+ <div class="text-3xl text-primary mr-2">★</div>
627
+ <div class="text-3xl text-primary">★</div>
628
+ </div>
629
+ <p class="text-gray-600 italic mb-6">"The security features give us peace of mind. Their team helped us transition from our legacy system with minimal disruption."</p>
630
+ <div class="flex items-center">
631
+ <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Michael Chen">
632
+ <div>
633
+ <h4 class="font-semibold">Michael Chen</h4>
634
+ <p class="text-gray-600 text-sm">CEO at Omni Solutions</p>
635
+ </div>
636
+ </div>
637
+ </div>
638
+
639
+ <div class="bg-white p-8 rounded-2xl shadow-sm" data-aos="fade-up" data-aos-delay="300">
640
+ <div class="flex items-center mb-6">
641
+ <div class="text-3xl text-primary mr-2">★</div>
642
+ <div class="text-3xl text-primary mr-2">★</div>
643
+ <div class="text-3xl text-primary mr-2">★</div>
644
+ <div class="text-3xl text-primary mr-2">★</div>
645
+ <div class="text-3xl text-primary">★</div>
646
+ </div>
647
+ <p class="text-gray-600 italic mb-6">"The scalability has been invaluable during traffic spikes. We never worry about scaling challenges during our peak seasons anymore."</p>
648
+ <div class="flex items-center">
649
+ <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/28.jpg" alt="Sarah Rodriguez">
650
+ <div>
651
+ <h4 class="font-semibold">Sarah Rodriguez</h4>
652
+ <p class="text-gray-600 text-sm">Head of Engineering at CloudScale</p>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </div>
657
+ </div>
658
+ </section>
659
+
660
+ <!-- CTA Section -->
661
+ <section class="py-20 bg-gradient-to-r from-primary to-secondary">
662
+ <div class="container mx-auto px-4 text-center">
663
+ <h2 class="text-4xl font-bold text-white mb-6" data-aos="fade-up">Ready to Transform Your Cloud Experience?</h2>
664
+ <p class="text-white/90 max-w-xl mx-auto mb-8" data-aos="fade-up" data-aos-delay="100">Join thousands of businesses that switched to NexaCloud. Start your free 14-day trial today.</p>
665
+
666
+ <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200">
667
+ <button class="bg-white text-primary px-8 py-4 rounded-full shadow-lg hover:bg-gray-100 transition-colors font-medium">
668
+ Start Free Trial <i class="ml-2 fas fa-arrow-right"></i>
669
+ </button>
670
+ <button class="bg-transparent text-white px-8 py-4 rounded-full border-2 border-white hover:bg-white/10 transition-colors">
671
+ Schedule a Demo
672
+ </button>
673
+ </div>
674
+ </div>
675
+ </section>
676
+
677
+ <!-- Footer -->
678
+ <footer class="bg-dark text-white py-12 relative">
679
+ <div class="container mx-auto px-4">
680
+ <div class="grid md:grid-cols-2 lg:grid-cols-5 gap-12 mb-12">
681
+ <div class="lg:col-span-2">
682
+ <a href="#" class="flex items-center space-x-2 mb-6">
683
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
684
+ <i class="text-white text-xl fas fa-cloud"></i>
685
+ </div>
686
+ <span class="text-xl font-bold text-white">Nexa<span class="text-primary">Cloud</span></span>
687
+ </a>
688
+ <p class="text-gray-400 mb-6">The most reliable cloud platform for deploying, scaling, and securing your applications.</p>
689
+ <div class="flex space-x-4">
690
+ <a href="#" class="text-gray-400 hover:text-primary transition-colors">
691
+ <i class="fab fa-twitter text-xl"></i>
692
+ </a>
693
+ <a href="#" class="text-gray-400 hover:text-primary transition-colors">
694
+ <i class="fab fa-linkedin-in text-xl"></i>
695
+ </a>
696
+ <a href="#" class="text-gray-400 hover:text-primary transition-colors">
697
+ <i class="fab fa-facebook-f text-xl"></i>
698
+ </a>
699
+ <a href="#" class="text-gray-400 hover:text-primary transition-colors">
700
+ <i class="fab fa-github text-xl"></i>
701
+ </a>
702
+ </div>
703
+ </div>
704
+
705
+ <div>
706
+ <h4 class="text-white font-semibold mb-4">Product</h4>
707
+ <ul class="space-y-3">
708
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Features</a></li>
709
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Solutions</a></li>
710
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Pricing</a></li>
711
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Documentation</a></li>
712
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Releases</a></li>
713
+ </ul>
714
+ </div>
715
+
716
+ <div>
717
+ <h4 class="text-white font-semibold mb-4">Company</h4>
718
+ <ul class="space-y-3">
719
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">About Us</a></li>
720
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Careers</a></li>
721
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Blog</a></li>
722
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Press</a></li>
723
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Contact</a></li>
724
+ </ul>
725
+ </div>
726
+
727
+ <div>
728
+ <h4 class="text-white font-semibold mb-4">Resources</h4>
729
+ <ul class="space-y-3">
730
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Community</a></li>
731
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Support</a></li>
732
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Tutorials</a></li>
733
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">API Status</a></li>
734
+ <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Partners</a></li>
735
+ </ul>
736
+ </div>
737
+ </div>
738
+
739
+ <div class="pt-8 border-t border-gray-800 text-gray-400 text-sm">
740
+ <p>© 2023 NexaCloud Technologies. All rights reserved.</p>
741
+ </div>
742
+ </div>
743
+ </footer>
744
+
745
+ <!-- Scripts -->
746
+ <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
747
+ <script>
748
+ // Initialize AOS for animations
749
+ AOS.init({
750
+ duration: 800,
751
+ once: true,
752
+ easing: 'ease-in-out'
753
+ });
754
+
755
+ // Custom progress animation trigger
756
+ const progressBars = document.querySelectorAll('[data-aos="progress"]');
757
+ progressBars.forEach(bar => {
758
+ bar.setAttribute('data-aos', 'custom-progress');
759
+ bar.style.width = '0';
760
+ setTimeout(() => {
761
+ bar.style.width = bar.getAttribute('data-width') || bar.style.width;
762
+ }, 200);
763
+ });
764
+ </script>
765
+ <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=ngandugilbert/nexa-cloud" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
766
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ make modern saas landing page
2
+ add animations
3
+ add background animations
4
+ create a modern saas landing page with nice animations