feat: set homepage

docs/stories/1.1.story.md

@@ -61,19 +61,19 @@ Draft
   - [x] Add lint and format scripts to `package.json`
   - [x] Verify linting works on project files
 
-- [ ] Task 6: Setup Gitea Actions workflow (AC: 6)
+- [x] Task 6: Setup Gitea Actions workflow (AC: 6)
   - [x] Create `.gitea/workflows/ci.yml`
   - [x] Configure test job: lint, typecheck, test
   - [x] Configure build job: Docker image build and push
   - [x] Configure deploy jobs (staging/production) with manual triggers
-  - [ ] Add caching for pnpm store
+  - [x] Add caching for pnpm store
 
 - [ ] Task 7: Create README documentation (AC: 8)
-  - [ ] Document project overview
-  - [ ] Document prerequisites (Node 20, pnpm, Docker)
-  - [ ] Document local development setup steps
-  - [ ] Document available npm scripts
-  - [ ] Document environment variables
+  - [x] Document project overview
+  - [x] Document prerequisites (Node 20, pnpm, Docker)
+  - [x] Document local development setup steps
+  - [x] Document available npm scripts
+  - [x] Document environment variables
 
 - [ ] Task 8: Create home page (AC: 9)
   - [ ] Create `src/routes/index.tsx` as home page

src/routes/index.tsx

@@ -1,37 +1,79 @@
 import { createFileRoute } from '@tanstack/react-router';
-import '../App.css';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Users, Swords, User, Server } from 'lucide-react';
 
-export const Route = createFileRoute('/')({ component: App });
+export const Route = createFileRoute('/')({ component: HomePage });
 
-function App() {
+function HomePage() {
 	return (
-		<div className="App">
-			<header className="App-header">
-				<img
-					src="/tanstack-circle-logo.png"
-					className="App-logo"
-					alt="TanStack Logo"
-				/>
-				<p>
-					Edit <code>src/routes/index.tsx</code> and save to reload.
+		<div className="min-h-screen bg-background">
+			<div className="container mx-auto px-4 py-16">
+				<header className="text-center mb-16">
+					<h1 className="text-5xl font-bold text-foreground mb-4">Dofus Manager</h1>
+					<p className="text-xl text-muted-foreground">
+						Gérez vos personnages, comptes et équipes Dofus
 					</p>
-				<a
-					className="App-link"
-					href="https://reactjs.org"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					Learn React
-				</a>
-				<a
-					className="App-link"
-					href="https://tanstack.com"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					Learn TanStack
-				</a>
 				</header>
+
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
+					<Card className="hover:shadow-lg transition-shadow">
+						<CardHeader>
+							<User className="w-10 h-10 text-primary mb-2" />
+							<CardTitle>Personnages</CardTitle>
+							<CardDescription>Gérez tous vos personnages</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<Button variant="outline" className="w-full">
+								Voir les personnages
+							</Button>
+						</CardContent>
+					</Card>
+
+					<Card className="hover:shadow-lg transition-shadow">
+						<CardHeader>
+							<Users className="w-10 h-10 text-primary mb-2" />
+							<CardTitle>Comptes</CardTitle>
+							<CardDescription>Organisez vos comptes Dofus</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<Button variant="outline" className="w-full">
+								Voir les comptes
+							</Button>
+						</CardContent>
+					</Card>
+
+					<Card className="hover:shadow-lg transition-shadow">
+						<CardHeader>
+							<Swords className="w-10 h-10 text-primary mb-2" />
+							<CardTitle>Équipes</CardTitle>
+							<CardDescription>Composez vos équipes</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<Button variant="outline" className="w-full">
+								Voir les équipes
+							</Button>
+						</CardContent>
+					</Card>
+
+					<Card className="hover:shadow-lg transition-shadow">
+						<CardHeader>
+							<Server className="w-10 h-10 text-primary mb-2" />
+							<CardTitle>Serveurs</CardTitle>
+							<CardDescription>Vos serveurs de jeu</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<Button variant="outline" className="w-full">
+								Voir les serveurs
+							</Button>
+						</CardContent>
+					</Card>
+				</div>
+
+				<footer className="text-center text-muted-foreground">
+					<p>Dofus Manager - Gérez votre aventure</p>
+				</footer>
+			</div>
 		</div>
 	);
 }