diff --git a/lang/en.json b/lang/en.json index 6aec89c5a0..893378db66 100644 --- a/lang/en.json +++ b/lang/en.json @@ -810,6 +810,7 @@ "label.tx": "Tx", "label.no_data": "No Data", "label.use_giv_to_boost_projects": "Use GIV to boost projects to new heights!", + "label.imagine_a_world_where": "Imagine a world where you could support public goods and get rewarded", "label.your_givpower": "Your GIVpower", "label.stake_giv_to_get_givpower": "Stake GIV to get GIVpower", "label.to_see_your_givpower_please_connect": "To see your GIVpower, please connect your wallet.", diff --git a/lang/es.json b/lang/es.json index b4dc7c10d0..6687205a7c 100644 --- a/lang/es.json +++ b/lang/es.json @@ -810,6 +810,7 @@ "label.tx": "Tx", "label.no_data": "No data", "label.use_giv_to_boost_projects": "", + "label.imagine_a_world_where": "", "label.your_givpower": "", "label.stake_giv_to_get_givpower": "", "label.to_see_your_givpower_please_connect": "", diff --git a/public/images/trazado-giv.svg b/public/images/trazado-giv.svg new file mode 100644 index 0000000000..4a2210cef0 --- /dev/null +++ b/public/images/trazado-giv.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/trazado-mustard.svg b/public/images/trazado-mustard.svg new file mode 100644 index 0000000000..c54dd703e1 --- /dev/null +++ b/public/images/trazado-mustard.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/video/giv-giv-giv.jpg b/public/video/giv-giv-giv.jpg new file mode 100644 index 0000000000..c77a6d3427 Binary files /dev/null and b/public/video/giv-giv-giv.jpg differ diff --git a/src/components/homeTabs/TabOverviewVideo.tsx b/src/components/VideoBlock.tsx similarity index 57% rename from src/components/homeTabs/TabOverviewVideo.tsx rename to src/components/VideoBlock.tsx index 461f51863d..3872e2fa41 100644 --- a/src/components/homeTabs/TabOverviewVideo.tsx +++ b/src/components/VideoBlock.tsx @@ -1,15 +1,17 @@ import { useState, useRef, FC } from 'react'; import Image from 'next/image'; -import { VideoContainer, VideoOverlay } from './Overview.sc'; +import styled from 'styled-components'; +import { FlexCenter } from '@/components/styled-components/Flex'; interface ITabOverviewVideo { src: string; poster?: string; } -export const TabOverviewVideo: FC = ({ src, poster }) => { +export const VideoBlock: FC = ({ src, poster }) => { const [isPlaying, setIsPlaying] = useState(false); const videoRef = useRef(null); + function handleVideoClick() { const { current: video } = videoRef; if (video?.paused) { @@ -20,11 +22,13 @@ export const TabOverviewVideo: FC = ({ src, poster }) => { setIsPlaying(false); } } + function handleVideoEnd() { const { current: video } = videoRef; video && (video.currentTime = 0); setIsPlaying(false); } + return (