92 lines
3.1 KiB
JavaScript
92 lines
3.1 KiB
JavaScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import yek from "../../../public/images/1.png";
|
||
import doo from "../../../public/images/2.png";
|
||
import see from "../../../public/images/3.png";
|
||
import chr from "../../../public/images/4.png";
|
||
import png from "../../../public/images/5.png";
|
||
import shs from "../../../public/images/6.png";
|
||
import back1 from "../../../public/images/back1.jpg";
|
||
import back2 from "../../../public/images/back2.jpg";
|
||
import back3 from "../../../public/images/back3.jpg";
|
||
import back4 from "../../../public/images/back4.jpg";
|
||
import back5 from "../../../public/images/back5.jpg";
|
||
import React from "react";
|
||
import PersianNumber from "plugins/PersianNumber";
|
||
|
||
const CategoriesHero = () => {
|
||
const categories = [
|
||
{
|
||
name: "مراقبت پوست",
|
||
url: "/categories/62b94d76-a025-4d08-a663-6cf8685d24c5/مراقبت%20پوست",
|
||
products: 300,
|
||
brands: 20,
|
||
image: back1,
|
||
},
|
||
{
|
||
name: "آرایش لب",
|
||
url: "/categories/991c9adb-934d-43d6-9dab-e0ebde035d8e/آرایش%20لب",
|
||
products: 30,
|
||
brands: 5,
|
||
image: back2,
|
||
},
|
||
{
|
||
name: "بهداشت جنسی",
|
||
url: "/categories/7202f039-339e-44ff-90d8-113b2991a958/بهداشت%20جنسی",
|
||
products: 200,
|
||
brands: 10,
|
||
image: back3,
|
||
},
|
||
{
|
||
name: "کرم پودر",
|
||
url: "/categories/7e92af7d-0370-451f-9770-5e26b5c8dc63/کرم%20پودر",
|
||
products: 250,
|
||
brands: 10,
|
||
image: back5,
|
||
},
|
||
{
|
||
name: "آرایش ناخن",
|
||
url: "/categories/9c95ca17-c041-497b-a7bf-b58b716e2155/آرایش%20ناخن",
|
||
products: 10,
|
||
brands: 2,
|
||
image: back4,
|
||
},
|
||
];
|
||
return (
|
||
<>
|
||
<div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-4 xs:px-5 lg:px-20">
|
||
{categories.map((category, index) => (
|
||
<Link href={category.url} key={index}>
|
||
<div className="rounded-lg overflow-hidden relative h-64 group cursor-pointer">
|
||
{/* Image as a background */}
|
||
<div
|
||
className="absolute inset-0 bg-cover bg-center transition-transform duration-300 group-hover:scale-105"
|
||
style={{ backgroundImage: `url(${category.image.src})` }}
|
||
></div>
|
||
|
||
{/* Optional: Add a semi-transparent overlay for better text readability */}
|
||
<div className="absolute inset-0 bg-black opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
|
||
|
||
{/* Text overlay */}
|
||
<div className="absolute bottom-0 p-4 right-0 z-10">
|
||
<p className="text-white text-right font-bold text-lg">
|
||
{category.name}
|
||
</p>
|
||
<p className="text-gray-300 text-right text-sm rtl">
|
||
+
|
||
<PersianNumber number={category.products} style={"mx-1"} />
|
||
محصول |
|
||
<PersianNumber number={category.brands} style={"mx-1"} />
|
||
برند
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default CategoriesHero;
|