69 lines
3 KiB
TypeScript
69 lines
3 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { ModalExample } from '../context/modals/ModalExample';
|
|
import { ToastExample } from '../context/toasts/ToastExample';
|
|
import { LoaderExample } from '../context/loaders/LoaderExample';
|
|
import { TaskboardLogo } from '../components/TaskboardLogo';
|
|
|
|
export function Home() {
|
|
return (
|
|
<div className="space-y-12">
|
|
<div className="text-center py-12">
|
|
<div className="flex justify-center mb-6">
|
|
<TaskboardLogo className="h-16 w-auto" />
|
|
</div>
|
|
<h1 className="text-5xl font-bold text-white mb-4">Welcome to Taskboard</h1>
|
|
<p className="text-xl text-gray-300 mb-8">
|
|
Organize your projects and boost productivity with powerful task management
|
|
</p>
|
|
<Link
|
|
to="/boards"
|
|
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg text-lg font-medium transition-colors inline-block"
|
|
>
|
|
View Boards
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
|
|
<h3 className="text-xl font-semibold text-white mb-2">Visual Workflow</h3>
|
|
<p className="text-gray-400">Drag and drop cards to manage your tasks efficiently</p>
|
|
</div>
|
|
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
|
|
<h3 className="text-xl font-semibold text-white mb-2">Personal Organization</h3>
|
|
<p className="text-gray-400">Your personal space to organize and track your tasks</p>
|
|
</div>
|
|
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
|
|
<h3 className="text-xl font-semibold text-white mb-2">Customizable Boards</h3>
|
|
<p className="text-gray-400">Create and organize boards to fit your workflow</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
|
|
<h2 className="text-2xl font-semibold text-white mb-4">Modal System Demo</h2>
|
|
<p className="text-gray-400 mb-6">
|
|
Test our modal system with this interactive example. The modal uses React Context for
|
|
state management.
|
|
</p>
|
|
<ModalExample />
|
|
</div>
|
|
|
|
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
|
|
<h2 className="text-2xl font-semibold text-white mb-4">Toast System Demo</h2>
|
|
<p className="text-gray-400 mb-6">
|
|
Test our toast notification system with this interactive example. The toast uses React
|
|
Context for state management.
|
|
</p>
|
|
<ToastExample />
|
|
</div>
|
|
|
|
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
|
|
<h2 className="text-2xl font-semibold text-white mb-4">Loader System Demo</h2>
|
|
<p className="text-gray-400 mb-6">
|
|
Test our global loading system with this interactive example. The loader uses React
|
|
Context for state management.
|
|
</p>
|
|
<LoaderExample />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|