DESKTOP-GBA0BK8\Admin
54 lines
2.0 KiB
React
54 lines
2.0 KiB
React
/* eslint-disable jsx-a11y/anchor-is-valid */
|
|
import React from "react";
|
|
import ct1 from "../../assets/images/icon/ct1.svg";
|
|
import ct2 from "../../assets/images/icon/ct2.svg";
|
|
import ct3 from "../../assets/images/icon/ct3.svg";
|
|
import ct4 from "../../assets/images/icon/ct4.svg";
|
|
import ct5 from "../../assets/images/icon/ct5.svg";
|
|
import ct6 from "../../assets/images/icon/ct6.svg";
|
|
const Categories = () => {
|
|
return (
|
|
<div className="feature-area bg-[url('../images/all-img/section-bg-6.png')] bg-cover bg-no-repeat bg-center section-padding">
|
|
<div className="container">
|
|
<div className="text-center">
|
|
<div className="mini-title">Course Categories</div>
|
|
<div className="column-title ">
|
|
Browse Top <span className="shape-bg">Categories</span>
|
|
</div>
|
|
</div>
|
|
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-[30px] pt-10">
|
|
{[ct1, ct2, ct3, ct4, ct5, ct6].map((item, index) => (
|
|
<a
|
|
className=" rounded-[8px] transition-all duration-300 hover:shadow-box bg-white flex space-x-5 p-[30px] border-l-4
|
|
border-white hover:border-primary"
|
|
href="#"
|
|
key={index}
|
|
>
|
|
<div className="w-[72px] h-[72px] rounded bg-white relative group-hover:bg-[#FFE8E8]">
|
|
<img
|
|
src={item}
|
|
alt=""
|
|
className="w-full h-full object-cover rounded "
|
|
/>
|
|
</div>
|
|
<div className="course-content">
|
|
<h4 className=" lg:text-2xl text-1xl mb-2 font-bold">
|
|
Data Science
|
|
</h4>
|
|
<p>{Math.floor(5 + Math.random() * 70)} Courses</p>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
<div className="text-center pt-[70px]">
|
|
<a href="#" className=" btn btn-primary">
|
|
View All Categories
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Categories;
|