81 lines
3.8 KiB
TypeScript
81 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import LanguageSwitcher from '@/components/LanguageSwitcher';
|
|
import ThemeSwitcher from '@/components/ThemeSwitcher';
|
|
import { useI18n } from '@/lib/i18n/useI18n';
|
|
|
|
export default function Home() {
|
|
const { t, isLoading } = useI18n();
|
|
|
|
if (isLoading) return null;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
|
|
<header className="py-6 bg-white dark:bg-gray-800 shadow-sm">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
|
|
<div className="font-medium text-lg text-gray-900 dark:text-white">Draw</div>
|
|
<nav className="flex items-center space-x-4">
|
|
<ThemeSwitcher />
|
|
<LanguageSwitcher />
|
|
<Link
|
|
href="/auth/login"
|
|
className="text-sm text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
|
|
>
|
|
{t('header.login')}
|
|
</Link>
|
|
<Link
|
|
href="/auth/register"
|
|
className="text-sm bg-blue-600 text-white py-2 px-3 rounded-md hover:bg-blue-700"
|
|
>
|
|
{t('header.register')}
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-grow flex">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 flex flex-col lg:flex-row items-center">
|
|
<div className="lg:w-1/2 lg:pr-12 mb-10 lg:mb-0">
|
|
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">
|
|
{t('home.title')}
|
|
</h1>
|
|
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
|
|
{t('home.description')}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
|
|
<Link
|
|
href="/auth/register"
|
|
className="inline-flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none"
|
|
>
|
|
{t('home.startFree')}
|
|
</Link>
|
|
<Link
|
|
href="/about"
|
|
className="inline-flex justify-center items-center px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none"
|
|
>
|
|
{t('home.learnMore')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="lg:w-1/2 flex justify-center">
|
|
<div className="w-full max-w-md h-96 bg-white dark:bg-gray-800 rounded-lg shadow-md flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="w-24 h-24 text-gray-300 dark:text-gray-600">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-8">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 text-center">
|
|
{t('footer.copyright')}
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|