diff --git a/app/products/[slug]/page.tsx b/app/products/[slug]/page.tsx
new file mode 100644
index 0000000..df3fe0b
--- /dev/null
+++ b/app/products/[slug]/page.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { DATA } from "@/lib/demoData";
+import { Features, RightSide, SliderComp } from "@/components/pages/products";
+
+export default function SlugPage() {
+  const statusColor =
+    DATA[0].status === "full"
+      ? "text-green-500"
+      : DATA[0].status === "empty"
+        ? "text-red-600"
+        : "text-yellow-800";
+
+  const statusText =
+    DATA[0].status === "full"
+      ? "Sotuvda mavjud"
+      : DATA[0].status === "empty"
+        ? "Sotuvda qolmagan"
+        : "Buyurtma asosida";
+
+  return (
+    <div className="min-h-screen bg-[#1e1d1c] py-40 px-4 md:px-8">
+      <div className="max-w-6xl mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
+          <SliderComp imgs={DATA[0].images} />
+
+          <RightSide
+            title={DATA[0].title}
+            name={DATA[0].name}
+            statusColor={statusColor}
+            statusText={statusText}
+            description={DATA[0].description}
+          />
+        </div>
+        <Features features={DATA[0].features} />
+      </div>
+    </div>
+  );
+}
diff --git a/app/products/page.tsx b/app/products/page.tsx
new file mode 100644
index 0000000..4c5e657
--- /dev/null
+++ b/app/products/page.tsx
@@ -0,0 +1,11 @@
+import { ProductBanner, Products } from "@/components/pages/products";
+import React from "react";
+
+export default function Page() {
+  return (
+    <div className="mb-90">
+      <ProductBanner />
+      <Products />
+    </div>
+  );
+}
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 917f0b5..14f4898 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -71,7 +71,7 @@ export function Navbar() {
                       Services
                     </Link>
                     <Link
-                      href="/services"
+                      href="/blog"
                       className="block px-4 py-2 text-black text-sm hover:bg-red-600 hover:text-white rounded-b-md"
                     >
                       Blog
@@ -80,7 +80,7 @@ export function Navbar() {
                 )}
               </div>
               
-              <Link href="/blog" className="text-white text-sm font-semibold hover:text-red-500 transition">
+              <Link href="/products" className="text-white text-sm font-semibold hover:text-red-500 transition">
                 Products
               </Link>
               <Link href="/contact" className="text-white text-sm font-semibold hover:text-red-500 transition">
