import type { NextPage } from 'next' import Link from 'next/link' import { FC, ReactNode } from 'react' interface CtaLinkProps { page: string children?: ReactNode } const CtaLink: FC<CtaLinkProps> = (props) => ( <Link href={props.page}> <a className="underline hover:text-gray-200">{props.children}</a> </Link> ) const Home: NextPage = () => { return ( <div className="flex min-h-screen flex-col items-center justify-center bg-pink-400"> <main className="flex flex-col items-center space-y-8"> <h1 className="text-6xl">Wishes</h1> <div className="space-x-3"> <CtaLink page="/sign-up">Create account</CtaLink> <span>or</span> <CtaLink page="/sign-in">Login</CtaLink> </div> </main> </div> ) } export default Home