next-app-boilerplate/pages/index.tsx

import NextHead from 'components/NextHead'
import type { NextPage } from 'next'
import Link from 'next/link'
import useTranslation from 'next-translate/useTranslation'
import { FiGithub } from 'react-icons/fi'
import { Fragment } from 'react'

const Home: NextPage = () => {
  const { t } = useTranslation()

  return (
    <Fragment>
      <NextHead />

      <main className='flex min-h-screen max-w-full flex-col items-center justify-center bg-gradient-to-br from-primary to-secondary'>
        <p className='px-3 text-center text-4xl italic text-white'>
          {t('home:title')}
        </p>
        <span className='mt-3 px-3 text-center text-lg italic text-white/90'>
          {t('home:subtitle')}
        </span>

        <Link
          target='_blank'
          href='https://github.com/Walidoux/next-app-boilerplate'
          className='mt-7 flex cursor-pointer items-center justify-center rounded-xl border-none bg-white/80 bg-none py-[10px] px-6 font-semibold text-black no-underline outline-none transition duration-300 hover:bg-black/50 hover:text-white'>
          <FiGithub fontSize={20} />
          <span className='ml-3'>{t('common:repo-github')}</span>
        </Link>
      </main>
    </Fragment>
  )
}

export default Home