Suite Foliage - Sito Web

Sito web moderno e responsive per Suite Foliage, una baita suite situata nella campagna apriliana.

Caratteristiche

• Design moderno e responsive: Ottimizzato per tutti i dispositivi (desktop, tablet, mobile)
• Multilingua: Supporto per Italiano e Inglese con toggle per cambio lingua
• Sezioni complete:
  • Hero section con call-to-action
  • Presentazione della suite
  • Galleria immagini
  • Servizi e comfort
  • Posizione e mappa
  • Form di contatto
• Animazioni fluide: Scroll animations e transizioni eleganti
• Navigazione intuitiva: Menu responsive con smooth scroll

Struttura del Progetto

suite foliage/
├── index.html          # Pagina principale
├── styles/
│   └── main.css        # Stili CSS principali
├── js/
│   ├── main.js         # JavaScript principale
│   └── translations.js # Sistema di traduzione
├── images/             # Cartella per le immagini
└── README.md           # Questo file

Utilizzo

1. Apri index.html nel browser per visualizzare il sito
2. Per sviluppo locale, puoi utilizzare un server HTTP semplice:

   # Con Python 3
   python -m http.server 8000
   
   # Con Node.js (se hai http-server installato)
   npx http-server

Personalizzazione

Aggiungere immagini

Sostituisci i placeholder nella sezione galleria con immagini reali:

1. Aggiungi le immagini nella cartella images/
2. Modifica il CSS della classe .gallery-placeholder per utilizzare le immagini reali

Modificare i testi

Tutti i testi sono gestiti tramite il sistema di traduzione in js/translations.js. Modifica gli oggetti translations.it e translations.en per aggiornare i contenuti.

Integrare la mappa

Per integrare una mappa interattiva nella sezione location:

1. Ottieni una API key da Google Maps o usa OpenStreetMap
2. Sostituisci il placeholder .map-placeholder con il codice della mappa

Configurare il form di contatto

Il form di contatto attualmente mostra solo un alert. Per implementare l'invio email:

1. Configura un servizio backend o usa un servizio come Formspree, EmailJS
2. Modifica la funzione sendToEmailService() in js/main.js

Browser Support

• Chrome (ultime 2 versioni)
• Firefox (ultime 2 versioni)
• Safari (ultime 2 versioni)
• Edge (ultime 2 versioni)

Note

• Il sito utilizza font Google (Playfair Display e Inter)
• Le immagini nella galleria sono placeholder - sostituire con immagini reali
• Il form di contatto richiede configurazione backend per funzionare completamente
• La mappa nella sezione location è un placeholder - integrare con Google Maps o OpenStreetMap

Licenza

© 2026 Suite Foliage. Tutti i diritti riservati.