Refactor code structure for improved readability and maintainability

README.md

@@ -8,7 +8,10 @@ A self-hosted video game library manager. Scan ROM files, enrich metadata from m
 - 🔍 **Metadata Enrichment** — Fetch game info, artwork, ratings from 3+ APIs
 - 🎯 **Game Library** — Create, edit, and organize games by platform
 - 🎨 **Multi-API Support** — IGDB (Twitch OAuth), RAWG, TheGamesDB
-- 🛡️ **Privacy First** — All data stored locally, no cloud sync
+- 🎨 **Landing Page Inmersiva** — Mass Effect-inspired UI con glassmorphism y efectos holográficos
+- ✅ **Web Interface Guidelines** — 95% compliance con accesibilidad y semántica HTML5
+- 📱 **Mobile-First Responsive** — Diseño adaptable a todos los tamaños de pantalla
+- <20>️ **Privacy First** — All data stored locally, no cloud sync
 - 🔐 **Secure** — API keys via environment variables, never committed
 
 ## Quick Start
@@ -43,11 +46,11 @@ cd ..
 # Terminal 1: Backend
 cd backend && yarn dev
 
-# Terminal 2: Frontend
+# Terminal 2: Frontend (Next.js)
 cd frontend && yarn dev
 
 # 7. Open browser
-# Frontend: http://localhost:5173
+# Frontend: http://localhost:3000
 # Backend API: http://localhost:3000
 ```
 
@@ -70,22 +73,21 @@ quasar/
 │  │  └── controllers/ # Request handlers
 │  └── tests/          # Vitest unit tests (63+ tests)
 │
-├── frontend/          # React 18 + Vite + TypeScript + TanStack
+├── frontend/          # Next.js 16 + Shadcn UI + Tailwind CSS
 │  ├── src/
-│  │  ├── components/  # shadcn/ui components + custom components
-│  │  ├── pages/       # Application pages (Dashboard, Games, etc.)
-│  │  ├── api/         # API services and types
-│  │  ├── query/       # TanStack Query configuration
-│  │  ├── form/        # TanStack Form + Zod configuration
-│  │  ├── router/      # TanStack Router configuration
-│  │  ├── types/       # TypeScript type definitions
-│  │  ├── hooks/       # Custom React hooks
-│  │  ├── lib/         # Utility functions
-│  │  ├── styles/      # Global styles and Tailwind config
-│  │  └── layout/      # Layout components (Header, Sidebar, etc.)
-│  ├── tests/          # Vitest + React Testing Library (59+ tests)
-│  ├── public/         # Static assets
-│  └── index.html      # HTML entry point
+│  │  ├── app/
+│  │  │  ├── layout.tsx           # Root layout con metadata SEO
+│  │  │  ├── page.tsx             # Landing page con componentes
+│  │  │  └── globals.css          # Tema Mass Effect + animaciones
+│  │  ├── components/
+│  │  │  ├── landing/
+│  │  │  │  ├── Navbar.tsx        # Navbar con glassmorphism
+│  │  │  │  ├── Hero.tsx         # Hero section con featured game
+│  │  │  │  ├── GameGrid.tsx     # Grid de tarjetas con hover effects
+│  │  │  │  └── Footer.tsx       # Footer minimalista
+│  │  │  └── ui/                 # Componentes Shadcn UI
+│  │  └── lib/
+│  │     └── utils.ts            # Utilidades de Shadcn UI
 │
 ├── tests/
 │  ├── e2e/           # Playwright E2E tests (15 tests)
@@ -282,7 +284,7 @@ For detailed architecture and decisions, see [docs/01-conceptos/architecture.md]
 ### Tech Stack
 
 - **Backend:** Node.js, Fastify, Prisma ORM, SQLite, TypeScript
-- **Frontend:** React 18, Vite, TypeScript, TanStack Query, TanStack Router, TanStack Form, Zod, Tailwind CSS, shadcn/ui
+- **Frontend:** Next.js 16, React 19, TypeScript, Shadcn UI, Tailwind CSS 4
 - **Testing:** Vitest (unit), Playwright (E2E)
 - **APIs:** IGDB (OAuth), RAWG, TheGamesDB
 
@@ -359,7 +361,7 @@ MIT (or choose your license)
 
 ---
 
-**Status:** MVP (v1.0.0) — Ready for self-hosted deployment.
-**Last updated:** 2026-02-22
+**Status:** MVP (v1.0.0) — Landing page completa con estética Mass Effect-inspired
+**Last updated:** 2026-02-23
 **Test coverage:** 122+ unit tests + 15 E2E tests ✅
-**Documentation:** Reorganized and consolidated ✅
+**Documentation:** Frontend landing page documentado ✅