<!DOCTYPE html>
<html>
<head>
    <title>Interior Design</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        body {
            background-color: var(--primary);
            color: var(--white);
        }
        .hero {
            padding: 100px 0;
        }
        .btn-custom {
           background-color: var(--accent);
            color: black;
            border-radius: 30px;
        }
        .btn-outline-light {
            border: 1px solid var(--white);
            color: var(--white);
            border-radius: 30px;
        }
        .btn-outline:hover {
            background-color: var(--white);
            color: var(--primary);
        }
        :root {
            --primary: #3F5D50;
            --secondary: #2f4a40;
            --accent: #F9BF29;
            --white: #ffffff;
        }   
        .navbar {
            position: sticky;
            top: 0;
            z-index: 999;
            background: rgba(63,93,80,0.95) !important;
            backdrop-filter: blur(6px);
        }
        .navbar .navbar-brand {
            font-size: 28px;   /* BESARKAN */
            font-weight: 700;  /* BOLD */
            letter-spacing: 1px; /* biar keren */
        }
        .navbar .navbar-brand span {
            color: #F9BF29;
        }
        .nav-link {
            color: var(--white) !important;
             position: relative;
        }
        .navbar .nav-link {
            font-size: 25px;   /* BESARIN FONT */
            font-weight: 500;  /* AGAK TEBAL */
            margin: 0 10px;

        }

        .navbar .nav-link::after {
            content: "";
            position: absolute;
            width: 0%;
            height: 2px;
            background: #F9BF29;
            left: 0;
            bottom: -5px;
            transition: 0.3s;
        }

        .navbar .nav-link:hover::after {
            width: 100%;
        }

        .nav-icons a {
            color: white;
            font-size: 25px;
            margin-left: 25px;
            transition: 0.3s;
        }

        .nav-icons a:hover {
            color: #F9BF29;
            transform: scale(1.2);
        }
        img {
            border-radius: 10px;
        }
        .hero {
            height: 100vh;
            background:  linear-gradient(
        to right,
        rgba(63,93,80,0.9) 20%,
        rgba(63,93,80,0.2) 100% 
            )
            ,url('assets/img/RuangTamu.png') no-repeat center right/cover;
            display: flex;
            align-items: center;
        }

        .hero-img {
            filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.3));
            width: 400px;
            margin-left:80px;
            display: block;
        }

        h1 {
            font-size: 48px;
            font-weight: bold;
        }

        p{
            font-size: 18px;
             font-family: 'Poppins', sans-serif;
        }

        .section{
    padding: 80px 20px;
}

.section h2{
    text-align: center;
    margin-bottom: 20px;
}

.container{
    max-width: 1000px;
    margin: auto;
}

.bg-light{
    background: #f9f9f9;
}

.services-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    gap: 20px;
    margin-top: 20px;
}

.card{
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.contact-form{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea{
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.contact-form button{
    background: #2e5d4f;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 6px;
}

.contact-info{
    text-align: center;
}




    </style>
</head>

<body>

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark px-5">
    <div class="container-fluid">

        <!-- LOGO -->
        <a class="navbar-brand fw-bold" href="#">F3F3.</a>

        <!-- TOGGLER (mobile) -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- MENU TENGAH -->
        <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link active" href="index.php">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="jasa.php">Shop</a></li>
                <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
            </ul>
        </div>

         <div class="d-flex align-items-center nav-icons">

            <!-- WhatsApp -->
            <a href="https://wa.me/6281234567890" target="_blank">
                <i class="fab fa-whatsapp"></i>
            </a>

            <!-- Cart -->
            <a href="jasa.php">
                <i class="fas fa-shopping-cart"></i>
            </a>

            <!-- User -->
            <a href="#">
                <i class="fas fa-user"></i>
            </a>

        </div>

    </div>
</nav>

<!-- HERO -->
<section class="hero">
    <div class="container">
        <div class="col-md-6 text-white">
            <h1 class="fw-bold">Elevate Your Space with Modern Furniture</h1>
            <p>Hadirkan suasana ruang yang lebih elegan dengan koleksi furniture modern berkualitas tinggi yang dirancang untuk kenyamanan dan gaya hidup Anda...</p>

            <a href="jasa.php" class="btn btn-custom">Shop Now</a>
            <a href="#" class="btn btn-outline-light">Explore</a>
        </div>
    </div>
</section>

<section id="about" class="section">
    <div class="container">
        <h2>About Us</h2>

        <p>
            <strong>F3F3 Interior</strong> adalah penyedia furniture modern yang menghadirkan
            berbagai pilihan produk berkualitas seperti sofa, meja, kursi, dan perlengkapan
            interior lainnya untuk memenuhi kebutuhan hunian Anda.
        </p>

        <p>
            Kami mengutamakan desain yang elegan, fungsional, dan nyaman digunakan
            dalam kehidupan sehari-hari. Setiap produk dipilih dengan standar kualitas
            tinggi untuk memberikan pengalaman terbaik bagi pelanggan.
        </p>

        <p>
            Selain menyediakan produk, kami juga memberikan layanan konsultasi sederhana
            untuk membantu Anda memilih furniture yang sesuai dengan konsep ruangan
            dan gaya yang diinginkan.
        </p>

        <p>
            F3F3 Interior berkomitmen menjadi pilihan terpercaya dalam menghadirkan
            furniture yang tidak hanya indah, tetapi juga berkualitas dan tahan lama.
        </p>
    </div>
</section>

<section id="services" class="section bg-light">
    <div class="container">
        <h2>Our Services</h2>

        <div class="services-grid">
            <div class="card">
                <h3>Desain Interior</h3>
                <p>Perencanaan desain ruangan sesuai kebutuhan dan gaya Anda.</p>
            </div>

            <div class="card">
                <h3>Konsultasi</h3>
                <p>Konsultasi langsung dengan tim profesional kami.</p>
            </div>

            <div class="card">
                <h3>Custom Furniture</h3>
                <p>Pembuatan furniture sesuai desain interior pilihan.</p>
            </div>
        </div>
    </div>
</section>

<section id="contact" class="section">
    <div class="container">
        <h2>Contact Us</h2>

        <form class="contact-form">
            <input type="text" placeholder="Nama" required>
            <input type="text" placeholder="No HP" required>
            <textarea placeholder="Pesan..." required></textarea>
            <button type="submit">Kirim</button>
        </form>

        <div class="contact-info">
            <p>📍 Jakarta, Indonesia</p>
            <p>📞 08123456789</p>
            <p>✉️ f3f3interior@gmail.com</p>
        </div>
    </div>
</section>

</body>
</html>