The Chair — Barbershop Landing Page
A premium barbershop landing page built for "The Chair", a fictitious neighbourhood barbershop established in 2009. Features a cinematic animated hero, a services & pricing grid, a curated photo gallery, team profiles, and a contact section with Google Maps integration. Built with a custom warm-dark aesthetic using Tailwind CSS design tokens and Framer Motion scroll animations.
Tech Stack
A handcrafted landing page for a neighbourhood barbershop animated, elegant, and sharp.
Key Features
Cinematic Hero Section
Full-viewport hero with a slow-zoom background, layered gradient overlays, script + display typography, and staggered Framer Motion entrance animations that fade and scale into place on load.
Services & Pricing Grid
Six service cards in a responsive 3-column grid with custom SVG icons, pricing, and hover animations that sweep a green accent line across the card border.
Animated Photo Gallery
Masonry-style photo grid with in-view brightness reveal animations, grayscale-to-colour hover transitions, and label overlays fading in from black as images enter the viewport.
Team Profiles
Barber cards with portrait photos, role titles, years of experience badges, and personal speciality descriptions all with scroll-triggered fade-up animations.
Contact & Google Maps
Split-layout contact section with address, phone, and opening hours alongside an embedded Google Maps iframe styled to match the dark theme.
Gallery
Project Goal
Design and build a visually distinctive, fully animated single-page landing site for a fictional premium barbershop demonstrating strong UI/UX sensibilities, advanced CSS design systems, and smooth animation choreography.