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)
This commit is contained in:
Radosław Gierwiało
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user