feat: initial project setup with frontend mockup

- Docker Compose setup with nginx reverse proxy and frontend service
- React + Vite + Tailwind CSS configuration
- Complete mockup of all application views:
  - Authentication (login/register)
  - Events list and selection
  - Event chat with matchmaking
  - 1:1 private chat with WebRTC P2P video transfer mockup
  - Partner rating system
  - Collaboration history
- Mock data for users, events, messages, matches, and ratings
- All UI text and messages in English
- Project documentation (CONTEXT.md, TODO.md, README.md, QUICKSTART.md)

frontend/src/pages/EventsPage.jsx

@@ -0,0 +1,60 @@
+import { useNavigate } from 'react-router-dom';
+import Layout from '../components/layout/Layout';
+import { mockEvents } from '../mocks/events';
+import { Calendar, MapPin, Users } from 'lucide-react';
+
+const EventsPage = () => {
+  const navigate = useNavigate();
+
+  const handleJoinEvent = (eventId) => {
+    navigate(`/events/${eventId}/chat`);
+  };
+
+  return (
+    <Layout>
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">Choose an event</h1>
+        <p className="text-gray-600 mb-8">Join an event and start connecting with other dancers</p>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {mockEvents.map((event) => (
+            <div
+              key={event.id}
+              className="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border border-gray-200"
+            >
+              <h3 className="text-xl font-bold text-gray-900 mb-3">{event.name}</h3>
+
+              <div className="space-y-2 mb-4">
+                <div className="flex items-center text-gray-600">
+                  <MapPin className="w-4 h-4 mr-2" />
+                  <span className="text-sm">{event.location}</span>
+                </div>
+                <div className="flex items-center text-gray-600">
+                  <Calendar className="w-4 h-4 mr-2" />
+                  <span className="text-sm">
+                    {new Date(event.start_date).toLocaleDateString('en-US')} - {new Date(event.end_date).toLocaleDateString('en-US')}
+                  </span>
+                </div>
+                <div className="flex items-center text-gray-600">
+                  <Users className="w-4 h-4 mr-2" />
+                  <span className="text-sm">{event.participants_count} participants</span>
+                </div>
+              </div>
+
+              <p className="text-gray-600 text-sm mb-4">{event.description}</p>
+
+              <button
+                onClick={() => handleJoinEvent(event.id)}
+                className="w-full px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors"
+              >
+                Join chat
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default EventsPage;