Watch Lab Vue.JS

Questo progetto è un sito web per brand di lusso che mostra orologi e gioielli in modo elegante e moderno. Pensalo come una vetrina digitale dove i visitatori possono esplorare prodotti premium attraverso belle animazioni, effetti di scorrimento fluidi e navigazione intuitiva. Il sito web è progettato per funzionare perfettamente su tutti i dispositivi - dagli smartphone ai computer desktop - garantendo a ogni visitatore un'esperienza di navigazione eccezionale sia che stiano scoprendo nuove collezioni o imparando di più sul brand.

Architettura e Stack Tecnologico

Questo sito web showcase Vue 3 dimostra pattern di sviluppo frontend moderni utilizzando tecnologie web all'avanguardia:

• Framework: Vue 3 con Options API per sviluppo componenti e eccellente compatibilità browser
• Sistema Build: Vue CLI che fornisce workflow di sviluppo ottimizzato e build di produzione
• Styling: Architettura SCSS con organizzazione modulare e sistema di variabili globali
• Animazioni: Libreria AOS (Animate On Scroll) per animazioni sofisticate attivate dallo scroll
• Sistema Design: Tipografia personalizzata che mescola font Miller (serif), Montserrat (sans-serif) e Merriweather
• Icone: Integrazione FontAwesome per iconografia coerente

Caratteristiche Principali

• Single Page Application: Tutto il contenuto orchestrato attraverso App.vue con componenti sezionati
• Architettura Basata su Componenti: Componenti HeadingPhoto riutilizzabili con sistema props flessibile
• Design Responsive: Approccio mobile-first con mixin breakpoint SCSS
• Animazioni Fluide: Animazioni attivate dallo scroll usando libreria AOS
• Styling Moderno: SCSS con convenzioni di naming tipo BEM e mixin di utilità
• Elementi Interattivi: Menu hamburger, overlay ricerca, gallerie prodotti e slider contenuti

Architettura Componenti

L'applicazione segue un layout single-page sezionato:

1. Header (Header.vue) - Navigazione con menu hamburger e funzionalità ricerca
2. Hero (Hero.vue) - Sezione hero principale con slider
3. Sezioni Contenuto (HeadingPhoto.vue) - Blocchi contenuto immagine/testo riutilizzabili
4. Showcase Prodotti (Gallery.vue) - Galleria prodotti con elementi interattivi
5. Carosello Contenuti (BlogSlider.vue) - Slider contenuti dinamico
6. Sezione Contatto (Contact.vue) - Form contatto e informazioni
7. Footer (Footer.vue) - Footer sito con branding e link

Architettura SCSS

• Struttura Modulare: Organizzata in src/scss/ con chiara separazione delle responsabilità
• Variabili Globali: Tipografia, colori e spaziature definite in _variables.scss
• Mixin Utilità: Mixin flexbox, transizioni e posizionamento in _mixins.scss
• Sistema Responsive: Utilità breakpoint in _breakpoints.scss
• Font Personalizzati: File font locali con dichiarazioni @font-face appropriate