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/components/layout/Layout.jsx

@@ -0,0 +1,14 @@
+import Navbar from './Navbar';
+
+const Layout = ({ children }) => {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Navbar />
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {children}
+      </main>
+    </div>
+  );
+};
+
+export default Layout;

frontend/src/components/layout/Navbar.jsx

@@ -0,0 +1,59 @@
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
+import { Video, LogOut, User, History } from 'lucide-react';
+
+const Navbar = () => {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
+  if (!user) return null;
+
+  return (
+    <nav className="bg-white shadow-md">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between h-16">
+          <div className="flex items-center">
+            <Link to="/events" className="flex items-center space-x-2">
+              <Video className="w-8 h-8 text-primary-600" />
+              <span className="text-xl font-bold text-gray-900">spotlight.cam</span>
+            </Link>
+          </div>
+
+          <div className="flex items-center space-x-4">
+            <Link
+              to="/history"
+              className="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-100"
+            >
+              <History className="w-4 h-4" />
+              <span>History</span>
+            </Link>
+
+            <div className="flex items-center space-x-3">
+              <img
+                src={user.avatar}
+                alt={user.username}
+                className="w-8 h-8 rounded-full"
+              />
+              <span className="text-sm font-medium text-gray-700">{user.username}</span>
+            </div>
+
+            <button
+              onClick={handleLogout}
+              className="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-red-600 hover:bg-red-50"
+            >
+              <LogOut className="w-4 h-4" />
+              <span>Logout</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;