Web Project

Melbourne Acid Washing

A high-performance marketing website for a Melbourne-based exterior cleaning business.

Live Demo Source Code

Stars

Forks

Open Issues

Watchers

Languages

4Languages

TypeScript81%
HTML16%
CSS3%
JavaScript0%

Pages

Route	Sections
`/`	Hero with video background, Trust marquee, Services bento grid, Testimonials, FAQ accordion, CTA
`/services`	Hero, 6-service catalog in bento layout, 3-tier pricing guide
`/gallery`	Hero, Before/after image gallery with hover reveals
`/contact`	Hero, Contact details + form, Map placeholder
`/privacy-policy`	Hero, Policy sections
`/terms-and-conditions`	Hero, Terms sections
`404`	Custom not-found with navigation links

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

Layer	Technology
Framework	Next.js 16 (App Router)
UI Library	React 19
Styling	Tailwind CSS v4 with CSS custom properties
Components	shadcn/ui (base-ui/react primitives)
Animations	GSAP + ScrollTrigger
Icons	Lucide React, react-icons
Email	Nodemailer
Fonts	Manrope (body), Space Grotesk (headings)
Deployment	`output: "standalone"`

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.

Melbourne Acid Washing

Languages

Navigate

Tools

Live Snapshot

Repository

Contributors

README

Melbourne Acid Washing

Pages

Features

Tech Stack

Architecture

Design System

Gallery Preview

Contact & Quotes