From 5caae5f34b6a43b134983d8194185396c93aa5f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3za=20Nagy?= <rozanagy88@gmail.com>
Date: Mon, 18 Dec 2023 13:03:00 +0700
Subject: [PATCH] wip: align components

---
 .../bottom/components/how-to-mint.tsx         |  9 ++++-
 .../middle/components/explanation-block.tsx   | 11 +++++-
 .../how-it-works/middle/middle-section.tsx    |  3 +-
 .../top/components/intro-video.tsx            | 38 +++++++++++++++++++
 .../how-it-works/top/top-section.tsx          | 18 ++++-----
 5 files changed, 64 insertions(+), 15 deletions(-)
 create mode 100644 src/app/components/how-it-works/top/components/intro-video.tsx

diff --git a/src/app/components/how-it-works/bottom/components/how-to-mint.tsx b/src/app/components/how-it-works/bottom/components/how-to-mint.tsx
index f4cde8e6..68c5c010 100644
--- a/src/app/components/how-it-works/bottom/components/how-to-mint.tsx
+++ b/src/app/components/how-it-works/bottom/components/how-to-mint.tsx
@@ -1,4 +1,5 @@
-import { Box, Button, Image, Text } from '@chakra-ui/react';
+import { Button, Image, Text } from '@chakra-ui/react';
+import { IntroVideo } from '@components/how-it-works/top/components/intro-video';
 
 import { CustomCard } from '../../components/custom-card';
 import { FlowStep } from './flow-step';
@@ -60,7 +61,11 @@ export function HowToMint(): React.JSX.Element {
             }
             hasBadge={false}
           />
-          <Box w={'435px'} h={'262px'} backgroundColor={'white.02'}></Box>
+          <IntroVideo
+            opts={{ height: '262px', width: '435px', playerVars: { autoplay: 0, controls: 1 } }}
+            placeholderHeight={'262px'}
+            placeholderWidth={'435px'}
+          />
           <Button variant={'account'}>Mint dlcBTC</Button>
         </>
       }
diff --git a/src/app/components/how-it-works/middle/components/explanation-block.tsx b/src/app/components/how-it-works/middle/components/explanation-block.tsx
index 44527017..1194543b 100644
--- a/src/app/components/how-it-works/middle/components/explanation-block.tsx
+++ b/src/app/components/how-it-works/middle/components/explanation-block.tsx
@@ -1,4 +1,4 @@
-import { Image, Text, VStack } from '@chakra-ui/react';
+import { Box, Image, Text, VStack } from '@chakra-ui/react';
 
 interface ExplanationBlockProps {
   src: string;
@@ -13,7 +13,14 @@ export function ExplanationBlock({
 }: ExplanationBlockProps): React.JSX.Element {
   return (
     <VStack width={'316px'} alignItems={'left'}>
-      <Image src={src} width={'200px'} />
+      <Box display={'flex'} justifyContent={'center'} alignItems={'center'}>
+        <Image
+          src={src}
+          width={src === '/images/dlc-img.png' ? '315px' : '200px'}
+          height={src === '/images/dlc-img.png' ? '120px' : '100px'}
+        />
+      </Box>
+
       <Text variant={'title'}>{title}</Text>
       {content}
     </VStack>
diff --git a/src/app/components/how-it-works/middle/middle-section.tsx b/src/app/components/how-it-works/middle/middle-section.tsx
index e8556b4d..8a909c40 100644
--- a/src/app/components/how-it-works/middle/middle-section.tsx
+++ b/src/app/components/how-it-works/middle/middle-section.tsx
@@ -19,7 +19,7 @@ export function MiddleSection(): React.JSX.Element {
       justifyContent={'center'}
       alignItems={'center'}
     >
-      <HStack>
+      <HStack width={'1000px'} justifyContent={'space-between'}>
         <ExplanationBlock
           src={'/images/mint-btc-grad.png'}
           title={'What is dlcBTC?'}
@@ -42,7 +42,6 @@ export function MiddleSection(): React.JSX.Element {
                 Discreet Log Contracts (DLCs)
               </Text>{' '}
               ensure only authorized parties can access locked Bitcoin, without third-party risks.
-              dlcBTC is a representation of Bitcoin on the Ethereum blockchain.
             </Text>
           }
         ></ExplanationBlock>
diff --git a/src/app/components/how-it-works/top/components/intro-video.tsx b/src/app/components/how-it-works/top/components/intro-video.tsx
new file mode 100644
index 00000000..0a781226
--- /dev/null
+++ b/src/app/components/how-it-works/top/components/intro-video.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import YouTube, { YouTubeProps } from 'react-youtube';
+
+import { Box, Skeleton, VStack } from '@chakra-ui/react';
+
+interface IntroVideoProps {
+  opts: YouTubeProps['opts'];
+  placeholderHeight: string;
+  placeholderWidth: string;
+}
+
+export function IntroVideo({
+  opts,
+  placeholderHeight,
+  placeholderWidth,
+}: IntroVideoProps): React.JSX.Element {
+  const [isLoading, setIsLoading] = useState(true);
+  const onPlayerReady: YouTubeProps['onReady'] = event => {
+    event.target.pauseVideo();
+    setIsLoading(false);
+  };
+
+  return (
+    <VStack>
+      <Skeleton
+        isLoaded={!isLoading}
+        startColor={'white.02'}
+        endColor={'white.03'}
+        h={placeholderHeight}
+        w={placeholderWidth}
+      >
+        <Box borderRadius={'lg'} overflow={'hidden'} width={'100%'} maxW={'500px'}>
+          <YouTube videoId="x9D1owU1tB8" opts={opts} onReady={onPlayerReady} />
+        </Box>
+      </Skeleton>
+    </VStack>
+  );
+}
diff --git a/src/app/components/how-it-works/top/top-section.tsx b/src/app/components/how-it-works/top/top-section.tsx
index 9f7047ba..3fdeb78a 100644
--- a/src/app/components/how-it-works/top/top-section.tsx
+++ b/src/app/components/how-it-works/top/top-section.tsx
@@ -1,15 +1,11 @@
 import { Box, HStack, Text, VStack } from '@chakra-ui/react';
 
+import { IntroVideo } from './components/intro-video';
+
 export function TopSection(): React.JSX.Element {
   return (
-    <Box
-      px={'25px'}
-      w={'1280px'}
-      h={'274px'}
-      paddingInlineStart={'130px'}
-      paddingInlineEnd={'130px'}
-    >
-      <HStack gap={'84px'}>
+    <Box w={'1280px'} h={'274px'} display={'flex'} justifyContent={'center'} alignItems={'center'}>
+      <HStack width={'1000px'} justifyContent={'space-between'}>
         <VStack align={'left'}>
           <Text color={'white.01'} fontSize={'56px'} fontWeight={'bold'}>
             dlcBTC
@@ -19,7 +15,11 @@ export function TopSection(): React.JSX.Element {
             control of your actual Bitcoin.
           </Text>
         </VStack>
-        <Box w={'486px'} h={'274px'} backgroundColor={'white.02'}></Box>
+        <IntroVideo
+          opts={{ height: '274px', width: '486px', playerVars: { autoplay: 0, controls: 1 } }}
+          placeholderHeight={'274px'}
+          placeholderWidth={'486px'}
+        />
       </HStack>
     </Box>
   );