-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #108 from flickmatch/what-we-do
Designed what-we-do page/added whatsapp button on home
- Loading branch information
Showing
9 changed files
with
517 additions
and
51 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,99 @@ | ||
| .box { | ||
| height: 100vh; | ||
| ::-webkit-scrollbar { | ||
| display: none; | ||
| } | ||
|
|
||
| .container { | ||
| display: flex; | ||
| flex-flow: column; | ||
| margin-top: 90px; | ||
| margin-top: 110px; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .smallDeviceContainer { | ||
| display: flex; | ||
| flex-flow: column; | ||
| margin-top: 80px; | ||
| margin-top: 120px; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .videoCarousel { | ||
| width: 100%; | ||
| margin-top: 40px; | ||
| } | ||
|
|
||
| .youtube { | ||
| width: 100%; | ||
| display: flex; | ||
| flex-flow: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .logo { | ||
| height: 48px; | ||
| } | ||
|
|
||
| .job { | ||
| .job, | ||
| .highlights { | ||
| font-weight: 600; | ||
| margin-top: 45px; | ||
| margin-bottom: 5px; | ||
| font-size: 20px; | ||
| color: #4ce95a; | ||
| text-align: center; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .highlights { | ||
| font-weight: 500; | ||
| margin-top: 20px; | ||
| font-size: 19px; | ||
| } | ||
|
|
||
| .stats { | ||
| margin-top: 35px; | ||
| margin-bottom: 50px; | ||
| margin-top: 20px; | ||
| margin-bottom: 40px; | ||
| } | ||
|
|
||
| .mobileStats { | ||
| width: 390px; | ||
| margin-top: 35px; | ||
| margin-bottom: 80px; | ||
| } | ||
|
|
||
| .yout, | ||
| .insta { | ||
| font-weight: 400; | ||
| text-decoration: none; | ||
| color: #4ce95a; | ||
| } | ||
|
|
||
| .heading { | ||
| color: #4ce95a; | ||
| font-weight: 600; | ||
| text-align: center; | ||
| letter-spacing: 1.2px; | ||
| } | ||
|
|
||
| .assessment { | ||
| flex-flow: column; | ||
| margin-top: 80px; | ||
| } | ||
|
|
||
| .playerHistory { | ||
| margin-top: 50px; | ||
| } | ||
|
|
||
| .comingSoonImg { | ||
| display: flex; | ||
| margin: auto; | ||
| margin-top: 30px !important; | ||
| } | ||
|
|
||
| .comingSoonText { | ||
| font-weight: 600; | ||
| margin-top: 25px; | ||
| margin-bottom: 5px; | ||
| font-size: 20px; | ||
| color: #4ce95a; | ||
| text-align: center; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,138 @@ | ||
| //import { FullSizeCenteredFlexBox } from '@/components/styled'; | ||
| import { useState } from 'react'; | ||
| import Carousel from 'react-material-ui-carousel'; | ||
| import type { YouTubeProps } from 'react-youtube'; | ||
| import YouTube from 'react-youtube'; | ||
|
|
||
| import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore'; | ||
| import NavigateNextIcon from '@mui/icons-material/NavigateNext'; | ||
| import Box from '@mui/material/Box'; | ||
| import Typography from '@mui/material/Typography'; | ||
|
|
||
| import Meta from '@/components/Meta'; | ||
| import { FlexBox } from '@/components/styled'; | ||
| import useOrientation from '@/hooks/useOrientation'; | ||
|
|
||
| import styles from './WhatWeDo.module.scss'; | ||
| import mainlogo from '/logo.png'; | ||
| import stats from '/stats.png'; | ||
| import { assessmentUrl, comingSoonUrl, statsUrl } from './constants'; | ||
|
|
||
| function WhatWeDo() { | ||
| const [hideIndicators, setHideIndicator] = useState(true); | ||
| const isPortrait = useOrientation(); | ||
|
|
||
| const opts: YouTubeProps['opts'] = { | ||
| height: '450', | ||
| width: isPortrait ? '100%' : '60%', | ||
| playerVars: { | ||
| // https://developers.google.com/youtube/player_parameters | ||
| autoplay: 0, | ||
| }, | ||
| }; | ||
|
|
||
| const onReady = (event: { target: { pauseVideo: () => void } }) => { | ||
| event.target.pauseVideo(); | ||
| }; | ||
|
|
||
| //hiding left/right buttons on play | ||
| const onPlay = () => { | ||
| setHideIndicator(false); | ||
| }; | ||
|
|
||
| const onPause = () => { | ||
| setHideIndicator(true); | ||
| }; | ||
|
|
||
| const videosList = [ | ||
| { | ||
| id: 'hWcpLjUQ7As', | ||
| }, | ||
| { | ||
| id: 'q-Z36q5RAzQ', | ||
| }, | ||
| { | ||
| id: 'aeJssUS7U7w', | ||
| }, | ||
| { | ||
| id: '00qyzOfbWgM', | ||
| }, | ||
| { | ||
| id: 'VeYnBAyyiO4', | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <> | ||
| <Meta title="What We Do" /> | ||
| <Box className={styles.box}> | ||
| <Box className={isPortrait ? styles.smallDeviceContainer : styles.container}> | ||
| <img src={mainlogo} alt="logo" className={styles.logo} /> | ||
| <Typography className={styles.job}>Find a football game near you! ⚽</Typography> | ||
| <img src={stats} alt="stats" className={isPortrait ? styles.mobileStats : styles.stats} /> | ||
| <Typography variant="h3" className={styles.heading}> | ||
| Match Highlights | ||
| </Typography> | ||
| <Carousel | ||
| autoPlay={false} | ||
| className={styles.videoCarousel} | ||
| swipe={true} | ||
| duration={500} | ||
| interval={5000} | ||
| NextIcon={<NavigateNextIcon />} | ||
| PrevIcon={<NavigateBeforeIcon />} | ||
| navButtonsAlwaysVisible={hideIndicators} | ||
| > | ||
| {videosList.map((item, i) => ( | ||
| <YouTube | ||
| key={i} | ||
| videoId={item.id} | ||
| opts={opts} | ||
| onReady={onReady} | ||
| onPlay={onPlay} | ||
| onPause={onPause} | ||
| onError={onPause} | ||
| className={styles.youtube} | ||
| /> | ||
| ))} | ||
| </Carousel> | ||
|
|
||
| <FlexBox className={styles.assessment}> | ||
| <Typography variant="h3" className={styles.heading}> | ||
| Skill Assessments | ||
| </Typography> | ||
| <Typography className={styles.job}> | ||
| We analyze data to provide you with insightful statistics. | ||
| </Typography> | ||
| <img | ||
| src={assessmentUrl} | ||
| alt="match assessments" | ||
| className={isPortrait ? styles.mobileStats : styles.stats} | ||
| /> | ||
| <img | ||
| src={statsUrl} | ||
| alt="stats" | ||
| className={isPortrait ? styles.mobileStats : styles.stats} | ||
| /> | ||
| </FlexBox> | ||
| <Box className={styles.playerHistory}> | ||
| <Typography variant="h3" className={styles.heading}> | ||
| Players History | ||
| </Typography> | ||
| <img src={comingSoonUrl} alt="coming soon" className={styles.comingSoonImg} /> | ||
| <Typography className={styles.comingSoonText}>Coming soon....</Typography> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default WhatWeDo; | ||
|
|
||
| { | ||
| /* <Typography className={styles.highlights}> | ||
| Catch all the highlights on{' '} | ||
| <a href="https://www.youtube.com/@FlickMatch" className={styles.yout}> | ||
| YouTube | ||
| </a>{' '} | ||
| and{' '} | ||
| <a href="https://www.instagram.com/flickmatch/" className={styles.insta}> | ||
| Instagram. | ||
| </a> | ||
| </Typography> */ | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| const assessmentUrl = | ||
| 'https://firebasestorage.googleapis.com/v0/b/flickmatch-374a2.appspot.com/o/stats.png?alt=media&token=fca0744b-1af4-4bcd-bc33-454afde3d163&_gl=1*1fnjcf1*_ga*MTA1NTE1NDY0MC4xNjg4ODgzODE5*_ga_CW55HF8NVT*MTY5OTQ2MzgyNS42LjEuMTY5OTQ2Mzk2OS42MC4wLjA.'; | ||
|
|
||
| const statsUrl = | ||
| 'https://firebasestorage.googleapis.com/v0/b/flickmatch-374a2.appspot.com/o/stats%20post.png?alt=media&token=38f3f94f-53e1-4c91-a7af-090938075704&_gl=1*1mnnlxw*_ga*MTA1NTE1NDY0MC4xNjg4ODgzODE5*_ga_CW55HF8NVT*MTY5OTQ2MzgyNS42LjEuMTY5OTQ2MzkwNy41Mi4wLjA.'; | ||
|
|
||
| const comingSoonUrl = | ||
| 'https://firebasestorage.googleapis.com/v0/b/flickmatch-374a2.appspot.com/o/coming.gif?alt=media&token=c9caf53e-0846-42eb-91b1-f4d95ef0f298&_gl=1*1yv0t2p*_ga*MTA1NTE1NDY0MC4xNjg4ODgzODE5*_ga_CW55HF8NVT*MTY5OTQ2MzgyNS42LjEuMTY5OTQ2Mzk5Ni4zMy4wLjA.'; | ||
|
|
||
| export { assessmentUrl, statsUrl, comingSoonUrl }; |