Add event detail/form components and page routes

frontend/src/app/events/[eventId]/page.tsx

@@ -0,0 +1,19 @@
+import { EventDetail } from '@/components/event-detail';
+
+interface EventPageProps {
+  params: Promise<{
+    eventId: string;
+  }>;
+}
+
+export default async function EventPage({ params }: EventPageProps) {
+  const { eventId } = await params;
+  
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4">
+        <EventDetail eventId={eventId} />
+      </div>
+    </div>
+  );
+}

frontend/src/app/events/create/page.tsx

@@ -0,0 +1,12 @@
+import { EventForm } from '@/components/event-form';
+
+export default function CreateEventPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4">
+        <h1 className="text-3xl font-bold mb-8">Create Event</h1>
+        <EventForm />
+      </div>
+    </div>
+  );
+}

frontend/src/app/events/page.tsx

@@ -0,0 +1,23 @@
+import { EventList } from '@/components/event-list';
+import { Suspense } from 'react';
+
+export default function EventsPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold">Events</h1>
+          <a
+            href="/events/create"
+            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+          >
+            Create Event
+          </a>
+        </div>
+        <Suspense fallback={<div>Loading...</div>}>
+          <EventList />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

frontend/src/app/login/page.tsx

@@ -0,0 +1,9 @@
+import { LoginForm } from '@/components/login-form';
+
+export default function LoginPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 py-12">
+      <LoginForm />
+    </div>
+  );
+}

frontend/src/app/register/page.tsx

@@ -0,0 +1,9 @@
+import { RegisterForm } from '@/components/register-form';
+
+export default function RegisterPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 py-12">
+      <RegisterForm />
+    </div>
+  );
+}

