IT
Prenoti un incontro
Case studies

Case study · Web design e sviluppo · Grecia

Ela Home

Quattro case su un'isola greca, in otto lingue

Prenoti una conversazioneVeda il sito online
elahome.gr — il sito multilingua che Cittago ha progettato e sviluppato per Ela Home, su desktop e mobile

Έλα vuol dire vieni. A Kypseli, sul lato tranquillo di Zante, stanno nascendo quattro villette con piscina privata — e chi le comprerà non è sull'isola: è ad Atene, Bucarest, Milano, Monaco, Lione, Budapest, Hanoi. Non esiste una vetrina di agenzia davanti a cui passare. Il sito è tutto insieme: showroom, brochure e primo incontro. E doveva farlo in ognuna di quelle lingue senza mai suonare tradotto. Così l'abbiamo costruito: marchio, testi, render, un motore di dati sull'investimento con grafici scritti a mano e una pipeline che genera quarantotto pagine e si blocca nel momento esatto in cui una stringa resta non tradotta.

Cliente
Ela Home
Luogo
Zante, Grecia
Piattaforma
Sito statico scritto a mano · Cloudflare Pages
Cosa abbiamo realizzato
Brand + sito in 8 lingue
Servizi
Branding & DesignCopywritingSviluppo web & appCloudflare
Il sito
elahome.gr

Il progetto, in tre passi

La sfida, cosa abbiamo realizzato e il risultato

  1. 01La sfida

    Quattro case, nessuno showroom e un acquirente a duemila chilometri di distanza.

    Uno sviluppo boutique è il tipo di immobile più difficile da vendere online. Non c'è un catalogo da sfogliare e non c'è una seconda occasione — quattro case, un prezzo per casa, e una decisione che vale una fetta importante dei risparmi di qualcuno. L'acquirente non può camminare sul terreno, non può prendere un caffè con lo sviluppatore, e ha tutte le ragioni per essere scettico davanti a un investimento su un'isola greca proposto in una lingua che non è la sua.

    E non sarebbe mai arrivato in una lingua sola. La domanda realistica per una casa a Zante copre la Grecia stessa, la Romania, l'Italia, la Germania, la Francia, l'Ungheria e la diaspora vietnamita — sette mercati più l'inglese, e ognuno ha bisogno che il sito sembri scritto per lui, non passato in una macchina. Farlo male significa perdere la vendita nei primi dieci secondi. Farlo a mano su otto lingue e sei pagine significa ritrovarsi con quarantotto file che nessuno riesce a tenere allineati.

    E poi i numeri. Chiunque valuti un acquisto a sei cifre all'estero fa sempre le stesse tre domande: la gente ci verrà davvero, quanto può rendere, e la Grecia è un posto sensato dove mettere dei soldi. Rispondere con degli aggettivi non serve a niente. Bisognava rispondere con dati citati, che il visitatore potesse mettere alla prova.

  2. 02Cosa abbiamo realizzato

    Una brochure che ragiona, una data room che dimostra, una pipeline che tiene oneste entrambe

    Abbiamo portato il progetto da una cartella di disegni senza nome a un marchio vivo: il nome Ela Home e il logotipo ΕΛΑ, la palette Ionian Olive, tutti i testi, la selezione e la sequenza dei render, e il sito stesso — HTML, CSS e JavaScript scritti a mano, senza framework, senza page builder e senza librerie di grafici, pubblicato come file statici su Cloudflare Pages.

    La landing è lo showroom: cosa si sta costruendo, cosa contiene ogni casa, quanto costa mantenerla, come i pagamenti a stato avanzamento seguono i lavori reali sul terreno e come si contatta il proprietario. Dietro c'è Investment Intelligence — una seconda pagina che si comporta come una data room, con sei grafici interattivi costruiti su fonti Banca di Grecia, ELSTAT, INSETE, Fraport e ricerca accademica, ogni cifra attribuita, e qualunque cifra non verificabile lasciata fuori invece che stimata.

    Poi la parte che nessuno vede: la pagina inglese non è il sito, è l'input. Ogni pagina viene generata in tutte e otto le lingue da un'unica sorgente, da uno script che guida un browser vero sul markup — così l'output è per costruzione ben formato — e che si rifiuta di concludere se una sola stringa, comprese le etichette che il codice dei grafici scrive a runtime, non è stata tradotta.

  3. 03Il risultato

    • 48Pagine online, otto lingue, una build generata
    • 6Grafici interattivi scritti a mano, zero librerie
    • 0Framework, page builder e librerie di grafici usati
    • 0 €Hosting mensile — file statici su rete edge globale
    • 8 mesiDalla prenotazione alle chiavi, il tempo che il sito deve vendere
    • 1Fonte di verità — ogni altra pagina è generata da lì

    Il sito è completo e online su elahome.gr in tutte e otto le lingue. Al momento porta un tag noindex su richiesta del cliente, mentre lo sviluppo viene finalizzato — le pagine sono costruite, verificate e pronte, e diventano indicizzabili nell'istante in cui quel tag viene tolto. I dati commerciali appartengono allo sviluppatore e non sta a noi pubblicarli.

