export default function Index(){
    return(
        <>
            <section className='container-fluid bg-[#000] '>
                <div className="flex flex-row justify-center gap-x-8 py-6">
                    <p className="text-[42px] w-[42px] h-[31px]">✨</p>
                    <div className="flex flex-col justify-center place-items-center">
                        <p className="text-[#FFF] text-[24px] font-[700]"> Take an AI Generative Quiz</p>
                        <p className="text-[#FFF] text-[16px] font-[400]">Convert any text into an interactive quiz session</p>
                    </div>
                </div>
            </section>
            <button className="float-right absolute right-0 2xl:right-80 top-32 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>

            <section id="" className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8" >
                <div className="flex flex-col justify-center place-items-center space-y-3">
                    <img src="../../assets/image1.png" alt="" />
                    <p className="text-[32px] font-[600]">Are You Ready to take this Quiz?</p>
                    <p className="text-[20px] font-[400] text-[#525252]">Test Yourself and earn points for what you already know.</p>
                    <p className="text-[20px] font-[400] text-[#525252]"><span>10 Questions</span> &#8226; <span>30 minutes</span></p>
                    <div>
                        <button className="bg-[#000] text-[#FFF] text-[18px] text-[#FFF] font-[600] rounded-[8px] px-[100px] py-[15px] mt-[50px]">Start</button>
                    </div>
                </div>
            </section>
        </>
    )
}