Cranq ist eine React- und TypeScript-Vorlage für die industrielle Werkstatt für Fahrradwerkstätten, Servicewerkstätten, Custombuilder und mobile Fahrradmechaniker. Es wurde mit React 19, TypeScript (strikter Modus), Vite, React Router und Bootstrap 5 entwickelt und kombiniert ein selbstbewusstes Lime-on-Ivory-Design mit einer sauberen, vollständig komponentenbasierten Codebasis, CSS-Design-Tokens, lokal gehosteten Schriftarten

und responsiven Layouts für jede Bildschirmgröße.

Diese Website-Vorlage für Fahrradwerkstätten enthält 16 vorgefertigte Seiten, auf denen beschrieben wird, wie ein Geschäft tatsächlich gebucht wird: die angebotenen Dienstleistungen, was diese Dienstleistungen kosten, die fertigen Sonderanfertigungen, die Mechaniker hinter der Bank und ein Buchungsformular, das den Auftrag erfasst. Alle Texte und Inhalte befinden sich in typisierten Datenmodulen, jede TypeScript-Schnittstelle befindet sich in einer eigenen Datei, und Seiten bestehen aus kleinen wiederverwendbaren Abschnittskomponenten, sodass das Bearbeiten von Text oder das Hinzufügen eines Abschnitts schnell und typsicher ist. Cranq wurde für ein Geschäft gebaut, das möchte, dass die Fahrer bereits ankommen und wissen, was die Arbeit kostet und wie lange sie dauert

.

Die wichtigsten Funktionen

• React 19 + TypeScript : moderne, streng typisierte, komponentenbasierte Codebasis
• Vite : Instant-Dev-Server mit HMR und einem optimierten Produktions-Build
• React Router : 16 Seiten mit einem datengesteuerten Navigationsmenü
• Bootstrap 5 : Grid und Dienstprogramme (nur CSS, kein jQuery, kein Bootstrap-JS-Bundle)
• Komponentenarchitektur : wiederverwendbare UI-Komponenten und Feature-Ordnerseiten
• Zentralisierter typisierter Inhalt : alle Texte und Daten in src/data, alle Schnittstellen in src/interfaces
• Workshop-Industriedesign : Limettenakzent auf warmem elfenbeinfarbenem Grund, dicke, solide Knöpfe, Preisreihen
• SEO-freundliche Blog-Paginierung: Echt crawlbar? page=2 URLs, keine Schaltflächen, auf die nur geklickt werden kann- 6 Service-Detailseiten und 9 Artikel: Aus Daten generierte Slug-basierte Routen
• Buchungs- und Kontaktformulare : Kundenseitige Validierung mit Inline-Fehlern und Erfolgsstatus
• Filterable Build Gallery : Die Kategoriefilterung wird im React-Status durchgeführt
• 100% responsives Design : auf Desktop, Tablet und Handy geprüft
• CSS-Design-Tokens : globale Farben, Abstände und Typografie über CSS-Variablen
• Lokale Schriftarten : Space Grotesk und Inter gebündelt, vollständig offline, keine CDN-Anfragen
• Vollständige Dokumentation enthalten : Einrichtung, Struktur, Anpassung und Bereitstellung

Ideal für

• Fahrradwerkstätten
• Fahrradservice-Werkstätten
• Custombike-Hersteller und Framebuilder
• E-Bike-Servicezentren
• Mobiler Fahrradmechaniker vor Ort
• Radbauer und Komponentenspezialisten
• Studios zur Fahrradmontage
• Fahrradgeschäfte mit Servicebank

Eingeschlossene Seiten

• Zuhause
• Über
• Dienstleistungen
• Einzelheiten zum Service
• Maßgeschneiderte Builds
• Galerie erstellen
• Preisgestaltung
• Termin buchen
• Mannschaft
• Testimonials
• Häufig gestellte Fragen
• Blog
• Blog-Single
• Kontakt
• Kommt bald
• 404 Seite

Credits

• Bibliothek: react.dev (React + TypeScript)
• Tool erstellen: vite.dev
• Routenplanung: reactrouter.com
• Framework: getbootstrap.com (Bootstrap 5, CSS-Grid und Dienstprogramme)
• Icons: Benutzerdefinierte Inline-SVG-Symbole
• Bilder: Nur Platzhalterbilder, Fotos sind nicht im Download enthalten
• Schriftarten: Space Grotesk (Florian Karsten) und Inter (Rasmus Andersson), OFL-lizenziert, lokal bedient

Hinweis zu Bildern: Das Download-Paket enthält neutrale Platzhalterbilder anstelle aller Fotos. Jeder Platzhalter trägt den gleichen Dateinamen wie das Bild, das er ersetzt, und ist mit der exakten Größe beschriftet, die das Feld benötigt, sodass Sie Ihr eigenes Bildmaterial direkt einfügen können, ohne dass der Code geändert werden muss. Die Live-Demo verwendet Fotos von Envato Elements, für die eine separate Lizenz erforderlich ist und nicht weiterverbreitet wird. Ersetzen Sie die Platzhalter vor der Veröffentlichung durch Ihre eigenen lizenzierten Bilder. Vorgeschlagene Quellen: [Envato Elements](https://raj.ptkmovies.fun/), [Unsplash oder Pexels](https://unsplash.com/)

. [

Bitte beachten Sie: Cranq ist eine einseitige React-Anwendung, keine statische HTML-Vorlage und kein Wordpress-Thema. Es erfordert Node.js und einen Build-Schritt (Vite). Grundkenntnisse in React, TypeScript und der Befehlszeile

werden empfohlen.](https://www.pexels.com/)