225 lines
6.2 KiB
Markdown
225 lines
6.2 KiB
Markdown
# 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 dedicate e fallback 404
|
||
- ♿ **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` leggendo `window.location.pathname` e reagendo ai cambi di History API.
|
||
|
||
| Route | Componente | Descrizione |
|
||
|-------|-----------|-------------|
|
||
| `/` | `Hero` + `Services` | Home page |
|
||
| `/contatti`, `/contacts` | `Contacts` | Pagina contatti |
|
||
| `/403` | `Forbidden` | Accesso negato |
|
||
| `/404` | `NotFound` | Pagina non trovata |
|
||
| `/500` | `ServerError` | Errore server |
|
||
| `/errore` | `ErrorGeneric` | Errore generico |
|
||
| qualsiasi altra route | `NotFound` | Fallback 404 per pagine non ancora create |
|
||
|
||
Le voci della navbar puntano a route reali come `/servizi`, `/metodo`, `/progetti` e `/chi-siamo`: se una pagina non esiste ancora, il contenuto mostrato è il 404 ma l'URL resta quello richiesto.
|
||
|
||
## 🎨 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'`)
|
||
|
||
Se `href` punta a una route interna, il click usa la navigazione client-side e aggiorna il contenuto senza ricaricare la pagina.
|
||
|
||
### Header
|
||
|
||
Navbar sticky che si nasconde al scroll verso il basso e riappare al scroll verso l'alto.
|
||
|
||
Le voci della navbar usano route interne. Le pagine non ancora create devono restituire 404.
|
||
|
||
Modifica il contenuto in `src/components/Header/Header.svelte`.
|
||
|
||
### ThemeToggle
|
||
|
||
Pulsante per switchare tra tema light e dark. Il tema viene salvato in `localStorage` e come backup in cookie, così resta disponibile anche dopo operazioni che puliscono parte dello storage del browser.
|
||
|
||
## 📱 Modificare i contenuti
|
||
|
||
- **Header/Navigazione:** `src/components/Header/Header.svelte`
|
||
- **Routing e redirect:** `src/App.svelte`, `src/lib/navigation.js`, `src/lib/errorRouting.js`
|
||
- **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 />
|
||
```
|
||
|
||
Se non aggiungi la route in `getRoute`, il path continuerà a mostrare il fallback 404.
|
||
|
||
## 🚀 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 |