fix: resize and rearrange hero landing illustrations for laptop screens

src/components/HeroSection.module.css

@@ -1,20 +1,29 @@
+/* ============================================================
+   HeroSection — central content overlay on the hero stage
+   ============================================================ */
+
+/* ── Content wrapper ─────────────────────────────────────────── */
 .heroContentWrapper {
   position: relative;
   width: 100%;
-  height: 680px;
+  height: 100%;
   z-index: 5;
 }
 
+/* ── Top bar: theme toggle (left) + language (right) ─────────── */
 .topBar {
   position: absolute;
-  inset: 0 0 auto;
+  top: 0;
-  z-index: 2;
+  left: 0;
+  right: 0;
+  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 72px 60px 0;
+  padding: clamp(18px, 2.5vw, 32px) var(--layout-page-gutter) 0;
 }
 
+/* ── Icon buttons ───────────────────────────────────────────── */
 .iconButton {
   display: inline-flex;
   align-items: center;
@@ -50,26 +59,31 @@
   fill: currentColor;
 }
 
+/* ── Hero central content ────────────────────────────────────── */
 .heroContent {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 74px;
+  justify-content: center;
+  height: 100%;
+  /* Horizontal padding keeps text clear of illustration zones   */
+  padding: 0 clamp(160px, 22vw, 460px);
   text-align: center;
 }
 
