bs-p2/app/components/ClassMates.tsx

let classmatesData = [
    {
        id: "1",
        name: "Daniel Nguyen",
        program: "Graduate Program",
        type: "Student",
        avatar: "avatar1.png"
    },
    {
        id: "2",
        name: "Sarah Anderson",
        program: "Post-Graduate Program",
        type: "Student",
        avatar: "avatar2.png"
    },
    {
        id: "3",
        name: "John Smith",
        program: "Undergraduate Program",
        type: "Student",
        avatar: "avatar3.png"
    },
    {
        id: "4",
        name: "Emily Davis",
        program: "Graduate Program",
        type: "Student",
        avatar: "avatar4.png"
    },
    {
        id: "5",
        name: "Michael Johnson",
        program: "Post-Graduate Program",
        type: "Student",
        avatar: "avatar5.png"
    },
    {
        id: "6",
        name: "Jessica Wilson",
        program: "Undergraduate Program",
        type: "Student",
        avatar: "avatar6.png"
    },
    {
        id: "7",
        name: "David Brown",
        program: "Graduate Program",
        type: "Student",
        avatar: "avatar1.png"
    },
    {
        id: "8",
        name: "Laura Lee",
        program: "Post-Graduate Program",
        type: "Student",
        avatar: "avatar2.png"
    },
    {
        id: "9",
        name: "Chris Miller",
        program: "Undergraduate Program",
        type: "Student",
        avatar: "avatar3.png"
    },
    {
        id: "10",
        name: "Sophia Taylor",
        program: "Graduate Program",
        type: "Student",
        avatar: "avatar4.png"
    },
    {
        id: "11",
        name: "James Anderson",
        program: "Post-Graduate Program",
        type: "Student",
        avatar: "avatar5.png"
    },
    {
        id: "12",
        name: "Olivia Thomas",
        program: "Undergraduate Program",
        type: "Student",
        avatar: "avatar6.png"
    },
    {
        id: "13",
        name: "Ethan Martinez",
        program: "Graduate Program",
        type: "Student",
        avatar: "avatar1.png"
    },
    {
        id: "14",
        name: "Ava Garcia",
        program: "Post-Graduate Program",
        type: "Student",
        avatar: "avatar2.png"
    },
    {
        id: "15",
        name: "Noah Rodriguez",
        program: "Undergraduate Program",
        type: "Student",
        avatar: "avatar3.png"
    },
    {
        id: "16",
        name: "Mia Martinez",
        program: "Graduate Program",
        type: "Student",
        avatar: "avatar4.png"
    },
    {
        id: "17",
        name: "Lucas Wilson",
        program: "Post-Graduate Program",
        type: "Student",
        avatar: "avatar5.png"
    },
    {
        id: "18",
        name: "Isabella Clark",
        program: "Undergraduate Program",
        type: "Student",
        avatar: "avatar6.png"
    },
    {
        id: "19",
        name: "Liam Walker",
        program: "Graduate Program",
        type: "Student",
        avatar: "avatar1.png"
    },
    {
        id: "20",
        name: "Charlotte Lewis",
        program: "Post-Graduate Program",
        type: "Student",
        avatar: "avatar2.png"
    }
];
export default function Index() {
    return (
        <div className=''>
            <p className='text-[18px] font-[700] text-[#525252] border-b-[1px] border-b-[#CFCFCF] py-5 pl-5 container-fluid'>
                <span>Your Classmates </span>&nbsp; | &nbsp;<span>Graduate Program</span>
            </p>
            <div className='container mx-auto grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 place-items-center p-6'>
                {classmatesData.map(data => (
                    <div key={data.id} 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/${data.avatar}')`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'blur(8px)'}}></div>
                        <div className='absolute bottom-0 left-0 w-full h-1/2 bg-[#FFF] '></div><br /><br />
                        <img className='w-[60px] h-[60px] border-[4px] border-[#FFF] rounded-full z-10' src={`../../assets/${data.avatar}`} alt="" />
                        <p className='z-10 text-[16px] font-[700] text-[]'>{data.name}</p>
                        <p className='z-10 text-[12px] font-[500] text-[#6E6E6E]'>
                            <span>{data.program}</span> | <span>{data.type}</span>
                        </p>
                    </div>
                ))}
            </div>
        </div>
    );
}



{/* <div className="h-[90px] bg-cover bg-center w-full" style={{ backgroundImage: `url('../../assets/${data.avatar}')` }}>
    <img className='w-[60px] h-[60px]' src={`../../assets/${data.avatar}`} alt="" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quasi nisi eligendi consectetur sequi nemo doloribus, obcaecati corrupti dolorum dolores omnis magni similique. Debitis unde nam, magnam maxime magni repudiandae.</p>
</div> */}