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

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

@@ -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,6 +22,25 @@ const HomePage = () => {
<span className="text-2xl font-bold text-white">spotlight.cam</span>
</div>
<div className="flex space-x-4">
{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"
@@ -25,6 +53,8 @@ const HomePage = () => {
>
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,6 +227,7 @@ const HomePage = () => {
</section>
{/* CTA 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">
@@ -219,6 +244,7 @@ const HomePage = () => {
</Link>
</div>
</section>
)}
{/* Footer */}
<footer className="bg-gray-900 text-gray-300 py-12">
@@ -242,43 +268,38 @@ 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">
{user ? (
<>
<li>
<a href="#about" className="hover:text-primary-400 transition">
About
</a>
<Link to="/dashboard" className="hover:text-primary-400 transition">
Dashboard
</Link>
</li>
<li>
<a href="#privacy" className="hover:text-primary-400 transition">
Privacy
</a>
<button onClick={handleLogout} className="hover:text-primary-400 transition text-left">
Logout
</button>
</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
@@ -289,6 +310,8 @@ const HomePage = () => {
Register
</Link>
</li>
</>
)}
</ul>
</div>
</div>