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 (