RemontPro — Apartment Renovation Company Concept Site

The brief

Show what a mid-to-premium renovation company’s website should look like — not “an orange-and-blue 2015 landing with sunflowers,” but a strict minimalist constructor that telegraphs professionalism from the first screen: fixed estimate, 0% instalments, 3-year warranty, in-house crews without subcontractors.

The “Minimal Renovation” concept: a warm off-white #fcf8f8 as the canvas of cleanliness, charcoal ink #1c1b1a for contrast and weight, slate-blue #515f74 for accents and CTAs. A single font — Inter, no serifs, no decoration. The tone is calm and assured, without “sales pressure.”

The solution

The starting point was a custom “Minimal Renovation” design system: seven surface tokens from pure white #ffffff to warm grey #e5e2e1, a charcoal ink base with a soft variant, a slate-blue accent with a light accent-light for active states, a single Inter 400–800 family, 4–24px radii, thin shadows with a charcoal undertone on hover. From four concept screens (home, portfolio, calculator, contacts) — manual assembly into a long one-pager with advanced interactivity.

Live calculator with estimate breakdown

Not “leave your phone — we’ll send the estimate,” but a real-time recalculation:

• Renovation type — Cosmetic 4,500 / Capital 8,500 / Designer 15,000 ₽/m²
• Area — 20–200 m² slider, step 5
• Rooms — 1–5+ slider (for context)
• Options — 4 checkboxes (plumbing, electrics, windows, stretch ceilings) with fixed adds
• Urgent — a custom toggle switch with a ×1.2 multiplier

The sticky result panel sits in a dark fill (contrast with the light background) and shows the breakdown: base cost → materials (~50% of base) → options → total. Formatted via toLocaleString('ru-RU') for thousands separators.

Unique ‘Drafting Lines’ background animation

The defining feature versus a typical renovation site — a hand-crafted visual language that references blueprints and measurements. No generic “particles” or “orange dots”:

• Mesh gradient drift — a global background layer with three radial slate-blue gradients drifting on a 28-second cycle
• Floor plan SVG drawing — apartment plan lines in the hero and contacts get drawn via stroke-dasharray: 600 and stroke-dashoffset with delays between paths (14 s cycle) — an architectural-sketch effect of a plan drawing itself
• Ruler tape lines — horizontal “measuring tapes” with thin tick marks (via CSS background-image from thin gradients) drift on the sides of Stats / Renovation types / Calculator / FAQ at different speeds (22 and 28 s)
• Pencil sweep — a diagonal “pencil stroke” passes through Portfolio and Reviews — a dense gradient line at 49–51% with transparent edges glides over 9 s
• Underline-draw in the hero — after the letter-reveal title, a horizontal line grows left-to-right under “4,500 ₽/m²” (1.4 s, cubic-bezier)

All disabled under @media (prefers-reduced-motion: reduce).

Portfolio with chip filters

6 completed projects (Apartment at ‘Symbol’ compound, ‘Neva Tauros’ loft, Patriarch Ponds studio, Chistye Prudy 2-bedroom, Khamovniki 3-bedroom, Kuntsevo family). Each card — a 4:3 photo with a scale effect on hover, the renovation type in uppercase caps, area and timeline, price and a “View” link. The chip filter (All / Designer / Capital / Cosmetic) toggles visibility via proj-hidden.

3 renovation types with a ‘Hit’ highlight

The “Capital” card is the only one with border-2 border-ink and a “Hit” badge instead of a thin outline. Each card has a 16:10 photo, description, 3 inclusion bullets with green checkmarks, a per-m² price, and a “Calculate →” link to the calculator.

Process 01–06

6 cards with oversized number badges (absolute -top-5 -left-5 w-14 h-14) in black fill. The stage duration is highlighted slate-blue (2 days → 4–6 weeks). 3-column grid on desktop, 1 column on mobile. Scroll-reveal stagger at 100 ms.

Stats as an inverted dark block

Between the hero and the renovation types — a black block with white text and an inverted tape-measure pattern in the background (filter: invert(1)). Numbers tick up from 0: 1500+ projects / 12 years / 3-year warranty / 0% instalments. The contrast breaks the page into distinct visual zones.

Contacts with an embedded measurement form

Not “phone + address,” but a full form: name, phone, area, renovation type, comment + a “Book a free measurement” block with <input type="date">. Submit morphs the button into ”✓ Request sent — we’ll be in touch within an hour.” A sidebar carries 4 contact cards (phone, messengers, email, office).

The outcome

The site is live at remontpro.nazarov-evgeniy.pro over HTTPS (Let’s Encrypt), loading in milliseconds (~64 KB index.html). No backend — this is a concept demo. For production: hook the form to amoCRM or Bitrix24, integrate a chatbot for qualification, add a full portfolio with before/after photo galleries.

Architecturally ready to scale: pages per renovation type (/design-project/, /turnkey-renovation/), a client cabinet with real-time progress tracking, sections on materials and partners — the structure and styles allow this without a refactor.

Tech stack

• Frontend: Vanilla HTML5 + Tailwind CSS (CDN, no build) + Vanilla JS
• Animations: CSS @keyframes (Ken Burns, mesh drift, SVG floor plan draw via stroke-dasharray, ruler drift, pencil sweep, underline draw, letter reveal), IntersectionObserver for scroll-reveal and counters, easeOutCubic easing, a custom toggle switch
• Typography: Inter 400–800 as the only font (headings + body), Material Symbols (icons)
• Imagery: Unsplash for portfolio and hero, SVG for floor plans and background animations
• UX patterns: live calculator with an ‘Urgent’ toggle, chip portfolio filters without reload, sticky result panel with an estimate breakdown, an embedded measurement form inside the main contact form
• Design stage: in-house “Minimal Renovation” design system (off-white + charcoal + slate-blue, Inter only, shadows, radii, spacing tokens) for a mid-to-premium renovation brand concept
• Hosting: own VPS, Nginx + Let’s Encrypt SSL