@extends('layouts.main-app')

@section('title','Home')

@section('content')

@include('layouts.navbar')

<div class="relative">
    <img class="absolute inset-0 w-full h-full" src="{{asset('images/about_us/banner-aboutus.webp')}}" alt="">
    <div class="relative pb-32 pt-52 ">
        <h1 class="text-[#dab97d] text-6xl text-center">About Us</h1>
    </div>
</div>

<div class="relative overflow-hidden">
    <img class="absolute inset-0 w-full h-full" src="{{asset('images/about_us/bg.webp')}}" alt="">
    <img class="absolute bottom-0 left-0 transform scale-x-[-1] w-96 h-auto" src="{{asset('images/homepage/obj-hands-beer.webp')}}" alt="">
    <div data-aos="fade-up"
        data-aos-duration="1500" class="container relative max-w-screen-lg px-4 pt-20 pb-40 mx-auto space-y-8">
        <div class="grid items-center grid-cols-1 overflow-hidden text-white md:grid-cols-2">
            <div data-aos="fade-right"
                data-aos-duration="1500" class="space-y-12">
                <h1 class="text-4xl font-bold">Welcome to XCLV: Where Great Moments Are Made</h1>
                <div class="space-y-2">
                    <h1 class="text-[#dab97d] font-bold">Who We Are</h1>
                    <p>Nestled in the heart of Davao City. <span class="font-bold">XCLV</span> is more than just a bar it's a destination. Established in 2024, we've been the go-to the spot for locals and visitors seeking on elevated nightlife experience.</p>
                </div>
                <div class="space-y-2 text-right">
                    <h1 class="text-[#dab97d] font-bold">What We Stand For</h1>
                    <p>
                        At <span class="font-bold">XCLV</span>, our mission is to create a warm, inviting atmosphere where everyone feels at home. We're passionate about crafting moments that linger - from the first sip of your cocktail to the last laugh shared with friends.
                    </p>
                </div>
            </div>

            <div data-aos="fade-left"
                data-aos-duration="1500">
                <img src="{{asset('images/about_us/img-aboutus.webp')}}" alt="">
            </div>
        </div>
        <hr class="border border-[#dab97d]">
        <div class="grid grid-cols-1 gap-4 text-center md:grid-cols-3">
            <div data-aos="zoom-in"
                data-aos-duration="1500" class="text-white border border-[#dab97d] rounded-xl p-4 bg-gradient-to-bl from-black to-violet-600 space-y-8">
                <h1 class="text-2xl font-bold">Premium Cocktails</h1>
                <div class="flex justify-center">
                    <img src="{{asset('images/about_us/icon-premium.webp')}}" alt="">
                </div>
                <p>We deliver premium experiences through exceptional service, food, and drinks.</p>
            </div>
            <div data-aos="zoom-in"
                data-aos-duration="1500" class="text-white border border-[#dab97d] rounded-xl p-4 bg-gradient-to-bl from-black to-violet-600 space-y-8">
                <h1 class="text-2xl font-bold">Cozy Ambiance</h1>
                <div class="flex justify-center">
                    <img src="{{asset('images/about_us/icon-ambiance.webp')}}" alt="">
                </div>
                <p>Perfect for intimate gatherings for lively celebrations.</p>
            </div>
            <div data-aos="zoom-in"
                data-aos-duration="1500" class="text-white border border-[#dab97d] rounded-xl p-4 bg-gradient-to-bl from-black to-violet-600 space-y-8">
                <h1 class="text-2xl font-bold">Live Entertainment</h1>
                <div class="flex justify-center">
                    <img src="{{asset('images/about_us/icon-entertainment.webp')}}" alt="">
                </div>
                <p>Weekly events, including live bands and DJs.</p>
            </div>
        </div>

    </div>
</div>

@include('layouts.gallery')

@include('layouts.footer')

@endsection