@extends('layouts.app')

@section('title', 'Services')

@section('content')

@include('layouts.navbar')
<div class="relative h-[40rem] w-full">
    <img class="absolute w-full h-full opacity-100" src="{{ asset('assets/MAIN MATERIALS/rainbow-rectangle.jpg') }}"
        alt="">
    <div class="absolute inset-0 bg-black opacity-50"></div>
    <video class="absolute object-cover inset-0 h-full w-full z-0 py-[0.5rem]"
        src="{{ asset('assets/VIDEO/30 SEC HIGHLIGHTS_2.mp4') }}" autoplay loop muted playsinline>
        Your browser does not support the video tag.
    </video>
    <div class="relative z-20 flex items-center justify-center w-full h-full">
        <img src="{{ asset('assets/MAIN MATERIALS/TARA_NA_PO_ULIT_badge.png') }}" alt="">
    </div>
</div>



<div class="relative w-full h-full ">
    <video class="absolute inset-0 z-0 object-cover object-top w-full h-full "
        src="{{ asset('assets/VIDEO/for website_1.mp4') }}" autoplay loop muted playsinline>
        Your browser does not support the video tag.
    </video>

    <div class="relative w-full h-full">
        <div class="flex flex-col items-center justify-center w-full ">
            <img class="w-[50rem] h-full -mt-40 " src="{{ asset('assets/MAIN MATERIALS/MAIN_home-page_logo.webp') }}"
                alt="">
            <img src="{{ asset('assets/MAIN MATERIALS/VMG logo white2.png') }}" alt="">
        </div>

        <div class="relative flex flex-col items-center w-full h-full py-10 ">
            <div class="z-10 flex justify-center w-full h-full space-x-4">
                <!-- Countdown elements -->
                <div>
                    <div class="relative flex flex-col items-center justify-center w-full h-full bebas-neue-regular">
                        <img class="absolute inset-0 w-full h-full"
                            src="{{ asset('assets/MAIN MATERIALS/clock.webp') }}" alt="" style="z-index: -1;">
                        <div class="relative z-10 flex items-center justify-center w-full h-full text-white ">
                            <div class="absolute top-0 left-0 right-0 flex justify-center -mt-8">
                                <h1 class="text-sm text-white xl:text-lg">DAYS</h1>
                            </div>
                            <h1 id="days"
                                class="text-xl md:text-[5rem] lg:text-[5.5rem] px-6 py-4 md:px-12 md:py-20">
                                00
                            </h1>
                        </div>
                    </div>

                </div>
                <div>
                    <div class="relative flex flex-col items-center justify-center w-full h-full bebas-neue-regular">
                        <img class="absolute inset-0 w-full h-full"
                            src="{{ asset('assets/MAIN MATERIALS/clock.webp') }}" alt="" style="z-index: -1;">
                        <div class="relative z-10 flex items-center justify-center w-full h-full text-white ">
                            <div class="absolute top-0 left-0 right-0 flex justify-center -mt-8">
                                <h1 class="text-sm text-white xl:text-lg">HOURS</h1>
                            </div>
                            <h1 id="hours"
                                class="text-xl md:text-[5rem] lg:text-[5.5rem] px-6 py-4 md:px-12 md:py-20">
                                00
                            </h1>
                        </div>
                    </div>

                </div>
                <div>
                    <div class="relative flex flex-col items-center justify-center w-full h-full bebas-neue-regular">
                        <img class="absolute inset-0 w-full h-full"
                            src="{{ asset('assets/MAIN MATERIALS/clock.webp') }}" alt="" style="z-index: -1;">
                        <div class="relative z-10 flex items-center justify-center w-full h-full text-white ">
                            <div class="absolute top-0 left-0 right-0 flex justify-center -mt-8">
                                <h1 class="text-sm text-white xl:text-lg">MINUTES</h1>
                            </div>
                            <h1 id="minutes"
                                class="text-xl md:text-[5rem] lg:text-[5.5rem] px-6 py-4 md:px-12 md:py-20">
                                00
                            </h1>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="relative flex flex-col items-center justify-center w-full h-full bebas-neue-regular">
                        <img class="absolute inset-0 w-full h-full"
                            src="{{ asset('assets/MAIN MATERIALS/clock.webp') }}" alt="" style="z-index: -1;">
                        <div class="relative z-10 flex items-center justify-center w-full h-full text-white ">
                            <div class="absolute top-0 left-0 right-0 flex justify-center -mt-8">
                                <h1 class="text-sm text-white xl:text-lg">SECONDS</h1>
                            </div>
                            <h1 id="seconds"
                                class="text-xl md:text-[5rem] lg:text-[5.5rem] px-6 py-4 md:px-12 md:py-20">
                                00
                            </h1>
                        </div>
                    </div>
                </div>

            </div>
            <div>
                <h1 class="py-1 text-sm font-bold text-white xl:text-4xl">BEFORE TP FAIR 2024</h1>
            </div>
        </div>


    </div>
</div>

<a href="{{ route('tickets') }}">
    <div class="hidden md:block">
        <div>
            <img class="" src="{{ asset('assets/MAIN MATERIALS/TICKET-BANNER.webp') }}"
                alt="Ticket Banner">
        </div>
    </div>
    <div class="block md:hidden">
        <div>
            <img class="" src="{{ asset('assets/MAIN MATERIALS/HOME-PAGE-2_mobile.jpg') }}"
                alt="Ticket Banner">
        </div>
    </div>
</a>

<div class="relative h-full w-full bg-[#38247b]">
    <div class="container hidden py-10 mx-auto md:py-24 md:block">
        <img src="{{ asset('assets/MAIN MATERIALS/BRANDS LOGO/BRANDS-logo_FOR-DARK-BG-NEW.png') }}" alt="">
    </div>
    <div class="container block py-10 mx-auto md:py-24 md:hidden">
        <img src="{{ asset('assets/MAIN MATERIALS/HOME-PAGE-2_mobile_logo (1).webp') }}" alt="">
    </div>
</div>

@include('layouts.footer')


@endsection