kanban-app/frontend/src/pages/Home.tsx

import { Link } from 'react-router-dom';
import { ModalExample } from '../context/modals/ModalExample';
import { ToastExample } from '../context/toasts/ToastExample';
import { LoaderExample } from '../context/loaders/LoaderExample';

export function Home() {
  return (
    <div className="space-y-12">
      <div className="text-center py-12">
        <h1 className="text-5xl font-bold text-white mb-4">Welcome to Crafting Shop</h1>
        <p className="text-xl text-gray-300 mb-8">
          Your one-stop shop for premium crafting supplies
        </p>
        <Link
          to="/products"
          className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg text-lg font-medium transition-colors inline-block"
        >
          Browse Products
        </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">Quality Products</h3>
          <p className="text-gray-400">Premium crafting supplies for all your projects</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">Fast Delivery</h3>
          <p className="text-gray-400">Quick and reliable shipping to your doorstep</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">Secure Payments</h3>
          <p className="text-gray-400">Safe and secure payment processing</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>
  );
}