Spaces:

aimanfadillah
/

koftes-basreng

Running

App Files Files Community

aimanfadillah commited on Apr 10

Commit

343c0fd

verified ·

1 Parent(s): 153b1af

Update index.html

Browse files

Files changed (1) hide show

index.html +614 -380

index.html CHANGED Viewed

@@ -3,441 +3,675 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CineVerse - Your Movie Destination</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>
-        /* Custom CSS for animations and effects */
-        .movie-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-        }
-        .hero-section {
-            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://image.tmdb.org/t/p/original/9yBVqNruk6Ykrwc32qrK2TIE5xw.jpg');
-            background-size: cover;
-            background-position: center;
-            height: 80vh;
-        }
-        .search-bar:focus {
-            outline: none;
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        .fade-in {
-            animation: fadeIn 0.5s ease-in-out;
-        }
-        /* Custom scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #1a202c;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #4a5568;
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #718096;
         }
-    </style>
 </head>
-<body class="bg-gray-900 text-white min-h-screen">
     <!-- Navigation -->
-    <nav class="bg-gray-800 sticky top-0 z-50 shadow-lg">
-        <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-film text-2xl text-blue-400"></i>
-                <a href="#" class="text-2xl font-bold text-white">Cine<span class="text-blue-400">Verse</span></a>
-            </div>
-            <div class="hidden md:flex space-x-6">
-                <a href="#" class="hover:text-blue-400 transition">Home</a>
-                <a href="#" class="hover:text-blue-400 transition">Movies</a>
-                <a href="#" class="hover:text-blue-400 transition">TV Shows</a>
-                <a href="#" class="hover:text-blue-400 transition">Genres</a>
-                <a href="#" class="hover:text-blue-400 transition">About</a>
             </div>
-            <div class="flex items-center space-x-4">
-                <button class="md:hidden text-white focus:outline-none" id="mobile-menu-button">
-                    <i class="fas fa-bars text-2xl"></i>
-                </button>
-                <button class="hidden md:block bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-full transition">
-                    Sign In
-                </button>
             </div>
         </div>
-        <!-- Mobile menu -->
-        <div class="md:hidden hidden bg-gray-800 px-4 py-2" id="mobile-menu">
-            <a href="#" class="block py-2 hover:text-blue-400 transition">Home</a>
-            <a href="#" class="block py-2 hover:text-blue-400 transition">Movies</a>
-            <a href="#" class="block py-2 hover:text-blue-400 transition">TV Shows</a>
-            <a href="#" class="block py-2 hover:text-blue-400 transition">Genres</a>
-            <a href="#" class="block py-2 hover:text-blue-400 transition">About</a>
-            <button class="w-full bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-full transition mt-2">
-                Sign In
-            </button>
-        </div>
     </nav>
     <!-- Hero Section -->
-    <section class="hero-section flex items-center justify-center fade-in">
-        <div class="container mx-auto px-4 text-center">
-            <h1 class="text-4xl md:text-6xl font-bold mb-4">Discover Amazing Movies</h1>
-            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Find your next favorite film from our extensive collection of blockbusters and indie gems.</p>
-            <div class="max-w-2xl mx-auto relative">
-                <input type="text" placeholder="Search for movies, TV shows..."
-                       class="w-full px-6 py-4 rounded-full bg-gray-800 bg-opacity-70 text-white focus:outline-none search-bar">
-                <button class="absolute right-2 top-2 bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-full transition">
-                    <i class="fas fa-search"></i>
-                </button>
             </div>
         </div>
     </section>
-    <!-- Main Content -->
-    <main class="container mx-auto px-4 py-12">
-        <!-- Trending Movies -->
-        <section class="mb-16 fade-in">
-            <div class="flex justify-between items-center mb-8">
-                <h2 class="text-2xl md:text-3xl font-bold border-l-4 border-blue-500 pl-4">Trending Now</h2>
-                <a href="#" class="text-blue-400 hover:text-blue-300 transition flex items-center">
-                    View All <i class="fas fa-chevron-right ml-2"></i>
-                </a>
             </div>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="trending-movies">
-                <!-- Movies will be loaded here by JavaScript -->
-            </div>
-        </section>
-        <!-- Popular Movies -->
-        <section class="mb-16 fade-in">
-            <div class="flex justify-between items-center mb-8">
-                <h2 class="text-2xl md:text-3xl font-bold border-l-4 border-blue-500 pl-4">Popular Movies</h2>
-                <a href="#" class="text-blue-400 hover:text-blue-300 transition flex items-center">
-                    View All <i class="fas fa-chevron-right ml-2"></i>
-                </a>
             </div>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="popular-movies">
-                <!-- Movies will be loaded here by JavaScript -->
             </div>
-        </section>
-        <!-- Upcoming Movies -->
-        <section class="mb-16 fade-in">
-            <div class="flex justify-between items-center mb-8">
-                <h2 class="text-2xl md:text-3xl font-bold border-l-4 border-blue-500 pl-4">Coming Soon</h2>
-                <a href="#" class="text-blue-400 hover:text-blue-300 transition flex items-center">
-                    View All <i class="fas fa-chevron-right ml-2"></i>
-                </a>
             </div>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="upcoming-movies">
-                <!-- Movies will be loaded here by JavaScript -->
             </div>
-        </section>
-        <!-- Genres Section -->
-        <section class="mb-16 fade-in">
-            <h2 class="text-2xl md:text-3xl font-bold border-l-4 border-blue-500 pl-4 mb-8">Browse by Genre</h2>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
-                <a href="#" class="bg-gray-800 hover:bg-blue-600 transition rounded-lg p-4 text-center font-medium">
-                    Action
-                </a>
-                <a href="#" class="bg-gray-800 hover:bg-blue-600 transition rounded-lg p-4 text-center font-medium">
-                    Adventure
-                </a>
-                <a href="#" class="bg-gray-800 hover:bg-blue-600 transition rounded-lg p-4 text-center font-medium">
-                    Comedy
-                </a>
-                <a href="#" class="bg-gray-800 hover:bg-blue-600 transition rounded-lg p-4 text-center font-medium">
-                    Drama
-                </a>
-                <a href="#" class="bg-gray-800 hover:bg-blue-600 transition rounded-lg p-4 text-center font-medium">
-                    Horror
-                </a>
-                <a href="#" class="bg-gray-800 hover:bg-blue-600 transition rounded-lg p-4 text-center font-medium">
-                    Sci-Fi
-                </a>
-                <a href="#" class="bg-gray-800 hover:bg-blue-600 transition rounded-lg p-4 text-center font-medium">
-                    Romance
-                </a>
-                <a href="#" class="bg-gray-800 hover:bg-blue-600 transition rounded-lg p-4 text-center font-medium">
-                    Thriller
-                </a>
-                <a href="#" class="bg-gray-800 hover:bg-blue-600 transition rounded-lg p-4 text-center font-medium">
-                    Animation
-                </a>
-                <a href="#" class="bg-gray-800 hover:bg-blue-600 transition rounded-lg p-4 text-center font-medium">
-                    Fantasy
-                </a>
-                <a href="#" class="bg-gray-800 hover:bg-blue-600 transition rounded-lg p-4 text-center font-medium">
-                    Mystery
                 </a>
-                <a href="#" class="bg-gray-800 hover:bg-blue-600 transition rounded-lg p-4 text-center font-medium">
-                    Documentary
                 </a>
             </div>
-        </section>
-        <!-- Newsletter -->
-        <section class="bg-gray-800 rounded-xl p-8 md:p-12 fade-in">
-            <div class="max-w-4xl mx-auto text-center">
-                <h2 class="text-2xl md:text-3xl font-bold mb-4">Stay Updated</h2>
-                <p class="text-gray-300 mb-6 max-w-2xl mx-auto">Subscribe to our newsletter to get the latest movie news, reviews, and recommendations straight to your inbox.</p>
-                <div class="flex flex-col md:flex-row gap-4 max-w-xl mx-auto">
-                    <input type="email" placeholder="Your email address"
-                           class="flex-grow px-4 py-3 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
-                    <button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-medium transition">
-                        Subscribe
-                    </button>
-                </div>
-            </div>
-        </section>
-    </main>
-    <!-- Footer -->
-    <footer class="bg-gray-800 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-film text-2xl text-blue-400"></i>
-                        <span class="text-2xl font-bold text-white">Cine<span class="text-blue-400">Verse</span></span>
                     </div>
-                    <p class="text-gray-400">Your ultimate destination for movie discovery and entertainment.</p>
-                    <div class="flex space-x-4 mt-4">
-                        <a href="#" class="text-gray-400 hover:text-blue-400 transition">
                             <i class="fab fa-facebook-f"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-blue-400 transition">
-                            <i class="fab fa-twitter"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-blue-400 transition">
                             <i class="fab fa-instagram"></i>
                         </a>
-                        <a href="#" class="text-gray-400 hover:text-blue-400 transition">
-                            <i class="fab fa-youtube"></i>
                         </a>
-                    </div>
                 </div>
                 <div>
-                    <h3 class="text-lg font-semibold mb-4">Navigation</h3>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Home</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Movies</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">TV Shows</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Genres</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">About Us</a></li>
-                    </ul>
                 </div>
                 <div>
-                    <h3 class="text-lg font-semibold mb-4">Legal</h3>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Terms of Service</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Privacy Policy</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Cookie Policy</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">DMCA</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-lg font-semibold mb-4">Contact</h3>
                     <ul class="space-y-2">
-                        <li class="text-gray-400"><i class="fas fa-envelope mr-2"></i> info@cineverse.com</li>
-                        <li class="text-gray-400"><i class="fas fa-phone mr-2"></i> +1 (555) 123-4567</li>
-                        <li class="text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> 123 Movie St, Hollywood, CA</li>
                     </ul>
                 </div>
             </div>
-            <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-500">
-                <p>&copy; 2023 CineVerse. All rights reserved.</p>
             </div>
         </div>
     </footer>
-    <script>
-        // Mobile menu toggle
-        document.getElementById('mobile-menu-button').addEventListener('click', function() {
-            const menu = document.getElementById('mobile-menu');
-            menu.classList.toggle('hidden');
         });
-        // Sample movie data (in a real app, this would come from an API)
-        const movies = [
-            {
-                id: 1,
-                title: "Dune",
-                poster: "https://image.tmdb.org/t/p/w500/d5NXSklXo0qyIYkgV94XAgMIckC.jpg",
-                rating: 8.2,
-                year: "2021",
-                genre: "Sci-Fi"
-            },
-            {
-                id: 2,
-                title: "No Time to Die",
-                poster: "https://image.tmdb.org/t/p/w500/iUgygt3fscRoKWCV1d0C7FbM9TP.jpg",
-                rating: 7.5,
-                year: "2021",
-                genre: "Action"
-            },
-            {
-                id: 3,
-                title: "The Batman",
-                poster: "https://image.tmdb.org/t/p/w500/74xTEgt7R36Fpooo50r9T25onhq.jpg",
-                rating: 8.1,
-                year: "2022",
-                genre: "Action"
-            },
-            {
-                id: 4,
-                title: "Spider-Man: No Way Home",
-                poster: "https://image.tmdb.org/t/p/w500/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg",
-                rating: 8.3,
-                year: "2021",
-                genre: "Action"
-            },
-            {
-                id: 5,
-                title: "The French Dispatch",
-                poster: "https://image.tmdb.org/t/p/w500/65Y6PweSvQ1OOFBzStybjipURRP.jpg",
-                rating: 7.1,
-                year: "2021",
-                genre: "Comedy"
-            },
-            {
-                id: 6,
-                title: "Eternals",
-                poster: "https://image.tmdb.org/t/p/w500/bcCBq9N1EMo3daNIjWJ8kYvrQm6.jpg",
-                rating: 6.8,
-                year: "2021",
-                genre: "Action"
-            },
-            {
-                id: 7,
-                title: "Encanto",
-                poster: "https://image.tmdb.org/t/p/w500/4j0PNHkMr5ax3IA8tjtxcmPU3QT.jpg",
-                rating: 7.7,
-                year: "2021",
-                genre: "Animation"
-            },
-            {
-                id: 8,
-                title: "The Suicide Squad",
-                poster: "https://image.tmdb.org/t/p/w500/kb4s0ML0iVlGdJOYms4L4qRSKue.jpg",
-                rating: 7.2,
-                year: "2021",
-                genre: "Action"
-            },
-            {
-                id: 9,
-                title: "Shang-Chi",
-                poster: "https://image.tmdb.org/t/p/w500/1BIoJGKbXjdFDAqUEiA2VHqkK1Z.jpg",
-                rating: 7.7,
-                year: "2021",
-                genre: "Action"
-            },
-            {
-                id: 10,
-                title: "Black Widow",
-                poster: "https://image.tmdb.org/t/p/w500/qAZ0pzat24kLdO3o8ejmbLxyOac.jpg",
-                rating: 6.7,
-                year: "2021",
-                genre: "Action"
             }
-        ];
-        // Function to create movie card HTML
-        function createMovieCard(movie) {
-            return `
-                <div class="movie-card transition duration-300 transform hover:scale-105">
-                    <a href="#">
-                        <div class="relative overflow-hidden rounded-lg mb-3">
-                            <img src="${movie.poster}" alt="${movie.title}" class="w-full h-auto rounded-lg">
-                            <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded flex items-center">
-                                <i class="fas fa-star mr-1"></i> ${movie.rating}
-                            </div>
-                            <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
-                                <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-full transition">
-                                    <i class="fas fa-play mr-2"></i> Watch Trailer
-                                </button>
-                            </div>
-                        </div>
-                        <h3 class="font-semibold truncate">${movie.title}</h3>
-                        <p class="text-gray-400 text-sm">${movie.year} • ${movie.genre}</p>
-                    </a>
-                </div>
-            `;
-        }
-        // Function to render movies
-        function renderMovies() {
-            const trendingContainer = document.getElementById('trending-movies');
-            const popularContainer = document.getElementById('popular-movies');
-            const upcomingContainer = document.getElementById('upcoming-movies');
-            // Clear containers
-            trendingContainer.innerHTML = '';
-            popularContainer.innerHTML = '';
-            upcomingContainer.innerHTML = '';
-            // Render trending movies (first 5)
-            movies.slice(0, 5).forEach(movie => {
-                trendingContainer.innerHTML += createMovieCard(movie);
-            });
-            // Render popular movies (next 5)
-            movies.slice(5, 10).forEach(movie => {
-                popularContainer.innerHTML += createMovieCard(movie);
             });
-            // Render upcoming movies (shuffled)
-            const shuffled = [...movies].sort(() => 0.5 - Math.random());
-            shuffled.slice(0, 5).forEach(movie => {
-                upcomingContainer.innerHTML += createMovieCard(movie);
-            });
-        }
-        // Initialize the page
-        document.addEventListener('DOMContentLoaded', function() {
-            renderMovies();
-            // Add fade-in effect to sections as they come into view
-            const sections = document.querySelectorAll('section');
-            const observer = new IntersectionObserver((entries) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        entry.target.classList.add('fade-in');
-                    }
-                });
-            }, { threshold: 0.1 });
-            sections.forEach(section => {
-                observer.observe(section);
-            });
-        });
     </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=aimanfadillah/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Koftes Basreng menyajikan bakso goreng khas Bandung dengan berbagai varian rasa, mulai dari original yang gurih hingga chili oil yang pedas menggugah selera. Dibuat dari ikan pilihan dan bumbu rahasia, camilan ini cocok untuk segala suasana. Tersedia pemesanan melalui WhatsApp dan informasi lengkap di website kami.">
+    <meta property="og:title" content="Koftes Basreng - Basreng Premium dengan Rasa Juara">
+    <meta property="og:description" content="Temukan basreng premium dengan cita rasa juara dari Koftes Basreng. Terbuat dari ikan pilihan dan bumbu rahasia, nikmati varian Original, Pedas, dan Chili Oil tanpa pengawet berbahaya—camilan khas Bandung yang menggugah selera.">
+    <meta property="og:image" content="https://koftesbasreng.vercel.app/img/logo.webp">
+    <meta property="og:url" content="https://koftesbasreng.vercel.app/">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="Koftes Basreng">
+    <title>Koftes Basreng</title>
+    <link rel="shortcut icon" href="https://koftesbasreng.vercel.app/img/logo.webp" type="image/x-icon">
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "LocalBusiness",
+            "name": "Kofte's Basreng",
+            "description": "Penyedia basreng premium dengan kualitas terbaik dan rasa yang menggugah selera.",
+            "url": "https://koftesbasreng.vercel.app/",
+            "image": "https://koftesbasreng.vercel.app/img/logo.webp",
+            "address": {
+                "@type": "PostalAddress",
+                "streetAddress": "JL. Susmita No. 297/41, Rt.002/Rw.008, Suka Maju, Cibeunying Kidul",
+                "addressLocality": "Kota Bandung",
+                "addressRegion": "Jawa Barat",
+                "postalCode": "40121",
+                "addressCountry": "ID"
+            },
+            "contactPoint": {
+                "@type": "ContactPoint",
+                "telephone": "+62-895-3873-00304",
+                "email": "Basrengkoftes@gmail.com",
+                "contactType": "customer service",
+                "availableLanguage": [
+                    "Indonesian"
+                ]
+            },
+            "openingHoursSpecification": [
+                {
+                    "@type": "OpeningHoursSpecification",
+                    "dayOfWeek": [
+                        "Monday",
+                        "Tuesday",
+                        "Wednesday",
+                        "Thursday",
+                        "Friday",
+                        "Saturday"
+                    ],
+                    "opens": "09:00",
+                    "closes": "17:00"
+                }
+            ]
         }
+    </script>
+    <link rel="stylesheet" href="output.css">
 </head>
+<body>
     <!-- Navigation -->
+    <nav class="bg-white shadow-md sticky top-0 z-50">
+        <div class="container mx-auto px-6 py-3">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <img loading="lazy" src="./img/logo.webp" alt="Basrengku Logo" class="h-12 w-12 rounded-full">
+                    <span class="ml-3 text-xl font-bold text-red-500">Koftes Basreng</span>
+                </div>
+                <!-- Desktop Navigation -->
+                <div class="hidden md:flex space-x-8">
+                    <a href="#home" class="nav-link text-gray-800 hover:text-red-500">Home</a>
+                    <a href="#products" class="nav-link text-gray-800 hover:text-red-500">Produk</a>
+                    <a href="#about" class="nav-link text-gray-800 hover:text-red-500">Tentang</a>
+                    <a href="#testimonials" class="nav-link text-gray-800 hover:text-red-500">Testimoni</a>
+                    <a href="#contact" class="nav-link text-gray-800 hover:text-red-500">Kontak</a>
+                </div>
+                <div class="flex items-center">
+                    <!-- Mobile Menu Button -->
+                    <button id="mobile-menu-button" class="md:hidden focus:outline-none hamburger">
+                        <i class="fas fa-bars text-gray-800 text-xl"></i>
+                    </button>
+                    <a href="https://wa.me/+62895387300304" target="_blank" rel="noopener" class="ml-4 px-4 py-2 bg-red-500 text-white rounded-full hover:bg-red-600 hidden md:block">
+                        <i class="fab fa-whatsapp mr-2"></i>Pesan Sekarang
+                    </a>
+                </div>
             </div>
+            <!-- Mobile Menu -->
+            <div id="mobile-menu" class="mobile-menu md:hidden">
+                <div class="px-2 pt-2 pb-4 space-y-1">
+                    <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-red-500 hover:bg-gray-100">Home</a>
+                    <a href="#products" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-red-500 hover:bg-gray-100">Produk</a>
+                    <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-red-500 hover:bg-gray-100">Tentang</a>
+                    <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-red-500 hover:bg-gray-100">Testimoni</a>
+                    <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-red-500 hover:bg-gray-100">Kontak</a>
+                    <a href="https://wa.me/+62895387300304" target="_blank" rel="noopener" class="w-full mt-2 px-4 py-2 bg-red-500 text-white rounded-full hover:bg-red-600 flex items-center justify-center">
+                        <i class="fab fa-whatsapp mr-2"></i>Pesan Sekarang
+                    </a>
+                </div>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
+    <section id="home" class="hero-gradient py-16 md:py-24">
+        <div class="container mx-auto px-6 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 text-gray-800 leading-tight">
+                    Basreng Dengan <span class="text-red-500">Rasa Juara</span>
+                </h1>
+                <p class="mt-4 text-gray-600 text-lg">
+                    Bakso goreng dengan kualitas terbaik, dibuat dari ikan pilihan dan bumbu rahasia yang membuat ketagihan.
+                </p>
+                <div class="mt-8 flex flex-wrap gap-4">
+                    <a href="https://wa.me/+62895387300304" target="_blank" rel="noopener" class="px-8 py-3 bg-red-500 text-white rounded-full hover:bg-red-600 transition duration-300">
+                        <i class="fab fa-whatsapp mr-2"></i>Pesan Sekarang
+                    </a>
+                    <a href="https://www.youtube.com/watch?v=8Hq8w0fEruo&t=2s&ab_channel=HanifahApriliani" target="_blank" rel="noopener"  class="px-8 py-3 border-2 border-red-500 text-red-500 rounded-full hover:bg-red-50 transition duration-300">
+                        <i class="fas fa-play mr-2"></i>Tonton Video
+                    </a>
+                </div>
+                <div class="mt-8 flex items-center">
+                    <!-- <div class="flex -space-x-2">
+                        <img loading="lazy" src="https://via.placeholder.com/40" alt="Customer" class="w-10 h-10 rounded-full border-2 border-white">
+                        <img loading="lazy" src="https://via.placeholder.com/40" alt="Customer" class="w-10 h-10 rounded-full border-2 border-white">
+                        <img loading="lazy" src="https://via.placeholder.com/40" alt="Customer" class="w-10 h-10 rounded-full border-2 border-white">
+                    </div> -->
+                    <!-- <div class="ml-4">
+                        <p class="text-gray-800 font-medium">5000+ Pelanggan Puas</p>
+                        <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>
+                            <span class="ml-2 text-gray-600">4.8 (1200+ ulasan)</span>
+                        </div>
+                    </div> -->
+                </div>
+            </div>
+            <div class="md:w-1/2 relative">
+                <img loading="lazy" src="./img/posterkoftes-kecil.webp" alt="Basreng Premium" class="hidden sm:block rounded-lg w-full max-w-md mx-auto floating">
+                <!-- <div class="absolute -bottom-5 -left-5 bg-white p-4 rounded-lg shadow-lg hidden md:block">
+                    <div class="flex items-center">
+                        <div class="bg-red-100 p-3 rounded-full">
+                            <i class="fas fa-award text-red-500 text-xl"></i>
+                        </div>
+                        <div class="ml-3">
+                            <p class="font-bold text-gray-800">Best Seller</p>
+                            <p class="text-sm text-gray-600">Sejak 2020</p>
+                        </div>
+                    </div>
+                </div> -->
             </div>
         </div>
     </section>
+    <!-- Products Section -->
+    <section id="products" class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-800">Produk Kami</h2>
+                <p class="mt-2 text-gray-600 max-w-2xl mx-auto">
+                    Berbagai varian basreng dengan rasa yang menggugah selera. Pilih favoritmu!
+                </p>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Product 1 -->
+                <div class="basreng-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
+                    <div class="relative">
+                        <img loading="lazy" src="./img/basreng-original.webp" alt="Basreng Original" class="w-full h-50 sm:h-64 object-cover">
+                        <span class="absolute top-4 right-4 bg-yellow-500  text-white px-3 py-1 rounded-full text-sm">Original</span>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start">
+                            <h3 class="text-xl font-bold text-gray-800">Basreng Original</h3>
+                            <span class="text-red-500 font-bold">Rp 15.000</span>
+                        </div>
+                        <p class="mt-2 text-gray-600">
+                            Basreng dengan rasa original yang gurih dan renyah, cocok untuk semua kalangan.
+                        </p>
+                        <!-- <div class="mt-4 flex items-center">
+                            <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="ml-2 text-gray-600">(320 ulasan)</span>
+                        </div> -->
+                        <!-- <button class="mt-6 w-full bg-red-500 text-white py-2 rounded-lg hover:bg-red-600 transition duration-300 flex items-center justify-center">
+                            <i class="fas fa-cart-plus mr-2"></i> Tambah ke Keranjang
+                        </button> -->
+                    </div>
+                </div>
+                <!-- Product 2 -->
+                <div class="basreng-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
+                    <div class="relative">
+                        <img loading="lazy" src="./img/basreng-pedas.webp" alt="Basreng Pedas" class="w-full h-50 sm:h-64 object-cover">
+                        <span class="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm">Hot</span>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start">
+                            <h3 class="text-xl font-bold text-gray-800">Basreng Pedas</h3>
+                            <span class="text-red-500 font-bold">Rp 15.000</span>
+                        </div>
+                        <p class="mt-2 text-gray-600">
+                            Untuk pecinta pedas, basreng dengan level kepedasan yang bisa disesuaikan.
+                        </p>
+                        <!-- <div class="mt-4 flex items-center">
+                            <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="ml-2 text-gray-600">(280 ulasan)</span>
+                        </div>
+                        <button class="mt-6 w-full bg-red-500 text-white py-2 rounded-lg hover:bg-red-600 transition duration-300 flex items-center justify-center">
+                            <i class="fas fa-cart-plus mr-2"></i> Tambah ke Keranjang
+                        </button> -->
+                    </div>
+                </div>
+                <!-- Product 3 -->
+                <div class="basreng-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300">
+                    <div class="relative">
+                        <img loading="lazy" src="./img/basreng-chili.webp" alt="Basreng Balado" class="w-full h-50 sm:h-64 object-cover">
+                        <span class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm">New</span>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start">
+                            <h3 class="text-xl font-bold text-gray-800">Basreng Chili Oil</h3>
+                            <span class="text-red-500 font-bold">Rp 15.000</span>
+                        </div>
+                        <p class="mt-2 text-gray-600">
+                            Perpaduan rasa pedas dan gurih yang nikmat.
+                        </p>
+                        <!-- <div class="mt-4 flex items-center">
+                            <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="ml-2 text-gray-600">(150 ulasan)</span>
+                        </div>
+                        <button class="mt-6 w-full bg-red-500 text-white py-2 rounded-lg hover:bg-red-600 transition duration-300 flex items-center justify-center">
+                            <i class="fas fa-cart-plus mr-2"></i> Tambah ke Keranjang
+                        </button> -->
+                    </div>
+                </div>
             </div>
+            <!-- <div class="mt-12 text-center">
+                <button class="px-8 py-3 border-2 border-red-500 text-red-500 rounded-full hover:bg-red-50 transition duration-300">
+                    Lihat Semua Produk <i class="fas fa-arrow-right ml-2"></i>
+                </button>
+            </div> -->
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-16 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-10 md:mb-0">
+                    <img loading="lazy" src="./img/basreng.webp" alt="Proses Pembuatan Basreng" class="w-full h-90 sm:h-115 object-cover rounded-lg shadow-lg">
+                </div>
+                <div class="md:w-1/2 md:pl-12">
+                    <h2 class="text-3xl font-bold text-gray-800">Tentang Koftes Basreng</h2>
+                    <p class="mt-4 text-gray-600">
+                        Kofte's Basreng adalah basreng khas dari kota Bandung. Kofte's Basreng menyediakan berbagai macam rasa yang pastinya di jamin baik dan tidak akan mengecewakan anda. Kofte's Basreng memiliki cita rasa yang menggoda, mulai dari gurih original hingga pedas
+                    </p>
+                    <div class="mt-8 space-y-6">
+                        <div class="flex">
+                            <div class="p-3 rounded-full">
+                                <i class="fas fa-check text-red-500"></i>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="font-bold text-gray-800">Produk Tidak Mengandung Bahan Pengawet Berbahaya</h4>
+                                <p class="mt-1 text-gray-600">Kofte's Basreng diproduksi menggunakan bahan-bahan berkualitas tanpa tambahan bahan pengawet berbahaya.</p>
+                            </div>
+                        </div>
+                        <div class="flex">
+                            <div class="p-3 rounded-full">
+                                <i class="fas fa-check text-red-500"></i>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="font-bold text-gray-800">Tingkat Kepedasan Berbeda untuk Setiap Individu</h4>
+                                <p class="mt-1 text-gray-600">Produk ini memiliki berbagai tingkat kepedasan yang berbeda pada setiap orang</p>
+                            </div>
+                        </div>
+                        <!-- <div class="flex">
+                            <div class="p-3 rounded-full">
+                                <i class="fas fa-check text-red-500"></i>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="font-bold text-gray-800">Hygienis</h4>
+                                <p class="mt-1 text-gray-600">Dibuat dengan standar kebersihan tinggi</p>
+                            </div>
+                        </div> -->
+                    </div>
+                    <div class="mt-8 flex items-center">
+                        <img loading="lazy" src="./img/pemilik.webp" alt="Owner" class="w-16 h-16 rounded-full border-4 border-white shadow">
+                        <div class="ml-4">
+                            <p class="font-bold text-gray-800">Lia Liani</p>
+                            <p class="text-sm text-gray-600">Founder Konftes Basreng</p>
+                        </div>
+                    </div>
+                </div>
             </div>
+        </div>
+    </section>
+    <!-- Testimonials Section -->
+    <section id="testimonials" class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-800">Apa Kata Pelanggan</h2>
+                <p class="mt-2 text-gray-600 max-w-2xl mx-auto">
+                    Ribuan pelanggan telah merasakan kelezatan basreng kami. Berikut beberapa testimoni mereka.
+                </p>
             </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Testimonial 1 -->
+                <div class="testimonial-card bg-gray-50 p-8 rounded-lg">
+                    <div class="flex items-center">
+                        <img loading="lazy" src="./img/profil.webp" alt="Customer" class="w-12 h-12 rounded-full">
+                        <div class="ml-4">
+                            <h4 class="font-bold text-gray-800">Anita 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="mt-4 text-gray-600 italic">
+                        "Basreng originalnya enak banget! Teksturnya pas, garing di luar tapi lembut di dalam. Anak-anak saya suka sekali, sekarang jadi camilan wajib di rumah."
+                    </p>
+                    <div class="mt-4 flex text-red-500">
+                        <i class="fas fa-quote-left"></i>
+                    </div>
+                </div>
+                <!-- Testimonial 2 -->
+                <div class="testimonial-card bg-gray-50 p-8 rounded-lg">
+                    <div class="flex items-center">
+                        <img loading="lazy" src="./img/profil.webp" alt="Customer" class="w-12 h-12 rounded-full">
+                        <div class="ml-4">
+                            <h4 class="font-bold text-gray-800">Rudi Hermawan</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="mt-4 text-gray-600 italic">
+                        "Basreng pedasnya bikin nagih! Level pedasnya pas, enak banget ditemenin nasi hangat. Pengiriman juga cepat, packing rapi."
+                    </p>
+                    <div class="mt-4 flex text-red-500">
+                        <i class="fas fa-quote-left"></i>
+                    </div>
+                </div>
+                <!-- Testimonial 3 -->
+                <div class="testimonial-card bg-gray-50 p-8 rounded-lg">
+                    <div class="flex items-center">
+                        <img loading="lazy" src="./img/profil.webp" alt="Customer" class="w-12 h-12 rounded-full">
+                        <div class="ml-4">
+                            <h4 class="font-bold text-gray-800">Siti Nurhaliza</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="mt-4 text-gray-600 italic">
+                        "Baru pertama kali coba basreng chili oil, langsung jatuh cinta! Rasanya unik, perpaduan gurih dan pedas yang pas. Sekarang selalu stok di rumah buat teman nonton drakor."
+                    </p>
+                    <div class="mt-4 flex text-red-500">
+                        <i class="fas fa-quote-left"></i>
+                    </div>
+                </div>
             </div>
+            <!-- <div class="mt-12 flex justify-center">
+                <button class="w-12 h-12 rounded-full bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition duration-300 mr-4">
+                    <i class="fas fa-chevron-left"></i>
+                </button>
+                <button class="w-12 h-12 rounded-full bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition duration-300">
+                    <i class="fas fa-chevron-right"></i>
+                </button>
+            </div> -->
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-16 bg-red-500 text-white">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-3xl font-bold">Siap Menikmati Basreng Lezat?</h2>
+            <p class="mt-4 max-w-2xl mx-auto">
+                Pesan sekarang dan dapatkan promo spesial untuk pembelian pertama Anda!
+            </p>
+            <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
+                <a href="https://wa.me/+62895387300304" target="_blank" rel="noopener" class="px-8 py-3 bg-white text-red-500 rounded-full font-bold hover:bg-gray-100 transition duration-300">
+                    <i class="fab fa-whatsapp mr-2"></i> Pesan via WhatsApp
                 </a>
+                <a href="tel:+62895387300304" class="px-8 py-3 border-2 border-white text-white rounded-full hover:bg-red-600 transition duration-300">
+                    <i class="fas fa-phone-alt mr-2"></i> Hubungi Kami
                 </a>
             </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-16 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row">
+                <div class="md:w-1/2 mb-10 md:mb-0">
+                    <h2 class="text-3xl font-bold text-gray-800">Hubungi Kami</h2>
+                    <p class="mt-4 text-gray-600">
+                        Ada pertanyaan atau ingin memesan langsung? Silakan hubungi kami melalui form berikut atau kontak yang tersedia.
+                    </p>
+                    <div class="mt-8 space-y-6">
+                        <div class="flex items-center">
+                            <div class="p-3 rounded-full">
+                                <i class="fas fa-map-marker-alt text-red-500"></i>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="font-bold text-gray-800">Alamat</h4>
+                                <p class="mt-1 text-gray-600">JL. Susmita No. 297/41,Rt.002/Rw.008, Suka Maju, Cibeunying Kidul, Kota Bandung, Jawa Barat 40121 </p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="p-3 rounded-full">
+                                <i class="fas fa-phone-alt text-red-500"></i>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="font-bold text-gray-800">Telepon</h4>
+                                <p class="mt-1 text-gray-600">0895-3873-00304</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="p-3 rounded-full">
+                                <i class="fas fa-envelope text-red-500"></i>
+                            </div>
+                            <div class="ml-4">
+                                <h4 class="font-bold text-gray-800">Email</h4>
+                                <p class="mt-1 text-gray-600">Basrengkoftes@gmail.com</p>
+                            </div>
+                        </div>
                     </div>
+                    <div class="mt-8">
+                        <h4 class="font-bold text-gray-800">Jam Operasional</h4>
+                        <p class="mt-2 text-gray-600">Senin - Sabtu: 09.00 - 17.00 WIB</p>
+                    </div>
+                    <!-- <div class="mt-8 flex space-x-4">
+                        <a href="#" class="w-10 h-10 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition duration-300">
                             <i class="fab fa-facebook-f"></i>
                         </a>
+                        <a href="#" class="w-10 h-10 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition duration-300">
                             <i class="fab fa-instagram"></i>
                         </a>
+                        <a href="#" class="w-10 h-10 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition duration-300">
+                            <i class="fab fa-whatsapp"></i>
                         </a>
+                        <a href="#" class="w-10 h-10 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition duration-300">
+                            <i class="fab fa-tiktok"></i>
+                        </a>
+                    </div> -->
                 </div>
+                <div class="md:w-1/2 md:pl-12">
+                    <form name="form-basreng" class="bg-gray-50 p-8 rounded-lg shadow-sm">
+                        <div class="mb-6">
+                            <label for="name" class="block text-gray-700 font-medium mb-2">Nama Lengkap</label>
+                            <input required type="text" id="name" name="nama" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Masukkan nama Anda">
+                        </div>
+                        <div class="mb-6">
+                            <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
+                            <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Masukkan email Anda">
+                        </div>
+                        <div class="mb-6">
+                            <label for="phone" class="block text-gray-700 font-medium mb-2">Nomor Telepon</label>
+                            <input type="tel" id="phone" name="nomor" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Masukkan nomor telepon">
+                        </div>
+                        <div class="mb-6">
+                            <label for="message" class="block text-gray-700 font-medium mb-2">Pesan</label>
+                            <textarea required id="message" rows="4" name="pesan" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="Tulis pesan Anda"></textarea>
+                        </div>
+                        <button type="submit" class="w-full bg-red-500 text-white py-3 rounded-lg hover:bg-red-600 transition duration-300 font-medium">
+                            Kirim Pesan
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div>
+                    <div class="flex items-center">
+                        <img loading="lazy" src="./img/logo.webp" alt="Logo" class="h-10 w-10 rounded-full">
+                        <span class="ml-3 text-xl font-bold">Koftes Basreng</span>
+                    </div>
+                    <p class="mt-4 text-gray-400">
+                        Penyedia basreng premium dengan kualitas terbaik dan rasa yang menggugah selera.
+                    </p>
                 </div>
                 <div>
+                    <h4 class="text-lg font-bold mb-4">Produk</h4>
                     <ul class="space-y-2">
+                        <li><a href="#products" class="text-gray-400 hover:text-white transition duration-300">Basreng Original</a></li>
+                        <li><a href="#products" class="text-gray-400 hover:text-white transition duration-300">Basreng Pedas</a></li>
+                        <li><a href="#products" class="text-gray-400 hover:text-white transition duration-300">Basreng Chili Oil</a></li>
                     </ul>
                 </div>
                 <div>
+                    <h4 class="text-lg font-bold mb-4">Tautan</h4>
                     <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Tentang Kami</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Kebijakan Privasi</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Syarat & Ketentuan</a></li>
                     </ul>
                 </div>
+                <!-- <div>
+                    <h4 class="text-lg font-bold mb-4">Newsletter</h4>
+                    <p class="text-gray-400 mb-4">
+                        Dapatkan promo dan penawaran spesial dengan berlangganan newsletter kami.
+                    </p>
+                    <div class="flex">
+                        <input type="email" placeholder="Email Anda" class="px-4 py-2 w-full rounded-l-lg focus:outline-none text-gray-800">
+                        <button class="bg-red-500 px-4 py-2 rounded-r-lg hover:bg-red-600 transition duration-300">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </div>
+                </div> -->
             </div>
+            <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-400">
+                    &copy; 2025 Koftes Basreng. All rights reserved.
+                </p>
+                <!-- <div class="mt-4 md:mt-0 flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                        <i class="fab fa-cc-visa"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                        <i class="fab fa-cc-mastercard"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                        <i class="fab fa-cc-paypal"></i>
+                    </a>
+                </div> -->
             </div>
         </div>
     </footer>
+    <!-- Back to Top Button -->
+    <button id="backToTop" class="fixed bottom-8 right-8 bg-red-500 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center hover:bg-red-600 transition duration-300 hidden">
+        <i class="fas fa-arrow-up"></i>
+    </button>
+    <script defer>
+        // Mobile Menu Toggle
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('open');
+            mobileMenuButton.classList.toggle('active');
         });
+        // Close mobile menu when clicking on a link
+        document.querySelectorAll('#mobile-menu a').forEach(link => {
+            link.addEventListener('click', () => {
+                mobileMenu.classList.remove('open');
+                mobileMenuButton.classList.remove('active');
+            });
+        });
+        // Back to Top Button
+        const backToTopButton = document.getElementById('backToTop');
+        window.addEventListener('scroll', () => {
+            if (window.pageYOffset > 300) {
+                backToTopButton.classList.remove('hidden');
+            } else {
+                backToTopButton.classList.add('hidden');
             }
+        });
+        backToTopButton.addEventListener('click', () => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
             });
+        });
+        // // Product Counter
+        // const productCards = document.querySelectorAll('.basreng-card');
+        // productCards.forEach(card => {
+        //     const button = card.querySelector('button');
+        //     button.addEventListener('click', function() {
+        //         const productName = card.querySelector('h3').textContent;
+        //         alert(`Produk ${productName} telah ditambahkan ke keranjang!`);
+        //         // In a real implementation, you would add to cart here
+        //     });
+        // });
+        // // Form Submission
+        // const contactForm = document.querySelector('form');
+        // if (contactForm) {
+        //     contactForm.addEventListener('submit', function(e) {
+        //         e.preventDefault();
+        //         alert('Terima kasih! Pesan Anda telah terkirim. Kami akan segera menghubungi Anda.');
+        //         this.reset();
+        //     });
+        // }
     </script>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-7FJSEGHQMG"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-7FJSEGHQMG');
+    </script>
+    <script src="./script.js" ></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
+</body>
 </html>