last updates: add product page

2025-12-24 12:00:04 +05:00
parent 52945dc5d8
commit de12e23af1
6 changed files with 13 additions and 10 deletions
--- a/components/productSection/ProductsGrid.tsx
+++ b/components/productSection/ProductsGrid.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { 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";
+import Link from "next/link";
+import { ChevronsRight } from "lucide-react";
+import { ProductCard } from "./ProductCard";
+import { ProductModal } from "./ProductModal";
+
+// hello everyone
+
+export function ProductsGrid() {
+  const { t } = useLanguage();
+  const products = getAllProducts();
+  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+
+  const handleViewDetails = (slug: string) => {
+    const product = products.find((p) => p.slug === 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">
+        <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
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            transition={{ duration: 0.6 }}
+            viewport={{ once: true }}
+            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-2xl font-bold text-gray-900 mb-2">
+              {t.products.title}
+            </h2>
+            <div className="w-20 h-1 bg-primary mx-auto rounded-full" />
+          </motion.div>
+
+          {/* 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}>
+                <ProductCard
+                  product={product}
+                  onViewDetails={handleViewDetails}
+                />
+              </motion.div>
+            ))}
+          </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 */}
+      {selectedProduct && (
+        <ProductModal
+          product={selectedProduct}
+          onClose={() => setSelectedProduct(null)}
+        />
+      )}
+    </>
+  );
+}