web/components/LandingPage/CategoriesHero/page.jsx

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;