Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AYexpress - 3D Ecommerce Experience</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></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> | |
| <style> | |
| .perspective-3d { | |
| transform-style: preserve-3d; | |
| perspective: 1000px; | |
| } | |
| .card-3d { | |
| transition: transform 0.5s ease, box-shadow 0.5s ease; | |
| transform: translateZ(0); | |
| } | |
| .card-3d:hover { | |
| transform: translateZ(20px); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.25); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen" id="vanta-bg"> | |
| <!-- Navigation --> | |
| <nav class="glass-effect fixed w-full z-50"> | |
| <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 text-indigo-600 font-bold text-2xl"> | |
| AYexpress | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Shop</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Categories</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">About</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="search"></i> | |
| </button> | |
| <button class="p-2 rounded-full text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="shopping-cart"></i> | |
| </button> | |
| <div class="relative group"> | |
| <button class="p-2 rounded-full text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="user"></i> | |
| </button> | |
| <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"> | |
| <a href="login.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Login</a> | |
| <a href="register.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Register</a> | |
| <a href="admin.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Admin Panel</a> | |
| </div> | |
| </div> | |
| <button class="md:hidden p-2 rounded-full text-gray-700 hover:bg-gray-100"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 perspective-3d"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> | |
| <div class="mb-12 lg:mb-0" data-aos="fade-right"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight"> | |
| Discover Products in <span class="text-indigo-600">3D Space</span> | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8 max-w-lg"> | |
| Experience shopping like never before with our immersive 3D marketplace. Find unique items from independent sellers worldwide. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 transform hover:scale-105"> | |
| Shop Now | |
| </button> | |
| <button class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-medium transition duration-300 transform hover:scale-105"> | |
| Explore | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative" data-aos="fade-left"> | |
| <div class="card-3d bg-white rounded-2xl p-6 shadow-xl"> | |
| <div class="aspect-w-16 aspect-h-9 rounded-xl overflow-hidden"> | |
| <img src="http://static.photos/technology/1024x576/1" alt="Featured Product" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-xl font-semibold text-gray-900">3D Interactive Product</h3> | |
| <p class="text-gray-600 mt-2">Rotate, zoom and explore products in 3D space</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-indigo-600">$249.99</span> | |
| <button class="bg-indigo-100 text-indigo-600 px-4 py-2 rounded-lg hover:bg-indigo-200 transition"> | |
| <i data-feather="eye" class="w-4 h-4 mr-2 inline"></i> View in 3D | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Shop by Categories</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Browse through our diverse range of product categories</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"> | |
| <div class="card-3d bg-white rounded-xl p-6 text-center shadow-md hover:shadow-xl transition" data-aos="flip-up"> | |
| <div class="w-20 h-20 mx-auto mb-4 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="smartphone" class="text-indigo-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-900">Electronics</h3> | |
| <p class="text-sm text-gray-500 mt-1">128 products</p> | |
| </div> | |
| <div class="card-3d bg-white rounded-xl p-6 text-center shadow-md hover:shadow-xl transition" data-aos="flip-up" data-aos-delay="100"> | |
| <div class="w-20 h-20 mx-auto mb-4 bg-pink-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="shirt" class="text-pink-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-900">Fashion</h3> | |
| <p class="text-sm text-gray-500 mt-1">312 products</p> | |
| </div> | |
| <div class="card-3d bg-white rounded-xl p-6 text-center shadow-md hover:shadow-xl transition" data-aos="flip-up" data-aos-delay="200"> | |
| <div class="w-20 h-20 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="home" class="text-green-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-900">Home</h3> | |
| <p class="text-sm text-gray-500 mt-1">89 products</p> | |
| </div> | |
| <div class="card-3d bg-white rounded-xl p-6 text-center shadow-md hover:shadow-xl transition" data-aos="flip-up" data-aos-delay="300"> | |
| <div class="w-20 h-20 mx-auto mb-4 bg-yellow-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="book-open" class="text-yellow-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-900">Books</h3> | |
| <p class="text-sm text-gray-500 mt-1">56 products</p> | |
| </div> | |
| <div class="card-3d bg-white rounded-xl p-6 text-center shadow-md hover:shadow-xl transition" data-aos="flip-up" data-aos-delay="400"> | |
| <div class="w-20 h-20 mx-auto mb-4 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="heart" class="text-purple-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="font-medium text-gray-900">Beauty</h3> | |
| <p class="text-sm text-gray-500 mt-1">74 products</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex justify-between items-center mb-12"> | |
| <div data-aos="fade-right"> | |
| <h2 class="text-3xl font-bold text-gray-900">Featured Products</h2> | |
| <p class="text-gray-600">Curated selection of premium items</p> | |
| </div> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center" data-aos="fade-left"> | |
| View all <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="card-3d bg-gray-50 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition" data-aos="zoom-in"> | |
| <div class="relative"> | |
| <img src="http://static.photos/technology/640x360/5" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="absolute top-3 right-3 bg-white rounded-full p-2 shadow"> | |
| <i data-feather="heart" class="w-4 h-4 text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Wireless Earbuds</h3> | |
| <p class="text-sm text-gray-500">Electronics</p> | |
| </div> | |
| <span class="text-indigo-600 font-bold">$89.99</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400"></i> | |
| </div> | |
| <span class="text-xs text-gray-500 ml-1">(42)</span> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i data-feather="shopping-cart" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-3d bg-gray-50 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition" data-aos="zoom-in" data-aos-delay="100"> | |
| <div class="relative"> | |
| <img src="http://static.photos/fashion/640x360/7" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="absolute top-3 right-3 bg-white rounded-full p-2 shadow"> | |
| <i data-feather="heart" class="w-4 h-4 text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Leather Wallet</h3> | |
| <p class="text-sm text-gray-500">Fashion</p> | |
| </div> | |
| <span class="text-indigo-600 font-bold">$49.99</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| </div> | |
| <span class="text-xs text-gray-500 ml-1">(128)</span> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i data-feather="shopping-cart" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-3d bg-gray-50 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition" data-aos="zoom-in" data-aos-delay="200"> | |
| <div class="relative"> | |
| <img src="http://static.photos/home/640x360/3" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="absolute top-3 right-3 bg-white rounded-full p-2 shadow"> | |
| <i data-feather="heart" class="w-4 h-4 text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Ceramic Vase</h3> | |
| <p class="text-sm text-gray-500">Home Decor</p> | |
| </div> | |
| <span class="text-indigo-600 font-bold">$34.99</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400"></i> | |
| </div> | |
| <span class="text-xs text-gray-500 ml-1">(19)</span> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i data-feather="shopping-cart" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-3d bg-gray-50 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition" data-aos="zoom-in" data-aos-delay="300"> | |
| <div class="relative"> | |
| <img src="http://static.photos/beauty/640x360/9" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="absolute top-3 right-3 bg-white rounded-full p-2 shadow"> | |
| <i data-feather="heart" class="w-4 h-4 text-gray-400 hover:text-red-500 cursor-pointer"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Organic Face Cream</h3> | |
| <p class="text-sm text-gray-500">Beauty</p> | |
| </div> | |
| <span class="text-indigo-600 font-bold">$24.99</span> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400"></i> | |
| </div> | |
| <span class="text-xs text-gray-500 ml-1">(87)</span> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i data-feather="shopping-cart" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3D Experience Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 gradient-bg"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> | |
| <div class="mb-12 lg:mb-0" data-aos="fade-right"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Immersive <span class="text-indigo-600">3D Shopping</span> Experience</h2> | |
| <p class="text-gray-600 mb-6"> | |
| Our platform brings products to life with interactive 3D models that you can rotate, zoom, and explore from every angle. | |
| </p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 bg-indigo-100 rounded-full p-2 mr-4"> | |
| <i data-feather="rotate-cw" class="text-indigo-600 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-900">360° Product View</h3> | |
| <p class="text-gray-600 text-sm">See every detail from all angles</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 bg-indigo-100 rounded-full p-2 mr-4"> | |
| <i data-feather="zoom-in" class="text-indigo-600 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-900">Zoom & Inspect</h3> | |
| <p class="text-gray-600 text-sm">Get up close with high-resolution details</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 bg-indigo-100 rounded-full p-2 mr-4"> | |
| <i data-feather="box" class="text-indigo-600 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-900">AR Preview</h3> | |
| <p class="text-gray-600 text-sm">See how products look in your space</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="relative h-96" data-aos="fade-left"> | |
| <div class="absolute inset-0 card-3d bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="h-full flex items-center justify-center"> | |
| <div class="text-center p-8"> | |
| <div class="w-32 h-32 mx-auto mb-6 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="box" class="text-indigo-600 w-16 h-16"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-900 mb-2">3D Product Viewer</h3> | |
| <p class="text-gray-600 mb-4">Experience products in a whole new dimension</p> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium"> | |
| Try Demo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Customers Say</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Hear from shoppers who love our 3D marketplace experience</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="card-3d bg-gray-50 rounded-xl p-6 shadow-sm hover:shadow-md transition" data-aos="fade-up"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/1" alt="Customer" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="ml-4"> | |
| <h4 class="font-medium text-gray-900">Sarah Johnson</h4> | |
| <div class="flex"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "The 3D product viewer is revolutionary! I could examine the craftsmanship of the handbag from every angle before purchasing." | |
| </p> | |
| </div> | |
| <div class="card-3d bg-gray-50 rounded-xl p-6 shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/2" alt="Customer" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="ml-4"> | |
| <h4 class="font-medium text-gray-900">Michael Chen</h4> | |
| <div class="flex"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "As a designer, I appreciate being able to see products in 3D. It gives me confidence in my purchases that photos alone can't provide." | |
| </p> | |
| </div> | |
| <div class="card-3d bg-gray-50 rounded-xl p-6 shadow-sm hover:shadow-md transition" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center mb-4"> | |
| <img src="http://static.photos/people/200x200/3" alt="Customer" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="ml-4"> | |
| <h4 class="font-medium text-gray-900">Emma Rodriguez</h4> | |
| <div class="flex"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "The AR feature let me see how the lamp would look in my living room before buying. No more guessing about size and style!" | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-4 sm:px-6 lg:px-8 bg-indigo-600 text-white"> | |
| <div class="max-w-4xl mx-auto text-center" data-aos="zoom-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Experience 3D Shopping?</h2> | |
| <p class="text-xl text-indigo-100 mb-8"> | |
| Join thousands of happy customers discovering products in a whole new way. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold transition duration-300 transform hover:scale-105"> | |
| Start Shopping | |
| </button> | |
| <button class="border-2 border-white text-white hover:bg-indigo-700 px-8 py-3 rounded-lg font-bold transition duration-300 transform hover:scale-105"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">NEXUS</h3> | |
| <p class="text-gray-400"> | |
| The future of ecommerce with immersive 3D shopping experiences. | |
| </p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Shop</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">All Products</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Featured</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">New Arrivals</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Best Sellers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Special Offers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Help</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Shipping</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Returns</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 AYexpress. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js globe background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x5e35b1, | |
| backgroundColor: 0xf5f7fa, | |
| size: 0.8 | |
| }); | |
| </script> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| </script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |