Hugging Face's logo

Spaces:
marrrrrr
/
website
Running

App Files Community
website / index.html
marrrrrr's picture
marrrrrr
Add 3 files
7d9a53d verified
Raw
History Blame Contribute Delete
43.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>FreshEggs - Telur Segar Berkualitas</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>
 .hero-pattern {
 background-image: url('https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3');
 background-size: cover;
 background-position: center;
 }
.egg-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
.cart-item {
 transition: all 0.3s ease;
 }
.cart-item:hover {
 background-color: #f8fafc;
 }
@keyframes bounce {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
 }
.bounce {
 animation: bounce 2s infinite;
 }
 </style>
</head>
<body class="bg-gray-50 font-sans">
 <!-- Header/Navbar -->
 <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 space-x-2">
 <i class="fas fa-egg text-yellow-500 text-2xl"></i>
 <h1 class="text-xl font-bold text-gray-800">Fresh<span class="text-yellow-500">Eggs</span></h1>
 </div>
<nav class="hidden md:flex space-x-8">
 <a href="#home" class="text-gray-800 hover:text-yellow-500 font-medium">Beranda</a>
 <a href="#products" class="text-gray-800 hover:text-yellow-500 font-medium">Produk</a>
 <a href="#about" class="text-gray-800 hover:text-yellow-500 font-medium">Tentang Kami</a>
 <a href="#testimonials" class="text-gray-800 hover:text-yellow-500 font-medium">Testimoni</a>
 <a href="#contact" class="text-gray-800 hover:text-yellow-500 font-medium">Kontak</a>
 </nav>
<div class="flex items-center space-x-4">
 <button id="cart-btn" class="relative">
 <i class="fas fa-shopping-cart text-gray-700 text-xl"></i>
 <span id="cart-count" class="absolute -top-2 -right-2 bg-yellow-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
 </button>
 <button class="md:hidden" id="mobile-menu-btn">
 <i class="fas fa-bars text-gray-700 text-xl"></i>
 </button>
 </div>
 </div>
<!-- Mobile Menu -->
 <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
 <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
 <a href="#home" class="text-gray-800 hover:text-yellow-500 font-medium py-2">Beranda</a>
 <a href="#products" class="text-gray-800 hover:text-yellow-500 font-medium py-2">Produk</a>
 <a href="#about" class="text-gray-800 hover:text-yellow-500 font-medium py-2">Tentang Kami</a>
 <a href="#testimonials" class="text-gray-800 hover:text-yellow-500 font-medium py-2">Testimoni</a>
 <a href="#contact" class="text-gray-800 hover:text-yellow-500 font-medium py-2">Kontak</a>
 </div>
 </div>
 </header>
<!-- Hero Section -->
 <section id="home" class="hero-pattern bg-gray-900 bg-opacity-70 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">
 <h2 class="text-4xl md:text-5xl font-bold mb-4">Telur Segar <span class="text-yellow-400">Setiap Hari</span></h2>
 <p class="text-lg mb-6">Dapatkan telur ayam berkualitas tinggi langsung dari peternak terpercaya. Segar, bergizi, dan harga terjangkau.</p>
 <div class="flex space-x-4">
 <a href="#products" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Beli Sekarang</a>
 <a href="#about" class="border-2 border-white hover:bg-white hover:text-gray-900 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Tentang Kami</a>
 </div>
 </div>
 <div class="md:w-1/2 flex justify-center">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3" alt="Fresh Eggs" class="rounded-full h-64 w-64 object-cover border-4 border-yellow-400 shadow-xl bounce">
 <div class="absolute -bottom-5 -right-5 bg-white text-gray-800 py-2 px-4 rounded-lg shadow-md">
 <p class="font-bold">100% Alami</p>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Features Section -->
 <section class="bg-white py-12">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="flex flex-col items-center text-center p-6 rounded-lg bg-gray-50 hover:bg-yellow-50 transition duration-300">
 <div class="bg-yellow-100 p-4 rounded-full mb-4">
 <i class="fas fa-leaf text-yellow-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Organik & Alami</h3>
 <p class="text-gray-600">Telur dari ayam yang dipelihara secara alami tanpa bahan kimia berbahaya.</p>
 </div>
 <div class="flex flex-col items-center text-center p-6 rounded-lg bg-gray-50 hover:bg-yellow-50 transition duration-300">
 <div class="bg-yellow-100 p-4 rounded-full mb-4">
 <i class="fas fa-truck text-yellow-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Pengiriman Cepat</h3>
 <p class="text-gray-600">Pesanan Anda akan dikirim dalam waktu 24 jam setelah pembelian.</p>
 </div>
 <div class="flex flex-col items-center text-center p-6 rounded-lg bg-gray-50 hover:bg-yellow-50 transition duration-300">
 <div class="bg-yellow-100 p-4 rounded-full mb-4">
 <i class="fas fa-medal text-yellow-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-2">Kualitas Terbaik</h3>
 <p class="text-gray-600">Setiap telur melalui proses seleksi ketat untuk memastikan kualitas terbaik.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Products Section -->
 <section id="products" class="py-16 bg-gray-50">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold text-gray-800 mb-2">Produk Kami</h2>
 <p class="text-gray-600 max-w-2xl mx-auto">Pilih dari berbagai jenis telur segar berkualitas tinggi yang kami tawarkan</p>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Product 1 -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden egg-card transition duration-300">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3" alt="Telur Ayam Kampung" class="w-full h-48 object-cover">
 <div class="absolute top-2 right-2 bg-yellow-500 text-white text-xs font-bold px-2 py-1 rounded">BEST SELLER</div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold text-gray-800 mb-2">Telur Ayam Kampung</h3>
 <p class="text-gray-600 mb-4">Telur dari ayam kampung yang dipelihara secara alami, kaya nutrisi dan rendah kolesterol.</p>
 <div class="flex justify-between items-center">
 <span class="text-2xl font-bold text-gray-800">Rp 35.000</span>
 <span class="text-sm text-gray-500">/ 10 butir</span>
 </div>
 <div class="mt-4 flex items-center">
 <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-l" onclick="updateQuantity('kampung', -1)">
 <i class="fas fa-minus"></i>
 </button>
 <span id="kampung-qty" class="bg-gray-100 py-2 px-4">0</span>
 <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-r" onclick="updateQuantity('kampung', 1)">
 <i class="fas fa-plus"></i>
 </button>
 <button onclick="addToCart('kampung', 'Telur Ayam Kampung', 35000, 'kampung-qty')" class="ml-auto bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">
 <i class="fas fa-cart-plus mr-2"></i> Tambah
 </button>
 </div>
 </div>
 </div>
<!-- Product 2 -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden egg-card transition duration-300">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3" alt="Telur Ayam Negeri" class="w-full h-48 object-cover">
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold text-gray-800 mb-2">Telur Ayam Negeri</h3>
 <p class="text-gray-600 mb-4">Telur ayam negeri segar dengan ukuran besar dan harga ekonomis untuk kebutuhan sehari-hari.</p>
 <div class="flex justify-between items-center">
 <span class="text-2xl font-bold text-gray-800">Rp 28.000</span>
 <span class="text-sm text-gray-500">/ 10 butir</span>
 </div>
 <div class="mt-4 flex items-center">
 <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-l" onclick="updateQuantity('negeri', -1)">
 <i class="fas fa-minus"></i>
 </button>
 <span id="negeri-qty" class="bg-gray-100 py-2 px-4">0</span>
 <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-r" onclick="updateQuantity('negeri', 1)">
 <i class="fas fa-plus"></i>
 </button>
 <button onclick="addToCart('negeri', 'Telur Ayam Negeri', 28000, 'negeri-qty')" class="ml-auto bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">
 <i class="fas fa-cart-plus mr-2"></i> Tambah
 </button>
 </div>
 </div>
 </div>
<!-- Product 3 -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden egg-card transition duration-300">
 <div class="relative">
 <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3" alt="Telur Omega 3" class="w-full h-48 object-cover">
 <div class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded">PREMIUM</div>
 </div>
 <div class="p-6">
 <h3 class="text-xl font-bold text-gray-800 mb-2">Telur Omega 3</h3>
 <p class="text-gray-600 mb-4">Telur dengan kandungan omega 3 tinggi yang baik untuk kesehatan jantung dan otak.</p>
 <div class="flex justify-between items-center">
 <span class="text-2xl font-bold text-gray-800">Rp 45.000</span>
 <span class="text-sm text-gray-500">/ 10 butir</span>
 </div>
 <div class="mt-4 flex items-center">
 <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-l" onclick="updateQuantity('omega', -1)">
 <i class="fas fa-minus"></i>
 </button>
 <span id="omega-qty" class="bg-gray-100 py-2 px-4">0</span>
 <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-r" onclick="updateQuantity('omega', 1)">
 <i class="fas fa-plus"></i>
 </button>
 <button onclick="addToCart('omega', 'Telur Omega 3', 45000, 'omega-qty')" class="ml-auto bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">
 <i class="fas fa-cart-plus mr-2"></i> Tambah
 </button>
 </div>
 </div>
 </div>
 </div>
<div class="mt-12 text-center">
 <button class="border-2 border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-white font-bold py-3 px-8 rounded-lg transition duration-300">
 Lihat Semua Produk
 </button>
 </div>
 </div>
 </section>
<!-- About Section -->
 <section id="about" 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">
 <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3" alt="Peternakan Kami" class="rounded-lg shadow-xl w-full h-auto">
 </div>
 <div class="md:w-1/2">
 <h2 class="text-3xl font-bold text-gray-800 mb-4">Tentang FreshEggs</h2>
 <p class="text-gray-600 mb-4">FreshEggs adalah usaha keluarga yang telah beroperasi sejak 2010, berkomitmen untuk menyediakan telur berkualitas tinggi kepada pelanggan kami.</p>
 <p class="text-gray-600 mb-6">Kami memelihara ayam dengan cara yang alami dan berkelanjutan, memastikan setiap telur yang kami hasilkan tidak hanya lezat tetapi juga bergizi tinggi.</p>
<div class="grid grid-cols-2 gap-4 mb-6">
 <div class="flex items-center">
 <i class="fas fa-check-circle text-yellow-500 mr-2"></i>
 <span class="text-gray-700">100% Alami</span>
 </div>
 <div class="flex items-center">
 <i class="fas fa-check-circle text-yellow-500 mr-2"></i>
 <span class="text-gray-700">Tanpa Hormon</span>
 </div>
 <div class="flex items-center">
 <i class="fas fa-check-circle text-yellow-500 mr-2"></i>
 <span class="text-gray-700">Kandungan Nutrisi Tinggi</span>
 </div>
 <div class="flex items-center">
 <i class="fas fa-check-circle text-yellow-500 mr-2"></i>
 <span class="text-gray-700">Pengiriman Cepat</span>
 </div>
 </div>
<button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
 Pelajari Lebih Lanjut
 </button>
 </div>
 </div>
 </div>
 </section>
<!-- Testimonials Section -->
 <section id="testimonials" class="py-16 bg-gray-50">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold text-gray-800 mb-2">Apa Kata Pelanggan Kami</h2>
 <p class="text-gray-600 max-w-2xl mx-auto">Testimoni dari pelanggan yang puas dengan produk dan layanan kami</p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <!-- Testimonial 1 -->
 <div class="bg-white p-6 rounded-lg shadow-md">
 <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 mr-4">
 <div>
 <h4 class="font-bold text-gray-800">Sarah Wijaya</h4>
 <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>
 </div>
 </div>
 <p class="text-gray-600">"Telur dari FreshEggs selalu segar dan enak. Keluarga saya sangat menyukainya. Pengiriman juga cepat dan tepat waktu."</p>
 </div>
<!-- Testimonial 2 -->
 <div class="bg-white p-6 rounded-lg shadow-md">
 <div class="flex items-center mb-4">
 <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4">
 <div>
 <h4 class="font-bold text-gray-800">Budi Santoso</h4>
 <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>
 </div>
 </div>
 <p class="text-gray-600">"Sebagai pemilik restoran, kualitas konsisten dari FreshEggs sangat membantu bisnis saya. Pelayanan mereka juga sangat baik."</p>
 </div>
<!-- Testimonial 3 -->
 <div class="bg-white p-6 rounded-lg shadow-md">
 <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 mr-4">
 <div>
 <h4 class="font-bold text-gray-800">Dewi Lestari</h4>
 <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>
 </div>
 </div>
 <p class="text-gray-600">"Saya sudah mencoba berbagai jenis telur mereka, semuanya enak dan segar. Khususnya telur omega 3, anak-anak saya suka sekali!"</p>
 </div>
 </div>
 </div>
 </section>
<!-- Contact Section -->
 <section id="contact" class="py-16 bg-white">
 <div class="container mx-auto px-4">
 <div class="text-center mb-12">
 <h2 class="text-3xl font-bold text-gray-800 mb-2">Hubungi Kami</h2>
 <p class="text-gray-600 max-w-2xl mx-auto">Kami siap membantu Anda dengan pertanyaan atau pemesanan khusus</p>
 </div>