diff --git a/components/pages/products/index.ts b/components/pages/products/index.ts
new file mode 100644
index 0000000..accacc6
--- /dev/null
+++ b/components/pages/products/index.ts
@@ -0,0 +1,5 @@
+export { ProductBanner } from "./productBanner";
+export { Products } from "./products";
+export { SliderComp } from "./slug/slider";
+export { RightSide } from "./slug/rightSide";
+export { Features } from "./slug/features";
diff --git a/components/pages/products/productBanner.tsx b/components/pages/products/productBanner.tsx
new file mode 100644
index 0000000..29607f6
--- /dev/null
+++ b/components/pages/products/productBanner.tsx
@@ -0,0 +1,43 @@
+import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
+
+export function ProductBanner() {
+  return (
+    <section className="relative w-full h-[60vh] min-h-100 overflow-hidden pt-10">
+      {/* Background Image */}
+      <div
+        className="absolute inset-0 z-0"
+        style={{
+          backgroundImage: "url(/images/blog/banner.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 ">
+            <DotAnimatsiya />
+            <p
+              className=" bg-linear-to-br from-white via-white to-black
+  text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
+            >
+              Ignum technology <br /> At The Ready
+            </p>
+          </div>
+          <div className="lg:w-[40%] text-gray-300 lg:mt-20 md:mt-10 sm:mt-5 ">
+            It emphasizes that these firefighters are there not just as public
+            servants but as a vital part of the community.
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/pages/products/productCard.tsx b/components/pages/products/productCard.tsx
new file mode 100644
index 0000000..730d699
--- /dev/null
+++ b/components/pages/products/productCard.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+interface ProductCardProps {
+  title: string;
+  name: string;
+  image: string;
+  slug: string;
+  status: "full" | "empty" | "withOrder";
+}
+
+export default function ProductCard({
+  title,
+  name,
+  image,
+  slug,
+  status,
+}: ProductCardProps) {
+  const statusColor =
+    status === "full"
+      ? "text-green-500"
+      : status === "empty"
+        ? "text-red-600"
+        : "text-yellow-800";
+
+  const statusText =
+    status === "full"
+      ? "Sotuvda mavjud"
+      : status === "empty"
+        ? "Sotuvda qolmagan"
+        : "Buyurtma asosida";
+  return (
+    <Link href={`/products/${slug}`}>
+      <article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full ">
+        {/* Image Container */}
+        <div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-70 w-[90%] mx-auto overflow-hidden bg-white">
+          <Image
+            src={image || "/placeholder.svg"}
+            alt={title}
+            fill
+            className="object-contain transition-transform duration-300"
+          />
+        </div>
+
+        {/* Content Container */}
+        <div className="p-6 sm:p-4">
+          {/* Title */}
+          <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
+            {title}
+          </h3>
+
+          {/* Meta Information */}
+          <div className="flex flex-col items-start gap-0 text-gray-400 text-sm sm:text-base mb-6">
+            <span className="font-medium">{name}</span>
+            <span className={`font-medium ${statusColor}`}>{statusText}</span>
+          </div>
+
+          {/* Read More Link */}
+          <span className="inline-flex items-center gap-2 text-red-600 font-bold text-base sm:text-lg uppercase tracking-wide hover:gap-4 transition-all duration-300 group/link">
+            Read More
+            <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover/link:translate-x-1" />
+          </span>
+        </div>
+      </article>
+    </Link>
+  );
+}
diff --git a/components/pages/products/products.tsx b/components/pages/products/products.tsx
new file mode 100644
index 0000000..d8804e9
--- /dev/null
+++ b/components/pages/products/products.tsx
@@ -0,0 +1,24 @@
+import ProductCard from "./productCard";
+
+export function Products() {
+  return (
+    <div className="bg-[#1e1d1c] py-20">
+      <div className="max-w-250 mx-auto w-full sm:-mt-50 -mt-30 z-20 relative">
+        <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
+          {Array(9)
+            .fill(null)
+            .map((_, index) => (
+              <ProductCard
+                key={index}
+                title="Elektr yong'in detektori-Ypres ver.2"
+                name="P-0834404"
+                image="/images/products/products.webp"
+                slug="P_0834404"
+                status="full"
+              />
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/pages/products/slug/features.tsx b/components/pages/products/slug/features.tsx
new file mode 100644
index 0000000..de8c8ea
--- /dev/null
+++ b/components/pages/products/slug/features.tsx
@@ -0,0 +1,27 @@
+export function Features({ features }: { features: string[] }) {
+  return (
+    <table className="w-full rounded-xl overflow-hidden">
+      <thead>
+        <tr className="border-b border-gray-700 bg-black">
+          <th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
+            Feature
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {features.map((feature, index) => (
+          <tr
+            key={index}
+            className={` border-gray-700 transition-colors hover:bg-opacity-80 ${
+              index % 2 === 0 ? "bg-[#323232]" : "bg-black/20"
+            }`}
+          >
+            <td className="px-4 py-4 md:px-6 text-sm md:text-base text-white font-medium">
+              {feature}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/components/pages/products/slug/rightSide.tsx b/components/pages/products/slug/rightSide.tsx
new file mode 100644
index 0000000..e2c6616
--- /dev/null
+++ b/components/pages/products/slug/rightSide.tsx
@@ -0,0 +1,112 @@
+
+import { Facebook } from "lucide-react";
+
+const socialLinks = [
+  { name: "telegram", icon: "✈️", color: "#0088cc" },
+  { name: "facebook", icon: <Facebook />, color: "#1877F2" },
+  { name: "odnoklassniki", icon: "ok", color: "#ED7100" },
+  { name: "vkontakte", icon: "VK", color: "#0077FF" },
+  { name: "twitter", icon: "𝕏", color: "#1DA1F2" },
+  { name: "whatsapp", icon: "W", color: "#25D366" },
+];
+
+interface RightSideProps {
+  title: string;
+  name: string;
+  description: string;
+  statusText: string;
+  statusColor: string;
+}
+
+export function RightSide({
+  title,
+  name,
+  description,
+  statusColor,
+  statusText,
+}: RightSideProps) {
+  return (
+    <div className="flex flex-col justify-center">
+      {/* Title */}
+      <h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-white mb-4 leading-tight">
+        {title}
+      </h1>
+
+      {/* Article ID */}
+      <div className="mb-3">
+        <p className="text-gray-400">
+          Artikul:
+          <span className="text-white font-semibold">{name}</span>
+        </p>
+      </div>
+
+      {/* Status Badge */}
+      <div className="mb-2">
+        <span
+          className={`inline-block py-2 rounded text-sm font-semibold ${statusColor}`}
+        >
+          {statusText}
+        </span>
+      </div>
+
+      {/* description */}
+      <div className="mb-2">
+        <p className="text-sm font-bold text-white mb-4 leading-tight">
+          {description}
+        </p>
+      </div>
+
+      {/* Price Section */}
+      <div className="mb-8">
+        <h2 className="text-2xl md:text-3xl font-bold text-red-700 mb-6">
+          17.00$
+        </h2>
+
+        {/* Action Buttons */}
+        <div className="flex flex-col sm:flex-row gap-4 mb-6">
+          {/* <button
+                        onClick={onPriceClick}
+                        className="flex-1 bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"
+                      >
+                        Narxni bilish
+                      </button> */}
+          <button
+            onClick={() => {}}
+            className="flex-1 border-2 border-red-700 text-red-700 hover:bg-red-50 font-bold py-3 px-6 rounded-lg transition duration-300"
+          >
+            Xabar yuborish
+          </button>
+          {/* <button
+                        onClick={() => setIsFavorite(!isFavorite)}
+                        className="p-3 border-2 border-gray-600 rounded-lg hover:border-red-700 transition duration-300"
+                        title="Add to favorites"
+                      >
+                        <Heart
+                          size={24}
+                          className={
+                            isFavorite ? "fill-red-700 text-red-700" : "text-gray-600"
+                          }
+                        />
+                      </button> */}
+        </div>
+
+        {/* Social Share Icons */}
+        <div className="flex gap-3 items-center">
+          <div className="flex gap-2">
+            {socialLinks.map((social) => (
+              <a
+                key={social.name}
+                href="#"
+                className="w-10 h-10 rounded-lg flex items-center justify-center text-white text-sm font-bold transition duration-300 hover:scale-110"
+                style={{ backgroundColor: social.color }}
+                title={social.name}
+              >
+                {social.icon}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/pages/products/slug/slider.tsx b/components/pages/products/slug/slider.tsx
new file mode 100644
index 0000000..70579ad
--- /dev/null
+++ b/components/pages/products/slug/slider.tsx
@@ -0,0 +1,59 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import { DATA } from "@/lib/demoData";
+
+// The custom CSS selectors for navigation
+const navigationPrevEl = ".custom-swiper-prev";
+const navigationNextEl = ".custom-swiper-next";
+
+export function SliderComp({ imgs }: { imgs: string[] }) {
+  return (
+    <div>
+      <div className="flex items-center justify-center relative">
+        <Swiper
+          modules={[Navigation]}
+          navigation={{
+            // Pass the class selectors here
+            prevEl: navigationPrevEl,
+            nextEl: navigationNextEl,
+          }}
+          pagination={{ clickable: true }}
+          className="w-full h-96 md:h-125 bg-white rounded-lg overflow-hidden shadow-lg"
+        >
+          {imgs.map((image, index) => (
+            <SwiperSlide
+              key={index}
+              className="bg-white flex items-center justify-center"
+            >
+              <img
+                src={image || "/placeholder.svg"}
+                alt={`${DATA[0].title} - ${index + 1}`}
+                className="w-full h-full object-contain p-4"
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        {/* Custom buttons */}
+        <button
+          className={`${navigationPrevEl.replace(
+            ".",
+            "",
+          )} absolute z-10 top-1/2 left-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center 
+          text-white flex items-center justify-center hover:cursor-pointer transition`}
+        >
+          ‹
+        </button>
+        <button
+          className={`${navigationNextEl.replace(
+            ".",
+            "",
+          )} absolute z-10 top-1/2 right-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:cursor-pointer transition `}
+        >
+          ›
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/lib/demoData.ts b/lib/demoData.ts
new file mode 100644
index 0000000..b44bcd3
--- /dev/null
+++ b/lib/demoData.ts
@@ -0,0 +1,30 @@
+export const DATA = [
+  {
+    name: "P-0834405",
+    title: "Elektr yong'in detektori-Ypres ver.3",
+    status: "full",
+    description: `Xavfsizlik va yong'in qo'l detektori barcha turdagi qabul qilish va nazorat qilish moslamalari bilan ishlash uchun mo'ljallangan. 
+    Detektor GOST R 53325-2012 bo'yicha a sinfiga mos keladi va himoya qopqog'ini ochib, qo'zg'aysan elementini - ishning markazidagi tugmachani 
+    bosgandan so'ng signal signalini hosil qiladi.Detektor korpusining kichik qalinligi uni shikastlanishdan himoya qiladi, tashqi ko'rinishini 
+    yaxshilaydi va faqat o'rnatish uchun qo'shimcha variantni ishlatishga imkon beradi. Elektr detektori-IPR ver.3 faqat HP signal kabellarida ishlashni ta'minlaydi. 
+    Detektorning navbatchilik rejimi qizil rangdagi ko'rinishlar bilan ko'rsatiladi, "yong'in" rejimi - qizil indikatorni doimiy ravishda yoqish orqali. 
+    Tugmani bosgandan va mahkamlagandan so'ng uni dastlabki holatiga qulay tarzda qaytarish( asbob bilan, maxsus kalitsiz); etkazib berish to'plamida shaffof himoya 
+    qopqog'ining mavjudligi; tizimga texnik xizmat ko'rsatishni soddalashtirish uchun muhrlash qobiliyati.`,
+    features: [
+      "Signal pallasida besleme zo'riqishida-9 + 28V;",
+      "Kutish rejimidagi iste'mol oqimi-40 mkA;",
+      'Detektor orqali "yong\'in" rejimidagi oqim - 22 ma bilan cheklanishi kerak;',
+      "Harorat oralig'i: -40°C dan +70°C gacha;",
+      "Olchamlari-108x100x27 mm;",
+      "Og'irligi-0,11 kg;",
+      "Muvaffaqiyatsizlik uchun o'rtacha ish vaqti - 60 000 soat;",
+      "Detektorning ishlash muddati 10 yil.",
+    ],
+    images: [
+      "/images/products/products.webp",
+      "/images/products/products.webp",
+      "/images/products/products.webp",
+      "/images/products/products.webp",
+    ],
+  },
+];
\ No newline at end of file
diff --git a/public/images/products/products.webp b/public/images/products/products.webp
new file mode 100644
index 0000000..6f3c0ec
Binary files /dev/null and b/public/images/products/products.webp differ