Spaces:
Running
Running
i want it to have animations, we are based in gadon kaya, gwale kano state, our number is 08060656130 - Initial Deployment
75580fa verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Exvia Agro | Premium Agricultural Import & Export</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <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> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(46, 125, 50, 0.9) 0%, rgba(56, 142, 60, 0.85) 100%); | |
| } | |
| .product-card: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); | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #fff; | |
| transition: width .3s; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-white shadow-md"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-20 items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <img class="h-12" src="http://static.photos/agriculture/200x200/1" alt="Exvia Agro Logo"> | |
| <span class="ml-3 text-2xl font-bold text-green-700">Exvia Agro</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-8"> | |
| <a href="#" class="nav-link text-green-700 px-3 py-2 font-medium">Home</a> | |
| <a href="#products" class="nav-link text-gray-600 hover:text-green-700 px-3 py-2 font-medium">Products</a> | |
| <a href="#services" class="nav-link text-gray-600 hover:text-green-700 px-3 py-2 font-medium">Services</a> | |
| <a href="#about" class="nav-link text-gray-600 hover:text-green-700 px-3 py-2 font-medium">About</a> | |
| <a href="#contact" class="nav-link text-gray-600 hover:text-green-700 px-3 py-2 font-medium">Contact</a> | |
| <a href="#" class="bg-green-600 text-white px-6 py-2 rounded-md font-medium hover:bg-green-700 transition duration-300">Get Quote</a> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button class="text-gray-600 hover:text-green-700 focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div id="hero" class="relative pt-20 h-screen flex items-center justify-center"> | |
| <div class="absolute inset-0 hero-gradient"></div> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/agriculture/1200x630/5')] bg-cover bg-center opacity-20"></div> | |
| <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-5xl md:text-6xl font-bold text-white mb-6" data-aos="fade-up"> | |
| Global Agricultural Trade Solutions | |
| </h1> | |
| <p class="text-xl md:text-2xl text-white mb-10 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Connecting farmers to global markets with premium quality agricultural products and reliable supply chains. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200"> | |
| <a href="#products" class="bg-white text-green-700 px-8 py-3 rounded-md font-bold hover:bg-gray-100 transition duration-300"> | |
| Our Products | |
| </a> | |
| <a href="#contact" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-md font-bold hover:bg-white hover:text-green-700 transition duration-300"> | |
| Contact Us | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Products Section --> | |
| <section id="products" 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"> | |
| <h2 class="text-3xl font-bold text-green-700 mb-4" data-aos="fade-up">Our Premium Products</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| We specialize in the export and import of high-quality agricultural commodities from trusted sources worldwide. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden product-card transition duration-300" data-aos="fade-up"> | |
| <img class="w-full h-48 object-cover" src="http://static.photos/agriculture/640x360/10" alt="Grains"> | |
| <div class="p-6"> | |
| <div class="uppercase tracking-wide text-sm text-green-600 font-semibold">Grains</div> | |
| <h3 class="mt-2 text-xl font-semibold text-gray-800">Wheat & Corn</h3> | |
| <p class="mt-2 text-gray-500"> | |
| Premium quality wheat and corn sourced from fertile farmlands with strict quality control. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-green-600 font-bold">Available:</span> | |
| <span class="ml-2 text-gray-600">USA, Canada, Ukraine</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden product-card transition duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <img class="w-full h-48 object-cover" src="http://static.photos/agriculture/640x360/11" alt="Coffee"> | |
| <div class="p-6"> | |
| <div class="uppercase tracking-wide text-sm text-green-600 font-semibold">Beverages</div> | |
| <h3 class="mt-2 text-xl font-semibold text-gray-800">Coffee & Tea</h3> | |
| <p class="mt-2 text-gray-500"> | |
| Specialty grade coffee beans and premium tea leaves from renowned growing regions. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-green-600 font-bold">Available:</span> | |
| <span class="ml-2 text-gray-600">Brazil, Colombia, Kenya</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden product-card transition duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <img class="w-full h-48 object-cover" src="http://static.photos/agriculture/640x360/12" alt="Fruits"> | |
| <div class="p-6"> | |
| <div class="uppercase tracking-wide text-sm text-green-600 font-semibold">Fruits</div> | |
| <h3 class="mt-2 text-xl font-semibold text-gray-800">Fresh & Dried Fruits</h3> | |
| <p class="mt-2 text-gray-500"> | |
| Organic and conventional fruits, carefully selected and processed to maintain freshness. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="text-green-600 font-bold">Available:</span> | |
| <span class="ml-2 text-gray-600">Chile, South Africa, Turkey</span> | |
| </div> | |
| </div> | |
| </div> | |
| </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"> | |
| <h2 class="text-3xl font-bold text-green-700 mb-4" data-aos="fade-up">Our Comprehensive Services</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| We provide end-to-end solutions to ensure seamless agricultural trade operations. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-gray-50 p-8 rounded-lg" data-aos="fade-up"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="globe" class="text-green-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Global Sourcing</h3> | |
| <p class="text-gray-600"> | |
| We identify and partner with the best producers worldwide to ensure consistent quality and supply. | |
| </p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-gray-50 p-8 rounded-lg" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="truck" class="text-green-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Logistics Solutions</h3> | |
| <p class="text-gray-600"> | |
| Comprehensive logistics including transportation, warehousing, and customs clearance. | |
| </p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-gray-50 p-8 rounded-lg" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="award" class="text-green-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Quality Assurance</h3> | |
| <p class="text-gray-600"> | |
| Rigorous quality control processes to meet international standards and specifications. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-12" data-aos="fade-right"> | |
| <img src="http://static.photos/agriculture/1024x576/15" alt="About Exvia Agro" class="rounded-lg shadow-xl"> | |
| </div> | |
| <div class="lg:w-1/2" data-aos="fade-left"> | |
| <h2 class="text-3xl font-bold text-green-700 mb-6">About Exvia Agro</h2> | |
| <p class="text-gray-600 mb-6"> | |
| Founded in 2010, Exvia Agro has grown to become a trusted partner in agricultural trade, connecting producers with global markets. Our team of experts brings decades of experience in sourcing, quality control, and international trade. | |
| </p> | |
| <p class="text-gray-600 mb-6"> | |
| We pride ourselves on sustainable and ethical business practices that benefit all stakeholders in the supply chain, from smallholder farmers to multinational buyers. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="check" class="text-green-600"></i> | |
| </div> | |
| <span class="font-medium">15+ Years Experience</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="globe" class="text-green-600"></i> | |
| </div> | |
| <span class="font-medium">30+ Countries</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="users" class="text-green-600"></i> | |
| </div> | |
| <span class="font-medium">500+ Partners</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-green-700 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4" data-aos="fade-up">Trusted by Global Partners</h2> | |
| <p class="max-w-2xl mx-auto opacity-90" data-aos="fade-up" data-aos-delay="100"> | |
| What our clients and partners say about working with Exvia Agro | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-green-800 p-8 rounded-lg" data-aos="fade-up"> | |
| <div class="flex items-center mb-6"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="http://static.photos/people/200x200/1" alt="John Smith"> | |
| <div> | |
| <h4 class="font-bold">John Smith</h4> | |
| <p class="text-green-300 text-sm">Procurement Manager, Global Foods</p> | |
| </div> | |
| </div> | |
| <p class="italic"> | |
| "Exvia Agro has consistently delivered premium quality grains on time, even during challenging market conditions. Their reliability is unmatched." | |
| </p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-green-800 p-8 rounded-lg" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-6"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="http://static.photos/people/200x200/2" alt="Maria Garcia"> | |
| <div> | |
| <h4 class="font-bold">Maria Garcia</h4> | |
| <p class="text-green-300 text-sm">Director, European Beverages</p> | |
| </div> | |
| </div> | |
| <p class="italic"> | |
| "Their coffee sourcing expertise has helped us develop exclusive blends that our customers love. Truly a valuable partner." | |
| </p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-green-800 p-8 rounded-lg" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-6"> | |
| <img class="w-12 h-12 rounded-full mr-4" src="http://static.photos/people/200x200/3" alt="David Chen"> | |
| <div> | |
| <h4 class="font-bold">David Chen</h4> | |
| <p class="text-green-300 text-sm">CEO, Asia Fresh Produce</p> | |
| </div> | |
| </div> | |
| <p class="italic"> | |
| "From logistics to quality control, Exvia Agro handles everything professionally. We've expanded our business thanks to their support." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" 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"> | |
| <h2 class="text-3xl font-bold text-green-700 mb-4" data-aos="fade-up">Get In Touch</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Ready to discuss your agricultural import or export needs? Contact our team today. | |
| </p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2" data-aos="fade-right"> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-green-600 text-white px-6 py-3 rounded-md font-bold hover:bg-green-700 transition duration-300"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| <div class="lg:w-1/2" data-aos="fade-left"> | |
| <div class="bg-gray-50 p-8 rounded-lg h-full"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-6">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="map-pin" class="text-green-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-800">Headquarters</h4> | |
| <p class="text-gray-600">123 Agriculture Plaza, Suite 500<br>New York, NY 10001, USA</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="mail" class="text-green-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-800">Email Us</h4> | |
| <p class="text-gray-600">info@exviaagro.com<br>sales@exviaagro.com</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="phone" class="text-green-600"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-800">Call Us</h4> | |
| <p class="text-gray-600">08060656130<br>For inquiries and orders</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="text-lg font-medium text-gray-800 mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center hover:bg-green-200 transition duration-300"> | |
| <i data-feather="facebook" class="text-green-600"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center hover:bg-green-200 transition duration-300"> | |
| <i data-feather="twitter" class="text-green-600"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center hover:bg-green-200 transition duration-300"> | |
| <i data-feather="linkedin" class="text-green-600"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center hover:bg-green-200 transition duration-300"> | |
| <i data-feather="instagram" class="text-green-600"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </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-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Exvia Agro</h3> | |
| <p class="text-gray-400"> | |
| Connecting global agriculture through sustainable trade practices and premium quality products. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Home</a></li> | |
| <li><a href="#products" class="text-gray-400 hover:text-white transition duration-300">Products</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Products</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Grains</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Coffee & Tea</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Fruits</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Spices</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Nuts</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Newsletter</h4> | |
| <p class="text-gray-400 mb-4"> | |
| Subscribe to our newsletter for market updates and agricultural insights. | |
| </p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-md text-gray-900 w-full focus:outline-none"> | |
| <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded-r-md hover:bg-green-700 transition duration-300"> | |
| <i data-feather="send"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-10 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2023 Exvia Agro Import & Export. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300 text-sm">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true, | |
| offset: 120 | |
| }); | |
| // Scroll animations | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Hero text animation | |
| anime.timeline({loop: false}) | |
| .add({ | |
| targets: '#hero h1', | |
| opacity: [0,1], | |
| translateY: [50, 0], | |
| duration: 1000, | |
| easing: "easeOutExpo" | |
| }) | |
| .add({ | |
| targets: '#hero p', | |
| opacity: [0,1], | |
| translateY: [30, 0], | |
| duration: 800, | |
| easing: "easeOutExpo", | |
| offset: '-=600' | |
| }) | |
| .add({ | |
| targets: '#hero .flex', | |
| opacity: [0,1], | |
| translateY: [30, 0], | |
| duration: 800, | |
| easing: "easeOutExpo", | |
| offset: '-=800' | |
| }); | |
| // Product card hover animations | |
| document.querySelectorAll('.product-card').forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| anime({ | |
| targets: card, | |
| scale: 1.02, | |
| duration: 300, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| anime({ | |
| targets: card, | |
| scale: 1, | |
| duration: 300, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| }); | |
| // Testimonial animations | |
| anime({ | |
| targets: '.bg-green-800', | |
| opacity: [0,1], | |
| translateY: [50, 0], | |
| delay: anime.stagger(200), | |
| duration: 800, | |
| easing: "easeOutExpo" | |
| }); | |
| feather.replace(); | |
| // Vanta.js effect | |
| VANTA.WAVES({ | |
| el: "#hero", | |
| color: 0x2e7d32, | |
| waveHeight: 20, | |
| shininess: 50, | |
| waveSpeed: 1.0, | |
| zoom: 0.8 | |
| }); | |
| </script> | |
| </body> | |
| </html> | |