Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ViralThreads | Trendy Clothing & Items</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/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); | |
| color: #fff; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #ff8a00, #e52e71, #00c3ff); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .trending-badge { | |
| background: linear-gradient(45deg, #ff416c, #ff4b2b); | |
| } | |
| .hero-bg { | |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://static.photos/black/1200x630/1'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .category-card { | |
| transition: all 0.3s ease; | |
| } | |
| .category-card:hover { | |
| transform: scale(1.05); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-black bg-opacity-70 backdrop-blur-md fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="zap" class="text-pink-500 mr-2"></i> | |
| <span class="font-bold text-xl gradient-text">ViralThreads</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home</a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Shop</a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Categories</a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">New Arrivals</a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Deals</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <i data-feather="search" class="h-5 w-5"></i> | |
| </button> | |
| <button class="ml-3 bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <i data-feather="heart" class="h-5 w-5"></i> | |
| </button> | |
| <button class="ml-3 bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none relative"> | |
| <i data-feather="shopping-cart" class="h-5 w-5"></i> | |
| <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-pink-500 rounded-full">3</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> | |
| <i data-feather="menu" class="h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="hero-bg h-screen flex items-center"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight"> | |
| <span class="block">TRENDSETTER</span> | |
| <span class="block gradient-text mt-2">CLOTHING & ACCESSORIES</span> | |
| </h1> | |
| <p class="mt-6 max-w-lg mx-auto text-xl text-gray-300">Discover the latest viral fashion trends that everyone is talking about. Stand out from the crowd with our exclusive collection.</p> | |
| <div class="mt-10 flex justify-center"> | |
| <div class="rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-black bg-gradient-to-r from-yellow-400 to-pink-500 hover:from-yellow-500 hover:to-pink-600 md:py-4 md:text-lg md:px-10"> | |
| Shop Now | |
| </a> | |
| </div> | |
| <div class="ml-3 rounded-md shadow"> | |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-800 hover:bg-gray-700 md:py-4 md:text-lg md:px-10"> | |
| View Collection | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trending Products --> | |
| <div class="py-12 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-base text-pink-500 font-semibold tracking-wide uppercase">Trending Now</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Viral Collection | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> | |
| The most sought-after items that are taking social media by storm | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"> | |
| <!-- Product 1 --> | |
| <div class="group product-card bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300" data-aos="fade-up"> | |
| <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-t-xl overflow-hidden xl:aspect-w-7 xl:aspect-h-8"> | |
| <img src="http://static.photos/red/640x360/1" alt="Red Hoodie" class="w-full h-64 object-cover object-center group-hover:opacity-90"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold text-white">Viral Hoodie</h3> | |
| <p class="mt-1 text-sm text-gray-400">Premium Cotton</p> | |
| </div> | |
| <span class="trending-badge text-white text-xs font-bold px-2 py-1 rounded-full">TRENDING</span> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <p class="text-xl font-bold text-white">$59.99</p> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <span class="ml-1 text-gray-300">4.8</span> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white py-2 px-4 rounded-lg transition duration-300"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="group product-card bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-t-xl overflow-hidden xl:aspect-w-7 xl:aspect-h-8"> | |
| <img src="http://static.photos/black/640x360/2" alt="Black T-Shirt" class="w-full h-64 object-cover object-center group-hover:opacity-90"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold text-white">Graphic Tee</h3> | |
| <p class="mt-1 text-sm text-gray-400">Limited Edition</p> | |
| </div> | |
| <span class="trending-badge text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <p class="text-xl font-bold text-white">$34.99</p> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <span class="ml-1 text-gray-300">4.9</span> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white py-2 px-4 rounded-lg transition duration-300"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="group product-card bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-t-xl overflow-hidden xl:aspect-w-7 xl:aspect-h-8"> | |
| <img src="http://static.photos/blue/640x360/3" alt="Blue Jacket" class="w-full h-64 object-cover object-center group-hover:opacity-90"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold text-white">Denim Jacket</h3> | |
| <p class="mt-1 text-sm text-gray-400">Classic Style</p> | |
| </div> | |
| <span class="trending-badge text-white text-xs font-bold px-2 py-1 rounded-full">BEST SELLER</span> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <p class="text-xl font-bold text-white">$79.99</p> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <span class="ml-1 text-gray-300">4.7</span> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white py-2 px-4 rounded-lg transition duration-300"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="group product-card bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-t-xl overflow-hidden xl:aspect-w-7 xl:aspect-h-8"> | |
| <img src="http://static.photos/yellow/640x360/4" alt="Yellow Sweater" class="w-full h-64 object-cover object-center group-hover:opacity-90"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-bold text-white">Oversized Sweater</h3> | |
| <p class="mt-1 text-sm text-gray-400">Cozy Fit</p> | |
| </div> | |
| <span class="trending-badge text-white text-xs font-bold px-2 py-1 rounded-full">HOT</span> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <p class="text-xl font-bold text-white">$49.99</p> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <span class="ml-1 text-gray-300">4.6</span> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white py-2 px-4 rounded-lg transition duration-300"> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Categories Section --> | |
| <div class="py-12 bg-black"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-base text-pink-500 font-semibold tracking-wide uppercase">Shop by Category</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| Explore Our Collections | |
| </p> | |
| </div> | |
| <div class="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6"> | |
| <!-- Category 1 --> | |
| <div class="category-card bg-gradient-to-br from-purple-900 to-pink-700 rounded-xl p-6 text-center shadow-xl" data-aos="zoom-in"> | |
| <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-white bg-opacity-20"> | |
| <i data-feather="t-shirt" class="h-8 w-8 text-white"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-bold text-white">T-Shirts</h3> | |
| <p class="mt-1 text-sm text-gray-300">24 items</p> | |
| </div> | |
| <!-- Category 2 --> | |
| <div class="category-card bg-gradient-to-br from-blue-900 to-cyan-700 rounded-xl p-6 text-center shadow-xl" data-aos="zoom-in" data-aos-delay="100"> | |
| <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-white bg-opacity-20"> | |
| <i data-feather="shirt" class="h-8 w-8 text-white"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-bold text-white">Shirts</h3> | |
| <p class="mt-1 text-sm text-gray-300">18 items</p> | |
| </div> | |
| <!-- Category 3 --> | |
| <div class="category-card bg-gradient-to-br from-green-900 to-teal-700 rounded-xl p-6 text-center shadow-xl" data-aos="zoom-in" data-aos-delay="200"> | |
| <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-white bg-opacity-20"> | |
| <i data-feather="shopping-bag" class="h-8 w-8 text-white"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-bold text-white">Accessories</h3> | |
| <p class="mt-1 text-sm text-gray-300">32 items</p> | |
| </div> | |
| <!-- Category 4 --> | |
| <div class="category-card bg-gradient-to-br from-yellow-900 to-orange-700 rounded-xl p-6 text-center shadow-xl" data-aos="zoom-in" data-aos-delay="300"> | |
| <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-white bg-opacity-20"> | |
| <i data-feather="briefcase" class="h-8 w-8 text-white"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-bold text-white">Outerwear</h3> | |
| <p class="mt-1 text-sm text-gray-300">15 items</p> | |
| </div> | |
| <!-- Category 5 --> | |
| <div class="category-card bg-gradient-to-br from-red-900 to-pink-700 rounded-xl p-6 text-center shadow-xl" data-aos="zoom-in" data-aos-delay="400"> | |
| <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-white bg-opacity-20"> | |
| <i data-feather="droplet" class="h-8 w-8 text-white"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-bold text-white">Activewear</h3> | |
| <p class="mt-1 text-sm text-gray-300">27 items</p> | |
| </div> | |
| <!-- Category 6 --> | |
| <div class="category-card bg-gradient-to-br from-indigo-900 to-purple-700 rounded-xl p-6 text-center shadow-xl" data-aos="zoom-in" data-aos-delay="500"> | |
| <div class="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-white bg-opacity-20"> | |
| <i data-feather="gift" class="h-8 w-8 text-white"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-bold text-white">Specials</h3> | |
| <p class="mt-1 text-sm text-gray-300">9 items</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="py-12 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-base text-pink-500 font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> | |
| What Our Customers Say | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-8 md:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg" data-aos="fade-right"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/320x240/1" alt="Customer"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-white">Alex Johnson</h4> | |
| <div class="flex items-center mt-1"> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-300">"The quality of these clothes is exceptional! I've received so many compliments on my viral hoodie. Worth every penny!"</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg" data-aos="fade-up"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/320x240/2" alt="Customer"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-white">Sarah Williams</h4> | |
| <div class="flex items-center mt-1"> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-300">"Fast shipping and the clothes look exactly like the photos. My new favorite online store for trendy fashion!"</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg" data-aos="fade-left"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="http://static.photos/people/320x240/3" alt="Customer"> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-bold text-white">Michael Chen</h4> | |
| <div class="flex items-center mt-1"> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| <i data-feather="star" class="text-yellow-400 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-300">"The oversized sweater is so comfortable and stylish. I've already recommended this brand to all my friends!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-gradient-to-r from-purple-900 to-pink-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> | |
| <span class="block">Ready to upgrade your wardrobe?</span> | |
| <span class="block text-pink-300">Join thousands of satisfied customers today.</span> | |
| </h2> | |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-900 bg-white hover:bg-pink-50"> | |
| Shop Now | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-pink-600 bg-opacity-60 hover:bg-opacity-70"> | |
| Learn more | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-black"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Products</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Clothing</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Accessories</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">New Arrivals</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Best Sellers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Refunds</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Shipping</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Instagram</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">TikTok</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-base text-gray-400">© 2023 ViralThreads. All rights reserved.</p> | |
| <div class="mt-6 flex space-x-6 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <i data-feather="twitch"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script>AOS.init();</script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |