@extends('layouts.main-app')

@section('title','Home')

@section('content')



@include('layouts.navbar')

<div class="relative w-full">
    <div class="relative h-screen swiper vertical-slide-carousel swiper-container">
        <div class="swiper-wrapper">
            @foreach ($banner as $banners)
            <div class="swiper-slide">
                <div class="relative">
                    <img class="absolute inset-0 object-cover w-full h-screen xl:h-full" src="{{asset($banners->image)}}" alt="">
                    <div class="container relative max-w-screen-lg px-4 mx-auto text-white py-20 md:py-[20rem] lg:py-[15rem] xl:py-[20rem]">
                        <div class="space-y-8">
                            <h1 class="text-xl text-center">EST. 2024</h1>
                            <div class="grid grid-cols-2">
                                <div>
                                    <h1 class="text-4xl text-right">WELCOME <span class="text-base">TO</span></h1>
                                </div>
                                <div></div>
                            </div>

                            <h1 class="text-5xl text-center text-[#dab97d]">XCLV</h1>
                            <p class="text-sm text-right">{!!$banners->subtitle!!}</p>

                            <div class="flex justify-center">
                                <a href="{{url('contact_us')}}">
                                    <button class="px-8 py-2 text-white bg-gray-200 border-2 border-white bg-opacity-30">Get Started</button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div>
            <div class="absolute right-0 swiper-pagination"></div>
        </div>
    </div>
</div>


<div class="relative overflow-hidden">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/homepage/bg-about.webp')}}" alt="">

    <div data-aos="fade-up"
        data-aos-duration="1500" class="container relative max-w-screen-xl px-4 py-40 mx-auto space-y-8 ">
        <div class="grid items-center grid-cols-1 gap-8 md:grid-cols-2">
            <div data-aos="fade-right"
                data-aos-duration="1500" class="space-y-2 text-white">
                <h1 class="text-[#dab97d]">About Us</h1>
                <h1 class="text-4xl">Crafting the Perfect Pour</h1>
                <p class="text-sm">
                    At XCLV, we believe in creating more than just drinks - we create experiences. Our bar is a haven for those who seek great vibes, expertly crafted cocktails, and a place to unwind or celebrate. Whether you're here to catch up with friends or enjoy a night out, XCLV offers an ambiance that blends energy and elegance.
                    <br><br>
                    Our team of skilled mixologists takes pride in delivering unique flavors that excite your palate, paired with exceptional service. Step into XCLV and let the good times flow - because every moment deserves a toast.
                </p>
                <div>
                    <a href="{{url('about_us')}}">
                        <button class="px-8 py-2 text-white bg-white border border-white bg-opacity-30">Read More</button>
                    </a>
                </div>
            </div>
            <div data-aos="fade-left"
                data-aos-duration="1500">
                <img src="{{asset('images/homepage/img-about.webp')}}" alt="">
            </div>
        </div>
        <hr class="border border-[#dab97d]">
        <div class="">
            <div data-aos="fade-right"
                data-aos-duration="1500" class="grid grid-cols-1 gap-4 md:grid-cols-4 ">
                <div>
                    <div>
                        <img class="w-full h-auto" src="{{asset('images/homepage/img-event-1.webp')}}" alt="">
                        <div class="flex flex-col p-4 space-y-8 bg-black">
                            <h1 class="text-[#dab97d] text-center">EVERY MON TO SUN NIGHTS</h1>
                            <p class="text-sm text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, nostrum autem voluptate laborum incidunt ad doloribus libero dolorem optio ducimus a tenetur? Dolor aliquam id error quos praesentium maxime eligendi?</p>
                        </div>
                    </div>
                    <div class="flex justify-center">
                        <div class="flex items-center py-2 space-x-2 font-bold rounded-b-full text-md px-14 bg-violet-700">
                            <span>03</span><i class='bx bxs-right-arrow-circle'></i>
                        </div>
                    </div>
                </div>

                <div>
                    <div>
                        <img class="w-full h-auto" src="{{asset('images/homepage/img-event-2.webp')}}" alt="">
                        <div class="flex flex-col p-4 space-y-2 bg-black">
                            <h1 class="text-[#dab97d] text-center">CELEBRATE THE GRAND OPENING OF XCLV!</h1>
                            <p class="text-sm text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, nostrum autem voluptate laborum incidunt ad doloribus libero dolorem optio ducimus a tenetur? Dolor aliquam id error quos praesentium maxime eligendi?</p>
                        </div>
                    </div>
                    <div class="flex justify-center">
                        <div class="flex items-center py-2 space-x-2 font-bold rounded-b-full text-md px-14 bg-violet-700">
                            <span>03</span><i class='bx bxs-right-arrow-circle'></i>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <img data-aos="fade-left"
        data-aos-duration="1500" class="relative bottom-0 right-0 xl:absolute" src="{{asset('images/homepage/obj-hands-beer.webp')}}" alt="">
</div>

<div class="relative px-4">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/homepage/bg-cta.webp')}}" alt="">
    <div class="container relative max-w-screen-xl py-20 mx-auto overflow-hidden">
        <div class="grid grid-cols-1 gap-4 text-white md:grid-cols-2">
            <div data-aos="fade-right"
                data-aos-duration="1500" class="space-y-8">
                <h1 class="text-[#dab97d]">
                    Book Your Sport Today!
                </h1>
                <h1 class="text-5xl ">Save your seat for a memorable experience at XCLV. Book today</h1>
                <div class="flex items-center">
                    <svg class="w-10 h-10 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                        </path>
                    </svg>
                    <svg class="w-10 h-10 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                        </path>
                    </svg>
                    <svg class="w-10 h-10 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                        </path>
                    </svg>
                    <svg class="w-10 h-10 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                        </path>
                    </svg>
                    <svg class="w-10 h-10 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                        </path>
                    </svg>
                </div>
                <p class="text-sm leading-loose tracking-widest">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi neque laudantium labore dolor ipsa saepe, ab impedit reiciendis eveniet ex illo ut deleniti? Veritatis voluptate dicta impedit facilis provident nobis.</p>
            </div>
            <div data-aos="fade-left"
                data-aos-duration="1500" class="space-y-8">
                <p class="text-sm leading-loose tracking-widest text-right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos earum placeat harum nesciunt reprehenderit sapiente obcaecati quasi eveniet iusto voluptatum, delectus nihil architecto numquam, aliquid ad praesentium accusamus! Aspernatur, debitis.</p>

                <div>
                    <img src="{{asset('images/homepage/cta-banner.webp')}}" alt="">
                </div>
            </div>
        </div>
    </div>
</div>


<div class="relative px-4">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/homepage/bg-blogs.webp')}}" alt="">
    <div data-aos="fade-up"
        data-aos-duration="1500" class="container relative max-w-screen-xl py-20 mx-auto space-y-8">
        <h1 class="text-[#dab97d] text-xl text-center">Blogs</h1>
        <h1 class="text-4xl font-semibold text-center text-white">Crafting the Perfect Pour</h1>
        <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
            @foreach ($blogs as $blog)
            <a data-aos="zoom-in"
                data-aos-duration="1500" href="{{url('blogs_details', $blog->id)}}">
                <div class="relative flex flex-col h-full">
                    <div class="border-2 bg-violet-700 border-violet-700 bg-opacity-20 text-[#dab97d] font-bold absolute top-2 left-2 text-center p-2">
                        <span>{{ $blog->created_at->format('M') }}</span>
                        <br>
                        <span>{{ $blog->created_at->format('d') }}</span>
                    </div>


                    <img src="{{asset($blog->image)}}" alt="">
                    <div class="bg-[#dab97d] p-8 space-y-8 mx-8 -mt-12 flex-grow">
                        <h1 class="font-bold">Blog {{$blog->id}}</h1>
                        <p class="text-2xl">{{$blog->title}}</p>
                    </div>
                </div>
                @endforeach
            </a>
        </div>
        <div class="flex justify-end text-white">
            <a href="{{url('blogs')}}">View More</a>
        </div>
    </div>
</div>


@include('layouts.gallery')

@include('layouts.footer')

@endsection