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-1/2' 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-1/2' style={{background: 'linear-gradient(101.74deg, #4276C5 0.01%, #26529D 100.18%)'}}></div>
            <br /><br />
            <img className='w-[60px] h-[60px] border-[4px] border-[#FFF] 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>
            <hr className="z-10" />
            {/* <p className="z-10">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id a cum maxime iste dicta minus vitae harum saepe, assumenda esse sit autem qui quis deserunt adipisci omnis veniam incidunt? Placeat.</p> */}
        </div>
    );
}