fix

src/components/NavBar/index.jsx

@@ -12,6 +12,7 @@ import { usePathname, useRouter } from "next/navigation";
 
 import logo from "../../assets/images/logo.png";
 import { useLocale } from "next-intl";
+import { ChevronDown } from "lucide-react";
 
 
 const theme = 1;
@@ -48,7 +49,7 @@ const Navbar = ({ items }) => {
   useEffect(() => {
     const handleScroll = () => {
       const scrollTop = window.scrollY;
-      setIsScrolled(scrollTop > 0);
+      setIsScrolled(scrollTop > 96);
     };
 
     window.addEventListener("scroll", handleScroll);
@@ -73,17 +74,37 @@ const Navbar = ({ items }) => {
       {/* <div className="bg-sky-900 p-3 flex">
         <p className="mb-0 text-white"> salam</p>
       </div> */}
+
       <div
-        className={` max-[1023px]:hidden  lg:block tr03  ${isScrolled
+        className={` max-[1023px]:hidden  lg:block tr03  ${!isScrolled && " lg:px-5 xl:px-20  "} `}
-          ? "fixed w-full !z-[1000] top-0 tr"
-          : "pt-10 xs:px-10 lg:px-5 xl:px-20 "
-          }`}
       >
+        <div className="mx-auto w-full flex justify-center ">
+          <Image src={`/images/logo-${locale}.png?v=1`} width={85} height={85} className="lg:w-auto" />
+        </div>
+        {isScrolled && (
+          <div className="w-full h-[76px]">
+
+        </div>
+)}
         <nav
-          className={`  ${locale === "en" ? "rtl  pl-1" : "ltr  pr-1"} flex justify-between w-full  items-center  ${isScrolled ? " bg-gray-100 " : " rounded-2xl"
+          className={`${locale === "en" ? "rtl  pl-1" : "ltr  pr-1"} flex justify-between w-full  items-center  ${isScrolled ? " bg-gray-100 fixed top-0 z-50 rounded-b-3xl " : " rounded-2xl"
             }
-          ${theme == 1 ? "bg-gray-100 " : " "}`}
+          ${theme == 1 ? "bg-gray-100 p-4" : " "}`}
         >
+          
+          {
+            isScrolled &&
+            (
+              <div className="relative rounded-lg  flex flex-col items-center rounded-tl-2xl justify-center my-auto">
+                <Image
+                  src={logo}
+                  width={75} height={75}
+                  alt="llc "
+                  className="mx-auto object-contain"
+                />
+              </div>
+            )
+          }
           {/* <div className={`w-full  ${locale === "en" ? "rtl" : "ltr"} px-4 py-4`}>
             <div className="flex">
 
@@ -95,29 +116,18 @@ const Navbar = ({ items }) => {
           </div> */}
           <div className={`w-full flex p-2  ${locale === "en" ? "ltr" : "rtl"} `}>
 
-            <div className="size-[75px] relative p-1 bg-white rounded-lg  flex flex-col items-center rounded-tl-2xl justify-center my-auto">
-              <Image
-                src={logo}
-                fill
-                alt="llc "
-                className="mx-auto object-contain"
-              />
 
-            </div>
 
             {items.map((item, index) => (
 
               <div
                 key={index}
-                className={` mx-2 px-2 w-fit text-sm  p-7 ${1
+                className={`mx-2 px-2 w-fit text-sm bg-visa2-200  rounded-full !text-white text-shadow relative group`}
-                  ? "bg-visa2-200  rounded-full !text-white text-shadow pb-1 relative"
-                  : ""
-                  } `}
                 onMouseEnter={() => {
                   // setHoverItemNavbar(index);
                   setActiveStepNavbar(item.documentId);
                 }}
-                onMouseLeave={() => {
+                onMouseLeave={(e) => {
                   // setHoverItemNavbar(-1);
                   setActiveStepNavbar(null);
                 }}
@@ -126,14 +136,14 @@ const Navbar = ({ items }) => {
                 <Link
                   href={`${item.link}`}
 
-                  className={`text-base font-medium whitespace-nowrap text-black`}
+                  className={`text-base font-medium whitespace-nowrap text-black  py-1 px-4 inline-flex items-center gap-4   rounded-lg group-hover:bg-gray-200`}
                 >
                   {item.title}
-                  {item.children.length > 0 && ""}
+                  {item.children.length > 0 && <ChevronDown size={16}/>}
                 </Link>
 
                 {item.children.length > 0 && item.documentId == activeStepNavbar && (
-                  <ul className="absolute left-0 mt-2 w-48 bg-white text-black rounded-lg shadow-lg z-50 overflow-hidden">
+                  <ul className="absolute left-0  w-48 bg-white text-black rounded-lg shadow-lg z-50 overflow-hidden">
                     {
                       item.children.map((c, index) => (
 
@@ -150,6 +160,7 @@ const Navbar = ({ items }) => {
               </div>
 
             ))}
+
           </div>
 
 
@@ -286,7 +297,7 @@ const Navbar = ({ items }) => {
                                 setResponsiveNavBarItemStep(index);
 
                                 setActiveStepNavbar(e.documentId);
-                              }else{
+                              } else {
                                 setClosNavbar(false)
                                 router.push(e.link)
                               }

src/components/Product/ProductDescription.jsx

@@ -1,10 +1,13 @@
-export default function ProductDescription({ description }) {
+import { getMessages } from "next-intl/server"
+
+export default async function ProductDescription({ description }) {
+    const t =  await getMessages()
     return (
         <div>
             {
                 description &&
                 <>
-                    <h2 className="text-2xl font-bold mb-4">Product Description</h2>
+                    <h2 className="text-2xl font-bold mb-4">{t.PDP.productDescription}</h2>
                     <div className="prose max-w-none">
                         <p className="content" dangerouslySetInnerHTML={{ __html: description }}></p>
                     </div>

src/components/Product/ProductProperties.jsx

@@ -1,9 +1,11 @@
+import { getMessages } from "next-intl/server"
 
 
-export default function ProductProperties({ properties }) {
+export default async function ProductProperties({ properties }) {
+    const t =  await getMessages()
     return (
         <div>
-            <h2 className="text-2xl font-bold mb-4">Product Specifications</h2>
+            <h2 className="text-2xl font-bold mb-4">{t.PDP.productSpecifications}</h2>
             <dl className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
                 {properties.map((prop) => (
                     <div key={prop.id} className="border-t border-gray-200 pt-6">

src/view/Landing/components/AboutUs.jsx

@@ -7,21 +7,21 @@ const AboutUs = () => {
   const t = useTranslations("HomePage.AboutUs")
   const locale = useLocale()
   return (
-    <div className=" min-h-[calc(100vh-108px)] flex flex-col items-center justify-center relative  ">
+    <>
-      <div className="max-w-screen-xl mx-auto">
-
-
       <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" className="absolute left-0 top-0 bottom-0 -z-10 right-0">
           <pattern id="diagonalLines" width="10" height="10" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
             <line x1="0" y1="0" x2="0" y2="10" stroke="#e2e8f0" stroke-width="1" />
           </pattern>
           <rect width="100%" height="100%" fill="url(#diagonalLines)" />
         </svg>
+    <div className=" min-h-[calc(100vh-108px)] flex flex-col items-center justify-center relative -mt-16 -z-10 ">
+      <div className="max-w-screen-xl mx-auto">
+
+
+    
         <div className="xs:px-3 md:px-10 md:container md:mx-auto ">
-          <div className="grid xs:grid-cols-1 lg:grid-cols-3 gap-5  items-center " dir={locale == "en" ? "rtl" : "ltr"} >
+          <div className=" gap-5  items-center " dir={locale == "en" ? "rtl" : "ltr"} >
-            <div className="mx-auto">
+            
-              <Image src={`/images/logo-${locale}.png?v=1`} width={350} height={350} className="xs:w-[200px] lg:w-auto" />
-            </div>
             <div className="text-left relative mb-10 col-span-2">
               <h2 className={
                 `text-4xl font-bold relative z-10 xs:text-center lg:text-left ${locale === "en" ? "lg:text-left" : "lg:text-right"}`
@@ -56,6 +56,7 @@ const AboutUs = () => {
         </div>
       </div>
     </div>
+            </>
   );
 };