Cranq is a workshop-industrial React and 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 and utilities (CSS only, no jQuery, no Bootstrap JS bundle)
• Component Architecture: reusable UI components and feature-folder pages
• Centralized Typed Content: all text and 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 and 9 Articles: slug-based routes generated from data
• Booking and 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 and 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 and Framebuilders
• E-Bike Service Centers
• Mobile and On-Site Bike Mechanics
• Wheelbuilders and 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: Envato Elements photography, included for demonstration, no image licence included
• Fonts: Space Grotesk (Florian Karsten) and Inter (Rasmus Andersson), OFL licensed, served locally

Images Notice: The download includes the same photographs as the live demo, sourced from Envato Elements. They are provided for demonstration only and no licence for them is included with your purchase. Before publishing, replace every photograph with your own images or obtain a license for each one from Envato Elements.

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.