fix(layout): رفع پوشیده‌شدن بردکرامب/محتوا زیر لوگوی هدر در موبایل + فاصلهٔ یکنواخت بالای صفحه‌ها

- هدر: لوگو در موبایل h-14 (دسکتاپ h-20 مثل قبل) — ارتفاع هدر از ۱۱۲ به ۸۸ پیکسل
- PageHero: h ثابت ۵۸vh → min-h + pt-32؛ اگر محتوا (مثل سرآغاز بلند انگلیسی درباره ما)
  بلندتر باشد، بخش بلندتر می‌شود و بردکرامب هرگز زیر لوگوی ثابت نمی‌رود
- Hero صفحهٔ اصلی: pt-28 تا بلوک وسط‌چین هم با هدر تداخل نکند؛ min-h به‌جای h-screen
با iOS Safari (آیفون) تست شد
This commit is contained in:
aramesh-site deploy
2026-10-10 22:02:37 +00:00
parent aa5e54b1cd
commit 7897efd975
3 changed files with 7 additions and 4 deletions
+2 -1
View File
@@ -51,7 +51,8 @@ export function Header() {
src={brand.logo} src={brand.logo}
alt={brand.name} alt={brand.name}
className={`w-auto object-contain transition-[height] duration-300 ease-lux ${ className={`w-auto object-contain transition-[height] duration-300 ease-lux ${
scrolled ? "h-14" : "h-20" // موبایل: لوگوی کوچک‌تر تا هدر محتوای زیرش را نپوشاند
scrolled ? "h-12 md:h-14" : "h-14 md:h-20"
}`} }`}
/> />
</Link> </Link>
+3 -1
View File
@@ -28,7 +28,9 @@ export function PageHero({ pageKey, hideImage = false }: PageHeroProps) {
}) })
return ( return (
<section className="relative flex h-[58vh] min-h-[420px] items-end overflow-hidden"> <section className="relative flex min-h-[58vh] items-end overflow-hidden pt-32 pb-16">
{/* pt-32 فضای هدر ثابت را رزرو می‌کند تا بردکرUMB/عنوان هرگز زیر لوگو نروند؛
min-h به‌جای h تا اگر محتوا بلندتر شد (موبایل)، بخش بلندتر شود نه اینکه زیر هدر برود */}
{hero.image && !hideImage && <img src={hero.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" fetchPriority="high" decoding="async" />} {hero.image && !hideImage && <img src={hero.image} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" fetchPriority="high" decoding="async" />}
{!hideImage && ( {!hideImage && (
+2 -2
View File
@@ -62,7 +62,7 @@ export function Hero() {
}) })
return ( return (
<section className="relative h-screen min-h-[640px] w-full overflow-hidden" aria-label={t('heroAria')}> <section className="relative min-h-screen w-full overflow-hidden pt-28" aria-label={t('heroAria')}>
{/* تصویر پس‌زمینه */} {/* تصویر پس‌زمینه */}
<motion.img <motion.img
src={brand.hero} src={brand.hero}
@@ -83,7 +83,7 @@ export function Hero() {
{/* محتوای اصلی هیرو */} {/* محتوای اصلی هیرو */}
<motion.div <motion.div
style={{ y: contentY }} style={{ y: contentY }}
className="relative mx-auto flex h-full max-w-site flex-col justify-center px-6 lg:px-10" className="relative mx-auto flex min-h-[calc(100vh-7rem)] max-w-site flex-col justify-center px-6 lg:px-10"
> >
<div className="w-full max-w-[700px] lg:max-w-[58%]"> <div className="w-full max-w-[700px] lg:max-w-[58%]">
{/* کیکر بالای تیتر */} {/* کیکر بالای تیتر */}