feat: update README.md with enhanced project details, features, and structure

Co-authored-by: Copilot <copilot@github.com>

README.md

@@ -1,76 +1,215 @@
-# cimaprogetti - Sito Aziendale
+# Cima Progetti - Sito Aziendale
 
-Sito web di Cima Progetti realizzato con **Svelte** e **Vite**.
+Sito web moderno e responsivo sviluppato con **Svelte + Vite** per presentare servizi, metodologia e contatti aziendali.
 
-## Struttura del Progetto
+## ✨ Funzionalità principali
 
-```
+- 🌓 **Tema light/dark** con persistenza locale
-src/
+- 📱 **Design completamente responsivo**
-├── components/      # Componenti Svelte riutilizzabili
+- ⬆️ **Navbar collapsibile** con hide/show al scroll
-│   ├── Header.svelte
+- 🎨 **Sistema di componenti riusabili**
-│   ├── Hero.svelte
+- 🚀 **Routing client-side** con pagine di errore dedicate
-│   ├── Services.svelte
+- ♿ **Accessibilità** e buone pratiche web
-│   └── Footer.svelte
-├── App.svelte       # Componente principale
-└── main.js          # Entry point dell'applicazione
-```
 
-## Componenti Disponibili
+## 🛠️ Requisiti
 
-- **Header**: Barra di navigazione sticky con menu
+- `Node.js` 18+ (consigliato LTS)
-- **Hero**: Sezione hero con call-to-action
+- `npm` 9+
-- **Services**: Griglia con i servizi offerti
-- **Footer**: Footer con informazioni aziendali e link
 
-## Setup Iniziale
+## 🚀 Avvio rapido
-
-### Installazione
 
 ```bash
 npm install
-```
-
-### Avvio dello sviluppo
-
-```bash
 npm run dev
 ```
 
-Il progetto sarà disponibile su `http://localhost:5173`
+Applicazione disponibile su `http://localhost:5173`.
 
