From 25042d0fecf0aed993ba5adb5d610d4a10b37905 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rados=C5=82aw=20Gierwia=C5=82o?= <github@radziel.com>
Date: Fri, 5 Dec 2025 17:21:55 +0100
Subject: [PATCH] feat(home): adapt homepage for authenticated users

Changes for logged-in users:
- Top navigation: Show "Dashboard" and "Logout" buttons instead of "Sign In" and "Get Started"
- Hero CTA: Change main button to "Go to Dashboard" instead of "Start Collaborating"
- Hide bottom CTA section (registration prompt) for authenticated users
- Footer Account section: Show "Dashboard" and "Logout" instead of "Sign In" and "Register"

Other improvements:
- Removed "Explore Events" button from hero section
- Cleaned up footer: removed empty placeholder links (Features, How It Works, About, Privacy, Terms)
- Added "Support" section in footer with "Contact Us" link to /contact
- Simplified footer to 3 columns: Product (Events), Support (Contact Us), Account (dynamic based on auth)
---
 frontend/src/pages/HomePage.jsx | 181 ++++++++++++++++++--------------
 1 file changed, 102 insertions(+), 79 deletions(-)

diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index 0294610..c85128c 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -1,7 +1,16 @@
-import { Link } from 'react-router-dom';
-import { Video, Users, Zap, Shield, Camera, MessageCircle, Star } from 'lucide-react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Video, Users, Zap, Shield, Camera, MessageCircle, Star, LogOut, LayoutDashboard } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
 
 const HomePage = () => {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
   return (
     <div className="min-h-screen bg-white">
       {/* Hero Section */}
@@ -13,18 +22,39 @@ const HomePage = () => {
               <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>
+              {user ? (
+                <>
+                  <Link
+                    to="/dashboard"
+                    className="flex items-center space-x-2 px-4 py-2 text-white hover:text-primary-100 transition"
+                  >
+                    <LayoutDashboard className="w-4 h-4" />
+                    <span>Dashboard</span>
+                  </Link>
+                  <button
+                    onClick={handleLogout}
+                    className="flex items-center space-x-2 px-6 py-2 bg-white text-primary-600 rounded-lg font-medium hover:bg-primary-50 transition"
+                  >
+                    <LogOut className="w-4 h-4" />
+                    <span>Logout</span>
+                  </button>
+                </>
+              ) : (
+                <>
+                  <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>
@@ -36,18 +66,12 @@ const HomePage = () => {
           <p className="text-xl md:text-2xl text-primary-100 mb-10 max-w-3xl mx-auto">
             Connect with competitors, record each other's rounds, and swap videos in seconds.
           </p>
-          <div className="flex flex-col sm:flex-row justify-center gap-4">
+          <div className="flex justify-center">
             <Link
-              to="/register"
+              to={user ? "/dashboard" : "/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
+              {user ? "Go to Dashboard" : "Start Collaborating"}
             </Link>
           </div>
         </div>
@@ -203,22 +227,24 @@ const HomePage = () => {
       </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>
+      {!user && (
+        <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">
@@ -242,53 +268,50 @@ const HomePage = () => {
                     Events
                   </Link>
                 </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="text-white font-semibold mb-4">Support</h3>
+              <ul className="space-y-2 text-sm">
                 <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>
+                  <Link to="/contact" className="hover:text-primary-400 transition">
+                    Contact Us
+                  </Link>
                 </li>
               </ul>
             </div>
 
             <div>
-              <h3 className="text-white font-semibold mb-4">Company</h3>
+              <h3 className="text-white font-semibold mb-4">Account</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>
+                {user ? (
+                  <>
+                    <li>
+                      <Link to="/dashboard" className="hover:text-primary-400 transition">
+                        Dashboard
+                      </Link>
+                    </li>
+                    <li>
+                      <button onClick={handleLogout} className="hover:text-primary-400 transition text-left">
+                        Logout
+                      </button>
+                    </li>
+                  </>
+                ) : (
+                  <>
+                    <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>