category detail

2026-07-21 09:48:39 +03:30
parent 6ae9a6a17f
commit fe1e545aaf
10 changed files with 254 additions and 13 deletions
@@ -0,0 +1,47 @@
+import heroImage from "@/assets/images/category/hero.jpg";
+import { ArrowLeft2 } from "iconsax-reactjs";
+import Image from "next/image";
+import Link from "next/link";
+import { type FC } from "react";
+import { CATEGORY_DESCRIPTION, CATEGORY_TITLE } from "../constants";
+
+const CategoryHero: FC = () => {
+  return (
+    <>
+      <section
+        className="relative overflow-x-clip px-4 sm:px-8 lg:px-30 py-6 sm:py-8 lg:py-10"
+        style={{
+          backgroundImage: "linear-gradient(108.5deg, rgba(33, 88, 140, 0.1) 89.65%, rgba(237, 243, 248, 0.3) 100%)",
+        }}
+      >
+        <div className="flex flex-col lg:flex-row lg:items-center gap-6 lg:gap-10">
+          <div className="flex-1 space-y-3 sm:space-y-4">
+            <h1 className="text-[#0A1B2C] text-2xl sm:text-3xl lg:text-[32px] font-bold">{CATEGORY_TITLE}</h1>
+            <p className="text-sm text-[#0A1B2C]/80 leading-7 max-w-140">{CATEGORY_DESCRIPTION}</p>
+          </div>
+
+          <div className="relative z-10 mx-auto shrink-0 lg:mx-0 lg:-mb-28">
+            <Image
+              src={heroImage}
+              alt={CATEGORY_TITLE}
+              width={360}
+              height={360}
+              priority
+              className="aspect-square w-55 sm:w-70 lg:w-[320px] rounded-2xl sm:rounded-3xl object-cover shadow-[0px_-4px_12px_0px_rgba(0,0,0,0.12)]"
+            />
+          </div>
+        </div>
+      </section>
+
+      <nav aria-label="مسیر صفحه" className="relative z-0 flex items-center justify-start gap-2 bg-secondary px-4 sm:px-8 lg:px-30 py-3 text-sm text-[#3F4D5A]">
+        <Link href="/" className="transition-colors hover:text-primary">
+          صفحه اصلی
+        </Link>
+        <ArrowLeft2 size={14} color="currentColor" className="shrink-0" />
+        <span className="font-bold">{CATEGORY_TITLE}</span>
+      </nav>
+    </>
+  );
+};
+
+export default CategoryHero;