<div class="flex flex-col md:flex-row">
 <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
 <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
 <h3 class="text-xl font-bold text-gray-800 mb-4">Informasi Kontak</h3>
<div class="space-y-4">
 <div class="flex items-start">
 <i class="fas fa-map-marker-alt text-yellow-500 mt-1 mr-4"></i>
 <div>
 <h4 class="font-bold text-gray-800">Alamat</h4>
 <p class="text-gray-600">Jl. Telur Sejahtera No. 123, Jakarta Selatan</p>
 </div>
 </div>
<div class="flex items-start">
 <i class="fas fa-phone-alt text-yellow-500 mt-1 mr-4"></i>
 <div>
 <h4 class="font-bold text-gray-800">Telepon</h4>
 <p class="text-gray-600">(021) 1234-5678</p>
 <p class="text-gray-600">0812-3456-7890 (WhatsApp)</p>
 </div>
 </div>
<div class="flex items-start">
 <i class="fas fa-envelope text-yellow-500 mt-1 mr-4"></i>
 <div>
 <h4 class="font-bold text-gray-800">Email</h4>
 <p class="text-gray-600">info@fresheggs.com</p>
 </div>
 </div>
<div class="flex items-start">
 <i class="fas fa-clock text-yellow-500 mt-1 mr-4"></i>
 <div>
 <h4 class="font-bold text-gray-800">Jam Operasional</h4>
 <p class="text-gray-600">Senin - Sabtu: 08.00 - 17.00 WIB</p>
 <p class="text-gray-600">Minggu: Libur</p>
 </div>
 </div>
 </div>
<div class="mt-6">
 <h4 class="font-bold text-gray-800 mb-2">Ikuti Kami</h4>
 <div class="flex space-x-4">
 <a href="#" class="bg-gray-200 hover:bg-blue-600 hover:text-white text-blue-600 p-2 rounded-full transition duration-300">
 <i class="fab fa-facebook-f"></i>
 </a>
 <a href="#" class="bg-gray-200 hover:bg-pink-600 hover:text-white text-pink-600 p-2 rounded-full transition duration-300">
 <i class="fab fa-instagram"></i>
 </a>
 <a href="#" class="bg-gray-200 hover:bg-blue-400 hover:text-white text-blue-400 p-2 rounded-full transition duration-300">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="bg-gray-200 hover:bg-green-600 hover:text-white text-green-600 p-2 rounded-full transition duration-300">
 <i class="fab fa-whatsapp"></i>
 </a>
 </div>
 </div>
 </div>
 </div>
<div class="md:w-1/2">
 <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
 <h3 class="text-xl font-bold text-gray-800 mb-4">Kirim Pesan</h3>
 <form id="contact-form">
 <div class="mb-4">
 <label for="name" class="block text-gray-700 font-medium mb-2">Nama Lengkap</label>
 <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
 </div>
<div class="mb-4">
 <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
 <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
 </div>
<div class="mb-4">
 <label for="phone" class="block text-gray-700 font-medium mb-2">Nomor Telepon</label>
 <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
 </div>
<div class="mb-4">
 <label for="message" class="block text-gray-700 font-medium mb-2">Pesan</label>
 <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"></textarea>
 </div>
<button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
 Kirim Pesan
 </button>
 </form>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Newsletter Section -->
 <section class="py-12 bg-yellow-50">
 <div class="container mx-auto px-4 text-center">
 <h2 class="text-2xl font-bold text-gray-800 mb-4">Berlangganan Newsletter Kami</h2>
 <p class="text-gray-600 max-w-2xl mx-auto mb-6">Dapatkan informasi terbaru tentang promo, produk baru, dan tips seputar telur langsung ke email Anda.</p>
<div class="max-w-md mx-auto flex">
 <input type="email" placeholder="Alamat email Anda" class="flex-grow px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
 <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold px-6 py-3 rounded-r-lg transition duration-300">
 Berlangganan
 </button>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-gray-800 text-white py-12">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <div class="flex items-center space-x-2 mb-4">
 <i class="fas fa-egg text-yellow-500 text-2xl"></i>
 <h3 class="text-xl font-bold">Fresh<span class="text-yellow-500">Eggs</span></h3>
 </div>
 <p class="text-gray-400 mb-4">Menyediakan telur segar berkualitas tinggi langsung dari peternak terpercaya.</p>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">
 <i class="fab fa-facebook-f"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">
 <i class="fab fa-instagram"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">
 <i class="fab fa-whatsapp"></i>
 </a>
 </div>
 </div>
