@extends('components.main-app')

@section('title', 'Business')

@section('content')
@include('components.navbar')
<script>
    AOS.init();
</script>
<div class="bg-center bg-cover oswald" style="background-image: url('{{ url('/images/Business.png') }}');">
    <div class="flex items-center justify-center">
        <div class="container mx-auto">
            <div class="py-40 ml-4 text-white md:ml-20">
                <h1 class="text-4xl font-bold lg:text-6xl" style="color:#00263e">Businesses</h1>
                <p class="" style="color:#00263e">
                    Subdivision > Ongoing > Lumina Estates I
                </p>
            </div>
        </div>
    </div>
</div>

<div class="mb-20 oswald">
    <div data-aos="fade-down" class="container max-w-5xl mx-auto mt-8">
        <div class="flex justify-end mx-4 space-x-8 text-2xl" style="color:#00263e">
            <i id="swiper-prev" class="bx bx-arrow-back"></i>
            <!-- Next button -->
            <i id="swiper-next" class="bx bx-arrow-back bx-flip-horizontal"></i>
        </div>
    </div>

    <div data-aos="fade-down" class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="{{ asset('images/illumina.png') }}" alt="Image 1">
            </div>
            <div class="swiper-slide">
                <img src="{{ asset('images/illumina.png') }}" alt="Image 2">
            </div>
            <div class="swiper-slide">
                <img src="{{ asset('images/illumina.png') }}" alt="Image 3">
            </div>
        </div>
    </div>


    <style>
        .swiper-container {
            width: 100%;
            padding: 50px 0;
            overflow: hidden;
        }

        .swiper-slide {
            position: relative;
            width: 65%;
            border-radius: 14px;
            overflow: hidden;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
            user-select: none;
        }

        @media screen and (max-width: 768px) {
            .swiper-slide {
                width: 80%;
                /* Example: Reduce width for smaller screens */
            }
        }
    </style>


    <script>
        var swiper = new Swiper('.swiper-container', {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            initialSlide: 2,
            loop: true,
            slidesPerView: 'auto',
            coverflowEffect: {
                rotate: 0,
                stretch: 80,
                depth: 350,
                modifier: 1,
                slideShadows: true,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '#swiper-next',
                prevEl: '#swiper-prev',
            },
        });
    </script>



    <div data-aos="fade-up" class="container max-w-5xl mx-auto my-12">
        <div class="mx-4 space-y-4">
            <div class="flex flex-col items-center justify-center space-y-8">
                <h1 class="text-4xl font-bold" style="color:#00263e">ILUMINA ESTATES I</h1>
                <button id="openModal" class="flex items-center px-8 py-2 text-white rounded-full" style="background-color: #998542;">
                    Check Vicinity Map <span><i class='ml-2 bx bxs-right-arrow'></i></span>
                </button>
                <p class="text-justify ">
                    Davao City, being the home of the beloved President Rodrigo Duterte and being one of the most progressive cities in the Philippines, is unsurprisingly one of the favorite places of many people to invest their hard-earned money in. Its ever-growing economy and the safety it so proudly provides for the people are some of the reasons why it stands out from the crowd. Investors surely love the Durian Capital of the Philippines! Among the hundreds of subdivisions in Davao City, Ilumina Estates I, situated in Communal Buhangin, is a 7.8476-hectared land developed by SLDC under the PD 957 type of development. It proudly has 240 sophisticated and stylish residential units and good amenities that would surely elevate your everyday living! This masterpiece is comprised of 240 saleable houses and lots perfect for you and your family. The land development was completed last September of 2014. Note: This is already sold out.
                </p>
            </div>
            <h1 class="my-8 text-2xl font-bold text-center" style="color:#00263e;">Amenities</h1>

            <div class="flex justify-between mx-2 md:mx-12">
                <div class="flex flex-col ">
                    <ul class="flex items-center space-x-2">
                        <li>
                            <img src="{{ asset('images/clubhouse.png') }}" alt="">
                        </li>
                        <li>
                            <p class="text-sm">Club House</p>
                        </li>
                    </ul>
                    <ul class="flex items-center space-x-2">
                        <li>
                            <img src="{{ asset('images/basketball-court.png') }}" alt="">
                        </li>
                        <li>
                            <p class="text-sm">Basketball Court</p>
                        </li>
                    </ul>

                </div>
                <div class="flex flex-col ">
                    <ul class="flex items-center space-x-2">
                        <li>
                            <img src="{{ asset('images/seesaw.png') }}" alt="">
                        </li>
                        <li>
                            <p class="text-sm">Parks and Playground</p>
                        </li>
                    </ul>
                    <ul class="flex items-center space-x-2">
                        <li>
                            <img src="{{ asset('images/parking-lot.png') }}" alt="">
                        </li>
                        <li>
                            <p class="text-sm">Parking Lot</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


@include('includes.modal') <!-- Include the modal template -->

@include('components.footer')

@endsection