Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VersaLabs - AI Agency</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Outfit', sans-serif; | |
| background-color: #f8fafc; | |
| color: #0f172a; | |
| transition: background-color 0.3s ease, color 0.3s ease; | |
| } | |
| body.dark { | |
| background-color: #0f172a; | |
| color: #f8fafc; | |
| } | |
| .dark .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%); | |
| } | |
| .dark .hero-text { | |
| background-image: linear-gradient(90deg, #818cf8, #a78bfa); | |
| } | |
| .dark .bg-white { | |
| background-color: #1e293b ; | |
| } | |
| .dark .text-gray-900 { | |
| color: #f8fafc ; | |
| } | |
| .dark .text-gray-500 { | |
| color: #94a3b8 ; | |
| } | |
| .dark .text-gray-600 { | |
| color: #cbd5e1 ; | |
| } | |
| .dark .bg-gray-50 { | |
| background-color: #1e293b ; | |
| } | |
| .dark .border-gray-200 { | |
| border-color: #334155 ; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); | |
| } | |
| .hero-text { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| background-image: linear-gradient(90deg, #4f46e5, #9333ea); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm sticky top-0 z-50 transition-all duration-300"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <img class="h-8 w-auto" src="https://framerusercontent.com/images/t25w12kJO3xpUe3JdSybMTuinn8.png" alt="VersaLabs logo"> | |
| <span class="ml-2 text-xl font-bold text-gray-900">VersaLabs</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-6"> | |
| <button id="language-toggle" class="text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center"> | |
| <span class="mr-1">ENG</span> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| <button id="theme-toggle" class="text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"> | |
| <i data-feather="moon" class="hidden dark:block w-5 h-5"></i> | |
| <i data-feather="sun" class="dark:hidden w-5 h-5"></i> | |
| </button> | |
| <a href="#home" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="#services" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Services</a> | |
| <a href="#testimonials" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Case Studies</a> | |
| <a href="#about" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">About</a> | |
| <a href="#contact" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Contact</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button type="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"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div data-aos="fade-right"> | |
| <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6"> | |
| <span class="hero-text">AI-Powered</span><br> | |
| Digital Transformation | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8 max-w-lg"> | |
| VersaLabs is a leading AI consulting firm providing AI-powered automation, web development, and ecommerce solutions. With 15 years of expertise, our Shopify experts streamline workflows and boost revenue. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#" class="px-8 py-3 rounded-lg gradient-bg text-white font-medium shadow-lg hover:shadow-xl transition duration-300"> | |
| Get Started | |
| </a> | |
| <a href="#" class="px-8 py-3 rounded-lg bg-white text-indigo-600 font-medium border border-indigo-200 hover:bg-indigo-50 transition duration-300"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <img src="https://framerusercontent.com/images/wk45EXrwdvDOVPbrteiUP4meKk.png" alt="AI Technology" class="rounded-xl shadow-2xl"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-0 right-0 -z-10"> | |
| <div class="bg-gradient-to-br from-indigo-100 to-purple-50 rounded-full h-96 w-96 opacity-50 blur-3xl"></div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" 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" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Our AI Services</h2> | |
| <p class="text-lg text-gray-500 max-w-2xl mx-auto">We deliver cutting-edge AI solutions tailored to your business needs</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="cpu" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">AI Automation</h3> | |
| <p class="text-gray-600">Streamline operations with intelligent automation that learns and adapts to your workflows.</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="shopping-cart" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Ecommerce Solutions</h3> | |
| <p class="text-gray-600">Boost conversions with AI-powered product recommendations and personalized shopping experiences.</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-14 h-14 gradient-bg rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="code" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Web Development</h3> | |
| <p class="text-gray-600">Build future-proof websites with AI integration for enhanced user engagement and analytics.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-20 gradient-bg text-white"> | |
| <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 text-center"> | |
| <div data-aos="fade-up" data-aos-delay="100"> | |
| <div class="text-4xl font-bold mb-2">15+</div> | |
| <div class="text-lg">Years Experience</div> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="200"> | |
| <div class="text-4xl font-bold mb-2">200+</div> | |
| <div class="text-lg">Clients Worldwide</div> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="300"> | |
| <div class="text-4xl font-bold mb-2">95%</div> | |
| <div class="text-lg">Client Retention</div> | |
| </div> | |
| <div data-aos="fade-up" data-aos-delay="400"> | |
| <div class="text-4xl font-bold mb-2">3M+</div> | |
| <div class="text-lg">Revenue Generated</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section id="testimonials" 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" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Clients Say</h2> | |
| <p class="text-lg text-gray-500 max-w-2xl mx-auto">Trusted by startups and Fortune 500 companies alike</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 rounded-xl p-8" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"VersaLabs transformed our ecommerce operations with their AI solutions. Our conversion rates increased by 40% within the first month."</p> | |
| <div class="flex items-center"> | |
| <img src="https://static.photos/people/200x200/1" alt="Client" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <div class="font-medium text-gray-900">Sarah Johnson</div> | |
| <div class="text-sm text-gray-500">CEO, TechCorp</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-8" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"The automation solutions implemented by VersaLabs saved us over 200 hours per month in manual processes. Their expertise is unmatched."</p> | |
| <div class="flex items-center"> | |
| <img src="https://static.photos/people/200x200/2" alt="Client" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <div class="font-medium text-gray-900">Michael Chen</div> | |
| <div class="text-sm text-gray-500">COO, Global Retail</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-8" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4 mr-1"></i> | |
| <i data-feather="star" class="text-yellow-400 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Their Shopify experts helped us redesign our store with AI-powered recommendations. Our average order value increased by 35%."</p> | |
| <div class="flex items-center"> | |
| <img src="https://static.photos/people/200x200/3" alt="Client" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <div class="font-medium text-gray-900">David Wilson</div> | |
| <div class="text-sm text-gray-500">Founder, StyleHub</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white dark:bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div data-aos="fade-right"> | |
| <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Get in Touch</h2> | |
| <p class="text-lg text-gray-600 dark:text-gray-300 mb-8"> | |
| Have a project in mind or want to learn more about our services? | |
| Fill out the form and we'll get back to you within 24 hours. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-indigo-500 dark:text-indigo-400"> | |
| <i data-feather="mail"></i> | |
| </div> | |
| <div class="ml-3 text-base text-gray-500 dark:text-gray-400"> | |
| <a href="mailto:info@versalabs.io" class="hover:text-indigo-600 dark:hover:text-indigo-400">info@versalabs.io</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 text-indigo-500 dark:text-indigo-400"> | |
| <i data-feather="phone"></i> | |
| </div> | |
| <div class="ml-3 text-base text-gray-500 dark:text-gray-400"> | |
| <a href="tel:+11234567890" class="hover:text-indigo-600 dark:hover:text-indigo-400">+1 (470) 707-8649</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div data-aos="fade-left"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-white"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-white"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label> | |
| <textarea id="message" name="message" rows="4" required class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-white"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full px-6 py-3 gradient-bg text-white font-medium rounded-lg hover:opacity-90 transition duration-300"> | |
| Send Message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gray-900 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <div data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Business with AI?</h2> | |
| <p class="text-lg text-gray-300 mb-8 max-w-2xl mx-auto">Schedule a free consultation with our AI experts to discuss your project needs.</p> | |
| <a href="#contact" class="inline-block px-8 py-3 rounded-lg bg-white text-gray-900 font-medium hover:bg-gray-100 transition duration-300"> | |
| Book a Call | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-8 w-auto" src="https://framerusercontent.com/images/t25w12kJO3xpUe3JdSybMTuinn8.png" alt="VersaLabs logo"> | |
| <span class="ml-2 text-xl font-bold text-gray-900">VersaLabs</span> | |
| </div> | |
| <p class="text-gray-500 text-sm">Leading AI consulting firm providing cutting-edge solutions for digital transformation.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">AI Automation</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Ecommerce Solutions</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Web Development</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Shopify Experts</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">About Us</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Case Studies</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Careers</a></li> | |
| <li><a href="#" class="text-gray-500 hover:text-gray-900">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="twitter" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="linkedin" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="facebook" class="w-5 h-5"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="instagram" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| <div class="mt-4"> | |
| <a href="mailto:info@versalabs.io" class="text-gray-500 hover:text-gray-900">info@versalabs.io</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-200"> | |
| <p class="text-gray-500 text-sm text-center">© 2023 VersaLabs. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // 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', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Dark mode toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); | |
| // Check for saved theme or use preferred color scheme | |
| const currentTheme = localStorage.getItem('theme') || | |
| (prefersDarkScheme.matches ? 'dark' : 'light'); | |
| if (currentTheme === 'dark') { | |
| document.body.classList.add('dark'); | |
| } | |
| themeToggle.addEventListener('click', () => { | |
| document.body.classList.toggle('dark'); | |
| const theme = document.body.classList.contains('dark') ? 'dark' : 'light'; | |
| localStorage.setItem('theme', theme); | |
| }); | |
| // Language toggle | |
| const languageToggle = document.getElementById('language-toggle'); | |
| languageToggle.addEventListener('click', () => { | |
| window.location.href = 'index-es.html'; | |
| }); | |
| // Update header transparency on scroll | |
| const nav = document.querySelector('nav'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 10) { | |
| nav.classList.remove('bg-white/80', 'dark:bg-gray-900/80'); | |
| nav.classList.add('bg-white', 'dark:bg-gray-900'); | |
| } else { | |
| nav.classList.add('bg-white/80', 'dark:bg-gray-900/80'); | |
| nav.classList.remove('bg-white', 'dark:bg-gray-900'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |