From 8f2097a81dc7fad154aa2b51da9c726f53f3d145 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Sun, 5 Jan 2025 13:17:17 -0800
Subject: Add extra pictures to home page

---
 client/public/branch.png       | Bin 0 -> 395945 bytes
 client/public/dove.png         | Bin 0 -> 564999 bytes
 client/src/components/Home.tsx |  26 ++++++++++++++++++++++++++
 3 files changed, 26 insertions(+)
 create mode 100644 client/public/branch.png
 create mode 100644 client/public/dove.png

(limited to 'client')

diff --git a/client/public/branch.png b/client/public/branch.png
new file mode 100644
index 0000000..bed4c4a
Binary files /dev/null and b/client/public/branch.png differ
diff --git a/client/public/dove.png b/client/public/dove.png
new file mode 100644
index 0000000..bca0635
Binary files /dev/null and b/client/public/dove.png differ
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>
   );
 }
-- 
cgit v1.2.3