fix

src/app/[locale]/product/[slug]/page.jsx

@@ -246,12 +246,9 @@ export default async function ProductPage({ params }) {
                             showPrice={product.showPrice}
                             category={product.category}
                             summery={product.summery}
+                            brand={product.brand}
                         />
-                        {
+                       
-                            product.brand && (
-                                <BrandInfo brand={product.brand} />
-                            )
-                        }
 
                     </div>
                 </div>

src/app/[locale]/products/[category]/page.jsx

@@ -1,3 +1,4 @@
+import graphql from "src/utils/graphql";
 import CategoriesData from "src/view/Categories";
 
 
@@ -61,12 +62,12 @@ query CategoriesAndBrands($locale:I18NLocaleCode,$slug:String!) {
 
 `
 export async function generateMetadata({ params }) {
-    const { locale, slug } = await params;
+    const { locale, category } = await params;
 
     // Fetch product SEO data from Strapi GraphQL API
     const data = await graphql(gql_metadata, {
         locale,
-        slug,
+        slug:category,
     });
 
     const productSEO = data?.categories?.[0]?.seo || data?.brands?.[0]?.seo;

src/components/NavBar/index.jsx

@@ -287,6 +287,9 @@ const Navbar = ({ items }) => {
                                 setResponsiveNavBarItemStep(index);
 
                                 setActiveStepNavbar(e.documentId);
+                              }else{
+                                setClosNavbar(false)
+                                router.push(e.link)
                               }
                             }}
                           >
@@ -334,7 +337,7 @@ const Navbar = ({ items }) => {
                                     className="bg-primary-50 rounded-lg my-1 p-2 "
                                     key={index}
                                   >
-                                    <p className="mb-0 text-sm">{s.name}</p>
+                                    <p className="mb-0 text-sm">{s.title}</p>
                                   </div>
                                 </Link>
                               ))}

src/components/Product/ProductGallery.jsx

@@ -30,11 +30,12 @@ export default function ProductGallery({ images }) {
     <div className="max-w-[500px] lg:min-w-[500px]">
       <div className="aspect-w-1 aspect-h-1 w-full rounded-lg overflow-hidden">
         <Image
+         
           src={selectedImage.url || "/placeholder.svg"}
           alt={selectedImage.alternativeText ?? ""}
           width={500}
           height={500}
-          className="object-contain cursor-pointer aspect-square "
+          className="object-contain cursor-pointer aspect-square border"
           onClick={() => openLightbox(images.findIndex((img) => img.documentId === selectedImage.documentId))}
         />
       </div>
@@ -47,7 +48,7 @@ export default function ProductGallery({ images }) {
             width={100}
             height={100}
             className={`object-cover cursor-pointer rounded-lg overflow-hidden ${
-              selectedImage.documentId === image.documentId ? "ring-2 ring-primary" : ""
+              selectedImage.documentId === image.documentId ? "ring-2 ring-primary/50" : ""
             }`}
             onClick={() => setSelectedImage(image)}
           />

src/components/Product/ProductInfo.jsx

@@ -8,9 +8,10 @@ import Link from "next/link";
 import ContactModal from "../ContactUs";
 import { useState } from "react";
 import { useTranslations } from "next-intl";
+import BrandInfo from "./BrandInfo";
 
 
-export default function ProductInfo({ title, price, discount, showPrice, category,summery }) {
+export default function ProductInfo({ title, price, discount, showPrice, category, summery, brand }) {
 
   const locale = useLocale()
 
@@ -31,8 +32,10 @@ export default function ProductInfo({ title, price, discount, showPrice, categor
   const t = useTranslations("ContactModal")
 
   return (
-    <div className="">
+    <div className="w-full">
       <ContactModal close={closeModal} open={open} />
+      <div className="flex items-start w-full justify-between">
+        <div>
           <h1 className="text-3xl font-bold">{title}</h1>
           <Link href={`/products/${category.slug}`} className="mt-4 flex items-center">
             <span className={`inline-flex items-center rounded-md bg-gray-100 px-2.5 py-0.5 text-sm font-medium text-gray-800 ltr`}>
@@ -40,7 +43,7 @@ export default function ProductInfo({ title, price, discount, showPrice, categor
               {category.title}
             </span>
           </Link>
-      <p>
+          <p className="text-sm opacity-75">
             {
               summery
             }
@@ -93,7 +96,16 @@ export default function ProductInfo({ title, price, discount, showPrice, categor
               )}
             </div>
           )}
-      <div className="mt-10">
+        </div>
+        <div>
+          {
+            brand && (
+              <BrandInfo brand={brand} />
+            )
+          }
+        </div>
+      </div>
+      <div className="mt-10 w-full border-t pt-10">
         {/* Replaced Button with Tailwind CSS */}
         <button onClick={openModal} className="w-full lg:w-fit px-8 ltr flex items-center justify-center py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors">
           <ShoppingCart className="mr-2 h-4 w-4" /> {t("cta")}

src/components/Product/ProductRelated.jsx

@@ -55,13 +55,16 @@ query Products_connection(
 
 const ProductRelated = ({ category, brand }) => {
   const [products, setProducts] = React.useState(null)
+
   const fetchProducts = async () => {
     const { products_connection: { nodes } } = await graphql(gql, {
-      categoryId: "",
+      categoryId: brand.documentId ? "" : category.documentId,
-      brandId: brand.documentId,
+      brandId: brand.documentId ? brand.documentId : "",
       locale: "en"
     })
+
     setProducts(nodes)
+
   }
 
   useEffect(() => {