feat: design applications and first api calls

Co-authored-by: Walid <87608619+WalidKorchi@users.noreply.github.com>

pages/index.tsx

@@ -1,19 +1,21 @@
 import { GetStaticProps } from 'next'
 import Link from 'next/link'
 import Image from 'next/image'
+
 import Translation from 'next-translate/Trans'
 import useTranslation from 'next-translate/useTranslation'
 
 import { Head } from 'components/Head'
 import { Header } from 'components/Header'
 import { Main } from 'components/design/Main'
-import { Footer } from 'components/Footer'
+import { Footer, FooterProps } from 'components/Footer'
 import { SocialMediaButton } from 'components/design/SocialMediaButton'
 import { Button } from 'components/design/Button'
 import { ScrollableBody } from 'components/ScrollableBody'
 
-const Home: React.FC = () => {
+const Home: React.FC<FooterProps> = (props) => {
   const { t } = useTranslation()
+  const { version } = props
 
   return (
     <ScrollableBody>
@@ -52,7 +54,11 @@ const Home: React.FC = () => {
               />
             </div>
             <div className='flex justify-center items-center text-center mt-8 space-x-4'>
-              <Button>{t('home:get-started')}</Button>
+              <Link href='/authentication/signup'>
+                <a data-cy='get-started'>
+                  <Button>{t('home:get-started')}</Button>
+                </a>
+              </Link>
               <a
                 href='https://github.com/Thream'
                 target='_blank'
@@ -64,13 +70,15 @@ const Home: React.FC = () => {
           </section>
         </section>
       </Main>
-      <Footer />
+      <Footer version={version} />
     </ScrollableBody>
   )
 }
 
-export const getStaticProps: GetStaticProps = async () => {
-  return { props: {} }
+export const getStaticProps: GetStaticProps<FooterProps> = async () => {
+  const { readPackage } = await import('read-pkg')
+  const { version } = await readPackage()
+  return { props: { version } }
 }
 
 export default Home