#2011 Add GIVpower Video to GIVpower Page

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.",

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": "",

src/components/homeTabs/TabOverviewVideo.tsx → 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<ITabOverviewVideo> = ({ src, poster }) => {
+export const VideoBlock: FC<ITabOverviewVideo> = ({ src, poster }) => {
 	const [isPlaying, setIsPlaying] = useState(false);
 	const videoRef = useRef<HTMLVideoElement | null>(null);
+
 	function handleVideoClick() {
 		const { current: video } = videoRef;
 		if (video?.paused) {
@@ -20,11 +22,13 @@ export const TabOverviewVideo: FC<ITabOverviewVideo> = ({ src, poster }) => {
 			setIsPlaying(false);
 		}
 	}
+
 	function handleVideoEnd() {
 		const { current: video } = videoRef;
 		video && (video.currentTime = 0);
 		setIsPlaying(false);
 	}
+
 	return (
 		<VideoContainer>
 			<video
@@ -50,4 +54,32 @@ export const TabOverviewVideo: FC<ITabOverviewVideo> = ({ src, poster }) => {
 	);
 };
 
-export default TabOverviewVideo;
+export const VideoContainer = styled(FlexCenter)`
+	position: relative;
+	margin: 0 auto;
+	width: 100%;
+	max-width: 1440px;
+	overflow: hidden;
+	border-radius: 20px;
+	cursor: pointer;
+`;
+
+export const VideoOverlay = styled.div<{ hidden: boolean }>`
+	display: ${props => (props.hidden ? 'none' : 'flex')};
+	justify-content: center;
+	align-items: center;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	background: rgba(0, 0, 0, 0.3);
+	transition: background 0.3s ease-in-out;
+	user-select: none;
+	&:hover {
+		background: rgba(0, 0, 0, 0.5);
+	}
+`;
+
+export default VideoBlock;

src/components/homeTabs/GIVpowerVideo.tsx

@@ -0,0 +1,100 @@
+import styled from 'styled-components';
+import {
+	brandColors,
+	H4,
+	IconRocket,
+	mediaQueries,
+	neutralColors,
+} from '@giveth/ui-design-system';
+import Image from 'next/image';
+import { useIntl } from 'react-intl';
+import VideoBlock from '@/components/VideoBlock';
+import TrazadoMustardIcon from 'public/images/trazado-mustard.svg';
+import TrazadoGivIcon from 'public/images/trazado-giv.svg';
+
+const GIVpowerVideo = () => {
+	const { formatMessage } = useIntl();
+	return (
+		<VideoContainer>
+			<TrazadoMustard>
+				<Image src={TrazadoMustardIcon} alt='trazado-mustard' />
+			</TrazadoMustard>
+			<ArcPurple />
+			<RocketPurple>
+				<IconRocket color={brandColors.giv[600]} size={64} />
+			</RocketPurple>
+			<TrazadoGiv>
+				<Image src={TrazadoGivIcon} alt='trazado-giv' />
+			</TrazadoGiv>
+			<H4Styled>
+				{formatMessage({
+					id: 'label.imagine_a_world_where',
+				})}
+			</H4Styled>
+			<VideoBlock
+				src='/video/givpower.mp4'
+				poster='/video/giv-giv-giv.jpg'
+			/>
+		</VideoContainer>
+	);
+};
+
+const RocketPurple = styled.div`
+	transform: rotate(45deg);
+	position: absolute;
+	left: 140px;
+	bottom: -80px;
+	${mediaQueries.laptopS} {
+		left: 340px;
+		bottom: -30px;
+	}
+`;
+
+const ArcPurple = styled.div`
+	position: absolute;
+	top: -100px;
+	right: 156px;
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	border: 13px solid ${brandColors.giv[600]};
+	border-right-color: transparent;
+	border-left-color: transparent;
+	border-top-color: transparent;
+	transform: rotate(-45deg);
+`;
+
+const TrazadoMustard = styled.div`
+	position: absolute;
+	top: 0;
+	left: 0;
+`;
+
+const TrazadoGiv = styled.div`
+	position: absolute;
+	bottom: -80px;
+	right: 0;
+`;
+
+const H4Styled = styled(H4)`
+	color: ${neutralColors.gray[200]};
+	${mediaQueries.laptopS} {
+		max-width: 400px;
+	}
+`;
+
+const VideoContainer = styled.div`
+	position: relative;
+	display: flex;
+	flex-direction: column-reverse;
+	gap: 40px;
+	max-width: 1280px;
+	margin: 120px auto 113px;
+	padding: 0 40px;
+	${mediaQueries.laptopS} {
+		align-items: center;
+		flex-direction: row;
+	}
+`;
+
+export default GIVpowerVideo;

src/components/homeTabs/Overview.sc.tsx

@@ -14,6 +14,7 @@ export const OverviewBottomContainer = styled.div`
 	background-repeat: repeat-x;
 	background-size: 200px;
 	padding-bottom: 120px;
+	margin-top: 100px;
 `;
 
 export const VoteCardButton = styled(ButtonLink)`
@@ -39,7 +40,7 @@ export const VoteCard = styled.div`
 	background-image: url('/images/backgrounds/giv-outline.svg');
 	border-radius: 8px;
 	min-height: 480px;
-	margin: 80px 0 45px;
+	margin: 100px 0 45px;
 	position: relative;
 	::before {
 		content: url('/images/pie1.png');

src/components/homeTabs/Overview.tsx

@@ -16,14 +16,14 @@ import config from '@/configuration';
 import Routes from '@/lib/constants/Routes';
 import { Col, Container, Row } from '@/components/Grid';
 import { StakingType } from '@/types/config';
-import TabOverviewVideo from './TabOverviewVideo';
+import VideoBlock from '@/components/VideoBlock';
 
 export const TabOverview = () => {
 	const { formatMessage } = useIntl();
 
 	return (
 		<>
-			<TabOverviewVideo
+			<VideoBlock
 				src='/video/giveconomy.mp4'
 				poster='/video/giveconomy.webp'
 			/>
@@ -112,9 +112,9 @@ export const TabOverview = () => {
 					</Row>
 				</Container>
 			</OverviewBottomContainer>
-			<TabOverviewVideo
+			<VideoBlock
 				src='/video/givpower.mp4'
-				poster='/video/givpower.webp'
+				poster='/video/giv-giv-giv.jpg'
 			/>
 			<Container>
 				<VoteCard>

src/components/views/Power.view.tsx

@@ -1,11 +1,13 @@
 import { TabPowerTop, TabPowerBottom } from '../homeTabs/GIVpower';
 import Tabs from '../Tabs';
+import GIVpowerVideo from '@/components/homeTabs/GIVpowerVideo';
 
 export default function GIVpowerView() {
 	return (
 		<>
 			<Tabs />
 			<TabPowerTop />
+			<GIVpowerVideo />
 			<TabPowerBottom />
 		</>
 	);