Case studies

Case study · Web design & development · Greece

Ela Home

Four homes on a Greek island, in eight languages

elahome.gr — the multilingual site Cittago designed and built for Ela Home, shown on desktop and mobile

Έλα means come. Four maisonettes with private pools are going up in Kypseli, on the quiet east side of Zakynthos, and the buyer for them is not on the island — they are in Athens, Bucharest, Milan, Munich, Lyon, Budapest, Hanoi. There is no estate-agent window to walk past. The website is the whole showroom, the whole brochure and the whole first meeting, and it had to do that job in every one of those languages without ever sounding translated. So we built it: brand, copy, renders, an investment-data engine with charts we wrote by hand, and a build pipeline that generates forty-eight pages and fails loudly the moment a single string goes untranslated.

Client
Ela Home
Location
Zakynthos, Greece
Platform
Hand-coded static site · Cloudflare Pages
What we delivered
Brand + site in 8 languages
Services
Branding & DesignCopywritingWeb & App DevelopmentCloudflare
The site
elahome.gr

The project, in three steps

The challenge, what we delivered and the result

  1. 01The challenge

    Four homes, no showroom, and a buyer two thousand kilometres away.

    A boutique development is the hardest kind of property to sell online. There is no inventory to browse and no second chance — four homes, one price per home, and a decision worth a large part of someone's savings. The buyer cannot walk the plot, cannot meet the developer over coffee, and has every reason to be sceptical of a Greek island investment pitched to them in a language that is not their own.

    And they were never going to arrive in one language. Realistic demand for a Zakynthos home spans Greece itself, Romania, Italy, Germany, France, Hungary and the Vietnamese diaspora — seven markets plus English, each of which needs the site to read as if it were written for them, not run through a machine. Do that badly and you lose the sale in the first ten seconds. Do it by hand across eight languages and six pages and you get forty-eight files nobody can keep in sync.

    On top of that: the numbers. Anyone weighing a six-figure purchase abroad asks the same three questions — will people actually come, what can it earn, and is Greek property a sane place to put money. Answering those with adjectives is worthless. They had to be answered with sourced data the visitor could interrogate.

  2. 02What we delivered

    A brochure that thinks, a data room that proves, one pipeline that keeps both honest

    We took the project from an unnamed set of drawings to a live brand: the name Ela Home and the ΕΛΑ wordmark, the Ionian Olive palette, the copy in full, the render selection and sequencing, and the site itself — hand-written HTML, CSS and JavaScript with no framework, no page builder and no charting library, deployed as static files on Cloudflare Pages.

    The landing page is the showroom: what is being built, what each home contains, what it costs to run, how the staged payments track real progress on site, and how to reach the owner. Behind it sits Investment Intelligence — a second page that behaves like a data room, with six interactive charts built from Bank of Greece, ELSTAT, INSETE, Fraport and academic sources, each figure attributed, and any figure we could not source left out rather than estimated.

    Then the part nobody sees: the English page is not the website, it is the input. Every page is generated for all eight languages from one source, by a script that drives a real browser over the markup so the output is guaranteed well-formed — and that refuses to finish if a single string, including labels drawn by the chart code at runtime, has not been translated.

  3. 03The result

    • 48Pages live, eight languages, one generated build
    • 6Interactive charts, written by hand, zero libraries
    • 0Frameworks, page builders and charting libraries used
    • €0Monthly hosting — static files on a global edge
    • 8 moReservation to keys, the timeline the site has to sell
    • 1Source of truth — every other page is generated from it

    The site is complete and live at elahome.gr in all eight languages. It currently carries a noindex tag at the client's request while the development is finalised — the pages are built, checked and ready, and become indexable the moment that tag comes off. Commercial performance figures belong to the developer and are not ours to publish.

The look

Ionian Olive

