From 665591f8bd346bba43f981412db9918b4e85dc76 Mon Sep 17 00:00:00 2001
From: isra el <vernu1997@gmail.com>
Date: Sun, 12 Mar 2023 09:47:12 +0300
Subject: [PATCH] chore(web): add 'how it works section' for the landing page

---
 web/components/home/HowItWorksSection.tsx | 61 +++++++++++++++++++++++
 web/components/home/IntroSection.tsx      | 21 ++++----
 web/components/home/howItWorksContent.ts  | 23 +++++++++
 web/pages/index.tsx                       |  2 +
 4 files changed, 98 insertions(+), 9 deletions(-)
 create mode 100644 web/components/home/HowItWorksSection.tsx
 create mode 100644 web/components/home/howItWorksContent.ts

diff --git a/web/components/home/HowItWorksSection.tsx b/web/components/home/HowItWorksSection.tsx
new file mode 100644
index 0000000..284782a
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/web/components/home/IntroSection.tsx b/web/components/home/IntroSection.tsx
index 04adf64..e7d74be 100644
--- a/web/components/home/IntroSection.tsx
+++ b/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
diff --git a/web/components/home/howItWorksContent.ts b/web/components/home/howItWorksContent.ts
new file mode 100644
index 0000000..35e6ee8
--- /dev/null
+++ b/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.',
+  },
+]
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index 327083d..9a322a4 100644
--- a/web/pages/index.tsx
+++ b/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>
   )
 }