Add dark mode screenshot and enhance image styling in HomeHero component

2025-06-21 00:07:31 -04:00
parent 12537ec7f3
commit ef8c63c176
3 changed files with 10 additions and 3 deletions
--- a/src/assets/screenshot-my-chore-dark.png
+++ b/src/assets/screenshot-my-chore-dark.png
--- a/src/assets/screenshot-my-chore.png
+++ b/src/assets/screenshot-my-chore.png
--- a/src/views/Landing/HomeHero.jsx
+++ b/src/views/Landing/HomeHero.jsx
@@ -171,14 +171,21 @@ const HomeHero = () => {
            <img
              src={mode === 'dark' ? screenShotMyChoreDark : screenShotMyChore}
              width={'100%'}
-              style={{
-                maxWidth: 300,
-              }}
              height={'auto'}
              alt='Hero img'
              data-aos-delay={100 * 2}
              data-aos-anchor='[data-aos-id-hero]'
              data-aos='fade-left'
+              style={{
+                width: '100%',
+                maxWidth: 300,
+              }}
+              onMouseEnter={e => {
+                e.target.style.transform = 'rotate(0deg) scale(1.05)'
+              }}
+              onMouseLeave={e => {
+                e.target.style.transform = 'rotate(5deg) scale(1)'
+              }}
            />
          </div>
        </Grid>