Cranq - Bicycle Repair & Customization React Template

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.