Merge pull request #824 from TrustlessComputer/arch/new-home

update layout
TrustlessComputer · Nov 8, 2024 · 90cbdf5 · 90cbdf5
2 parents 9a93c36 + 608ddaf
commit 90cbdf5
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 28 deletions.
diff --git a/public/landing-v6/ic-play.png b/public/landing-v6/ic-play.png
diff --git 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
@@ -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<boolean>(false);
   const [firstClick, setFirstClick] = useState(false);
+  // const [playVideo, setPlayVideo] = useState(false);
 
   return (
     <div className={cn(s.wrapper, 'containerV3')}>
@@ -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
             }}
           >
             <video
               ref={videoRef}
-              poster={'/home-v5-video.png'}
+              // poster={'/home-v5-video.png'}
               src={
                 'https://storage.googleapis.com/tc-cdn-prod/pages/bvm-studio/AIVoicePrompt_v2_02.mp4'
               }
@@ -82,6 +97,31 @@ const HeroV5 = () => {
               playsInline
               controls={!!firstClick}
             />
+            {!firstClick && (
+              <Box
+                position={'absolute'}
+                top={0}
+                left="0"
+                w="100%"
+                h="100%"
+                className={s.video_pause}
+              >
+                <video
+                  className={s.video_thumbnail}
+                  src={
+                    'https://storage.googleapis.com/bvm-network/image/bvm_hero_video_v3_comp.mp4'
+                  }
+                  loop
+                  muted
+                  playsInline
+                  autoPlay
+                  preload={'auto'}
+                />
+                <div className={s.play_btn}>
+                  <img src="/landing-v6/ic-play.png" />
+                </div>
+              </Box>
+            )}
           </div>
         </div>
       </div>

diff --git 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: () => (