add back image to show case contact part and product sections

components/ProductsGrid.tsx

@@ -7,6 +7,7 @@ import { ProductCard } from "./ProductCard";
 import { getAllProducts } from "@/lib/products";
 import type { Product } from "@/lib/products";
 import { ProductModal } from "./ProductModal";
+import Image from "next/image";
 
 // hello everyone
 
@@ -37,7 +38,16 @@ export function ProductsGrid() {
 
   return (
     <>
-      <section id="products" className="py-20 bg-gray-50">
+      <section id="products" className="relative py-20">
+        <div className="absolute -z-40 top-0 left-0 h-full w-full">
+          <Image
+            src="/images/hero2.jpg"
+            alt="hero image"
+            fill
+            className="object-cover"
+          />
+        </div>
+        <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
@@ -45,9 +55,9 @@ export function ProductsGrid() {
             whileInView={{ opacity: 1 }}
             transition={{ duration: 0.6 }}
             viewport={{ once: true }}
-            className="text-center mb-16"
+            className="text-center mb-16 bg-white/80 backdrop-blur-md rounded-xl overflow-hidden p-2 max-w-[300px] w-full mx-auto"
           >
-            <h2 className="text-4xl font-bold text-gray-900 mb-4">
+            <h2 className="text-2xl font-bold text-gray-900 mb-2">
               {t("products.title")}
             </h2>
             <div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />