file name and location updayed for better be

pages/products/slug/empty.tsx

@@ -0,0 +1,36 @@
+// Empty State Component
+export function EmptyState() {
+  return (
+    <div className="min-h-screen bg-[#1e1d1c] flex items-center justify-center px-4">
+      <div className="text-center max-w-md">
+        <div className="w-24 h-24 mx-auto mb-6 bg-gray-800 rounded-full flex items-center justify-center">
+          <svg
+            className="w-12 h-12 text-gray-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+            />
+          </svg>
+        </div>
+        <h2 className="text-2xl font-bold text-white mb-2">
+          Mahsulot topilmadi
+        </h2>
+        <p className="text-gray-400 mb-6">
+          Siz qidirayotgan mahsulot mavjud emas yoki o'chirilgan
+        </p>
+        <a
+          href="/products"
+          className="inline-block bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg transition"
+        >
+          Mahsulotlarga qaytish
+        </a>
+      </div>
+    </div>
+  );
+}

pages/products/slug/features.tsx

@@ -0,0 +1,44 @@
+import { useTranslations } from "next-intl";
+
+export function Features({ features }: { features: string[] }) {
+  const t = useTranslations();
+  if (!features || features.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mt-12">
+      <h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
+        {t("products.features")}
+      </h2>
+      <div className="rounded-xl overflow-hidden border border-gray-800 shadow-xl">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-linear-to-r from-stone-800 to-black/10 border-b border-gray-800">
+              <th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
+                {t("products.feature")}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {features.map((feature, index) => (
+              <tr
+                key={index}
+                className={`border-b border-gray-800 last:border-b-0 transition-colors hover:bg-red-900/10 ${
+                  index % 2 === 0 ? "bg-[#252525]" : "bg-[#1e1e1e]"
+                }`}
+              >
+                <td className="px-4 py-4 md:px-6 text-sm md:text-base text-gray-300">
+                  <div className="flex items-start gap-3">
+                    <span className="text-red-700 mt-1">•</span>
+                    <span>{feature}</span>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

pages/products/slug/loading.tsx

@@ -0,0 +1,61 @@
+// Loading Skeleton Component
+export function LoadingSkeleton() {
+  return (
+    <div className="min-h-screen bg-[#1e1d1c] py-20 md:py-32 lg:py-40 px-4 md:px-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 mb-12">
+          {/* Image Skeleton */}
+          <div className="w-full h-96 md:h-125 bg-gray-800 rounded-lg animate-pulse" />
+
+          {/* Info Skeleton */}
+          <div className="flex flex-col justify-center space-y-4">
+            {/* Title */}
+            <div className="h-8 bg-gray-800 rounded animate-pulse w-3/4" />
+
+            {/* Articular */}
+            <div className="h-6 bg-gray-800 rounded animate-pulse w-1/2" />
+
+            {/* Status */}
+            <div className="h-8 bg-gray-800 rounded animate-pulse w-1/3" />
+
+            {/* Description */}
+            <div className="space-y-2">
+              <div className="h-4 bg-gray-800 rounded animate-pulse w-full" />
+              <div className="h-4 bg-gray-800 rounded animate-pulse w-5/6" />
+              <div className="h-4 bg-gray-800 rounded animate-pulse w-4/6" />
+            </div>
+
+            {/* Price */}
+            <div className="h-10 bg-gray-800 rounded animate-pulse w-32" />
+
+            {/* Buttons */}
+            <div className="flex gap-4">
+              <div className="h-12 bg-gray-800 rounded animate-pulse flex-1" />
+            </div>
+
+            {/* Social */}
+            <div className="flex gap-2">
+              {[1, 2, 3, 4, 5, 6].map((i) => (
+                <div
+                  key={i}
+                  className="w-10 h-10 bg-gray-800 rounded-lg animate-pulse"
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Features Skeleton */}
+        <div className="space-y-2">
+          <div className="h-12 bg-gray-800 rounded-t-xl animate-pulse" />
+          {[1, 2, 3, 4].map((i) => (
+            <div
+              key={i}
+              className="h-16 bg-gray-800/50 rounded animate-pulse"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

pages/products/slug/rightSide.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { usePriceModalStore } from "@/zustand/useProceModalStore";
+import { Check, Instagram, Send, Share2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+
+interface RightSideProps {
+  id: number;
+  title: string;
+  articular: string;
+  status: string;
+  description: string;
+  price: string;
+  image: string;
+}
+
+export function RightSide({
+  title,
+  articular,
+  status,
+  description,
+  price,
+  id,
+  image,
+}: RightSideProps) {
+  const openModal = usePriceModalStore((state) => state.openModal);
+  const t = useTranslations();
+  const params = useParams();
+  const locale = params.locale || "uz";
+  const [copied, setCopied] = useState(false);
+
+  const handleShare = async () => {
+    const productUrl = `${window.location.origin}/${locale}/catalog_page/products/special_product?productId=${id}`;
+
+    try {
+      // Modern Web Share API dan foydalanish (mobil qurilmalar uchun)
+      if (navigator.share) {
+        await navigator.share({
+          title: title,
+          text: `${title} - ${description.slice(0, 100)}...`,
+          url: productUrl,
+        });
+      } else {
+        // Desktop uchun clipboard ga copy qilish
+        await navigator.clipboard.writeText(productUrl);
+        setCopied(true);
+
+        // 2 soniyadan keyin "Copied" holatini o'chirish
+        setTimeout(() => {
+          setCopied(false);
+        }, 2000);
+      }
+    } catch (error) {
+      console.error("Share error:", error);
+      // Fallback - clipboard ga copy qilish
+      try {
+        await navigator.clipboard.writeText(productUrl);
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 2000);
+      } catch (clipboardError) {
+        console.error("Clipboard error:", clipboardError);
+      }
+    }
+  };
+
+  const handleGetPrice = () => {
+    openModal({
+      id,
+      name: title,
+      image,
+      inStock: status === "Sotuvda mavjud",
+    });
+  };
+
+  // Status color logic
+  const isInStock = status === "Sotuvda mavjud";
+  const statusColor = isInStock
+    ? "bg-green-600/20 text-green-400 border border-green-600/30"
+    : "bg-red-600/20 text-red-400 border border-red-600/30";
+
+  return (
+    <div className="flex flex-col justify-center space-y-6">
+      {/* Title */}
+      <h1 className="text-xl md:text-3xl font-unbounded font-bold text-white leading-tight">
+        {title}
+      </h1>
+
+      {/* Article ID */}
+      <div className="flex items-center gap-2 text-sm md:text-base">
+        <span className="text-gray-400">Artikul:</span>
+        <span className="text-white font-semibold">{articular}</span>
+      </div>
+
+      {/* Status Badge */}
+      <div>
+        <span
+          className={`inline-block px-4 py-2 rounded-lg text-sm font-semibold ${statusColor}`}
+        >
+          {status}
+        </span>
+      </div>
+
+      {/* Description */}
+      <div className="border-l-4 border-red-700 pl-4">
+        <p className="text-sm md:text-base text-gray-300 leading-relaxed">
+          {description}
+        </p>
+      </div>
+
+      {/* Price Section */}
+      <div className="bg-[#1716169f] rounded-xl p-5 space-y-6">
+        {/* Action Button */}
+        <button
+          onClick={handleGetPrice}
+          className="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-4 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-red-700/50"
+        >
+          {t("products.send")}
+        </button>
+
+        {/* Social Share */}
+        <div className="pt-4 border-t border-gray-800 flex items-center gap-5">
+          <button
+            onClick={handleShare}
+            className="flex items-center gap-3 mb-3 text-gray-400 hover:text-white transition-colors group"
+          >
+            {copied ? (
+              <>
+                <Check className="w-5 h-5 text-green-400" />
+                <span className="text-sm text-green-400">
+                  {t("products.copied") || "Link nusxalandi!"}
+                </span>
+              </>
+            ) : (
+              <>
+                <Share2 className="w-5 h-5 group-hover:scale-110 transition-transform" />
+                <span className="text-sm">{t("products.share")}:</span>
+              </>
+            )}
+          </button>
+          <a
+            href="https://t.me/ignum_tech"
+            className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500"
+          >
+            <Send />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

pages/products/slug/slider.tsx

@@ -0,0 +1,158 @@
+"use client";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Pagination, Thumbs } from "swiper/modules";
+import { useState } from "react";
+import type { Swiper as SwiperType } from "swiper";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+
+const navigationPrevEl = ".custom-swiper-prev";
+const navigationNextEl = ".custom-swiper-next";
+
+export function SliderComp({ imgs }: { imgs: string[] }) {
+  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
+  const t = useTranslations();
+
+  // Agar rasm bo'lmasa
+  if (!imgs || imgs.length === 0) {
+    return (
+      <div className="w-full h-96 md:h-125 bg-gray-800 rounded-lg flex items-center justify-center">
+        <div className="text-center">
+          <svg
+            className="w-20 h-20 text-gray-600 mx-auto mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+            />
+          </svg>
+          <p className="text-gray-500">{t("image_not_found")}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Main Slider */}
+      <div className="relative group">
+        <Swiper
+          modules={[Navigation, Pagination, Thumbs]}
+          thumbs={{
+            swiper:
+              thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
+          }}
+          navigation={{
+            prevEl: navigationPrevEl,
+            nextEl: navigationNextEl,
+          }}
+          pagination={{ clickable: true }}
+          loop={imgs.length > 1}
+          className="w-[90%] h-96 md:h-96  rounded-lg overflow-hidden shadow-xl"
+        >
+          {imgs.map((image, index) => (
+            <SwiperSlide
+              key={index}
+              className=" flex items-center justify-center"
+            >
+              <div className="relative w-full h-full p-4 md:p-8">
+                <Image
+                  src={image}
+                  alt={`Product image ${index + 1}`}
+                  fill
+                  className="object-contain"
+                  sizes="(max-width: 768px) 100vw, 50vw"
+                  priority={index === 0}
+                />
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+
+        {/* Navigation Buttons */}
+        {imgs.length > 1 && (
+          <>
+            <button
+              className={`${navigationPrevEl.replace(
+                ".",
+                "",
+              )} absolute z-10 top-1/2 -translate-y-1/2 left-2 md:left-4 rounded-lg w-10 h-10 md:w-12 md:h-12 bg-red-700/90 hover:bg-red-800 text-white flex items-center justify-center transition opacity-0 group-hover:opacity-100 shadow-lg`}
+            >
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+            </button>
+            <button
+              className={`${navigationNextEl.replace(
+                ".",
+                "",
+              )} absolute z-10 top-1/2 -translate-y-1/2 right-2 md:right-4 rounded-lg w-10 h-10 md:w-12 md:h-12 bg-red-700/90 hover:bg-red-800 text-white flex items-center justify-center transition opacity-0 group-hover:opacity-100 shadow-lg`}
+            >
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* Thumbnail Slider */}
+      {imgs.length > 1 && (
+        <Swiper
+          onSwiper={setThumbsSwiper}
+          spaceBetween={10}
+          slidesPerView={4}
+          breakpoints={{
+            640: { slidesPerView: 5 },
+            768: { slidesPerView: 6 },
+          }}
+          watchSlidesProgress
+          className="w-full"
+        >
+          {imgs.map((image, index) => (
+            <SwiperSlide key={index}>
+              <div className="relative h-20 md:h-24 bg-white rounded-lg overflow-hidden cursor-pointer border-2 border-transparent hover:border-red-700 transition">
+                <Image
+                  src={image}
+                  alt={`Thumbnail ${index + 1}`}
+                  fill
+                  className="object-contain p-2"
+                  sizes="100px"
+                />
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      )}
+    </div>
+  );
+}