Add extra pictures to home page

3 files changed, 26 insertions, 0 deletions

diff --git a/client/public/branch.png b/client/public/branch.png
new 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
new 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>
   );
 }