L'immagine

Ionian Olive

L'immobiliare greco online è un mare di gradienti turchesi e riquadri bianchi con l'ombra. Siamo andati dall'altra parte: i colori che si vedono davvero stando su quella collina — carta scolorita, sabbia e il verde-grigio di un uliveto ad agosto. Bloccati come sistema prima ancora di disegnare una pagina, così nulla nel sito viene deciso due volte.

  • #F7F2E7CartaLa pagina stessa
  • #EFE8D7SabbiaFasce in tinta, schede
  • #B6C599Oliva chiaroAccenti sullo scuro
  • #5F6F46OlivaBottoni, link, grafici
  • #4D5A38Oliva profondoEnfasi, inchiostro dei grafici
  • #232719InchiostroTitoli, sezioni scure

  • Uno sguardo nuovo

    Fraunces

    Display — titoli, cifre, sicurezza senza mostrare il prezzo

  • sull'investimento e sullo stile di vita.

    Fraunces Italic

    L'unico svolazzo di tutto il sistema, usato una volta per schermata

  • Smetti di prenotare le tue estati — inizia a tornarci a casa.

    Inter

    Testo e interfaccia — latino, latino esteso, greco e vietnamita già inclusi

  • Μια νέα ματιά

    → Noto Serif Display

    Titoli in greco. Fraunces non ha il greco, quindi lo stack scivola carattere per carattere — e questa riga è proprio quel fallback, dal vivo

Dodici file woff2, 535 KB su disco, ognuno con il suo unicode-range — così chi legge la pagina tedesca non scarica un solo byte di greco o vietnamita. Il carattere del marchio sopravvive in sette lingue su otto; solo il greco sostituisce, e sostituisce con la corrispondenza più vicina per contrasto e carattere display fra le ventisette famiglie Google con copertura completa.

Il prodotto

Quello che l'acquirente sta davvero guardando

Render architettonici e riprese con drone del terreno reale, allineati alla palette e messi in sequenza perché il sito racconti la storia nell'ordine in cui il visitatore la chiede: dov'è, com'è dalla strada, com'è viverci.

Render architettonico delle quattro villette Ela Home con piscina privata, Kypseli, Zante
Le quattro villette, ciascuna con piscina e corte privata
Veduta aerea del sito Ela Home a Zante, uliveti e strada del paese
Il terreno dall'alto — terrazze di ulivi, la strada del paese, il mare sullo sfondo
Render della zona giorno di Ela Home
Soggiorno, pranzo e cucina a pianta aperta al piano terra
Render di una camera da letto Ela Home
Camera al piano superiore, legno e lino
Render della cucina Ela Home
La cucina, completamente attrezzata
Render di un bagno Ela Home
Bagno al piano terra

Render e fotografie del cantiere forniti dallo sviluppatore; selezione, trattamento cromatico, tagli e sequenza a cura di Cittago.

Lo sviluppo Ela Home visto dalla strada di accesso — quattro piscine, muro di contenimento in pietra, terrazze di ulivi
L'interno di una delle villette — soggiorno a pianta aperta e la corte oltre le vetrate
Veduta aerea del terreno Ela Home a Kypseli, Zante, con le quattro piscine private

In pratica

Cosa comprendeva il lavoro

  • 01

    Marchio e naming

    Da “Armonia Summer House” a Ela Home — il greco έλα, vieni — con il logotipo ΕΛΑ, la palette Ionian Olive bloccata e un sistema tipografico che regge otto alfabeti.

  • 02

    I testi, tutti

    Ogni parola del sito, scritta per un acquirente straniero e scettico: cosa ricevi, quanto costa mantenerla, quanto potrebbe rendere, cosa esplicitamente non è. Poi localizzata in altre sette lingue.

  • 03

    Design e front-⁠end

    HTML, CSS e JavaScript scritti a mano. Nessun framework, nessun page builder, nessuna libreria di grafici, nessun plugin per i cookie — ogni kilobyte è lì perché ce l'abbiamo messo noi.

  • 04

    Il motore dei dati

    Sei strumenti SVG interattivi e un modello di rendita dal vivo, costruiti su fonti primarie, con una nota metodologica e una regola fissa: se non è verificabile, non esce.

Più da vicino

Il sito, pagina per pagina

Sei momenti dal vivo di elahome.gr — la stessa build, nella lingua del visitatore, sul dispositivo del visitatore.

L'hero della homepage di elahome.gr
Home — la lettura dei tre secondi, prima di ogni scroll
La sezione gallery di elahome.gr
Gallery — i render, a tutta larghezza
La sezione case e capitolato di elahome.gr
Le case — capitolato, opzioni, cosa è incluso
La sezione isola di elahome.gr
L'isola — perché Zante, e perché proprio questo lato
Il grafico degli arrivi sulla pagina investment intelligence di elahome.gr
Investment Intelligence — gli arrivi, citati e disegnati
Il grafico rischio-rendimento di elahome.gr
Rischio contro rendimento, su un controllo segmentato

La parte difficile

Otto lingue, quarantotto pagine, una sola fonte di verità

Tradurre un sito una volta è facile. Il problema è tenerlo tradotto: nel momento in cui qualcuno modifica un titolo in inglese, altre sette pagine diventano silenziosamente sbagliate. Per questo le versioni linguistiche non si mantengono. Si generano — e la build si rifiuta di concludere se qualcosa è rimasto indietro.

  1. 01

    Una sorgente inglese

    Le pagine inglesi non sono il sito: sono l'input. L'inglese è una lingua di destinazione come tutte le altre, quindi non può essere anche la cosa che modifichi sul posto.

  2. 02

    Stringhe, estratte

    Un walker tira fuori dal markup ogni unità traducibile e la mette in JSON, un file per lingua. I traduttori vedono stringhe, mai HTML, e non possono rompere un tag nemmeno volendo.

  3. 03

    Iniettate da un browser

    Il generatore guida Chrome headless sulle pagine e modifica il DOM. Un passaggio a espressioni regolari su 70 KB di HTML produrrebbe spazzatura dall'aria plausibile; un browser garantisce che l'output si parsifichi.

  4. 04

    Controllate, poi spazzate

    Un gate strutturale confronta ogni pagina generata con l'albero sorgente, poi un secondo passaggio con browser carica tutte e quarantotto e segnala errori in console, immagini rotte e overflow orizzontale.

La versione greca di elahome.gr con il selettore delle otto lingue aperto
La build greca, con tutte e otto le lingue a un clic
  • 48pagine generate, a ogni build
  • 8lingue, stesso percorso in ognuna
  • 0id non tradotti ammessi a passare
  • 32URL in sitemap con alternate hreflang completi

Cosa fa fallire la build

  • Una stringa che esiste in inglese e manca in una qualsiasi delle sette traduzioni
  • Un'etichetta di grafico scritta da JavaScript a runtime, che nel markup non compare mai ed è quindi invisibile all'estrattore
  • Un elemento “icona + testo” il cui primo figlio è un SVG — la classe di stringhe che ovunque altrove viene saltata in silenzio
  • Una chiave di traduzione che non corrisponde a nulla nella pagina: è così che un refuso, altrimenti, non farebbe nulla senza dirlo

C'è persino un rilevatore per il guasto opposto: uno script genera tutte e otto le versioni e segnala ogni nodo di testo identico byte per byte in tutto il set. Ciò che una lingua ha cambiato è una scelta di quella lingua; ciò che nessuno ha cambiato non è mai stato tradotto. Dopo la build attuale sopravvivono solo nomi di marchi, indirizzi e-mail e il titolo di un paper accademico citato — il che è corretto.

