fix

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

@@ -217,8 +217,6 @@ export default async function ProductPage({ params }) {
     return (
         <div className="max-w-screen-xl mx-auto px-4 py-8 ">
             {/* <ColorAvg image={product.brand.image.url}/> */}
-
-
             <div className="flex flex-col lg:flex-row gap-8 items-center lg:items-start">
                 <ProductGallery images={product.images} />
                 <div className="flex flex-col gap-4 w-full ">
@@ -227,8 +225,6 @@ export default async function ProductPage({ params }) {
                             <Link href="/" className=" underline inline-flex gap-2">
                                 <Home />
                             </Link>
-
-
                             {
                                 product?.category?.slug &&
                                 <>
@@ -266,7 +262,6 @@ export default async function ProductPage({ params }) {
                             subcategories={product.subcategories}
                         />
 
-
                     </div>
                 </div>
             </div>

src/components/Product/ProductGallery.jsx

@@ -57,7 +57,7 @@ export default function ProductGallery({ images }) {
         />
       </div>
       <div className="mt-4 grid grid-cols-4 gap-1">
-        {images.slice(0, 4).map((image, index) => (
+        {images.slice(0, 4).map((image) => (
           <Image
             key={image.documentId}
             src={image.url || "/placeholder.svg"}
@@ -76,7 +76,7 @@ export default function ProductGallery({ images }) {
           <div className="relative max-w-4xl w-full">
             {/* Close Button */}
             <button
-              className="absolute top-4 right-4 p-2 rounded-full text-white hover:bg-gray-700 transition-colors"
+              className="absolute top-4 right-4 p-2 rounded-full text-white hover:bg-gray-700 transition-colors bg-gray-400 shadow-lg"
               onClick={closeLightbox}
             >
               <X className="h-6 w-6" />
@@ -93,7 +93,7 @@ export default function ProductGallery({ images }) {
 
             {/* Previous Button */}
             <button
-              className="absolute top-1/2 left-4 transform -translate-y-1/2 p-2 rounded-full text-white hover:bg-gray-700 transition-colors"
+              className="absolute top-1/2 left-4 transform -translate-y-1/2 p-2 rounded-full text-white hover:bg-gray-700 transition-colors bg-gray-400 shadow-lg"
               onClick={prevImage}
             >
               <ChevronLeft className="h-8 w-8" />
@@ -101,7 +101,7 @@ export default function ProductGallery({ images }) {
 
             {/* Next Button */}
             <button
-              className="absolute top-1/2 right-4 transform -translate-y-1/2 p-2 rounded-full text-white hover:bg-gray-700 transition-colors"
+              className="absolute top-1/2 right-4 transform -translate-y-1/2 p-2 rounded-full text-white hover:bg-gray-700 transition-colors bg-gray-400 shadow-lg"
               onClick={nextImage}
             >
               <ChevronRight className="h-8 w-8" />

src/view/Categories/components/Products.jsx

@@ -47,6 +47,7 @@ query Products_connection(
             ]
         }
         locale: $locale
+        sort: ["order:asc"]
     ) {
         nodes {
             documentId
@@ -84,6 +85,7 @@ query Products_connection(
 }
 
 
+
 `
 
 
@@ -132,7 +134,7 @@ const ProductsListingPage = () => {
     getProducts(category)
   }, [searchParams])
 
-  console.log("products", products)
+  
   const t = useTranslations("PLP")
   return (
     <>