98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
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;
|
|
|
|
const handleScroll = (href: string) => {
|
|
const element = document.querySelector(href);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white">
|
|
<div className="max-w-[1200px] mx-auto">
|
|
{/* Header */}
|
|
<div className="sticky z-10 top-0 md: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 lg:grid-cols-2 gap-4 lg:gap-8 mb-8">
|
|
{/* Image */}
|
|
<div className="relative w-full h-64 sm:h-80 lg:h-96 rounded-lg overflow-hidden bg-gray-50">
|
|
<Image
|
|
src={`https://admin.promtechno.uz${product.image}`}
|
|
alt={languageIndex ? product.name_uz : product.name_ru}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 600px"
|
|
className="object-contain p-4"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="space-y-4 lg:space-y-6 lg:py-4">
|
|
{/* Description */}
|
|
<div className="text-gray-800 text-sm sm:text-base leading-relaxed">
|
|
{languageIndex
|
|
? product.description_uz
|
|
: product.description_ru}
|
|
</div>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className="pt-2">
|
|
<Link href="#contact" onClick={() => handleScroll("#contact")}>
|
|
<motion.button
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
className="w-full sm:w-auto px-8 py-3 bg-primary/80 text-white rounded-lg font-semibold hover:bg-primary transition-all duration-300 shadow-md hover:shadow-lg"
|
|
>
|
|
{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>
|
|
);
|
|
}
|