chore(web): add 'how it works section' for the landing page

web/components/home/HowItWorksSection.tsx

@@ -0,0 +1,61 @@
+import { AddIcon, MinusIcon } from '@chakra-ui/icons'
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Container,
+  Heading,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+import React from 'react'
+import { howItWorksContent } from './howItWorksContent'
+
+export default function HowItWorksSection() {
+  return (
+    <Box p={4}>
+      <Stack spacing={4} as={Container} maxW={'6xl'}>
+        <a id='#how-it-works'>
+          <Heading fontSize={'3xl'} textAlign={'center'}>
+            How It Works
+          </Heading>
+        </a>
+        <Text color={'gray.600'} fontSize={'lg'} textAlign={'justify'}>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
+          exercitationem quo quibusdam, fugit quaerat odio quisquam commodi ut?
+          Aliquid ab sapiente, expedita quas neque amet consectetur quisquam
+          reprehenderit voluptas commodi?
+        </Text>
+      </Stack>
+
+      <Container maxW={'6xl'} mt={10}>
+        <Accordion allowMultiple defaultIndex={[]}>
+          {howItWorksContent.map(({ title, description }) => (
+            <AccordionItem key={title}>
+              {({ isExpanded }) => (
+                <>
+                  <h2>
+                    <AccordionButton>
+                      <Box as='span' flex='1' textAlign='left'>
+                        {title}
+                      </Box>
+                      {isExpanded ? (
+                        <MinusIcon fontSize='12px' />
+                      ) : (
+                        <AddIcon fontSize='12px' />
+                      )}
+                    </AccordionButton>
+                  </h2>
+                  <AccordionPanel pb={4}>{description}</AccordionPanel>
+                </>
+              )}
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </Container>
+    </Box>
+  )
+}

web/components/home/IntroSection.tsx

@@ -10,6 +10,7 @@ import {
   IconButton,
   createIcon,
 } from '@chakra-ui/react'
+import Link from 'next/link'
 import Router from 'next/router'
 
 export default function IntroSection() {
@@ -70,15 +71,17 @@ export default function IntroSection() {
             >
               Get Started
             </Button>
-            <Button
-              rounded={'full'}
-              size={'lg'}
-              fontWeight={'normal'}
-              px={6}
-              leftIcon={<PlayIcon h={4} w={4} color={'gray.300'} />}
-            >
-              How It Works
-            </Button>
+            <Link href={'#how-it-works'} passHref>
+              <Button
+                rounded={'full'}
+                size={'lg'}
+                fontWeight={'normal'}
+                px={6}
+                leftIcon={<PlayIcon h={4} w={4} color={'gray.300'} />}
+              >
+                How It Works
+              </Button>
+            </Link>
           </Stack>
         </Stack>
         <Flex

web/components/home/howItWorksContent.ts

@@ -0,0 +1,23 @@
+export const howItWorksContent = [
+  {
+    title: 'Step 1: Download The Android App',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  },
+  {
+    title: 'Step 2: Generate an API Key from the dashboard',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  },
+  {
+    title:
+      'Step 3: Scan the QR/ enter your api key manually and enable the gateway app',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  },
+  {
+    title: 'Step 4: Start sending',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  },
+]

web/pages/index.tsx

@@ -3,6 +3,7 @@ import Router from 'next/router'
 import { useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import FeaturesSection from '../components/home/FeaturesSection'
+import HowItWorksSection from '../components/home/HowItWorksSection'
 import IntroSection from '../components/home/IntroSection'
 import { selectAuth } from '../store/authReducer'
 
@@ -18,6 +19,7 @@ export default function HomePage() {
     <Container maxW={'7xl'}>
       <IntroSection />
       <FeaturesSection />
+      <HowItWorksSection />
     </Container>
   )
 }