Greek property online is a sea of turquoise gradients and drop-shadowed white boxes. We went the other way — the colours you actually see standing on that hillside: bleached paper, sand, and the grey-green of an olive grove in August. Locked as a system before a single page was designed, so nothing on the site is decided twice.

  • #F7F2E7PaperThe page itself
  • #EFE8D7SandTinted bands, cards
  • #B6C599Olive lightAccents on dark
  • #5F6F46OliveButtons, links, charts
  • #4D5A38Deep oliveEmphasis, chart ink
  • #232719InkHeadings, dark sections
  • A new perspective

    Fraunces

    Display — headings, figures, price-free confidence

  • on investment and lifestyle.

    Fraunces Italic

    The one flourish in the whole system, used once per screen

  • Stop booking your summers — start coming home to them.

    Inter

    Body and UI — Latin, Latin-ext, Greek and Vietnamese out of the box

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

    → Noto Serif Display

    Greek headings. Fraunces has no Greek at all, so the stack falls through per character — and this line is that fallback, live

Twelve woff2 files, 535 KB on disk, every one carrying a unicode-range — so a visitor reading the German page never downloads a byte of Greek or Vietnamese. The brand face survives in seven of the eight languages; only Greek substitutes, and it substitutes into the closest match for contrast and display character out of the twenty-seven Google families with full coverage.

The product

What the buyer is actually looking at

Architectural renders and drone photography of the real plot, colour-matched to the palette and sequenced so the site tells the story in the order a visitor asks it: where is it, what does it look like from the road, what is it like to live in.

Architectural render of the four Ela Home maisonettes with private pools, Kypseli, Zakynthos
The four maisonettes, each with its own pool and walled courtyard
Aerial view of the Ela Home site on Zakynthos, olive groves and the village road
The plot from the air — olive terraces, the village road, the sea beyond
Render of the Ela Home living and dining area
Open-plan living, dining and kitchen on the ground floor
Render of an Ela Home bedroom
Bedroom on the upper floor, timber and linen
Render of the Ela Home kitchen
The kitchen, fully fitted
Render of an Ela Home bathroom
Ground-floor bathroom

Renders and site photography supplied by the developer; selection, colour treatment, cropping and sequencing by Cittago.

The Ela Home development seen from the approach road — four pools, stone retaining wall, olive terraces
Inside one of the maisonettes — open-plan living room with the courtyard beyond
Aerial view of the Ela Home plot in Kypseli, Zakynthos, with the four private pools

In practice

What the engagement covered

  • 01

    Brand & naming

    From “Armonia Summer House” to Ela Home — the Greek έλα, come — with the ΕΛΑ wordmark, the locked Ionian Olive palette and a type system that survives eight alphabets.

  • 02

    Copy, in full

    Every word on the site, written for a sceptical foreign buyer: what you get, what it costs to run, what it might earn, what it explicitly is not. Then localised into seven more languages.

  • 03

    Design & front-⁠end

    Hand-written HTML, CSS and JavaScript. No framework, no page builder, no chart library, no cookie-banner plugin — every kilobyte on the page is there because we put it there.

  • 04

    The data engine

    Six interactive SVG instruments and a live yield model, built from primary sources, with a methodology note and a standing rule: if it cannot be sourced, it does not ship.

A closer look

The site, page by page

Six moments from the live elahome.gr — the same build, in the visitor's language, on the visitor's device.

The elahome.gr homepage hero
Home — the three-second read, before a single scroll
The elahome.gr gallery section
Gallery — the renders, full-bleed
The elahome.gr homes and specification section
The homes — specification, options, what is included
The elahome.gr island section
The island — why Zakynthos, and why this side of it
The arrivals chart on the elahome.gr investment intelligence page
Investment Intelligence — arrivals, sourced and drawn
The risk-versus-return chart on elahome.gr
Risk versus return, on a segmented control

The hard part

Eight languages, forty-eight pages, one source of truth

