chore(web): landing page ui improvement

web/components/home/FeaturesSection.tsx

@@ -17,7 +17,7 @@ const FeaturesSection = () => {
   return (
     <Box p={4}>
       <Stack spacing={4} as={Container} maxW={'6xl'}>
-        <Heading fontSize={'3xl'} textAlign={'center'}>
+        <Heading fontSize={'3xl'} textAlign={'center'} pt={16}>
           Features
         </Heading>
         <Text color={'gray.600'} fontSize={'lg'} textAlign={'justify'}>
@@ -30,9 +30,9 @@ const FeaturesSection = () => {
       </Stack>
 
       <Container maxW={'6xl'} mt={10}>
-        <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={10}>
+        <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={10} pt={16}>
           {featuresContent.map((feature, i) => (
-            <HStack key={i} align={'top'}>
+            <HStack key={i} align={'top'} borderWidth="1px" borderRadius="lg" p={2} shadow='lg' >
               <Box color={'green.400'} px={2}>
                 <Icon as={CheckIcon} />
               </Box>

web/components/home/HowItWorksSection.tsx

@@ -19,7 +19,7 @@ export default function HowItWorksSection() {
     <Box p={4}>
       <Stack spacing={4} as={Container} maxW={'6xl'}>
         <a id='#how-it-works'>
-          <Heading fontSize={'3xl'} textAlign={'center'}>
+          <Heading fontSize={'3xl'} textAlign={'center'} pt={16}>
             How It Works
           </Heading>
         </a>
@@ -31,7 +31,7 @@ export default function HowItWorksSection() {
         </Text>
       </Stack>
 
-      <Container maxW={'6xl'} mt={10}>
+      <Container maxW={'6xl'} mt={10} pt={8}>
         <Accordion allowMultiple defaultIndex={[]}>
           {howItWorksContent.map(({ title, description }) => (
             <AccordionItem key={title}>