# Nero Studio > A dark, cinematic Astro website for a Rivonia automotive accessories brand: a filterable 51-item catalogue, vehicle collections and enquiry flow, built AI-assisted in hours. Canonical page: https://webvelopment.co.za/work/nero-studio/ Language: en Our work · Website [All our work](https://webvelopment.co.za/work/) ## A catalogue PDF in, a premium brand out Nero Studio is a new automotive accessories and styling business in Rivonia, Sandton. It came to us with a 24-page Signature Collection 2026 catalogue covering two vehicles, the Jetour T2 and the iCAR V23, and an existing corporate identity. It didn’t have a website, product photography that worked on a dark page, or a clear way to say what it was beyond “we sell parts”. We repositioned it as a premium customisation and lifestyle brand rather than a parts importer, and built a single-page brochure site around that idea: Beyond standard. The site leads with the brand, lets buyers browse by vehicle or collection, and turns every product into a qualified enquiry. Checkout and inventory were deliberately left for later. The whole thing (strategy, imagery, build, testing and motion design) took a few hours rather than the weeks a traditional build would have taken. [How we built it with Claude and ChatGPT](https://webvelopment.co.za/insights/websites/ai-assisted-website-build-claude-chatgpt/) has the full workflow. ## Six collections instead of a supplier’s categories The catalogue was organised the way a supplier thinks. We regrouped 52 products into six collections a buyer would recognise: Exterior Styling & Body Kits, Roof Systems & Cargo, Adventure & Overlanding, Lighting & Electronics, Wheels & Finishing, and Protection & Utility. Every product was extracted from the PDF, matched to its SKU and mapped to a vehicle and a collection. A build script turns that into one structured data file, which drives the collection tiles, the vehicle ranges (35 items for the T2, 17 for the V23) and the catalogue grid. When the catalogue changes, the site changes with it. Nobody has to hand-edit 51 product cards. ## A catalogue you can filter, and enquiries that arrive pre-filled The catalogue section filters by vehicle and by collection, with product codes visible on every card. Clicking “Enquire” on any item jumps to the enquiry form with that product already filled in, together with the buyer’s vehicle and preferred collection. The sales conversation starts with the right part and the right car instead of “I saw something on your website”. The form has a hidden anti-spam field, a plain-language privacy notice that references POPIA, an unticked marketing opt-in and a configurable endpoint. Fitment and availability are confirmed on enquiry, and the site says so. It doesn’t overpromise on parts that depend on the vehicle. ## Imagery that didn’t need a studio shoot The hero, collection backgrounds, four Signature Build concepts and the boutique showroom are AI-generated, art-directed to one look: matte-black vehicles, dark studio sets, champagne-gold rim light and deliberate negative space on the left for headlines. Each image was composed to work as a website asset rather than as standalone artwork. We were careful about what those images claim. The Signature Builds (Urban, Explorer, Overland and Signature) are presented as designs in development, with interest registration open. The showroom is captioned as a boutique concept visualisation, so nobody mistakes it for a store they can visit yet. ## A page that moves The client wanted it to feel alive, which meant shimmer and connected dots. We added a cursor-reactive gold constellation behind the hero, neon light that traces card borders and the enquiry form, headings that rise word by word, image wipes, parallax and an occasional glimmer on the “O” of the logo. Motion is easy to overdo, so it has guard-rails. Everything stays in the brand’s gold. Animations pause when they’re off-screen or the tab is hidden. Visitors who ask their device for reduced motion get a fully static page. We verified it at a steady 60fps with no horizontal scroll at 390, 1440 and 1920 pixels wide. ## Built in Astro, and we know every line of it The site runs on Astro with Bootstrap 5 and custom SCSS design tokens sampled from the catalogue itself. That’s why the gold is `#C9A55C` and the type is Poppins: we matched the source rather than guessing. Images are served as responsive AVIF and WebP, and the hero dropped from 1.4 MB to between 8 and 64 KB depending on screen size. Canonical URLs, social tags, structured data and a sitemap are in place, and GitHub Actions handle CI and deployment. The speed came from AI, but the codebase is ours to explain. It isn’t a black box generated in one shot: every section, data file and animation was reviewed, tested in a real browser and fixed where it broke. We can change it, extend it into e-commerce or hand it to another developer without reverse-engineering anything. ## What’s in the gallery The gallery shows the pre-launch build on desktop and mobile: the full homepage, the six collections, the filterable catalogue, the Signature Build concepts, the boutique section and the enquiry form. The cover is rendered in HTML and CSS around real screenshots. [Read how we built it](https://webvelopment.co.za/insights/websites/ai-assisted-website-build-claude-chatgpt/) · [Discuss a website like this](https://webvelopment.co.za/contact/) · [Explore website design](https://webvelopment.co.za/services/websites/website-design/) A closer look ## Nero Studio Project gallery. Open an image and scroll to explore the page. Use the arrow keys to change images and Escape to close. [![Nero Studio — Full homepage · Desktop](https://webvelopment.co.za/images/portfolio/nero-studio/home-desktop.jpg)](https://webvelopment.co.za/images/portfolio/nero-studio/home-desktop.jpg) Nero Studio — Full homepage · Desktop · Pre-launch build · Captured 12 November 2026 [![Nero Studio — Full homepage · Mobile](https://webvelopment.co.za/images/portfolio/nero-studio/home-mobile.jpg)](https://webvelopment.co.za/images/portfolio/nero-studio/home-mobile.jpg) Nero Studio — Full homepage · Mobile · Page excerpt · Pre-launch build · Captured 12 November 2026 [![Nero Studio — The Collections · Desktop](https://webvelopment.co.za/images/portfolio/nero-studio/home-collections-desktop.jpg)](https://webvelopment.co.za/images/portfolio/nero-studio/home-collections-desktop.jpg) Nero Studio — The Collections · Desktop · Pre-launch build · Captured 12 November 2026 [![Nero Studio — Filterable catalogue · Desktop](https://webvelopment.co.za/images/portfolio/nero-studio/home-catalogue-desktop.jpg)](https://webvelopment.co.za/images/portfolio/nero-studio/home-catalogue-desktop.jpg) Nero Studio — Filterable catalogue · Desktop · Pre-launch build · Captured 12 November 2026 [![Nero Studio — Signature Builds concepts · Desktop](https://webvelopment.co.za/images/portfolio/nero-studio/home-builds-desktop.jpg)](https://webvelopment.co.za/images/portfolio/nero-studio/home-builds-desktop.jpg) Nero Studio — Signature Builds concepts · Desktop · Pre-launch build · Captured 12 November 2026 [![Nero Studio — Boutique concept · Desktop](https://webvelopment.co.za/images/portfolio/nero-studio/home-experience-desktop.jpg)](https://webvelopment.co.za/images/portfolio/nero-studio/home-experience-desktop.jpg) Nero Studio — Boutique concept · Desktop · Pre-launch build · Captured 12 November 2026 [![Nero Studio — Filterable catalogue · Mobile](https://webvelopment.co.za/images/portfolio/nero-studio/home-catalogue-mobile.jpg)](https://webvelopment.co.za/images/portfolio/nero-studio/home-catalogue-mobile.jpg) Nero Studio — Filterable catalogue · Mobile · Pre-launch build · Captured 12 November 2026 [![Nero Studio — Enquiry form · Desktop](https://webvelopment.co.za/images/portfolio/nero-studio/home-contact-desktop.jpg)](https://webvelopment.co.za/images/portfolio/nero-studio/home-contact-desktop.jpg) Nero Studio — Enquiry form · Desktop · Pre-launch build · Captured 12 November 2026 More Website work [Website ### SydSen Consult](https://webvelopment.co.za/work/sydsen-consult/)[Website ### Chery Digicars](https://webvelopment.co.za/work/chery-digicars/)[Website ### Ford Bronkhorstspruit](https://webvelopment.co.za/work/ford-bronkhorstspruit/) Keep exploring ## Keep the right things connected. [Website insights ### ChatGPT as Creative Director, Claude as Build Team: A Website in Hours How we took an automotive accessories brand from a catalogue PDF to a tested, animated Astro website in a few hours, and why we still understand every line of the code.](https://webvelopment.co.za/insights/websites/ai-assisted-website-build-claude-chatgpt/)[Websites ### Website design, engineered to launch fast and keep working Figma design, WordPress built the way developers would build it, and direct support after launch. Websites for SMEs, automotive brands, corporates and agencies since 2013.](https://webvelopment.co.za/services/websites/website-design/)[Creative ### Digital strategy that connects your website, paid media and SEO One plan that connects your website, paid media and SEO, written by the team that builds and runs all three.](https://webvelopment.co.za/services/creative/digital-strategy/) Let’s move things forward ## Start a conversation Tell us what you are working towards. We’ll help you find a practical next step. [Let’s talk](https://webvelopment.co.za/contact/)