diff --git a/public/assets/bg-illustrations/left.svg b/public/assets/bg-illustrations/left.svg
index 399db04..d2e002e 100644
--- a/public/assets/bg-illustrations/left.svg
+++ b/public/assets/bg-illustrations/left.svg
@@ -1,30 +1,30 @@
diff --git a/public/assets/bg-illustrations/moon.svg b/public/assets/bg-illustrations/moon.svg
new file mode 100644
index 0000000..5e6f95b
--- /dev/null
+++ b/public/assets/bg-illustrations/moon.svg
@@ -0,0 +1,8 @@
+
diff --git a/public/assets/bg-illustrations/right.svg b/public/assets/bg-illustrations/right.svg
index 313a095..1b6f7f6 100644
--- a/public/assets/bg-illustrations/right.svg
+++ b/public/assets/bg-illustrations/right.svg
@@ -1,32 +1,32 @@
diff --git a/src/components/HeroIllustrations.tsx b/src/components/HeroIllustrations.tsx
new file mode 100644
index 0000000..3a16f4f
--- /dev/null
+++ b/src/components/HeroIllustrations.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+
+interface IllustrationProps {
+ className?: string;
+}
+
+export const HeroIllustrationLeft: React.FC = ({ className }) => {
+ return (
+
+ );
+};
+
+export const HeroIllustrationRight: React.FC = ({ className }) => {
+ return (
+
+ );
+};
+
+export const HeroIllustrationSun: React.FC = ({ className }) => {
+ return (
+
+ );
+};
+
+export const HeroIllustrationMoon: React.FC = ({ className }) => {
+ return (
+
+ );
+};
+
diff --git a/src/components/ScenicHeroJourney.tsx b/src/components/ScenicHeroJourney.tsx
index bbcb5c1..32254cb 100644
--- a/src/components/ScenicHeroJourney.tsx
+++ b/src/components/ScenicHeroJourney.tsx
@@ -3,31 +3,21 @@
import React from 'react';
import { HeroSection } from './HeroSection';
import { RiverJourney } from './RiverJourney';
+import {
+ HeroIllustrationLeft,
+ HeroIllustrationRight,
+ HeroIllustrationSun,
+ HeroIllustrationMoon,
+} from './HeroIllustrations';
import styles from './ScenicHeroJourney.module.css';
-type BackdropImgProps = {
- name: 'left' | 'right' | 'sun';
- className: string;
-};
-
-function BackdropImg({ name, className }: BackdropImgProps) {
- return (
- 
- );
-}
-
function HeroBackdrop() {
return (
-
-
-
+
+
+
+
);
}