new web sayt

components/ProductModal.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Download } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { ProductViewer } from "./ProductViewer";
+import type { Product } from "@/lib/products";
+
+interface ProductModalProps {
+  product: Product;
+  onClose: () => void;
+}
+
+export function ProductModal({ product, onClose }: ProductModalProps) {
+  const t = useTranslations();
+
+  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">
+              {t(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 lg:grid-cols-2 gap-8 mb-8">
+              {/* 3D Viewer / Gallery */}
+              <div>
+                <ProductViewer
+                  modelUrl={product.model3D}
+                  images={product.images}
+                  autoRotate={true}
+                />
+
+                {/* Image Thumbnails */}
+                {product.images.length > 1 && (
+                  <div className="mt-4 grid grid-cols-4 gap-2">
+                    {product.images.map((img, idx) => (
+                      <motion.div
+                        key={idx}
+                        whileHover={{ scale: 1.05 }}
+                        className="relative h-20 rounded cursor-pointer overflow-hidden bg-gray-100"
+                      >
+                        <Image
+                          src={img}
+                          alt={`${t(product.nameKey)} ${idx + 1}`}
+                          fill
+                          className="object-cover"
+                        />
+                      </motion.div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Details */}
+              <div>
+                <p className="text-gray-600 mb-6">
+                  {product.longDescriptionKey
+                    ? t(product.longDescriptionKey)
+                    : t(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">
+                  <motion.button
+                    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>
+                  <motion.button
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    className="w-full px-6 py-3 border border-blue-600 text-blue-600 rounded-lg font-semibold hover:bg-blue-50 transition-colors flex items-center justify-center gap-2"
+                  >
+                    <Download size={18} />
+                    Download Datasheet
+                  </motion.button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}