detail page connected to backend , modal form for one product connected to backend

components/pages/products/product/productCard.tsx

@@ -1,4 +1,3 @@
-
 import { useLocale } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
@@ -7,17 +6,19 @@ interface ProductCardProps {
   title: string;
   image: string;
   slug: string;
+  getProduct: () => void;
 }
 
 export default function ProductCard({
   title,
   image,
   slug,
+  getProduct,
 }: ProductCardProps) {
   const locale = useLocale();
 
   return (
-    <Link href={`/${locale}/products/${slug}`}>
+    <Link href={`/${locale}/products/${slug}`} onClick={getProduct}>
       <article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full">
         {/* Image Container */}
         <div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden">