update bvm page v2

src/app/bvm/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import MainLayout from '@/layouts/MainLayout';
-import BVMModule from '@/modules/bvm';
+// import BVMModule from '@/modules/bvm';
+import BVMModule from '@/modules/bvm_v2';
 
 const BVMPage = () => {
   return (

src/modules/bvm_v2/Section_1/index.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { BUY_TC_URL } from '@/config';
+import { Button, Flex, Image, Text } from '@chakra-ui/react';
+
+const Section_1 = () => {
+  return (
+    <Flex
+      w={'100%'}
+      flexDir={'column'}
+      bgColor={'transparent'}
+      gap={['16px']}
+      alignItems={'flex-start'}
+    >
+      <Text
+        fontSize={['16px', '40px']}
+        lineHeight={'48px'}
+        fontWeight={400}
+        color={'#000'}
+      >
+        What is BVM?
+      </Text>
+      <Text
+        fontSize={['14px', '20px']}
+        lineHeight={'36px'}
+        fontWeight={400}
+        color={'#000'}
+        maxW={'709px'}
+      >
+        Whatever your vision — a dapp, a fully onchain game, a DEX, or an
+        ecosystem — there are many benefits of running your own blockchain.
+      </Text>
+      <Button
+        bgColor={'#FA4E0E'}
+        color={'#fff'}
+        minW={['66px']}
+        minH={'16px'}
+        borderRadius={0}
+        py={'16px'}
+        px={'40px'}
+        fontWeight={400}
+        fontSize={'16px'}
+        onClick={() => {
+          window.open(BUY_TC_URL, '_blank');
+        }}
+        _hover={{
+          opacity: 0.8,
+        }}
+      >
+        {`Get BVM`}
+      </Button>
+    </Flex>
+  );
+};
+
+export default Section_1;

src/modules/bvm_v2/Section_2/index.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { CDN_URL } from '@/config';
+import { Box, Flex, Image, Text } from '@chakra-ui/react';
+
+const ICON_URL = CDN_URL + '/nbc/icons';
+
+export interface IContent {
+  title: string;
+  desc: string;
+  img: string;
+  bgColor: string;
+}
+
+const Contents: Array<IContent> = [
+  {
+    title: 'The lifeblood of Bitcoin dapps',
+    desc: 'BVM fuels Bitcoin dapps, facilitating the payment of transaction fees for all dapp activities on Bitcoin.',
+    img: `/images/bvm_image1.png`,
+    bgColor: '#007659',
+  },
+  {
+    title: 'Uses for BVM grow every day',
+    desc: 'As Bitcoin Virtual Machine enables programmability on Bitcoin, developers have the free to utilize BVM in numerous ways, such as DeFi, GameFi, DEX, DAO, and more.',
+    img: `/images/bvm_image2.png`,
+    bgColor: '#0B5509',
+  },
+  {
+    title: 'Scale Bitcoin and earn BVM',
+    desc: 'Bitcoin Virtual Machines aid in scaling Bitcoin with high throughput and low latency, while also enabling new utilities beyond simple money transfers. In return, they receive the transaction fees collected in BVM.',
+    img: `/images/bvm_image3.png`,
+    bgColor: '#A05700',
+  },
+];
+
+const Section_2 = () => {
+  const renderItem = (item: IContent) => {
+    return (
+      <Box
+        alignItems={'center'}
+        key={item.title}
+        display={'flex'}
+        flexDirection={'column'}
+        flex={1}
+        p={{
+          base: '10px',
+          lg: '20px',
+        }}
+        bgColor={'white'}
+      >
+        <Flex
+          alignItems={'center'}
+          display={'flex'}
+          flexDirection={'column'}
+          flex={1}
+          minH={{
+            base: '300px',
+            max: '600px',
+          }}
+          gap={'20px'}
+          bgColor={item.bgColor}
+        >
+          <Image
+            src={`${item.img}`}
+            fit={'cover'}
+            minH={{
+              base: '350px',
+              lg: '440px',
+            }}
+          />
+
+          <Flex
+            direction={'column'}
+            align={'center'}
+            justify={'center'}
+            gap={'20px'}
+            px={{
+              base: '10px',
+              lg: '24px',
+            }}
+          >
+            <Text
+              fontSize={['18px', '24px']}
+              lineHeight={'26.40px'}
+              fontWeight={500}
+              textAlign={'center'}
+              color={'#fff'}
+            >
+              {item.title}
+            </Text>
+            <Text
+              fontSize={['15px', '18px']}
+              lineHeight={'26px'}
+              textAlign={'center'}
+              fontWeight={400}
+              color={'#fff'}
+            >
+              {item.desc}
+            </Text>
+            <Box height={'20px'}></Box>
+          </Flex>
+        </Flex>
+      </Box>
+    );
+  };
+
+  return (
+    <Box bgColor={'#F3F1E8'} display={'flex'} flexDirection={'column'}>
+      <Flex
+        flexDirection={{
+          base: 'column',
+          lg: 'row',
+        }}
+        alignSelf={'center'}
+        gap={{
+          base: '20px',
+          lg: '36px',
+        }}
+      >
+        {Contents.map(renderItem)}
+      </Flex>
+    </Box>
+  );
+};
+
+export default Section_2;

src/modules/bvm_v2/index.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { Box, Flex } from '@chakra-ui/react';
+import s from './styles.module.scss';
+
+import Section1 from './Section_1';
+import Section2 from './Section_2';
+import BoxContent from '@/layouts/BoxContent';
+
+const BVMModule = () => {
+  return (
+    <Box className={s.container}>
+      <BoxContent>
+        <Box h={['20px', '140px']} />
+        <Section1 />
+        <Box h={['20px', '80px']} />
+        <Section2 />
+        <Box h={['20px', '40px']} />
+      </BoxContent>
+    </Box>
+  );
+};
+
+export default BVMModule;

src/modules/bvm_v2/styles.module.scss

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  background-color: #F3F1E8;
+}