initial config

frontend/src/App.tsx

@@ -0,0 +1,31 @@
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
+import { ArcheryTarget } from 'lucide-react'
+import Home from './pages/Home'
+
+function App() {
+  return (
+    <Router>
+      <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800">
+        <nav className="bg-slate-900 border-b border-slate-700">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex justify-between items-center h-16">
+              <Link to="/" className="flex items-center space-x-2">
+                <ArcheryTarget className="text-amber-400" size={32} />
+                <span className="text-white font-bold text-xl">Archery Scoring</span>
+              </Link>
+              <div className="space-x-4">
+                <Link to="/" className="text-gray-300 hover:text-white">Home</Link>
+              </div>
+            </div>
+          </div>
+        </nav>
+
+        <Routes>
+          <Route path="/" element={<Home />} />
+        </Routes>
+      </div>
+    </Router>
+  )
+}
+
+export default App

frontend/src/index.css

@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  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;
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/src/pages/Home.tsx

@@ -0,0 +1,22 @@
+export default function Home() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+      <div className="text-center">
+        <h1 className="text-5xl font-bold text-white mb-6">
+          Welcome to Archery Scoring
+        </h1>
+        <p className="text-xl text-gray-300 mb-8">
+          Track tournament scores with precision and ease
+        </p>
+        <div className="space-x-4">
+          <button className="bg-amber-500 hover:bg-amber-600 text-white px-8 py-3 rounded-lg font-semibold">
+            Create Tournament
+          </button>
+          <button className="bg-slate-700 hover:bg-slate-600 text-white px-8 py-3 rounded-lg font-semibold">
+            Join Tournament
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}