-### Build per la produzione
+## 📝 Script disponibili
+
+- `npm run dev` - avvia il server di sviluppo con hot reload
+- `npm run build` - genera la build di produzione
+- `npm run preview` - avvia un'anteprima della build
+
+## 📁 Struttura del progetto
+
+```
+src/
+├── App.svelte           # Componente root con routing
+├── main.js              # Punto di ingresso
+├── styles/
+│   ├── global.css       # Stili globali e variabili tema
+│   ├── App.css          # Layout principale app
+│   └── error-pages.css  # Stili pagine errore
+├── components/
+│   ├── Header/          # Navbar con scroll hide/show
+│   ├── Hero/            # Sezione hero principale
+│   ├── Services/        # Griglia servizi
+│   ├── Footer/          # Footer con info aziendali
+│   ├── Button/          # Componente button riusabile
+│   └── ThemeToggle/     # Toggle tema light/dark
+└── pages/
+    ├── Contacts.svelte      # Pagina contatti
+    ├── 403.svelte           # Accesso negato
+    ├── 404.svelte           # Pagina non trovata
+    ├── 500.svelte           # Errore server
+    └── ErrorGeneric.svelte  # Errore generico
+```
+
+## 🗺️ Routing
+
+Il routing è gestito in `src/App.svelte` tramite `window.location.pathname`.
+
+| Route | Componente | Descrizione |
+|-------|-----------|-------------|
+| `/` | `Hero` + `Services` | Home page |
+| `/contatti`, `/contacts` | `Contacts` | Pagina contatti |
+| `/403` | `Forbidden` | Accesso negato |
+| `/500` | `ServerError` | Errore server |
+| `/errore` | `ErrorGeneric` | Errore generico |
+| `/*` | `NotFound` | Pagina non trovata (404) |
+
+## 🎨 Tema e Stili
+
+### Variabili CSS globali
+
+Tutte le variabili tema sono in `src/styles/global.css`:
+
+```css
+:root {
+    --primary-color: #1343F0;      /* Colore primario */
+    --text-color: #111827;          /* Testo light mode */
+    --surface: #ffffff;             /* Sfondo light mode */
+    --background: rgba(246, 249, 255, 0.5);
+    /* ... altre variabili */
+}
+
+:root[data-theme='dark'] {
+    --primary-color: #4983F2;
+    --text-color: #e6eef8;
+    --surface: #000;
+    --background: rgba(0, 0, 0, 0.8);
+    /* ... altre variabili */
+}
+```
+
+### Come usare i colori tema
+
+```svelte
+<div style="color: var(--text-color); background: var(--surface);">
+    Contenuto che segue il tema
+</div>
+```
+
+## 🧩 Componenti principali
+
+### Button
+
+Componente button/link riusabile con tema integrato.
+
+```svelte
+<!-- Button base -->
+<Button text="Click me" />
+
+<!-- Button con link -->
+<Button text="HOME" href="/" />
+
+<!-- Button con bordo interno -->
+<Button 
+    text="Custom Button" 
+    href="/"
+    borderWidth="2px"
+/>
+
+<!-- Stili avanzati -->
+<Button 
+    text="Premium"
+    color="var(--primary-color)"
+    textColor="var(--surface)"
+    padding="12px 32px"
+    round="12px"
+    borderWidth="1px"
+/>
+```
+
+**Prop disponibili:**
+- `text` - testo del button (default: `'Button'`)
+- `color` - colore sfondo (default: `var(--primary-color)`)
+- `textColor` - colore testo (default: `var(--surface)`)
+- `padding` - padding interno (default: `'8px 24px'`)
+- `round` - border-radius (default: `'8px'`)
+- `href` - se presente, renderizza come `<a>` tag
+- `borderWidth` - spessore bordo interno (default: `'0px'`)
+
+### Header
+
+Navbar sticky che si nascondi al scroll verso il basso e riappare al scroll verso l'alto.
+
+Modifica il contenuto in `src/components/Header/Header.svelte`.
+
+### ThemeToggle
+
+Pulsante per switchare tra tema light e dark. Il tema viene salvato in `localStorage`.
+
+## 📱 Modificare i contenuti
+
+- **Header/Navigazione:** `src/components/Header/Header.svelte`
+- **Sezione hero:** `src/components/Hero/Hero.svelte`
+- **Servizi:** `src/components/Services/Services.svelte`
+- **Footer:** `src/components/Footer/Footer.svelte`
+- **Pagine errore:** `src/pages/*.svelte`
+
+## ➕ Aggiungere nuove pagine
+
+1. Crea un nuovo file `.svelte` in `src/pages/`
+2. Aggiungi una route in `src/App.svelte` nello script:
+
+```svelte
+import MyPage from "./pages/MyPage.svelte"
+
+const getRoute = (path) => {
+    // ...
+    if (normalized === '/my-page') return 'mypage'
+    // ...
+}
+```
+
+3. Aggiungi il rendering nel template:
+
+```svelte
+{:else if currentRoute === 'mypage'}
+    <MyPage />
+```
+
+## 🚀 Build e Deploy
+
+### Build di produzione
 
 ```bash
 npm run build
 ```
 
-### Preview della build
+Genera i file ottimizzati in `dist/`.
+
+### Preview locale
 
 ```bash
 npm run preview
 ```
 
-## Customizzazione
+## 📦 Dipendenze
 
-### Modificare i Servizi
+- **Svelte** - Framework UI
+- **Vite** - Build tool e dev server
+- **@sveltejs/vite-plugin-svelte** - Plugin Svelte per Vite
 
-Modifica l'array `services` nel file [src/components/Services.svelte](src/components/Services.svelte) per aggiungere/rimuovere servizi.
+## 🎓 Tecnologie utilizzate
 
-### Cambiare i Colori
+- **Svelte 5** - UI framework reattivo
-
-I colori principali sono definiti negli `<style>` di ogni componente:
-- **Blu primario**: `#0066cc`
-- **Blu scuro**: `#0052a3`
-- **Arancione**: `#ff6b35`
-
-### Aggiungere Nuove Pagine
-
-1. Crea un nuovo file `.svelte` in `src/pages/`
-2. Importalo in `App.svelte`
-3. Aggiungi la navigazione in `Header.svelte`
-
-## Tecnologie Utilizzate
-
-- **Svelte** - Framework UI reattivo
 - **Vite** - Build tool moderno e veloce
-- **CSS3** - Styling responsive
+- **CSS3** - Styling con variabili CSS
+- **Vanilla JS** - JavaScript puro
+
+## 📄 Licenza
+
+Progetto proprietario © CIMA PROGETTI