<div>
 <h4 class="text-lg font-bold mb-4">Tautan Cepat</h4>
 <ul class="space-y-2">
 <li><a href="#home" class="text-gray-400 hover:text-yellow-500 transition duration-300">Beranda</a></li>
 <li><a href="#products" class="text-gray-400 hover:text-yellow-500 transition duration-300">Produk</a></li>
 <li><a href="#about" class="text-gray-400 hover:text-yellow-500 transition duration-300">Tentang Kami</a></li>
 <li><a href="#testimonials" class="text-gray-400 hover:text-yellow-500 transition duration-300">Testimoni</a></li>
 <li><a href="#contact" class="text-gray-400 hover:text-yellow-500 transition duration-300">Kontak</a></li>
 </ul>
 </div>
<div>
 <h4 class="text-lg font-bold mb-4">Produk</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Telur Ayam Kampung</a></li>
 <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Telur Ayam Negeri</a></li>
 <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Telur Omega 3</a></li>
 <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Telur Organik</a></li>
 <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Telur Bebek</a></li>
 </ul>
 </div>
<div>
 <h4 class="text-lg font-bold mb-4">Kontak</h4>
 <ul class="space-y-2">
 <li class="flex items-start">
 <i class="fas fa-map-marker-alt text-yellow-500 mt-1 mr-2"></i>
 <span class="text-gray-400">Jl. Telur Sejahtera No. 123, Jakarta Selatan</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-phone-alt text-yellow-500 mr-2"></i>
 <span class="text-gray-400">(021) 1234-5678</span>
 </li>
 <li class="flex items-center">
 <i class="fas fa-envelope text-yellow-500 mr-2"></i>
 <span class="text-gray-400">info@fresheggs.com</span>
 </li>
 </ul>
 </div>
 </div>
<div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
 <p>&copy; 2023 FreshEggs. All rights reserved.</p>
 </div>
 </div>
 </footer>
<!-- Shopping Cart Modal -->
 <div id="cart-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
 <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
 <div class="fixed inset-0 transition-opacity" aria-hidden="true">
 <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
 </div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
 <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
 <div class="flex justify-between items-center border-b pb-3">
 <h3 class="text-lg font-bold text-gray-800">Keranjang Belanja</h3>
 <button id="close-cart" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
<div id="cart-items" class="mt-4 max-h-96 overflow-y-auto">
 <!-- Cart items will be added here dynamically -->
 <p id="empty-cart-message" class="text-gray-500 text-center py-8">Keranjang belanja Anda masih kosong</p>
 </div>
<div id="cart-summary" class="mt-4 border-t pt-4 hidden">
 <div class="flex justify-between mb-2">
 <span class="font-medium text-gray-700">Subtotal</span>
 <span id="cart-subtotal" class="font-medium">Rp 0</span>
 </div>
 <div class="flex justify-between mb-2">
 <span class="font-medium text-gray-700">Ongkos Kirim</span>
 <span class="font-medium">Rp 10.000</span>
 </div>
 <div class="flex justify-between text-lg font-bold text-gray-800 border-t pt-2 mt-2">
 <span>Total</span>
 <span id="cart-total">Rp 10.000</span>
 </div>
<div class="mt-6">
 <button id="checkout-btn" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
 Proses Checkout
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Success Notification -->
 <div id="success-notification" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg hidden z-50">
 <div class="flex items-center">
 <i class="fas fa-check-circle mr-2"></i>
 <span id="success-message">Item berhasil ditambahkan ke keranjang!</span>
 </div>
 </div>
<script>
 // Mobile menu toggle
 const mobileMenuBtn = document.getElementById('mobile-menu-btn');
 const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', () => {
 mobileMenu.classList.toggle('hidden');
 });
// Cart functionality
 let cart = [];
// Cart modal toggle
 const cartBtn = document.getElementById('cart-btn');
 const cartModal = document.getElementById('cart-modal');
 const closeCart = document.getElementById('close-cart');
cartBtn.addEventListener('click', () => {
 cartModal.classList.remove('hidden');
 updateCartDisplay();
 });
