cima-progetti/README.md

# Cima Progetti - Sito Aziendale

Sito web moderno e responsivo sviluppato con **Svelte + Vite** per presentare servizi, metodologia e contatti aziendali.

## ✨ Funzionalità principali

- 🌓 **Tema light/dark** con persistenza locale
- 📱 **Design completamente responsivo**
- ⬆️ **Navbar collapsibile** con hide/show al scroll
- 🎨 **Sistema di componenti riusabili**
- 🚀 **Routing client-side** con pagine di errore dedicate
- ♿ **Accessibilità** e buone pratiche web

## 🛠️ Requisiti

- `Node.js` 18+ (consigliato LTS)
- `npm` 9+

## 🚀 Avvio rapido

```bash
npm install
npm run dev
```

Applicazione disponibile su `http://localhost:5173`.

## 📝 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
```

Genera i file ottimizzati in `dist/`.

### Preview locale

```bash
npm run preview
```

## 📦 Dipendenze

- **Svelte** - Framework UI
- **Vite** - Build tool e dev server
- **@sveltejs/vite-plugin-svelte** - Plugin Svelte per Vite

## 🎓 Tecnologie utilizzate

- **Svelte 5** - UI framework reattivo
- **Vite** - Build tool moderno e veloce
- **CSS3** - Styling con variabili CSS
- **Vanilla JS** - JavaScript puro

## 📄 Licenza

Progetto proprietario © CIMA PROGETTI