From 6086589f8974c897a79c690940a6c144bc524d92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rados=C5=82aw=20Gierwia=C5=82o?= <github@radziel.com>
Date: Sat, 15 Nov 2025 16:36:55 +0100
Subject: [PATCH] feat: add landing homepage with hero section and feature
 showcase

Create new HomePage component with:
- Hero section with CTAs for registration and login
- Features showcase highlighting WebRTC, matching, chat, security
- How it works section with 3-step process
- CTA section and footer with links
- Responsive design with gradient backgrounds

Update routing to show HomePage at / instead of redirecting to /events
---
 frontend/src/App.jsx            |   7 +-
 frontend/src/pages/HomePage.jsx | 306 ++++++++++++++++++++++++++++++++
 2 files changed, 310 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/pages/HomePage.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 00f532e..8d1b1bd 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,6 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
+import HomePage from './pages/HomePage';
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import VerifyEmailPage from './pages/VerifyEmailPage';
@@ -160,7 +161,7 @@ function App() {
             }
           />
 
-          {/* Public Profile - must be before default redirect */}
+          {/* Public Profile - must be before home route */}
           <Route
             path="/:username"
             element={
@@ -170,8 +171,8 @@ function App() {
             }
           />
 
-          {/* Default redirect */}
-          <Route path="/" element={<Navigate to="/events" replace />} />
+          {/* Home Page */}
+          <Route path="/" element={<HomePage />} />
         </Routes>
       </AuthProvider>
     </BrowserRouter>
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
new file mode 100644
index 0000000..4a378fa
--- /dev/null
+++ b/frontend/src/pages/HomePage.jsx
@@ -0,0 +1,306 @@
+import { Link } from 'react-router-dom';
+import { Video, Users, Zap, Shield, Camera, MessageCircle, Star } from 'lucide-react';
+
+const HomePage = () => {
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Hero Section */}
+      <header className="bg-gradient-to-br from-primary-600 to-primary-800">
+        <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center space-x-2">
+              <Video className="w-8 h-8 text-white" />
+              <span className="text-2xl font-bold text-white">spotlight.cam</span>
+            </div>
+            <div className="flex space-x-4">
+              <Link
+                to="/login"
+                className="px-4 py-2 text-white hover:text-primary-100 transition"
+              >
+                Sign in
+              </Link>
+              <Link
+                to="/register"
+                className="px-6 py-2 bg-white text-primary-600 rounded-lg font-medium hover:bg-primary-50 transition"
+              >
+                Get Started
+              </Link>
+            </div>
+          </div>
+        </nav>
+
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
+          <h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
+            Connect, Collaborate, Create
+          </h1>
+          <p className="text-xl md:text-2xl text-primary-100 mb-10 max-w-3xl mx-auto">
+            The ultimate platform for dance competition collaborations. Share videos,
+            find partners, and make magic happen.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center gap-4">
+            <Link
+              to="/register"
+              className="px-8 py-4 bg-white text-primary-600 rounded-lg text-lg font-semibold hover:bg-primary-50 transition shadow-lg"
+            >
+              Start Collaborating
+            </Link>
+            <Link
+              to="/events"
+              className="px-8 py-4 bg-primary-700 text-white rounded-lg text-lg font-semibold hover:bg-primary-600 transition border-2 border-white/20"
+            >
+              Explore Events
+            </Link>
+          </div>
+        </div>
+      </header>
+
+      {/* Features Section */}
+      <section className="py-20 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">
+              Everything you need to succeed
+            </h2>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+              Built specifically for West Coast Swing dancers and competition enthusiasts
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            <div className="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition">
+              <div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">
+                <Camera className="w-6 h-6 text-primary-600" />
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-3">
+                P2P Video Sharing
+              </h3>
+              <p className="text-gray-600">
+                Share videos directly with your partners using secure peer-to-peer WebRTC
+                technology. Fast, private, and encrypted.
+              </p>
+            </div>
+
+            <div className="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition">
+              <div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">
+                <Users className="w-6 h-6 text-primary-600" />
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-3">
+                Smart Matching
+              </h3>
+              <p className="text-gray-600">
+                Find the perfect collaboration partner based on division, role, and heat
+                assignments at your event.
+              </p>
+            </div>
+
+            <div className="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition">
+              <div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">
+                <MessageCircle className="w-6 h-6 text-primary-600" />
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-3">
+                Real-time Chat
+              </h3>
+              <p className="text-gray-600">
+                Communicate instantly with event participants and your collaboration
+                partners through integrated chat.
+              </p>
+            </div>
+
+            <div className="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition">
+              <div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">
+                <Shield className="w-6 h-6 text-primary-600" />
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-3">
+                Secure & Private
+              </h3>
+              <p className="text-gray-600">
+                Your videos and conversations are end-to-end encrypted. What you share
+                stays between you and your partner.
+              </p>
+            </div>
+
+            <div className="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition">
+              <div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">
+                <Zap className="w-6 h-6 text-primary-600" />
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-3">
+                Lightning Fast
+              </h3>
+              <p className="text-gray-600">
+                No upload delays or waiting. Direct peer-to-peer connections mean instant
+                video transfers, even for large files.
+              </p>
+            </div>
+
+            <div className="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition">
+              <div className="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">
+                <Star className="w-6 h-6 text-primary-600" />
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-3">
+                Competition Ready
+              </h3>
+              <p className="text-gray-600">
+                Integrated with WSDC events. Automatic heat tracking and partner
+                suggestions based on competition divisions.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* How It Works Section */}
+      <section className="py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">
+              How It Works
+            </h2>
+            <p className="text-xl text-gray-600">
+              Get started in three simple steps
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-12">
+            <div className="text-center">
+              <div className="w-16 h-16 bg-primary-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">
+                1
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-3">
+                Join an Event
+              </h3>
+              <p className="text-gray-600">
+                Check in to your West Coast Swing competition using the event's QR code
+                or check-in link.
+              </p>
+            </div>
+
+            <div className="text-center">
+              <div className="w-16 h-16 bg-primary-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">
+                2
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-3">
+                Find Partners
+              </h3>
+              <p className="text-gray-600">
+                Browse other dancers in your heats and send collaboration requests to
+                potential partners.
+              </p>
+            </div>
+
+            <div className="text-center">
+              <div className="w-16 h-16 bg-primary-600 text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-6">
+                3
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-3">
+                Share & Create
+              </h3>
+              <p className="text-gray-600">
+                Exchange videos securely, chat in real-time, and create amazing
+                competition content together.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 bg-gradient-to-br from-primary-600 to-primary-800">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <h2 className="text-4xl font-bold text-white mb-6">
+            Ready to elevate your competition experience?
+          </h2>
+          <p className="text-xl text-primary-100 mb-10">
+            Join dancers from around the world who are already collaborating on spotlight.cam
+          </p>
+          <Link
+            to="/register"
+            className="inline-block px-8 py-4 bg-white text-primary-600 rounded-lg text-lg font-semibold hover:bg-primary-50 transition shadow-lg"
+          >
+            Create Your Free Account
+          </Link>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 text-gray-300 py-12">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-4 gap-8">
+            <div>
+              <div className="flex items-center space-x-2 mb-4">
+                <Video className="w-6 h-6 text-primary-400" />
+                <span className="text-xl font-bold text-white">spotlight.cam</span>
+              </div>
+              <p className="text-sm text-gray-400">
+                The ultimate collaboration platform for West Coast Swing dancers.
+              </p>
+            </div>
+
+            <div>
+              <h3 className="text-white font-semibold mb-4">Product</h3>
+              <ul className="space-y-2 text-sm">
+                <li>
+                  <Link to="/events" className="hover:text-primary-400 transition">
+                    Events
+                  </Link>
+                </li>
+                <li>
+                  <a href="#features" className="hover:text-primary-400 transition">
+                    Features
+                  </a>
+                </li>
+                <li>
+                  <a href="#how-it-works" className="hover:text-primary-400 transition">
+                    How It Works
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="text-white font-semibold mb-4">Company</h3>
+              <ul className="space-y-2 text-sm">
+                <li>
+                  <a href="#about" className="hover:text-primary-400 transition">
+                    About
+                  </a>
+                </li>
+                <li>
+                  <a href="#privacy" className="hover:text-primary-400 transition">
+                    Privacy
+                  </a>
+                </li>
+                <li>
+                  <a href="#terms" className="hover:text-primary-400 transition">
+                    Terms
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="text-white font-semibold mb-4">Connect</h3>
+              <ul className="space-y-2 text-sm">
+                <li>
+                  <Link to="/login" className="hover:text-primary-400 transition">
+                    Sign In
+                  </Link>
+                </li>
+                <li>
+                  <Link to="/register" className="hover:text-primary-400 transition">
+                    Register
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="border-t border-gray-800 mt-12 pt-8 text-center text-sm text-gray-400">
+            <p>&copy; {new Date().getFullYear()} spotlight.cam. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default HomePage;