diff options
| -rw-r--r-- | client/public/branch.png | bin | 0 -> 395945 bytes | |||
| -rw-r--r-- | client/public/dove.png | bin | 0 -> 564999 bytes | |||
| -rw-r--r-- | client/src/components/Home.tsx | 26 |
3 files changed, 26 insertions, 0 deletions
diff --git a/client/public/branch.png b/client/public/branch.png Binary files differnew file mode 100644 index 0000000..bed4c4a --- /dev/null +++ b/client/public/branch.png diff --git a/client/public/dove.png b/client/public/dove.png Binary files differnew file mode 100644 index 0000000..bca0635 --- /dev/null +++ b/client/public/dove.png diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx index f735195..5aa5f03 100644 --- a/client/src/components/Home.tsx +++ b/client/src/components/Home.tsx @@ -7,10 +7,12 @@ import p2 from '/EngagmentSession_06.23.2024-164.jpg'; import p3 from '/EngagmentSession_06.23.2024-259.jpg'; import p4 from '/EngagmentSession_06.23.2024-267.jpg'; import p5 from '/EngagmentSession_06.23.2024-284.jpg'; +import useMediaQuery from '@mui/material/useMediaQuery'; function Home() { const [currentIndex, setIndex] = useState<number>(0); const photos = [p0, p1, p2, p3, p4, p5]; + const isMobile = useMediaQuery('(max-width: 768px)'); useEffect(() => { const interval = setInterval(() => { @@ -23,6 +25,18 @@ function Home() { return ( <div className="carousel-container"> + {isMobile && ( + <img + style={{ + position: 'absolute', + top: 64, + right: 32, + height: 150, + width: 150, + }} + src="/dove.png" + /> + )} <div className="carousel"> {photos.map((photo, index) => ( <div @@ -37,6 +51,18 @@ function Home() { </div> ))} </div> + {isMobile && ( + <img + style={{ + position: 'absolute', + bottom: 32, + left: 0, + height: 200, + width: 200, + }} + src="/branch.png" + /> + )} </div> ); } |
