Auto Grifon: new website for a Peugeot dealer in Zagreb
Auto Grifon, at Koledovčina 8 in Zagreb, is an authorised Peugeot dealer and a service centre for Peugeot and Citroën. Their website was an old WordPress install that had grown for years and was due for a fresh start. I built a completely new site from scratch and put it in place of the old one at www.autogrifon.hr.
The design direction is called "Allure". The site is cinematic and almost black and white, and the colour comes from the car photographs. The homepage says at once who they are and where, with the address, phone numbers and opening hours on the first screen. Right below are four paths for the visitor: a new Peugeot, service, used cars and a quote.
On the homepage the models move sideways as the visitor scrolls, followed by "from" prices and a section on electric models. On the All vehicles page, 12 models can be filtered by type and powertrain. The 208, 2008, 3008 and 5008 get the full treatment: a large photograph, technical figures, gallery, design and specifications, with a link to the current PDF price list, and the 208, 2008 and 3008 also show a "from" price. The other models have a shorter page. Images and data come from peugeot.hr.
The Service page brings together work on Peugeot and Citroën cars, bodywork, original parts, warranty and the loyalty club. A service request has three steps: the car and type of work, a day in the calendar, then contact details. Peugeot owners can also use the official online booking. The test drive and quote forms already know which model the visitor means, and the enquiry reaches Auto Grifon by email. On mobile, a fixed bar at the bottom offers Call, Service and Enquiry.
Part of the work does not show in the pictures. I migrated 319 news and special offer posts from the old site, and those without an image received a themed one. Almost 400 old addresses redirect to the new ones so that ads and links keep working, and Google Tag Manager and Cookiebot stayed the same. The new site also has an updated legal notice, a privacy policy, a sitemap and a custom 404 page. The site first lived on a test address until the client had reviewed it.
Technologies: Static HTML, CSS and JavaScript with no framework, assembled from JSON content by a custom Python generator. Animations run on GSAP and ScrollTrigger, and scrolling on Lenis. Images are WebP in several sizes. The forms run on PHP. Fonts are Archivo and Inter.
