<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Captain Kebab - Kebab Premium Indonesia</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;500;600&display=swap');
        
        :root {
            --gold: #FFD700;
            --black: #1A1A1A;
            --dark: #121212;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #0F0F0F;
            color: #fff;
            line-height: 1.6;
        }
        
        header {
            background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)), url('https://picsum.photos/id/1015/1920/1080') center/cover;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: all 0.3s;
        }
        
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 5%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            color: var(--gold);
        }
        
        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }
        
        .nav-links a {
            color: #fff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: var(--gold);
        }
        
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://picsum.photos/id/1015/1920/1080') center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding-top: 80px;
        }
        
        .hero-content {
            max-width: 800px;
            padding: 0 20px;
        }
        
        .hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: 4.5rem;
            color: var(--gold);
            margin-bottom: 1rem;
        }
        
        .hero p {
            font-size: 1.4rem;
            margin-bottom: 2rem;
        }
        
        .btn {
            display: inline-block;
            background: var(--gold);
            color: #000;
            padding: 14px 40px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s;
        }
        
        .btn:hover {
            transform: scale(1.05);
            background: #ffed4e;
        }
        
        section {
            padding: 100px 5%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        h2 {
            font-family: 'Playfair Display', serif;
            font-size: 3rem;
            text-align: center;
            margin-bottom: 3rem;
            color: var(--gold);
        }
        
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }
        
        .mascot {
            text-align: center;
        }
        
        .mascot img {
            max-width: 320px;
            filter: drop-shadow(0 20px 30px rgba(255,215,0,0.3));
        }
        
        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }
        
        .menu-card {
            background: #1F1F1F;
            border-radius: 16px;
            overflow: hidden;
            transition: transform 0.3s;
        }
        
        .menu-card:hover {
            transform: translateY(-10px);
        }
        
        .menu-card img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }
        
        .menu-info {
            padding: 1.5rem;
        }
        
        .price {
            color: var(--gold);
            font-size: 1.4rem;
            font-weight: 600;
        }
        
        .promo {
            background: linear-gradient(135deg, #FFD700, #B8860B);
            color: #000;
            border-radius: 20px;
            padding: 3rem;
            text-align: center;
        }
        
        .locations {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        
        .location-card {
            background: #1F1F1F;
            padding: 2rem;
            border-radius: 16px;
        }
        
        footer {
            background: #0A0A0A;
            padding: 4rem 5% 2rem;
            text-align: center;
        }
        
        @media (max-width: 768px) {
            .hero h1 { font-size: 3rem; }
            .about-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <header>
        <nav>
            <div class="logo">
                <img src="/home/workdir/attachments/162822.png" alt="Captain Kebab" width="50" height="50" style="border-radius: 50%;">
                CAPTAIN KEBAB
            </div>
            <ul class="nav-links">
                <li><a href="#about">Tentang</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#promo">Promo</a></li>
                <li><a href="#partnership">Kemitraan</a></li>
                <li><a href="#lokasi">Lokasi</a></li>
                <li><a href="#kontak">Kontak</a></li>
            </ul>
        </nav>
    </header>

    <!-- Hero -->
    <section class="hero">
        <div class="hero-content">
            <h1>Captain Kebab</h1>
            <p>Petualangan Rasa Premium • Kebab Terbaik di Indonesia</p>
            <a href="#menu" class="btn">Lihat Menu</a>
        </div>
    </section>

    <!-- About -->
    <section id="about">
        <h2>Tentang Captain Kebab</h2>
        <div class="about-grid">
            <div>
                <h3>Sejarah Perusahaan</h3>
                <p>Captain Kebab didirikan pada tahun 2022 oleh seorang penggemar kuliner yang terinspirasi dari perjalanan keliling dunia. Dengan mascot ikonik seorang Kapten Kebab yang tangguh dan stylish, kami menghadirkan kebab premium dengan cita rasa autentik Timur Tengah yang disesuaikan dengan lidah Indonesia.</p>
                
                <h3>Visi</h3>
                <p>Menjadi brand kebab nomor satu di Indonesia yang dikenal dengan kualitas, inovasi, dan pengalaman kuliner terbaik.</p>
                
                <h3>Misi</h3>
                <p>
                    • Menyajikan kebab berkualitas premium dengan bahan segar terbaik<br>
                    • Memberikan pengalaman dining yang menyenangkan dan ramah<br>
                    • Memperluas jangkauan melalui kemitraan yang menguntungkan
                </p>
                
                <h3>Core Values</h3>
                <p><strong>Quality • Innovation • Adventure • Integrity</strong></p>
            </div>
            <div class="mascot">
                <img src="/home/workdir/attachments/162822.png" alt="Captain Kebab Mascot" width="100%">
                <p style="margin-top: 20px; font-style: italic;">"Siap berlayar menyajikan kebahagiaan dalam setiap gigitan!"</p>
            </div>
        </div>
    </section>

    <!-- Menu -->
    <section id="menu" style="background: #1A1A1A;">
        <h2>Daftar Menu</h2>
        <div class="menu-grid">
            <!-- Smoky -->
            <div class="menu-card">
                <img src="https://picsum.photos/id/292/600/400" alt="Smoky Beef">
                <div class="menu-info">
                    <h3>Smoky Beef</h3>
                    <p>Daging sapi premium dengan smoke flavor khas, sayuran segar, dan saus spesial.</p>
                    <div class="price">Rp 45.000</div>
                    <div style="margin-top:10px;">
                        <small>Chicken: Rp 42.000 | Combo: Rp 58.000</small>
                    </div>
                </div>
            </div>
            
            <!-- Meat Lover -->
            <div class="menu-card">
                <img src="https://picsum.photos/id/431/600/400" alt="Meat Lover">
                <div class="menu-info">
                    <h3>Meat Lover Beef</h3>
                    <p>Kombinasi daging sapi melimpah dengan topping spesial.</p>
                    <div class="price">Rp 52.000</div>
                    <div style="margin-top:10px;">
                        <small>Chicken: Rp 48.000 | Combo: Rp 65.000</small>
                    </div>
                </div>
            </div>
            
            <!-- BBQ -->
            <div class="menu-card">
                <img src="https://picsum.photos/id/1080/600/400" alt="BBQ Blackpepper">
                <div class="menu-info">
                    <h3>BBQ Blackpepper Beef</h3>
                    <p>Daging sapi dengan bumbu BBQ dan blackpepper yang menggoda.</p>
                    <div class="price">Rp 48.000</div>
                    <div style="margin-top:10px;">
                        <small>Chicken: Rp 45.000 | Combo: Rp 60.000</small>
                    </div>
                </div>
            </div>
            
            <!-- Shawarma -->
            <div class="menu-card">
                <img src="https://picsum.photos/id/870/600/400" alt="Shawarma Chicken">
                <div class="menu-info">
                    <h3>Shawarma Chicken</h3>
                    <p>Ayampotong tipis dengan rempah shawarma autentik.</p>
                    <div class="price">Rp 40.000</div>
                </div>
            </div>
            
            <!-- Special Telur -->
            <div class="menu-card">
                <img src="https://picsum.photos/id/106/600/400" alt="Spesial Telur">
                <div class="menu-info">
                    <h3>Spesial Telur</h3>
                    <p>Kebab spesial dengan telur mata sapi dan topping melimpah.</p>
                    <div class="price">Rp 38.000</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Promo -->
    <section id="promo">
        <h2>Promo Spesial</h2>
        <div class="promo">
            <h3 style="font-size: 2.2rem; margin-bottom: 1rem;">Buy 1 Get 1 Free Chicken Kebab!</h3>
            <p style="font-size: 1.3rem;">Setiap hari Rabu & Kamis • Berlaku untuk dine-in dan take away</p>
            <p style="margin-top: 1rem;">Promo lainnya: Combo Family hanya Rp 150.000 (4 porsi)</p>
        </div>
    </section>

    <!-- Partnership -->
    <section id="partnership" style="background: #1A1A1A;">
        <h2>Kemitraan Bisnis</h2>
        <div style="max-width: 800px; margin: 0 auto; text-align: center;">
            <p style="font-size: 1.3rem; margin-bottom: 2rem;">Jadilah bagian dari keluarga Captain Kebab! Kami membuka peluang kemitraan untuk membuka outlet baru di seluruh Indonesia.</p>
            
            <div style="background: #222; padding: 2rem; border-radius: 16px; margin-bottom: 2rem;">
                <h3>Keuntungan Kemitraan</h3>
                <ul style="text-align: left; display: inline-block; margin: 1.5rem 0;">
                    <li>✅ Brand yang sudah dikenal</li>
                    <li>✅ Resep dan training lengkap</li>
                    <li>✅ Dukungan marketing & supply chain</li>
                    <li>✅ ROI cepat</li>
                </ul>
            </div>
            
            <a href="#kontak" class="btn">Hubungi Kami untuk Detail Kemitraan</a>
        </div>
    </section>

    <!-- Locations -->
    <section id="lokasi">
        <h2>Lokasi Outlet</h2>
        <div class="locations">
            <div class="location-card">
                <h3>Jakarta Selatan</h3>
                <p>Jl. Fatmawati No. 45<br>Grand Mall - Lt. 2</p>
                <p><strong>08.00 - 22.00</strong></p>
            </div>
            <div class="location-card">
                <h3>Bandung</h3>
                <p>Jl. Riau No. 88<br>Paris Van Java Mall</p>
                <p><strong>09.00 - 23.00</strong></p>
            </div>
            <div class="location-card">
                <h3>Surabaya</h3>
                <p>Jl. Basuki Rahmat No. 120<br>City of Tomorrow</p>
                <p><strong>08.00 - 22.00</strong></p>
            </div>
        </div>
    </section>

    <!-- Contact -->
    <section id="kontak" style="background: #1A1A1A;">
        <h2>Hubungi Kami</h2>
        <div style="max-width: 700px; margin: 0 auto;">
            <form style="display: grid; gap: 1.5rem;">
                <input type="text" placeholder="Nama Lengkap" style="padding: 15px; background: #222; border: none; border-radius: 8px; color: white;">
                <input type="email" placeholder="Email" style="padding: 15px; background: #222; border: none; border-radius: 8px; color: white;">
                <textarea placeholder="Pesan Anda" rows="6" style="padding: 15px; background: #222; border: none; border-radius: 8px; color: white;"></textarea>
                <button type="submit" class="btn" style="width: 100%;">Kirim Pesan</button>
            </form>
            
            <div style="margin-top: 3rem; text-align: center;">
                <p>📍 Jl. Example 123, Jakarta</p>
                <p>📞 0812-3456-7890</p>
                <p>✉️ hello@captainkebab.id</p>
                <p style="margin-top: 1rem;">Instagram: @captainkebab.id</p>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div style="display: flex; justify-content: center; gap: 30px; margin-bottom: 2rem; flex-wrap: wrap;">
            <img src="/home/workdir/attachments/162822.png" alt="Mascot" width="80">
            <img src="/home/workdir/attachments/205976.png" alt="Logo Text" width="220">
        </div>
        <p>&copy; 2026 Captain Kebab. All Rights Reserved.</p>
    </footer>

    <script>
        // Simple smooth scroll
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                if (this.getAttribute('href') !== '#') {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Navbar scroll effect
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                document.querySelector('header').style.background = 'rgba(10,10,10,0.98)';
            } else {
                document.querySelector('header').style.background = 'linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9))';
            }
        });
    </script>
</body>
</html>