responsive

This commit is contained in:
hamid zarghami
2026-07-21 15:16:47 +03:30
parent 14d1422970
commit 112aee1cdf
10 changed files with 46 additions and 44 deletions
+6 -6
View File
@@ -14,10 +14,10 @@ const CategoryHero: FC = () => {
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 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">
@@ -27,13 +27,13 @@ const CategoryHero: FC = () => {
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)]"
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 bg-secondary px-4 sm:px-8 lg:px-30 py-3 text-sm text-[#3F4D5A]">
<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>