Translating a website is easy once. Keeping it translated is the problem — the moment someone edits a headline in English, seven other pages become quietly wrong. So the language versions are not maintained. They are generated, and the build refuses to finish if anything was missed.

  1. 01

    One English source

    The English pages are not the website — they are the input. English is a build target like every other language, so it cannot also be the thing you edit in place.

  2. 02

    Strings, extracted

    A walker pulls every translatable unit out of the markup into JSON, one file per language. Translators see strings, never HTML, and can never break a tag.

  3. 03

    Injected by a browser

    The generator drives headless Chrome over the pages and edits the DOM. A regex pass over 70 KB of HTML would produce plausible-looking rubbish; a browser guarantees the output parses.

  4. 04

    Checked, then swept

    A structural gate compares every generated page against the source tree, then a second browser pass loads all forty-eight and reports console errors, broken images and horizontal overflow.

The Greek version of elahome.gr with the eight-language switcher open
The Greek build, with all eight languages one click away
  • 48pages generated, every build
  • 8languages, same path in each
  • 0untranslated ids allowed to pass
  • 32sitemap URLs with full hreflang alternates

What fails the build

  • A string that exists in English and is missing in any of the seven translations
  • A chart label written by JavaScript at runtime, which never appears in the markup and so is invisible to the extractor
  • An “icon + text” element whose first child is an SVG — the class of string that gets silently skipped everywhere else
  • A translation key that matches nothing on the page, which is how a typo would otherwise do nothing quietly

There is even a detector for the opposite failure: a script renders all eight versions and reports every text node that is byte-identical across the set. Anything one language changed is that language's choice; anything nobody changed was never translated at all. After the current build the only survivors are brand names, e-mail addresses, and the title of a cited academic paper — which is correct.

The data engine

Three instruments, rebuilt here

Investment Intelligence is the page that closes the gap between “nice houses” and “defensible decision”. It answers the three questions a foreign buyer actually asks — will people come, what can it earn, is Greek property sane — and it answers them with charts you can interrogate rather than pictures of charts. These three are the same instruments, rebuilt on this page from the same data, so you can use them rather than read about them.

01

Will people actually come?

Passenger traffic through Zakynthos airport is the cleanest island-level measure of demand there is. It collapsed by 76% in 2020, clawed back past its 2019 peak by 2022, and set an all-time record in 2025. An area chart makes that shape legible in a second — which is the entire argument for a rental home on this island.

2,282,7742025 · all-⁠time record
2,223,0112024 · 95% international
~98%of traffic falls May–Oct

Zakynthos Airport / Fraport Greece

02

What can it earn?

The honest answer is “it depends”, so we built the dependency instead of asserting a number. Drag the scenario: occupancy, nightly rate and lettable nights move together, and gross income, operating costs and net income redraw. Because demand concentrates in May–October, the model sells 130–150 nights — not 365. Try it.

€36k–45kgross income
€18k–24knet income
~7–9%net yield

AirDNA · AirROI · Airbtics (modelled) — indicative, not a guarantee

03

Is Greek property sane?

This one is a lesson in not lying with a true chart. Greek house-price growth decelerated across 2023–2025 — plot the annual rate and a market that rose every single year looks like it is falling. So we plotted the level instead: the same Bank of Greece prints, compounded off a 2022 base. Same data, opposite impression, and only one of them is honest.

+34.2%cumulative, 2022 → 2025
~7%housing real return / yr, 1870–2015
½the volatility of equities

Bank of Greece · Jordà et al. (NBER/QJE)

Rebuilt for this page from the client's published figures. The yield model carries no purchase price — that figure is unlisted and shared on request — so net yield is interpolated between its two published end points instead. Every number above is the client's own, sourced on their page; nothing was invented for this case study, and the modelled rental figures are indicative ranges, not guarantees.

The conversion surface

No form. On purpose.

This site has no contact form, no account, no login, no payment and no newsletter. Every enquiry leaves as an e-mail, a WhatsApp message or a phone call, straight to the developer. That is not a shortcut — it is the correct design for a four-unit development, and the contact block is engineered around it.

