chore(website): include volunteer banner at the top of the page

src/pages/App.tsx

@@ -1,4 +1,5 @@
 import { Box, Heading, Text, VStack } from '@chakra-ui/react';
+import CallToAction from './components/CallToAction';
 import Demo from './components/Demo';
 import Donate from './components/Donate';
 import FadeIn from './components/FadeIn';
@@ -16,9 +17,10 @@ const App = ({ searchWord }: { searchWord: string }) => (
       className="overflow-x-hidden flex flex-col items-center"
       id="homepage-container"
       width="full"
-      pt={24}
+      pt={20}
       pb={24}
     >
+      <CallToAction />
       <VStack width="full" gap={24}>
         <Box
           className="relative flex flex-col justify-center items-center 

src/pages/components/CallToAction/CallToAction.tsx

@@ -0,0 +1,32 @@
+import { Button, HStack, Link, Text } from '@chakra-ui/react';
+import { LuArrowRight } from 'react-icons/lu';
+import { VOLUNTEER_PAGE_URL } from 'src/siteConstants';
+
+const CallToAction = () => (
+  <HStack
+    width="full"
+    justifyContent="center"
+    gap={6}
+    backgroundColor="blue.900"
+    p={4}
+    flexDirection={{ base: 'column', lg: 'row' }}
+  >
+    <Text color="white" fontWeight="medium" fontSize="md" textAlign="center">
+      Join our team of Igbo audio recorders and translators to help advance Igbo NLP technology 🎙️
+    </Text>
+    <Link href={VOLUNTEER_PAGE_URL} target="_blank">
+      <Button
+        backgroundColor="white"
+        color="black"
+        fontWeight="bold"
+        fontFamily="heading"
+        rightIcon={<LuArrowRight />}
+        fontSize="md"
+      >
+        Join here
+      </Button>
+    </Link>
+  </HStack>
+);
+
+export default CallToAction;

src/pages/components/CallToAction/index.ts

@@ -0,0 +1,3 @@
+import CallToAction from './CallToAction';
+
+export default CallToAction;

src/pages/components/Footer/Footer.tsx

@@ -97,7 +97,7 @@ const Footer = () => (
     backgroundColor="blue.900"
     gap={12}
   >
-    <footer className="w-11/12 grid grid-cols-1 lg:grid-cols-4 space-y-8 lg:space-y-0">
+    <footer className="w-11/12 gap-4 grid grid-cols-1 lg:grid-cols-4 space-y-8 lg:space-y-0">
       <VStack alignItems="start">
         <Link href="/">
           <Image src={nkowaokwuLogoWhite} alt="Nkọwa okwu logo" height={30} />

src/pages/components/Navbar/Navbar.tsx

@@ -16,7 +16,7 @@ const Navbar = ({ to = '/' }: { to?: string }) => {
       p={4}
     >
       <Box className="flex items-center justify-between w-11/12" style={{ zIndex: 2 }}>
-        <Box className="flex flex-row items-center">
+        <Box className="flex flex-row items-center" flex={1}>
           <Heading
             as="h1"
             className="transition-element text-3xl font-extrabold hover:text-gray-700 text-gray-900"
@@ -43,9 +43,11 @@ const Navbar = ({ to = '/' }: { to?: string }) => {
           </Show>
         </Box>
         <Show above="md">
-          <NavigationOptions />
+          <Box flex={4}>
+            <NavigationOptions />
+          </Box>
         </Show>
-        <Box display="flex" flexDirection="row" className="space-x-3">
+        <Box display="flex" flexDirection="row" className="space-x-3" flex={1}>
           <Button
             className="transition-all duration-200"
             backgroundColor="white"

src/pages/components/Navbar/NavigationOptions.tsx

@@ -16,6 +16,7 @@ import { navigationLinks, NavigationType } from '../../../shared/constants/navig
 const NavigationOptions = () => (
   <UnorderedList
     className="w-full flex flex-row justify-center items-center space-x-6"
+    ml={0}
     data-test="sub-menu"
   >
     {navigationLinks.map(({ href, label, type, options }) => (

src/siteConstants.ts

@@ -4,6 +4,7 @@ export const API_FROM_EMAIL = '[email protected]';
 export const APP_URL = 'https://igboapi.com';
 export const API_ROUTE = APP_URL;
 export const DICTIONARY_APP_URL = 'https://nkowaokwu.com';
+export const VOLUNTEER_PAGE_URL = 'https://nkowaokwu.com/volunteer';
 export const SPEECH_TO_TEXT_APP_URL = 'https://speech.igboapi.com';
 export const GITHUB_REPO = 'https://github.com/nkowaokwu/igbo_api';
 export const GITHUB_CONTRIBUTORS = 'https://api.github.com/repos/nkowaokwu/igbo_api/contributors';