55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
import type { V2_MetaFunction } from "@remix-run/node";
|
|
import { Link } from "@remix-run/react";
|
|
|
|
import { useOptionalUser } from "~/utils";
|
|
|
|
export const meta: V2_MetaFunction = () => [{ title: "TranslAIte" }];
|
|
|
|
export default function Index() {
|
|
const user = useOptionalUser();
|
|
return (
|
|
<main className="relative min-h-screen bg-white sm:flex sm:items-center sm:justify-center">
|
|
<div className="relative sm:pb-16 sm:pt-8">
|
|
<div className="mx-auto min-w-[80vw] max-w-7xl sm:px-6 lg:px-8">
|
|
<div className="relative shadow-xl sm:overflow-hidden sm:rounded-2xl">
|
|
<div className="relative px-4 pb-8 pt-16 sm:px-6 sm:pb-14 sm:pt-24 lg:px-8 lg:pb-20 lg:pt-32">
|
|
<h1 className="text-center text-6xl font-extrabold tracking-tight sm:text-8xl lg:text-9xl">
|
|
Transl
|
|
<span className="uppercase text-yellow-500 drop-shadow-md">
|
|
AI
|
|
</span>
|
|
te
|
|
</h1>
|
|
<div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
|
|
{user ? (
|
|
<Link
|
|
to="/t/new"
|
|
className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-yellow-700 shadow-sm hover:bg-yellow-50 sm:px-8"
|
|
>
|
|
Translate now
|
|
</Link>
|
|
) : (
|
|
<div className="space-y-4 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5 sm:space-y-0">
|
|
<Link
|
|
to="/join"
|
|
className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-yellow-700 shadow-sm hover:bg-yellow-50 sm:px-8"
|
|
>
|
|
Sign up
|
|
</Link>
|
|
<Link
|
|
to="/login"
|
|
className="flex items-center justify-center rounded-md bg-yellow-500 px-4 py-3 font-medium text-white hover:bg-yellow-600"
|
|
>
|
|
Log In
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|