Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexa | Digital Innovation Solutions</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #6c5ce7; | |
| --primary-dark: #5649c0; | |
| --secondary: #00cec9; | |
| --dark: #2d3436; | |
| --light: #f5f6fa; | |
| --gradient: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--light); | |
| color: var(--dark); | |
| overflow-x: hidden; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background-color: white; | |
| box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); | |
| position: fixed; | |
| width: 100%; | |
| z-index: 1000; | |
| } | |
| .header-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.5rem 5%; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| } | |
| .logo i { | |
| margin-right: 10px; | |
| color: var(--secondary); | |
| } | |
| nav ul { | |
| display: flex; | |
| list-style: none; | |
| } | |
| nav ul li { | |
| margin-left: 2rem; | |
| } | |
| nav ul li a { | |
| text-decoration: none; | |
| color: var(--dark); | |
| font-weight: 500; | |
| transition: color 0.3s ease; | |
| position: relative; | |
| } | |
| nav ul li a:hover { | |
| color: var(--primary); | |
| } | |
| nav ul li a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background-color: var(--primary); | |
| transition: width 0.3s ease; | |
| } | |
| nav ul li a:hover::after { | |
| width: 100%; | |
| } | |
| .cta-button { | |
| background: var(--gradient); | |
| color: white; | |
| padding: 0.6rem 1.5rem; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| display: inline-block; | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(108, 92, 231, 0.3); | |
| } | |
| .mobile-menu { | |
| display: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 8rem 5% 5rem; | |
| background: var(--light); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .hero-content { | |
| flex: 1; | |
| padding-right: 3rem; | |
| } | |
| .hero-content h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.2; | |
| color: var(--dark); | |
| } | |
| .hero-content h1 span { | |
| color: var(--primary); | |
| } | |
| .hero-content p { | |
| font-size: 1.2rem; | |
| color: #666; | |
| margin-bottom: 2rem; | |
| line-height: 1.6; | |
| max-width: 600px; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .secondary-button { | |
| border: 2px solid var(--primary); | |
| color: var(--primary); | |
| padding: 0.6rem 1.5rem; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| text-decoration: none; | |
| } | |
| .secondary-button:hover { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| .hero-image { | |
| flex: 1; | |
| position: relative; | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .hero-image img { | |
| width: 100%; | |
| max-width: 600px; | |
| height: auto; | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px rgba(108, 92, 231, 0.2); | |
| } | |
| .shape-1, .shape-2, .shape-3 { | |
| position: absolute; | |
| border-radius: 50%; | |
| z-index: -1; | |
| opacity: 0.2; | |
| } | |
| .shape-1 { | |
| width: 300px; | |
| height: 300px; | |
| background-color: var(--primary); | |
| top: -100px; | |
| right: -100px; | |
| } | |
| .shape-2 { | |
| width: 200px; | |
| height: 200px; | |
| background-color: var(--secondary); | |
| bottom: 50px; | |
| left: -50px; | |
| } | |
| .shape-3 { | |
| width: 150px; | |
| height: 150px; | |
| background-color: var(--primary-dark); | |
| bottom: -50px; | |
| right: 150px; | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 6rem 5%; | |
| background-color: white; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| color: var(--dark); | |
| margin-bottom: 1rem; | |
| } | |
| .section-title p { | |
| color: #666; | |
| font-size: 1.1rem; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .feature-card { | |
| background-color: white; | |
| border-radius: 15px; | |
| padding: 2rem; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| text-align: center; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-icon { | |
| width: 80px; | |
| height: 80px; | |
| background: var(--gradient); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 1.5rem; | |
| font-size: 2rem; | |
| color: white; | |
| } | |
| .feature-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| .feature-card p { | |
| color: #666; | |
| line-height: 1.6; | |
| } | |
| /* Stats Section */ | |
| .stats { | |
| padding: 4rem 5%; | |
| background: var(--gradient); | |
| color: white; | |
| text-align: center; | |
| } | |
| .stats-container { | |
| display: flex; | |
| justify-content: space-around; | |
| flex-wrap: wrap; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .stat-item { | |
| padding: 2rem; | |
| } | |
| .stat-item h3 { | |
| font-size: 3rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-item p { | |
| font-size: 1.1rem; | |
| opacity: 0.9; | |
| } | |
| /* Testimonials */ | |
| .testimonials { | |
| padding: 6rem 5%; | |
| background-color: var(--light); | |
| } | |
| .testimonial-slider { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .testimonial-slide { | |
| background-color: white; | |
| border-radius: 15px; | |
| padding: 2.5rem; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); | |
| text-align: center; | |
| display: none; | |
| } | |
| .testimonial-slide.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| .testimonial-text { | |
| font-size: 1.2rem; | |
| font-style: italic; | |
| color: #666; | |
| margin-bottom: 2rem; | |
| line-height: 1.8; | |
| } | |
| .testimonial-author { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .author-image { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| overflow: hidden; | |
| margin-right: 1rem; | |
| } | |
| .author-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .author-info h4 { | |
| font-size: 1.2rem; | |
| color: var(--dark); | |
| margin-bottom: 0.2rem; | |
| } | |
| .author-info p { | |
| color: #888; | |
| font-size: 0.9rem; | |
| } | |
| .slider-controls { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 2rem; | |
| } | |
| .slider-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background-color: #ddd; | |
| margin: 0 5px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| .slider-dot.active { | |
| background-color: var(--primary); | |
| } | |
| /* Pricing Section */ | |
| .pricing { | |
| padding: 6rem 5%; | |
| background-color: white; | |
| } | |
| .pricing-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .pricing-card { | |
| background-color: white; | |
| border-radius: 15px; | |
| padding: 2.5rem 2rem; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); | |
| text-align: center; | |
| transition: transform 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .pricing-card.popular { | |
| border: 2px solid var(--primary); | |
| } | |
| .popular-label { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| background-color: var(--primary); | |
| color: white; | |
| padding: 0.3rem 1rem; | |
| font-size: 0.8rem; | |
| border-bottom-left-radius: 15px; | |
| } | |
| .pricing-card:hover { | |
| transform: translateY(-10px); | |
| } | |
| .pricing-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| .price { | |
| font-size: 3rem; | |
| font-weight: 700; | |
| margin-bottom: 1.5rem; | |
| color: var(--primary); | |
| } | |
| .price span { | |
| font-size: 1rem; | |
| color: #888; | |
| } | |
| .pricing-features { | |
| margin-bottom: 2rem; | |
| } | |
| .pricing-features li { | |
| list-style: none; | |
| padding: 0.7rem 0; | |
| color: #666; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .pricing-features li:last-child { | |
| border-bottom: none; | |
| } | |
| /* CTA Section */ | |
| .cta { | |
| padding: 6rem 5%; | |
| background: var(--gradient); | |
| color: white; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cta::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon fill="rgba(255,255,255,0.03)" points="0,100 100,0 100,100"/></svg>'); | |
| background-size: cover; | |
| opacity: 0.2; | |
| } | |
| .cta h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| } | |
| .cta p { | |
| font-size: 1.2rem; | |
| max-width: 700px; | |
| margin: 0 auto 2rem; | |
| position: relative; | |
| opacity: 0.9; | |
| } | |
| .cta-button.light { | |
| background: white; | |
| color: var(--primary); | |
| } | |
| .cta-button.light:hover { | |
| color: white; | |
| background: var(--primary-dark); | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: var(--dark); | |
| color: white; | |
| padding: 4rem 5% 2rem; | |
| } | |
| .footer-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 3rem; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .footer-logo { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: white; | |
| margin-bottom: 1rem; | |
| display: inline-block; | |
| } | |
| .footer-logo i { | |
| margin-right: 10px; | |
| color: var(--secondary); | |
| } | |
| .footer-about p { | |
| color: #bbb; | |
| line-height: 1.6; | |
| margin-bottom: 1.5rem; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .social-links a { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| transition: background-color 0.3s ease; | |
| } | |
| .social-links a:hover { | |
| background-color: var(--primary); | |
| } | |
| .footer-links h3 { | |
| font-size: 1.2rem; | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| padding-bottom: 0.5rem; | |
| } | |
| .footer-links h3::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 50px; | |
| height: 2px; | |
| background-color: var(--secondary); | |
| } | |
| .footer-links ul { | |
| list-style: none; | |
| } | |
| .footer-links ul li { | |
| margin-bottom: 0.8rem; | |
| } | |
| .footer-links ul li a { | |
| color: #bbb; | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-links ul li a:hover { | |
| color: var(--secondary); | |
| } | |
| .footer-contact .contact-item { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| color: #bbb; | |
| } | |
| .footer-contact .contact-item i { | |
| margin-right: 1rem; | |
| color: var(--secondary); | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding: 2rem 0 0; | |
| margin-top: 3rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #888; | |
| font-size: 0.9rem; | |
| } | |
| /* Animations */ | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-15px); | |
| } | |
| 100% { | |
| transform: translateY(0px); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| /* Responsive Styles */ | |
| @media (max-width: 992px) { | |
| .hero-container { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .hero-content { | |
| padding-right: 0; | |
| margin-bottom: 3rem; | |
| } | |
| .hero-buttons { | |
| justify-content: center; | |
| } | |
| .stats-container { | |
| flex-direction: column; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .header-container { | |
| padding: 1rem 5%; | |
| } | |
| nav ul { | |
| position: fixed; | |
| top: 80px; | |
| left: 0; | |
| width: 100%; | |
| background-color: white; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 2rem 0; | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| transform: translateY(-150%); | |
| transition: transform 0.3s ease; | |
| } | |
| nav ul.show { | |
| transform: translateY(0); | |
| } | |
| nav ul li { | |
| margin: 0.5rem 0; | |
| } | |
| .mobile-menu { | |
| display: block; | |
| } | |
| .hero-content h1 { | |
| font-size: 2.5rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2rem; | |
| } | |
| .price { | |
| font-size: 2.5rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hero-buttons { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .hero-content h1 { | |
| font-size: 2rem; | |
| } | |
| .stats-item { | |
| padding: 1.5rem; | |
| } | |
| .stats-item h3 { | |
| font-size: 2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="header-container"> | |
| <div class="logo"> | |
| <i class="fas fa-rocket"></i> | |
| <span>Nexa</span> | |
| </div> | |
| <nav> | |
| <ul id="nav-menu"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#pricing">Pricing</a></li> | |
| <li><a href="#testimonials">Testimonials</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <a href="#" class="cta-button">Get Started</a> | |
| <div class="mobile-menu" id="mobile-menu"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="hero-container"> | |
| <div class="hero-content"> | |
| <h1>Transform your business with <span>digital innovation</span></h1> | |
| <p>Nexa provides cutting-edge solutions to help your company thrive in the digital era. Our platform combines powerful technology with intuitive design to drive results.</p> | |
| <div class="hero-buttons"> | |
| <a href="#" class="cta-button">Start Free Trial</a> | |
| <a href="#" class="secondary-button">Learn More</a> | |
| </div> | |
| </div> | |
| <div class="hero-image"> | |
| <img src="https://images.unsplash.com/photo-1555421689-3f034debb7a6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Digital Innovation"> | |
| <div class="shape-1"></div> | |
| <div class="shape-2"></div> | |
| <div class="shape-3"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features"> | |
| <div class="section-title"> | |
| <h2>Powerful Features</h2> | |
| <p>Our platform is packed with everything you need to succeed in today's digital landscape</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3>Lightning Fast</h3> | |
| <p>Optimized for speed to ensure your users have the best experience with minimal latency.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3>Secure & Reliable</h3> | |
| <p>Enterprise-grade security to protect your data with 99.99% uptime guaranteed.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3>Mobile Ready</h3> | |
| <p>Fully responsive design that works flawlessly on any device from desktop to mobile.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3>Advanced Analytics</h3> | |
| <p>Powerful analytics dashboard to track performance and make data-driven decisions.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-cog"></i> | |
| </div> | |
| <h3>Customizable</h3> | |
| <p>Easily customize every aspect to match your brand identity and specific needs.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-headset"></i> | |
| </div> | |
| <h3>24/7 Support</h3> | |
| <p>Our expert support team is available around the clock to assist you.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="stats"> | |
| <div class="stats-container"> | |
| <div class="stat-item"> | |
| <h3>10K+</h3> | |
| <p>Happy Clients</p> | |
| </div> | |
| <div class="stat-item"> | |
| <h3>500K</h3> | |
| <p>Projects Completed</p> | |
| </div> | |
| <div class="stat-item"> | |
| <h3>24/7</h3> | |
| <p>Support Available</p> | |
| </div> | |
| <div class="stat-item"> | |
| <h3>99.9%</h3> | |
| <p>Uptime Guarantee</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="testimonials" id="testimonials"> | |
| <div class="section-title"> | |
| <h2>What Our Clients Say</h2> | |
| <p>Hear from businesses that have transformed their operations with our platform</p> | |
| </div> | |
| <div class="testimonial-slider"> | |
| <div class="testimonial-slide active"> | |
| <p class="testimonial-text">"Nexa has completely revolutionized our business operations. The platform is intuitive, powerful, and has helped us increase our productivity by over 40% in just three months."</p> | |
| <div class="testimonial-author"> | |
| <div class="author-image"> | |
| <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Sarah Johnson"> | |
| </div> | |
| <div class="author-info"> | |
| <h4>Sarah Johnson</h4> | |
| <p>CEO, TechSolutions Inc.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-slide"> | |
| <p class="testimonial-text">"We evaluated dozens of solutions before choosing Nexa. Their attention to detail, customer support, and commitment to innovation make them stand out from the competition."</p> | |
| <div class="testimonial-author"> | |
| <div class="author-image"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen"> | |
| </div> | |
| <div class="author-info"> | |
| <h4>Michael Chen</h4> | |
| <p>CTO, Digital Ventures</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-slide"> | |
| <p class="testimonial-text">"The implementation was seamless, and our team was up and running within days. Nexa's platform has transformed how we interact with our customers and manage our workflows."</p> | |
| <div class="testimonial-author"> | |
| <div class="author-image"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez"> | |
| </div> | |
| <div class="author-info"> | |
| <h4>Emma Rodriguez</h4> | |
| <p>Marketing Director, GlobalCorp</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slider-controls"> | |
| <div class="slider-dot active" data-index="0"></div> | |
| <div class="slider-dot" data-index="1"></div> | |
| <div class="slider-dot" data-index="2"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="pricing" id="pricing"> | |
| <div class="section-title"> | |
| <h2>Simple, Transparent Pricing</h2> | |
| <p>Choose the plan that works best for your business needs</p> | |
| </div> | |
| <div class="pricing-grid"> | |
| <div class="pricing-card"> | |
| <h3>Starter</h3> | |
| <div class="price">$29<span>/month</span></div> | |
| <ul class="pricing-features"> | |
| <li>Up to 5 users</li> | |
| <li>Basic analytics</li> | |
| <li>Email support</li> | |
| <li>5GB storage</li> | |
| <li>Standard features</li> | |
| </ul> | |
| <a href="#" class="cta-button">Get Started</a> | |
| </div> | |
| <div class="pricing-card popular"> | |
| <div class="popular-label">Most Popular</div> | |
| <h3>Professional</h3> | |
| <div class="price">$79<span>/month</span></div> | |
| <ul class="pricing-features"> | |
| <li>Up to 20 users</li> | |
| <li>Advanced analytics</li> | |
| <li>Priority support</li> | |
| <li>50GB storage</li> | |
| <li>Pro features</li> | |
| <li>API access</li> | |
| </ul> | |
| <a href="#" class="cta-button">Get Started</a> | |
| </div> | |
| <div class="pricing-card"> | |
| <h3>Enterprise</h3> | |
| <div class="price">$199<span>/month</span></div> | |
| <ul class="pricing-features"> | |
| <li>Unlimited users</li> | |
| <li>Premium analytics</li> | |
| <li>24/7 dedicated support</li> | |
| <li>500GB storage</li> | |
| <li>All features</li> | |
| <li>Custom solutions</li> | |
| </ul> | |
| <a href="#" class="cta-button">Get Started</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="cta"> | |
| <h2>Ready to Transform Your Business?</h2> | |
| <p>Join thousands of businesses that have already revolutionized their operations with Nexa. Start your free 14-day trial today.</p> | |
| <a href="#" class="cta-button light">Start Free Trial</a> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact"> | |
| <div class="footer-container"> | |
| <div class="footer-about"> | |
| <a href="#" class="footer-logo"><i class="fas fa-rocket"></i>Nexa</a> | |
| <p>We are dedicated to helping businesses thrive in the digital age through innovative technology solutions and exceptional service.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-links"> | |
| <h3>Quick Links</h3> | |
| <ul> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#pricing">Pricing</a></li> | |
| <li><a href="#testimonials">Testimonials</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-links"> | |
| <h3>Products</h3> | |
| <ul> | |
| <li><a href="#">Platform</a></li> | |
| <li><a href="#">Integrations</a></li> | |
| <li><a href="#">API</a></li> | |
| <li><a href="#">Mobile App</a></li> | |
| <li><a href="#">Extensions</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-contact"> | |
| <h3>Contact Us</h3> | |
| <div class="contact-item"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| <span>123 Innovation Drive, San Francisco, CA 94107</span> | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fas fa-phone-alt"></i> | |
| <span>+1 (800) 123-4567</span> | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fas fa-envelope"></i> | |
| <span>[email protected]</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2023 Nexa Inc. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile Menu Toggle | |
| document.getElementById('mobile-menu').addEventListener('click', function() { | |
| const navMenu = document.getElementById('nav-menu'); | |
| navMenu.classList.toggle('show'); | |
| }); | |
| // Testimonial Slider | |
| const sliderDots = document.querySelectorAll('.slider-dot'); | |
| const slides = document.querySelectorAll('.testimonial-slide'); | |
| function showSlide(index) { | |
| slides.forEach(slide => slide.classList.remove('active')); | |
| sliderDots.forEach(dot => dot.classList.remove('active')); | |
| slides[index].classList.add('active'); | |
| sliderDots[index].classList.add('active'); | |
| } | |
| sliderDots.forEach(dot => { | |
| dot.addEventListener('click', function() { | |
| const index = parseInt(this.getAttribute('data-index')); | |
| showSlide(index); | |
| }); | |
| }); | |
| // Auto-slide testimonials | |
| let currentSlide = 0; | |
| setInterval(() => { | |
| currentSlide = (currentSlide + 1) % slides.length; | |
| showSlide(currentSlide); | |
| }, 5000); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const navMenu = document.getElementById('nav-menu'); | |
| if (navMenu.classList.contains('show')) { | |
| navMenu.classList.remove('show'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Add scroll animation to elements | |
| const animateOnScroll = function() { | |
| const elements = document.querySelectorAll('.feature-card, .pricing-card, .section-title'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.2; | |
| if (elementPosition < screenPosition) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| // Set initial state | |
| window.addEventListener('load', function() { | |
| document.querySelectorAll('.feature-card, .pricing-card, .section-title').forEach(el => { | |
| el.style.opacity = '0'; | |
| el.style.transform = 'translateY(20px)'; | |
| el.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; | |
| }); | |
| setTimeout(animateOnScroll, 100); | |
| }); | |
| window.addEventListener('scroll', animateOnScroll); | |
| </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |