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.
Instant & Independent Updates
The workshop owner can easily add new service packages, update pricing, or change photos on their own—without needing to hire a developer. Whenever a change is made, the website automatically refreshes with the latest information.
Consistent & Organized Design
Every building block of the site—from service cards and customer reviews to location maps—is built using a unified design system. This keeps the layout organized, professional, and familiar to browse.
Clear Navigation Clues
Helpful page trails (like Garage+62 / Services / Porting) appear at the top of inner pages. This small detail ensures visitors never get lost and can jump back to previous pages in one tap.
Bold Brand Identity
The design highlights Garage+62's energetic signature yellow accents, crisp white surfaces, and bold typography. Eye-catching, rounded buttons guide visitors straight to booking or asking questions.
Always Live & Reliable
Automated publishing systems ensure the website remains ultra-fast, smooth to load, and available 24/7 without downtime.
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