Modify layout and fix text

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;

src/layouts/BoxContent/styles.module.scss

@@ -0,0 +1,2 @@
+.container {
+}

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;

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} />
     </>
   );
 };

src/layouts/MainLayout.tsx

@@ -8,7 +8,6 @@ type IMainProps = {
   hideHeader?: boolean;
   hideFooter?: boolean;
   children?: React.ReactNode;
-
   headerProps?: HeaderProps;
 };
 

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;
 }

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'}>