Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NexaCloud - Modern Cloud Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#8b5cf6', | |
| dark: '#0f172a', | |
| light: '#f8fafc' | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'wave': 'wave 8s linear infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| wave: { | |
| '0%': { transform: 'translateX(0)' }, | |
| '100%': { transform: 'translateX(-100%)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> | |
| <style> | |
| /* Custom Wave Background */ | |
| .wave-bg { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 200%; | |
| height: 150px; | |
| 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>'); | |
| background-size: 50% 100%; | |
| background-repeat: repeat-x; | |
| transform: rotate(180deg); | |
| z-index: 0; | |
| } | |
| /* Feature Card Hover Effect */ | |
| .feature-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25); | |
| } | |
| /* Pricing Card Glow Effect */ | |
| .pricing-card { | |
| transition: all 0.4s ease; | |
| } | |
| .pricing-card.popular { | |
| position: relative; | |
| border: 2px solid transparent; | |
| background-clip: padding-box; | |
| z-index: 1; | |
| } | |
| .pricing-card.popular::before { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; right: -2px; bottom: -2px; left: -2px; | |
| background: linear-gradient(45deg, #6366f1, #8b5cf6); | |
| border-radius: 0.75rem; | |
| z-index: -1; | |
| } | |
| /* Button Pulse Animation */ | |
| @keyframes pulse-glow { | |
| 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6); } | |
| 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } | |
| } | |
| .btn-pulse { | |
| animation: pulse-glow 2s infinite; | |
| } | |
| /* Wave Animation */ | |
| .moving-wave { | |
| animation: wave 20s linear infinite; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .hero-image { | |
| width: 85%; | |
| margin: 0 auto; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light font-sans text-dark"> | |
| <!-- Navbar --> | |
| <nav class="sticky top-0 z-50 bg-white bg-opacity-90 backdrop-blur-sm border-b border-gray-200"> | |
| <div class="container mx-auto px-4 py-4 flex items-center justify-between"> | |
| <a href="#" class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> | |
| <i class="text-white text-xl fas fa-cloud"></i> | |
| </div> | |
| <span class="text-xl font-bold text-dark">Nexa<span class="text-primary">Cloud</span></span> | |
| </a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#features" class="hover:text-primary transition-colors">Features</a> | |
| <a href="#solutions" class="hover:text-primary transition-colors">Solutions</a> | |
| <a href="#pricing" class="hover:text-primary transition-colors">Pricing</a> | |
| <a href="#testimonials" class="hover:text-primary transition-colors">Testimonials</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="text-dark hover:text-primary transition-colors">Sign In</a> | |
| <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> | |
| </div> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative py-16 md:py-24 overflow-hidden"> | |
| <div class="absolute inset-0 z-0"> | |
| <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> | |
| <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> | |
| </div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <div | |
| class="inline-block bg-primary/10 text-primary text-sm px-4 py-2 rounded-full mb-6" | |
| data-aos="fade-up" | |
| > | |
| <span>✨</span> Transform Your Digital Experience | |
| </div> | |
| <h1 | |
| class="text-4xl md:text-6xl font-bold mb-6 leading-tight" | |
| data-aos="fade-up" data-aos-delay="100" | |
| > | |
| Cloud Solutions for the <span class="text-primary">Modern Era</span> | |
| </h1> | |
| <p | |
| class="text-lg text-gray-600 mb-8 max-w-xl" | |
| data-aos="fade-up" data-aos-delay="200" | |
| > | |
| NexaCloud revolutionizes cloud infrastructure with intelligent solutions designed for speed, security, and scalability. Empower your business today. | |
| </p> | |
| <div | |
| class="flex flex-col sm:flex-row gap-4" | |
| data-aos="fade-up" data-aos-delay="300" | |
| > | |
| <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"> | |
| Start Free Trial <i class="ml-2 fas fa-arrow-right"></i> | |
| </a> | |
| <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"> | |
| <i class="fas fa-play-circle mr-2"></i> See it in Action | |
| </a> | |
| </div> | |
| <div | |
| class="mt-10 flex items-center text-gray-500" | |
| data-aos="fade-up" data-aos-delay="400" | |
| > | |
| <div class="flex"> | |
| <div class="w-8 h-8 rounded-full border-2 border-white -ml-2 flex items-center justify-center bg-blue-500 text-white"> | |
| <span>A</span> | |
| </div> | |
| <div class="w-8 h-8 rounded-full border-2 border-white -ml-2 flex items-center justify-center bg-purple-500 text-white"> | |
| <span>B</span> | |
| </div> | |
| <div class="w-8 h-8 rounded-full border-2 border-white -ml-2 flex items-center justify-center bg-indigo-500 text-white"> | |
| <span>C</span> | |
| </div> | |
| </div> | |
| <p class="ml-3">Trusted by 5,000+ businesses worldwide</p> | |
| </div> | |
| </div> | |
| <div | |
| class="md:w-1/2 flex justify-center hero-image" | |
| data-aos="fade-left" data-aos-duration="800" | |
| > | |
| <div class="relative"> | |
| <div class="absolute -top-12 -left-12 w-64 h-64 bg-indigo-500/10 rounded-full animate-pulse-slow"></div> | |
| <div class="absolute -bottom-8 -right-8 w-56 h-56 bg-purple-500/10 rounded-full animate-pulse-slow"></div> | |
| <div class="relative bg-white p-6 rounded-2xl shadow-xl border border-gray-100" style="transform: perspective(1400px) rotateY(10deg);"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="font-bold">Your Cloud Dashboard</h3> | |
| <div class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-indigo-50 p-4 rounded-lg"> | |
| <div class="text-primary text-xl mb-1"><i class="fas fa-server"></i></div> | |
| <h4 class="font-semibold text-sm mb-1">Servers</h4> | |
| <p class="text-xs text-gray-500">12 deployed</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <div class="text-purple-500 text-xl mb-1"><i class="fas fa-database"></i></div> | |
| <h4 class="font-semibold text-sm mb-1">Storage</h4> | |
| <p class="text-xs text-gray-500">256GB used</p> | |
| </div> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="text-blue-500 text-xl mb-1"><i class="fas fa-chart-line"></i></div> | |
| <h4 class="font-semibold text-sm mb-1">Traffic</h4> | |
| <p class="text-xs text-gray-500">+25.4%</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm font-medium">Storage Usage</span> | |
| <span class="text-sm font-semibold">65%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div | |
| class="bg-gradient-to-r from-primary to-purple-500 h-2 rounded-full" | |
| style="width: 65%" | |
| data-aos="progress" | |
| data-aos-duration="1000" | |
| ></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="text-primary font-semibold text-sm">Manage Settings</button> | |
| <button class="bg-primary hover:bg-primary/90 text-white px-4 py-1 rounded-full text-sm transition-colors"> | |
| Add Resource | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wave bottom --> | |
| <div class="absolute bottom-0 left-0 w-full overflow-hidden"> | |
| <div class="wave-bg"></div> | |
| </div> | |
| </section> | |
| <!-- Logos Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h3 class="text-center text-gray-500 mb-12">Trusted by innovative companies worldwide</h3> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <i class="text-4xl text-gray-400 hover:text-primary transition-colors fab fa-apple"></i> | |
| <i class="text-4xl text-gray-400 hover:text-primary transition-colors fab fa-microsoft"></i> | |
| <i class="text-4xl text-gray-400 hover:text-primary transition-colors fab fa-google"></i> | |
| <i class="text-4xl text-gray-400 hover:text-primary transition-colors fab fa-spotify"></i> | |
| <i class="text-4xl text-gray-400 hover:text-primary transition-colors fab fa-slack"></i> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-light"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16" data-aos="fade-up"> | |
| <h2 class="text-4xl font-bold mb-4">Powerful Features</h2> | |
| <p class="text-gray-600 max-w-xl mx-auto">Everything you need to scale your business with confidence</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div | |
| class="feature-card bg-white p-8 rounded-2xl border border-gray-100 hover:border-primary/30" | |
| data-aos="fade-up" data-aos-delay="100" | |
| > | |
| <div class="w-16 h-16 bg-primary/10 text-primary flex items-center justify-center rounded-xl mb-6"> | |
| <i class="fas fa-bolt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Lightning Fast Deployment</h3> | |
| <p class="text-gray-600 mb-4">Deploy your applications in seconds with our optimized cloud infrastructure. Experience 99.9% uptime.</p> | |
| <a href="#" class="text-primary font-medium flex items-center group"> | |
| Learn more | |
| <i class="ml-2 fas fa-arrow-right transition-all duration-300 group-hover:translate-x-1"></i> | |
| </a> | |
| </div> | |
| <div | |
| class="feature-card bg-white p-8 rounded-2xl border border-gray-100 hover:border-primary/30" | |
| data-aos="fade-up" data-aos-delay="200" | |
| > | |
| <div class="w-16 h-16 bg-purple-500/10 text-purple-500 flex items-center justify-center rounded-xl mb-6"> | |
| <i class="fas fa-shield-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Enterprise-grade Security</h3> | |
| <p class="text-gray-600 mb-4">Military-grade encryption and advanced threat protection to keep your data safe at all times.</p> | |
| <a href="#" class="text-primary font-medium flex items-center group"> | |
| Learn more | |
| <i class="ml-2 fas fa-arrow-right transition-all duration-300 group-hover:translate-x-1"></i> | |
| </a> | |
| </div> | |
| <div | |
| class="feature-card bg-white p-8 rounded-2xl border border-gray-100 hover:border-primary/30" | |
| data-aos="fade-up" data-aos-delay="300" | |
| > | |
| <div class="w-16 h-16 bg-indigo-500/10 text-indigo-500 flex items-center justify-center rounded-xl mb-6"> | |
| <i class="fas fa-arrows-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Effortless Scalability</h3> | |
| <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> | |
| <a href="#" class="text-primary font-medium flex items-center group"> | |
| Learn more | |
| <i class="ml-2 fas fa-arrow-right transition-all duration-300 group-hover:translate-x-1"></i> | |
| </a> | |
| </div> | |
| <div | |
| class="feature-card bg-white p-8 rounded-2xl border border-gray-100 hover:border-primary/30" | |
| data-aos="fade-up" data-aos-delay="100" | |
| > | |
| <div class="w-16 h-16 bg-blue-500/10 text-blue-500 flex items-center justify-center rounded-xl mb-6"> | |
| <i class="fas fa-sync-alt text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Continuous Backups</h3> | |
| <p class="text-gray-600 mb-4">Automated daily backups and snapshot tools to protect your business-critical data.</p> | |
| <a href="#" class="text-primary font-medium flex items-center group"> | |
| Learn more | |
| <i class="ml-2 fas fa-arrow-right transition-all duration-300 group-hover:translate-x-1"></i> | |
| </a> | |
| </div> | |
| <div | |
| class="feature-card bg-white p-8 rounded-2xl border border-gray-100 hover:border-primary/30" | |
| data-aos="fade-up" data-aos-delay="200" | |
| > | |
| <div class="w-16 h-16 bg-green-500/10 text-green-500 flex items-center justify-center rounded-xl mb-6"> | |
| <i class="fas fa-globe text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Global Edge Network</h3> | |
| <p class="text-gray-600 mb-4">Deliver content faster worldwide with our 42-location global CDN network.</p> | |
| <a href="#" class="text-primary font-medium flex items-center group"> | |
| Learn more | |
| <i class="ml-2 fas fa-arrow-right transition-all duration-300 group-hover:translate-x-1"></i> | |
| </a> | |
| </div> | |
| <div | |
| class="feature-card bg-white p-8 rounded-2xl border border-gray-100 hover:border-primary/30" | |
| data-aos="fade-up" data-aos-delay="300" | |
| > | |
| <div class="w-16 h-16 bg-orange-500/10 text-orange-500 flex items-center justify-center rounded-xl mb-6"> | |
| <i class="fas fa-headset text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">24/7 Expert Support</h3> | |
| <p class="text-gray-600 mb-4">Our technical experts are available round-the-clock to solve your challenges.</p> | |
| <a href="#" class="text-primary font-medium flex items-center group"> | |
| Learn more | |
| <i class="ml-2 fas fa-arrow-right transition-all duration-300 group-hover:translate-x-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section id="solutions" class="py-20 bg-gradient-to-r from-primary/5 to-purple-500/5"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-20" data-aos="fade-up"> | |
| <h2 class="text-4xl font-bold mb-4">Solutions for Every Need</h2> | |
| <p class="text-gray-600 max-w-xl mx-auto">Tailored cloud solutions to fit your unique requirements</p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2" data-aos="fade-right"> | |
| <div class="bg-white p-10 rounded-2xl shadow-lg relative"> | |
| <div class="absolute top-6 right-6 w-10 h-10 bg-primary/10 text-primary flex items-center justify-center rounded-full"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4">Cloud Infrastructure Solutions</h3> | |
| <p class="text-gray-600 mb-6">Deploy your applications on our high-performance cloud platform. Optimized for scale, security, and speed.</p> | |
| <div class="flex flex-wrap gap-3 mb-8"> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Dedicated Servers</span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Kubernetes</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Virtual Machines</span> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Managed Hosting</span> | |
| </div> | |
| <button class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-colors flex items-center"> | |
| Explore Solutions <i class="ml-2 fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 space-y-8" data-aos="fade-left" data-aos-delay="200"> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 bg-primary/10 text-primary flex items-center justify-center rounded-xl mr-6 mt-1"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2">Cloud Storage Solutions</h3> | |
| <p class="text-gray-600">Scalable storage solutions with high availability and enterprise-grade security.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 bg-purple-500/10 text-purple-500 flex items-center justify-center rounded-xl mr-6 mt-1"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2">Content Delivery Network</h3> | |
| <p class="text-gray-600">Accelerate content delivery with our global edge network across 42 locations.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 bg-indigo-500/10 text-indigo-500 flex items-center justify-center rounded-xl mr-6 mt-1"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2">Security Solutions</h3> | |
| <p class="text-gray-600">Protect your applications with DDoS protection, WAF, and threat monitoring.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-12 h-12 bg-green-500/10 text-green-500 flex items-center justify-center rounded-xl mr-6 mt-1"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2">Hybrid Cloud Solutions</h3> | |
| <p class="text-gray-600">Bridge private and public cloud environments with our hybrid deployment options.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-20" data-aos="fade-up"> | |
| <h2 class="text-4xl font-bold mb-4">Simple, Transparent Pricing</h2> | |
| <p class="text-gray-600 max-w-xl mx-auto mb-8">No hidden fees. Start for free, upgrade anytime.</p> | |
| <div class="inline-flex bg-gray-100 p-1 rounded-full mb-4"> | |
| <button class="px-6 py-2 rounded-full bg-primary text-white">Monthly</button> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="pricing-card bg-white border border-gray-200 p-8 rounded-2xl" data-aos="zoom-in"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold mb-2">Starter</h3> | |
| <p class="text-gray-600 text-sm">Perfect for small projects and testing</p> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="text-4xl font-bold mb-1">$29</div> | |
| <div class="text-gray-600">per month</div> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>1 Virtual Server</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>25GB SSD Storage</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>1TB Data Transfer</span> | |
| </li> | |
| <li class="flex items-start text-gray-400"> | |
| <i class="fas fa-times mr-3 mt-1"></i> | |
| <span>Load Balancer</span> | |
| </li> | |
| <li class="flex items-start text-gray-400"> | |
| <i class="fas fa-times mr-3 mt-1"></i> | |
| <span>24/7 Phone Support</span> | |
| </li> | |
| </ul> | |
| <button class="w-full text-center py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="pricing-card popular bg-white p-8 rounded-2xl shadow-lg relative z-10" data-aos="zoom-in" data-aos-delay="100"> | |
| <div class="absolute top-0 right-6 bg-primary text-white py-1 px-4 rounded-b-lg text-sm font-medium"> | |
| Most Popular | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold mb-2">Professional</h3> | |
| <p class="text-gray-600 text-sm">For growing businesses</p> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="text-4xl font-bold mb-1">$79</div> | |
| <div class="text-gray-600">per month</div> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>4 Virtual Servers</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>100GB SSD Storage</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>5TB Data Transfer</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Load Balancer</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>24/7 Phone Support</span> | |
| </li> | |
| </ul> | |
| <button class="btn-pulse w-full text-center py-3 bg-primary text-white hover:bg-primary/90 rounded-lg transition-colors"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="pricing-card bg-white border border-gray-200 p-8 rounded-2xl" data-aos="zoom-in" data-aos-delay="200"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-semibold mb-2">Enterprise</h3> | |
| <p class="text-gray-600 text-sm">For mission-critical projects</p> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="text-4xl font-bold mb-1">$149</div> | |
| <div class="text-gray-600">per month</div> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>10+ Virtual Servers</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>500GB SSD Storage</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Unlimited Transfer</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>Load Balancer</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span>24/7 Dedicated Support</span> | |
| </li> | |
| </ul> | |
| <button class="w-full text-center py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-gradient-to-r from-primary/5 to-purple-500/5"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-20" data-aos="fade-up"> | |
| <h2 class="text-4xl font-bold mb-4">Loved by Businesses Worldwide</h2> | |
| <p class="text-gray-600 max-w-xl mx-auto">Join thousands of companies that trust NexaCloud for their critical infrastructure</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-2xl shadow-sm" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-6"> | |
| <div class="text-3xl text-primary mr-2">★</div> | |
| <div class="text-3xl text-primary mr-2">★</div> | |
| <div class="text-3xl text-primary mr-2">★</div> | |
| <div class="text-3xl text-primary mr-2">★</div> | |
| <div class="text-3xl text-primary">★</div> | |
| </div> | |
| <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> | |
| <div class="flex items-center"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Alex Johnson"> | |
| <div> | |
| <h4 class="font-semibold">Alex Johnson</h4> | |
| <p class="text-gray-600 text-sm">CTO at TechNova</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-sm" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-6"> | |
| <div class="text-3xl text-primary mr-2">★</div> | |
| <div class="text-3xl text-primary mr-2">★</div> | |
| <div class="text-3xl text-primary mr-2">★</div> | |
| <div class="text-3xl text-primary mr-2">★</div> | |
| <div class="text-3xl text-primary">★</div> | |
| </div> | |
| <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> | |
| <div class="flex items-center"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Michael Chen"> | |
| <div> | |
| <h4 class="font-semibold">Michael Chen</h4> | |
| <p class="text-gray-600 text-sm">CEO at Omni Solutions</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-sm" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center mb-6"> | |
| <div class="text-3xl text-primary mr-2">★</div> | |
| <div class="text-3xl text-primary mr-2">★</div> | |
| <div class="text-3xl text-primary mr-2">★</div> | |
| <div class="text-3xl text-primary mr-2">★</div> | |
| <div class="text-3xl text-primary">★</div> | |
| </div> | |
| <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> | |
| <div class="flex items-center"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/28.jpg" alt="Sarah Rodriguez"> | |
| <div> | |
| <h4 class="font-semibold">Sarah Rodriguez</h4> | |
| <p class="text-gray-600 text-sm">Head of Engineering at CloudScale</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-primary to-secondary"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-4xl font-bold text-white mb-6" data-aos="fade-up">Ready to Transform Your Cloud Experience?</h2> | |
| <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> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200"> | |
| <button class="bg-white text-primary px-8 py-4 rounded-full shadow-lg hover:bg-gray-100 transition-colors font-medium"> | |
| Start Free Trial <i class="ml-2 fas fa-arrow-right"></i> | |
| </button> | |
| <button class="bg-transparent text-white px-8 py-4 rounded-full border-2 border-white hover:bg-white/10 transition-colors"> | |
| Schedule a Demo | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12 relative"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-5 gap-12 mb-12"> | |
| <div class="lg:col-span-2"> | |
| <a href="#" class="flex items-center space-x-2 mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> | |
| <i class="text-white text-xl fas fa-cloud"></i> | |
| </div> | |
| <span class="text-xl font-bold text-white">Nexa<span class="text-primary">Cloud</span></span> | |
| </a> | |
| <p class="text-gray-400 mb-6">The most reliable cloud platform for deploying, scaling, and securing your applications.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-primary transition-colors"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition-colors"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition-colors"> | |
| <i class="fab fa-facebook-f text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition-colors"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Product</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Solutions</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Releases</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Company</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Community</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Support</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Tutorials</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">API Status</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Partners</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 text-gray-400 text-sm"> | |
| <p>© 2023 NexaCloud Technologies. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Scripts --> | |
| <script src="https://unpkg.com/aos@next/dist/aos.js"></script> | |
| <script> | |
| // Initialize AOS for animations | |
| AOS.init({ | |
| duration: 800, | |
| once: true, | |
| easing: 'ease-in-out' | |
| }); | |
| // Custom progress animation trigger | |
| const progressBars = document.querySelectorAll('[data-aos="progress"]'); | |
| progressBars.forEach(bar => { | |
| bar.setAttribute('data-aos', 'custom-progress'); | |
| bar.style.width = '0'; | |
| setTimeout(() => { | |
| bar.style.width = bar.getAttribute('data-width') || bar.style.width; | |
| }, 200); | |
| }); | |
| </script> | |
| <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> | |
| </html> |