fix

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "cross-env NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "cross-env": "^7.0.3",
     "eslint": "^9",
     "eslint-config-next": "15.1.6",
     "postcss": "^8",

pnpm-lock.yaml

@@ -49,6 +49,9 @@ devDependencies:
   '@eslint/eslintrc':
     specifier: ^3
     version: 3.2.0
+  cross-env:
+    specifier: ^7.0.3
+    version: 7.0.3
   eslint:
     specifier: ^9
     version: 9.20.1
@@ -1049,6 +1052,14 @@ packages:
     resolution: {integrity: sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ==}
     dev: false
 
+  /cross-env@7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+    dependencies:
+      cross-spawn: 7.0.6
+    dev: true
+
   /cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}

src/app/[locale]/layout.jsx

@@ -48,7 +48,7 @@ const fetchNavbarItems = async () => {
 // app/[locale]/page.js
 
 export const generateMetadata = async ({ params }) => {
-  const { locale } = params;
+  const { locale } = await params
   const t = await getMessages(locale)
   // Define titles and descriptions for each locale
 

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

@@ -89,7 +89,8 @@ const getProduct = async (slug) => {
 };
 
 export default async function ProductPage({ params }) {
-    const product = await getProduct(params.slug);
+    const { slug } = await params
+    const product = await getProduct(slug);
 
     if (!product) {
         notFound();
@@ -110,15 +111,26 @@ export default async function ProductPage({ params }) {
                             <Home />
                         </Link>
 
-                        <ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
-                        <Link href={`/products/${product.category.slug}`} className=" underline">
 
-                            {product.category.title}
+                        {
-                        </Link>
+                            product?.category?.slug &&
-                        <ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
+                            <>
-                        <Link href={`/products/${product.brand.slug}`} className=" underline">
+                                <ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
-                            {product.brand.title}
+                                <Link href={`/products/${product.category.slug}`} className=" underline">
-                        </Link>
+
+                                    {product.category.title}
+                                </Link>
+                            </>
+                        }
+                        {
+                            product?.brand?.slug &&
+                            <>
+                                <ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
+                                <Link href={`/products/${product.brand.slug}`} className=" underline">
+                                    {product.brand.title}
+                                </Link>
+                            </>
+                        }
                         <ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
                         <span>{product.title}</span>
                     </div>
@@ -132,7 +144,11 @@ export default async function ProductPage({ params }) {
                             category={product.category}
                             summery={product.summery}
                         />
-                        <BrandInfo brand={product.brand} />
+                        {
+                            product.brand && (
+                                <BrandInfo brand={product.brand} />
+                            )
+                        }
 
                     </div>
                 </div>

src/components/Carousel/ProductCarousel.jsx

@@ -30,7 +30,7 @@ export default function ProductCarousel({ title, subtitle, products, showMoreLin
     }, [emblaApi])
 
     return (
-        <section className="py-12 max-w-screen-xlmx-auto "  >
+        <section className="py-12 max-w-screen-xl mx-auto h-fit"  >
 
             <div className="flex sm:justify-between  flex-col sm:flex-row pb-4  items-center">
                 <div className="flex flex-col gap-2">
@@ -45,13 +45,13 @@ export default function ProductCarousel({ title, subtitle, products, showMoreLin
                 </Link>
             </div>
 
-            <div className="relative">
+            <div className="relative h-fit">
                 <div className="overflow-hidden" ref={emblaRef} >
                     <div className="flex">
                         {products.map((product) => (
                             <div
                                 key={product.id}
-                                className="flex-[0_0_100%] min-w-0 sm:flex-[0_0_50%] md:flex-[0_0_33.33%] lg:flex-[0_0_25%] pl-4"
+                                className="flex-[0_0_100%] min-w-0 sm:flex-[0_0_50%] md:flex-[0_0_33.33%] lg:flex-[0_0_25%] pl-4 my-2"
                             >
                                 <CardNormal product={product} priority={true} />
                             </div>
@@ -61,18 +61,18 @@ export default function ProductCarousel({ title, subtitle, products, showMoreLin
                 <button
                     variant="outline"
                     size="icon"
-                    className="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-200 rounded-full size-4"
+                    className="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-200 rounded-full size-10 border border-white flex flex-col items-center justify-center"
                     onClick={scrollPrev}
                 >
-                    <ChevronLeft className="h-4 w-4" />
+                    <ChevronLeft className="size-10" />
                 </button>
                 <button
                     variant="outline"
                     size="icon"
-                    className="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-200 rounded-full size-4"
+                    className="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-200 rounded-full size-10 border border-white flex flex-col items-center justify-center"
                     onClick={scrollNext}
                 >
-                    <ChevronRight className="h-4 w-4" />
+                    <ChevronRight className="size-10" />
                 </button>
             </div>
 

src/components/NavBar/index.jsx

@@ -125,6 +125,7 @@ const Navbar = ({ items }) => {
               >
                 <Link
                   href={`${item.link}`}
+                 
                   className={` whitespace-nowrap ${isScrolled ? "text-black" : "text-white"}  ${theme == 1 ? "text-sm !text-black" : " "
                     }`}
                 >

src/i18n/routing.js

@@ -6,7 +6,7 @@ export const routing = defineRouting({
     locales: ["en", "ar-OM"],
     defaultLocale: "en",
     localePrefix: "as-needed",
-    localeDetection: false,
+    localeDetection: true,
 });
 
 // Lightweight wrappers around Next.js' navigation APIs

src/view/Landing/components/Footer.jsx

@@ -28,7 +28,7 @@ const Footer = () => {
           </div>
         </div>
       </div> */}
-      <div className="flex flex-col gap-4 items-center text-sm text-gray-200 justify-center  pb-20">
+      <div className="flex flex-col gap-4 items-center text-sm text-gray-200 justify-center  pb-20" >
         <div className="flex gap-2">
           <MapPinHouse size={20} />
           <p>
@@ -37,7 +37,7 @@ const Footer = () => {
            
           </p>
         </div>
-        <Link href={"mailto:info@adhorizonintl.com"} target="_blank" className="flex gap-2">
+        <Link href={"mailto:info@adhorizonintl.com"} dir="ltr" target="_blank" className="flex gap-2">
           <Mail size={20} />
           <p>
 
@@ -45,7 +45,7 @@ const Footer = () => {
            
           </p>
         </Link>
-        <Link href={"tel:+96824289888"} target="_blank" className="flex gap-2">
+        <Link href={"tel:+96824289888"} dir="ltr" target="_blank" className="flex gap-2">
           <PhoneCall size={20} />
           <p>
 
@@ -59,7 +59,7 @@ const Footer = () => {
           <div className="w-full mb-5">
             <Image src={logo} className="w-[90px] mx-auto" />
           </div>
-          <p className="mb-0 text-sm text-gray-200  w-full text-center opacity-30 ">
+          <p className="mb-0 text-sm text-gray-200  w-full text-center opacity-30 " dir="ltr">
             © 2025. All rights reserved. <br />
           Advanced Horizon Services LLC
           </p>

src/view/Landing/components/Sides.jsx

@@ -21,7 +21,7 @@ const Sides = () => {
               <p className="text-muted-foreground">{t("fmcg.subtitle")}</p>
             </div>
             <div className="mt-4">
-              <p className="text-muted-foreground text-base">
+              <p className="text-muted-foreground text-base text-justify">
                 {t("fmcg.description")}
               </p>
             </div>
@@ -35,7 +35,7 @@ const Sides = () => {
               <p className="text-muted-foreground">{t("construction.subtitle")}</p>
             </div>
             <div className="mt-4">
-              <p className="text-muted-foreground text-base">
+              <p className="text-muted-foreground text-base text-justify">
                {t("construction.description")}
               </p>
             </div>