@extends('components.main-app')

@section('title', 'Home')

@section('content')
@include('components.navbar')
<script>
    AOS.init();
</script>
<div>

    <div class="absolute hidden md:block">
        <img class="mt-20 " src="{{asset('images/horizontal.jpg')}}" alt="">
        <img class="mt-72 " src="{{asset('images/horizontal.jpg')}}" alt="">
    </div>

    <div class="absolute left-0 right-0 p-4 mx-auto mt-20 bg-white w-80 sm:ml-4 md:ml-40">
        <h1 style="color: #00263e;">
            "<span class="font-bold">RWEB</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilis."
        </h1>
        <div class="flex items-center justify-between">
            <h1 class="text-xl font-bold">President</h1>
            <img src="{{asset('images/logo/logo-sidebar.png')}}" alt="">
        </div>
    </div>

    <div class="absolute hidden md:block">
        <img class="ml-40" src="{{asset('images/vertical.jpg')}}" alt="">
    </div>
    <div class="absolute hidden md:block">
        <img style="margin-left: 480px;" src="{{asset('images/vertical.jpg')}}" alt="">
    </div>
    <video autoplay loop class="object-cover object-center w-full " style="height: 40rem;">
        <source src="{{asset('images/HomeVideo.mp4')}}" type="video/mp4">
    </video>
</div>



<div class="relative" style="background-color: #f66d10;">
    <div class="container py-8 mx-auto max-w-7xl oswald">
        <div class="grid grid-cols-1 p-4 space-y-4 md:grid-cols-2">
            <div data-aos="fade-down" class="flex items-center ">
                <h3 class="text-4xl font-bold text-white lg:text-6xl">
                    ARCHITECTURE
                    <br>
                    FOR A CHANGING
                    <br>
                    WORLD
                </h3>
            </div>
            <div data-aos="fade-down" class="flex flex-col items-center ">
                <div class="max-w-lg space-y-4">
                    <img src="{{asset('images/Archi.png')}}" class="w-auto h-auto" alt="">
                    <p class="text-justify text-white ">Lorem ipsum dolor sit amet, consectetur adipiscing elite, sed do euismod tempor inicididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilis. </p>
                </div>

            </div>
        </div>
    </div>
</div>

<div class="container mx-auto my-12 max-w-7xl oswald">
    <div class="flex items-center justify-center">
        <div class="grid grid-cols-1 mx-4">
            <div data-aos="fade-down" class="grid grid-cols-1 mb-8 md:grid-cols-2">
                <div class="space-y-4">
                    <h3 class="text-5xl font-bold" style="color:#00263e">
                        PROJECTS
                    </h3>
                    <p class="text-xl" style="color: #00263e;">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elite, sed do euismod tempor inicididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilis.
                    </p>
                </div>
                <div>
                </div>
            </div>
            <div data-aos="fade-up" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <div style="background-color: #f66d10;" class="relative w-full h-64 p-6 md:h-auto group">
                    <h3 class="text-4xl font-bold text-white lg:h-44 xl:h-56">
                        WE'RE EXPERTS <br> IN SUSTAINABLE <br> DESIGN
                    </h3>
                    <div style="background-color: #f66d10;" class="absolute inset-0 flex transition-opacity duration-300 opacity-0 group-hover:opacity-75">
                        <div class="flex flex-col p-4 ">
                            <p class="text-lg font-bold text-white">Lorem Ipsum</p>
                            <p class="mt-2 text-lg text-white">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="relative w-full group">
                    <img src="{{asset('images/Proj_1.png')}}" alt="" class="w-full transition-opacity duration-300 shadow-xl lg:h-44 xl:h-56 group-hover:opacity-75">
                    <div style="background-color: #f66d10; " class="absolute inset-0 flex transition-opacity duration-300 opacity-0 lg:h-44 xl:h-56 group-hover:opacity-75">
                        <div class="flex flex-col p-4 ">
                            <p class="text-lg font-bold text-white">Lorem Ipsum</p>
                            <p class="mt-2 text-sm text-white">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="relative w-full h-auto group">
                    <img src="{{asset('images/Proj_4.png')}}" alt="" class="w-full transition-opacity duration-300 shadow-xl md:h-96 lg:h-auto group-hover:opacity-75">
                    <div style="background-color: #f66d10;" class="absolute inset-0 flex transition-opacity duration-300 opacity-0 group-hover:opacity-75">
                        <div class="flex flex-col p-4 ">
                            <p class="text-lg font-bold text-white">Lorem Ipsum</p>
                            <p class="mt-2 text-lg text-white">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="relative w-full h-auto group">
                    <img src="{{asset('images/Proj_2.png')}}" alt="" class="w-full transition-opacity duration-300 shadow-xl md:h-96 lg:h-auto group-hover:opacity-75 ">
                    <div style="background-color: #f66d10;" class="absolute inset-0 flex transition-opacity duration-300 opacity-0 group-hover:opacity-75">
                        <div class="flex flex-col p-4 ">
                            <p class="text-lg font-bold text-white">Lorem Ipsum</p>
                            <p class="mt-2 text-lg text-white">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="relative w-full lg:-mt-24 xl:-mt-32 group">
                    <img src="{{asset('images/Proj_3.png')}}" alt="" class="w-full transition-opacity duration-300 shadow-xl group-hover:opacity-75">
                    <div style="background-color: #f66d10; " class="absolute inset-0 flex transition-opacity duration-300 opacity-0 group-hover:opacity-75">
                        <div class="flex flex-col p-4 ">
                            <p class="text-lg font-bold text-white">Lorem Ipsum</p>
                            <p class="mt-2 text-lg text-white">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
                            </p>
                        </div>
                    </div>
                </div>

                <div style="background-color: #00263e;" class="relative w-full h-64 p-6 md:h-auto group">
                    <h3 class="text-4xl font-bold text-white lg:h-44 xl:h-56">
                        WANT TO SEE <br> MORE?
                    </h3>
                    <a href="{{url('business')}}">
                        <div style="background-color: #f66d10;" class="absolute inset-0 flex transition-opacity duration-300 opacity-0 group-hover:opacity-75">
                            <div class="flex flex-col p-4 ">
                                <p class="text-lg font-bold text-white">Lorem Ipsum</p>
                                <p class="mt-2 text-lg text-white">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="" style="background-color: #f66d10;">
    <div class="container mx-auto max-w-7xl oswald">
        <div class="grid grid-cols-1 py-8 mx-4 md:grid-cols-2">
            <div data-aos="flip-right" class="flex flex-col justify-center max-w-md text-white md:mx-8 lg:mx-0 align-center">
                <h3 class="text-4xl font-bold lg:text-6xl"> Lorem Ipsum <br> Dolor</h3>
                <p class="mt-2 text-lg text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elite, sed do euismod tempor inicididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilis.</p>
                <a href="{{url('about_us')}}">
                    <div class="flex flex-row items-center mt-8 space-x-2">
                        <h1 class="text-lg font-semibold">Read More About Us</h1>
                        <img class="h-4" src="{{asset('images/Arrow.png')}}" alt="">
                    </div>
                </a>
            </div>
            <div data-aos="flip-left" class="flex justify-center ">
                <img class="object-cover w-screen py-8 h-96" src="{{asset('images/Proj_2.png')}}" alt="">
            </div>
        </div>
    </div>
