Melbourne Acid Washing

A high-performance marketing website for a Melbourne-based exterior cleaning business — built with Next.js 16, React 19, TypeScript, and Tailwind CSS v4.

---

Pages

Features

• Custom animated cursor — Rotating crosshair with corner brackets that magnetize to interactive elements. GSAP-powered parallax. Auto-disabled on touch devices.
• GSAP scroll-triggered animations — Per-page entrance profiles with staggered children. Respects prefers-reduced-motion.
• Hero video background — Full-viewport video with dark overlay, floating dot animation, sweep line effect, and a "20% off" badge.
• Infinite marquee trust strip — Licensed, insured, senior discounts — scrolls endlessly with edge fade gradients.
• Bento grid layouts — Used for services preview, service catalog, testimonials, and gallery.
• Mobile drawer navigation — Fullscreen menu with staggered link animations, backdrop blur, body scroll lock, keyboard escape support.
• Contact form — Client-side validation, Nodemailer-powered submission sends both admin notification and customer acknowledgment.
• Scroll position persistence — Per-route scroll restoration via sessionStorage for smooth back/forward navigation.
• Responsive design — Mobile-first breakpoints throughout.

Tech Stack

Architecture

• Server components by default — "use client" only where interactivity is needed (animations, forms, portals).
• Centralized data — All services, navigation, testimonials, pricing, and gallery data live in lib/site-data.ts as typed constants.
• Reusable composables — PageHero, SectionShell, Eyebrow/SectionTitle/BodyText typography components keep pages DRY.
• API route — POST /api/contact validates, sanitises, and dispatches emails via SMTP.
• CSS architecture — Tailwind v4 with @theme directives, custom keyframe animations (drift-float, ring-pulse, sweep, bob, marquee), and CSS variables for brand colours. Zero border-radius by default with opt-in .allow-rounded.

Design System

• Brand colours — Dark (--brand-dark), Blue (--brand-blue), Cyan (--brand-cyan), Soft (--brand-soft), Ink (--brand-ink).
• Typography — Section labels with dash prefix (Eyebrow), display titles, section headings, introductory leads, and body text.
• Components — Button (5 variants + 6 sizes), Card, Input, Select, Textarea, Badge, Separator.
• No rounded corners — Sharp, industrial aesthetic matching the trade.

Gallery Preview

Five before/after pairs displayed in a bento grid with hover zoom + vignette overlay. Images showcase driveways, home exteriors, commercial surfaces, and more.

Contact & Quotes

Multi-channel lead capture: inline quote form, prominent phone number, WhatsApp link, email, and Facebook. Every page drives toward a CTA.