<!-- app/Views/home.php -->
<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <!-- FontAwesome -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Tambahkan Swiper.js JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <!-- Tambahkan Swiper.js CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

    <link rel="stylesheet" href="style\styles.css">

</head>

<body>
    <!-- Navbar -->
    @include('layouts.navbar')

    <!-- Section Home -->
    <section class="hero" id="home">
        <div class="container">
            <div class="row">
                <!-- Bagian Kiri -->
                <div class="col-md-6 hero-content">
                    <h1>Kamu Butuh Kos?<br>Ayo Kos Di Calista.</h1>
                    <p>Selamat datang di <strong>Calista</strong>, tempat di mana ketenangan dan kenyamanan bertemu.</p>
                </div>
            </div>
        </div>
        <!-- Gambar Kost -->
        <img src="style/image/rumah.png" alt="Kost Impian" class="hero-image">
    </section>

    <!-- Section About Kos Calista -->
    <section id="layanan" style="background: #f5f5f5; padding: 60px 0; text-align: center;">
        <div class="container">
            <h2 style="color: #3294ddcc; font-weight: bold;">Tentang Kos Calista</h2>
            <p>Hadir untuk memberikan kenyamanan dan fasilitas lengkap untuk kebutuhan tempat tinggalmu</p>
            <div class="row justify-content-center d-flex align-items-stretch mt-4">
                <div class="col-md-4 d-flex">
                    <div class="card custom-card w-100">
                        <div class="card-body">
                            <div class="mb-3">
                                <i class="fas fa-bed fa-3x text-primary"></i>
                            </div>
                            <h5 class="card-title">Kamar Nyaman</h5>
                            <p class="card-text">Kos Calista menyediakan kamar yang bersih, luas, dan nyaman dengan
                                fasilitas lengkap untuk mendukung aktivitas harianmu.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 d-flex">
                    <div class="card custom-card w-100">
                        <div class="card-body">
                            <div class="mb-3">
                                <i class="fas fa-concierge-bell fa-3x text-success"></i>
                            </div>
                            <h5 class="card-title">Fasilitas Lengkap</h5>
                            <p class="card-text">Tersedia WiFi, dapur bersama, parkir, dan keamanan 24 jam yang membuat
                                kamu tinggal dengan tenang.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 d-flex">
                    <div class="card custom-card w-100">
                        <div class="card-body">
                            <div class="mb-3">
                                <i class="fas fa-map-marker-alt fa-3x text-danger"></i>
                            </div>
                            <h5 class="card-title">Lokasi Strategis</h5>
                            <p class="card-text">Berlokasi dekat kampus, pusat perbelanjaan, dan fasilitas umum lainnya,
                                memudahkan mobilitasmu setiap hari.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Section Search -->
    <section id="search-section"
        style="background-image: url('style/image/roomtour.jpg'); background-size: cover; background-position: center; padding: 100px 0; text-align: center; color: white;">
        <div class="container">
            <h1 style="font-size: 32px; font-weight: bold;">Ayo Tinggal di Kos Calista</h1>
            <p style="font-size: 16px; margin: 10px 0 30px;">Temukan kenyamanan dan fasilitas lengkap hanya di Kos
                Calista. Nikmati tempat tinggal yang nyaman, lokasi strategis, dan harga terjangkau.</p>
        </div>
    </section>


    <!-- Section Galeri Kos Calista -->
    <section id="galeri" style="background: #f5f5f5; padding: 60px 0;">
        <div class="container">
            <div class="header">
                <h2 style="color:#3294DDCC; font-size: 28px; font-weight: bold;">Galeri Kos Calista</h2>
                <a href="/galeri" class="btn btn-custom1">
                    Lihat Semua <i class="bi bi-arrow-right"></i>
                </a>
            </div>

            <!-- Galeri Item -->
            <div class="row">
                <div class="col-md-4">
                    <div class="image-container">
                        <img src="style/image/calista10.jpg" alt="Room" class="img-fluid">
                        <div class="overlay">
                            <h3>Kamar Tidur</h3>
                            <p>Modern dan nyaman, cocok untuk semua kebutuhanmu.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="image-container">
                        <img src="style/image/calista17.jpg" alt="Living Room" class="img-fluid">
                        <div class="overlay">
                            <h3>Interior</h3>
                            <p>Pemanis Ruangan Dalam Kos Calista .</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="image-container">
                        <img src="style/image/calista18.jpg" alt="Kitchen" class="img-fluid">
                        <div class="overlay">
                            <h3>Dapur Bersama</h3>
                            <p>Dapur lengkap dengan peralatan untuk kebutuhan sehari-hari.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="image-container">
                        <img src="style/image/calista9.jpg" alt="Bathroom" class="img-fluid">
                        <div class="overlay">
                            <h3>Kamar Mandi</h3>
                            <p>Kamar mandi bersih dengan fasilitas modern.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="image-container">
                        <img src="style/image/calista7.jpg" alt="Parking" class="img-fluid">
                        <div class="overlay">
                            <h3>Parkir</h3>
                            <p>Tempat parkir luas dan aman untuk kendaraanmu.</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="image-container">
                        <img src="style/image/calista.jpg" alt="Security" class="img-fluid">
                        <div class="overlay">
                            <h3>Keamanan 24 Jam</h3>
                            <p>Keamanan terjamin dengan sistem pengawasan 24 jam.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Section Contact Us -->
    <section id="contact">
        <div class="contact-container">
            <div class="contact-info">
                <h2>Butuh Konsultasi..?</h2>
                <h2>Silahkan kontak kami<br>Kami Siap Membantu</h2>

                <!-- Contact Details -->
                <div class="contact-details">
                    <p><i class="fas fa-map-marker-alt fa-fw"></i> Jl. Mastrip Blk. H / Blk. I No.14, Krajan Timur,
                        Sumbersari, Kec. Sumbersari, Kabupaten Jember, Jawa Timur 68121</p>
                    <p><i class="fas fa-phone fa-fw"></i> 0857-9043-3661</p>
                    <p><i class="fas fa-envelope fa-fw"></i> Kostcalista@gmail.com</p>
                </div>

                <!-- Social Media -->
                <div class="social-media">
                    <a href="#"><i class="fab fa-facebook"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <span>@Kostcalista</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    @include('layouts.footer')
</body>

</html>