bs-p2/app/components/ClassmateTutorSection.tsx

18 lines
1.4 KiB
TypeScript

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>
);
}