</div>


<div data-aos="flip-right" class="container mx-auto max-w-7xl oswald">
    <div class="grid grid-cols-1 gap-6 mx-4 my-20 lg:grid-cols-2">
        <div class="flex flex-col max-w-md space-y-2">
            <h3 class="text-4xl font-bold lg:text-6xl" style="color: #00263e;">COLLABORATIVE DESIGN AT <br> ITS FINEST.</h3>
            <p class="text-lg text-justify" style="color: #00263e;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
        </div>
        <div class="relative">

            <div class="flex justify-end mr-32 text-xl" style="color:#00263e">
                <button id="btnPrev2"><i class='bx bx-arrow-back'></i></button>
                <button id="btnNext2"><i class='bx bx-arrow-back bx-flip-horizontal'></i></button>
            </div>

            <section class="splide custom-pagination">
                <div class="splide__track">
                    <img src="{{asset('images/Rectangle 11.png')}}" class="z-0 object-cover w-full h-60 lg:h-full" alt="">
                    <div class="absolute inset-0 z-10 splide__list">
                        <div class=" splide__slide">
                            <img src="{{asset('images/carousel-2.png')}}" class="object-cover w-full h-60" alt="">
                        </div>
                        <div class=" splide__slide">
                            <img src="{{asset('images/carousel-3.png')}}" class="object-cover w-full h-60" alt="">
                        </div>
                        <div class=" splide__slide">
                            <img src="{{asset('images/carousel-1.png')}}" class="object-cover w-full h-60" alt="">
                        </div>
                    </div>
                </div>
            </section>
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    var splide = new Splide('.splide.custom-pagination', {
                        type: 'loop',
                        perPage: 3,
                        autoplay: true,
                        gap: '.7rem',
                        focus: 'center',
                        pagination: false, // Assuming you don't want pagination
                        arrows: false, // Disable default arrows
                        breakpoints: {
                            425: {
                                perPage: 1,
                                gap: '.7rem',
                                height: 'auto',
                            },
                            768: {
                                perPage: 3,
                                gap: '.7rem',
                                height: 'auto',
                            },
                            1024: {
                                perPage: 3,
                                gap: '.7rem',
                                height: 'auto',
                            },
                        },
                    });

                    splide.mount();

                    // Selecting arrow buttons
                    var btnNext2 = document.getElementById('btnNext2');
                    var btnPrev2 = document.getElementById('btnPrev2');

                    //attach events to custom buttons
                    btnNext2.addEventListener('click', function() {
                        splide.go('+1'); // Go to the next slide
                    });

                    btnPrev2.addEventListener('click', function() {
                        splide.go('-1'); // Go to the previous slide
                    });
                });
            </script>
        </div>
    </div>
