diff --git a/public/landing-v6/ic-play.png b/public/landing-v6/ic-play.png new file mode 100644 index 000000000..24a39240e Binary files /dev/null and b/public/landing-v6/ic-play.png differ diff --git a/src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss b/src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss index ffe5e265e..92b581862 100644 --- a/src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss +++ b/src/modules/landingV3/Componets/HeroV5/HeroV5.module.scss @@ -5,8 +5,9 @@ .upper { display: flex; align-items: flex-start; + justify-content: space-between; gap: 100px; - margin-bottom: 60px; + margin-bottom: 120px; @include is-mobile { gap: 60px; @@ -25,7 +26,7 @@ .title { color: #000; font-family: var(--font-jetbrains); - font-size: 38px; + font-size: 40px; font-style: normal; font-weight: 700; line-height: 120%; @@ -108,7 +109,7 @@ } .right { - flex: 0.6; + flex: 0.5; // min-width: 400px; width: 100%; @@ -121,6 +122,7 @@ overflow: hidden; position: relative; min-height: 100%; + cursor: pointer; .thumbnail_bg { // position: relative; @@ -133,8 +135,53 @@ overflow: hidden; z-index: 1; } + + .video_pause { + &::after { + content: ''; + background-color: rgba($color: #000000, $alpha: 0.3); + width: 100%; + height: 100%; + z-index: 5; + position: absolute; + top: 0; + left: 0; + display: block; + } + } + + .video_thumbnail { + width: 100%; + height: 100%; + object-fit: cover; + z-index: 2; + position: relative; + + + + } + + .play_btn { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 6; + cursor: pointer; + + width: 80px; + height: 80px; + transition: 0.3s; + + + + + } + } + + } } diff --git a/src/modules/landingV3/Componets/HeroV5/index.tsx b/src/modules/landingV3/Componets/HeroV5/index.tsx index 1e29150a6..f1ea16ceb 100644 --- a/src/modules/landingV3/Componets/HeroV5/index.tsx +++ b/src/modules/landingV3/Componets/HeroV5/index.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import s from './HeroV5.module.scss'; -import { Flex } from '@chakra-ui/react'; +import { Box, Flex } from '@chakra-ui/react'; import Link from 'next/link'; import Image from 'next/image'; import { VIDEO_BVM_STUDIO_HOW_IT_WORK } from '@/constants/common'; @@ -12,6 +12,7 @@ const HeroV5 = () => { // const [isOpenModalVideo, setIsOpenModalVideo] = useState(false); const [firstClick, setFirstClick] = useState(false); + // const [playVideo, setPlayVideo] = useState(false); return (
@@ -56,23 +57,37 @@ const HeroV5 = () => { className={`${s.thumbnail} `} // ref={refContent} onClick={() => { - setFirstClick(true); - // toggle video - setTimeout(() => { - if (videoRef.current) { - // check if video playing - if (videoRef.current.paused) { - videoRef.current.play(); - } else { - videoRef.current.pause(); + if (!firstClick) { + setFirstClick(true); + + setTimeout(() => { + if (videoRef.current) { + // check if video playing + if (videoRef.current.paused) { + videoRef.current.play(); + } else { + videoRef.current.pause(); + } } - } - }, 100); + }, 100); + } + // else { + // if (videoRef.current) { + // // check if video playing + // if (videoRef.current.paused) { + // // videoRef.current.play(); + // } else { + // videoRef.current.pause(); + // } + // } + // } + + // toggle video }} >
diff --git a/src/modules/landingV3/Componets/UserReviews/index.tsx b/src/modules/landingV3/Componets/UserReviews/index.tsx index 8d8e3b4df..dcf16059e 100644 --- a/src/modules/landingV3/Componets/UserReviews/index.tsx +++ b/src/modules/landingV3/Componets/UserReviews/index.tsx @@ -33,12 +33,12 @@ provability, etc`, name: 'Hayden Adams', username: '@haydenzadams', }, - { - avatarSrc: '/landing-v6/avt-mattmurrs.png', - content: `Rollups are open, verifiable web servers`, - name: 'Matt Murray', - username: '@mattmurrs', - }, + // { + // avatarSrc: '/landing-v6/avt-mattmurrs.png', + // content: `Rollups are open, verifiable web servers`, + // name: 'Matt Murray', + // username: '@mattmurrs', + // }, { avatarSrc: '/landing-v6/avt-eoracle_network.png', // content: `@ethereum is the verifiable internet. @@ -58,13 +58,13 @@ provability, etc`, name: 'eOracle', username: '@eoracle_network', }, - { - avatarSrc: '/landing-v6/avt-allred_chase.png', + // { + // avatarSrc: '/landing-v6/avt-allred_chase.png', - content: () => <>Rollups are the new server, - name: 'Chunk', - username: '@allred_chase', - }, + // content: () => <>Rollups are the new server, + // name: 'Chunk', + // username: '@allred_chase', + // }, { avatarSrc: '/landing-v6/avt-Polymer_Labs.png', content: () => (