file name and location updayed for better be

2026-03-07 16:31:18 +05:00
parent b838025ab0
commit 809438735f
82 changed files with 87 additions and 470 deletions
--- a/pages/products/banner.tsx
+++ b/pages/products/banner.tsx
@@ -0,0 +1,49 @@
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+import { useTranslations } from "next-intl";
+
+export function ProductBanner() {
+  const t = useTranslations();
+  return (
+    <section className="relative w-full min-[400px]:h-[60vh] h-[75vh] min-h-100 overflow-hidden pt-10">
+      {/* Background Image */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: "url(/images/img4.jpg)",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      />
+
+      {/* Gradient Overlay - Bottom-left to top-right */}
+      <div
+        className="absolute inset-0 z-10"
+        style={{
+          background: `linear-gradient(to top right, #d2610a 0%, #1e1d1ce3 30%, #1e1d1ce3 100%)`,
+        }}
+      />
+
+      <div className="max-w-250 w-full mx-auto px-4">
+        <div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
+          <div className="spacw-y-4 ">
+            <div className="flex items-center gap-2 w-fit">
+              <DotAnimatsiya />
+              <span className="font-almarai text-white text-sm font-semibold tracking-wide">
+                {t("products.banner.title")}
+              </span>
+            </div>
+            <p
+              className="font-unbounded uppercase bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight text-pretty"
+            >
+              {t("products.banner.subtitle")}
+            </p>
+          </div>
+          <div className="font-almarai lg:w-[40%] text-gray-300 lg:mt-20 md:mt-10 sm:mt-5 ">
+            {t("products.banner.description")}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/pages/products/catalog.tsx
+++ b/pages/products/catalog.tsx
@@ -0,0 +1,155 @@
+// import { useTranslations } from "next-intl";
+// import Image from "next/image";
+// import Link from "next/link";
+
+// interface CatalogProps {
+//   image: string;
+//   title: string;
+//   slug: string;
+//   description: string;
+//   id:string;
+// }
+
+// export default function CatalogCard({
+//   image,
+//   title,
+//   slug,
+//   description,
+//   id,
+// }: CatalogProps) {
+//   const t = useTranslations();
+//   return (
+//     <Link
+//       href={`/products?category=${id}`}
+//       className="group h-118 flex flex-col items-center justify-start" // Added 'group' here
+//     >
+//       <div className="h-full flex flex-col justify-between group-hover:scale-105 transition ease-in-out">
+//         <p className="text-white text-2xl font-unbounded font-semibold text-center transition-colors">
+//           {title}
+//         </p>
+//         <p className="text-white/50 font-almarai font-medium text-center">
+//           {t(`${description}`)}
+//         </p>
+//         <Image
+//           src={image}
+//           alt="image"
+//           width={400}
+//           height={90}
+//           className="h-90! rounded-xl object-contain bg-[#444242] transition-colors duration-300" // Added smooth transition
+//         />
+//       </div>
+//     </Link>
+//   );
+// }
+
+// bg-[#444242]
+"use client";
+import { useLocale, useTranslations } from "next-intl";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowUpRight } from "lucide-react";
+import { useCategory } from "@/zustand/useCategory";
+import { useSubCategory } from "@/zustand/useSubCategory";
+
+interface CatalogProps {
+  id: number;
+  image: string;
+  title: string;
+  description: string;
+  have_sub_category: boolean;
+}
+
+export default function CatalogCard({
+  image,
+  title,
+  description,
+  id,
+  have_sub_category,
+}: CatalogProps) {
+  const t = useTranslations();
+  const locale = useLocale();
+  const setCategory = useCategory((state) => state.setCategory);
+  const clearSubCategory = useSubCategory((state) => state.clearSubCategory);
+  const item = {
+    image: image,
+    name: title,
+    description: description,
+    id: id,
+    have_sub_category: have_sub_category,
+  };
+
+  const updateZustands = () => {
+    setCategory(item);
+    clearSubCategory();
+  };
+
+  const navigateLink = have_sub_category
+    ? `/${locale}/catalog_page/subCategory?category=${id}`
+    : `/${locale}/catalog_page/products?category=${id}`;
+
+  return (
+    <Link
+      href={navigateLink}
+      onClick={updateZustands}
+      className="group relative h-112.5 w-full overflow-hidden rounded-2xl bg-[#171616] bg-linear-to-br from-[#2a2a2a] to-black border hover:border-red-700 border-white/10 transition-all duration-500 hover:-translate-y-1"
+    >
+      {/* Background glow effect */}
+      <div className="absolute inset-0 bg-linear-to-t from-red-600/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+      {/* Decorative corner accent */}
+      <div className="absolute top-0 right-0 w-24 h-24 bg-linear-to-br from-red-500/20 to-transparent rounded-bl-full opacity-0 group-hover:opacity-00 transition-opacity duration-500" />
+
+      {/* Content container */}
+      <div className="relative h-full flex flex-col p-6">
+        {/* Title section */}
+        <div className="mb-4">
+          <div className="flex items-start justify-between mb-2">
+            <h3 className="text-2xl font-unbounded font-bold text-white leading-tight transition-colors duration-300">
+              {title}
+            </h3>
+            <div className="shrink-0 w-8 h-8 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-red-500 transition-all duration-300 group-hover:scale-110">
+              <ArrowUpRight className="w-4 h-4 text-white" strokeWidth={2.5} />
+            </div>
+          </div>
+
+          {/* Description */}
+          <p className="text-sm font-almarai text-white/60 line-clamp-2 group-hover:text-white/80 transition-colors duration-300">
+            {description}
+          </p>
+        </div>
+
+        {/* Image container with elegant frame */}
+        <div className="relative flex-1 rounded-xl overflow-hidden bg-linear-to-br from-[#444242] to-gray-900/50 border border-white/5 group-hover:border-white/20 transition-all duration-500">
+          {/* Animated gradient overlay */}
+          <div className="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent z-10" />
+
+          {/* Image */}
+          <div className="relative w-full h-full">
+            <Image
+              src={image}
+              alt={title}
+              fill
+              className="object-contain p-4 transition-transform duration-700 group-hover:scale-105"
+            />
+          </div>
+
+          {/* Hover shimmer effect */}
+          {/* <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000" />
+          </div> */}
+        </div>
+
+        {/* Bottom accent bar */}
+        <div className="mt-4 h-1 w-0 bg-linear-to-r from-red-500 to-red-600 group-hover:w-full transition-all duration-500 rounded-full" />
+      </div>
+
+      {/* Subtle noise texture overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' /%3E%3C/svg%3E")`,
+        }}
+      />
+    </Link>
+  );
+}
--- a/pages/products/filter/filter.tsx
+++ b/pages/products/filter/filter.tsx
@@ -0,0 +1,34 @@
+import { CatalogItem } from "@/lib/types";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronDown } from "lucide-react";
+
+export default function Filter() {
+  const { data } = useQuery({
+    queryKey: ["catalogsection"],
+    queryFn: () => httpClient(endPoints.filter.catalog),
+    select: (res) => res?.data?.data?.results,
+  });
+
+  console.log("filter catalog: ", data);
+  return (
+    <div className="px-5 w-full overflow-x-auto">
+      <div className="flex gap-5">
+        {data?.map((item: CatalogItem) => (
+          <div
+            key={item.id}
+            className="flex shrink-2 items-center text-white gap-2"
+          >
+            <div>{item.name}</div>
+            {item.children.length > 0 && (
+              <button>
+                <ChevronDown />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/pages/products/index.ts
+++ b/pages/products/index.ts
@@ -0,0 +1,5 @@
+export { ProductBanner } from "./banner";
+export { Products } from "./product/products";
+export { SliderComp } from "./slug/slider";
+export { RightSide } from "./slug/rightSide";
+export { Features } from "./slug/features";
--- a/pages/products/product/mianProduct.tsx
+++ b/pages/products/product/mianProduct.tsx
@@ -0,0 +1,122 @@
+"use client";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
+import ProductCard from "./productCard";
+import { useCategory } from "@/zustand/useCategory";
+import { useFilter } from "@/lib/filter-zustand";
+import { useMemo, useState } from "react";
+import { useProductPageInfo } from "@/zustand/useProduct";
+import { useSubCategory } from "@/zustand/useSubCategory";
+import { useTranslations } from "next-intl";
+import PaginationLite from "@/components/paginationUI";
+
+export default function MainProduct() {
+  const t = useTranslations();
+  const category = useCategory((s) => s.category);
+  const subCategory = useSubCategory((s) => s.subCategory);
+  const filter = useFilter((s) => s.filter);
+  const getFiltersByType = useFilter((s) => s.getFiltersByType);
+  const setProduct = useProductPageInfo((s) => s.setProducts);
+
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const queryParams = useMemo(() => {
+    const catalog = getFiltersByType("catalog");
+    const size = getFiltersByType("size");
+    const catalogParams = catalog.map((i) => `catalog=${i.id}`).join("&");
+    const sizeParams = size.map((i) => `size=${i.id}`).join("&");
+    const allParams = [catalogParams, sizeParams].filter(Boolean).join("&");
+    setCurrentPage(1);
+    return allParams ? `&${allParams}` : "";
+  }, [filter]);
+
+  const requestLink = useMemo(() => {
+    const baseLink = category.have_sub_category
+      ? endPoints.product.bySubCategory({ id: subCategory.id, currentPage })
+      : endPoints.product.byCategory({ id: category.id, currentPage });
+    return `${baseLink}${queryParams}`;
+  }, [
+    category.id,
+    category.have_sub_category,
+    queryParams,
+    subCategory.id,
+    currentPage,
+  ]);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: [
+      "products",
+      subCategory.id,
+      category.id,
+      queryParams,
+      currentPage,
+    ],
+    queryFn: () => httpClient(requestLink),
+    placeholderData: (prev) => prev, // ✅ pagination da flicker yo'q
+    select: (res) => ({
+      results: res?.data?.data?.results ?? [],
+      totalPages: res?.data?.data?.total_pages ?? 1,
+    }),
+  });
+
+  // ✅ To'g'ridan select dan olamiz — useEffect + let emas
+  const results = useMemo(() => {
+    return data?.results ?? [];
+  }, [data]);
+  const totalPages = useMemo(() => {
+    return data?.totalPages ?? 1;
+  }, [data]);
+
+  if (isLoading && !data) {
+    // ✅ placeholderData bor — faqat birinchi yuklanishda
+    return (
+      <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="h-96 bg-gray-800 animate-pulse rounded-2xl" />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center text-red-500 py-10">{t("loadingError")}</div>
+    );
+  }
+
+  if (!results.length) {
+    return (
+      <div className="text-center text-gray-400 py-10">
+        {t("productsNotFound")}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* ✅ isLoading da overlay — list o'rnini saqlab, ustidan opacity */}
+      <div
+        className={`grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-5 transition-opacity ${isLoading ? "opacity-50 pointer-events-none" : "opacity-100"}`}
+      >
+        {results.map((item: any) => (
+          <ProductCard
+            key={item.id}
+            getProduct={() => setProduct(item)}
+            title={item.name}
+            image={item?.images?.[0]?.image || ""}
+            slug="special_product"
+          />
+        ))}
+      </div>
+
+      {totalPages > 1 && (
+        <PaginationLite
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onChange={(p) => setCurrentPage(p)}
+        />
+      )}
+    </div>
+  );
+}
--- a/pages/products/product/productCard.tsx
+++ b/pages/products/product/productCard.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
+import Image from "next/image";
+import Link from "next/link";
+
+interface ProductCardProps {
+  title: string;
+  image: string;
+  slug: string;
+  getProduct: () => void;
+}
+
+export default function ProductCard({
+  title,
+  image,
+  slug,
+  getProduct,
+}: ProductCardProps) {
+  const locale = useLocale();
+  const t = useTranslations();
+
+  return (
+    <Link
+      href={`/${locale}/catalog_page/products/${slug}`}
+      onClick={getProduct}
+      className="group block"
+    >
+      <article className="
+        relative
+        bg-neutral-900
+        border border-zinc-800
+        rounded-xl
+        overflow-hidden
+        transition-all duration-300
+        hover:border-red-600/60
+        hover:shadow-[0_0_24px_0_rgba(220,38,38,0.15)]
+        max-sm:max-w-100 max-sm:mx-auto max-sm:w-full
+        h-95 flex flex-col 
+      ">
+
+        {/* Top accent line */}
+        <div className="
+          absolute top-0 left-0 right-0 h-0.5
+          bg-linear-to-r from-transparent via-red-600 to-transparent
+          opacity-0 group-hover:opacity-100
+          transition-opacity duration-300
+          z-10
+        " />
+
+        {/* Image Container */}
+        <div className="
+          relative
+          h-48 sm:h-56 md:h-64
+          bg-zinc-900
+          border-b border-zinc-800
+          overflow-hidden
+        ">
+          {/* Background pattern */}
+          <div className="
+            absolute inset-0
+            bg-[radial-gradient(circle_at_center,_rgba(39,39,42,0.8)_0%,_rgba(9,9,11,1)_100%)]
+          " />
+
+          <Image
+            src={image || "/placeholder.svg"}
+            alt={title}
+            fill
+            className="
+              object-contain
+              p-4
+              transition-transform duration-500
+              group-hover:scale-105
+              drop-shadow-[0_4px_12px_rgba(0,0,0,0.5)]
+            "
+            sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 30vw"
+          />
+
+          {/* Hover overlay */}
+          <div className="
+            absolute inset-0
+            bg-red-600/5
+            opacity-0 group-hover:opacity-100
+            transition-opacity duration-300
+          " />
+        </div>
+
+        {/* Content */}
+        <div className="p-5">
+          {/* Decorative line */}
+          <div className="
+            w-8 h-0.5
+            bg-red-600
+            mb-3
+            transition-all duration-300
+            group-hover:w-16
+          " />
+
+          <h3 className="
+            text-sm sm:text-base
+            font-bold
+            text-zinc-100
+            line-clamp-3
+            leading-snug
+            tracking-wide
+            transition-colors duration-300
+            group-hover:text-white
+          ">
+            {title}
+          </h3>
+
+          {/* Bottom row */}
+          <div className="
+            flex items-center justify-between
+            mt-4 pt-4
+            border-t border-zinc-800
+          ">
+            <span className="
+              text-xs
+              text-zinc-500
+              tracking-widest
+              uppercase
+              font-medium
+            ">
+              { t("home.services.learnmore")}
+            </span>
+
+            {/* Arrow */}
+            <div className="
+              flex items-center justify-center
+              w-7 h-7
+              rounded-full
+              border border-zinc-700
+              text-zinc-500
+              transition-all duration-300
+              group-hover:border-red-600
+              group-hover:text-red-500
+              group-hover:bg-red-600/10
+            ">
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 12 12"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M2 6H10M10 6L7 3M10 6L7 9"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </article>
+    </Link>
+  );
+}
--- a/pages/products/product/products.tsx
+++ b/pages/products/product/products.tsx
@@ -0,0 +1,18 @@
+import Filter from "../filter/filter";
+import MainProduct from "./mianProduct";
+
+export function Products() {
+  return (
+    <div className="bg-[#1e1d1c] pb-10 pt-5 px-2">
+      <div className="max-w-300 mx-auto w-full z-20 relative">
+        <div className="flex flex-col items-start gap-5">
+          {/* filter part */}
+          <Filter />
+
+          {/* main products */}
+          <MainProduct />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/pages/products/slug/empty.tsx
+++ b/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>
+  );
+}
--- a/pages/products/slug/features.tsx
+++ b/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>
+  );
+}
--- a/pages/products/slug/loading.tsx
+++ b/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>
+  );
+}
--- a/pages/products/slug/rightSide.tsx
+++ b/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>
+  );
+}
--- a/pages/products/slug/slider.tsx
+++ b/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>
+  );
+}