| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DigitalStore - Sell Your Digital Products</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, #6e8efb, #a777e3); |
| } |
| .product-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| .feature-icon { |
| width: 60px; |
| height: 60px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 12px; |
| margin-bottom: 20px; |
| } |
| .testimonial-card { |
| transition: all 0.3s ease; |
| } |
| .testimonial-card:hover { |
| transform: scale(1.03); |
| } |
| .nav-link { |
| position: relative; |
| } |
| .nav-link:after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: -2px; |
| left: 0; |
| background-color: #6e8efb; |
| transition: width 0.3s ease; |
| } |
| .nav-link:hover:after { |
| width: 100%; |
| } |
| .dropdown:hover .dropdown-menu { |
| display: block; |
| } |
| .page { |
| display: none; |
| } |
| .page.active { |
| display: block; |
| } |
| .mobile-menu { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.3s ease; |
| } |
| .mobile-menu.open { |
| max-height: 500px; |
| } |
| </style> |
| </head> |
| <body class="font-sans antialiased text-gray-800"> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <a href="#" class="text-2xl font-bold text-indigo-600 flex items-center" onclick="showPage('home')"> |
| <i class="fas fa-store mr-2"></i> |
| DigitalStore |
| </a> |
| </div> |
| |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#" class="nav-link" onclick="showPage('home')">Home</a> |
| <div class="dropdown relative"> |
| <button class="nav-link flex items-center"> |
| Products <i class="fas fa-chevron-down ml-1 text-xs"></i> |
| </button> |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48"> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100" onclick="showPage('all-products')">All Products</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100" onclick="showPage('categories')">Categories</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100" onclick="showPage('new-releases')">New Releases</a> |
| </div> |
| </div> |
| <a href="#" class="nav-link" onclick="showPage('pricing')">Pricing</a> |
| <a href="#" class="nav-link" onclick="showPage('features')">Features</a> |
| <a href="#" class="nav-link" onclick="showPage('support')">Support</a> |
| </nav> |
| |
| <div class="flex items-center space-x-4"> |
| <a href="#" class="hidden md:block px-4 py-2 rounded-md hover:bg-gray-100" onclick="showPage('search')"> |
| <i class="fas fa-search"></i> |
| </a> |
| <a href="#" class="hidden md:block px-4 py-2 rounded-md hover:bg-gray-100" onclick="showPage('cart')"> |
| <i class="fas fa-shopping-cart"></i> |
| </a> |
| <a href="#" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition" onclick="showPage('signup')"> |
| Create Account |
| </a> |
| <button class="md:hidden text-gray-600" id="mobile-menu-button"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="mobile-menu md:hidden bg-white" id="mobile-menu"> |
| <div class="container mx-auto px-4 py-2"> |
| <a href="#" class="block py-2 px-4 hover:bg-gray-100 rounded" onclick="showPage('home')">Home</a> |
| <div class="py-2 px-4"> |
| <button class="flex items-center justify-between w-full hover:bg-gray-100 rounded p-2" onclick="toggleMobileSubmenu('products-submenu')"> |
| Products <i class="fas fa-chevron-down text-xs"></i> |
| </button> |
| <div class="ml-4 mt-1 hidden" id="products-submenu"> |
| <a href="#" class="block py-2 px-4 hover:bg-gray-100 rounded" onclick="showPage('all-products')">All Products</a> |
| <a href="#" class="block py-2 px-4 hover:bg-gray-100 rounded" onclick="showPage('categories')">Categories</a> |
| <a href="#" class="block py-2 px-4 hover:bg-gray-100 rounded" onclick="showPage('new-releases')">New Releases</a> |
| </div> |
| </div> |
| <a href="#" class="block py-2 px-4 hover:bg-gray-100 rounded" onclick="showPage('pricing')">Pricing</a> |
| <a href="#" class="block py-2 px-4 hover:bg-gray-100 rounded" onclick="showPage('features')">Features</a> |
| <a href="#" class="block py-2 px-4 hover:bg-gray-100 rounded" onclick="showPage('support')">Support</a> |
| <a href="#" class="block py-2 px-4 hover:bg-gray-100 rounded" onclick="showPage('search')"> |
| <i class="fas fa-search mr-2"></i> Search |
| </a> |
| <a href="#" class="block py-2 px-4 hover:bg-gray-100 rounded" onclick="showPage('cart')"> |
| <i class="fas fa-shopping-cart mr-2"></i> Cart |
| </a> |
| <a href="#" class="block py-2 px-4 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition mt-2 text-center" onclick="showPage('signup')"> |
| Create Account |
| </a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div id="home" class="page active"> |
| |
| <section class="gradient-bg text-white py-20"> |
| <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">Sell Your Digital Products With Ease</h1> |
| <p class="text-xl mb-8 opacity-90">The simplest way to sell ebooks, courses, software and other digital products online. No technical skills required.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <a href="#" class="bg-white text-indigo-600 px-8 py-4 rounded-md font-semibold text-center hover:bg-gray-100 transition" onclick="showPage('signup')"> |
| Start Selling Now |
| </a> |
| <a href="#" class="border-2 border-white px-8 py-4 rounded-md font-semibold text-center hover:bg-white hover:text-indigo-600 transition" onclick="showPage('demo')"> |
| Watch Demo |
| </a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative"> |
| <div class="w-full h-full bg-white bg-opacity-20 rounded-2xl absolute -bottom-3 -right-3"></div> |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dashboard" class="relative rounded-2xl shadow-2xl"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-gray-50 py-12"> |
| <div class="container mx-auto px-4"> |
| <p class="text-center text-gray-500 mb-8">Trusted by thousands of creators worldwide</p> |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> |
| <img src="https://via.placeholder.com/120x40?text=Company+1" alt="Company 1" class="h-8 opacity-60 hover:opacity-100 transition"> |
| <img src="https://via.placeholder.com/120x40?text=Company+2" alt="Company 2" class="h-8 opacity-60 hover:opacity-100 transition"> |
| <img src="https://via.placeholder.com/120x40?text=Company+3" alt="Company 3" class="h-8 opacity-60 hover:opacity-100 transition"> |
| <img src="https://via.placeholder.com/120x40?text=Company+4" alt="Company 4" class="h-8 opacity-60 hover:opacity-100 transition"> |
| <img src="https://via.placeholder.com/120x40?text=Company+5" alt="Company 5" class="h-8 opacity-60 hover:opacity-100 transition"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">Everything You Need To Sell Online</h2> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Our platform provides all the tools you need to start, run and grow your digital product business.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| <div class="feature-icon bg-indigo-100 text-indigo-600"> |
| <i class="fas fa-globe text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Beautiful Storefront</h3> |
| <p class="text-gray-600">Create a professional storefront that showcases your products beautifully and converts visitors to customers.</p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| <div class="feature-icon bg-purple-100 text-purple-600"> |
| <i class="fas fa-lock text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Secure Delivery</h3> |
| <p class="text-gray-600">Automatically deliver your digital products securely after payment with download links and license keys.</p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| <div class="feature-icon bg-blue-100 text-blue-600"> |
| <i class="fas fa-chart-line text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Powerful Analytics</h3> |
| <p class="text-gray-600">Get detailed insights about your sales, customers and products to help you make data-driven decisions.</p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| <div class="feature-icon bg-green-100 text-green-600"> |
| <i class="fas fa-money-bill-wave text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Multiple Payment Options</h3> |
| <p class="text-gray-600">Accept payments via credit cards, PayPal, bank transfers and mobile money from customers worldwide.</p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| <div class="feature-icon bg-yellow-100 text-yellow-600"> |
| <i class="fas fa-tags text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Discounts & Coupons</h3> |
| <p class="text-gray-600">Create special offers, discounts and coupon codes to boost your sales and attract more customers.</p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> |
| <div class="feature-icon bg-red-100 text-red-600"> |
| <i class="fas fa-headset text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">24/7 Support</h3> |
| <p class="text-gray-600">Our support team is available round the clock to help you with any issues or questions you might have.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold mb-4">How It Works</h2> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Get started in just a few minutes and start selling your digital products right away.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="text-center"> |
| <div class="bg-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-md"> |
| <span class="text-2xl font-bold text-indigo-600">1</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Create Your Account</h3> |
| <p class="text-gray-600">Sign up for free in less than a minute. No credit card required.</p> |
| </div> |
| |
| <div class="text-center"> |
| <div class="bg-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-md"> |
| <span class="text-2xl font-bold text-indigo-600">2</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Add Your Products</h3> |
| <p class="text-gray-600">Upload your digital files, set prices and customize your store.</p> |
| </div> |
| |
| <div class="text-center"> |
| <div class="bg-white w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-md"> |
| <span class="text-2xl font-bold text-indigo-600">3</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Start Selling</h3> |
| <p class="text-gray-600">Share your store link and start making sales immediately.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20"> |
| <div class="container mx-auto px-4"> |
| <div class="flex justify-between items-center mb-10"> |
| <h2 class="text-3xl font-bold">Popular Products</h2> |
| <a href="#" class="text-indigo-600 font-semibold hover:underline" onclick="showPage('all-products')">View All Products</a> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="bg-white rounded-xl overflow-hidden shadow-sm product-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Product" class="w-full h-48 object-cover"> |
| <div class="absolute top-3 right-3 bg-yellow-100 text-yellow-800 text-xs font-semibold px-2 py-1 rounded"> |
| Bestseller |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Digital Marketing Masterclass</h3> |
| <p class="text-gray-600 text-sm mb-3">Learn digital marketing strategies from industry experts</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-indigo-600">$49.99</span> |
| <div class="flex items-center text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <span class="text-gray-600 text-sm ml-1">4.9 (128)</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl overflow-hidden shadow-sm product-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1415&q=80" alt="Product" class="w-full h-48 object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">SEO Optimization Guide</h3> |
| <p class="text-gray-600 text-sm mb-3">The complete guide to ranking your website in 2023</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-indigo-600">$29.99</span> |
| <div class="flex items-center text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <span class="text-gray-600 text-sm ml-1">4.7 (89)</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl overflow-hidden shadow-sm product-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Product" class="w-full h-48 object-cover"> |
| <div class="absolute top-3 right-3 bg-green-100 text-green-800 text-xs font-semibold px-2 py-1 rounded"> |
| New |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">Python Programming Course</h3> |
| <p class="text-gray-600 text-sm mb-3">From beginner to advanced Python programming</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-indigo-600">$59.99</span> |
| <div class="flex items-center text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <span class="text-gray-600 text-sm ml-1">4.8 (156)</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl overflow-hidden shadow-sm product-card transition duration-300"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Product" class="w-full h-48 object-cover"> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-semibold text-lg mb-1">UI/UX Design Handbook</h3> |
| <p class="text-gray-600 text-sm mb-3">Master the principles of modern UI/UX design</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-indigo-600">$39.99</span> |
| <div class="flex items-center text-yellow-400"> |
| <i class="fas |
| </html> |
