catalog connected to backend

components/pages/products/product/products.tsx

@@ -0,0 +1,21 @@
+import Filter from "../filter/filter";
+import FilterInfo from "../filter/filterInfo";
+import MainProduct from "./mianProduct";
+
+export function Products() {
+  return (
+    <div className="bg-[#1e1d1c] py-20">
+      <div className="max-w-300 mx-auto w-full z-20 relative">
+        <div className="flex items-start gap-5">
+          {/* filter part */}
+          <Filter />
+
+          {/* main products */}
+          <MainProduct />
+
+          <FilterInfo />
+        </div>
+      </div>
+    </div>
+  );
+}