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
This commit is contained in:
Radosław Gierwiało
306
frontend/src/pages/HomePage.jsx
Normal file
306
frontend/src/pages/HomePage.jsx
Normal file
@@ -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>© {new Date().getFullYear()} spotlight.cam. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
Reference in New Issue
Block a user