103 lines
3.3 KiB
JavaScript
103 lines
3.3 KiB
JavaScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
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/3df995d4-6a36-4de2-9557-a5c3304529fe/آرایش-و-مراقبت-مو",
|
|
products: 300,
|
|
brands: 20,
|
|
image: back1,
|
|
},
|
|
{
|
|
name: "حالت دهنده و ژل مو",
|
|
url: "categories/9e1289e7-6c8e-4634-b57b-448268c7492e/حالت-دهنده-و-ژل-مو",
|
|
products: 20,
|
|
brands: 5,
|
|
image: back2,
|
|
},
|
|
{
|
|
name: "بهداشت جنسی",
|
|
url: "/categories/7202f039-339e-44ff-90d8-113b2991a958/بهداشت%20جنسی",
|
|
products: 200,
|
|
brands: 10,
|
|
image: back3,
|
|
},
|
|
{
|
|
name: "بهداشت دهان و دندان",
|
|
url: "categories/b7549222-87f7-4b0b-8938-210539b3a395/بهداشت-دهان-و-دندان",
|
|
products: 50,
|
|
brands: 10,
|
|
image: back5,
|
|
},
|
|
{
|
|
name: "لوازم اصلاح",
|
|
url: "/categories/70cffd9e-f475-4245-87bb-5f175d286901/لوازم-اصلاح",
|
|
products: 30,
|
|
brands: 10,
|
|
image: back4,
|
|
},
|
|
];
|
|
return (
|
|
<>
|
|
<div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-4 xs:px-2 lg:px-20 mt-10">
|
|
{categories.map((category, index) => (
|
|
<Link
|
|
href={category.url}
|
|
key={index}
|
|
className={` ${
|
|
index === categories.length - 1
|
|
? "xs:col-span-2 lg:col-span-1"
|
|
: " "
|
|
}`}
|
|
>
|
|
<div
|
|
className={`rounded-lg overflow-hidden relative xs:h-40 lg: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 xs:text-sm lg:text-lg">
|
|
{category.name}
|
|
</p>
|
|
<p className="text-gray-300 text-right xs:text-[11px] lg:text-sm rtl">
|
|
+
|
|
<PersianNumber
|
|
number={category.products}
|
|
style={"mx-1 xs:text-[11px] lg:text-sm"}
|
|
/>
|
|
محصول |
|
|
<PersianNumber
|
|
number={category.brands}
|
|
style={"mx-1 xs:text-[11px] lg:text-sm"}
|
|
/>
|
|
برند
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CategoriesHero;
|