frontend/src/components/event-detail.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { api, Event } from '@/lib/api';
+import { useAuth } from '@/lib/auth-context';
+
+interface EventDetailProps {
+  eventId: string;
+}
+
+export function EventDetail({ eventId }: EventDetailProps) {
+  const [event, setEvent] = useState<Event | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { user } = useAuth();
+
+  useEffect(() => {
+    loadEvent();
+  }, [eventId]);
+
+  const loadEvent = async () => {
+    try {
+      setIsLoading(true);
+      const data = await api.getEvent(eventId);
+      setEvent(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load event');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return <div className="text-center py-8">Loading...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        {error}
+      </div>
+    );
+  }
+
+  if (!event) {
+    return <div className="text-center py-8">Event not found</div>;
+  }
+
+  const isOrganizer = user?.id === event.organizer.id;
+  const canEdit = isOrganizer || user?.role === 'Organizer';
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+        <div className="flex justify-between items-start mb-4">
+          <div>
+            <span className={`inline-block px-2 py-1 text-xs rounded mb-2 ${
+              event.status === 'Published' ? 'bg-green-100 text-green-800' :
+              event.status === 'Draft' ? 'bg-yellow-100 text-yellow-800' :
+              'bg-red-100 text-red-800'
+            }`}>
+              {event.status}
+            </span>
+            <h1 className="text-3xl font-bold">{event.name}</h1>
+          </div>
+          {canEdit && (
+            <a
+              href={`/events/${event.id}/edit`}
+              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+            >
+              Edit Event
+            </a>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+          <div className="space-y-3">
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">📅</span>
+              <div>
+                <p className="text-sm text-gray-500">Date</p>
+                <p className="font-medium">{new Date(event.eventDate).toLocaleString()}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">📍</span>
+              <div>
+                <p className="text-sm text-gray-500">Location</p>
+                <p className="font-medium">{event.location}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">👥</span>
+              <div>
+                <p className="text-sm text-gray-500">Registrations</p>
+                <p className="font-medium">
+                  {event.currentRegistrations} registered
+                  {event.maxParticipants && ` / ${event.maxParticipants} max`}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            {event.category && (
+              <div className="flex items-center gap-3">
+                <span className="text-2xl">🏷️</span>
+                <div>
+                  <p className="text-sm text-gray-500">Category</p>
+                  <p className="font-medium">{event.category}</p>
+                </div>
+              </div>
+            )}
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">👤</span>
+              <div>
+                <p className="text-sm text-gray-500">Organizer</p>
+                <p className="font-medium">{event.organizer.name}</p>
+              </div>
+            </div>
+            {event.tags.length > 0 && (
+              <div className="flex flex-wrap gap-2">
+                {event.tags.map((tag) => (
+                  <span key={tag} className="px-2 py-1 bg-gray-100 text-gray-700 text-sm rounded">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="border-t pt-6">
+          <h2 className="text-xl font-semibold mb-3">Description</h2>
+          <p className="text-gray-700 whitespace-pre-wrap">{event.description}</p>
+        </div>
+
+        {user?.role === 'Participant' && event.status === 'Published' && (
+          <div className="border-t pt-6 mt-6">
+            <a
+              href={`/events/${event.id}/register`}
+              className="block text-center py-3 px-6 bg-green-600 text-white rounded-md hover:bg-green-700 font-semibold"
+            >
+              Register for Event
+            </a>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/event-form.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useState } from 'react';
+import { api, Event } from '@/lib/api';
+import { useRouter } from 'next/navigation';
+
+interface EventFormProps {
+  event?: Event;
+}
+
+export function EventForm({ event }: EventFormProps) {
+  const [name, setName] = useState(event?.name || '');
+  const [description, setDescription] = useState(event?.description || '');
+  const [eventDate, setEventDate] = useState(event ? new Date(event.eventDate).toISOString().slice(0, 16) : '');
+  const [location, setLocation] = useState(event?.location || '');
+  const [category, setCategory] = useState(event?.category || '');
+  const [maxParticipants, setMaxParticipants] = useState(event?.maxParticipants?.toString() || '');
+  const [tags, setTags] = useState(event?.tags.join(', ') || '');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const categories = ['Running', 'Cycling', 'Triathlon', 'Trail', 'Road'];
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      const eventData = {
+        name,
+        description,
+        eventDate: new Date(eventDate).toISOString(),
+        location,
+        category: category || undefined,
+        maxParticipants: maxParticipants ? parseInt(maxParticipants) : undefined,
+        tags: tags.split(',').map(t => t.trim()).filter(t => t),
+      };
+
+      if (event) {
+        await api.updateEvent(event.id, eventData);
+      } else {
+        await api.createEvent(eventData);
+      }
+
+      router.push('/events');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save event');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      {error && (
+        <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-6 bg-white rounded-lg shadow-md p-6">
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+            Event Name *
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+            Description
+          </label>
+          <textarea
+            id="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={4}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="eventDate" className="block text-sm font-medium text-gray-700 mb-1">
+              Event Date & Time *
+            </label>
+            <input
+              id="eventDate"
+              type="datetime-local"
+              value={eventDate}
+              onChange={(e) => setEventDate(e.target.value)}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="location" className="block text-sm font-medium text-gray-700 mb-1">
+              Location *
+            </label>
+            <input
+              id="location"
+              type="text"
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              required
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="category" className="block text-sm font-medium text-gray-700 mb-1">
+              Category
+            </label>
+            <select
+              id="category"
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">Select Category</option>
+              {categories.map((cat) => (
+                <option key={cat} value={cat}>{cat}</option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label htmlFor="maxParticipants" className="block text-sm font-medium text-gray-700 mb-1">
+              Max Participants
+            </label>
+            <input
+              id="maxParticipants"
+              type="number"
+              min="1"
+              value={maxParticipants}
+              onChange={(e) => setMaxParticipants(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label htmlFor="tags" className="block text-sm font-medium text-gray-700 mb-1">
+            Tags (comma-separated)
+          </label>
+          <input
+            id="tags"
+            type="text"
+            value={tags}
+            onChange={(e) => setTags(e.target.value)}
+            placeholder="e.g., beginner, competitive, charity"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div className="flex gap-4">
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="flex-1 py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
+          >
+            {isSubmitting ? 'Saving...' : (event ? 'Update Event' : 'Create Event')}
+          </button>
+          <button
+            type="button"
+            onClick={() => router.push('/events')}
+            className="py-2 px-4 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

frontend/src/components/event-list.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { api, Event } from '@/lib/api';
+
+export function EventList() {
+  const [events, setEvents] = useState<Event[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [category, setCategory] = useState('');
+  const [status, setStatus] = useState('');
+
+  useEffect(() => {
+    loadEvents();
+  }, [category, status]);
+
+  const loadEvents = async () => {
+    try {
+      setIsLoading(true);
+      const data = await api.getEvents({
+        category: category || undefined,
+        status: status || undefined,
+      });
+      setEvents(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load events');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const categories = ['Running', 'Cycling', 'Triathlon', 'Trail', 'Road'];
+
+  if (isLoading) {
+    return <div className="text-center py-8">Loading events...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Filters */}
+      <div className="flex gap-4 mb-6">
+        <select
+          value={category}
+          onChange={(e) => setCategory(e.target.value)}
+          className="px-3 py-2 border border-gray-300 rounded-md"
+        >
+          <option value="">All Categories</option>
+          {categories.map((cat) => (
+            <option key={cat} value={cat}>{cat}</option>
+          ))}
+        </select>
+        
+        <select
+          value={status}
+          onChange={(e) => setStatus(e.target.value)}
+          className="px-3 py-2 border border-gray-300 rounded-md"
+        >
+          <option value="">All Status</option>
+          <option value="Published">Published</option>
+          <option value="Draft">Draft</option>
+          <option value="Cancelled">Cancelled</option>
+        </select>
+      </div>
+
+      {/* Events Grid */}
+      {events.length === 0 ? (
+        <div className="text-center py-8 text-gray-500">No events found</div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {events.map((event) => (
+            <div key={event.id} className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
+              <div className="flex justify-between items-start mb-2">
+                <span className={`px-2 py-1 text-xs rounded ${
+                  event.status === 'Published' ? 'bg-green-100 text-green-800' :
+                  event.status === 'Draft' ? 'bg-yellow-100 text-yellow-800' :
+                  'bg-red-100 text-red-800'
+                }`}>
+                  {event.status}
+                </span>
+                {event.category && (
+                  <span className="text-sm text-gray-500">{event.category}</span>
+                )}
+              </div>
+              
+              <h3 className="text-xl font-semibold mb-2">{event.name}</h3>
+              <p className="text-gray-600 mb-4 line-clamp-2">{event.description}</p>
+              
+              <div className="space-y-2 text-sm text-gray-500">
+                <div className="flex items-center gap-2">
+                  <span>📅</span>
+                  {new Date(event.eventDate).toLocaleDateString()}
+                </div>
+                <div className="flex items-center gap-2">
+                  <span>📍</span>
+                  {event.location}
+                </div>
+                <div className="flex items-center gap-2">
+                  <span>👥</span>
+                  {event.currentRegistrations}
+                  {event.maxParticipants && ` / ${event.maxParticipants}`} registered
+                </div>
+              </div>
+              
+              {event.tags.length > 0 && (
+                <div className="flex flex-wrap gap-2 mt-4">
+                  {event.tags.map((tag) => (
+                    <span key={tag} className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              )}
+              
+              <a
+                href={`/events/${event.id}`}
+                className="mt-4 block text-center py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+              >
+                View Details
+              </a>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/login-form.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { useState } from 'react';
+import { useAuth } from '@/lib/auth-context';
+import { useRouter } from 'next/navigation';
+
+export function LoginForm() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { login, error } = useAuth();
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    
+    try {
+      await login(email, password);
+      router.push('/dashboard');
+    } catch (err) {
+      // Error is handled by auth context
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
+      <h2 className="text-2xl font-bold mb-6 text-gray-800">Login</h2>
+      
+      {error && (
+        <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+          {error}
+        </div>
+      )}
+      
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            Email
+          </label>
+          <input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+            Password
+          </label>
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            minLength={8}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400 transition-colors"
+        >
+          {isSubmitting ? 'Logging in...' : 'Login'}
+        </button>
+      </form>
+      
+      <p className="mt-4 text-center text-sm text-gray-600">
+        Don&apos;t have an account?{' '}
+        <a href="/register" className="text-blue-600 hover:underline">
+          Register
+        </a>
+      </p>
+    </div>
+  );
+}

frontend/src/components/register-form.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useState } from 'react';
+import { useAuth } from '@/lib/auth-context';
+import { useRouter } from 'next/navigation';
+
+export function RegisterForm() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [name, setName] = useState('');
+  const [role, setRole] = useState<'Organizer' | 'Participant'>('Participant');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const { register, error } = useAuth();
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setValidationError(null);
+    
+    if (password !== confirmPassword) {
+      setValidationError('Passwords do not match');
+      return;
+    }
+    
+    if (password.length < 8) {
+      setValidationError('Password must be at least 8 characters');
+      return;
+    }
+    
+    setIsSubmitting(true);
+    
+    try {
+      await register(email, password, name, role);
+      router.push('/dashboard');
+    } catch (err) {
+      // Error is handled by auth context
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-md mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
+      <h2 className="text-2xl font-bold mb-6 text-gray-800">Register</h2>
+      
+      {(error || validationError) && (
+        <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+          {error || validationError}
+        </div>
+      )}
+      
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+            Full Name
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+            Email
+          </label>
+          <input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+            Password
+          </label>
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            minLength={8}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        
+        <div>
+          <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
+            Confirm Password
+          </label>
+          <input
+            id="confirmPassword"
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            required
+            minLength={8}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        
+        <div>
+          <label htmlFor="role" className="block text-sm font-medium text-gray-700 mb-1">
+            Account Type
+          </label>
+          <select
+            id="role"
+            value={role}
+            onChange={(e) => setRole(e.target.value as 'Organizer' | 'Participant')}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+          >
+            <option value="Participant">Participant</option>
+            <option value="Organizer">Organizer</option>
+          </select>
+        </div>
+        
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400 transition-colors"
+        >
+          {isSubmitting ? 'Registering...' : 'Register'}
+        </button>
+      </form>
+      
+      <p className="mt-4 text-center text-sm text-gray-600">
+        Already have an account?{' '}
+        <a href="/login" className="text-blue-600 hover:underline">
+          Login
+        </a>
+      </p>
+    </div>
+  );
+}