radziel/spotlightcam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(home): adapt homepage for authenticated users

Browse Source 
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)
This commit is contained in:
Radosław Gierwiało
2025-12-05 17:21:55 +01:00
parent 34f18b3b50
commit 25042d0fec
1 changed files with 102 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
frontend/src/pages/HomePage.jsx
View File

@@ -1,7 +1,16 @@
import { Link } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Video, Users, Zap, Shield, Camera, MessageCircle, Star } from 'lucide-react'; import { Video, Users, Zap, Shield, Camera, MessageCircle, Star, LogOut, LayoutDashboard } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
const HomePage = () => { const HomePage = () => {
const { user, logout } = useAuth();
const navigate = useNavigate();
const handleLogout = () => {
logout();
navigate('/login');
};
return ( return (
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
{/* Hero Section */} {/* Hero Section */}
@@ -13,18 +22,39 @@ const HomePage = () => {
<span className="text-2xl font-bold text-white">spotlight.cam</span> <span className="text-2xl font-bold text-white">spotlight.cam</span>
</div> </div>
<div className="flex space-x-4"> <div className="flex space-x-4">
<Link {user ? (
to="/login" <>
className="px-4 py-2 text-white hover:text-primary-100 transition" <Link
> to="/dashboard"
Sign in className="flex items-center space-x-2 px-4 py-2 text-white hover:text-primary-100 transition"
</Link> >
<Link <LayoutDashboard className="w-4 h-4" />
to="/register" <span>Dashboard</span>
className="px-6 py-2 bg-white text-primary-600 rounded-lg font-medium hover:bg-primary-50 transition" </Link>
> <button
Get Started onClick={handleLogout}
</Link> 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>
</div> </div>
</nav> </nav>
@@ -36,18 +66,12 @@ const HomePage = () => {
<p className="text-xl md:text-2xl text-primary-100 mb-10 max-w-3xl mx-auto"> <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. Connect with competitors, record each other's rounds, and swap videos in seconds.
</p> </p>
<div className="flex flex-col sm:flex-row justify-center gap-4"> <div className="flex justify-center">
<Link <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" 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 {user ? "Go to Dashboard" : "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> </Link>
</div> </div>
</div> </div>
@@ -203,22 +227,24 @@ const HomePage = () => {
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className="py-20 bg-gradient-to-br from-primary-600 to-primary-800"> {!user && (
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <section className="py-20 bg-gradient-to-br from-primary-600 to-primary-800">
<h2 className="text-4xl font-bold text-white mb-6"> <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
Ready to elevate your competition experience? <h2 className="text-4xl font-bold text-white mb-6">
</h2> Ready to elevate your competition experience?
<p className="text-xl text-primary-100 mb-10"> </h2>
Join dancers from around the world who are already collaborating on spotlight.cam <p className="text-xl text-primary-100 mb-10">
</p> Join dancers from around the world who are already collaborating on spotlight.cam
<Link </p>
to="/register" <Link
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" 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> Create Your Free Account
</div> </Link>
</section> </div>
</section>
)}
{/* Footer */} {/* Footer */}
<footer className="bg-gray-900 text-gray-300 py-12"> <footer className="bg-gray-900 text-gray-300 py-12">
@@ -242,53 +268,50 @@ const HomePage = () => {
Events Events
</Link> </Link>
</li> </li>
</ul>
</div>
<div>
<h3 className="text-white font-semibold mb-4">Support</h3>
<ul className="space-y-2 text-sm">
<li> <li>
<a href="#features" className="hover:text-primary-400 transition"> <Link to="/contact" className="hover:text-primary-400 transition">
Features Contact Us
</a> </Link>
</li>
<li>
<a href="#how-it-works" className="hover:text-primary-400 transition">
How It Works
</a>
</li> </li>
</ul> </ul>
</div> </div>
<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"> <ul className="space-y-2 text-sm">
<li> {user ? (
<a href="#about" className="hover:text-primary-400 transition"> <>
About <li>
</a> <Link to="/dashboard" className="hover:text-primary-400 transition">
</li> Dashboard
<li> </Link>
<a href="#privacy" className="hover:text-primary-400 transition"> </li>
Privacy <li>
</a> <button onClick={handleLogout} className="hover:text-primary-400 transition text-left">
</li> Logout
<li> </button>
<a href="#terms" className="hover:text-primary-400 transition"> </li>
Terms </>
</a> ) : (
</li> <>
</ul> <li>
</div> <Link to="/login" className="hover:text-primary-400 transition">
Sign In
<div> </Link>
<h3 className="text-white font-semibold mb-4">Connect</h3> </li>
<ul className="space-y-2 text-sm"> <li>
<li> <Link to="/register" className="hover:text-primary-400 transition">
<Link to="/login" className="hover:text-primary-400 transition"> Register
Sign In </Link>
</Link> </li>
</li> </>
<li> )}
<Link to="/register" className="hover:text-primary-400 transition">
Register
</Link>
</li>
</ul> </ul>
</div> </div>
</div> </div>