alt image and loading pages

components/AppsComponent/CheckoutData/page.jsx

@@ -282,7 +282,7 @@ const CheckoutData = () => {
               }`}
             >
               <div>
-                <Image src={zarin} className="w-[50px]" alt="" />
+                <Image src={zarin} className="w-[50px]" alt="زرین پال" />
               </div>
               <div className="mx-2">
                 <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
@@ -294,7 +294,7 @@ const CheckoutData = () => {
 
             <div className="flex rtl px-2 py-1 mx-2 mt-5 opacity-40">
               <div>
-                <Image src={ap} className="w-[45px]" alt="" />
+                <Image src={ap} className="w-[45px]" alt="آپ" />
               </div>
               <div className="mx-2">
                 <h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">

components/AppsComponent/ProductData/page.jsx

@@ -141,14 +141,14 @@ const ProductData = ({ params }) => {
                       height={350}
                       className=" mx-auto !object-cover"
                       onClick={() => CTX.setIsOpenLightBox(true)}
-                      alt=""
+                      alt={`${product.persianName} - ${product.englishName}`}
                     />
                   ) : (
                     <div className="xs:!w-[85px] lg:!w-[85px] my-10 ">
                       <Image
                         src={logo}
                         className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
-                        alt=""
+                        alt="وسمه"
                       />
                     </div>
                   )}

components/AppsComponent/RootData/page.jsx

@@ -15,6 +15,7 @@ import "../../../style/fontiran.css";
 import "../../../style/globals.css";
 import Goftino from "plugins/Goftino/page";
 import { useRouter } from "next/navigation";
+import NextTopLoader from "nextjs-toploader";
 
 const RootData = ({ children }) => {
   const [cart, setCart] = useState([]);
@@ -357,6 +358,21 @@ const RootData = ({ children }) => {
       <Loading />
       <BottomSheetAddress />
       <BottomSheetLogOut />
+      <NextTopLoader
+        color="#2189A8"
+        initialPosition={0.08}
+        crawlSpeed={200}
+        height={8}
+        crawl={true}
+        showSpinner={true}
+        easing="ease"
+        speed={200}
+        shadow="0 0 10px #2299DD,0 0 5px #2299DD"
+        template='<div class="bar" role="bar"><div class="peg"></div></div> 
+  <div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
+        zIndex={1600}
+        showAtBottom={false}
+      />
 
       <Goftino />
     </AppContext.Provider>

components/Cards/CardCart/page.jsx

@@ -20,14 +20,14 @@ const CardCart = ({ data }) => {
               width={100}
               height={100}
               className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
-              alt=""
+              alt={`${data.persianName} - ${data.englishName}`}
             />
           ) : (
             <div className="xs:!w-[85px] lg:!w-[85px] ">
               <Image
                 src={logo}
                 className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
-                alt=""
+                alt="وسمه"
               />
             </div>
           )}

components/Cards/CardCategories/page.jsx

@@ -52,14 +52,14 @@ const CardCategories = ({ data }) => {
                   width={200}
                   height={200}
                   className="xs:!w-[110px] lg:!w-[130px] mx-auto"
-                  alt=""
+                  alt={`${data.persianName} - ${data.englishName}`}
                 />
               ) : (
                 <div className="xs:!w-[85px] lg:!w-[85px] h-[90px] mt-10 ">
                   <Image
                     src={logo}
                     className="xs:!w-[70px] lg:!w-[70px]  mx-auto  opacity-25 mt-5"
-                    alt=""
+                    alt="وسمه"
                   />
                 </div>
               )}

components/Cards/CardCategoriesMobile/page.jsx

@@ -22,14 +22,14 @@ const CardCategoriesMobile = ({ data }) => {
               width={200}
               height={200}
               className="xs:!w-[110px] lg:!w-[130px] mx-auto "
-              alt=""
+              alt={`${data.persianName} - ${data.englishName}`}
             />
           ) : (
             <div className="xs:!w-[85px] lg:!w-[85px] ">
               <Image
                 src={logo}
                 className="xs:!w-[70px] lg:!w-[70px] mx-auto  opacity-25 mt-5"
-                alt=""
+                alt="وسمه"
               />
             </div>
           )}

components/Cards/CardNormal/page.jsx

@@ -47,14 +47,14 @@ const CardNormal = ({ data }) => {
                   width={200}
                   height={200}
                   className="xs:!w-[110px] lg:!w-[130px] mx-auto"
-                  alt=""
+                  alt={`${data.persianName} - ${data.englishName}`}
                 />
               ) : (
                 <div className="xs:!w-[85px] lg:!w-[85px] h-[90px] xs:mt-5 lg:mt-10   ">
                   <Image
                     src={logo}
                     className="xs:!w-[70px] lg:!w-[70px]  mx-auto  opacity-25 mt-5"
-                    alt=""
+                    alt="وسمه"
                   />
                 </div>
               )}

components/Cards/CardSurprise/page.jsx

@@ -44,14 +44,14 @@ const CardSurprise = ({ data }) => {
                   width={100}
                   height={100}
                   className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
-                  alt=""
+                  alt={`${data.persianName} - ${data.englishName}`}
                 />
               ) : (
                 <div className="xs:!w-[85px] lg:!w-[85px] h-[90px] mt-10 ">
                   <Image
                     src={logo}
                     className="xs:!w-[70px] lg:!w-[70px]  mx-auto !object-cover opacity-25 mt-5"
-                    alt=""
+                    alt="وسمه"
                   />
                 </div>
               )}

components/Footer/page.jsx

@@ -8,7 +8,7 @@ const Footer = () => {
       <div className="bg-gray-100 p-5 pb-10 lg:flex rtl lg:px-20">
         <div className=" p-3 xs:w-full lg:w-8/12 mx-2 flex rtl">
           <div className="xs:w-[70px] lg:w-[100px]">
-            <Image src={logo} alt="" />
+            <Image src={logo} alt=" وسمه vesmeh" />
           </div>
           <div className="mr-3">
             <h3>

components/LandingPage/BetweenSexualSection/page.jsx

@@ -11,7 +11,11 @@ const BetweenSexualSection = () => {
         <div className="grid xs:grid-cols-1 lg:grid-cols-3 rtl ">
           <div className="  rounded-3xl overflow-hidden relative z-10">
             <div className="w-full">
-              <Image src={between} className=" object-cover" alt="" />
+              <Image
+                src={between}
+                className=" object-cover"
+                alt="بهداشت جنسی آقایان و بانوان"
+              />
             </div>
           </div>
 
@@ -43,7 +47,7 @@ const BetweenSexualSection = () => {
                         <Image
                           src={between1}
                           className=" object-cover"
-                          alt=""
+                          alt="لوازم بهداشت بانوان وسمه"
                         />
                       </div>
                     </div>
@@ -67,7 +71,7 @@ const BetweenSexualSection = () => {
                         <Image
                           src={between2}
                           className=" object-cover"
-                          alt=""
+                          alt="لوازم بهداشت آقایان وسمه"
                         />
                       </div>
                     </div>

components/LandingPage/HeroSection/page.jsx

@@ -28,7 +28,7 @@ const HeroSection = () => {
               <div className="flex justify-center">
                 <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="" />
+                    <Image src={yek} alt="مراقبت پوست فروشگاه اینترنتی وسمه" />
                   </div>
                 </div>
               </div>
@@ -48,7 +48,7 @@ const HeroSection = () => {
               <div className="flex justify-center">
                 <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="" />
+                    <Image src={doo} alt="آرایش لب فروشگاه اینترنتی وسمه" />
                   </div>
                 </div>
               </div>
@@ -68,7 +68,7 @@ const HeroSection = () => {
               <div className="flex justify-center">
                 <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="" />{" "}
+                    <Image src={see} alt="آرایش ناخن فروشگاه اینترنتی وسمه" />{" "}
                   </div>
                 </div>
               </div>
@@ -88,7 +88,7 @@ const HeroSection = () => {
               <div className="flex justify-center">
                 <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="" />
+                    <Image src={chr} alt="بهداشت جنسی فروشگاه اینترنتی وسمه" />
                   </div>
                 </div>
               </div>
@@ -108,7 +108,7 @@ const HeroSection = () => {
               <div className="flex justify-center">
                 <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="" />
+                    <Image src={png} alt="آرایش چشم فروشگاه اینترنتی وسمه" />
                   </div>
                 </div>
               </div>
@@ -128,7 +128,7 @@ const HeroSection = () => {
               <div className="flex justify-center">
                 <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="" />{" "}
+                    <Image src={shs} alt="کرم پودر فروشگاه اینترنتی وسمه" />{" "}
                   </div>
                 </div>
               </div>

components/LandingPage/HomeSection/page.jsx

@@ -11,7 +11,11 @@ const HomeSection = ({ data }) => {
         <div className="grid xs:grid-cols-1 lg:grid-cols-3 rtl ">
           <div className="rounded-3xl overflow-hidden relative z-10">
             <div className="w-full">
-              <Image src={khane} className="object-cover" alt="" />
+              <Image
+                src={khane}
+                className="object-cover"
+                alt="لوازم بهداشتی منزل وسمه"
+              />
             </div>
           </div>
 

components/LandingPage/SurpriseSection/page.jsx

@@ -5,7 +5,10 @@ import { Swiper, SwiperSlide } from "swiper/react";
 const SurpriseSection = ({ data }) => {
   console.log("sss injaaaha", data);
   return (
-    <section className="mb-10 pb-10 xs:bg-red-500 lg:bg-transparent xs:mx-3 lg:mx-0 xs:px-5 lg:px-0 xs:rounded-3xl lg:rounded-[0px] mt-20">
+    <section
+      className="mb-10 pb-10 xs:bg-red-500 lg:bg-transparent xs:mx-3 lg:mx-0 xs:px-5 lg:px-0 xs:rounded-3xl lg:rounded-[0px] mt-20"
+      id="offer"
+    >
       <div className=" relative xs:hidden lg:block  ">
         <div className="w-full flex justify-end absolute ">
           <svg

components/Navbar/SideBarNavBarMobile/page.jsx

@@ -63,7 +63,7 @@ const SideBarNavBarMobile = () => {
                         src={logo}
                         width={60}
                         height={60}
-                        alt=""
+                        alt="وسمه"
                         className="mx-auto"
                       />
                     </div>

components/Navbar/page.jsx

@@ -1,7 +1,7 @@
 "use client";
 import Image from "next/image";
 import { useContext, useEffect, useState } from "react";
-import cover from "../../public/images/cover.png";
+import cover from "../../public/images/navbar/n1.jpg";
 import divider from "../../public/images/divider.png";
 import logoWhite from "../../public/images/logo-white.png";
 import logoBlack from "../../public/images/logo.png";
@@ -75,7 +75,10 @@ const Navbar = ({ theme }) => {
               }  `}
             >
               <Link href={"/"}>
