catalog connected to backend

components/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 h-[60vh] 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>
+  );
+}