hamid zarghami
48 lines
1.9 KiB
TypeScript
48 lines
1.9 KiB
TypeScript
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 gap-6 lg:flex-row lg:items-center lg:gap-10">
|
||
<div className="min-w-0 flex-1 space-y-3 sm:space-y-4">
|
||
<h1 className="text-2xl font-bold text-[#0A1B2C] sm:text-3xl lg:text-[32px]">{CATEGORY_TITLE}</h1>
|
||
<p className="max-w-140 text-sm leading-7 text-[#0A1B2C]/80">{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-48 rounded-2xl object-cover shadow-[0px_-4px_12px_0px_rgba(0,0,0,0.12)] sm:w-60 sm:rounded-3xl lg:w-80"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<nav aria-label="مسیر صفحه" className="relative z-0 flex items-center justify-start gap-2 overflow-x-auto bg-secondary px-4 py-3 text-sm whitespace-nowrap text-[#3F4D5A] sm:px-8 lg:px-30">
|
||
<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;
|