DESKTOP-GBA0BK8\Admin
99 lines
4.0 KiB
React
99 lines
4.0 KiB
React
/* eslint-disable jsx-a11y/anchor-is-valid */
|
|
import React from "react";
|
|
import { instructorData } from "../../constant/dummyData";
|
|
|
|
const Team = () => {
|
|
return (
|
|
<div className=" section-padding">
|
|
<div className="container">
|
|
<div className="text-center">
|
|
<div className="mini-title">Team Member</div>
|
|
<div className="column-title ">
|
|
Our Expert <span className="shape-bg">Instructors</span>
|
|
</div>
|
|
</div>
|
|
<div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-7 pt-10">
|
|
{instructorData.map((item, index) => (
|
|
<div
|
|
className=" bg-white shadow-box3 rounded-md transition-all duration-100 text-center hover:shadow-box4 "
|
|
key={index}
|
|
>
|
|
<div className=" h-[270px] rounded-t-md relative mx-auto overflow-hidden">
|
|
<img
|
|
src={item.img}
|
|
alt=""
|
|
className=" w-full h-full object-cover rounded-t-md "
|
|
/>
|
|
<div className=" absolute right-0 bottom-0 flex flex-col justify-end items-end social-explore">
|
|
<button
|
|
type="button"
|
|
className="h-12 w-12 bg-secondary text-white rounded-tl-md flex flex-col items-center justify-center"
|
|
>
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect
|
|
opacity="0.01"
|
|
width="18"
|
|
height="18"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M9 2.25C9.62132 2.25 10.125 2.75368 10.125 3.375V7.875H14.625C15.2463 7.875 15.75 8.37868 15.75 9C15.75 9.62132
|
|
15.2463 10.125 14.625 10.125H10.125V14.625C10.125 15.2463 9.62132 15.75 9 15.75C8.37868 15.75 7.875 15.2463 7.875
|
|
14.625V10.125H3.375C2.75368 10.125 2.25 9.62132 2.25 9C2.25 8.37868 2.75368 7.875 3.375 7.875H7.875V3.375C7.875 2.75368
|
|
8.37868 2.25 9 2.25Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<ul className=" justify-center bg-primary rounded-tl-md transition-all duration-100 flex ">
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className=" text-xl leading-[1] text-white flex h-12 w-12 items-center justify-center"
|
|
>
|
|
<iconify-icon icon="bxl:facebook"></iconify-icon>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className=" text-xl leading-[1] text-white flex h-12 w-12 items-center justify-center"
|
|
>
|
|
<iconify-icon icon="bxl:twitter"></iconify-icon>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className=" text-xl leading-[1] flex h-12 w-12 items-center justify-center text-white "
|
|
>
|
|
<iconify-icon icon="bxl:linkedin"></iconify-icon>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="course-content p-6">
|
|
<h4 className=" lg:text-2xl text-1xl mb-1 font-bold">
|
|
{item.name}
|
|
</h4>
|
|
<div>{item.title}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Team;
|