Design System
12 Blöcke · ganze Seite
1280pxStandalone ↗
Akzent · global

Fertige React-Seite zum Kopieren — eigenständiges .tsx mit Tailwind & lucide-react, ohne Abhängigkeit von diesem Repo. Einzelne Sektionen findest du unter Blöcke.

page.tsx
1import { ArrowRight, BadgeCheck, Calendar, Car, Check, ChevronDown, Cog, Gauge, Minus, Snowflake, Wrench } from "lucide-react";
2
3function Hero() {
4 return (
5 <section className="bg-neutral-950 text-neutral-50 py-24 md:py-32">
6 <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 md:grid-cols-2">
7 <div className="flex flex-col">
8 <span className="inline-flex w-fit items-center rounded-full border px-3 py-1 text-xs font-medium text-neutral-300">Meisterbetrieb · TÜV-Servicepartner</span>
9 <h1 className="mt-5 text-4xl font-semibold tracking-tight sm:text-5xl md:text-6xl">Dein Auto. Schneller wieder auf der Straße.</h1>
10 <p className="mt-6 max-w-xl text-lg text-neutral-300">Verbindliche Festpreise, Hol- & Bringservice, alle Marken — in der Werkstatt, die nicht um den heißen Brei redet.</p>
11 <div className="mt-8 flex flex-wrap gap-3">
12 <a href="#termin" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-background text-foreground hover:bg-background/90">Termin online buchen <ArrowRight className="size-4" /></a>
13 <a href="tel:+4923155882" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors border border-white/25 text-current hover:bg-white/10">0231 · 55 88 22</a>
14 </div>
15 </div>
16 <img
17 src="/img/kfz-hero.jpg"
18 alt="Sportlicher Wagen in der abgedunkelten Meisterwerkstatt mit warmem Licht"
19 width={1280}
20 height={720}
21 className="w-full rounded-xl border bg-card shadow-2xl"
22 />
23 </div>
24 </section>
25 );
26}
27
28function Marken() {
29 const logos = [
30 { name: "Volkswagen", Icon: null },
31 { name: "BMW", Icon: null },
32 { name: "Audi", Icon: null },
33 { name: "Mercedes-Benz", Icon: null },
34 { name: "Opel", Icon: null },
35 { name: "Škoda", Icon: null },
36 { name: "Ford", Icon: null },
37 { name: "Tesla", Icon: null },
38 ];
39 return (
40 <section className="bg-muted/40 text-foreground py-16 md:py-20">
41 <div className="mx-auto max-w-7xl px-6">
42 <p className="text-center text-xs font-medium uppercase tracking-widest text-muted-foreground">Alle Marken · Originalteile & Erstausrüsterqualität</p>
43 <div className="mt-10 flex flex-wrap items-center justify-center gap-x-12 gap-y-8">
44 {logos.map((logo) => (
45 <div key={logo.name} className="flex items-center gap-2.5 text-foreground/60">
46 {logo.Icon && <logo.Icon className="size-5" />}
47 <span className="text-lg font-semibold tracking-tight">{logo.name}</span>
48 </div>
49 ))}
50 </div>
51 </div>
52 </section>
53 );
54}
55
56function Leistungen() {
57 const features = [
58 { Icon: Cog, title: "Inspektion & Wartung", description: "Nach Herstellervorgabe, mit digitalem Serviceheft." },
59 { Icon: Wrench, title: "Reparatur & Verschleiß", description: "Bremsen, Kupplung, Auspuff — fair und schnell." },
60 { Icon: Gauge, title: "HU/AU & Diagnose", description: "TÜV-Abnahme im Haus, Fehlerspeicher inklusive." },
61 { Icon: Snowflake, title: "Klima-Service", description: "Desinfektion, Befüllung und Dichtigkeitsprüfung." },
62 { Icon: Car, title: "Unfall & Karosserie", description: "Direkt mit allen Versicherungen abgerechnet." },
63 { Icon: BadgeCheck, title: "Reifen & Einlagerung", description: "Wuchten, Wechsel und sicheres Hotel für deinen Satz." },
64 ];
65 return (
66 <section className="bg-background text-foreground py-20 md:py-28">
67 <div className="mx-auto max-w-7xl px-6">
68 <div className="mx-auto max-w-2xl text-center">
69 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Alles aus einer Hand</h2>
70 <p className="mt-4 text-lg text-muted-foreground">Von der schnellen Diagnose bis zur kompletten Instandsetzung.</p>
71 </div>
72 <div className="mt-16 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
73 {features.map((feature) => (
74 <div key={feature.title} className="rounded-2xl border bg-card p-6">
75 <div className="flex size-11 items-center justify-center rounded-xl bg-primary/10 text-primary">
76 <feature.Icon className="size-5" />
77 </div>
78 <h3 className="mt-5 text-lg font-semibold tracking-tight">{feature.title}</h3>
79 <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{feature.description}</p>
80 </div>
81 ))}
82 </div>
83 </div>
84 </section>
85 );
86}
87
88function Zahlen() {
89 const stats = [
90 { value: "25+", label: "Jahre Meisterbetrieb" },
91 { value: "40.000", label: "Autos repariert" },
92 { value: "4,9★", label: "aus 1.200 Bewertungen" },
93 { value: "48 h", label: "Ø Durchlaufzeit" },
94 ];
95 return (
96 <section className="bg-primary text-primary-foreground py-20 md:py-28">
97 <div className="mx-auto max-w-7xl px-6">
98 <div className="mx-auto max-w-2xl text-center">
99 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Worauf du dich verlässt</h2>
100 </div>
101 <dl className="mt-14 grid grid-cols-2 gap-x-8 gap-y-12 lg:grid-cols-4">
102 {stats.map((stat) => (
103 <div key={stat.label} className="text-center">
104 <dd className="text-4xl font-semibold tracking-tight tabular-nums sm:text-5xl">{stat.value}</dd>
105 <dt className="mt-2 text-sm text-primary-foreground/75">{stat.label}</dt>
106 </div>
107 ))}
108 </dl>
109 </div>
110 </section>
111 );
112}
113
114function Ablauf() {
115 const steps = [
116 { n: "01", Icon: Calendar, title: "Online buchen", description: "Termin in 60 Sekunden — Wunschzeit und Service auswählen." },
117 { n: "02", Icon: Car, title: "Bringen oder holen lassen", description: "Vorbeikommen oder den kostenlosen Hol- & Bringservice nutzen." },
118 { n: "03", Icon: Gauge, title: "Festpreis freigeben", description: "Du bekommst den verbindlichen Preis vorab — schriftlich." },
119 { n: "04", Icon: BadgeCheck, title: "Fertig abholen", description: "Sauber, geprüft und pünktlich — inklusive Probefahrt." },
120 ];
121 return (
122 <section className="bg-background text-foreground py-20 md:py-28">
123 <div className="mx-auto max-w-7xl px-6">
124 <div className="mx-auto max-w-2xl text-center">
125 <p className="text-sm font-semibold uppercase tracking-wider text-primary">So einfach geht's</p>
126 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">In vier Schritten wieder mobil</h2>
127 <p className="mt-4 text-lg text-muted-foreground">Kein Warten in der Schlange, keine bösen Überraschungen.</p>
128 </div>
129 <ol className="mt-16 grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-4">
130 {steps.map((step) => (
131 <li key={step.title} className="flex flex-col items-start">
132 <div className="flex size-14 items-center justify-center rounded-2xl bg-primary/10 text-lg font-semibold text-primary">
133 {step.Icon ? <step.Icon className="size-6" /> : step.n}
134 </div>
135 <h3 className="mt-6 text-lg font-semibold tracking-tight">{step.title}</h3>
136 <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{step.description}</p>
137 </li>
138 ))}
139 </ol>
140 </div>
141 </section>
142 );
143}
144
145function Festpreis() {
146 return (
147 <section className="bg-muted/40 text-foreground py-20 md:py-28">
148 <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 md:grid-cols-2">
149 <div className="">
150 <p className="text-sm font-semibold uppercase tracking-wider text-primary">Festpreis-Versprechen</p>
151 <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Kein Kleingedrucktes. Kein böses Erwachen.</h2>
152 <p className="mt-4 text-lg leading-relaxed text-muted-foreground">Du bekommst vorab einen verbindlichen Festpreis — schriftlich. Was nicht besprochen ist, wird nicht berechnet. Zusatzarbeiten nur nach deiner ausdrücklichen Freigabe.</p>
153 <div className="mt-8 flex flex-wrap gap-3">
154 <a href="#termin" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">Kostenvoranschlag anfragen <ArrowRight className="size-4" /></a>
155 </div>
156 </div>
157 <img
158 src="/img/kfz-workshop.jpg"
159 alt="Moderne Meisterwerkstatt mit Fahrzeug auf der Hebebühne"
160 width={1280}
161 height={960}
162 className="w-full rounded-xl border bg-card shadow-2xl"
163 />
164 </div>
165 </section>
166 );
167}
168
169function Diagnose() {
170 return (
171 <section className="bg-background text-foreground py-20 md:py-28">
172 <div className="mx-auto grid max-w-7xl items-center gap-12 px-6 md:grid-cols-2">
173 <div className="md:order-2">
174 <p className="text-sm font-semibold uppercase tracking-wider text-primary">Digitale Diagnose</p>
175 <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">Wir raten nicht — wir messen.</h2>
176 <p className="mt-4 text-lg leading-relaxed text-muted-foreground">Moderne Fahrzeuge sind rollende Computer. Mit herstellergenauer Diagnosetechnik lesen wir jeden Fehlerspeicher aus, dokumentieren den Befund verständlich und reparieren genau das, was nötig ist. Nicht mehr, nicht weniger.</p>
177 <div className="mt-8 flex flex-wrap gap-3">
178 <a href="#termin" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">Diagnose buchen <ArrowRight className="size-4" /></a>
179 </div>
180 </div>
181 <img
182 src="/img/kfz-diagnostic.jpg"
183 alt="Mechaniker mit Diagnose-Tablet am offenen Motorraum"
184 width={1280}
185 height={960}
186 className="md:order-1 w-full rounded-xl border bg-card shadow-2xl"
187 />
188 </div>
189 </section>
190 );
191}
192
193function Stimmen() {
194 const testimonials = [
195 { quote: "Endlich eine Werkstatt, die anruft, bevor sie etwas macht.", author: "Sabine Vogt", role: "VW Golf VII" },
196 { quote: "Festpreis gehalten, Auto picobello, Leihwagen gratis.", author: "Murat Aydın", role: "BMW 3er" },
197 { quote: "Online gebucht, morgens abgegeben, abends fertig.", author: "Christoph Reiner", role: "Audi A4" },
198 ];
199 return (
200 <section className="bg-background text-foreground py-20 md:py-28">
201 <div className="mx-auto max-w-7xl px-6">
202 <div className="mx-auto max-w-2xl text-center">
203 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Was Kund:innen sagen</h2>
204 </div>
205 <div className="mt-14 grid grid-cols-1 gap-6 md:grid-cols-3">
206 {testimonials.map((item) => (
207 <figure key={item.author} className="flex flex-col rounded-2xl border bg-card p-6">
208 <blockquote className="flex-1 text-[0.95rem] leading-relaxed">&ldquo;{item.quote}&rdquo;</blockquote>
209 <figcaption className="mt-6 flex items-center gap-3 border-t pt-4">
210 <div className="flex size-9 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
211 {item.author.charAt(0)}
212 </div>
213 <div>
214 <div className="text-sm font-medium">{item.author}</div>
215 {item.role && <div className="text-sm text-muted-foreground">{item.role}</div>}
216 </div>
217 </figcaption>
218 </figure>
219 ))}
220 </div>
221 </div>
222 </section>
223 );
224}
225
226function Pakete() {
227 const tiers = [
228 {
229 name: "Sicht-Check",
230 price: "49 €",
231 period: "einmalig",
232 description: "Schnelle, ehrliche Einschätzung.",
233 features: ["35-Punkte-Sichtprüfung", "Fehlerspeicher auslesen", "Sofort-Einschätzung"],
234 cta: { label: "Buchen", href: "#termin" },
235 featured: false,
236 },
237 {
238 name: "Inspektion",
239 price: "189 €",
240 period: "ab",
241 description: "Der Klassiker nach Herstellervorgabe.",
242 features: ["Öl & alle Filter", "Flüssigkeiten prüfen", "Brems- & Reifencheck", "Digitales Serviceheft"],
243 cta: { label: "Buchen", href: "#termin" },
244 featured: true,
245 },
246 {
247 name: "Premium-Service",
248 price: "349 €",
249 period: "ab",
250 description: "Rundum sorglos vor der langen Fahrt.",
251 features: ["Komplette Inspektion", "Klima-Service", "HU/AU-Vorbereitung", "Hol- & Bringservice"],
252 cta: { label: "Buchen", href: "#termin" },
253 featured: false,
254 },
255 ];
256 return (
257 <section className="bg-muted/40 text-foreground py-20 md:py-28">
258 <div className="mx-auto max-w-7xl px-6">
259 <div className="mx-auto max-w-2xl text-center">
260 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Service-Pakete</h2>
261 <p className="mt-4 text-lg text-muted-foreground">Transparente Pauschalen — Endpreis, keine Überraschung.</p>
262 </div>
263 <div className="mx-auto mt-14 grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
264 {tiers.map((tier) => (
265 <div
266 key={tier.name}
267 className={"flex flex-col rounded-2xl border bg-card p-6 " + (tier.featured ? "ring-2 ring-primary shadow-lg" : "")}
268 >
269 {tier.featured && (
270 <span className="mb-4 inline-flex w-fit rounded-full bg-primary px-3 py-1 text-xs font-medium text-primary-foreground">
271 Beliebt
272 </span>
273 )}
274 <h3 className="text-lg font-semibold">{tier.name}</h3>
275 {tier.description && <p className="mt-1 text-sm text-muted-foreground">{tier.description}</p>}
276 <div className="mt-4 flex items-baseline gap-1">
277 <span className="text-4xl font-semibold tracking-tight">{tier.price}</span>
278 {tier.period && <span className="text-sm text-muted-foreground">{tier.period}</span>}
279 </div>
280 <ul className="mt-6 flex flex-1 flex-col gap-3 text-sm">
281 {tier.features.map((feature) => (
282 <li key={feature} className="flex items-start gap-2.5">
283 <Check className="mt-0.5 size-4 shrink-0 text-primary" />
284 <span>{feature}</span>
285 </li>
286 ))}
287 </ul>
288 <a
289 href={tier.cta.href}
290 className={"mt-6 inline-flex items-center justify-center rounded-md px-5 py-2.5 text-sm font-medium transition-colors " + (tier.featured ? "bg-primary text-primary-foreground hover:bg-primary/90" : "border hover:bg-muted")}
291 >
292 {tier.cta.label}
293 </a>
294 </div>
295 ))}
296 </div>
297 </div>
298 </section>
299 );
300}
301
302function Vergleich() {
303 const columns = [
304 { name: "APEX Automotive", highlight: true },
305 { name: "Freie Werkstatt", highlight: false },
306 { name: "Vertragswerkstatt", highlight: false },
307 ];
308 const rows = [
309 { feature: "Verbindlicher Festpreis", values: [true, false, false] },
310 { feature: "Alle Marken", values: [true, true, false] },
311 { feature: "Hol- & Bringservice", values: [true, false, true] },
312 { feature: "Kostenloser Leihwagen", values: [true, false, true] },
313 { feature: "Preisniveau", values: ["Fair", "Günstig", "Hoch"] },
314 { feature: "Herstellergarantie erhalten", values: ["Ja", "Selten", "Ja"] },
315 ];
316 return (
317 <section className="bg-background text-foreground py-20 md:py-28">
318 <div className="mx-auto max-w-4xl px-6">
319 <div className="mx-auto max-w-2xl text-center">
320 <p className="text-sm font-semibold uppercase tracking-wider text-primary">Der Unterschied</p>
321 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Warum APEX statt irgendeine Werkstatt</h2>
322 <p className="mt-4 text-lg text-muted-foreground">Meisterqualität zum fairen Preis — ohne die Nachteile der Extreme.</p>
323 </div>
324 <div className="mt-14 overflow-x-auto">
325 <table className="w-full min-w-[34rem] border-separate border-spacing-0">
326 <thead>
327 <tr>
328 <th className="px-5 pb-5 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground">Funktion</th>
329 {columns.map((col) => (
330 <th key={col.name} className={"px-3 pb-5 text-center text-base font-semibold " + (col.highlight ? "text-primary" : "")}>
331 {col.name}
332 </th>
333 ))}
334 </tr>
335 </thead>
336 <tbody>
337 {rows.map((row) => (
338 <tr key={row.feature}>
339 <td className="border-t px-5 py-4 text-sm font-medium">{row.feature}</td>
340 {row.values.map((value, i) => (
341 <td key={i} className={"border-t px-3 py-4 text-center " + (columns[i].highlight ? "bg-primary/5" : "")}>
342 {typeof value === "boolean" ? (
343 value ? <Check className="mx-auto size-5 text-primary" /> : <Minus className="mx-auto size-4 text-muted-foreground/40" />
344 ) : (
345 <span className="text-sm font-medium">{value}</span>
346 )}
347 </td>
348 ))}
349 </tr>
350 ))}
351 </tbody>
352 </table>
353 </div>
354 </div>
355 </section>
356 );
357}
358
359function Faq() {
360 const faqs = [
361 { question: "Bekomme ich einen Leihwagen?", answer: "Ja — kostenfrei bei jeder Reparatur ab einem halben Tag, solange verfügbar. Einfach beim Termin angeben." },
362 { question: "Repariert ihr alle Marken?", answer: "Ja. Wir arbeiten markenübergreifend mit Originalteilen oder geprüfter Erstausrüsterqualität — ohne Verlust der Herstellergarantie." },
363 { question: "Was kostet die Reparatur vorab?", answer: "Du erhältst immer einen verbindlichen Festpreis, bevor wir loslegen. Zusatzarbeiten führen wir nur nach deiner Freigabe aus." },
364 { question: "Wie schnell bekomme ich einen Termin?", answer: "Online meist innerhalb von 48 Stunden. Notfälle schieben wir am selben Tag dazwischen." },
365 ];
366 return (
367 <section className="bg-muted/40 text-foreground py-20 md:py-28">
368 <div className="mx-auto max-w-3xl px-6">
369 <div className="mx-auto max-w-2xl text-center">
370 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Häufige Fragen</h2>
371 </div>
372 <div className="mt-12 divide-y rounded-2xl border bg-card">
373 {faqs.map((faq) => (
374 <details key={faq.question} className="group p-5 [&_summary]:list-none">
375 <summary className="flex cursor-pointer items-center justify-between gap-4 font-medium">
376 {faq.question}
377 <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180" />
378 </summary>
379 <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{faq.answer}</p>
380 </details>
381 ))}
382 </div>
383 </div>
384 </section>
385 );
386}
387
388function Termin() {
389 return (
390 <section className="bg-neutral-950 text-neutral-50 py-24 md:py-28">
391 <div className="mx-auto flex max-w-3xl flex-col items-center px-6 text-center">
392 <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl">Bereit, wenn du es bist.</h2>
393 <p className="mt-4 max-w-xl text-lg text-neutral-300">Termin in 60 Sekunden gebucht — oder ruf einfach durch.</p>
394 <div className="mt-8 flex flex-wrap justify-center gap-3">
395 <a href="#termin" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors bg-background text-foreground hover:bg-background/90">Termin buchen <ArrowRight className="size-4" /></a>
396 <a href="tel:+4923155882" className="inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-colors border border-white/25 text-current hover:bg-white/10">0231 · 55 88 22</a>
397 </div>
398 </div>
399 </section>
400 );
401}
402
403export default function Page() {
404 return (
405 <main>
406 <Hero />
407 <Marken />
408 <Leistungen />
409 <Zahlen />
410 <Ablauf />
411 <Festpreis />
412 <Diagnose />
413 <Stimmen />
414 <Pakete />
415 <Vergleich />
416 <Faq />
417 <Termin />
418 </main>
419 );
420}