From ad51d97567425ec925bb5d6af572c0edd073b5cc Mon Sep 17 00:00:00 2001 From: Amirhossein Khalili Date: Sun, 6 Sep 2026 12:09:39 +0330 Subject: [PATCH] fix: resize and rearrange hero landing illustrations for tablet and mobile screens --- public/assets/bg-illustrations/left.svg | 30 +++++ public/assets/bg-illustrations/right.svg | 32 +++++ public/assets/bg-illustrations/sun.svg | 15 +++ src/components/HeroSection.module.css | 69 +++++++---- src/components/ScenicHeroJourney.module.css | 124 ++++++++++++++------ 5 files changed, 215 insertions(+), 55 deletions(-) create mode 100644 public/assets/bg-illustrations/left.svg create mode 100644 public/assets/bg-illustrations/right.svg create mode 100644 public/assets/bg-illustrations/sun.svg diff --git a/public/assets/bg-illustrations/left.svg b/public/assets/bg-illustrations/left.svg new file mode 100644 index 0000000..399db04 --- /dev/null +++ b/public/assets/bg-illustrations/left.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/bg-illustrations/right.svg b/public/assets/bg-illustrations/right.svg new file mode 100644 index 0000000..313a095 --- /dev/null +++ b/public/assets/bg-illustrations/right.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/bg-illustrations/sun.svg b/public/assets/bg-illustrations/sun.svg new file mode 100644 index 0000000..89a064a --- /dev/null +++ b/public/assets/bg-illustrations/sun.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/components/HeroSection.module.css b/src/components/HeroSection.module.css index 34febc5..b0dd176 100644 --- a/src/components/HeroSection.module.css +++ b/src/components/HeroSection.module.css @@ -109,11 +109,10 @@ .heroTitle { margin-bottom: clamp(8px, 1vw, 14px); color: var(--text-primary); - /* Scale title fluidly so it never overflows into illustration zones */ font-size: clamp(32px, 5vw, 64px); line-height: 1.12; text-shadow: none; - white-space: nowrap; + /* Allow wrapping on smaller screens so text never clips */ } /* ── Subtitle ───────────────────────────────────────────────── */ @@ -124,7 +123,6 @@ font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; - white-space: nowrap; } /* ── Action buttons ─────────────────────────────────────────── */ @@ -183,7 +181,6 @@ font-size: clamp(11px, 1vw, 14px); font-weight: 500; line-height: 1.6; - white-space: nowrap; } [data-theme="dark"] .contactBar { @@ -223,14 +220,44 @@ /* ================================================================ MOBILE ≤ 640px ================================================================ */ -@media (max-width: 640px) { +/* ================================================================ + TABLET 501px – 1100px — match the illustration breakpoint + ================================================================ */ +@media (max-width: 1100px) and (min-width: 501px) { + .heroContent { + /* Top-anchor content so it sits nicely in the upper-center zone */ + justify-content: flex-start; + padding-top: clamp(60px, 8vw, 90px); + } + + .heroTitle { + /* Allow wrapping at tablet so text stays within the center zone */ + max-width: 520px; + } + + .contactBar { + /* Wrap contact items on narrow tablets */ + flex-wrap: wrap; + justify-content: center; + gap: 8px 14px; + } + + .contactDivider { + display: none; + } +} + +/* ================================================================ + MOBILE ≤ 500px (screensizes under 500px) + ================================================================ */ +@media (max-width: 500px) { .heroContentWrapper { height: auto; - min-height: 680px; + min-height: 520px; } .topBar { - padding-top: 18px; + padding: 16px 14px 0; } .iconButton { @@ -239,47 +266,47 @@ } .heroContent { - /* Switch to top-anchored layout on mobile */ height: auto; - min-height: 680px; - padding: 72px 24px 40px; + min-height: 520px; + padding: 66px 16px 36px; justify-content: flex-start; } .heroTitle { - font-size: clamp(30px, 8.5vw, 42px); + font-size: clamp(26px, 7.8vw, 36px); white-space: normal; - max-width: 300px; + max-width: 270px; line-height: 1.15; } .heroSubtitle { white-space: normal; - max-width: 260px; - letter-spacing: 0.14em; + max-width: 250px; + font-size: 11px; + letter-spacing: 0.12em; } .actionButtons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; - max-width: 320px; - gap: 8px; + max-width: 276px; + gap: 6px; } .heroButton { min-width: 0; width: auto; - height: 42px; - padding: 0 8px; - font-size: 13px; + height: 38px; + padding: 0 6px; + font-size: 12px; } .contactBar { flex-direction: column; - gap: 6px; + gap: 5px; white-space: normal; - font-size: 12px; + font-size: 11.5px; } .contactItem { diff --git a/src/components/ScenicHeroJourney.module.css b/src/components/ScenicHeroJourney.module.css index a0d2ece..99ff3b2 100644 --- a/src/components/ScenicHeroJourney.module.css +++ b/src/components/ScenicHeroJourney.module.css @@ -1,9 +1,10 @@ /* ============================================================ - ScenicHeroJourney — hero stage with fluid-scaling SVG backdrop - Strategy: illustrations use fluid width via clamp() so they - always leave a comfortable gap to the center content. - They are pushed left/right so ~half bleeds off the canvas edge, - clipped by heroStage overflow:hidden — matching the design. + ScenicHeroJourney — hero stage with SVG backdrop + Breakpoint strategy: + ≤ 640px → mobile (large bold crop, small sun clear of toggle) + 641-1100px → tablet (large bold crop, fluid width) + 1101-1440px → laptop (fluid clamp bleed — the approved look) + > 1440px → ultra-wide (frozen at 1440px values, overflow:visible) ============================================================ */ /* ── Container ─────────────────────────────────────────────── */ @@ -19,7 +20,6 @@ .heroStage { position: relative; width: 100%; - /* fluid height: shrinks on narrower screens */ height: clamp(360px, 46vw, 680px); overflow: hidden; background: var(--bg-page); @@ -48,65 +48,121 @@ } /* ================================================================ - LEFT illustration (SVG intrinsic: 397 × 600) - Strategy: width scales with viewport so it's always ~28% of - the canvas width. Pushed so its RIGHT edge aligns with the - leftmost ~22% of the canvas (the rest bleeds off the left edge). + LAPTOP 1101px – 1440px (default — approved bleed look) + Illustrations scale with vw and partially bleed off canvas edges. ================================================================ */ .backdropLeft { - /* Start below the topBar icon zone (padding ~32px + icon 44px = ~76px) */ top: clamp(72px, 8vw, 100px); left: clamp(-220px, calc(22% - 28vw), -40px); width: clamp(240px, 28vw, 440px); } -/* ================================================================ - RIGHT illustration (SVG intrinsic: 435 × 533) - Mirror of left: right edge bleeds off the right edge. - ================================================================ */ .backdropRight { - /* Slightly lower than left to maintain visual rhythm */ top: clamp(80px, 9vw, 110px); right: clamp(-240px, calc(22% - 29vw), -40px); width: clamp(250px, 29vw, 460px); } -/* ================================================================ - SUN illustration (SVG intrinsic: 139 × 139) - Sits in the upper-right quadrant, between the center text and - the right cubes. Scales fluidly. - ================================================================ */ .backdropSun { top: clamp(20px, 3.5vw, 52px); - /* place sun between center (50%) and right illustration edge */ right: clamp(100px, calc(22% + 2vw), 380px); width: clamp(52px, 10vw, 139px); } /* ================================================================ - MOBILE ≤ 640px — tighter crop, smaller presence + TABLET 501px – 1100px + Large illustrations with heavy bleed — bold fragments at edges. + Width scales fluidly; fixed bleed offset keeps content clear. ================================================================ */ -@media (max-width: 640px) { +@media (max-width: 1100px) and (min-width: 501px) { + .heroStage { + height: clamp(360px, 52vw, 480px); + } + + /* Left — visible slice ≈ width - 150px, always < content padding */ + .backdropLeft { + top: clamp(88px, 10vw, 108px); + left: -150px; + width: clamp(280px, 36vw, 360px); + } + + /* Right — slightly larger, deeper bleed */ + .backdropRight { + top: clamp(96px, 11vw, 116px); + right: -165px; + width: clamp(295px, 38vw, 380px); + } + + /* Sun — upper-right zone, between avatar and right cubes */ + .backdropSun { + top: clamp(26px, 3.5vw, 44px); + right: clamp(120px, 33vw, 280px); + width: clamp(62px, 9vw, 96px); + } +} + +/* ================================================================ + MOBILE ≤ 500px (screensizes under 500px) + Assets moved UP to the sides (matching desktop/tablet aesthetic): + - Anchored via top, flanking the avatar & title + - Fluid side bleed maintains balance between visibility & clearance + - Zero collision with central avatar, title, buttons, or contact bar + ================================================================ */ +@media (max-width: 500px) { .heroStage { height: auto; - min-height: 680px; + min-height: 520px; } .backdropLeft { - top: 130px; - left: -30px; - width: clamp(100px, 26vw, 160px); + top: clamp(75px, 16vw, 95px); + bottom: auto; + left: clamp(-100px, calc(20vw - 230px), -100px); + width: clamp(200px, 44vw, 250px); } .backdropRight { - top: 136px; - right: -30px; - width: clamp(110px, 28vw, 170px); + top: clamp(82px, 18vw, 102px); + bottom: auto; + right: clamp(-120px, calc(20vw - 240px), -120px); + width: clamp(210px, 46vw, 260px); } .backdropSun { - top: 44px; - right: 16px; - width: clamp(36px, 9vw, 56px); + top: clamp(24px, 5vw, 36px); + right: clamp(52px, 15vw, 68px); + width: clamp(34px, 8vw, 42px); + } +} + +/* ================================================================ + ULTRA-WIDE > 1440px + Canvas capped at 1440px but vw keeps growing → bleed explodes. + Freeze at the values the clamp() formulas resolve to @ 1440px. + heroStage overflow:visible lets illustrations escape into the + extra viewport space (body overflow-x:hidden prevents scrollbar). + ================================================================ */ +@media (min-width: 1441px) { + .heroStage { + height: 662px; + overflow: visible; + } + + .backdropLeft { + top: 100px; + left: -86px; + width: 403px; + } + + .backdropRight { + top: 110px; + right: -101px; + width: 418px; + } + + .backdropSun { + top: 50px; + right: 346px; + width: 139px; } }