01Context
What this was
Crown & Blade Barbershop is the flagship Barbershops demo in the landing-page collection. It was chosen for section depth, conversion flow, and visual polish. Preview: `/lp/barbershops-crown-and-blade-barbershop`.
02Problem
What was broken
Before
Most template landing pages look acceptable but miss the trust signals, service depth, and booking paths a local business actually needs.
What had to change
Each page had to feel specific to the industry: credible copy, clear service structure, responsive design, and a live static preview.
- 01Service menu with live product API and gallery imagery
- 02Booking-forward layout with reviews and local SEO schema
- 03Static Next.js export tuned for fast mobile LCP
03Solution
What I built
Built as a static Next.js export with TypeScript and Tailwind CSS, semantic sections, responsive layouts, and performance-conscious imagery.
Where the vertical requires it, the page includes local JSON APIs for catalog or gallery depth, structured metadata for SEO, and interaction polish that does not hurt first paint.
04Decisions
Key implementation decisions
- 01
Industry-shaped information architecture
Hero, proof, services, and conversion blocks are ordered around how that vertical actually sells.
- 02
Static export with production-shaped assets
Optimized imagery, metadata, and local JSON APIs where the demo needs catalog or gallery depth.
- 03
Conversion-first responsive UI
Mobile booking paths, scannable offers, and CTA hierarchy are built for quick decisions on small screens.
05Impact
Operational impact
- Live `/lp/` preview for sales and portfolio conversations.
- Reusable section patterns across the landing collection without cloning entire codebases.
- Clear vertical reference when scoping client work in the same industry.
06Results
Results
- Reference implementation for Barbershops landing UX.
- Demonstrates vertical-specific copy, layout, and CTA patterns.
- Shareable live preview via /lp/barbershops-crown-and-blade-barbershop.
07Stack
Technology stack
- Frontend
- Next.js, TypeScript, Tailwind CSS
- Delivery
- Static export, optimized images
- Preview
- /lp/barbershops-crown-and-blade-barbershop
- Industry
- Barbershops