import Head from 'next/head'
import Link from 'next/link';
import { PageTitle, PageDescription, PageContentBox, PageCard, CardLink } from '../components/styles/content';

export default function Home() {
  return (
    <>
      <Head>
        <title>Neshweb - Home</title>
        <meta charSet='utf-8' />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <PageTitle>
        Welcome to my Servers Webpage
      </PageTitle>

      <PageDescription>
        Feel free to look around
      </PageDescription>
      <PageContentBox>
        <CardLink key="about" href="/about">
          <PageCard>
            <h2>About &rarr;</h2>
            <p>Useless Info, don&apos;t bother</p>
          </PageCard>
        </CardLink>

        <CardLink key="servers" href="/games">
          <PageCard>
            <h2>Games &rarr;</h2>
            <p>List of all available Servers</p>
          </PageCard>
        </CardLink>

        <CardLink key="services" href="/services">
          <PageCard>
            <h2>Services &rarr;</h2>
            <p>List of available Services</p>
          </PageCard>
        </CardLink>
      </PageContentBox>
    </>
  )
}