diff options
author | Mo Tarbin <mhed.t91@gmail.com> | 2024-07-09 21:21:16 -0400 |
---|---|---|
committer | Mo Tarbin <mhed.t91@gmail.com> | 2024-07-09 21:21:16 -0400 |
commit | c684bdb9ece99935c4c5f3a3eb81787cc2a0ef19 (patch) | |
tree | db6b73e9722ed92b2471cd86dcb32be82322d85a /src/views/Landing/HomeHero.jsx | |
parent | 1255ea83568701f460f721e0c1a5d461fb0c5a25 (diff) | |
parent | e25a6d3be9b9ae443dd3e1cd57a8c5912cc088b2 (diff) | |
download | donetick-frontend-c684bdb9ece99935c4c5f3a3eb81787cc2a0ef19.tar.gz donetick-frontend-c684bdb9ece99935c4c5f3a3eb81787cc2a0ef19.tar.bz2 donetick-frontend-c684bdb9ece99935c4c5f3a3eb81787cc2a0ef19.zip |
Merge branch 'dev'
Diffstat (limited to '')
-rw-r--r-- | src/views/Landing/HomeHero.jsx | 53 |
1 files changed, 34 insertions, 19 deletions
diff --git a/src/views/Landing/HomeHero.jsx b/src/views/Landing/HomeHero.jsx index a96374a..644c9cc 100644 --- a/src/views/Landing/HomeHero.jsx +++ b/src/views/Landing/HomeHero.jsx @@ -4,15 +4,18 @@ import { Button } from '@mui/joy' import Typography from '@mui/joy/Typography' import Box from '@mui/material/Box' import Grid from '@mui/material/Grid' -import React from 'react' +import React, { useEffect } from 'react' import { useNavigate } from 'react-router-dom' import Logo from '@/assets/logo.svg' import screenShotMyChore from '@/assets/screenshot-my-chore.png' import { GitHub } from '@mui/icons-material' +import useWindowWidth from '../../hooks/useWindowWidth' const HomeHero = () => { const navigate = useNavigate() + const windowWidth = useWindowWidth() + const windowThreshold = 600 const HERO_TEXT_THAT = [ // 'Donetick simplifies the entire process, from scheduling and reminders to automatic task assignment and progress tracking.', // 'Donetick is the intuitive task and chore management app designed for groups. Take charge of shared responsibilities, automate your workflow, and achieve more together.', @@ -21,7 +24,7 @@ const HomeHero = () => { const [heroTextIndex, setHeroTextIndex] = React.useState(0) - React.useEffect(() => { + useEffect(() => { // const intervalId = setInterval( // () => setHeroTextIndex(index => index + 1), // 4000, // every 4 seconds @@ -58,6 +61,17 @@ const HomeHero = () => { > tick </span> + <span + style={{ + fontSize: 20, + fontWeight: 700, + position: 'relative', + top: 12, + right: 45, + }} + > + Beta + </span> </Typography> </Box> ) @@ -162,23 +176,24 @@ const HomeHero = () => { </Box> </div> </Grid> - - <Grid item xs={12} md={5}> - <div className='flex justify-center'> - <img - src={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' - /> - </div> - </Grid> + {windowWidth > windowThreshold && ( + <Grid item xs={12} md={5}> + <div className='flex justify-center'> + <img + src={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' + /> + </div> + </Grid> + )} </Grid> ) } |