pproducts

components/ProductsGrid.tsx

@@ -8,11 +8,13 @@ import type { Product } from "@/lib/products";
 import { ProductModal } from "./ProductModal";
 import Image from "next/image";
 import { useLanguage } from "@/context/language-context";
+import Link from "next/link";
+import { ChevronsRight } from "lucide-react";
 
 // hello everyone
 
 export function ProductsGrid() {
-  const {t} = useLanguage();
+  const { t } = useLanguage();
   const products = getAllProducts();
   const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
 
@@ -47,7 +49,7 @@ export function ProductsGrid() {
             className="object-cover"
           />
         </div>
-        <div className="absolute w-full h-full top-0 left-0 bg-black opacity-25 -z-40"/>
+        <div className="absolute w-full h-full top-0 left-0 bg-black opacity-25 -z-40" />
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           {/* Header */}
           <motion.div
@@ -81,6 +83,14 @@ export function ProductsGrid() {
             ))}
           </motion.div>
         </div>
+        <div className="mt-10 w-full flex items-center justify-center">
+          <Link
+            href="/product"
+            className="text-primary flex items-center gap-2 text-[18px] hover:bg-primary hover:text-white py-2 px-6 rounded-lg bg-[#ffffffb5] border mx-auto border-white"
+          >
+            {t.more} <ChevronsRight />
+          </Link>
+        </div>
       </section>
 
       {/* Product Modal */}