Il motore dei dati

Tre strumenti, ricostruiti qui

Investment Intelligence è la pagina che colma la distanza fra “belle case” e “decisione difendibile”. Risponde alle tre domande che un acquirente straniero fa davvero — la gente verrà, quanto può rendere, la Grecia è sensata — e risponde con grafici che si possono interrogare, non con fotografie di grafici. Questi tre sono gli stessi strumenti, ricostruiti in questa pagina sugli stessi dati: così li usi, invece di leggerne il racconto.

01

La gente ci verrà davvero?

Il traffico passeggeri dell'aeroporto di Zante è la misura più pulita della domanda a livello di isola. È crollato del 76% nel 2020, ha superato di nuovo il picco 2019 entro il 2022 e nel 2025 ha segnato il record assoluto. Un grafico ad area rende quella forma leggibile in un secondo — ed è tutto l'argomento a favore di una casa da affittare su quest'isola.

2.282.7742025 · record assoluto
2.223.0112024 · 95% internazionale
~98%del traffico fra maggio e ottobre

Aeroporto di Zante / Fraport Greece

02

Quanto può rendere?

La risposta onesta è “dipende”, quindi invece di affermare un numero abbiamo costruito la dipendenza. Trascina lo scenario: occupazione, tariffa media e notti affittabili si muovono insieme, e ricavo lordo, costi operativi e reddito netto si ridisegnano. Poiché la domanda si concentra fra maggio e ottobre, il modello vende 130–150 notti, non 365. Provalo.

36–45k €ricavo lordo
18–24k €reddito netto
~7–9%rendita netta

AirDNA · AirROI · Airbtics (modellizzato) — indicativo, non una garanzia

03

La Grecia è un posto sensato?

Questo è una lezione su come non mentire con un grafico vero. La crescita dei prezzi delle case in Grecia ha decelerato fra 2023 e 2025: se disegni il tasso annuo, un mercato salito ogni singolo anno sembra in caduta. Così abbiamo disegnato il livello: gli stessi dati della Banca di Grecia, capitalizzati su base 2022. Stessi numeri, impressione opposta, e uno solo dei due è onesto.

+34,2%cumulato, 2022 → 2025
~7%rendimento reale immobiliare / anno, 1870–2015
½la volatilità delle azioni

Banca di Grecia · Jordà et al. (NBER/QJE)

Ricostruiti per questa pagina a partire dalle cifre pubblicate dal cliente. Il modello di rendita non contiene alcun prezzo d'acquisto — quella cifra non è elencata e si condivide su richiesta — quindi la rendita netta è interpolata fra i due estremi pubblicati. Ogni numero qui sopra è del cliente, citato sulla sua pagina; nulla è stato inventato per questo case study, e le cifre di affitto modellizzate sono intervalli indicativi, non garanzie.

La superficie di conversione

Nessun form. Di proposito.

Questo sito non ha form di contatto, né account, né login, né pagamenti, né newsletter. Ogni richiesta esce come e-mail, messaggio WhatsApp o telefonata, diretta allo sviluppatore. Non è una scorciatoia: è il progetto corretto per uno sviluppo di quattro unità, e il blocco contatti è costruito attorno a questo.

La sezione contatti di elahome.gr — e-mail, WhatsApp, telefono, indicatore orari dal vivo e convertitore di fuso orario
Il blocco contatti, dal vivo — indicatore aperto/chiuso compreso
  1. 01

    Dice cosa ottieni, prima che tu scriva

    Brochure, planimetrie, piano dei pagamenti, disponibilità attuale sulle quattro case, e una call o una visita privata sull'isola. Il visitatore sa esattamente cosa gli compra una e-mail: ed è per questo che la manda.

  2. 02

    WhatsApp per primo, e dichiarato

    Un acquirente a Bucarest o a Monaco non apre il client di posta per un primo contatto. WhatsApp è offerto per primo e marcato apertamente “di solito il più rapido”, e si ripete in un widget flottante che segue il visitatore lungo tutte le pagine.

  3. 03

    Un indicatore orari dal vivo

    Il blocco calcola nel browser gli orari di Atene e mostra, adesso, se c'è qualcuno. “Chiuso ora · lun–ven 10:00–14:00” imposta l'aspettativa invece di lasciare un messaggio cadere nel silenzio.

  4. 04

    Quegli orari, nel tuo fuso

    Una lista ricercabile di una settantina di città converte la finestra di Atene in quella del visitatore. Toglie di mezzo l'unico attrito che fa rimandare la telefonata a un acquirente straniero: il calcolo.

  5. 05

    Una persona, non un'azienda

    Lo sviluppatore compare col nome e il ruolo, nel blocco e nel widget di chat. Per un progetto da quattro case la persona è la credibilità, e nasconderla dietro una casella generica sarebbe stato buttarla via.

  6. 06

    Ogni via è un canale vero

    mailto:, wa.me e tel: — nessuna pagina intermedia, nessun “grazie per l'invio”. Su un telefono, un tocco è un telefono che squilla.

