fix

src/app/[locale]/layout.jsx

@@ -9,6 +9,7 @@ import { ToastContainer } from 'react-toastify';
 import graphql from "src/utils/graphql";
 
 import { Rubik, Roboto } from "next/font/google";
+import { Bounce } from "react-toastify";
 
 const gql = `
 query Navbars($locale: I18NLocaleCode) {
@@ -94,6 +95,20 @@ export default async function LocaleLayout({
         <NextIntlClientProvider messages={messages}>
           <Navbar items={navbaritems} />
           {children}
+          <ToastContainer
+            position="bottom-right"
+            autoClose={5000}
+            limit={5}
+            hideProgressBar={false}
+            newestOnTop={false}
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+            theme="light"
+            transition={Bounce}
+          />
           <Footer />
           <ToastContainer />
         </NextIntlClientProvider>

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

@@ -1,5 +1,7 @@
 import { Home } from "lucide-react";
 import { ChevronRight } from "lucide-react";
+import { Share2 } from "lucide-react";
+import { Share } from "lucide-react";
 import { ShoppingCart } from "lucide-react";
 import { getLocale, getMessages } from "next-intl/server";
 import Link from "next/link";
@@ -179,7 +181,7 @@ export async function generateMetadata({ params }) {
 //         "start": 0,
 //         "limit": 1500
 //     })
-    
+
 //     return products.map((product) =>
 //         ({ slug: product.slug })
 //     );
@@ -209,36 +211,39 @@ export default async function ProductPage({ params }) {
 
 
 
-            <div className="flex flex-col lg:flex-row gap-8">
+            <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 ">
-                    <div className={`flex items-center gap-2 mb-6 `}>
+                    <div className="flex justify-between w-full">
-                        <Link href="/" className=" underline inline-flex gap-2">
+                        <div className={`flex items-center gap-2 mb-6 `}>
-                            <Home />
+                            <Link href="/" className=" underline inline-flex gap-2">
-                        </Link>
+                                <Home />
+                            </Link>
 
 
-                        {
+                            {
-                            product?.category?.slug &&
+                                product?.category?.slug &&
-                            <>
+                                <>
-                                <ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
+                                    <ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
-                                <Link href={`/products/${product.category.slug}`} className=" underline">
+                                    <Link href={`/products/${product.category.slug}`} className=" underline">
+
+                                        {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>
 
-                                    {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>
                     <div className="h-full flex justify-between flex-row  w-full items-start">
 

src/components/ContactUs/index.jsx

@@ -113,13 +113,20 @@ export default function ContactModal({ close, open }) {
                             </div>
 
                             {/* Submit Button */}
-                            <div>
+                            <div className="flex gap-2">
                                 <button
                                     type="submit"
                                     className="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors"
                                 >
                                     {t("sendButton")}
                                 </button>
+                                <button
+                                onClick={close}
+                                    type="button"
+                                    className="w-fit border px-4 py-2 bg-white text-gray-500 rounded-md hover:bg-primary-dark transition-colors"
+                                >
+                                    {t("closeButton")}
+                                </button>
                             </div>
                         </form>
                     </div>

src/components/Product/ProductDescription.jsx

@@ -8,7 +8,7 @@ export default async function ProductDescription({ description }) {
                 description &&
                 <>
                     <h2 className="text-2xl font-bold mb-4">{t.PDP.productDescription}</h2>
-                    <div className="prose max-w-none content" dangerouslySetInnerHTML={{ __html: description }}/>
+                    <div className="prose max-w-none content text-justify [&_p]:leading-8" dangerouslySetInnerHTML={{ __html: description }}/>
                         
                     
                 </>

src/components/Product/ProductInfo.jsx

@@ -9,6 +9,8 @@ import ContactModal from "../ContactUs";
 import { useState } from "react";
 import { useTranslations } from "next-intl";
 import BrandInfo from "./BrandInfo";
+import { Share2 } from "lucide-react";
+import { toast } from "react-toastify";
 
 
 export default function ProductInfo({ title, price, discount, showPrice, category, summery, brand }) {
@@ -31,10 +33,39 @@ export default function ProductInfo({ title, price, discount, showPrice, categor
 
   const t = useTranslations("ContactModal")
 
+  const shareLink = async () => {
+    if (navigator.share) {
+      navigator.share({
+        title: title,
+        text: 'Check out this on Advanced Horizon !',
+        url: window.location.href,
+      })
+
+    } else if (navigator.clipboard) {
+      try {
+        await navigator.clipboard.writeText(text);
+        toast.success("link copied!")
+      } catch (err) {
+        console.error('Failed to copy: ', err);
+      }
+    } else {
+      const tempInput = document.createElement('input');
+      tempInput.style.position = 'absolute';
+      tempInput.style.left = '-9999px';
+      tempInput.value = window.location.href;
+      document.body.appendChild(tempInput);
+      tempInput.select();
+      document.execCommand('copy');
+      document.body.removeChild(tempInput);
+      toast.success("link copied!")
+    }
+
+  }
+
   return (
     <div className="w-full">
       <ContactModal close={closeModal} open={open} />
-      <div className="flex items-start w-full justify-between">
+      <div className="flex items-start w-full justify-between lg:flex-row flex-col-reverse gap-4">
         <div>
           <h1 className="text-3xl font-bold">{title}</h1>
           <Link href={`/products/${category.slug}`} className="mt-4 flex items-center">
@@ -105,11 +136,14 @@ export default function ProductInfo({ title, price, discount, showPrice, categor
           }
         </div>
       </div>
-      <div className="mt-10 w-full border-t pt-10">
+      <div className="mt-10 w-full border-t pt-10 flex gap-2 items-center">
         {/* 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")}
         </button>
+        <button className="btn shadow-none" onClick={() => shareLink()}>
+          <Share2 size={24} />
+        </button>
       </div>
     </div>
   );