detail page added

components/detailPage/detailInfo.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { X } from "lucide-react";
+import type { Product } from "@/lib/products";
+import { useLanguage } from "@/context/language-context";
+import Link from "next/link";
+import { useProduct, useProductStore } from "@/lib/productZustand";
+import Image from "next/image";
+
+export default function DetailInfo() {
+  const { t, language } = useLanguage();
+  const languageIndex = language === "uz" ? true : false;
+  const product = useProduct((state) => state.product);
+  if (product === null) return null;
+
+  return (
+    <div className="bg-white">
+      <div className="max-w-[1200px] mx-auto">
+        {/* Header */}
+        <div className="sticky z-10 top-0 sm:p-6 p-2 flex justify-center items-center">
+          <h2 className="md:text-2xl text-lg font-bold text-gray-900">
+            {languageIndex ? product.name_uz : product.name_ru}
+          </h2>
+        </div>
+
+        {/* Content */}
+        <div className="sm:p-6 p-2">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+            {/* Image */}
+            <div className="relative max-sm:w-full max-md:h-50 w-150 h-96 mx-auto rounded-lg overflow-hidden">
+              <Image
+                src={`https://admin.promtechno.uz${product.image}`}
+                alt="image"
+                fill
+                className="object-contain max-md:h-50"
+              />
+            </div>
+
+            <div className="space-y-6 pt-10">
+              {/* Description */}
+              <div className="text-gray-800 max-sm:text-[14px]">
+                {languageIndex
+                  ? product.description_uz
+                  : product.description_ru}
+              </div>
+              {/* CTA Buttons */}
+              <div className="space-y-3">
+                <Link href={"#contact"}>
+                  <motion.button
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    className="w-full px-6 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-colors"
+                  >
+                    {t.contact.send}
+                  </motion.button>
+                </Link>
+              </div>
+            </div>
+          </div>
+          {/* Specifications */}
+          <div>
+            <div className="mb-8">
+              <h3 className="text-lg font-semibold text-gray-900 mb-4">
+                {t.features}
+              </h3>
+              <div className="space-y-3 flex items-start justify-start gap-4 flex-wrap ">
+                {product.features.map((spec, idx) => (
+                  <div
+                    key={idx}
+                    className="flex flex-col justify-between py-2 border border-gray-100 rounded-lg p-2"
+                  >
+                    <span className="text-gray-600">
+                      {languageIndex ? spec.key_uz : spec.key_ru}:
+                    </span>
+                    <span className="text-gray-900">
+                      {languageIndex ? spec.value_uz : spec.value_ru}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}