From 5927ee40e2259e883630c921fe6de601d9cff07a Mon Sep 17 00:00:00 2001 From: Amirhossein Khalili Date: Sun, 6 Sep 2026 12:33:38 +0330 Subject: [PATCH] feat: add dark mode coloring palette and luminous moon illustration --- public/assets/bg-illustrations/left.svg | 56 ++++----- public/assets/bg-illustrations/moon.svg | 8 ++ public/assets/bg-illustrations/right.svg | 60 ++++----- src/components/HeroIllustrations.tsx | 150 +++++++++++++++++++++++ src/components/ScenicHeroJourney.tsx | 30 ++--- 5 files changed, 226 insertions(+), 78 deletions(-) create mode 100644 public/assets/bg-illustrations/moon.svg create mode 100644 src/components/HeroIllustrations.tsx 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 ( ); }