Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nexus - Modern Web Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for animations and effects */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-out forwards; | |
| } | |
| .delay-1 { animation-delay: 0.2s; } | |
| .delay-2 { animation-delay: 0.4s; } | |
| .delay-3 { animation-delay: 0.6s; } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-cube text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">Nexus</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="features.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium transition-all">Features</a> | |
| <a href="solutions.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium transition-all">Solutions</a> | |
| <a href="pricing.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium transition-all">Pricing</a> | |
| <a href="testimonials.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 text-sm font-medium transition-all">Testimonials</a> | |
| <a href="contact.html" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition-all">Contact Us</a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="features.html" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Features</a> | |
| <a href="solutions.html" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Solutions</a> | |
| <a href="pricing.html" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Pricing</a> | |
| <a href="testimonials.html" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-indigo-600 hover:bg-gray-50">Testimonials</a> | |
| <a href="contact.html" class="block px-3 py-2 text-base font-medium text-indigo-600 hover:bg-indigo-50">Contact Us</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-indigo-50 to-blue-50 py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> | |
| <div class="fade-in"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6"> | |
| Build <span class="gradient-text">amazing</span> digital experiences | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Nexus provides cutting-edge web solutions to help your business thrive in the digital world. Our platform combines power with simplicity. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="register.html" class="bg-indigo-600 text-white px-6 py-3 rounded-lg text-lg font-medium hover:bg-indigo-700 transition-all text-center"> | |
| Get Started | |
| </a> | |
| <a href="features.html" class="border border-gray-300 bg-white text-gray-700 px-6 py-3 rounded-lg text-lg font-medium hover:bg-gray-50 transition-all text-center"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| <div class="fade-in delay-1 mt-10 lg:mt-0"> | |
| <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Web development" class="rounded-xl shadow-xl w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 fade-in"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Powerful Features</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto"> | |
| Our platform is packed with features designed to help you succeed in today's digital landscape. | |
| </p> | |
| <a href="features.html" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| See all features | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-xl transition-all card-hover fade-in delay-1"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-bolt text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Lightning Fast</h3> | |
| <p class="text-gray-600"> | |
| Optimized for speed with cutting-edge technology to ensure your site loads in milliseconds. | |
| </p> | |
| <a href="feature-detail.html?feature=lightning-fast" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Learn more | |
| <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl transition-all card-hover fade-in delay-2"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-mobile-alt text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Fully Responsive</h3> | |
| <p class="text-gray-600"> | |
| Looks perfect on any device, from desktop to mobile, with adaptive layouts. | |
| </p> | |
| <a href="feature-detail.html?feature=responsive" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Learn more | |
| <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl transition-all card-hover fade-in delay-3"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Enterprise Security</h3> | |
| <p class="text-gray-600"> | |
| Military-grade encryption and security protocols to protect your data. | |
| </p> | |
| <a href="feature-detail.html?feature=security" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Learn more | |
| <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl transition-all card-hover fade-in delay-1"> | |
| <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-line text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">SEO Optimized</h3> | |
| <p class="text-gray-600"> | |
| Built-in SEO tools to help your content rank higher in search results. | |
| </p> | |
| <a href="feature-detail.html?feature=seo" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Learn more | |
| <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl transition-all card-hover fade-in delay-2"> | |
| <div class="w-14 h-14 bg-yellow-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-cog text-yellow-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Easy Customization</h3> | |
| <p class="text-gray-600"> | |
| Intuitive interface with drag-and-drop functionality for easy customization. | |
| </p> | |
| <a href="feature-detail.html?feature=customization" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Learn more | |
| <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl transition-all card-hover fade-in delay-3"> | |
| <div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-headset text-red-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">24/7 Support</h3> | |
| <p class="text-gray-600"> | |
| Our expert team is available around the clock to assist you. | |
| </p> | |
| <a href="feature-detail.html?feature=support" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Learn more | |
| <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> | |
| <div class="fade-in"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Tailored Solutions for Your Business</h2> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| We understand that every business is unique. That's why we offer customized solutions that fit your specific needs and goals. | |
| </p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Custom web application development</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">E-commerce solutions with secure payments</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Content management systems</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">API integration and development</span> | |
| </li> | |
| </ul> | |
| <a href="solutions.html" class="mt-6 inline-flex items-center bg-indigo-600 text-white px-6 py-3 rounded-lg text-lg font-medium hover:bg-indigo-700 transition-all"> | |
| Explore Solutions | |
| </a> | |
| </div> | |
| <div class="fade-in delay-1 mt-10 lg:mt-0"> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Team working" class="rounded-lg w-full h-auto mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Our Approach</h3> | |
| <p class="text-gray-600 mb-4"> | |
| We work closely with you to understand your business objectives and deliver solutions that drive real results. | |
| </p> | |
| <a href="process.html" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Learn more about our process | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 fade-in"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Simple, Transparent Pricing</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto"> | |
| Choose the plan that fits your needs. No hidden fees, cancel anytime. | |
| </p> | |
| <a href="pricing.html" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Detailed pricing comparison | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-gray-50 rounded-xl p-8 transition-all card-hover fade-in delay-1"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Starter</h3> | |
| <p class="text-gray-600 mb-6">Perfect for small projects and personal websites</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-900">$19</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">1 Website</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">10 GB Storage</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Basic Analytics</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Email Support</span> | |
| </li> | |
| </ul> | |
| <a href="checkout.html?plan=starter" class="block w-full bg-gray-200 text-gray-800 text-center py-3 rounded-lg font-medium hover:bg-gray-300 transition-all"> | |
| Select Plan | |
| </a> | |
| </div> | |
| <div class="bg-indigo-600 rounded-xl p-8 text-white transition-all card-hover fade-in"> | |
| <div class="mb-4"> | |
| <span class="inline-block bg-indigo-700 text-xs font-semibold px-3 py-1 rounded-full">POPULAR</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Professional</h3> | |
| <p class="text-indigo-100 mb-6">Ideal for growing businesses and professionals</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">$49</span> | |
| <span class="text-indigo-100">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-white mt-1 mr-3"></i> | |
| <span>5 Websites</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-white mt-1 mr-3"></i> | |
| <span>50 GB Storage</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-white mt-1 mr-3"></i> | |
| <span>Advanced Analytics</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-white mt-1 mr-3"></i> | |
| <span>Priority Support</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-white mt-1 mr-3"></i> | |
| <span>SEO Tools</span> | |
| </li> | |
| </ul> | |
| <a href="checkout.html?plan=professional" class="block w-full bg-white text-indigo-600 text-center py-3 rounded-lg font-medium hover:bg-gray-100 transition-all"> | |
| Select Plan | |
| </a> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-8 transition-all card-hover fade-in delay-2"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Enterprise</h3> | |
| <p class="text-gray-600 mb-6">For large businesses with custom needs</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold text-gray-900">$99</span> | |
| <span class="text-gray-600">/month</span> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Unlimited Websites</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">500 GB Storage</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Premium Analytics</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">24/7 VIP Support</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-3"></i> | |
| <span class="text-gray-700">Dedicated Account Manager</span> | |
| </li> | |
| </ul> | |
| <a href="checkout.html?plan=enterprise" class="block w-full bg-gray-200 text-gray-800 text-center py-3 rounded-lg font-medium hover:bg-gray-300 transition-all"> | |
| Select Plan | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center fade-in delay-3"> | |
| <p class="text-gray-600 mb-4">Need something custom?</p> | |
| <a href="contact.html" class="text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Contact us for enterprise solutions | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16 fade-in"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Clients Say</h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto"> | |
| Don't just take our word for it. Here's what our clients have to say about working with us. | |
| </p> | |
| <a href="testimonials.html" class="mt-4 text-indigo-600 font-medium hover:text-indigo-700 inline-flex items-center"> | |
| Read all testimonials | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm transition-all card-hover fade-in delay-1"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4> | |
| <p class="text-gray-600">CEO, TechStart</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "Nexus transformed our online presence. Our website traffic increased by 300% within the first month of launch. Their team is incredibly talented and responsive." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <a href="testimonial-detail.html?id=1" class="mt-4 inline-flex items-center text-sm text-indigo-600 font-medium hover:text-indigo-700"> | |
| Read full testimonial | |
| </a> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm transition-all card-hover fade-in delay-2"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/43.jpg" alt="Michael Chen"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Michael Chen</h4> | |
| <p class="text-gray-600">Founder, GreenLeaf</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "The e-commerce solution Nexus built for us has been flawless. Our conversion rates have never been higher, and the platform is so easy to manage." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <a href="testimonial-detail.html?id=2" class="mt-4 inline-flex items-center text-sm text-indigo-600 font-medium hover:text-indigo-700"> | |
| Read full testimonial | |
| </a> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm transition-all card-hover fade-in delay-3"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Rodriguez"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Emma Rodriguez</h4> | |
| <p class="text-gray-600">Marketing Director, BrightCo</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "Working with Nexus was a game-changer for our digital strategy. Their insights and technical expertise helped us reach new audiences and grow our business." | |
| </p> | |
| <div class="mt-4 flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <a href="testimonial-detail.html?id=3" class="mt-4 inline-flex items-center text-sm text-indigo-600 font-medium hover:text-indigo-700"> | |
| Read full testimonial | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-indigo-700 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-6 fade-in">Ready to transform your digital presence?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto fade-in delay-1"> | |
| Join thousands of businesses who trust Nexus for their web solutions. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 fade-in delay-2"> | |
| <a href="register.html" class="bg-white text-indigo-700 px-8 py-4 rounded-lg text-lg font-bold hover:bg-gray-100 transition-all"> | |
| Get Started for Free | |
| </a> | |
| <a href="demo.html" class="border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-bold hover:bg-indigo-600 transition-all"> | |
| Request a Demo | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="about.html" class="text-gray-400 hover:text-white transition-all">About Us</a></li> | |
| <li><a href="careers.html" class="text-gray-400 hover:text-white transition-all">Careers</a></li> | |
| <li><a href="blog.html" class="text-gray-400 hover:text-white transition-all">Blog</a></li> | |
| <li><a href="press.html" class="text-gray-400 hover:text-white transition-all">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Products</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="platform.html" class="text-gray-400 hover:text-white transition-all">Web Platform</a></li> | |
| <li><a href="ecommerce.html" class="text-gray-400 hover:text-white transition-all">E-commerce</a></li> | |
| <li><a href="cms.html" class="text-gray-400 hover:text-white transition-all">CMS</a></li> | |
| <li><a href="api.html" class="text-gray-400 hover:text-white transition-all">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="docs.html" class="text-gray-400 hover:text-white transition-all">Documentation</a></li> | |
| <li><a href="guides.html" class="text-gray-400 hover:text-white transition-all">Guides</a></li> | |
| <li><a href="support.html" class="text-gray-400 hover:text-white transition-all">Support</a></li> | |
| <li><a href="community.html" class="text-gray-400 hover:text-white transition-all">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="privacy.html" class="text-gray-400 hover:text-white transition-all">Privacy</a></li> | |
| <li><a href="terms.html" class="text-gray-400 hover:text-white transition-all">Terms</a></li> | |
| <li><a href="security.html" class="text-gray-400 hover:text-white transition-all">Security</a></li> | |
| <li><a href="cookies.html" class="text-gray-400 hover:text-white transition-all">Cookies</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-cube text-indigo-400 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">Nexus</span> | |
| </div> | |
| <div class="text-gray-400 text-sm mb-4 md:mb-0"> | |
| © 2023 Nexus Technologies. All rights reserved. | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="https://facebook.com" class="text-gray-400 hover:text-white transition-all"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="https://twitter.com" class="text-gray-400 hover:text-white transition-all"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="https://instagram.com" class="text-gray-400 hover:text-white transition-all"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="https://linkedin.com" class="text-gray-400 hover:text-white transition-all"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="backToTop" class="fixed bottom-8 right-8 bg-indigo-600 text-white p-3 rounded-full shadow-lg hover:bg-indigo-700 transition-all hidden"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Back to top button | |
| const backToTopButton = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('hidden'); | |
| } else { | |
| backToTopButton.classList.add('hidden'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Form submission | |
| const contactForm = document.getElementById('contactForm'); | |
| const formSuccess = document.getElementById('formSuccess'); | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Here you would normally send the form data to your server | |
| // For demo purposes, we'll just show the success message | |
| formSuccess.classList.remove('hidden'); | |
| contactForm.reset(); | |
| setTimeout(() => { | |
| formSuccess.classList.add('hidden'); | |
| }, 5000); | |
| }); | |
| // Fade in animation when elements come into view | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const fadeInObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| fadeElements.forEach(element => { | |
| fadeInObserver.observe(element); | |
| }); | |
| </script> | |
| </body> | |
| </html> |