-                <Image src={theme == 0 ? logoWhite : logoBlack} alt="" />
+                <Image
+                  src={theme == 0 ? logoWhite : logoBlack}
+                  alt="وسمه vesmeh"
+                />
               </Link>
             </div>
 
@@ -207,10 +210,23 @@ const Navbar = ({ theme }) => {
               ))}
             </div>
 
-            <div className="bg-red-600 mb-4 px-4 rounded-full">
+            <div
+              onClick={() => {
+                const element = document.getElementById("offer");
+                if (element) {
+                  const offset = -80; // Adjust this value as needed
+                  window.scrollTo({
+                    top: element.offsetTop + offset,
+                    behavior: "smooth",
+                  });
+                }
+              }}
+            >
+              <div className="bg-red-600 mb-4 px-4 h-fit mt-1 mr-2 rounded-full cursor-pointer">
                 <p className="mb-0 text-white">بمب امروز </p>
               </div>
             </div>
+          </div>
 
           <div
             className="flex justify-center  "
@@ -294,17 +310,18 @@ const Navbar = ({ theme }) => {
                       </ul>
                     </div>
 
-                    <div className=" mx-2 p-5 w-10/12">
-                      <div className=" mx-2 h-[300px] w-full bg-red-900 rounded-[60px] overflow-hidden relative border-[3px] border-gray-50">
-                        <div className="absolute">
+                    <div className=" w-[230px]">
+                      <div className="absolute left-5">
                         <Image
-                            src={cover}
-                            className="h-[300px] object-cover brightness-50"
-                            alt=""
+                          src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${dataNav[navItemHover]?.mainImage}`}
+                          className=" !w-[230px]  rounded-xl   "
+                          width={300}
+                          height={300}
+                          alt={`${dataNav[navItemHover]?.name} وسمه`}
                         />
                       </div>
 
-                        <div className=" mt-[90px] relative">
+                      {/* <div className=" mt-[90px] w-[230px] relative">
                         <div className="flex justify-center">
                           <div className="w-[50px] h-[50px] rounded-full bg-white mt-5 ">
                             <svg
@@ -322,11 +339,10 @@ const Navbar = ({ theme }) => {
                             </svg>
                           </div>
                         </div>
-                          <p className="mb-0 w-full text-white bg-navbar mt-3 text-center">
+                        <p className="mb-0 w-full text-primary-500 bg-primary-100 mt-3 text-center">
                           چرا آرایشی وسمه ؟
                         </p>
-                        </div>
-                      </div>
+                      </div> */}
                     </div>
                   </div>
                 </div>
@@ -352,9 +368,15 @@ const Navbar = ({ theme }) => {
             <Link href={"/"}>
               <div className="w-[70px] mt-[6px]  z-10  ">
                 {isScrolled ? (
-                  <Image src={theme == 0 ? logoBlack : logoBlack} alt="" />
+                  <Image
+                    src={theme == 0 ? logoBlack : logoBlack}
+                    alt="وسمه vesmeh"
+                  />
                 ) : (
-                  <Image src={theme == 0 ? logoWhite : logoBlack} alt="" />
+                  <Image
+                    src={theme == 0 ? logoWhite : logoBlack}
+                    alt="وسمه vesmeh"
+                  />
                 )}
               </div>
             </Link>

package-lock.json

@@ -13,6 +13,7 @@
         "framer-motion": "^10.16.16",
         "jalali-moment": "^3.3.11",
         "next": "14.0.4",
+        "nextjs-toploader": "^1.6.6",
         "rc-slider": "^10.5.0",
         "react": "^18",
         "react-dom": "^18",
@@ -441,6 +442,11 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/nprogress": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.3.tgz",
+      "integrity": "sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA=="
+    },
     "node_modules/@types/warning": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
@@ -3403,6 +3409,21 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/nextjs-toploader": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/nextjs-toploader/-/nextjs-toploader-1.6.6.tgz",
+      "integrity": "sha512-LKow/aV28/DLhj4yH1E8ydF/I5QDNsb5NqlbsXBaIVFrmZ9/OGHyxPLdumvPE2IOYoQdvJ4XWoaCA1v7aivYBg==",
+      "dependencies": {
+        "@types/nprogress": "^0.2.2",
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "next": ">= 6.0.0",
+        "react": ">= 16.0.0",
+        "react-dom": ">= 16.0.0"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -3427,6 +3448,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "framer-motion": "^10.16.16",
     "jalali-moment": "^3.3.11",
     "next": "14.0.4",
+    "nextjs-toploader": "^1.6.6",
     "rc-slider": "^10.5.0",
     "react": "^18",
     "react-dom": "^18",

plugins/Gallery/page.jsx

@@ -25,14 +25,14 @@ const GalleryBox = ({ file }) => {
               height={350}
               className=" mx-auto !object-cover"
               onClick={() => CTX.setIsOpenLightBox(true)}
-              alt=""
+              alt={file[0].fileName}
             />
           ) : (
             <div className="xs:!w-[85px] lg:!w-[85px] ">
               <Image
                 src={logo}
                 className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
-                alt=""
+                alt="وسمه"
               />
             </div>
           )}

src/app/login/page.jsx

@@ -120,7 +120,7 @@ const Login = () => {
         <div className="bg-white p-10 rounded-3xl">
           <div className=" flex justify-center">
             <div className="w-[100px]">
-              <Image src={logo} className="mx-auto" alt="" />
+              <Image src={logo} className="mx-auto" alt="ورود و عضویت وسمه" />
             </div>
           </div>
           {stepLogin == 0 ? (