fix: resize and rearrange hero landing illustrations for laptop screens

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>