export default function Index() {
    return (
        <div className='relative flex flex-col justify-center items-center shadow-lg w-full rounded-[10px] py-8 overflow-hidden' style={{ background: 'transparent' }}>
            <div className='absolute top-0 left-0 w-full h-2/5' style={{ backgroundImage: `url('../../assets/tutor.png')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)' }}></div>
            <div className='absolute bottom-0 left-0 w-full h-3/5' style={{background: 'linear-gradient(101.74deg, #4276C5 0.01%, #26529D 100.18%)'}}></div>
            <br /><br />
            <img className='w-[115px] h-[115px] border-[5px] border-[#3362AF] rounded-full z-10' src={`../../assets/tutor.png`} alt="Tutor" />
            <p className='z-10 text-[30px] font-[700] text-[#FFF]'>Sarah Anderson</p>
            <p className='z-10 '>
                <span className="text-[14px] font-[700] text-[#EF7A0C]">TUTOR </span>
                <span className="text-[#FFF]"> | </span>
                <span className="text-[14px] font-[600] text-[#FFF]">Graduate Program</span>
            </p>
            <div className="z-10 border-b-[1px] border-[#B8B8B8] w-full my-3"></div>
            <p className="z-10 text-[12px] font-[600] text-[#fff] text-center">Early Childhood Educator | 3 YRS of Experience</p>
        </div>
    );
}