The contact section on elahome.gr — e-mail, WhatsApp, phone, live office-hours indicator and time-zone converter
The contact block, live — including the open/closed indicator
  1. 01

    It says what you get, before you write

    Brochure, floor plans, payment schedule, current availability across the four homes, and a call or a private viewing on the island. The visitor knows exactly what an e-mail buys them, which is what makes them send it.

  2. 02

    WhatsApp first, and labelled as such

    A buyer in Bucharest or Munich will not open an e-mail client to make a first approach. WhatsApp is offered first and openly marked “usually the fastest”, and it repeats in a floating widget that follows the visitor down every page.

  3. 03

    A live open/closed indicator

    The block computes Athens office hours in the browser and shows, right now, whether someone is there. “Closed now · Mon–Fri 10:00–14:00” sets the expectation instead of leaving a message into silence.

  4. 04

    Those hours, in your time

    A searchable list of some seventy cities converts the Athens window into the visitor's own. It removes the one piece of friction that makes a foreign buyer put off calling — the arithmetic.

  5. 05

    A person, not a company

    The developer is named, with his role, on the block and in the chat widget. For a four-home project the person is the credibility, and hiding him behind a generic inbox would throw that away.

  6. 06

    Every route is a real channel

    mailto:, wa.me and tel: — no interstitial, no “thank you for your submission”. On a phone, one tap is a ringing telephone.

Why no form was the right call

  • Nothing to leak

    No form means no database, no submissions to store, no personal data at rest — and a consent surface small enough to describe in one honest page.

  • Nothing to break

    Forms fail silently. SMTP credentials expire, deliverability rots, and nobody finds out until a month of enquiries has vanished. A WhatsApp link cannot fail quietly.

  • Nothing in the way

    Four homes do not need lead scoring. They need the buyer talking to the developer in the first thirty seconds, in the channel the buyer already has open.

The build

No framework, no builder, no libraries

A brochure site does one job: load instantly on a phone in a Greek village with two bars of signal, and stay online without maintenance. Every technical decision here follows from that.

1Static, hand-written

HTML, CSS and vanilla JavaScript, authored directly. No React, no WordPress, no page builder — nothing to update, nothing to get hacked, nothing to expire.

2Cloudflare Pages

Deployed to a global edge network with the custom domain and its www variant. Hosting cost: nothing. Uptime: not our problem any more.

3Self-hosted fonts

Twelve woff2 files served from the same origin, each with a unicode-range. No Google Fonts request, no third-party call in the critical path, no consent question to answer.

4SVG charts, by hand

Every chart is SVG we generate in about two hundred lines of JavaScript. A charting library would have cost more kilobytes than the entire rest of the page.

5A real 404

Pages was returning the homepage with a 200 for every wrong URL — a soft 404 that quietly poisons crawling. A real 404.html fixed it.

6Machine-facing files

robots.txt, an llms.txt written for AI agents in prose rather than markup, and a sitemap.xml carrying full xhtml:link alternates for all eight languages.

7Consent without a plugin

A cookie banner and a cookies page we wrote ourselves — because the site sets nothing that needs consent, and a plugin would have been heavier than the honesty.

8Reduced-motion respected

Every reveal, count-up, chart draw and slider glide checks prefers-reduced-motion and stops animating if the visitor asked it to.

9Unlisted price page

The price lives on its own page, linked from nowhere, absent from the sitemap, shared person to person. Public enough to send, private enough not to be indexed.

The next project could be yours

The first meeting is free and lasts 30 minutes: online, by phone or, if you are in Cluj, over a coffee. Tell us what you want to build, and we will tell you honestly what would work.

Prefer a message? You can reach us on WhatsApp, by email or by phone and we will reply directly.

No preparation and no follow-up pressure. If we are not a good fit, you leave with better questions to ask whoever comes next.