Crea una pagina web basata sul contenuto fornito dall'utente. I requisiti di stile della pagina web sono i seguenti:

### I. Posizionamento dello stile visivo - **Stile artistico disegnato a mano**: Adottare uno stile di disegno a linee, fondendo il design digitale moderno con l'estetica tradizionale del disegno a mano. - **Combinazione di colori**: Utilizzare colori neutri (bianco sporco/grigio chiaro) come base, abbinati a un testo principale grigio scuro e utilizzare l'arancione-rosso (colore di accento) come colore focale visivo. - **Tono del marchio**: Raffinato, artistico e caldo, rivolto a un gruppo di utenti esigenti. ### II. Principi di struttura del layout **Sezione Hero (Design della prima schermata)** - Layout a colonne da sinistra a destra (rapporto aureo 60:40) - Lato sinistro: - Titolo di grandi dimensioni (Display Font, 72-96px), carattere scuro, forte impatto visivo - Dati chiave evidenziati in colore d'accento (ad es. "15 città, 4749 località") - Testo del sottotitolo conciso e incisivo, che dichiara la proposta di valore principale - Ampio spazio bianco, che crea un'atmosfera di alta gamma - Lato destro: - Illustrazioni personalizzate disegnate a mano, che occupano il 50% dello spazio visivo - Stile di illustrazione coerente: disegno a linee + accenti di colore locali - Contenuto dell'illustrazione profondamente integrato con la storia del marchio - **Design della barra di navigazione** - Navigazione superiore minimalista, posizionamento fisso - Logo + 2-3 voci di menu principali - Gruppo di icone sul lato destro (ricerca/preferiti/menu) - Sfondo trasparente o bianco puro con ombre sottili - **Area delle schede di contenuto** - Layout a griglia di schede (3-4 colonne, responsivo) - Ogni scheda include: - Titolo (Intestazione 3, 32-40px) - Descrizione (2-3 linee, 16-18px, altezza linea 1.6) - Illustrazione di accompagnamento disegnata a mano (coerente con lo stile visivo principale) - Sfondo chiaro (#F5F3F0), angoli arrotondati (8-12px) - Stato al passaggio del mouse: ombra leggermente sollevata + ombra più profonda - ### III. Specifiche del sistema di illustrazione **Linee guida per la creazione di illustrazioni** 1. 2. **Elaborazione delle linee**: - Utilizzare linee irregolari disegnate a mano di 1-2px per simulare una texture di pittura realistica - Mantenere linee morbide con un tocco di artificialità, evitando un'eccessiva meccanicità. 3. **Uso del colore:** - Linee grigie all'80% + riempimento con il colore del marchio al 20% - Rosso-arancio utilizzato solo per enfatizzare gli elementi (persone, finestre, edifici chiave) - Lo sfondo utilizza un beige sfumato (#FDBFF7 → #F5F1EB) - 5. **Composizione della scena:** - Scene urbane: fusione di edifici simbolo + scene di vita quotidiana - Prospettiva dall'alto o isometrica - Aggiunta di piccole figure per migliorare la narrazione e l'intimità - 7. **Densità dei dettagli:** - Ricchi dettagli in primo piano, piano intermedio moderatamente semplificato e sfondo delineato - Mantenere la gerarchia visiva, guidando l'occhio verso le informazioni chiave - 9. ### IV. Sistema di caratteri - **Carattere di visualizzazione (Titolo):** Carattere serif, pesante e potente (ad es. Freight Display, Tiempos) - **Carattere del corpo (Testo del corpo):** Sans-serif, altamente leggibile (ad es. Inter, Manrope) - **Rapporto dimensione carattere**: Utilizza una scala modulare (1,25 o 1,333) - - **Livelli di spessore carattere**: Leggero (300) / Normale (400) / Medio (500) / Grassetto (700) - ### V. Dettagli di interazione - - **Micro-animazioni**: Le schede fluttuano verso l'alto di 4-8px al passaggio del mouse, tempo di transizione 300-400ms - - **Stato di caricamento**: Utilizza una schermata scheletro per mantenere il tono del marchio - - **Breakpoint responsivi**: - - Desktop: 1440px+ - - Tablet: 768-1439px - - Mobile: 375-767px - - ### VI. Requisiti di output del design Ogni output del design dovrebbe includere: 1. 2. Gerarchia visiva chiara (ottenuta tramite dimensioni/colore/spazio bianco) 3. 4. Almeno un'illustrazione personalizzata (profondamente correlata al contenuto, generata utilizzando Nano Banana Pro) 5. 6. 2-3 evidenziazioni di colore d'accento (non superiori a 7. 8. Ampio spazio di respiro (spaziatura delle sezioni ≥ 120px) 9. 10. Percorso di azione utente chiaro 11. --- **Filosofia di design**: Utilizzare un linguaggio visivo artistico per trasmettere l'unicità e il calore del marchio. Ogni pixel serve a raccontare una storia, non semplicemente a mostrare la funzionalità. Il design dovrebbe far sentire agli utenti: "Questo è per le persone che apprezzano la vita", piuttosto che un freddo prodotto commerciale.

Le illustrazioni della pagina web sono state tutte generate da nano banana pro.