new web sayt

components/ProductCard.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { ExternalLink } from "lucide-react";
+import { useTranslations } from "next-intl";
+import type { Product } from "@/lib/products";
+
+interface ProductCardProps {
+  product: Product;
+  onViewDetails: (slug: string) => void;
+}
+
+export function ProductCard({ product, onViewDetails }: ProductCardProps) {
+  const t = useTranslations();
+
+  return (
+    <motion.div
+      whileHover={{ y: -8 }}
+      className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow"
+    >
+      {/* Image */}
+      <div className="relative h-48 bg-gray-100 overflow-hidden group">
+        <Image
+          src={product.images[0]}
+          alt={t(product.nameKey)}
+          fill
+          className="object-cover group-hover:scale-110 transition-transform duration-300"
+        />
+        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors" />
+      </div>
+
+      {/* Content */}
+      <div className="p-6">
+        <h3 className="text-xl font-bold text-gray-900 mb-2">
+          {t(product.nameKey)}
+        </h3>
+        <p className="text-gray-600 text-sm mb-4">
+          {t(product.shortDescriptionKey)}
+        </p>
+
+        {/* Specs Preview */}
+        <div className="mb-4 space-y-2">
+          {product.specs.slice(0, 2).map((spec, idx) => (
+            <div key={idx} className="flex justify-between text-sm">
+              <span className="text-gray-600">{spec.key}:</span>
+              <span className="font-semibold text-gray-900">{spec.value}</span>
+            </div>
+          ))}
+        </div>
+
+        {/* CTA Button */}
+        <motion.button
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          onClick={() => onViewDetails(product.slug)}
+          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
+        >
+          {t("products.viewDetails")}
+          <ExternalLink size={16} />
+        </motion.button>
+      </div>
+    </motion.div>
+  );
+}