last updates: add product page

components/productSection/ProductModal.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { X } from "lucide-react";
+import { ProductViewer } from "./ProductViewer";
+import type { Product } from "@/lib/products";
+import { useLanguage } from "@/context/language-context";
+import Link from "next/link";
+import { useProductStore } from "@/lib/productZustand";
+
+interface ProductModalProps {
+  product: Product;
+  onClose: () => void;
+}
+
+export function ProductModal({ product, onClose }: ProductModalProps) {
+  const { t } = useLanguage();
+  const setProductName = useProductStore((state) => state.setProductName);
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        onClick={onClose}
+        className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
+      >
+        <motion.div
+          initial={{ scale: 0.95, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          exit={{ scale: 0.95, opacity: 0 }}
+          onClick={(e) => e.stopPropagation()}
+          className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"
+        >
+          {/* Header */}
+          <div className="sticky top-0 bg-white border-b border-gray-200 p-6 flex justify-between items-center">
+            <h2 className="text-2xl font-bold text-gray-900">
+              {product.nameKey}
+            </h2>
+            <motion.button
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={onClose}
+              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              <X size={24} />
+            </motion.button>
+          </div>
+
+          {/* Content */}
+          <div className="p-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+              {/* 3D Viewer / Gallery */}
+              <div>
+                <ProductViewer
+                  modelUrl={product.model3D}
+                  images={product.images}
+                  autoRotate={true}
+                />
+              </div>
+
+              {/* Details */}
+              <div>
+                <p className="text-gray-600 mb-6">
+                  {product.longDescriptionKey
+                    ? product.longDescriptionKey
+                    : product.shortDescriptionKey}
+                </p>
+
+                {/* Specifications */}
+                <div className="mb-8">
+                  <h3 className="text-lg font-semibold text-gray-900 mb-4">
+                    Technical Specifications
+                  </h3>
+                  <div className="space-y-3">
+                    {product.specs.map((spec, idx) => (
+                      <div
+                        key={idx}
+                        className="flex justify-between py-2 border-b border-gray-100"
+                      >
+                        <span className="text-gray-600">{spec.key}:</span>
+                        <span className="font-semibold text-gray-900">
+                          {spec.value}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* CTA Buttons */}
+                <div className="space-y-3">
+                  <Link href="#contact">
+                    <motion.button
+                      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"
+                    >
+                      {t.contact.send}
+                    </motion.button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}