export default function Index() {
    return(
        <section className="container mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 ">
                <div className="flex flex-col justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-6">
                    <div className="flex flex-row space-x-2">
                        <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
                            <img className=" " src="../../assets/calendar.svg" alt="" />
                        </div>
                        <p className="text-[32px] font-[800]">70%</p>
                    </div>
                    <p className="text-[16px] font-[600] text-[#414141] py-2">Average Attendance</p>
                </div>
                <div className="flex flex-col justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-6">
                    <div className="flex flex-row space-x-2">
                        <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
                            <img className=" " src="../../assets/cart.svg" alt="" />
                        </div>
                        <p className="text-[32px] font-[800]">02</p>
                    </div>
                    <p className="text-[16px] font-[600] text-[#414141] py-2">Total Certificates</p>
                </div>
                <div className="flex flex-col justify-center place-items-center border-r-[1px] border-[#CFCFCF] my-6">
                    <div className="flex flex-row space-x-2">
                        <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
                            <img className=" " src="../../assets/note.svg" alt="" />
                        </div>
                        <p className="text-[32px] font-[800]">12</p>
                    </div>
                    <p className="text-[16px] font-[600] text-[#414141] py-2">Tests Taken</p>
                </div>
                <div className="flex flex-col justify-center place-items-center my-6">
                    <div className="flex flex-row space-x-2">
                        <div className="w-[53px] h-[53px] bg-[#FFF1E3] rounded-full flex justify-center place-items-center">
                            <img className=" " src="../../assets/module.svg" alt="" />
                        </div>
                        <p className="text-[32px] font-[800]">0</p>
                    </div>
                    <p className="text-[16px] font-[600] text-[#414141] py-2">Modules Completed</p>
                </div>
            </div>
        </section>
    )
}