last updates: add product page

app/page.tsx

@@ -1,8 +1,8 @@
 import { ShowCase } from "@/components/ShowCase";
 import { About } from "@/components/About";
-import { ProductsGrid } from "@/components/ProductsGrid";
 import { FAQ } from "@/components/FAQ";
 import { ContactForm } from "@/components/ContactForm";
+import { ProductsGrid } from "@/components/productSection/ProductsGrid";
 
 const HERO_IMAGES = [
   "/product/product.jpg",

components/productSection/ProductModal.tsx

@@ -15,7 +15,7 @@ interface ProductModalProps {
 
 export function ProductModal({ product, onClose }: ProductModalProps) {
   const { t } = useLanguage();
-  const setProductName = useProductStore((state)=>state.setProductName);
+  const setProductName = useProductStore((state) => state.setProductName);
 
   return (
     <AnimatePresence>
@@ -50,7 +50,7 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
 
           {/* Content */}
           <div className="p-6">
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
               {/* 3D Viewer / Gallery */}
               <div>
                 <ProductViewer
@@ -92,7 +92,10 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
                 <div className="space-y-3">
                   <Link href="#contact">
                     <motion.button
-                      onClick={()=>{onClose(); setProductName(product.nameKey)}}
+                      onClick={() => {
+                        onClose();
+                        setProductName(product.nameKey);
+                      }}
                       whileHover={{ scale: 1.05 }}
                       whileTap={{ scale: 0.95 }}
                       className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"

components/productSection/ProductsGrid.tsx

@@ -2,14 +2,14 @@
 
 import { useState } from "react";
 import { motion } from "framer-motion";
-import { ProductCard } from "./ProductCard";
 import { getAllProducts } from "@/lib/products";
 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";
+import { ProductCard } from "./ProductCard";
+import { ProductModal } from "./ProductModal";
 
 // hello everyone
 

components/productsPage/products.tsx

@@ -2,9 +2,9 @@
 import { useEffect, useState } from "react";
 import EmptyState from "./emptyData";
 import { GET } from "@/lib/allProducts";
-import { ProductModal } from "../ProductModal";
+import { ProductModal } from "../productSection/ProductModal";
 import { motion } from "framer-motion";
-import { ProductCard } from "../ProductCard";
+import { ProductCard } from "../productSection/ProductCard";
 
 const itemVariants = {
   hidden: { opacity: 0, y: 20 },
@@ -14,13 +14,13 @@ const itemVariants = {
 export default function Products() {
   const [allProducts, setAllProducts] = useState<any>(null);
   const [selectedProduct, setSelectedProduct] = useState<any>(null);
-  useEffect(() => {
   const all = GET();
+  useEffect(() => {
     all && Array.isArray(all) && all.length > 0
       ? setAllProducts(all)
       : setAllProducts([]);
     setAllProducts;
-  }, []);
+  }, [all]);
   const handleViewDetails = (slug: string) => {
     const product = allProducts.find((p: any) => p.slug === slug);
     if (product) {