Add src/components/HomePage.tsx

src/components/HomePage.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Play, Users, Trophy, Star } from 'lucide-react';
+
+const HomePage = () => {
+  return (
+    <div className="min-h-screen bg-gray-900 text-white">
+      {/* Header */}
+      <header className="bg-gray-800 py-4">
+        <div className="container mx-auto px-4 flex justify-between items-center">
+          <div className="text-2xl font-bold text-blue-400">GameHub</div>
+          <nav className="hidden md:flex space-x-6">
+            <a href="#" className="hover:text-blue-400 transition-colors">Games</a>
+            <a href="#" className="hover:text-blue-400 transition-colors">Community</a>
+            <a href="#" className="hover:text-blue-400 transition-colors">Tournaments</a>
+            <a href="#" className="hover:text-blue-400 transition-colors">Profile</a>
+          </nav>
+          <button className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition-colors">
+            Sign In
+          </button>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <section className="py-20 px-4">
+        <div className="container mx-auto text-center">
+          <h1 className="text-6xl font-bold mb-6 bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent">
+            Welcome to GameHub
+          </h1>
+          <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
+            The ultimate gaming platform where players connect, compete, and conquer together.
+          </p>
+          <button className="bg-blue-600 hover:bg-blue-700 px-8 py-4 rounded-lg text-lg font-semibold transition-colors inline-flex items-center gap-2">
+            <Play className="w-5 h-5" />
+            Start Playing
+          </button>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="py-16 px-4 bg-gray-800">
+        <div className="container mx-auto">
+          <h2 className="text-4xl font-bold text-center mb-12">Why Choose GameHub?</h2>
+          <div className="grid md:grid-cols-3 gap-8">
+            <div className="bg-gray-700 p-6 rounded-lg text-center">
+              <Users className="w-12 h-12 text-blue-400 mx-auto mb-4" />
+              <h3 className="text-xl font-semibold mb-2">Global Community</h3>
+              <p className="text-gray-300">Connect with millions of players worldwide</p>
+            </div>
+            <div className="bg-gray-700 p-6 rounded-lg text-center">
+              <Trophy className="w-12 h-12 text-yellow-400 mx-auto mb-4" />
+              <h3 className="text-xl font-semibold mb-2">Tournaments</h3>
+              <p className="text-gray-300">Compete in epic tournaments and win prizes</p>
+            </div>
+            <div className="bg-gray-700 p-6 rounded-lg text-center">
+              <Star className="w-12 h-12 text-purple-400 mx-auto mb-4" />
+              <h3 className="text-xl font-semibold mb-2">Premium Experience</h3>
+              <p className="text-gray-300">Enjoy ad-free gaming with exclusive content</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 py-8 px-4">
+        <div className="container mx-auto text-center text-gray-400">
+          <p>&copy; 2024 GameHub. All rights reserved.</p>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default HomePage;