Case study On load, the handwritten wordmark is drawn from left to right, moves up into the header, and the hero video opens with the same motion. I locked scrolling during the intro to keep the opening sequence intact. From there, scrolling takes over: sections stick to the screen, four videos move upward at different speeds, and the six audience slides slide over one another. The client Georgina Báló cleans sofas, chairs, and mattresses in Pécs and the surrounding area using an industrial extraction machine, with service also available in Budapest. She works alone: she answers the phone, arrives at the location, and does the work herself. She did not have a website before – her entire online presence began with this project: a single-page site with its own booking system. 01 — The custom-coded booking form The visitor enters their name, phone number, and email address, then selects a location from four options. After the selection, the booking form opens a single follow-up field: the district for Budapest or the town name for the 'Other' location. They then choose a day from the Hungarian-language calendar, where dates before today are unavailable. The system immediately checks which times are already booked, so of the seventeen half-hour slots between 9:00 and 17:00, only the free ones can be clicked. They choose furniture from eight items across three categories, specifying quantities for chairs; after every click, the page recalculates the itemised summary and estimated total. After accepting the privacy policy, they submit the booking and pay on site when the job is complete. The fields, pricing, and available times follow MegiClean’s own price list and work schedule – your pricing and scheduling process can be coded the same way, so each incoming request immediately shows who submitted it, what they need, and which time they selected. 02 — Scrolling drives the narrative When the page loads, the handwritten name draws itself from left to right, floats upward, and shrinks into the header logo; in the same motion, the opening video expands from the centre to fill the screen. The three opening words slide down from masked boxes one after another, followed by the subtitle, location line, and button entering from the side. As the visitor scrolls down, the problem section stays pinned to the screen: four videos float upward behind it at different speeds, while the seven lines of text enter one after another with staggered timing. The tipping wine glass and muddy paw start moving when the visitor reaches their corresponding points. I built the sequence this way because visitors first need to recognise their own situation before they will care about the solution. The target audience section also stays pinned: six slides cover one another from the bottom in exact proportion to the scroll position, while six dots on the side show the current position. The header stays hidden over the opening image and appears based on scroll direction, showing the service area and phone number so calling is only one click away. This way, each of the eight original videos always appears with the sentence it belongs to. 03 — What it’s built on I built MegiClean’s entire sales journey into a single public page: after the hero image come the service details, pricing, frequently asked questions, and guarantee, followed by the booking interface on the same page – while a floating button lets visitors return to it from anywhere. The calendar and scrolling use two off-the-shelf libraries; custom code handles pricing, available time slots, booking logic, and section animations. The website’s backend records each booking, and MegiClean can view it in a protected dashboard accessed through a private link. Custom code also means the system can grow with the service. If a new service launches or a new area is added, I add the new offer, price, and booking rules to the existing page, and the new section sends bookings to the same backend. I coded the desktop, tablet, and mobile layouts separately – on mobile, sections stay pinned for a shorter scroll distance and the dot indicator switches to a horizontal layout – so every addition fits properly in all three views. 0 separately rented booking platforms. The calendar, pricing, and incoming booking management all run in the same custom-coded system. The result I structured the page so visitors first recognise themselves in one of the six audience slides, then understand the cleaning process, review the prices, and read the answers to frequently asked questions. At the bottom of the page, they select their furniture, see the estimated total, choose an available time, and book it. If they decide sooner, they can open the booking form at any time using the floating button. Booked appointments are compiled into a list in MegiClean’s secure dashboard, and the customer pays on site once the job is done. Design system The site is built around copper (#B87333), off-white (#FDFCFB), and deep black (#111111). The brand name uses the handwritten Great Vibes, section headings use Cormorant Garamond, and body copy uses Montserrat – while the three words in the hero image are set in Playfair Display. Great Vibes Brand name · 400 The quick brown fox jumps over the lazy dog Cormorant Garamond Heading font · 400 · 600 · 700 The quick brown fox jumps over the lazy dog Montserrat Body font · 400 · 500 · 600 The quick brown fox jumps over the lazy dog Mobile The hero text is centered, the sticky sections span a shorter scroll, and the furniture selector opens into a full-width list – while all seventeen time slots and the estimated total remain on a single screen. Let’s work together MegiClean’s booking rules run directly on the website. For your business, it starts with the questions you currently ask over the phone: prospects enter what they need and when they’re available, and the site shows the price and available appointment times based on your company’s own pricing and rules. That way, the first call is already about the specific request. There is no obligation, and I reply in writing within 24 hours.MegiClean
Deep upholstery cleaning in Pécs, with an industrial machine, by one person.
One form determines what gets cleaned, when, and how much it costs
Scrolling determines what visitors see first and what they see later
One custom-coded page: pricing, availability, and booking management all run in one place
From the opening video to booking an appointment, the visitor stays on the same page
Copper accent and off-white base.
The same path leads to booking on mobile.
On your new website, prospects choose a service, get a price, and book an appointment.
#B87333Copper accent
#FDFCFBOff-white base
#111111Dark section