closeCart.addEventListener('click', () => {
 cartModal.classList.add('hidden');
 });
// Update quantity
 function updateQuantity(productId, change) {
 const qtyElement = document.getElementById(`${productId}-qty`);
 let currentQty = parseInt(qtyElement.textContent);
 currentQty += change;
if (currentQty < 0) currentQty = 0;
qtyElement.textContent = currentQty;
 }
// Add to cart
 function addToCart(productId, productName, price, qtyElementId) {
 const qty = parseInt(document.getElementById(qtyElementId).textContent);
if (qty <= 0) return;
// Check if item already in cart
 const existingItemIndex = cart.findIndex(item => item.id === productId);
if (existingItemIndex >= 0) {
 // Update quantity if item exists
 cart[existingItemIndex].quantity += qty;
 } else {
 // Add new item to cart
 cart.push({
 id: productId,
 name: productName,
 price: price,
 quantity: qty
 });
 }
// Reset quantity
 document.getElementById(qtyElementId).textContent = '0';
// Update cart count
 updateCartCount();
// Show success notification
 showSuccessNotification(`${qty} ${productName} berhasil ditambahkan ke keranjang!`);
 }
// Update cart count display
 function updateCartCount() {
 const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
 document.getElementById('cart-count').textContent = totalItems;
 }
// Update cart display in modal
 function updateCartDisplay() {
 const cartItemsContainer = document.getElementById('cart-items');
 const emptyCartMessage = document.getElementById('empty-cart-message');
 const cartSummary = document.getElementById('cart-summary');
if (cart.length === 0) {
 emptyCartMessage.classList.remove('hidden');
 cartSummary.classList.add('hidden');
 cartItemsContainer.innerHTML = '';
 cartItemsContainer.appendChild(emptyCartMessage);
 } else {
 emptyCartMessage.classList.add('hidden');
 cartSummary.classList.remove('hidden');
// Clear existing items
 cartItemsContainer.innerHTML = '';
// Add each cart item
 cart.forEach(item => {
 const itemElement = document.createElement('div');
 itemElement.className = 'flex justify-between items-center py-3 border-b cart-item';
 itemElement.innerHTML = `
 <div class="flex-1">
 <h4 class="font-medium text-gray-800">${item.name}</h4>
 <p class="text-sm text-gray-500">${item.quantity} x Rp ${item.price.toLocaleString()}</p>
 </div>
 <div class="flex items-center">
 <span class="font-medium text-gray-800 mr-4">Rp ${(item.quantity * item.price).toLocaleString()}</span>
 <button onclick="removeFromCart('${item.id}')" class="text-red-500 hover:text-red-700">
 <i class="fas fa-trash"></i>
 </button>
 </div>
 `;
 cartItemsContainer.appendChild(itemElement);
 });
// Update totals
 const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
 document.getElementById('cart-subtotal').textContent = `Rp ${subtotal.toLocaleString()}`;
 document.getElementById('cart-total').textContent = `Rp ${(subtotal + 10000).toLocaleString()}`;
 }
 }
// Remove item from cart
 function removeFromCart(productId) {
 cart = cart.filter(item => item.id !== productId);
 updateCartCount();
 updateCartDisplay();
 }
// Show success notification
 function showSuccessNotification(message) {
 const notification = document.getElementById('success-notification');
 const messageElement = document.getElementById('success-message');
messageElement.textContent = message;
 notification.classList.remove('hidden');
setTimeout(() => {
 notification.classList.add('hidden');
 }, 3000);
 }
// Form submission
 document.getElementById('contact-form').addEventListener('submit', function(e) {
 e.preventDefault();
 showSuccessNotification('Pesan Anda telah berhasil dikirim! Kami akan segera menghubungi Anda.');
 this.reset();
 });
// Checkout button
 document.getElementById('checkout-btn').addEventListener('click', function() {
 showSuccessNotification('Pesanan Anda sedang diproses! Kami akan menghubungi Anda untuk konfirmasi.');
 cart = [];
 updateCartCount();
 updateCartDisplay();
 cartModal.classList.add('hidden');
 });
// Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();
const targetId = this.getAttribute('href');
 const targetElement = document.querySelector(targetId);
if (targetElement) {
 window.scrollTo({
 top: targetElement.offsetTop - 80,
 behavior: 'smooth'
 });
// Close mobile menu if open
 mobileMenu.classList.add('hidden');
 }
 });
 });
 </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=marrrrrr/website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>