@extends('frontend.layouts.partials.app')
@section('title', 'Rate')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')

    <section
        class="grid h-screen w-full grid-cols-1  bg-slate-200 md:grid-cols-1 bg-gradient-to-r from-zinc-900 to-gray-900">

        <div class="flex flex-col justify-between bg-car  bg-no-repeat bg-fixed bg-cover bg-right md:bg-center ">
            <nav class="mt-5 border-b py-1">
                <ul class="flex justify-center">
                    <li class="py-2 px-3 text-2xl font-thin text-white  ">Home</li>
                    <li class="py-2 px-3 text-2xl font-thin text-white">Services</li>
                    <li class="py-2 px-3 text-2xl font-thin text-white" id='about'>About</li>
                    <li class="py-2 px-3 text-2xl font-thin text-white">Models</li>
                </ul>
            </nav>
            <div class="-mt-44 py-4 text-center text-6xl font-bold text-yellow-300">
                <span class="font-extralight">R8</span><br />
                <span class=" font-anybody">THE POWER</span>
            </div>
            <div class="flex items-center md:w-6/12 md:self-center">
                <div class="flex w-1/3 justify-center border-r py-4 px-4 gap-5 text-white">
                    <span>250 MPH</span>
                    <span class="material-icons">speed</span>

                </div>
                <div class="flex w-1/3 justify-center py-4 px-4 gap-5 text-white">
                    <span>300 km</span>
                    <span class="material-icons">
                        directions_car
                    </span>
                </div>
                <div class="flex w-1/3 justify-center border-l py-4 px-4 gap-5 text-white">
                    <span>SuperChargh</span>
                    <span class="material-icons">
                        bolt
                    </span>
                </div>
            </div>
        </div>
    </section>

    <section class=" w-5/6 m-auto mt-28 grid grid-col-1 gap-x-3 gap-y-10 md:grid-cols-2 max-w-6xl items-center">
        <div class="py-3 px-2">
            <h1 class="text-5xl mb-8">New interior</h1>
            <p1 class="text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in turpis at libero
                euismod luctus vel sit amet lorem.<br /> Maecenas lorem metus, semper in lobortis imperdiet, pulvinar sed
                felis. Maecenas aliquam velit in ligula tincidunt imperdiet. Integer interdum enim ut placerat dignissim.
                Maecenas turpis orci, facilisis vitae ligula non, luctus convallis risus. </p1>
        </div>
        <div class="py-3 px-2">
            <img src="https://vehint.com/wp-content/uploads/2020/10/audi_r8_green_hell_2021_1.jpg">
        </div>
    </section>

    <section
        class="w-full bg-lights md:py-52 py-28 md:bg-cover md:bg-center bg-contain my-20 border   bg-fixed bg-no-repeat ">
    </section>

    <section class=" w-5/6 m-auto mt-10 grid grid-col-1 gap-x-3 gap-y-10 md:grid-cols-2 max-w-6xl items-center mb-20  ">

        <div class="py-3 px-2">
            <img src="https://vehint.com/wp-content/uploads/2020/10/audi_r8_green_hell_2021_1.jpg">
        </div>

        <div class="py-3 px-2 ">
            <h1 class="text-5xl mb-8">New interior</h1>
            <p1 class="text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in turpis at libero
                euismod luctus vel sit amet lorem.<br /> Maecenas lorem metus, semper in lobortis imperdiet, pulvinar sed
                felis. Maecenas aliquam velit in ligula tincidunt imperdiet. Integer interdum enim ut placerat dignissim.
                Maecenas turpis orci, facilisis vitae ligula non, luctus convallis risus. </p1>
        </div>




    </section>
    <style>
        .bg-lights {
            background-image: url('https://i.pinimg.com/originals/bd/05/8f/bd058fbaee7be1f65cd197a41d774d91.jpg')
        }

        dialog {
            animation: show 0.3s linear
        }

        dialog::backdrop {
            background: black;

            opacity: 80%;
        }

        @keyframes show {
            from {
                opacity: 0;
            }

            to {
                opacity: 100%
            }
        }
    </style>

    <script>
        let about = document.querySelector('#about')

        window.addEventListener('load', function() {
            let dialog = document.querySelector('dialog')
            setTimeout(() => {
                dialog.showModal();
            }, 5000)
            dialog.querySelector('button').addEventListener('click', function() {
                dialog.close()
            })
        })
    </script>
@endsection