Landing page · Custom HTML · 2025

HCC Service — a premium car workshop for top-tier cars in Cherkasy

Лендинг автосервісу для авто середнього і преміум-класу: чіп-тюнінг, ремонт двигунів, турбін і екологічних систем. Слайдер-обкладинка, відгуки, заявка з 3 полями.

Custom HTML

I want a project like this Open the site

HCC Service (Himpas Coast Customs) is a car workshop for mid-range and premium cars in Cherkasy. Specialisation: Stage1/Stage2 chip tuning, engine and turbo repair, emissions systems (EGR, DPF, AdBlue removal) and electronics diagnostics. For the launch we needed a one-page landing site that packs positioning, services, social proof and the team’s credentials into a single scroll and drives the lead into a short request form.

A hero slider with a branded logo mark

The hero is a 6-slide Slick carousel over a darkened gradient background, with a giant calligraphic “НСС” watermark floating in the brand’s blue tones. The first slide carries the key positioning (a top-tier service for top-tier cars) plus a CTA button to the form; the following slides focus on chip tuning, emissions systems, the team and the equipment. The slider arrows and pagination are fixed below the carousel; autoplay runs on slick.js 1.8.1.

HCC Service hero with a Porsche Panamera — Hero slide: a Porsche Panamera, the “НСС” calligraphy in the background, a headline and a “Request a call” CTA.

The team and experience counters

The “We are a team of experts” block combines premium-segment positioning with three key figures on a single screen: 3+ years of experience, 3,300+ jobs completed, 97% satisfied clients. Each figure is its own card with a caption and a workshop illustration (on-board diagnostics, Brembo brake calipers, wheel alignment). On the right — a large photo of a mechanic in a branded denim workwear suit with “НСС” embroidered on the back.

The HCC team and counters — The counters increment from 0 up to the target value on scroll-in; the mechanic’s suit with the brand embroidery is part of the brand’s visual identity.

A benefits grid with real shop-floor scenes

The “Why choose us?” section is 5 cards in an asymmetric grid: modern diagnostic equipment (a FLEX scanner on a laptop), deep expertise on complex cases (a mechanic under the hood with a flashlight), quality parts and software (a turbo held up close by a technician), an individual approach (a client with a technician in the bay), experienced specialists and non-standard jobs (sparks from an angle grinder). All photos are from the workshop itself, no stock.

HCC Service benefits grid — Two large cards set the horizontal rhythm, and three smaller cards below complete the grid while keeping a clear “first impression → detail” hierarchy.

A service catalogue built around an X-ray car silhouette

“Our services” is centred on an X-ray silhouette of a BMW 5-Series sedan in a blue glow, with 6 service flags scattered around it, each connected to the relevant part with thin lines: chip tuning (from the engine), engine and turbo repair, emissions systems (from the exhaust), electronics diagnostics, service maintenance, solving non-standard problems. The composition explains “who we are and what we repair” without a single menu screenshot.

A gallery of jobs with a logo medallion in the centre

The gallery is a 3×3 grid of 8 real workshop photos (a caliper replacement, tyre fitting, a Launch injector test bench, EGR cleaning, an AC system check, suspension repair) with the “Himpas Coast Customs” logo medallion at the centre. Clicking a photo opens Fancybox 3.5.7 in a full-screen view. The composition does two useful things at once: it shows real hands at work, and it re-imprints the logo a second time, right in the middle of the main content area.

HCC Service work gallery — The central medallion in the grid is an original touch that gets the brand logo to read not just in the header, but at the very core of the content.

Social proof: 6 rated reviews

Reviews sit in a 3×2 grid of bright dark-blue cards, each carrying a name (Vitaliy, Petro, Valeriya, Luiza), a 5-star rating and a lively, specific text: a Skoda Octavia A7 with AC failure, a valve cover and vacuum-pump gasket replacement, bulk Motul oil, repairs on VAG-group cars. The tone is conversational, left unpolished into “proper Ukrainian” — and that works faster for trust than sterile-sounding reviews.

HCC customer reviews — Uniform card sizes; the lack of avatars doesn’t hurt — the weight sits on the text and the 5-star rating.

A short request form and an Instagram block

The “Leave a request and we’ll call you back” form has 3 fields (name, phone, comment) plus a CTA button. On the right — a generative image of a sedan with neon “circuits inside” as a nod to chip tuning and diagnostics. Next to it, in the contacts block — opening hours, address, phone numbers and a branded QR code linking to Instagram @hcc_service, which doubles as both a lead channel and a showcase of recent work.

HCC request form — 3 fields is a compromise between qualifying the lead and keeping friction low; the comment field is optional but often gives the manager useful details ahead of the call.

Stack

HTML5 plus plain CSS3 with custom variables, jQuery 3.6.1 for all the interactivity, Slick 1.8.1 (the hero carousel, reviews, the mobile gallery), Fancybox 3.5.7 (the gallery lightbox), the Google Maps JavaScript API (an embedded map for the workshop address), Google Fonts (Oswald + Russo One for headings, Open Sans for body text). No CMS — static HTML, served instantly by a LiteSpeed server.