From fdeb37a208ac94943f2f555c22e8eb55b1d882ae Mon Sep 17 00:00:00 2001
From: tonytc13579 <tony@trustless.computer>
Date: Mon, 8 Jan 2024 15:24:55 +0700
Subject: [PATCH] Modify layout and fix text

---
 src/layouts/BoxContent/index.tsx             |  38 ++++
 src/layouts/BoxContent/styles.module.scss    |   2 +
 src/layouts/Header/components/DrawerMenu.tsx |  44 +++++
 src/layouts/Header/index.tsx                 | 118 +++++-------
 src/layouts/MainLayout.tsx                   |   1 -
 src/layouts/styles.module.scss               |   2 +-
 src/modules/bvm/Section_1/index.tsx          |   2 +-
 src/modules/home/Section_1/index.tsx         | 192 ++++++++++---------
 src/themes/chakra-themes.tsx                 |  11 ++
 9 files changed, 238 insertions(+), 172 deletions(-)
 create mode 100644 src/layouts/BoxContent/index.tsx
 create mode 100644 src/layouts/BoxContent/styles.module.scss
 create mode 100644 src/layouts/Header/components/DrawerMenu.tsx

diff --git a/src/layouts/BoxContent/index.tsx b/src/layouts/BoxContent/index.tsx
new file mode 100644
index 000000000..53f5b3463
--- /dev/null
+++ b/src/layouts/BoxContent/index.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { Box } from '@chakra-ui/react';
+import { HTMLChakraProps } from '@chakra-ui/system';
+import * as _chakra_ui_system from '@chakra-ui/system';
+
+// const breakpoints = {
+//   base: "0em", // 0px  => Mobile
+//   sm: "30em", // ~480px. em is a relative unit and is dependant on the font size.
+//   md: "48em", // ~768px
+//   lg: "62em", // ~992px
+//   xl: "80em", // ~1280px
+//   "2xl": "96em", // ~1536px
+// };
+
+const BoxContent: _chakra_ui_system.ChakraComponent<'div', {}> = (
+  props: HTMLChakraProps<'div'>,
+) => {
+  return (
+    <Box
+      {...props}
+      display={'flex'}
+      flexDir={'column'}
+      w={'100%'}
+      maxW={'1600px'}
+      h="auto"
+      px={{
+        base: '20px', //  0px <= x < 1536px
+        '2xl': '10px', // 1536px <= x < 1600px
+        max: '0px', // 1600px= < x
+      }}
+    >
+      {props.children}
+    </Box>
+  );
+};
+
+export default BoxContent;
diff --git a/src/layouts/BoxContent/styles.module.scss b/src/layouts/BoxContent/styles.module.scss
new file mode 100644
index 000000000..485140808
--- /dev/null
+++ b/src/layouts/BoxContent/styles.module.scss
@@ -0,0 +1,2 @@
+.container {
+}
diff --git a/src/layouts/Header/components/DrawerMenu.tsx b/src/layouts/Header/components/DrawerMenu.tsx
new file mode 100644
index 000000000..fc205dfe4
--- /dev/null
+++ b/src/layouts/Header/components/DrawerMenu.tsx
@@ -0,0 +1,44 @@
+'use client';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerFooter,
+  DrawerOverlay,
+  Image,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { MobileNav } from './MobileNav';
+
+export type HeaderProps = {
+  isOpen: boolean;
+};
+
+const DrawerMobileMenu = (props: HeaderProps) => {
+  const { isOpen, onToggle } = useDisclosure();
+  return (
+    <Drawer isOpen={isOpen} placement="right" onClose={onToggle} size={'sm'}>
+      <DrawerOverlay />
+      <DrawerContent zIndex={3}>
+        <DrawerBody bgColor={'#F3F1E8'}>{<MobileNav />}</DrawerBody>
+        <DrawerFooter
+          bgColor={'#F3F1E8'}
+          justifyContent={'center'}
+          alignItems={'center'}
+          padding={'40px'}
+        >
+          <Image
+            src={'/icons/close_ic.svg'}
+            borderRadius={100}
+            width={50}
+            height={50}
+            alignSelf={'center'}
+            onClick={onToggle}
+          />
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default DrawerMobileMenu;
diff --git a/src/layouts/Header/index.tsx b/src/layouts/Header/index.tsx
index 3f7d8a4f7..dc63958ca 100644
--- a/src/layouts/Header/index.tsx
+++ b/src/layouts/Header/index.tsx
@@ -1,23 +1,16 @@
 'use client';
-import SvgInset from '@/components/SvgInset';
-import { CDN_URL_ICONS } from '@/config';
 import {
   Box,
-  Button,
-  Drawer,
-  DrawerBody,
-  DrawerContent,
-  DrawerFooter,
-  DrawerOverlay,
   Flex,
   IconButton,
   Image,
   useBreakpointValue,
   useDisclosure,
 } from '@chakra-ui/react';
-import { DesktopNav } from './components/DesktopNav';
-import { MobileNav } from './components/MobileNav';
 import Link from 'next/link';
+import BoxContent from '../BoxContent';
+import { DesktopNav } from './components/DesktopNav';
+import DrawerMobileMenu from './components/DrawerMenu';
 
 export type HeaderProps = {
   color?: 'black' | 'white';
@@ -33,22 +26,10 @@ const Header = (props: HeaderProps) => {
   const { isOpen, onToggle } = useDisclosure();
   const isMobile = useBreakpointValue({ base: true, md: false }) as boolean;
 
-  const renderMenuButton = () => {
-    return (
-      <IconButton
-        onClick={onToggle}
-        icon={<Image src={'/icons/menu_ic.svg'} w={'24px'} h={'24px'} />}
-        aria-label={'Toggle Menu'}
-        _hover={{
-          bgColor: 'transparent',
-        }}
-      />
-    );
-  };
-
   return (
     <>
       <Box
+        id="HEADER_VIEW"
         position={position}
         bgColor={bgColor}
         display={'flex'}
@@ -60,63 +41,52 @@ const Header = (props: HeaderProps) => {
         right={0}
         zIndex={2}
       >
-        <Flex
-          minH={['40px', '40px']}
-          className="maxWidth"
-          alignSelf={'center'}
-          display={'flex'}
-          flex={1}
-          align={'center'}
-          id="header"
-        >
-          {/* Left View */}
+        <BoxContent id="HEADER_CONTENT">
           <Flex
-            flex={1}
-            justify={'left'}
-            _hover={{
-              cursor: 'pointer',
-            }}
+            display={'flex'}
+            flexDir={'row'}
+            w={'100%'}
+            alignItems={'center'}
+            minH={['40px', '40px']}
           >
-            <Link href="/">
-              {primaryColor === 'white' ? (
-                <Image src={`/icons/logo_white.svg`} />
+            {/* Left View */}
+            <Flex
+              flex={1}
+              justify={'left'}
+              _hover={{
+                cursor: 'pointer',
+              }}
+            >
+              <Link href="/">
+                {primaryColor === 'white' ? (
+                  <Image src={`/icons/logo_white.svg`} />
+                ) : (
+                  <Image src={`/icons/logo_black.svg`} />
+                )}
+              </Link>
+            </Flex>
+
+            {/* Right View */}
+            <Flex flex={1} justify={'right'}>
+              {isMobile ? (
+                <IconButton
+                  onClick={onToggle}
+                  icon={
+                    <Image src={'/icons/menu_ic.svg'} w={'24px'} h={'24px'} />
+                  }
+                  aria-label={'Toggle Menu'}
+                  _hover={{
+                    bgColor: 'transparent',
+                  }}
+                />
               ) : (
-                <Image src={`/icons/logo_black.svg`} />
+                <DesktopNav primaryColor={primaryColor} />
               )}
-            </Link>
+            </Flex>
           </Flex>
-
-          {/* Right View */}
-          <Flex flex={1} justify={'right'}>
-            {isMobile ? (
-              renderMenuButton()
-            ) : (
-              <DesktopNav primaryColor={primaryColor} />
-            )}
-          </Flex>
-        </Flex>
+        </BoxContent>
       </Box>
-      <Drawer isOpen={isOpen} placement="right" onClose={onToggle} size={'sm'}>
-        <DrawerOverlay />
-        <DrawerContent zIndex={3}>
-          <DrawerBody bgColor={'#F3F1E8'}>{<MobileNav />}</DrawerBody>
-          <DrawerFooter
-            bgColor={'#F3F1E8'}
-            justifyContent={'center'}
-            alignItems={'center'}
-            padding={'40px'}
-          >
-            <Image
-              src={'/icons/close_ic.svg'}
-              borderRadius={100}
-              width={50}
-              height={50}
-              alignSelf={'center'}
-              onClick={onToggle}
-            />
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
+      <DrawerMobileMenu isOpen={isOpen} />
     </>
   );
 };
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
index fba460899..822405fa7 100644
--- a/src/layouts/MainLayout.tsx
+++ b/src/layouts/MainLayout.tsx
@@ -8,7 +8,6 @@ type IMainProps = {
   hideHeader?: boolean;
   hideFooter?: boolean;
   children?: React.ReactNode;
-
   headerProps?: HeaderProps;
 };
 
diff --git a/src/layouts/styles.module.scss b/src/layouts/styles.module.scss
index 09f725953..767290067 100644
--- a/src/layouts/styles.module.scss
+++ b/src/layouts/styles.module.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   flex: 1;
   height: 100vh;
-  width: 100dvw;
+  width: 100vw;
   color: #fff;
   background-color: #000;
 }
diff --git a/src/modules/bvm/Section_1/index.tsx b/src/modules/bvm/Section_1/index.tsx
index 0e75ad547..c509d7cc0 100644
--- a/src/modules/bvm/Section_1/index.tsx
+++ b/src/modules/bvm/Section_1/index.tsx
@@ -56,7 +56,7 @@ const Section_1 = () => {
             opacity: 0.8,
           }}
         >
-          {`Build your Bitcoin L2`}
+          {`Get BVM`}
         </Button>
       </Flex>
       <Flex flex={1} justify={'flex-end'}>
diff --git a/src/modules/home/Section_1/index.tsx b/src/modules/home/Section_1/index.tsx
index 075a549c5..61dff1830 100644
--- a/src/modules/home/Section_1/index.tsx
+++ b/src/modules/home/Section_1/index.tsx
@@ -15,6 +15,7 @@ import {
 } from '@chakra-ui/react';
 import { useRouter } from 'next/navigation';
 import { BlockchainsList, BlockchainsType } from './data';
+import BoxContent from '@/layouts/BoxContent';
 
 const Section_1 = () => {
   const router = useRouter();
@@ -25,109 +26,108 @@ const Section_1 = () => {
       bgSize={'cover'}
       bgImg={`/images/lego_bg_vs3.png`}
       bgColor={'#EE550C'}
+      // bgColor={'transparent'}
       display={'flex'}
       justifyContent={'center'}
       alignContent={'center'}
     >
-      <Box
-        p={['20px', '120px', '180px', '240px', '320px']}
-        className="maxWidth"
-        position={'relative'}
-        marginBottom={'30px'}
-      >
-        <Text
-          textAlign={'center'}
-          fontSize={['26px', '32px', '48px', '64px']}
-          lineHeight={'110%'}
-          wordBreak={'break-word'}
-          whiteSpace="pre-line"
-        >
-          {`Bitcoin Virtual Machine`}
-        </Text>
-        <Box height={'16px'} />
-        <Text
-          textAlign={'center'}
-          fontSize={[14, 18, 24, 32]}
-          lineHeight={'140%'}
-          fontWeight={400}
-          wordBreak={'break-word'}
-          whiteSpace="pre-line"
-        >
-          BVM is a metaprotocol that lets developers launch their own
-          lightning-fast and low-cost Bitcoin L2 blockchain in a few clicks and
-          start building decentralized applications on Bitcoin.
-        </Text>
-
-        <Box height={'40px'} />
-
-        <HStack align="center" justify="center" spacing={['6px', '18px']}>
-          <Button
-            bgColor={'#fff'}
-            color={'#000'}
-            borderRadius={100}
-            display={'flex'}
-            justifyContent={'center'}
-            alignItems={'center'}
-            px={'24px'}
-            py={'10px'}
-            minW={['180px']}
-            height={'48px'}
-            fontWeight={400}
-            fontSize={'20px'}
-            onClick={() => {
-              router.push('/blockchains/computers');
-            }}
-          >
-            {`Build your Bitcoin L2`}
-          </Button>
-          <Button
-            // bgColor={'#FFA564'}
-            bgColor={'transparent'}
-            color={'#fff'}
-            borderRadius={100}
-            px={'24px'}
-            py={'10px'}
-            height={'48px'}
-            fontWeight={400}
-            fontSize={'20px'}
-            _hover={{
-              bgColor: 'transparent',
-            }}
-            onClick={() => {
-              // window.open('https://docs.bvm.network/', '_blank')
-              window.open(DEVELOPERS_DOC_URL, '_blank');
-            }}
-          >
-            {`Explore the docs`}
-            <ChevronRightIcon width={'20px'} height={'20px'} mt={'2px'} />
-          </Button>
-        </HStack>
-
-        <Box height={'40px'} />
-
+      <BoxContent>
         <Flex
+          py={['60px', '120px', '180px', '240px', '200px']}
+          direction={'column'}
           display={'flex'}
-          position={'absolute'}
-          bottom={0}
-          left={0}
-          right={0}
-          flexDir={'column'}
-          alignSelf={'center'}
-          justify={'center'}
-          w={'100%'}
+          position={'relative'}
         >
           <Text
             textAlign={'center'}
-            fontSize={['14px', '16px', '20px', '24px']}
+            fontSize={['26px', '32px', '48px', '64px']}
+            lineHeight={'110%'}
+            wordBreak={'break-word'}
+            whiteSpace="pre-line"
+          >
+            {`Bitcoin Virtual Machine`}
+          </Text>
+          <Box height={'16px'} />
+          <Text
+            textAlign={'center'}
+            fontSize={[14, 18, 24, 32]}
             lineHeight={'140%'}
             fontWeight={400}
             wordBreak={'break-word'}
             whiteSpace="pre-line"
           >
-            Powered by blockchain building blocks
+            BVM is a metaprotocol that lets developers launch their own
+            lightning-fast and low-cost Bitcoin L2 blockchain in a few clicks
+            and start building decentralized applications on Bitcoin.
           </Text>
-          <Box height={'20px'}></Box>
-          {/* <Flex
+
+          <Box height={'40px'} />
+
+          <HStack align="center" justify="center" spacing={['6px', '18px']}>
+            <Button
+              bgColor={'#fff'}
+              color={'#000'}
+              borderRadius={100}
+              display={'flex'}
+              justifyContent={'center'}
+              alignItems={'center'}
+              px={'24px'}
+              py={'10px'}
+              minW={['180px']}
+              height={'48px'}
+              fontWeight={400}
+              fontSize={'20px'}
+              onClick={() => {
+                router.push('/blockchains/computers');
+              }}
+            >
+              {`Build your Bitcoin L2`}
+            </Button>
+            <Button
+              // bgColor={'#FFA564'}
+              bgColor={'transparent'}
+              color={'#fff'}
+              borderRadius={100}
+              px={'24px'}
+              py={'10px'}
+              height={'48px'}
+              fontWeight={400}
+              fontSize={'20px'}
+              _hover={{
+                bgColor: 'transparent',
+              }}
+              onClick={() => {
+                // window.open('https://docs.bvm.network/', '_blank')
+                window.open(DEVELOPERS_DOC_URL, '_blank');
+              }}
+            >
+              {`Explore the docs`}
+              <ChevronRightIcon width={'20px'} height={'20px'} mt={'2px'} />
+            </Button>
+          </HStack>
+
+          <Box height={'150px'} />
+
+          <Flex
+            display={'flex'}
+            flexDir={'column'}
+            alignSelf={'flex-end'}
+            position={'absolute'}
+            bottom={0}
+            w={'100%'}
+          >
+            <Text
+              textAlign={'center'}
+              fontSize={['14px', '16px', '20px', '24px']}
+              lineHeight={'140%'}
+              fontWeight={400}
+              wordBreak={'break-word'}
+              whiteSpace="pre-line"
+            >
+              Powered by blockchain building blocks
+            </Text>
+            <Box height={'20px'}></Box>
+            {/* <Flex
             display={'flex'}
             alignItems={'center'}
             justify={'center'}
@@ -158,15 +158,17 @@ const Section_1 = () => {
               );
             })}
           </Flex> */}
-          <Flex display={'flex'} alignItems={'center'} justify={'center'}>
-            <Image
-              src={'/images/legos_list.png'}
-              h={['50px', '60px', '80px', '100px', '124px']}
-              w={['220px', '280px', '384px', '480px', '600px']}
-            ></Image>
+            <Flex display={'flex'} alignItems={'center'} justify={'center'}>
+              <Image
+                src={'/images/legos_list.png'}
+                h={['50px', '60px', '80px', '100px', '124px']}
+                w={['220px', '280px', '384px', '480px', '600px']}
+              ></Image>
+            </Flex>
+            <Box height={'20px'}></Box>
           </Flex>
         </Flex>
-      </Box>
+      </BoxContent>
     </Box>
   );
 };
diff --git a/src/themes/chakra-themes.tsx b/src/themes/chakra-themes.tsx
index c9b3fb52c..59a819650 100644
--- a/src/themes/chakra-themes.tsx
+++ b/src/themes/chakra-themes.tsx
@@ -58,8 +58,19 @@ const config: ThemeConfig = {
   useSystemColorMode: false,
 };
 
+const breakpoints = {
+  base: '0px',
+  sm: '480px',
+  md: '768px',
+  lg: '992px',
+  xl: '1280px',
+  '2xl': '1536px',
+  max: '1600px',
+};
+
 const chakraThemes = extendTheme({
   config,
+  breakpoints,
   styles: {
     global: {
       body: {