lucxjo/friends-best
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

Updated design to a tailwindcss based design. Already looking better on mobile.

Browse source 
Some optimisation still needs to be done
This commit is contained in:
Ludoviko 2021-09-02 21:27:37 +01:00
parent 1f21e18241
commit 3a7194b33d
No known key found for this signature in database
GPG key ID: 1E66DEA3F5D623D1
9 changed files with 653 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

38
pages/index.tsx
View file

@ -1,10 +1,9 @@
import Head from 'next/head'
import Link from 'next/link'
import styles from '../styles/Home.module.css'
import { useRouter } from 'next/router'
import { useTranslations } from 'next-intl'
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import Image from 'next/image'
import LinkCard from '../components/linkcard'
export function getStaticProps({locale}: GetStaticPropsContext) {
return {
@ -18,10 +17,9 @@ export function getStaticProps({locale}: GetStaticPropsContext) {
}
export default function Home() {
const router = useRouter()
const t = useTranslations('common')
return (
<div className={styles.container}>
<div className="">
<Head>
<title>Vänner Bäst | Friends Best</title>
<meta name="description" content="Generated by create next app" />
@ -35,34 +33,22 @@ export default function Home() {
<meta property="og:description" content="A Young Royals fan website with links to different discussion spaces."/>
</Head>
<main className={styles.main}>
<Image src="/yr.jpg" alt="Young Royals" width={256} height={144} />
<h1 className={styles.title}>
<main className="container mx-auto min-h-screen min-w-full bg-gray-300 dark:bg-gray-700">
<Image src="/yr.jpg" alt="Young Royals" width={512} height={288} className="py-6" />
<h1 className="dark:text-gray-300 font-bold text-center text-6xl pt-4">
{t('welcome')}
</h1>
<p className={styles.description}>
<p className="dark:text-gray-300 text-center text-2xl">
{t('desc')}
</p>
<div className={styles.grid}>
<a href="https://vannerba.st/watch" className={styles.card}>
<h2>{t('watch.title')} &rarr;</h2>
<p>{t('watch.desc')} </p>
</a>
<a href="https://vannerba.st/discord" className={styles.card}>
<h2>Discord &rarr;</h2>
<p>{t('discord')}</p>
</a>
<a href="https://vannerba.st/reddit" className={styles.card}>
<h2>Reddit &rarr;</h2>
<p>{t('reddit')}</p>
</a>
<a href="https://vannerba.st/learn" className={styles.card}>
<h2>{t('learn.title')} &rarr;</h2>
<p>{t('learn.desc')}</p>
</a>
<div className="grid grid-flow-col grid-cols-2 grid-rows-2 gap-6 pt-4 px-8">
<LinkCard link="https://vannerba.st/watch" title={`${t('watch.title')}`} sub={t('watch.desc')}/>
<LinkCard link="https://vannerba.st/discord" title={`Discord`} sub={t('discord')}/>
<LinkCard link="https://vannerba.st/reddit" title={`Reddit`} sub={t('reddit')}/>
<LinkCard link="https://vannerba.st/learn" title={t('learn.title')} sub={t('learn.desc')}/>
</div>
</main>
<footer className={styles.footer}><Link href="https://ludoviko.ch">Created by: Ludoviko</Link></footer>
<footer className="bg-gray-300 dark:bg-gray-700 dark:text-gray-300 text-center dark:hover:text-indigo-400"><Link href="https://ludoviko.ch">Created by: Ludoviko</Link></footer>
</div>
)
}