Cranq is a workshop-industrial React + TypeScript template for bicycle repair shops, service workshops, custom builders, and mobile bike mechanics. Built with React 19, TypeScript (strict mode), Vite, React Router, and Bootstrap 5, it pairs a confident lime-on-ivory design with a clean, fully component-based codebase, CSS design tokens, locally hosted fonts, and responsive layouts across every screen size.

This bicycle workshop website template includes 16 ready-made pages covering how a shop actually gets booked: the services it offers, what those services cost, the custom builds it has finished, the mechanics behind the bench, and a booking form that captures the job. All copy and content live in typed data modules, every TypeScript interface sits in its own file, and pages are composed from small reusable section components, so editing text or adding a section is fast and type-safe. Cranq is built for a shop that wants riders to arrive already knowing what the work costs and how long it takes.

Key Features

React 19 + TypeScript: modern, strictly typed, component-based codebase
Vite: instant dev server with HMR and an optimized production build
React Router: 16 pages with a data-driven navigation menu
Bootstrap 5: grid & utilities (CSS only, no jQuery, no Bootstrap JS bundle)
Component Architecture: reusable UI components and feature-folder pages
Centralized Typed Content: all text/data in src/data, all interfaces in src/interfaces
Workshop-Industrial Design: lime accent on a warm ivory ground, chunky solid buttons, price rows
SEO-Friendly Blog Pagination: real crawlable ?page=2 URLs, not click-only buttons
6 Service Detail Pages & 9 Articles: slug-based routes generated from data
Booking & Contact Forms: client-side validation with inline errors and a success state
Filterable Build Gallery: category filtering handled in React state
100% Responsive Design: checked on desktop, tablet, and mobile
CSS Design Tokens: global color, spacing, and typography via CSS variables
Local Fonts: Space Grotesk & Inter bundled, fully offline, no CDN requests
Full Documentation Included: setup, structure, customization, and deployment

Ideal For

Bicycle Repair Shops
Bike Service Workshops
Custom Bike Builders & Framebuilders
E-Bike Service Centers
Mobile & On-Site Bike Mechanics
Wheelbuilders & Component Specialists
Bike Fitting Studios
Cycle Stores With a Service Bench

Pages Included

Home
About
Services
Service Detail
Custom Builds
Build Gallery
Pricing
Book Appointment
Team
Testimonials
FAQ
Blog
Blog Single
Contact
Coming Soon
404 Page

Credits

Library: react.dev (React + TypeScript)
Build tool: vite.dev
Routing: reactrouter.com
Framework: getbootstrap.com (Bootstrap 5, CSS grid and utilities)
Icons: Custom inline SVG icons
Images: Placeholder images only. Photos are NOT included in the download.
Fonts: Space Grotesk (Florian Karsten) & Inter (Rasmus Andersson), OFL licensed, served locally

Images Notice: The download package ships neutral placeholder images in place of all photographs. Each placeholder carries the same filename as the image it replaces and is labelled with the exact size that slot needs, so you can drop your own artwork straight in with no code changes. The live demo uses photography from Envato Elements, which requires a separate license and is not redistributed. Replace the placeholders with your own licensed images before publishing. Suggested sources: Envato Elements, Unsplash, or Pexels.

Please note: Cranq is a React single-page application, not a static HTML template and not a WordPress theme. It requires Node.js and a build step (Vite). Basic familiarity with React, TypeScript, and the command line is recommended.

Cranq - Bicycle Repair & Customization React Template