Building a Multi-Page Landing Site for a Local Motorcycle Workshop
Garage+62 is a motorcycle workshop in Kembangan, Jakarta Barat, with two locations — a main branch and a secondary branch. The business offers a range of services from routine maintenance to performance modifications like bore-up and porting.
the implementation
Pages Built
The site is structured into five distinct pages, each serving a clear purpose:
01.
Home
the main landing page with a hero section, service previews, workshop location map, FAQ accordion, and customer testimonials. Designed to answer the visitor's most important questions without having to navigate anywhere.
02.
Services
a grid listing of all available service packages with pricing, service type badges, and variant count. Visitors can browse and compare services at a glance.
03.
Service Detail
a dedicated page for each service (e.g. Porting) showing the service image, description, price, available variants by motorcycle model, and a full checklist of what's included in the package.
04.
Location
shows both the main and branch locations with embedded Google Maps, full addresses, and direct links to WhatsApp, Instagram, TikTok, and Google Maps for each location.
05.
FAQ
an accordion-style page with two-column layout covering common questions about services, maintenance schedules, and workshop policies.
06.
Testimonials
a masonry-style grid of real customer reviews, giving social proof in an organized and readable layout.
Dynamic Content with Contentful
Service data — including names, descriptions, pricing, variants, images, and detail checklists — is managed entirely through Contentful. This means the workshop owner can add, update, or remove services without touching a single line of code. The frontend fetches content from Contentful's Delivery API at build time, making the site fast and reducing unnecessary API calls on every page load. The service detail pages are dynamically generated based on the slug from Contentful, keeping the routing clean and scalable.
Component-Based Architecture
The site is built with reusable React components — navigation bar, service cards, location cards, FAQ accordion, testimonial cards, and footer are each isolated components that can be reused across pages. This keeps the codebase organized and makes changes predictable.
Routing and Breadcrumbs
Navigation uses React Router with clean URL-based routing. Each inner page includes a breadcrumb trail (e.g. Garageplus62 / Servis / Porting) so users always know where they are and can navigate back easily — a small but meaningful UX detail.
Design Consistency
The site uses a consistent design language throughout — a warm yellow accent (#F5C518-adjacent) from the Garage+62 brand, clean white surfaces, bold dark typography, and a rounded CTA button style. Tailwind CSS utility classes handle all styling, keeping the CSS footprint minimal and the component styles colocated with the markup.
Deployment on Netlify
The site is deployed on Netlify with automatic deploys triggered from Git. Any content update in Contentful can trigger a rebuild via webhook, ensuring the live site always reflects the latest data without manual intervention.
the frontend stack
Every tool chosen with purpose — from component to deployment.
Next.js
for server-side rendering, file-based routing, and optimized production build
Vite
as the local development build tool for a faster development experience
Tailwind CSS
for utility-first styling across all pages
Contentful
as the headless CMS for managing service content dynamically
Netlify
for deployment and hosting