Spaces:
Running
Running
-
1.52 kB
initial commit
-
223 Bytes
Modify the code with the admin's WhatsApp and email and should be able to receive notification <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GlobalCart - Pre-order & Buy For Me Service (Ghana)</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> .gradient-bg { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 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:hover { color: #8b5cf6; } .animated-banner { animation: float 6s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } .countdown-item { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); } </style> </head> <body class="bg-gray-50 font-sans"> <!-- Header --> <header class="gradient-bg text-white sticky top-0 z-50 shadow-lg"> <div class="container mx-auto px-4 py-3"> <div class="flex justify-between items-center"> <div class="flex items-center space-x-2"> <i class="fas fa-globe text-2xl"></i> <h1 class="text-2xl font-bold">GlobalCart</h1> </div> <div class="hidden md:flex space-x-6 items-center"> <a href="#" class="nav-link font-medium hover:text-purple-200 transition">Home</a> <a href="#" class="nav-link font-medium hover:text-purple-200 transition">Pre-order</a> <a href="#" class="nav-link font-medium hover:text-purple-200 transition">Buy For Me</a> <a href="#" class="nav-link font-medium hover:text-purple-200 transition">How It Works</a> <a href="#" class="nav-link font-medium hover:text-purple-200 transition">Pricing</a> </div> <div class="flex items-center space-x-4"> <button class="p-2 rounded-full hover:bg-white/10 transition"> <i class="fas fa-search"></i> </button> <button class="p-2 rounded-full hover:bg-white/10 transition"> <i class="fas fa-shopping-cart"></i> <span class="absolute -mt-8 ml-4 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> </button> <button class="md:hidden p-2 rounded-full hover:bg-white/10 transition"> <i class="fas fa-bars"></i> </button> <button class="hidden md:block bg-white text-purple-600 px-4 py-2 rounded-full font-medium hover:bg-purple-100 transition"> Sign In </button> </div> </div> </div> </header> <!-- Hero Section --> <section class="gradient-bg text-white py-16 md:py-24"> <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-10 md:mb-0"> <h1 class="text-4xl md:text-5xl font-bold mb-6">Shop Globally, Pay Locally</h1> <p class="text-xl mb-8 opacity-90">We bridge the gap between you and international markets. Pre-order trending products or let us buy items for you from platforms like Alibaba and Temu.</p> <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> <button class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-purple-100 transition flex items-center justify-center"> <i class="fas fa-box-open mr-2"></i> Start Pre-order </button> <button class="bg-transparent border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white/10 transition flex items-center justify-center"> <i class="fas fa-hand-holding-usd mr-2"></i> Request Purchase </button> </div> </div> <div class="md:w-1/2 flex justify-center"> <img src="https://images.unsplash.com/photo-1556740738-b6a17129c77a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Global shopping" class="rounded-xl shadow-2xl animated-banner max-w-full h-auto md:max-w-md"> </div> </div> </section> <!-- How It Works --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-4">How GlobalCart Works</h2> <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Our simple 4-step process makes international shopping effortless</p> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div class="bg-gray-50 p-6 rounded-xl text-center"> <div class="bg-purple-100 text-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-search text-2xl"></i> </div> <h3 class="font-bold mb-2">1. Find Products</h3> <p class="text-gray-600">Browse our pre-order catalog or share links to items you want from Alibaba, Temu, etc.</p> </div> <div class="bg-gray-50 p-6 rounded-xl text-center"> <div class="bg-purple-100 text-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-calculator text-2xl"></i> </div> <h3 class="font-bold mb-2">2. Get Quote</h3> <p class="text-gray-600">We calculate total cost including product, shipping, taxes, and our service fee.</p> </div> <div class="bg-gray-50 p-6 rounded-xl text-center"> <div class="bg-purple-100 text-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-credit-card text-2xl"></i> </div> <h3 class="font-bold mb-2">3. Make Payment</h3> <p class="text-gray-600">Pay securely through our platform with multiple payment options available.</p> </div> <div class="bg-gray-50 p-6 rounded-xl text-center"> <div class="bg-purple-100 text-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-truck text-2xl"></i> </div> <h3 class="font-bold mb-2">4. Receive Items</h3> <p class="text-gray-600">We handle everything and deliver to your doorstep with tracking updates.</p> </div> </div> </div> </section> <!-- Trending Pre-orders --> <section class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <div class="flex justify-between items-center mb-8"> <h2 class="text-3xl font-bold">Trending Pre-orders</h2> <a href="#" class="text-purple-600 font-medium hover:underline">View All</a> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> <!-- Product 1 --> <div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition duration-300"> <div class="relative"> <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1399&q=80" alt="Smart Watch" class="w-full h-48 object-cover"> <div class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">30% OFF</div> </div> <div class="p-4"> <h3 class="font-bold mb-1">Smart Watch Pro X3</h3> <p class="text-gray-500 text-sm mb-2">From Alibaba - Pre-order closes in 3 days</p> <div class="flex justify-between items-center"> <div> <span class="text-lg font-bold text-purple-600">GHS 1,034.89</span> <span class="text-sm text-gray-400 line-through ml-1">GHS 1,494.89</span> </div> <button class="bg-purple-100 text-purple-600 p-2 rounded-full hover:bg-purple-200 transition"> <i class="fas fa-cart-plus"></i> </button> </div> </div> </div> <!-- Product 2 --> <div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition duration-300"> <div class="relative"> <img src="https://images.unsplash.com/photo-1546868871-7041f2d55e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="Wireless Earbuds" class="w-full h-48 object-cover"> <div class="absolute top-2 right-2 bg-yellow-500 text-white text-xs px-2 py-1 rounded">BESTSELLER</div> </div> <div class="p-4"> <h3 class="font-bold mb-1">AirBuds Pro 2023</h3> <p class="text-gray-500 text-sm mb-2">From Temu - Pre-order closes in 5 days</p> <div class="flex justify-between items-center"> <div> <span class="text-lg font-bold text-purple-600">GHS 528.89</span> <span class="text-sm text-gray-400 line-through ml-1">GHS 689.89</span> </div> <button class="bg-purple-100 text-purple-600 p-2 rounded-full hover:bg-purple-200 transition"> <i class="fas fa-cart-plus"></i> </button> </div> </div> </div> <!-- Product 3 --> <div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition duration-300"> <div class="relative"> <img src="https://images.unsplash.com/photo-1601784551446-20c9e07cdbdb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1367&q=80" alt="Portable Blender" class="w-full h-48 object-cover"> <div class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded">NEW</div> </div> <div class="p-4"> <h3 class="font-bold mb-1">Mini Portable Blender</h3> <p class="text-gray-500 text-sm mb-2">From Alibaba - Pre-order closes in 2 days</p> <div class="flex justify-between items-center"> <div> <span class="text-lg font-bold text-purple-600">GHS 373.75</span> </div> <button class="bg-purple-100 text-purple-600 p-2 rounded-full hover:bg-purple-200 transition"> <i class="fas fa-cart-plus"></i> </button> </div> </div> </div> <!-- Product 4 --> <div class="bg-white rounded-xl overflow-hidden shadow-md product-card transition duration-300"> <div class="relative"> <img src="https://images.unsplash.com/photo-1593784991095-a205069470b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="LED Ring Light" class="w-full h-48 object-cover"> </div> <div class="p-4"> <h3 class="font-bold mb-1">18" LED Ring Light</h3> <p class="text-gray-500 text-sm mb-2">From Temu - Pre-order closes in 7 days</p> <div class="flex justify-between items-center"> <div> <span class="text-lg font-bold text-purple-600">GHS 333.39</span> <span class="text-sm text-gray-400 line-through ml-1">GHS 459.89</span> </div> <button class="bg-purple-100 text-purple-600 p-2 rounded-full hover:bg-purple-200 transition"> <i class="fas fa-cart-plus"></i> </button> </div> </div> </div> </div> </div> </section> <!-- Flash Sale Countdown --> <section class="py-16 gradient-bg text-white"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl font-bold mb-2">Flash Sale Ending Soon!</h2> <p class="text-xl mb-8">Hurry! These deals won't last long</p> <div class="flex justify-center space-x-4 mb-10"> <div class="countdown-item rounded-lg p-4 w-20"> <div class="text-2xl font-bold">02</div> <div class="text-sm">Days</div> </div> <div class="countdown-item rounded-lg p-4 w-20"> <div class="text-2xl font-bold">14</div> <div class="text-sm">Hours</div> </div> <div class="countdown-item rounded-lg p-4 w-20"> <div class="text-2xl font-bold">36</div> <div class="text-sm">Minutes</div> </div> <div class="countdown-item rounded-lg p-4 w-20"> <div class="text-2xl font-bold">45</div> <div class="text-sm">Seconds</div> </div> </div> <button class="bg-white text-purple-600 px-8 py-3 rounded-full font-bold hover:bg-purple-100 transition"> Shop Flash Sale <i class="fas fa-arrow-right ml-2"></i> </button> </div> </section> <!-- Buy For Me Service --> <section class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> <h2 class="text-3xl font-bold mb-6">Can't Find What You Want?</h2> <p class="text-gray-600 mb-6">Our "Buy For Me" service lets you shop from any international website, even if we don't have it in our catalog. Just share the product link and we'll handle the rest!</p> <div class="space-y-4"> <div class="flex items-start"> <div class="bg-purple-100 text-purple-600 p-2 rounded-full mr-4"> <i class="fas fa-check"></i> </div> <div> <h4 class="font-bold mb-1">Any Website, Any Product</h4> <p class="text-gray-600">We can purchase from Alibaba, Temu, Taobao, and more.</p> </div> </div> <div class="flex items-start"> <div class="bg-purple-100 text-purple-600 p-2 rounded-full mr-4"> <i class="fas fa-check"></i> </div> <div> <h4 class="font-bold mb-1">Price Negotiation</h4> <p class="text-gray-600">Our experts will negotiate the best price for bulk orders.</p> </div> </div> <div class="flex items-start"> <div class="bg-purple-100 text-purple-600 p-2 rounded-full mr-4"> <i class="fas fa-check"></i> </div> <div> <h4 class="font-bold mb-1">Quality Assurance</h4> <p class="text-gray-600">We inspect products before shipping to ensure quality.</p> </div> </div> </div> <button class="mt-8 bg-purple-600 text-white px-6 py-3 rounded-full font-bold hover:bg-purple-700 transition"> Request Purchase Now <i class="fas fa-external-link-alt ml-2"></i> </button> </div> <div class="md:w-1/2"> <div class="bg-gray-50 p-8 rounded-xl border border-gray-200"> <h3 class="text-xl font-bold mb-6">Submit Your Purchase Request</h3> <form> <div class="mb-4"> <label class="block text-gray-700 mb-2">Product URL</label> <input type="text" placeholder="Paste product link here" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Quantity</label> <input type="number" placeholder="How many?" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">Special Instructions</label> <textarea placeholder="Color, size, or other requirements" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" rows="3"></textarea> </div> <button type="submit" class="w-full bg-purple-600 text-white py-3 rounded-lg font-bold hover:bg-purple-700 transition"> Get Quote <i class="fas fa-arrow-right ml-2"></i> </button> </form> </div> </div> </div> </div> </section> <!-- Testimonials --> <section class="py-16 bg-gray-50"> <div class="container mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-4">What Our Customers Say</h2> <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Trusted by thousands of happy shoppers worldwide</p> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white p-6 rounded-xl shadow-sm"> <div class="flex items-center mb-4"> <div class="text-yellow-400 mr-2"> <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> <span class="text-gray-500 text-sm">2 days ago</span> </div> <p class="text-gray-700 mb-4">"I was skeptical at first but GlobalCart made it so easy to order from Alibaba. The product arrived exactly as described and the whole process was seamless!"</p> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-10 h-10 rounded-full mr-3"> <div> <h4 class="font-bold">Sarah J.</h4> <p class="text-gray-500 text-sm">Los Angeles, USA</p> </div> </div> </div> <div class="bg-white p-6 rounded-xl shadow-sm"> <div class="flex items-center mb-4"> <div class="text-yellow-400 mr-2"> <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> <span class="text-gray-500 text-sm">1 week ago</span> </div> <p class="text-gray-700 mb-4">"Their buy-for-me service saved me so much time and hassle. I got a bulk order from Temu at a better price than I could negotiate myself. Will definitely use again!"</p> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-10 h-10 rounded-full mr-3"> <div> <h4 class="font-bold">Michael T.</h4> <p class="text-gray-500 text-sm">London, UK</p> </div> </div> </div> <div class="bg-white p-6 rounded-xl shadow-sm"> <div class="flex items-center mb-4"> <div class="text-yellow-400 mr-2"> <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> <span class="text-gray-500 text-sm">3 weeks ago</span> </div> <p class="text-gray-700 mb-4">"The pre-order system is brilliant. I got the latest tech gadgets before they were even available in my country. Shipping was faster than expected too."</p> <div class="flex items-center"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya K." class="w-10 h-10 rounded-full mr-3"> <div> <h4 class="font-bold">Priya K.</h4> <p class="text-gray-500 text-sm">Mumbai, India</p> </div> </div> </div> </div> </div> </section> <!-- CTA Section --> <section class="py-16 gradient-bg text-white"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl font-bold mb-6">Ready to Shop Globally?</h2> <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of happy customers who enjoy international shopping without the hassle.</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-purple-600 px-8 py-3 rounded-full font-bold hover:bg-purple-100 transition"> Start Shopping Now </button> <button class="bg-transparent border-2 border-white px-8 py-3 rounded-full font-bold hover:bg-white/10 transition"> Learn More </button> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> <div> <div class="flex items-center space-x-2 mb-4"> <i class="fas fa-globe text-2xl"></i> <h3 class="text-xl font-bold">GlobalCart</h3> </div> <p class="text-gray-400 mb-4">Your trusted partner for international shopping and pre-orders.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div> <h4 class="text-lg font-bold mb-4">Services</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition">Pre-order Catalog</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Buy For Me</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Bulk Orders</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Product Sourcing</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Shipping Calculator</a></li> </ul> </div> <div> <h4 class="text-lg font-bold mb-4">Support</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Track Order</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Returns & Refunds</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> </ul> </div> <div> <h4 class="text-lg font-bold mb-4">Stay Updated</h4> <p class="text-gray-400 mb-4">Subscribe to our newsletter for exclusive deals and updates.</p> <form class="flex"> <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full"> <button type="submit" class="bg-purple-600 px-4 py-2 rounded-r-lg hover:bg-purple-700 transition"> <i class="fas fa-paper-plane"></i> </button> </form> </div> </div> <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-400 mb-4 md:mb-0">© 2023 GlobalCart. All rights reserved.</p> <div class="flex space-x-6"> <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a> <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a> <a href="#" class="text-gray-400 hover:text-white transition">Sitemap</a> </div> </div> </div> </footer> <!-- Mobile Menu (hidden by default) --> <div class="fixed inset-0 bg-black/90 z-50 hidden" id="mobileMenu"> <div class="flex justify-end p-4"> <button id="closeMenu" class="text-white p-2"> <i class="fas fa-times text-2xl"></i> </button> </div> <div class="flex flex-col items-center justify-center h-full space-y-8"> <a href="#" class="text-white text-xl font-medium">Home</a> <a href="#" class="text-white text-xl font-medium">Pre-order</a> <a href="#" class="text-white text-xl font-medium">Buy For Me</a> <a href="#" class="text-white text-xl font-medium">How It Works</a> <a href="#" class="text-white text-xl font-medium">Pricing</a> <button class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold mt-4"> Sign In </button> </div> </div> <script> // Mobile menu toggle document.addEventListener('DOMContentLoaded', function() { const mobileMenu = document.getElementById('mobileMenu'); const menuButton = document.querySelector('.fa-bars').parentElement; const closeButton = document.getElementById('closeMenu'); menuButton.addEventListener('click', function() { mobileMenu.classList.remove('hidden'); document.body.style.overflow = 'hidden'; }); closeButton.addEventListener('click', function() { mobileMenu.classList.add('hidden'); document.body.style.overflow = ''; }); // Flash sale countdown function updateCountdown() { const countdownItems = document.querySelectorAll('.countdown-item div:first-child'); // This is just for demo - in a real app you would calculate actual time remaining countdownItems[0].textContent = '02'; // days countdownItems[1].textContent = '14'; // hours countdownItems[2].textContent = '36'; // minutes countdownItems[3].textContent = '45'; // seconds } updateCountdown(); setInterval(updateCountdown, 1000); }); </script> </body> </html> - Initial Deployment
-
33.7 kB
Admin should be able to upload products pictures, price and moq - Follow Up Deployment
-
388 Bytes
initial commit