wip: framework of about page

src/app/components/how-it-works/components/how-it-works-layout.tsx

@@ -0,0 +1,6 @@
+import { VStack } from '@chakra-ui/react';
+import { HasChildren } from '@models/has-children';
+
+export function HowItWorksLayout({ children }: HasChildren): React.JSX.Element {
+  return <VStack>{children}</VStack>;
+}

src/app/components/how-it-works/components/middle-section.tsx

@@ -0,0 +1,34 @@
+import { Box, HStack, Text, VStack } from '@chakra-ui/react';
+
+export function MiddleSection(): React.JSX.Element {
+  return (
+    <Box
+      px={'25px'}
+      w={'100vw'}
+      h={'362px'}
+      paddingInlineStart={'130px'}
+      paddingInlineEnd={'130px'}
+      background="#FFFFFF"
+      backgroundRepeat="no-repeat"
+      backgroundPosition="0% 0%"
+      boxShadow="6px 6px 12px #0000004D"
+      mixBlendMode="screen"
+      opacity={0.06}
+    >
+      <Box w={'1280px'}>
+        <HStack gap={'84px'}>
+          <VStack align={'left'}>
+            <Text color={'white.01'} fontSize={'56px'} fontWeight={'bold'}>
+              dlcBTC
+            </Text>
+            <Text color={'white.01'} fontSize={'21px'} width={'462px'}>
+              dlcBTC lets you use your Bitcoin on different DeFi platforms, all without giving up
+              control of your actual Bitcoin.
+            </Text>
+          </VStack>
+          <Box w={'486px'} h={'274px'} backgroundColor={'white.02'}></Box>
+        </HStack>
+      </Box>
+    </Box>
+  );
+}

src/app/components/how-it-works/components/top-section.tsx

@@ -0,0 +1,26 @@
+import { Box, HStack, Text, VStack } from '@chakra-ui/react';
+
+export function TopSection(): React.JSX.Element {
+  return (
+    <Box
+      px={'25px'}
+      w={'1280px'}
+      h={'274px'}
+      paddingInlineStart={'130px'}
+      paddingInlineEnd={'130px'}
+    >
+      <HStack gap={'84px'}>
+        <VStack align={'left'}>
+          <Text color={'white.01'} fontSize={'56px'} fontWeight={'bold'}>
+            dlcBTC
+          </Text>
+          <Text color={'white.01'} fontSize={'21px'} width={'462px'}>
+            dlcBTC lets you use your Bitcoin on different DeFi platforms, all without giving up
+            control of your actual Bitcoin.
+          </Text>
+        </VStack>
+        <Box w={'486px'} h={'274px'} backgroundColor={'white.02'}></Box>
+      </HStack>
+    </Box>
+  );
+}

src/app/components/how-it-works/how-it-works.tsx

@@ -0,0 +1,19 @@
+import { Box, VStack } from '@chakra-ui/react';
+
+import { HowItWorksLayout } from './components/how-it-works-layout';
+import { MiddleSection } from './components/middle-section';
+import { TopSection } from './components/top-section';
+
+export function HowItWorks(): React.JSX.Element {
+  return (
+    <HowItWorksLayout>
+      {
+        <VStack gap={'100px'}>
+          <TopSection />
+          <MiddleSection />
+          <Box px={'25px'} w={'100vw'} h={'700px'}></Box>
+        </VStack>
+      }
+    </HowItWorksLayout>
+  );
+}

src/app/pages/about/about.tsx

@@ -1,9 +1,10 @@
-import { Text, VStack } from '@chakra-ui/react';
+import { HowItWorks } from '@components/how-it-works/how-it-works';
+import { PageLayout } from '@pages/components/page.layout';
 
 export function About(): React.JSX.Element {
   return (
-    <VStack marginY={'350px'}>
-      <Text color={'white'}>About</Text>
-    </VStack>
+    <PageLayout>
+      <HowItWorks />
+    </PageLayout>
   );
 }