312 lines
15 KiB
TypeScript
312 lines
15 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
Menu, X, Gamepad2, Trophy, Newspaper, Users,
|
|
Youtube, Twitter, Twitch, MessageSquare, Mail,
|
|
ChevronRight, Star, TrendingUp, Zap
|
|
} from 'lucide-react';
|
|
|
|
function App() {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const [email, setEmail] = useState('');
|
|
|
|
const handleNewsletterSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
console.log('Newsletter signup:', email);
|
|
setEmail('');
|
|
alert('Thanks for subscribing! 🎮');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-gray-900 via-black to-gray-900 text-white">
|
|
{/* Navigation */}
|
|
<nav className="fixed top-0 w-full bg-black/80 backdrop-blur-md z-50 border-b border-cyan-500/20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16">
|
|
<div className="flex items-center space-x-2">
|
|
<Zap className="w-8 h-8 text-cyan-400" />
|
|
<span className="text-2xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
|
NEXUS
|
|
</span>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
<a href="#games" className="hover:text-cyan-400 transition-colors flex items-center space-x-1">
|
|
<Gamepad2 className="w-4 h-4" />
|
|
<span>Games</span>
|
|
</a>
|
|
<a href="#reviews" className="hover:text-cyan-400 transition-colors flex items-center space-x-1">
|
|
<Trophy className="w-4 h-4" />
|
|
<span>Reviews</span>
|
|
</a>
|
|
<a href="#news" className="hover:text-cyan-400 transition-colors flex items-center space-x-1">
|
|
<Newspaper className="w-4 h-4" />
|
|
<span>News</span>
|
|
</a>
|
|
<a href="#community" className="hover:text-cyan-400 transition-colors flex items-center space-x-1">
|
|
<Users className="w-4 h-4" />
|
|
<span>Community</span>
|
|
</a>
|
|
<button className="bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 px-6 py-2 rounded-full font-semibold transition-all transform hover:scale-105">
|
|
Join Now
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<button
|
|
className="md:hidden"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
{isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden bg-black border-t border-cyan-500/20">
|
|
<div className="px-4 pt-2 pb-4 space-y-3">
|
|
<a href="#games" className="block py-2 hover:text-cyan-400 transition-colors">Games</a>
|
|
<a href="#reviews" className="block py-2 hover:text-cyan-400 transition-colors">Reviews</a>
|
|
<a href="#news" className="block py-2 hover:text-cyan-400 transition-colors">News</a>
|
|
<a href="#community" className="block py-2 hover:text-cyan-400 transition-colors">Community</a>
|
|
<button className="w-full bg-gradient-to-r from-cyan-500 to-blue-500 px-6 py-2 rounded-full font-semibold">
|
|
Join Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative pt-32 pb-20 px-4 overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 to-blue-500/10 blur-3xl"></div>
|
|
<div className="max-w-7xl mx-auto relative z-10">
|
|
<div className="text-center space-y-8">
|
|
<div className="inline-block px-4 py-2 bg-cyan-500/10 border border-cyan-500/30 rounded-full text-cyan-400 text-sm font-semibold mb-4">
|
|
<span className="inline-block w-2 h-2 bg-cyan-400 rounded-full mr-2 animate-pulse"></span>
|
|
LIVE NOW: Breaking Gaming News
|
|
</div>
|
|
<h1 className="text-5xl md:text-7xl font-bold leading-tight">
|
|
<span className="bg-gradient-to-r from-cyan-400 via-blue-500 to-cyan-400 bg-clip-text text-transparent animate-gradient">
|
|
Level Up Your
|
|
</span>
|
|
<br />
|
|
<span className="text-white">Gaming Experience</span>
|
|
</h1>
|
|
<p className="text-xl md:text-2xl text-gray-400 max-w-3xl mx-auto">
|
|
Join the ultimate hub for gamers, streamers, and geek culture enthusiasts.
|
|
Get exclusive reviews, breaking news, and connect with a community of 500K+ players.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<button className="group bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 px-8 py-4 rounded-full font-bold text-lg transition-all transform hover:scale-105 flex items-center space-x-2">
|
|
<span>Explore Content</span>
|
|
<ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</button>
|
|
<button className="px-8 py-4 rounded-full font-bold text-lg border-2 border-cyan-500 hover:bg-cyan-500/10 transition-all flex items-center space-x-2">
|
|
<Youtube className="w-5 h-5" />
|
|
<span>Watch Streams</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Content Grid */}
|
|
<section id="games" className="py-20 px-4">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex items-center justify-between mb-12">
|
|
<h2 className="text-4xl font-bold">
|
|
<span className="text-cyan-400">Featured</span> Games
|
|
</h2>
|
|
<button className="text-cyan-400 hover:text-cyan-300 flex items-center space-x-1">
|
|
<span>View All</span>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{[
|
|
{ title: "Cyberpunk Warriors", genre: "RPG", rating: 9.2, trending: true },
|
|
{ title: "Galactic Frontiers", genre: "Strategy", rating: 8.8, trending: true },
|
|
{ title: "Shadow Realm", genre: "Action", rating: 9.5, trending: false },
|
|
].map((game, index) => (
|
|
<div key={index} className="group relative bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden border border-cyan-500/20 hover:border-cyan-500/50 transition-all transform hover:scale-105">
|
|
<div className="aspect-video bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center">
|
|
<Gamepad2 className="w-16 h-16 text-cyan-400 opacity-50" />
|
|
</div>
|
|
{game.trending && (
|
|
<div className="absolute top-4 right-4 bg-gradient-to-r from-cyan-500 to-blue-500 px-3 py-1 rounded-full text-xs font-bold flex items-center space-x-1">
|
|
<TrendingUp className="w-3 h-3" />
|
|
<span>TRENDING</span>
|
|
</div>
|
|
)}
|
|
<div className="p-6">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-xs text-cyan-400 font-semibold">{game.genre}</span>
|
|
<div className="flex items-center space-x-1">
|
|
<Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
|
|
<span className="text-sm font-bold">{game.rating}</span>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-2">{game.title}</h3>
|
|
<button className="w-full bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-400 py-2 rounded-lg font-semibold transition-colors">
|
|
Read Review
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Latest Reviews Section */}
|
|
<section id="reviews" className="py-20 px-4 bg-black/50">
|
|
<div className="max-w-7xl mx-auto">
|
|
<h2 className="text-4xl font-bold mb-12 text-center">
|
|
<span className="text-cyan-400">Expert</span> Reviews
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{[
|
|
{ title: "The Future of VR Gaming is Here", category: "VR Tech", score: 9 },
|
|
{ title: "Top 10 Indie Games You Can't Miss", category: "Indie", score: 8.5 },
|
|
].map((review, index) => (
|
|
<div key={index} className="bg-gradient-to-r from-gray-800 to-gray-900 rounded-2xl p-8 border border-cyan-500/20 hover:border-cyan-500/50 transition-all">
|
|
<div className="flex items-start justify-between mb-4">
|
|
<span className="text-xs text-cyan-400 font-semibold uppercase">{review.category}</span>
|
|
<div className="bg-gradient-to-r from-cyan-500 to-blue-500 px-3 py-1 rounded-full text-sm font-bold">
|
|
{review.score}/10
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-bold mb-4">{review.title}</h3>
|
|
<p className="text-gray-400 mb-6">
|
|
Dive deep into our comprehensive analysis and expert opinions on the latest trends in gaming.
|
|
</p>
|
|
<button className="text-cyan-400 hover:text-cyan-300 flex items-center space-x-2 font-semibold">
|
|
<span>Read Full Review</span>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* News Section */}
|
|
<section id="news" className="py-20 px-4">
|
|
<div className="max-w-7xl mx-auto">
|
|
<h2 className="text-4xl font-bold mb-12 text-center">
|
|
<span className="text-cyan-400">Breaking</span> News
|
|
</h2>
|
|
<div className="space-y-4">
|
|
{[
|
|
"Major Tournament Announces $5M Prize Pool",
|
|
"New Console Generation: What to Expect",
|
|
"Exclusive Interview with Top Game Developer",
|
|
].map((headline, index) => (
|
|
<div key={index} className="bg-gradient-to-r from-gray-800 to-gray-900 rounded-xl p-6 border border-cyan-500/20 hover:border-cyan-500/50 transition-all cursor-pointer group">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<Newspaper className="w-6 h-6 text-cyan-400" />
|
|
<span className="text-lg font-semibold group-hover:text-cyan-400 transition-colors">{headline}</span>
|
|
</div>
|
|
<ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-cyan-400 group-hover:translate-x-1 transition-all" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Community Section */}
|
|
<section id="community" className="py-20 px-4 bg-black/50">
|
|
<div className="max-w-7xl mx-auto text-center">
|
|
<h2 className="text-4xl font-bold mb-6">
|
|
<span className="text-cyan-400">Join Our</span> Community
|
|
</h2>
|
|
<p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">
|
|
Connect with 500,000+ gamers, share your gameplay, and participate in exclusive events.
|
|
</p>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
|
|
{[
|
|
{ icon: Users, label: "500K+ Members", value: "Active Community" },
|
|
{ icon: MessageSquare, label: "24/7 Discussion", value: "Live Forums" },
|
|
{ icon: Trophy, label: "Weekly Events", value: "Win Prizes" },
|
|
{ icon: Youtube, label: "Daily Streams", value: "Watch Live" },
|
|
].map((stat, index) => (
|
|
<div key={index} className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 border border-cyan-500/20">
|
|
<stat.icon className="w-8 h-8 text-cyan-400 mx-auto mb-3" />
|
|
<div className="text-2xl font-bold mb-1">{stat.label}</div>
|
|
<div className="text-sm text-gray-400">{stat.value}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Newsletter Section */}
|
|
<section className="py-20 px-4">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="bg-gradient-to-r from-cyan-500/10 to-blue-500/10 rounded-2xl p-12 border border-cyan-500/30 text-center">
|
|
<Mail className="w-12 h-12 text-cyan-400 mx-auto mb-6" />
|
|
<h2 className="text-3xl font-bold mb-4">
|
|
Never Miss an <span className="text-cyan-400">Update</span>
|
|
</h2>
|
|
<p className="text-gray-400 mb-8">
|
|
Get the latest gaming news, exclusive reviews, and special offers delivered straight to your inbox.
|
|
</p>
|
|
<form onSubmit={handleNewsletterSubmit} className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="Enter your email"
|
|
required
|
|
className="flex-1 px-6 py-4 rounded-full bg-gray-900 border border-cyan-500/30 focus:border-cyan-500 focus:outline-none"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 px-8 py-4 rounded-full font-bold transition-all transform hover:scale-105"
|
|
>
|
|
Subscribe
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-black border-t border-cyan-500/20 py-12 px-4">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="flex flex-col md:flex-row items-center justify-between space-y-6 md:space-y-0">
|
|
<div className="flex items-center space-x-2">
|
|
<Zap className="w-8 h-8 text-cyan-400" />
|
|
<span className="text-2xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
|
NEXUS
|
|
</span>
|
|
</div>
|
|
<div className="flex space-x-6">
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
|
<Twitter className="w-6 h-6" />
|
|
</a>
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
|
<Youtube className="w-6 h-6" />
|
|
</a>
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
|
<Twitch className="w-6 h-6" />
|
|
</a>
|
|
<a href="#" className="hover:text-cyan-400 transition-colors">
|
|
<MessageSquare className="w-6 h-6" />
|
|
</a>
|
|
</div>
|
|
<div className="text-gray-400 text-sm">
|
|
© 2024 NEXUS. All rights reserved.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|