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 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="flex xs:flex-wrap justify-center mt-10">
|
||||
<div className="xs:m-2 lg:m-0">
|
||||
<Link
|
||||
href={`/categories/62b94d76-a025-4d08-a663-6cf8685d24c5/مراقبت پوست`}
|
||||
>
|
||||
<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={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="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>
|
||||
|
||||
<div className="xs:m-2 lg:m-0">
|
||||
<Link
|
||||
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>
|
||||
{/* 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>
|
||||
|
||||
<div className="xs:m-2 lg:m-0">
|
||||
<Link
|
||||
href={`/categories/9c95ca17-c041-497b-a7bf-b58b716e2155/آرایش ناخن`}
|
||||
>
|
||||
<div className="lg:w-[180px] xs:w-[75px] lg:h-[180px] xs:h-[75px] rounded-full mx-2 group tr03">
|
||||
{" "}
|
||||
<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={see}
|
||||
alt="آرایش ناخن فروشگاه اینترنتی وسمه"
|
||||
property
|
||||
loading="eager"
|
||||
/>{" "}
|
||||
</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>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-black text-sm mt-2"> آرایش ناخن</p>
|
||||
</div>
|
||||
</Link>
|
||||
</Link>
|
||||
))}
|
||||
</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 ">
|
||||
<Image
|
||||
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}
|
||||
height={600}
|
||||
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