chore(web): update landing page ui

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

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'} pt={16}>
+          <Heading fontSize={'3xl'} textAlign={'center'} py={8}>
             How It Works
           </Heading>
         </a>

web/components/home/featuresContent.ts

@@ -1,7 +1,7 @@
 export const featuresContent = [
   {
     title: 'Send SMS',
-    description: 'Send SMS to any number from your dashboard or via API.',
+    description: 'Send SMS to any number from your dashboard or via REST API.',
   },
   {
     title: 'Bulk SMS',

web/pages/index.tsx

@@ -1,5 +1,6 @@
-import { Container } from '@chakra-ui/react'
+import { Box, Container } from '@chakra-ui/react'
 import { useGoogleOneTapLogin } from '@react-oauth/google'
+import Image from 'next/image'
 import Router from 'next/router'
 import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
@@ -8,6 +9,12 @@ import HowItWorksSection from '../components/home/HowItWorksSection'
 import IntroSection from '../components/home/IntroSection'
 import { loginWithGoogle, selectAuth } from '../store/authReducer'
 
+const Wave = ({ rotate }: { rotate?: boolean }) => (
+  <Box transform={rotate ? 'rotate(180deg)' : ''}>
+    <img src={'/images/wave.svg'} alt={'wave'} />
+  </Box>
+)
+
 export default function HomePage() {
   const { accessToken, user } = useSelector(selectAuth)
   useEffect(() => {
@@ -33,8 +40,11 @@ export default function HomePage() {
   return (
     <Container maxW={'7xl'}>
       <IntroSection />
+      <Wave rotate />
       <FeaturesSection />
+      <Wave />
       <HowItWorksSection />
+      <Wave />
     </Container>
   )
 }

web/public/images/wave.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0099ff" fill-opacity="0.5" d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,250.7C1248,256,1344,288,1392,304L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>