</div>

<div data-aos="flip-left" class="container mx-auto max-w-7xl">
    <div class="grid grid-cols-1 mx-4 md:grid-cols-2 oswald">
        <div>
            <h1 class="text-4xl font-bold lg:text-6xl" style="color: #00263e;">
                NEWS AND <br> PROMOTIONS
            </h1>
        </div>
        <div class="max-w-xl">
            <p class="text-lg text-justify" style="color:#00263e;">Lorem ipsum dolor sit amet, consectetur adipiscing elite, sed do euismod tempor inicididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilis.</p>
        </div>

    </div>
</div>

<div data-aos="fade-up" class="container mx-auto mb-32 space-y-4 max-w-7xl">
    <div class="flex justify-end mx-4 text-2xl" style="color:#00263e">
        <button id="btnPrev"><i class='bx bx-arrow-back'></i></button>
        <button id="btnNext"><i class='bx bx-arrow-back bx-flip-horizontal'></i></button>

    </div>
    <section class="mx-4 splide custompagination2">
        <div class="splide__track">
            <div class="splide__list">
                <div data-aos="flip-left" class="flex flex-col splide__slide">
                    <div>
                        <img src="{{asset('images/Proj_3.png')}}" class="object-cover object-center w-full h-72 rounded-t-3xl" alt="">
                    </div>
                    <div class="p-8 text-justify text-white rounded-b-xl" style="background-color: #00263e;">
                        <h2 class="text-2xl font-bold">Lorem ipsum dolor sit</h2>
                        <div class="flex flex-row justify-between">
                            <div class="flex flex-row items-center space-x-2">
                                <i class='bx bxs-calendar'></i>
                                <p class="font-semibold">July 1, 2024</p>
                            </div>
                            <div class="flex flex-row items-center space-x-2">
                                <i class='bx bxs-user'></i>
                                <p class="font-semibold">Admin</p>
                            </div>
                        </div>
                        <p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elite, sed do euismod tempor inicididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
                    </div>
                </div>
                <div data-aos="flip-left" class="flex flex-col splide__slide">
                    <div>
                        <img src="{{asset('images/Proj_3.png')}}" class="object-cover object-center w-full h-72 rounded-t-3xl" alt="">
                    </div>
                    <div class="p-8 text-justify text-white rounded-b-xl" style="background-color: #00263e;">
                        <h2 class="text-2xl font-bold">Lorem ipsum dolor sit</h2>
                        <div class="flex flex-row justify-between">
                            <div class="flex flex-row items-center space-x-2">
                                <i class='bx bxs-calendar'></i>
                                <p class="font-semibold">July 1, 2024</p>
                            </div>
                            <div class="flex flex-row items-center space-x-2">
                                <i class='bx bxs-user'></i>
                                <p class="font-semibold">Admin</p>
                            </div>
                        </div>
                        <p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elite, sed do euismod tempor inicididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
                    </div>
                </div>
                <div data-aos="flip-left" class="flex flex-col splide__slide">
                    <div>
                        <img src="{{asset('images/Proj_3.png')}}" class="object-cover object-center w-full h-72 rounded-t-3xl" alt="">
                    </div>
                    <div class="p-8 text-justify text-white rounded-b-xl" style="background-color: #00263e;">
                        <h2 class="text-2xl font-bold">Lorem ipsum dolor sit</h2>
                        <div class="flex flex-row justify-between">
                            <div class="flex flex-row items-center space-x-2">
                                <i class='bx bxs-calendar'></i>
                                <p class="font-semibold">July 1, 2024</p>
                            </div>
                            <div class="flex flex-row items-center space-x-2">
                                <i class='bx bxs-user'></i>
                                <p class="font-semibold">Admin</p>
                            </div>
                        </div>
                        <p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elite, sed do euismod tempor inicididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var splide = new Splide('.splide.custompagination2', {
            type: 'loop',
            perPage: 3,
            gap: '4rem',
            autoplay: true,
            focus: 'start',
            pagination: false, // Assuming you don't want pagination
            arrows: false, // Disable default arrows
            breakpoints: {
                425: {
                    perPage: 1,
                    gap: '.7rem',
                    height: 'auto',
                },
                768: {
                    perPage: 2,
                    gap: '.7rem',
                    height: 'auto',
                },
                1024: {
                    perPage: 3,
                    gap: '.7rem',
                    height: 'auto',
                },
            },
        });

        splide.mount();

        // Selecting arrow buttons
        var btnNext = document.getElementById('btnNext');
        var btnPrev = document.getElementById('btnPrev');

        //attach events to custom buttons
        btnNext.addEventListener('click', function() {
            splide.go('+1'); // Go to the next slide
        });

        btnPrev.addEventListener('click', function() {
            splide.go('-1'); // Go to the previous slide
        });
    });
</script>

@include('components.footer')

@endsection