Add tsconfig.json

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "gamehub",  "version": "0.1.0",  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.4",    "@testing-library/react": "^13.3.0",    "@testing-library/user-event": "^13.5.0",    "@types/jest": "^27.5.2",    "@types/node": "^16.18.23",    "@types/react": "^18.0.37",    "@types/react-dom": "^18.0.11",    "lucide-react": "^0.263.1",    "react": "^18.2.0",    "react-dom": "^18.2.0",    "react-scripts": "5.0.1",    "typescript": "^4.9.5",    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",    "build": "react-scripts build",    "test": "react-scripts test",    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",      "not dead",      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",      "last 1 firefox version",      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.37",    "@types/react-dom": "^18.0.11",    "autoprefixer": "^10.4.14",    "postcss": "^8.4.24",    "tailwindcss": "^3.3.2"
+  }
+}

src/App.css

@@ -0,0 +1,3 @@
+.App {
+  text-align: center;
+}

src/App.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import HomePage from './components/HomePage';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <HomePage />
+    </div>
+  );
+}
+
+export default App;

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;

src/index.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+reportWebVitals();

src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",    "lib": [
+      "dom",      "dom.iterable",      "es6"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",    "moduleResolution": "node",    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}