Anaplasi

Overview

Anaplasi is a self-initiated concept: a renovation group in Thessaloniki that takes apartments, houses and whole polykatoikies built between the 1960s and 1980s and rebuilds them, either for owners who will live in them or for investors who will rent them out. The company is fictional; the brief was treated as a real one. The site had to show in seconds what a renovation changes, and give a local business a premium identity of its own.

The challenge

• Make the transformation obvious without asking the visitor to click anything.
• Speak to two audiences on one page: people moving in and people investing.
• Build a complete identity from nothing: name, logo, palette, type and photography.
• Ship a Greek-first site with a full English version and no external dependencies.

Design

Red leads. Anaplasi Red fills whole sections, with lime plaster, oxblood and a deep brick around it, all taken from the Byzantine brick of the city. The logo is an arch split down the middle: the left half is an outline, what the team finds, and the right half is solid, what it hands back. The arch comes from the Rotunda, the Arch of Galerius and the walls above Ano Poli.

Commissioner, by Greek type designer Kostas Bartsokas, sets both Greek and Latin, with its flare axis turned up for headlines. JetBrains Mono handles labels and measurements. The layout is full-bleed: full-screen photographs with centred text, and supporting sections further down the page.

The photography was generated in Higgsfield. Each "after" image was made from its "before" image, so the camera position matches in the slider, and every "after" shot includes one red detail. A separate brand guidelines page documents the logo, colour, type, the slider and the tone of voice.

Motion

• the hero photograph settles slowly into place as the page loads;
• the before/after divider, styled as a red measuring tape, sweeps across each photo on its own and moves to the next project every two sweeps, with a progress bar in the active project button;
• dragging the tape or choosing a project hands control to the visitor for five seconds;
• the process timeline fills in along a tape-measure ruler as it scrolls into view.

Visitors who have asked their device to reduce motion get a still slider and no animation.

Features

• Before/after slider: five projects (a facade, living room, kitchen, bathroom and balcony), each with location, build year and weeks on site. It can also be moved with the keyboard.
• Live in it / Let it work: two full-height photo panels, one for homeowners and one for investors.
• Process: five steps plotted on a 16-week ruler, from the free site visit to handover.
• Project grid: six renovations across Toumba, Ano Poli, Ladadika, Kalamaria, Neapoli and Charilaou.
• Site visit form: name, phone, area, property type and goal, with messages in both languages. In the concept it does not send data.
• Brand guidelines: a full page in Greek and English, with downloadable SVG logos.

Built for every screen

As the screen narrows, the header drops the phone number first and then the menu, keeping the logo, language switch and booking button. On phones the slider switches to a 4:3 crop, the two audience panels stack, and the project grid becomes a single column, with no sideways scrolling.

Performance and SEO

It is a static site with no framework and no build step, deployed on Vercel. Fonts, logos and photographs are all served from the project itself, so the site makes no third-party requests. Photographs are compressed, images below the first screen load only when needed, the hero image is preloaded, and assets are cached for a week. The Greek and English pages are linked with hreflang tags, and the favicon ships as SVG, ICO and an Apple touch icon.

Tech stack

HTML, CSS, vanilla JavaScript, Vercel, Higgsfield (GPT Image 2.5 photography), fontTools (logo outlines), self-hosted Commissioner and JetBrains Mono.