Metroflow

Author: Colorlib

Released: September 2026

License: CC BY 3.0

Credits: Images from Unsplash

A multi-location trade brand has one job in the first screen: work out which branch the visitor belongs to. Metroflow puts a ZIP finder inside a solid brand-blue hero and routes to a location page template carrying that branch’s own phone number, state licence, manager, team photograph and towns. Add a branch by adding one YAML file.

Built with Astro 7 and Tailwind CSS 4, Metroflow delivers exceptional performance with lightning-fast page loads and a modern development experience. All content lives in simple YAML and Markdown files—edit text, reorder sections, or remove entire blocks without touching any code. The template includes a built-in blog with search and filtering, dark mode with persistent toggle, View Transitions for SPA-like navigation, and a fully responsive design that looks stunning on every device.

Construction Features

• ZIP finder routing to the matching branch page
• Location page template driven by one YAML file per branch
• Per-branch phone, licence, manager and reviews
• Brand guarantee strip in place of a single licence bar
• Brand blue used as a ground, not as trim
• Careers page, which multi-branch trades actually need

Technical Highlights

• Lightning-fast performance with Astro static generation
• Utility-first styling with Tailwind CSS 4.x
• YAML + Markdown content system — edit everything without code
• Built-in blog with search, categories, and Markdown posts
• Dark mode with persistent toggle and flash-free loading
• View Transitions for SPA-like page navigation
• Fully responsive mobile-first design
• SEO optimized with Open Graph, structured data, and sitemap