added backend

components/productSection/ProductsGrid.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
-import { getAllProducts } from "@/lib/products";
 import type { Product } from "@/lib/products";
 import Image from "next/image";
 import { useLanguage } from "@/context/language-context";
@@ -10,34 +9,33 @@ import Link from "next/link";
 import { ChevronsRight } from "lucide-react";
 import { ProductCard } from "./ProductCard";
 import { ProductModal } from "./ProductModal";
+import axios from "axios";
 
 // hello everyone
 
 export function ProductsGrid() {
   const { t } = useLanguage();
-  const products = getAllProducts();
   const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+  const [allProducts, setAllProducts] = useState<any>([]);
 
-  const handleViewDetails = (slug: string) => {
-    const product = products.find((p) => p.slug === slug);
+  useEffect(() => {
+    async function getData() {
+      await axios.get("https://api.serenmebel.uz/api/products/").then((res) => {
+        console.log("all data main page: ", res?.data);
+        const allData = res?.data || [];
+        setAllProducts(allData.slice(0,3));
+      });
+    }
+    getData();
+  }, []);
+
+  const handleViewDetails = (slug: number) => {
+    const product = allProducts.find((p: any) => p.id === slug);
     if (product) {
       setSelectedProduct(product);
     }
   };
 
-  const containerVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: { staggerChildren: 0.1 },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: { opacity: 1, y: 0 },
-  };
-
   return (
     <>
       <section id="products" className="relative py-20">
@@ -67,14 +65,13 @@ export function ProductsGrid() {
 
           {/* Product Grid */}
           <motion.div
-            variants={containerVariants}
             initial="hidden"
             whileInView="visible"
             viewport={{ once: true }}
             className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
           >
-            {products.map((product) => (
-              <motion.div key={product.id} variants={itemVariants}>
+            {allProducts.map((product: any) => (
+              <motion.div key={product.id} >
                 <ProductCard
                   product={product}
                   onViewDetails={handleViewDetails}