2021-12-28 16:06:58 +01:00
|
|
|
import { GetStaticProps, NextPage } from 'next'
|
2021-10-24 05:19:39 +02:00
|
|
|
import Link from 'next/link'
|
|
|
|
|
import Image from 'next/image'
|
|
|
|
|
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
|
|
|
|
2022-03-16 12:18:09 +01:00
|
|
|
import { Head } from '../components/Head'
|
|
|
|
|
import { Header } from '../components/Header'
|
|
|
|
|
import { Main } from '../components/design/Main'
|
|
|
|
|
import { Footer, FooterProps } from '../components/Footer'
|
|
|
|
|
import { SocialMediaLink } from '../components/design/SocialMediaButton'
|
|
|
|
|
import { ButtonLink } from '../components/design/Button'
|
|
|
|
|
import { ScrollableBody } from '../components/ScrollableBody'
|
2021-10-24 05:19:39 +02:00
|
|
|
|
2021-12-28 16:06:58 +01:00
|
|
|
const Home: NextPage<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>
|
2022-02-19 23:20:33 +01:00
|
|
|
<div className='flex w-4/5 flex-col items-center'>
|
2022-01-07 21:21:38 +01:00
|
|
|
<div className='max-w-xs'>
|
2021-10-24 05:19:39 +02:00
|
|
|
<Link href='/authentication/signup'>
|
|
|
|
|
<a>
|
|
|
|
|
<Image
|
2022-04-07 16:54:05 +02:00
|
|
|
quality={100}
|
2021-10-24 05:19:39 +02:00
|
|
|
width={351}
|
|
|
|
|
height={341}
|
|
|
|
|
src='/images/svg/design/home.svg'
|
|
|
|
|
alt={"Thream's chat app"}
|
|
|
|
|
/>
|
|
|
|
|
</a>
|
|
|
|
|
</Link>
|
2022-01-07 21:21:38 +01:00
|
|
|
</div>
|
|
|
|
|
<div className='text-center'>
|
2022-02-19 23:20:33 +01:00
|
|
|
<h1 className='my-4 font-headline text-3xl font-medium text-green-800 dark:text-green-400'>
|
2021-10-24 05:48:06 +02:00
|
|
|
Thream
|
|
|
|
|
</h1>
|
|
|
|
|
<div
|
2022-02-19 23:20:33 +01:00
|
|
|
className='max-w-lg font-paragraph text-lg'
|
2021-10-24 05:48:06 +02:00
|
|
|
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
|
2022-02-19 23:20:33 +01:00
|
|
|
className='font-bold text-green-800 dark:text-green-400'
|
2021-10-24 05:48:06 +02:00
|
|
|
key='bold'
|
|
|
|
|
/>
|
|
|
|
|
]}
|
2021-10-24 05:19:39 +02:00
|
|
|
/>
|
|
|
|
|
</div>
|
2022-02-19 23:20:33 +01:00
|
|
|
<div className='mt-8 flex items-center justify-center space-x-4 text-center'>
|
2022-01-07 21:21:38 +01:00
|
|
|
<Link href='/authentication/signup' passHref>
|
|
|
|
|
<ButtonLink data-cy='get-started'>
|
|
|
|
|
{t('home:get-started')}
|
|
|
|
|
</ButtonLink>
|
2021-10-24 06:09:43 +02:00
|
|
|
</Link>
|
2022-01-07 21:21:38 +01:00
|
|
|
|
|
|
|
|
<SocialMediaLink
|
|
|
|
|
socialMedia='GitHub'
|
2021-10-24 05:48:06 +02:00
|
|
|
href='https://github.com/Thream'
|
|
|
|
|
target='_blank'
|
|
|
|
|
rel='noopener noreferrer'
|
2022-01-07 21:21:38 +01:00
|
|
|
/>
|
2021-10-24 05:48:06 +02:00
|
|
|
</div>
|
2022-01-07 21:21:38 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
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
|
