products and product/slug page done

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>
+  );
+}

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>
+  );
+}