under header
parent
ef57b68fbd
commit
ffb3e3e922
|
|
@ -6,161 +6,85 @@ import see from "../../../public/images/3.png";
|
||||||
import chr from "../../../public/images/4.png";
|
import chr from "../../../public/images/4.png";
|
||||||
import png from "../../../public/images/5.png";
|
import png from "../../../public/images/5.png";
|
||||||
import shs from "../../../public/images/6.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 React from "react";
|
||||||
|
import PersianNumber from "plugins/PersianNumber";
|
||||||
|
|
||||||
const CategoriesHero = () => {
|
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 (
|
return (
|
||||||
<div className="flex xs:flex-wrap justify-center mt-10">
|
<>
|
||||||
<div className="xs:m-2 lg:m-0">
|
<div className="grid xs:grid-cols-2 lg:grid-cols-5 gap-4 xs:px-5 lg:px-20">
|
||||||
<Link
|
{categories.map((category, index) => (
|
||||||
href={`/categories/62b94d76-a025-4d08-a663-6cf8685d24c5/مراقبت پوست`}
|
<Link href={category.url} key={index}>
|
||||||
>
|
<div className="rounded-lg overflow-hidden relative h-64 group cursor-pointer">
|
||||||
<div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2">
|
{/* Image as a background */}
|
||||||
{" "}
|
<div
|
||||||
<div className="flex justify-center relative">
|
className="absolute inset-0 bg-cover bg-center transition-transform duration-300 group-hover:scale-105"
|
||||||
<div className="absolute w-full">
|
style={{ backgroundImage: `url(${category.image.src})` }}
|
||||||
<div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
></div>
|
||||||
<Image
|
|
||||||
src={yek}
|
|
||||||
alt="مراقبت پوست فروشگاه اینترنتی وسمه"
|
|
||||||
property
|
|
||||||
loading="eager"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="mb-0 text-black text-sm mt-2">مراقبت پوست</p>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="xs:m-2 lg:m-0">
|
{/* Optional: Add a semi-transparent overlay for better text readability */}
|
||||||
<Link
|
<div className="absolute inset-0 bg-black opacity-20 group-hover:opacity-30 transition-opacity duration-300"></div>
|
||||||
href={`/categories/991c9adb-934d-43d6-9dab-e0ebde035d8e/آرایش لب`}
|
|
||||||
>
|
|
||||||
<div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2">
|
|
||||||
{" "}
|
|
||||||
<div className="flex justify-center relative">
|
|
||||||
<div className="absolute w-full">
|
|
||||||
<div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
|
||||||
<Image
|
|
||||||
src={doo}
|
|
||||||
alt="آرایش لب فروشگاه اینترنتی وسمه"
|
|
||||||
property
|
|
||||||
loading="eager"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="mb-0 text-black text-sm mt-2">آرایش لب</p>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="xs:m-2 lg:m-0">
|
{/* Text overlay */}
|
||||||
<Link
|
<div className="absolute bottom-0 p-4 right-0 z-10">
|
||||||
href={`/categories/9c95ca17-c041-497b-a7bf-b58b716e2155/آرایش ناخن`}
|
<p className="text-white text-right font-bold text-lg">
|
||||||
>
|
{category.name}
|
||||||
<div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2 group tr03">
|
</p>
|
||||||
{" "}
|
<p className="text-gray-300 text-right text-sm rtl">
|
||||||
<div className="flex justify-center relative">
|
+
|
||||||
<div className="absolute w-full">
|
<PersianNumber number={category.products} style={"mx-1"} />
|
||||||
<div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
محصول |
|
||||||
<Image
|
<PersianNumber number={category.brands} style={"mx-1"} />
|
||||||
src={see}
|
برند
|
||||||
alt="آرایش ناخن فروشگاه اینترنتی وسمه"
|
</p>
|
||||||
property
|
|
||||||
loading="eager"
|
|
||||||
/>{" "}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="mb-0 text-black text-sm mt-2"> آرایش ناخن</p>
|
|
||||||
</div>
|
|
||||||
</Link>
|
</Link>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
<div className="xs:m-2 lg:m-0">
|
|
||||||
<Link
|
|
||||||
href={`/categories/7202f039-339e-44ff-90d8-113b2991a958/بهداشت جنسی`}
|
|
||||||
>
|
|
||||||
<div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2">
|
|
||||||
{" "}
|
|
||||||
<div className="flex justify-center relative">
|
|
||||||
<div className="absolute w-full">
|
|
||||||
<div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
|
||||||
<Image
|
|
||||||
src={chr}
|
|
||||||
alt="بهداشت جنسی فروشگاه اینترنتی وسمه"
|
|
||||||
property
|
|
||||||
loading="eager"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="mb-0 text-black text-sm mt-2">بهداشت جنسی</p>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="xs:m-2 lg:m-0">
|
|
||||||
<Link
|
|
||||||
href={`/categories/2e11e55c-0941-49f8-9d22-dfa21088f639/آرایش چشم`}
|
|
||||||
>
|
|
||||||
<div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2">
|
|
||||||
{" "}
|
|
||||||
<div className="flex justify-center relative">
|
|
||||||
<div className="absolute w-full">
|
|
||||||
<div className=" xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
|
||||||
<Image
|
|
||||||
src={png}
|
|
||||||
alt="آرایش چشم فروشگاه اینترنتی وسمه"
|
|
||||||
property
|
|
||||||
loading="eager"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="mb-0 text-black text-sm mt-2">آرایش چشم</p>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="xs:m-2 lg:m-0">
|
|
||||||
<Link
|
|
||||||
href={`/categories/7e92af7d-0370-451f-9770-5e26b5c8dc63/کرم پودر`}
|
|
||||||
>
|
|
||||||
<div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2">
|
|
||||||
{" "}
|
|
||||||
<div className="flex justify-center relative">
|
|
||||||
<div className="absolute w-full">
|
|
||||||
<div className="xs:w-[110px] lg:w-[240px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
|
|
||||||
<Image
|
|
||||||
src={shs}
|
|
||||||
alt="کرم پودر فروشگاه اینترنتی وسمه"
|
|
||||||
property
|
|
||||||
loading="eager"
|
|
||||||
/>{" "}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="mb-0 text-black text-sm mt-2">کرم پودر</p>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -436,7 +436,7 @@ const Navbar = ({ theme }) => {
|
||||||
<div className="absolute left-5 ">
|
<div className="absolute left-5 ">
|
||||||
<Image
|
<Image
|
||||||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${dataNav[navItemHover]?.mainImage}`}
|
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${dataNav[navItemHover]?.mainImage}`}
|
||||||
className=" !w-[250px] h-[250px] rounded-xl object-cover "
|
className=" !w-[250px] rounded-xl "
|
||||||
width={600}
|
width={600}
|
||||||
height={600}
|
height={600}
|
||||||
alt={`${dataNav[navItemHover]?.name} وسمه`}
|
alt={`${dataNav[navItemHover]?.name} وسمه`}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Loading…
Reference in New Issue