Spaces:
Running
Running
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PasarSehat - Marketplace Alat Rumah Tangga & Kesehatan</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .category-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .product-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .search-bar:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px #3b82f6; | |
| } | |
| .nav-item:hover { | |
| color: #3b82f6; | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header/Navbar --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center"> | |
| <i class="fas fa-store-alt text-blue-500 text-2xl mr-2"></i> | |
| <h1 class="text-xl font-bold text-blue-600">Pasar<span class="text-green-500">Sehat</span></h1> | |
| </div> | |
| <!-- Search Bar (hidden on mobile) --> | |
| <div class="hidden md:flex flex-1 mx-6"> | |
| <div class="relative w-full max-w-xl"> | |
| <input type="text" placeholder="Cari alat masak, kesehatan, karpet..." | |
| class="w-full py-2 px-4 border border-gray-300 rounded-full focus:border-blue-500 search-bar"> | |
| <button class="absolute right-0 top-0 h-full px-4 text-gray-600"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Navigation Icons --> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="text-gray-700 hover:text-blue-500"> | |
| <i class="fas fa-heart text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-blue-500"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-blue-500"> | |
| <i class="fas fa-user text-xl"></i> | |
| </a> | |
| <!-- Mobile Menu Button --> | |
| <button class="md:hidden text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Search Bar --> | |
| <div class="md:hidden px-4 pb-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Cari produk..." | |
| class="w-full py-2 px-4 border border-gray-300 rounded-full focus:border-blue-500 search-bar"> | |
| <button class="absolute right-0 top-0 h-full px-4 text-gray-600"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Categories Navigation --> | |
| <nav class="hidden md:block bg-blue-600 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <ul class="flex space-x-6 py-3 overflow-x-auto"> | |
| <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Alat Masak</a></li> | |
| <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Alat Kesehatan</a></li> | |
| <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Karpet</a></li> | |
| <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Regulator</a></li> | |
| <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Alat Pijat</a></li> | |
| <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Promo</a></li> | |
| <li><a href="#" class="nav-item hover:bg-blue-700 px-3 py-1 rounded transition">Baru</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero text-white py-16 md:py-24"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Temukan Kebutuhan Rumah & Kesehatan Terbaik</h2> | |
| <p class="text-lg md:text-xl mb-8 max-w-2xl mx-auto">Alat masak berkualitas, peralatan kesehatan lengkap, karpet nyaman, dan alat pijat profesional dengan harga terjangkau.</p> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> | |
| Belanja Sekarang | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section class="py-8 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h3 class="text-2xl font-bold mb-6 text-gray-800">Kategori Produk</h3> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4"> | |
| <!-- Category 1 --> | |
| <div class="bg-white rounded-lg shadow-md p-4 text-center category-card transition duration-300"> | |
| <div class="bg-blue-50 rounded-full p-4 w-20 h-20 flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-utensils text-blue-500 text-3xl"></i> | |
| </div> | |
| <h4 class="font-semibold text-gray-800">Alat Masak</h4> | |
| </div> | |
| <!-- Category 2 --> | |
| <div class="bg-white rounded-lg shadow-md p-4 text-center category-card transition duration-300"> | |
| <div class="bg-green-50 rounded-full p-4 w-20 h-20 flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-heartbeat text-green-500 text-3xl"></i> | |
| </div> | |
| <h4 class="font-semibold text-gray-800">Alat Kesehatan</h4> | |
| </div> | |
| <!-- Category 3 --> | |
| <div class="bg-white rounded-lg shadow-md p-4 text-center category-card transition duration-300"> | |
| <div class="bg-yellow-50 rounded-full p-4 w-20 h-20 flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-rug text-yellow-500 text-3xl"></i> | |
| </div> | |
| <h4 class="font-semibold text-gray-800">Karpet</h4> | |
| </div> | |
| <!-- Category 4 --> | |
| <div class="bg-white rounded-lg shadow-md p-4 text-center category-card transition duration-300"> | |
| <div class="bg-red-50 rounded-full p-4 w-20 h-20 flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-tachometer-alt text-red-500 text-3xl"></i> | |
| </div> | |
| <h4 class="font-semibold text-gray-800">Regulator</h4> | |
| </div> | |
| <!-- Category 5 --> | |
| <div class="bg-white rounded-lg shadow-md p-4 text-center category-card transition duration-300"> | |
| <div class="bg-purple-50 rounded-full p-4 w-20 h-20 flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-spa text-purple-500 text-3xl"></i> | |
| </div> | |
| <h4 class="font-semibold text-gray-800">Alat Pijat</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Products --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h3 class="text-2xl font-bold text-gray-800">Produk Unggulan</h3> | |
| <a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Lihat Semua <i class="fas fa-chevron-right ml-1"></i></a> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1588514899099-e2d691b0bf24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| alt="Panci Masak" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">HOT</span> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-semibold text-gray-800 mb-1 truncate">Panci Masak Stainless Steel 5L</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <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-xs ml-1">(128)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-600">Rp 289.000</span> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-cart-plus text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| alt="Tensimeter Digital" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-semibold text-gray-800 mb-1 truncate">Tensimeter Digital Omron</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <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="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(95)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-600">Rp 650.000</span> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-cart-plus text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1556905055-c5f6a89d4b14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| alt="Karpet Bulu" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-semibold text-gray-800 mb-1 truncate">Karpet Bulu Premium 120x180</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <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-xs ml-1">(210)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-600">Rp 399.000</span> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-cart-plus text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1584308666744-5b68b0d0ac39?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| alt="Regulator Oksigen" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-semibold text-gray-800 mb-1 truncate">Regulator Oksigen Medis</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <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-xs ml-1">(76)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-600">Rp 850.000</span> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-cart-plus text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 5 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1591348278863-a8fb3887e2aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| alt="Alat Pijat Elektrik" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-orange-500 text-white text-xs font-bold px-2 py-1 rounded-full">SALE</span> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-semibold text-gray-800 mb-1 truncate">Alat Pijat Elektrik Shiatsu</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <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="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(182)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="font-bold text-blue-600">Rp 1.250.000</span> | |
| <span class="text-xs text-gray-500 line-through ml-1">Rp 1.499.000</span> | |
| </div> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-cart-plus text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Special Offers --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h3 class="text-2xl font-bold text-gray-800">Penawaran Spesial</h3> | |
| <a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Lihat Semua <i class="fas fa-chevron-right ml-1"></i></a> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Offer 1 --> | |
| <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 p-6 flex flex-col justify-center"> | |
| <span class="text-white bg-blue-700 px-3 py-1 rounded-full text-sm font-bold inline-block mb-3">DISKON 30%</span> | |
| <h3 class="text-2xl font-bold text-white mb-3">Alat Masak Premium</h3> | |
| <p class="text-blue-100 mb-4">Dapatkan diskon hingga 30% untuk semua produk alat masak stainless steel.</p> | |
| <a href="#" class="text-white font-semibold hover:underline">Beli Sekarang <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1603105037880-880cd4edfb0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| alt="Alat Masak" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Offer 2 --> | |
| <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-lg overflow-hidden shadow-lg"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 p-6 flex flex-col justify-center"> | |
| <span class="text-white bg-green-700 px-3 py-1 rounded-full text-sm font-bold inline-block mb-3">GRATIS ONGKIR</span> | |
| <h3 class="text-2xl font-bold text-white mb-3">Alat Kesehatan</h3> | |
| <p class="text-green-100 mb-4">Gratis ongkir ke seluruh Indonesia untuk pembelian alat kesehatan di atas Rp 500.000.</p> | |
| <a href="#" class="text-white font-semibold hover:underline">Beli Sekarang <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| alt="Alat Kesehatan" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- New Arrivals --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h3 class="text-2xl font-bold text-gray-800">Produk Baru</h3> | |
| <a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Lihat Semua <i class="fas fa-chevron-right ml-1"></i></a> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> | |
| <!-- Product 6 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1592078615290-033ee584e267?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| alt="Blender Multifungsi" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-semibold text-gray-800 mb-1 truncate">Blender Multifungsi 5in1</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <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="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(42)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-600">Rp 550.000</span> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-cart-plus text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 7 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| alt="Nebulizer" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-semibold text-gray-800 mb-1 truncate">Nebulizer Ultrasonic</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <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-xs ml-1">(67)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-600">Rp 725.000</span> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-cart-plus text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 8 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1579656592043-9f85243a3a0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| alt="Karpet Motif" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-semibold text-gray-800 mb-1 truncate">Karpet Motif Persia 160x230</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <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="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(38)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-600">Rp 1.199.000</span> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-cart-plus text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 9 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1631729371254-43d3db0fb1b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| alt="Regulator Gas" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 right-2 bg-yellow-500 text-white text-xs font-bold px-2 py-1 rounded-full">BEST</span> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-semibold text-gray-800 mb-1 truncate">Regulator Gas Medis</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <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-xs ml-1">(124)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-blue-600">Rp 1.050.000</span> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-cart-plus text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 10 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md product-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1544161515-4ab6ce6db874?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| alt="Pijat Refleksi" class="w-full h-48 object-cover"> | |
| </div> | |
| <div class="p-4"> | |
| <h4 class="font-semibold text-gray-800 mb-1 truncate">Alat Pijat Refleksi Kaki</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <span class="text-gray-500 text-xs ml-1">(89)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="font-bold text-blue-600">Rp 899.000</span> | |
| <span class="text-xs text-gray-500 line-through ml-1">Rp 1.100.000</span> | |
| </div> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-cart-plus text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h3 class="text-2xl font-bold text-center mb-12 text-gray-800">Apa Kata Pelanggan Kami</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 rounded-lg p-6 shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Customer" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold text-gray-800">Dewi Anggraeni</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <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> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Alat masak yang saya beli sangat berkualitas, pengiriman cepat dan packing rapi. Terima kasih PasarSehat!"</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 rounded-lg p-6 shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Customer" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold text-gray-800">Budi Santoso</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <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> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Tensimeter digital yang saya beli untuk orang tua sangat akurat dan mudah digunakan. Pelayanan CS juga ramah."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 rounded-lg p-6 shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold text-gray-800">Siti Rahayu</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <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> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Karpet yang saya beli sangat nyaman dan lembut. Anak-anak suka bermain di atasnya. Pengiriman tepat waktu!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 bg-blue-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h3 class="text-2xl font-bold mb-4">Dapatkan Promo & Penawaran Spesial</h3> | |
| <p class="mb-6 max-w-2xl mx-auto text-blue-100">Berlangganan newsletter kami untuk mendapatkan informasi produk baru, diskon, dan tips kesehatan langsung ke email Anda.</p> | |
| <div class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Masukkan email Anda" | |
| class="flex-1 py-3 px-4 rounded-l-full focus:outline-none text-gray-800"> | |
| <button class="bg-blue-800 hover:bg-blue-900 py-3 px-6 rounded-r-full font-semibold transition"> | |
| Berlangganan | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <!-- About --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Tentang PasarSehat</h4> | |
| <p class="text-gray-400 mb-4">PasarSehat adalah marketplace terpercaya untuk alat rumah tangga, kesehatan, dan kebutuhan sehari-hari dengan kualitas terbaik.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <!-- Quick Links --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Tautan Cepat</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Beranda</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Produk</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Promo</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Tentang Kami</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Kontak</a></li> | |
| </ul> | |
| </div> | |
| <!-- Categories --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Kategori</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Alat Masak</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Alat Kesehatan</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Karpet</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Regulator</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Alat Pijat</a></li> | |
| </ul> | |
| </div> | |
| <!-- Contact --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Hubungi Kami</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-500"></i> | |
| <span>Jl. Kesehatan No. 123, Jakarta Selatan, Indonesia</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-3 text-blue-500"></i> | |
| <span>021-12345678</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3 text-blue-500"></i> | |
| <span>[email protected]</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 PasarSehat. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white">Kebijakan Privasi</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Syarat & Ketentuan</a> | |
| <a href="#" class="text-gray-400 hover:text-white">FAQ</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating WhatsApp Button --> | |
| <div class="fixed bottom-6 right-6 z-50"> | |
| <a href="https://wa.me/6281234567890" target="_blank" class="bg-green-500 hover:bg-green-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg transition-transform transform hover:scale-110"> | |
| <i class="fab fa-whatsapp text-2xl"></i> | |
| </a> | |
| </div> | |
| <script> | |
| // Simple JavaScript for mobile menu toggle (can be expanded) | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.querySelector('button.md\\:hidden'); | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| if(mobileMenuButton) { | |
| mobileMenuButton.addEventListener('click', function() { | |
| if(mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.remove('hidden'); | |
| } else { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| } | |
| // Random product rating generator for demo purposes | |
| const ratings = document.querySelectorAll('.flex.text-yellow-400'); | |
| ratings.forEach(rating => { | |
| const stars = rating.querySelectorAll('i'); | |
| const randomRating = Math.random() * 5; | |
| stars.forEach((star, index) => { | |
| if(index < Math.floor(randomRating)) { | |
| star.classList.add('fas', 'fa-star'); | |
| star.classList.remove('far', 'fa-star', 'fa-star-half-alt'); | |
| } else if(index === Math.floor(randomRating) && randomRating % 1 >= 0.5) { | |
| star.classList.add('fas', 'fa-star-half-alt'); | |
| star.classList.remove('far', 'fa-star'); | |
| } else { | |
| star.classList.add('far', 'fa-star'); | |
| star.classList.remove('fas', 'fa-star-half-alt'); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=taufikai/marketplace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |