header

Dockerfile.x

@@ -15,5 +15,5 @@ CMD ["node_modules/.bin/next", "start"]
 
 
 
-# docker build -f Dockerfile.x -t registry.vnfco.ir/netinashop/vesmeh:1.0.2.4 .
-#  docker push registry.vnfco.ir/netinashop/vesmeh:1.0.2.4
+# docker build -f Dockerfile.x -t registry.vnfco.ir/netinashop/vesmeh:1.0.4.6 .
+#  docker push registry.vnfco.ir/netinashop/vesmeh:1.0.4.6

components/AppsComponent/RootData/page.jsx

@@ -57,6 +57,8 @@ const RootData = ({ children }) => {
   const [cosmeticData, setCosmeticData] = useState([]);
   const [HomeCosmeticData, setHomeCosmeticData] = useState([]);
   const [sunCreamData, setSunCreamData] = useState([]);
+  const [eyeCosmeticData, setEyeCosmeticData] = useState([]);
+  const [hairCosmeticData, setHairCosmeticData] = useState([]);
 
   const [isChecked, setIsChecked] = useState(false);
   const [selectedBrands, setSelectedBrands] = useState([]);
@@ -454,6 +456,22 @@ const RootData = ({ children }) => {
     setHomeCosmeticData(HomeCosmetic);
   };
 
+  const fetchEyeCosmetic = async () => {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/product?page=0&categoryId=2e11e55c-0941-49f8-9d22-dfa21088f639`
+    );
+    const eyeCosmetic = await res.json();
+    setEyeCosmeticData(eyeCosmetic);
+  };
+
+  const fetchHairCosmetic = async () => {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/product?page=0&categoryId=3df995d4-6a36-4de2-9557-a5c3304529fe`
+    );
+    const hairCosmetic = await res.json();
+    setHairCosmeticData(hairCosmetic);
+  };
+
   const fetchSunCream = async () => {
     const res = await fetch(
       `${process.env.NEXT_PUBLIC_API_URL}/product?page=0&categoryId=df80c111-087f-4b2d-bc32-c44d660e76f2`
@@ -541,6 +559,8 @@ const RootData = ({ children }) => {
           HomeCosmeticData,
           specialOfferData,
           sunCreamData,
+          eyeCosmeticData,
+          hairCosmeticData,
         },
         setCart,
         setProducts,
@@ -571,6 +591,7 @@ const RootData = ({ children }) => {
         setCooperationSystemProfileContractData,
         setCooperationSystemProfileData,
         setIsSearched,
+        setEyeCosmeticData,
         AddItemToCart,
         RemoveItemFromCart,
         fetchNavData,
@@ -589,10 +610,13 @@ const RootData = ({ children }) => {
         setHomeCosmeticData,
         setCosmeticData,
         setSpecialOfferData,
+        setHairCosmeticData,
         fetchHomeCosmetic,
         fetchCosmetic,
         fetchSpecialOffer,
         fetchSunCream,
+        fetchEyeCosmetic,
+        fetchHairCosmetic,
       }}
     >
       {children}

components/LandingPage/CategoriesHero/page.jsx

@@ -0,0 +1,167 @@
+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 React from "react";
+
+const CategoriesHero = () => {
+  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="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>
+
+      <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>
+              </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/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>
+  );
+};
+
+export default CategoriesHero;

components/LandingPage/EyeSection/page.jsx

@@ -0,0 +1,80 @@
+import CardNormal from "@comp/Cards/CardNormal/page";
+import Link from "next/link";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+const EyeSection = ({ data }) => {
+  return (
+    <section className="mb-10 pb-10 xs:bg-sky-500 lg:bg-transparent xs:mx-3 lg:mx-0 xs:px-5 lg:px-0 xs:rounded-3xl lg:rounded-[0px] xs:mt-0 lg:mt-20">
+      <div className=" relative xs:hidden lg:block  ">
+        <div className="w-full flex justify-end absolute ">
+          <svg
+            width="700"
+            height="400"
+            viewBox="0 0 1037 590"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className="mr-[20px]"
+          >
+            <path
+              d="M25.6693 0H1012C1025.81 0 1037 11.1929 1037 25V565C1037 578.807 1025.81 590 1012 590H371.096C362.569 590 354.631 585.654 350.036 578.472L4.60942 38.4715C-6.03513 21.8311 5.91551 0 25.6693 0Z"
+              fill="#219EBC"
+            />
+          </svg>
+        </div>
+      </div>
+
+      <div className="xs:px-0 lg:px-20">
+        <div className="w-full rtl relative  ">
+          <div className="pt-5 flex relative justify-between">
+            <h2 className="mb-0 text-white  font-bold  xs:text-sm lg:text-2xl xl:text-2xl">
+              آرایش چشم{" "}
+            </h2>
+          </div>
+        </div>
+        <Swiper
+          spaceBetween={50}
+          slidesPerView={6.2}
+          // onSlideChange={() => console.log("slide change")}
+          className="rtl relative mt-5"
+          // dir="rtl"
+          breakpoints={{
+            320: {
+              slidesPerView: 1.3,
+            },
+            480: {
+              slidesPerView: 2,
+            },
+            768: {
+              slidesPerView: 3,
+            },
+            1024: {
+              slidesPerView: 4.5,
+            },
+            1440: {
+              slidesPerView: 6,
+            },
+          }}
+        >
+          {data?.map((e, index) => (
+            <SwiperSlide key={index}>
+              <CardNormal data={e} priority />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+
+        <Link
+          href={"/categories/df80c111-087f-4b2d-bc32-c44d660e76f2/ضد-آفتاب"}
+          className="z-90 relative"
+        >
+          <div className="mx-5 mt-8">
+            <p className="mb-0 text-sm text-gray-600 xs:text-white md:text-black">
+              مشاهده بیشتر{" "}
+            </p>
+          </div>
+        </Link>
+      </div>
+    </section>
+  );
+};
+
+export default EyeSection;

components/LandingPage/HeroSection/page.jsx

@@ -1,175 +1,110 @@
+import { useState, useEffect } from "react";
 import Image from "next/image";
+import ban1 from "@img/ban1.jpg";
+import ban2 from "@img/ban2.jpg";
+import ban3 from "@img/ban3.jpg";
+import ban1res from "@img/ban1res.jpg";
+import ban2res from "@img/ban2res.jpg";
+import ban3res from "@img/ban3res.jpg";
 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";
+
+const slides = [
+  {
+    id: 1,
+    image: ban1,
+    imageResponsive: ban1res,
+    title: "محصولات هیدرودرم",
+    description: "Slide 1 Description",
+    url: "/categories/0/%D9%87%D9%85%D9%87%20%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA?page=0&brandIds=677cfbc5-2aa0-42f2-90ec-69073058e76e",
+  },
+  {
+    id: 2,
+    image: ban2,
+    imageResponsive: ban2res,
+    title: "محصولات فولیکا",
+    description: "Slide 2 Description",
+    url: "/categories/0/%D9%87%D9%85%D9%87%20%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA?brandIds=30be42fe-633b-4c43-886b-c946a68dddcc&page=0",
+  },
+  {
+    id: 3,
+    image: ban3,
+    imageResponsive: ban3res,
+    title: "محصولات بیول",
+    description: "Slide 3 Description",
+    url: "/categories/0/%D9%87%D9%85%D9%87%20%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA?page=0&brandIds=93a2a376-5a18-49f3-b29c-a3c8ef2ff133",
+  },
+  // Add more slides as needed
+];
 
 const HeroSection = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % slides.length);
+    }, 8000); // 8 seconds interval
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const goToSlide = (index) => {
+    setCurrentIndex(index);
+  };
+
   return (
-    <div className=" xs:mt-[150px] md:mt-[60px] xl:mt-[90px] relative">
-      <div className="text-center">
-        <h1 className=" xs:text-3xl lg:text-5xl  xl:text-6xl text-white font-bold">
-          وسمه ، بُن مضارع زیبایی
-        </h1>
-        <h2 className="text-gray-300 mt-4 xs:text-sm lg:text-lg xl:text-xl font-light ">
-          زیبایی شما در اولویت ماست{" "}
-        </h2>
-      </div>
-      <div className="flex xs:flex-wrap justify-center  xs:mt-[50px] lg:mt-[100px] xl:mt-[180px] ">
-        <div className="xs:m-2 lg:m-0">
-          <Link
-            href={`/categories/62b94d76-a025-4d08-a663-6cf8685d24c5/مراقبت پوست`}
-          >
-            <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
-              {" "}
-              <div className="flex justify-center relative">
-                <div className="absolute w-full">
-                  <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px] ">
-                    <Image
-                      src={yek}
-                      alt="مراقبت پوست فروشگاه اینترنتی وسمه"
-                      property
-                      loading="eager"
-                    />
-                  </div>
-                </div>
+    <>
+      <div className="relative w-full xs:h-[200px]  md:h-[400px] lg:h-[400px] xl:h-[650px] overflow-hidden lg:mt-[-18px] xs:mt-5 xs:rounded-2xl lg:rounded-none ">
+        <div
+          className="absolute flex transition-transform duration-500"
+          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+        >
+          {slides.map((slide) => (
+            <Link
+              href={slide.url}
+              key={slide.id}
+              className="w-full flex-shrink-0"
+            >
+              <div className="block lg:hidden xs:mx-2 lg:mx-0">
+                <Image
+                  src={slide.imageResponsive}
+                  alt={slide.title}
+                  className="!w-full xs:h-[200px]  md:h-[400px] lg:h-[400px] xl:h-[650px]  rounded-2xl lg:rounded-none object-cover"
+                  layout="responsive"
+                  width={800}
+                  height={600}
+                />
               </div>
-            </div>
-            <div className="text-center">
-              <p className="mb-0 text-white text-sm mt-2">مراقبت پوست</p>
-            </div>
-          </Link>
+              <div className="hidden lg:block">
+                <Image
+                  src={slide.image}
+                  alt={slide.title}
+                  className="!w-full xs:h-[200px]  md:h-[400px] lg:h-[400px] xl:h-[650px]   rounded-2xl lg:rounded-none object-cover "
+                  layout="responsive"
+                  width={800}
+                  height={600}
+                />
+              </div>
+            </Link>
+          ))}
         </div>
 
-        <div className="xs:m-2 lg:m-0">
-          <Link
-            href={`/categories/991c9adb-934d-43d6-9dab-e0ebde035d8e/آرایش لب`}
-          >
-            <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
-              {" "}
-              <div className="flex justify-center relative">
-                <div className="absolute w-full">
-                  <div className=" xs:w-[110px] lg:w-[170px] 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-white text-sm mt-2">آرایش لب</p>
-            </div>
-          </Link>
-        </div>
-
-        <div className="xs:m-2 lg:m-0">
-          <Link
-            href={`/categories/9c95ca17-c041-497b-a7bf-b58b716e2155/آرایش ناخن`}
-          >
-            <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2 group tr03">
-              {" "}
-              <div className="flex justify-center relative">
-                <div className="absolute w-full">
-                  <div className=" xs:w-[110px] lg:w-[170px] lg:ml-[-20px] xs:ml-[-15px] mt-[-10px]  ">
-                    <Image
-                      src={see}
-                      alt="آرایش ناخن فروشگاه اینترنتی وسمه"
-                      property
-                      loading="eager"
-                    />{" "}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="text-center">
-              <p className="mb-0 text-white text-sm mt-2"> آرایش ناخن</p>
-            </div>
-          </Link>
-        </div>
-
-        <div className="xs:m-2 lg:m-0">
-          <Link
-            href={`/categories/7202f039-339e-44ff-90d8-113b2991a958/بهداشت جنسی`}
-          >
-            <div className="lg:w-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
-              {" "}
-              <div className="flex justify-center relative">
-                <div className="absolute w-full">
-                  <div className=" xs:w-[110px] lg:w-[170px] 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-white 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-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
-              {" "}
-              <div className="flex justify-center relative">
-                <div className="absolute w-full">
-                  <div className=" xs:w-[110px] lg:w-[170px] 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-white 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-[130px] xs:w-[75px] lg:h-[130px] xs:h-[75px] bg-glass rounded-full mx-2">
-              {" "}
-              <div className="flex justify-center relative">
-                <div className="absolute  w-full">
-                  <div className=" xs:w-[110px] lg:w-[170px] 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-white text-sm mt-2">کرم پودر</p>
-            </div>
-          </Link>
+        <div className="absolute xs:bottom-3 md:bottom-10 lg:bottom-4 xl:bottom-[70px] 2xl:bottom-[70px]  left-1/2 transform -translate-x-1/2 flex space-x-2">
+          {slides.map((e, index) => (
+            <button
+              key={index}
+              onClick={() => goToSlide(index)}
+              className={`rounded-full xs:text-[11px] md:text-sm ${
+                index === currentIndex
+                  ? "bg-white w-fit xs:h-4 md:h-6 px-2 "
+                  : "bg-gray-100 opacity-40 xs:w-4 md:w-6 xs:h-4 md:h-6"
+              }`}
+            >
+              {index === currentIndex && e.title}
+            </button>
+          ))}
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

components/LandingPage/HomeSection/page.jsx

@@ -15,7 +15,7 @@ const HomeSection = ({ data }) => {
               <Image
                 src={khane}
                 className="object-cover"
-                alt="لوازم بهداشتی منزل وسمه"
+                alt="آرایش و بهداشت مو وسمه"
               />
             </div>
           </div>
@@ -23,7 +23,7 @@ const HomeSection = ({ data }) => {
           <div className="relative xs:left-[0px] lg:left-[30px] xs:top-[-35px] lg:top-0 col-span-2 z-0 rounded-3xl  xs:pr-5 lg:pr-[55px] xs:pt-[55px] lg:pt-3 xl:pt-10 pl-5 xs:pb-10 lg:pb-0">
             <div className="xs:block lg:flex">
               <h2 className="xs:text-2xl lg:text-xl xl:text-3xl font-bold">
-                لوازم بهداشتی منزل وسمه
+                آرایش و مراقبت مو
               </h2>
 
               <p className="mb-0 w-fit bg-sky-200 rounded-full py-1 px-3 xs:mr-0 lg:mr-2 xs:mt-2 lg:mt-0 xs:text-sm lg:text-sm xl:text-base ">

components/LandingPage/SurpriseSection/page.jsx

@@ -33,7 +33,7 @@ const SurpriseSection = ({ data }) => {
             <p className="mb-0 text-white  font-bold  xs:text-sm lg:text-2xl xl:text-2xl">
               پیشنهاد های ویژه امروز{" "}
             </p>
-            <TimerDown />
+            {/* <TimerDown /> */}
           </div>
         </div>
         <Swiper

package-lock.json

@@ -9,11 +9,12 @@
       "version": "0.1.1",
       "dependencies": {
         "@headlessui/react": "^1.7.17",
+        "@next/third-parties": "^14.2.5",
         "axios": "^1.6.5",
         "framer-motion": "^10.16.16",
         "jalali-moment": "^3.3.11",
         "lodash": "^4.17.21",
-        "next": "14.0.4",
+        "next": "^14.2.5",
         "nextjs-toploader": "^1.6.6",
         "rc-slider": "^10.5.0",
         "react": "^18",
@@ -681,9 +682,9 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
     "node_modules/@next/env": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.4.tgz",
-      "integrity": "sha512-irQnbMLbUNQpP1wcE5NstJtbuA/69kRfzBrpAD7Gsn8zm/CY6YQYc3HQBz8QPxwISG26tIm5afvvVbu508oBeQ=="
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
+      "integrity": "sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "14.0.4",
@@ -695,9 +696,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.4.tgz",
-      "integrity": "sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.5.tgz",
+      "integrity": "sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==",
       "cpu": [
         "arm64"
       ],
@@ -710,9 +711,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz",
-      "integrity": "sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.5.tgz",
+      "integrity": "sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==",
       "cpu": [
         "x64"
       ],
@@ -725,9 +726,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
-      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.5.tgz",
+      "integrity": "sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==",
       "cpu": [
         "arm64"
       ],
@@ -740,9 +741,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz",
-      "integrity": "sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.5.tgz",
+      "integrity": "sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==",
       "cpu": [
         "arm64"
       ],
@@ -755,9 +756,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz",
-      "integrity": "sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.5.tgz",
+      "integrity": "sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==",
       "cpu": [
         "x64"
       ],
@@ -770,9 +771,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz",
-      "integrity": "sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.5.tgz",
+      "integrity": "sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==",
       "cpu": [
         "x64"
       ],
@@ -785,9 +786,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz",
-      "integrity": "sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.5.tgz",
+      "integrity": "sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==",
       "cpu": [
         "arm64"
       ],
@@ -800,9 +801,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz",
-      "integrity": "sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.5.tgz",
+      "integrity": "sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==",
       "cpu": [
         "ia32"
       ],
@@ -815,9 +816,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz",
-      "integrity": "sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.5.tgz",
+      "integrity": "sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==",
       "cpu": [
         "x64"
       ],
@@ -829,6 +830,18 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/third-parties": {
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/third-parties/-/third-parties-14.2.5.tgz",
+      "integrity": "sha512-PDRJm8RZ3rnGNporHKjcdCeZqoW8iJ5uP0clo1Z08TqJiQzuntJ66zrGYCJyqTakx62UJNOp73YsQCFo6kbYYg==",
+      "dependencies": {
+        "third-party-capital": "1.0.20"
+      },
+      "peerDependencies": {
+        "next": "^13.0.0 || ^14.0.0",
+        "react": "^18.2.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -870,11 +883,17 @@
       "integrity": "sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw==",
       "dev": true
     },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
+    },
     "node_modules/@swc/helpers": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
-      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
       "dependencies": {
+        "@swc/counter": "^0.1.3",
         "tslib": "^2.4.0"
       }
     },
@@ -1523,9 +1542,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001570",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001570.tgz",
-      "integrity": "sha512-+3e0ASu4sw1SWaoCtvPeyXp+5PsjigkSt8OXZbF9StH5pQWbxEjLAZE3n8Aup5udop1uRiKA7a4utUk/uoSpUw==",
+      "version": "1.0.30001642",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz",
+      "integrity": "sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==",
       "funding": [
         {
           "type": "opencollective",
@@ -2819,11 +2838,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
-    },
     "node_modules/globals": {
       "version": "13.24.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
@@ -3812,18 +3826,17 @@
       "dev": true
     },
     "node_modules/next": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.0.4.tgz",
-      "integrity": "sha512-qbwypnM7327SadwFtxXnQdGiKpkuhaRLE2uq62/nRul9cj9KhQ5LhHmlziTNqUidZotw/Q1I9OjirBROdUJNgA==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.5.tgz",
+      "integrity": "sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA==",
       "dependencies": {
-        "@next/env": "14.0.4",
-        "@swc/helpers": "0.5.2",
+        "@next/env": "14.2.5",
+        "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
-        "caniuse-lite": "^1.0.30001406",
+        "caniuse-lite": "^1.0.30001579",
         "graceful-fs": "^4.2.11",
         "postcss": "8.4.31",
-        "styled-jsx": "5.1.1",
-        "watchpack": "2.4.0"
+        "styled-jsx": "5.1.1"
       },
       "bin": {
         "next": "dist/bin/next"
@@ -3832,18 +3845,19 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.0.4",
-        "@next/swc-darwin-x64": "14.0.4",
-        "@next/swc-linux-arm64-gnu": "14.0.4",
-        "@next/swc-linux-arm64-musl": "14.0.4",
-        "@next/swc-linux-x64-gnu": "14.0.4",
-        "@next/swc-linux-x64-musl": "14.0.4",
-        "@next/swc-win32-arm64-msvc": "14.0.4",
-        "@next/swc-win32-ia32-msvc": "14.0.4",
-        "@next/swc-win32-x64-msvc": "14.0.4"
+        "@next/swc-darwin-arm64": "14.2.5",
+        "@next/swc-darwin-x64": "14.2.5",
+        "@next/swc-linux-arm64-gnu": "14.2.5",
+        "@next/swc-linux-arm64-musl": "14.2.5",
+        "@next/swc-linux-x64-gnu": "14.2.5",
+        "@next/swc-linux-x64-musl": "14.2.5",
+        "@next/swc-win32-arm64-msvc": "14.2.5",
+        "@next/swc-win32-ia32-msvc": "14.2.5",
+        "@next/swc-win32-x64-msvc": "14.2.5"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.3.0"
@@ -3852,6 +3866,9 @@
         "@opentelemetry/api": {
           "optional": true
         },
+        "@playwright/test": {
+          "optional": true
+        },
         "sass": {
           "optional": true
         }
@@ -4649,30 +4666,6 @@
         }
       }
     },
-    "node_modules/react-spring-bottom-sheet/node_modules/react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
-      },
-      "peerDependencies": {
-        "react": "17.0.2"
-      }
-    },
-    "node_modules/react-spring-bottom-sheet/node_modules/scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
     "node_modules/react-toastify": {
       "version": "9.1.3",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
@@ -5411,6 +5404,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/third-party-capital": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/third-party-capital/-/third-party-capital-1.0.20.tgz",
+      "integrity": "sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA=="
+    },
     "node_modules/throttle-debounce": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
@@ -5571,20 +5569,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -5684,18 +5668,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "node_modules/watchpack": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
-      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",

package.json

@@ -10,11 +10,12 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",
+    "@next/third-parties": "^14.2.5",
     "axios": "^1.6.5",
     "framer-motion": "^10.16.16",
     "jalali-moment": "^3.3.11",
     "lodash": "^4.17.21",
-    "next": "14.0.4",
+    "next": "^14.2.5",
     "nextjs-toploader": "^1.6.6",
     "rc-slider": "^10.5.0",
     "react": "^18",

src/app/layout.jsx

@@ -1,4 +1,6 @@
 import RootData from "@comp/AppsComponent/RootData/page";
+import { GoogleAnalytics } from "@next/third-parties/google";
+import { Suspense } from "react";
 
 export const metadata = {
   icons: {
@@ -86,7 +88,10 @@ export default function RootLayout({ children }) {
         />
       </head>
       <body>
-        <RootData>{children}</RootData>
+        <RootData>
+          <GoogleAnalytics gaId="G-Z5MGH649RY" />
+          <Suspense>{children}</Suspense>
+        </RootData>
       </body>
     </html>
   );

src/app/page.jsx

@@ -3,6 +3,8 @@ import Footer from "@comp/Footer/page";
 import BeautySection from "@comp/LandingPage/BeautySection/page";
 import BetweenSexualSection from "@comp/LandingPage/BetweenSexualSection/page";
 import BrandsLogoSection from "@comp/LandingPage/BrandsLogoSection/page";
+import CategoriesHero from "@comp/LandingPage/CategoriesHero/page";
+import EyeSection from "@comp/LandingPage/EyeSection/page";
 import HeroSection from "@comp/LandingPage/HeroSection/page";
 import HomeSection from "@comp/LandingPage/HomeSection/page";
 import SunCreamSection from "@comp/LandingPage/SunCreamSection/page";
@@ -10,6 +12,8 @@ import SurpriseSection from "@comp/LandingPage/SurpriseSection/page";
 import Navbar from "@comp/Navbar/page";
 import AppContext from "@ctx/AppContext";
 import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
 import { useContext, useEffect, useState } from "react";
 
 export default function Page() {
@@ -17,13 +21,15 @@ export default function Page() {
 
   const specialOfferData = CTX.state.specialOfferData;
   const cosmeticData = CTX.state.cosmeticData;
-  const HomeCosmeticData = CTX.state.HomeCosmeticData;
+  const eyeCosmeticData = CTX.state.eyeCosmeticData;
   const sunCreamData = CTX.state.sunCreamData;
+  const hairCosmeticData = CTX.state.hairCosmeticData;
 
   useEffect(() => {
     CTX.fetchSpecialOffer();
     CTX.fetchCosmetic();
-    CTX.fetchHomeCosmetic();
+    CTX.fetchEyeCosmetic();
+    CTX.fetchHairCosmetic();
     CTX.fetchSunCream();
   }, []);
   return (
@@ -31,9 +37,10 @@ export default function Page() {
       <Head>
         <title>My new cool app</title>
       </Head>
-      <div className="bg-header">
-        <Navbar theme={0} />
+      <div className="h-fit">
+        <Navbar />
         <HeroSection />
+        <CategoriesHero />
       </div>
 
       <SurpriseSection data={specialOfferData?.products} />
@@ -43,7 +50,9 @@ export default function Page() {
       <BrandsLogoSection />
 
       <BeautySection data={cosmeticData?.products} />
-      <HomeSection data={HomeCosmeticData?.products} />
+      <HomeSection data={hairCosmeticData?.products} />
+      <EyeSection data={eyeCosmeticData?.products} />
+
       <Footer />
     </>
   );

src/app/purchase-callback/page.jsx

@@ -4,9 +4,9 @@ import { useSearchParams } from "next/navigation";
 
 const Page = () => {
   const params = useSearchParams();
-  const refid = params.get("refid");
-  const paymentStatus = params.get("paymentStatus");
-  const factorNumber = params.get("factorNumber");
+  const refid = params?.get("refid");
+  const paymentStatus = params?.get("paymentStatus");
+  const factorNumber = params?.get("factorNumber");
 
   return (
     <>