@extends('layouts.app')

@section('title', 'Services')

@section('content')
    @include('layouts.navbar')

    <!-- Banner Section -->
    <div class="relative w-auto h-auto -mt-4 hidden">
        <img src="{{ asset('assets/MAIN MATERIALS/mobile_banner__FAQ-09-06-2024.jpg') }}" alt="banner"
            class="block md:hidden w-full">
        <img src="{{ asset('assets/MAIN MATERIALS/faq-banner-bckgrnd.png') }}" alt="banner" class="hidden md:block w-full">
    </div>
    <div class="relative w-auto h-auto -mt-4">
        <img src="{{ asset('assets/MAIN MATERIALS/mobile_banner__FAQ-09-06-2024.webp') }}" alt="banner"
            class="block md:hidden w-full">
        <img src="{{ asset('assets/MAIN MATERIALS/faq-banner-bckgrnd.png') }}" alt="banner"
            class="hidden md:block w-full">
    </div>


    <!-- Video Section -->
    <div class="relative w-full bg-[#38247b]">
        <video class="w-full h-full absolute hidden lg:block md:h-96 lg:h-screen xl:object-cover lg:object-cover" autoplay
            muted loop>
            <source src="{{ asset('assets/VIDEO/for website_1.mp4') }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="relative container max-w-screen-md mx-auto w-full h-full py-4 flex justify-center">
            <div>
                <div>
                    <img src="{{ asset('assets/MAIN MATERIALS/FAQ-layout_08-15-2024.webp') }}" alt="banner" class="w-full">
                </div>
                <div class="bg-[#38247b] w-full  text-sm p-8 rounded-2xl font-poppins flex justify-center">
                    <a href="{{ route('contact-us') }}">
                        <button class=" bg-[#fdbb00] p-4 uppercase font-poppins font-bold rounded-full h-20 mb-8">
                            Click here to contact us
                        </button>
                    </a>
                </div>

                <div class="w-full flex items-center justify-center">
                    <h1 class="text-center text-white font-semibold">Thank you for showing interest in the Team Payaman Fair 2024: The Color of Lights!
We're looking forward to seeing you there!</h1>
                </div>
            </div>
        </div>
        <div class="relative">
            @include('layouts.footer')
        </div>
    </div>

@endsection