+/* ── Avatar ─────────────────────────────────────────────────── */
 .avatarWrapper {
-  margin-bottom: 26px;
+  margin-bottom: clamp(14px, 1.8vw, 22px);
 }
 
 .avatarRingOuter {
   display: inline-block;
-  padding: 6px;
+  padding: clamp(4px, 0.5vw, 7px);
-  border: 3px solid var(--color-blue-700);
+  border: clamp(2px, 0.25vw, 3px) solid var(--color-blue-700);
   border-radius: 50%;
   background: transparent;
-  box-shadow: 0 8px 24px var(--shadow-color);
+  box-shadow: 0 8px 32px var(--shadow-color);
 }
 
 [data-theme="dark"] .avatarRingOuter {
@@ -78,8 +92,8 @@
 
 .avatarContainer {
   position: relative;
-  width: 208px;
+  width: clamp(100px, 13vw, 168px);
-  height: 208px;
+  height: clamp(100px, 13vw, 168px);
   overflow: hidden;
   border: 0;
   border-radius: 50%;
@@ -91,43 +105,48 @@
   object-fit: cover;
 }
 
+/* ── Display title ──────────────────────────────────────────── */
 .heroTitle {
-  margin-bottom: 14px;
+  margin-bottom: clamp(8px, 1vw, 14px);
   color: var(--text-primary);
-  font-size: var(--font-size-display-hero);
+  /* Scale title fluidly so it never overflows into illustration zones */
-  line-height: var(--line-height-display-hero);
+  font-size: clamp(32px, 5vw, 64px);
+  line-height: 1.12;
   text-shadow: none;
+  white-space: nowrap;
 }
 
+/* ── Subtitle ───────────────────────────────────────────────── */
 .heroSubtitle {
-  margin-bottom: 40px;
+  margin-bottom: clamp(20px, 2.8vw, 36px);
   color: var(--text-primary);
-  font-size: 15px;
+  font-size: clamp(11px, 1vw, 15px);
   font-weight: 700;
-  letter-spacing: 0.16em;
+  letter-spacing: 0.18em;
   text-transform: uppercase;
+  white-space: nowrap;
 }
 
+/* ── Action buttons ─────────────────────────────────────────── */
 .actionButtons {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: clamp(10px, 1.4vw, 20px);
-  margin-bottom: 34px;
+  margin-bottom: clamp(18px, 2.2vw, 30px);
 }
 
 .heroButton {
-  width: 176px;
+  min-width: clamp(80px, 9vw, 120px);
-  height: 56px;
+  height: clamp(40px, 4.5vw, 52px);
-  padding: 0 28px;
+  padding: 0 clamp(16px, 2vw, 28px);
-  border-width: 3px;
+  border-width: 2px;
-  font-size: var(--font-size-body-default);
+  font-size: clamp(13px, 1.1vw, 16px);
 }
 
 .heroButtonOutline {
   border-color: var(--color-blue-600);
   background: transparent;
   color: var(--color-blue-700);
-  backdrop-filter: none;
 }
 
 .heroButtonPrimary {
@@ -153,17 +172,18 @@
   color: var(--color-blue-950);
 }
 
+/* ── Contact bar ─────────────────────────────────────────────── */
 .contactBar {
   display: inline-flex;
   align-items: center;
-  gap: 16px;
+  gap: clamp(10px, 1.4vw, 18px);
-  padding: 0;
   border: 0;
   background: transparent;
   color: var(--color-blue-700);
-  font-size: var(--font-size-body-small);
+  font-size: clamp(11px, 1vw, 14px);
   font-weight: 500;
-  line-height: var(--line-height-body-small);
+  line-height: 1.6;
+  white-space: nowrap;
 }
 
 [data-theme="dark"] .contactBar {
@@ -173,7 +193,7 @@
 .contactItem {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   color: inherit;
   transition: opacity var(--motion-duration-fast) ease;
 }
@@ -195,38 +215,22 @@
 
 .contactDivider {
   width: 1px;
-  height: 22px;
+  height: 18px;
   background: var(--color-blue-500);
-  opacity: 0.7;
+  opacity: 0.6;
-}
-
-@media (max-width: 1024px) {
-  .topBar {
-    padding: 48px var(--layout-page-gutter) 0;
-  }
-
-  .heroContent {
-    padding: 72px var(--layout-page-gutter) 0;
-  }
-
-  .heroTitle {
-    font-size: 54px;
-    line-height: 64px;
-  }
-
-  .heroButton {
-    width: 156px;
-  }
 }
 
+/* ================================================================
+   MOBILE  ≤ 640px
+   ================================================================ */
 @media (max-width: 640px) {
   .heroContentWrapper {
-    min-height: 760px;
     height: auto;
+    min-height: 680px;
   }
 
   .topBar {
-    padding-top: 24px;
+    padding-top: 18px;
   }
 
   .iconButton {
@@ -235,62 +239,47 @@
   }
 
   .heroContent {
-    min-height: 760px;
+    /* Switch to top-anchored layout on mobile */
-    padding: 82px var(--layout-page-gutter) 48px;
+    height: auto;
-  }
+    min-height: 680px;
-
+    padding: 72px 24px 40px;
-  .avatarWrapper {
+    justify-content: flex-start;
-    margin-bottom: 20px;
-  }
-
-  .avatarRingOuter {
-    padding: 4px;
-    border-width: 2px;
-  }
-
-  .avatarContainer {
-    width: 148px;
-    height: 148px;
   }
 
   .heroTitle {
+    font-size: clamp(30px, 8.5vw, 42px);
+    white-space: normal;
     max-width: 300px;
-    margin-bottom: 10px;
+    line-height: 1.15;
-    font-size: 40px;
-    line-height: 48px;
   }
 
   .heroSubtitle {
-    max-width: 280px;
+    white-space: normal;
-    margin-bottom: 28px;
+    max-width: 260px;
-    font-size: 12px;
+    letter-spacing: 0.14em;
-    line-height: 18px;
   }
 
   .actionButtons {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     width: 100%;
-    max-width: 360px;
+    max-width: 320px;
     gap: 8px;
-    margin-bottom: 28px;
   }
 
   .heroButton {
-    width: auto;
     min-width: 0;
-    height: 48px;
+    width: auto;
-    padding: 0 12px;
+    height: 42px;
-    border-width: 2px;
+    padding: 0 8px;
-    font-size: 14px;
+    font-size: 13px;
   }
 
   .contactBar {
     flex-direction: column;
-    gap: 8px;
+    gap: 6px;
-    max-width: 100%;
+    white-space: normal;
     font-size: 12px;
-    line-height: 18px;
   }
 
   .contactItem {
@@ -303,6 +292,9 @@
   }
 }
 
+/* ================================================================
+   HOVER STATES
+   ================================================================ */
 @media (hover: hover) and (pointer: fine) {
   .iconButton:hover {
     color: var(--color-blue-500);

src/components/ScenicHeroJourney.module.css

@@ -1,23 +1,112 @@
+/* ============================================================
+   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.
+   ============================================================ */
+
+/* ── Container ─────────────────────────────────────────────── */
 .scenicContainer {
   position: relative;
   width: 100%;
-  max-width: 1440px;
   height: auto;
-  overflow: hidden;
+  overflow: visible;
   background-color: var(--bg-page);
 }
 
+/* ── Hero Stage ─────────────────────────────────────────────── */
 .heroStage {
   position: relative;
   width: 100%;
-  height: 680px;
+  /* fluid height: shrinks on narrower screens */
+  height: clamp(360px, 46vw, 680px);
   overflow: hidden;
   background: var(--bg-page);
 }
 
-@media (max-width: 640px) {
+/* ── Backdrop wrapper ───────────────────────────────────────── */
-  .heroStage {
+.heroBackdrop {
-    min-height: 760px;
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* ── All backdrop imgs are absolutely positioned ─────────────── */
+.heroBackdrop img {
+  position: absolute;
+  display: block;
   height: auto;
 }
+
+/* ── Dark-mode tint ─────────────────────────────────────────── */
+:global([data-theme="dark"]) .heroBackdrop {
+  opacity: 0.82;
+  filter: saturate(0.88) brightness(0.9);
+}
+
+/* ================================================================
+   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).
+   ================================================================ */
+.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
+   ================================================================ */
+@media (max-width: 640px) {
+  .heroStage {
+    height: auto;
+    min-height: 680px;
+  }
+
+  .backdropLeft {
+    top: 130px;
+    left: -30px;
+    width: clamp(100px, 26vw, 160px);
+  }
+
+  .backdropRight {
+    top: 136px;
+    right: -30px;
+    width: clamp(110px, 28vw, 170px);
+  }
+
+  .backdropSun {
+    top: 44px;
+    right: 16px;
+    width: clamp(36px, 9vw, 56px);
+  }
 }

src/components/ScenicHeroJourney.tsx

@@ -3,14 +3,40 @@
 import React from 'react';
 import { HeroSection } from './HeroSection';
 import { RiverJourney } from './RiverJourney';
-import { HeroLandscapeScene } from './scenes/HeroLandscapeScene';
 import styles from './ScenicHeroJourney.module.css';
 
+type BackdropImgProps = {
+  name: 'left' | 'right' | 'sun';
+  className: string;
+};
+
+function BackdropImg({ name, className }: BackdropImgProps) {
+  return (
+    <img
+      src={`/assets/bg-illustrations/${name}.svg`}
+      alt=""
+      aria-hidden="true"
+      draggable={false}
+      className={className}
+    />
+  );
+}
+
+function HeroBackdrop() {
+  return (
+    <div className={styles.heroBackdrop} aria-hidden="true">
+      <BackdropImg name="left"  className={styles.backdropLeft} />
+      <BackdropImg name="right" className={styles.backdropRight} />
+      <BackdropImg name="sun"   className={styles.backdropSun} />
+    </div>
+  );
+}
+
 export const ScenicHeroJourney: React.FC = () => {
   return (
     <div className={styles.scenicContainer}>
       <section className={styles.heroStage} aria-label="Introduction">
-        <HeroLandscapeScene />
+        <HeroBackdrop />
         <HeroSection />
       </section>