2021-10-24 05:19:39 +02:00
|
|
|
import { GetStaticProps } from 'next'
|
|
|
|
|
import Link from 'next/link'
|
|
|
|
|
import Image from 'next/image'
|
2021-10-24 06:09:43 +02:00
|
|
|
|
2021-10-24 05:19:39 +02:00
|
|
|
import Translation from 'next-translate/Trans'
|
2021-10-24 05:48:06 +02:00
|
|
|
import useTranslation from 'next-translate/useTranslation'
|
2021-10-24 05:19:39 +02:00
|
|
|
|
|
|
|
|
import { Head } from 'components/Head'
|
|
|
|
|
import { Header } from 'components/Header'
|
2021-10-24 05:48:06 +02:00
|
|
|
import { Main } from 'components/design/Main'
|
2021-10-24 06:09:43 +02:00
|
|
|
import { Footer, FooterProps } from 'components/Footer'
|
2021-10-24 05:19:39 +02:00
|
|
|
import { SocialMediaButton } from 'components/design/SocialMediaButton'
|
2021-10-24 05:48:06 +02:00
|
|
|
import { Button } from 'components/design/Button'
|
|
|
|
|
import { ScrollableBody } from 'components/ScrollableBody'
|
2021-10-24 05:19:39 +02:00
|
|
|
|
2021-10-24 06:09:43 +02:00
|
|
|
const Home: React.FC<FooterProps> = (props) => {
|
2021-10-24 05:19:39 +02:00
|
|
|
const { t } = useTranslation()
|
2021-10-24 06:09:43 +02:00
|
|
|
const { version } = props
|
2021-10-24 05:19:39 +02:00
|
|
|
|
|
|
|
|
return (
|
2021-10-24 05:48:06 +02:00
|
|
|
<ScrollableBody>
|
2021-10-24 05:19:39 +02:00
|
|
|
<Head />
|
|
|
|
|
<Header />
|
2021-10-24 05:48:06 +02:00
|
|
|
<Main>
|
|
|
|
|
<section className='flex flex-col items-center w-4/5'>
|
|
|
|
|
<section className='max-w-xs'>
|
2021-10-24 05:19:39 +02:00
|
|
|
<Link href='/authentication/signup'>
|
|
|
|
|
<a>
|
|
|
|
|
<Image
|
|
|
|
|
width={351}
|
|
|
|
|
height={341}
|
|
|
|
|
src='/images/svg/design/home.svg'
|
|
|
|
|
alt={"Thream's chat app"}
|
|
|
|
|
/>
|
|
|
|
|
</a>
|
|
|
|
|
</Link>
|
2021-10-24 05:48:06 +02:00
|
|
|
</section>
|
|
|
|
|
<section className='text-center'>
|
|
|
|
|
<h1 className='my-4 text-3xl font-medium font-headline text-green-800 dark:text-green-400'>
|
|
|
|
|
Thream
|
|
|
|
|
</h1>
|
|
|
|
|
<div
|
|
|
|
|
className='font-paragraph text-lg max-w-lg'
|
|
|
|
|
data-cy='main-description'
|
|
|
|
|
>
|
2021-10-24 05:19:39 +02:00
|
|
|
<Translation
|
|
|
|
|
i18nKey='home:description'
|
2021-10-24 05:48:06 +02:00
|
|
|
components={[
|
|
|
|
|
<strong
|
|
|
|
|
className='text-green-800 dark:text-green-400 font-bold'
|
|
|
|
|
key='bold'
|
|
|
|
|
/>
|
|
|
|
|
]}
|
2021-10-24 05:19:39 +02:00
|
|
|
/>
|
|
|
|
|
</div>
|
2021-10-24 05:48:06 +02:00
|
|
|
<div className='flex justify-center items-center text-center mt-8 space-x-4'>
|
2021-10-24 06:09:43 +02:00
|
|
|
<Link href='/authentication/signup'>
|
|
|
|
|
<a data-cy='get-started'>
|
|
|
|
|
<Button>{t('home:get-started')}</Button>
|
|
|
|
|
</a>
|
|
|
|
|
</Link>
|
2021-10-24 05:48:06 +02:00
|
|
|
<a
|
|
|
|
|
href='https://github.com/Thream'
|
|
|
|
|
target='_blank'
|
|
|
|
|
rel='noopener noreferrer'
|
|
|
|
|
>
|
|
|
|
|
<SocialMediaButton socialMedia='GitHub' />
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2021-10-24 05:19:39 +02:00
|
|
|
</section>
|
2021-10-24 05:48:06 +02:00
|
|
|
</Main>
|
2021-10-24 06:09:43 +02:00
|
|
|
<Footer version={version} />
|
2021-10-24 05:48:06 +02:00
|
|
|
</ScrollableBody>
|
2021-10-24 05:19:39 +02:00
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2021-10-24 06:09:43 +02:00
|
|
|
export const getStaticProps: GetStaticProps<FooterProps> = async () => {
|
|
|
|
|
const { readPackage } = await import('read-pkg')
|
|
|
|
|
const { version } = await readPackage()
|
|
|
|
|
return { props: { version } }
|
2021-10-24 05:19:39 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Home
|
