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

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:

: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

<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.

<!-- 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:

import MyPage from "./pages/MyPage.svelte"

const getRoute = (path) => {
    // ...
    if (normalized === '/my-page') return 'mypage'
    // ...
}

3. Aggiungi il rendering nel template:

{:else if currentRoute === 'mypage'}
    <MyPage />

🚀 Build e Deploy

Build di produzione

npm run build

Genera i file ottimizzati in dist/.

Preview locale

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