Perché niente form era la scelta giusta

  • Niente da far uscire

    Niente form significa niente database, niente invii da conservare, nessun dato personale a riposo — e una superficie di consenso abbastanza piccola da descriverla in una sola pagina onesta.

  • Niente da rompere

    I form si guastano in silenzio. Le credenziali SMTP scadono, la deliverability marcisce, e ci si accorge dopo che un mese di richieste è svanito. Un link WhatsApp non può fallire senza dirlo.

  • Niente in mezzo

    Quattro case non hanno bisogno di lead scoring. Hanno bisogno che l'acquirente parli con lo sviluppatore nei primi trenta secondi, sul canale che ha già aperto.

La costruzione

Nessun framework, nessun builder, nessuna libreria

Un sito brochure ha un solo compito: caricarsi all'istante su un telefono in un paese greco con due tacche di segnale, e restare online senza manutenzione. Ogni decisione tecnica qui discende da lì.

1Statico, scritto a mano

HTML, CSS e JavaScript puro, scritti direttamente. Niente React, niente WordPress, niente page builder — niente da aggiornare, niente da bucare, niente che scada.

2Cloudflare Pages

Pubblicato su una rete edge globale, con il dominio e la sua variante www. Costo di hosting: zero. Uptime: non più un nostro problema.

3Font self-hosted

Dodici woff2 serviti dallo stesso dominio, ognuno con il suo unicode-range. Nessuna richiesta a Google Fonts, nessuna terza parte nel percorso critico, nessuna domanda di consenso da porre.

4Grafici SVG, a mano

Ogni grafico è SVG generato in circa duecento righe di JavaScript. Una libreria di grafici sarebbe pesata più di tutto il resto della pagina messo insieme.

5Un 404 vero

Pages restituiva la homepage con un 200 per ogni URL sbagliato — un soft 404 che avvelena silenziosamente la scansione. Un 404.html vero ha risolto.

6File per le macchine

robots.txt, un llms.txt scritto in prosa per gli agenti AI invece che in markup, e una sitemap.xml con gli alternate xhtml:link completi per tutte e otto le lingue.

7Consenso senza plugin

Banner cookie e pagina cookie scritti da noi — perché il sito non imposta nulla che richieda consenso, e un plugin sarebbe pesato più dell'onestà.

8Reduced-motion rispettato

Ogni rivelazione, conteggio, disegno di grafico e scorrimento dello slider controlla prefers-reduced-motion e si ferma se il visitatore l'ha chiesto.

9Pagina prezzo non elencata

Il prezzo vive su una pagina a sé, non linkata da nessuna parte, assente dalla sitemap, condivisa da persona a persona. Abbastanza pubblica da inviarla, abbastanza privata da non finire indicizzata.

Cosa abbiamo usato

I servizi dietro questo progetto

Prossimo progetto

Apuseni Peak Paradise

Sito + motore di prenotazione

Vedere il progetto

Tutti i case studies

Il prossimo progetto potrebbe essere Suo

Il primo incontro è gratuito e dura 30 minuti: online, al telefono o, se si trova a Cluj, davanti a un caffè. Ci racconti cosa vuole costruire e Le diciamo sinceramente cosa funzionerebbe.

Scelga l'orario dell'incontroWhatsApp

Preferisce un messaggio? Ci trova su WhatsApp, via email o al telefono e Le rispondiamo direttamente.

Senza preparazione e senza insistenze dopo. Se non siamo adatti, se ne va con domande migliori da fare a chiunque venga dopo.