bender/7d69eae8-efb7-4808-9f75-7c7da211c874
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-03-03 13:03:03 +00:00
commit 48ba49e3c2
632 changed files with 84039 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
src/app/dienstleistungen/page.tsx Normal file
View File

@@ -0,0 +1,181 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Briefcase, Award, Users, TrendingUp, MessageCircle, Wrench, FileText, DollarSign } from "lucide-react";
import Link from "next/link";
export default function ServicesPage() {
const navItems = [
{ name: "Startseite", id: "/" },
{ name: "Dienstleistungen", id: "/dienstleistungen" },
{ name: "Über uns", id: "/uber-uns" },
{ name: "FAQ", id: "/faq" },
{ name: "Kontakt", id: "/kontakt" },
];
const footerColumns = [
{
title: "Dienstleistungen",
items: [
{ label: "Unfallgutachten", href: "/dienstleistungen" },
{ label: "Wertermittlung", href: "/dienstleistungen" },
{ label: "Oldtimer-Gutachten", href: "/dienstleistungen" },
{ label: "Flotten-Gutachten", href: "/dienstleistungen" },
],
},
{
title: "Unternehmen",
items: [
{ label: "Über uns", href: "/uber-uns" },
{ label: "Unser Team", href: "/uber-uns" },
{ label: "Blog", href: "#" },
{ label: "Karriere", href: "#" },
],
},
{
title: "Kontakt",
items: [
{ label: "Kontaktformular", href: "/kontakt" },
{ label: "Tel: 030 - 123 456 789", href: "tel:+493012345789" },
{ label: "Email: info@kfz-gutachter-berlin.de", href: "mailto:info@kfz-gutachter-berlin.de" },
{ label: "Adresse", href: "#" },
],
},
{
title: "Rechtliches",
items: [
{ label: "Impressum", href: "#" },
{ label: "Datenschutz", href: "#" },
{ label: "AGB", href: "#" },
{ label: "Disclaimer", href: "#" },
],
},
];
const CustomNavbarWrapper = () => (
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems.map((item) => ({
name: item.name,
id: item.id,
}))}
button={{
text: "Jetzt anfragen",
href: "/kontakt",
}}
brandName="KFZ Gutachter Berlin"
/>
</div>
);
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<CustomNavbarWrapper />
<div id="services-intro" data-section="services-intro">
<SplitAbout
title="Unsere Dienstleistungen"
description="Wir bieten ein umfassendes Spektrum an Gutachtendienstleistungen für alle Anforderungen. Jede Leistung wird mit höchster Fachkompetenz und Zuverlässigkeit erbracht."
tag="Vollständiges Leistungsspektrum"
tagAnimation="slide-up"
bulletPoints={[
{
icon: Wrench,
title: "Unfallschadengutachten",
description: "Detaillierte Analyse und Dokumentation von Unfallschäden für Versicherungen und Gerichte.",
},
{
icon: FileText,
title: "Wertermittlung",
description: "Unabhängige und sachliche Bewertung von Fahrzeugen vor und nach Schaden.",
},
{
icon: DollarSign,
title: "Kaufberatungsgutachten",
description: "Professionelle Inspektionen und Bewertungen vor dem Kauf eines Fahrzeugs.",
},
{
icon: Award,
title: "Oldtimer-Gutachten",
description: "Spezielle Expertise für historische Fahrzeuge und Klassiker mit authentischer Bewertung.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/confident-smiling-businesspeople-sitting-together-business-meeting_23-2147923338.jpg"
imageAlt="Unsere Dienstleistungen"
imagePosition="right"
textboxLayout="default"
mediaAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="service-features" data-section="service-features">
<FeatureBorderGlow
title="Was unsere Dienstleistungen auszeichnet"
description="Qualitätsmerkmale, die unsere Gutachten zur ersten Wahl machen."
features={[
{
icon: Award,
title: "TÜV-Zertifiziert",
description: "Alle Sachverständigen sind TÜV-zertifiziert und VDSI-anerkannt.",
},
{
icon: Users,
title: "Erfahrenes Team",
description: "Über 15 Jahre Erfahrung in der professionellen Fahrzeugbegutachtung.",
},
{
icon: Briefcase,
title: "Gerichtliche Anerkennung",
description: "Alle Gutachten sind vor Gericht anerkannt und vollständig dokumentiert.",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Dienstleistung anfragen"
tagIcon={MessageCircle}
tagAnimation="slide-up"
title="Wählen Sie Ihre Dienstleistung"
description="Kontaktieren Sie uns noch heute und erfahren Sie, wie wir Sie unterstützen können. Wir beraten Sie kostenlos und unverbindlich."
buttons={[
{ text: "Jetzt anfragen", href: "/kontakt" },
{ text: "Preise ansehen", href: "/preise" },
]}
buttonAnimation="slide-up"
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="KFZ Gutachter Berlin"
columns={footerColumns}
copyrightText="© 2025 KFZ Gutachter Berlin. Alle Rechte vorbehalten."
/>
</div>
</ThemeProvider>
);
}

169
src/app/faq/page.tsx Normal file
View File

@@ -0,0 +1,169 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { MessageCircle } from "lucide-react";
import Link from "next/link";
export default function FAQPage() {
const navItems = [
{ name: "Startseite", id: "/" },
{ name: "Dienstleistungen", id: "/dienstleistungen" },
{ name: "Über uns", id: "/uber-uns" },
{ name: "FAQ", id: "/faq" },
{ name: "Kontakt", id: "/kontakt" },
];
const footerColumns = [
{
title: "Dienstleistungen",
items: [
{ label: "Unfallgutachten", href: "/dienstleistungen" },
{ label: "Wertermittlung", href: "/dienstleistungen" },
{ label: "Oldtimer-Gutachten", href: "/dienstleistungen" },
{ label: "Flotten-Gutachten", href: "/dienstleistungen" },
],
},
{
title: "Unternehmen",
items: [
{ label: "Über uns", href: "/uber-uns" },
{ label: "Unser Team", href: "/uber-uns" },
{ label: "Blog", href: "#" },
{ label: "Karriere", href: "#" },
],
},
{
title: "Kontakt",
items: [
{ label: "Kontaktformular", href: "/kontakt" },
{ label: "Tel: 030 - 123 456 789", href: "tel:+493012345789" },
{ label: "Email: info@kfz-gutachter-berlin.de", href: "mailto:info@kfz-gutachter-berlin.de" },
{ label: "Adresse", href: "#" },
],
},
{
title: "Rechtliches",
items: [
{ label: "Impressum", href: "#" },
{ label: "Datenschutz", href: "#" },
{ label: "AGB", href: "#" },
{ label: "Disclaimer", href: "#" },
],
},
];
const CustomNavbarWrapper = () => (
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems.map((item) => ({
name: item.name,
id: item.id,
}))}
button={{
text: "Jetzt anfragen",
href: "/kontakt",
}}
brandName="KFZ Gutachter Berlin"
/>
</div>
);
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<CustomNavbarWrapper />
<div id="faq" data-section="faq">
<FaqDouble
title="Häufig gestellte Fragen"
description="Antworten auf die wichtigsten Fragen rund um unsere Gutachtendienstleistungen."
faqs={[
{
id: "1",
title: "Wie lange dauert ein Gutachten?",
content: "Die Vor-Ort-Besichtigung dauert normalerweise 1-2 Stunden. Die vollständige Berichterstellung erfolgt in der Regel innerhalb von 24-48 Stunden nach Besichtigung. Bei Eilanträgen können wir schnellere Lösungen anbieten.",
},
{
id: "2",
title: "Was kostet ein KFZ-Gutachten?",
content: "Die Kosten richten sich nach Gutachtenart und Fahrzeugtyp. Unfallgutachten beginnen ab 150 Euro. Eine detaillierte Kostenaufstellung erfolgt vor Leistungserbringung. Alle Preise sind nach BEMA-Gebührenordnung kalkuliert.",
},
{
id: "3",
title: "Kommt ihr zu mir nach Hause?",
content: "Ja, wir kommen gerne zu Ihnen. Die Fahrtkosten sind kostenlos in ganz Berlin und dem näheren Umland. Bei Werkstätten oder Versicherungen führen wir die Besichtigung vor Ort durch.",
},
{
id: "4",
title: "Sind eure Gutachten gerichtsfest?",
content: "Ja, alle unsere Gutachten sind gerichtsfest und von Gerichten anerkannt. Wir arbeiten nach den höchsten Standards und sind jederzeit bereit, unsere Ergebnisse vor Gericht zu vertreten.",
},
{
id: "5",
title: "Welche Gutachtenarten bietet ihr an?",
content: "Wir bieten an: Unfallschadengutachten, Wertermittlungen, Oldtimer- und Klassiker-Gutachten, Kaufberatungsgutachten, Gewerbliche Flottengutachten, Weiterschadenprognosen und Schadensersatzgutachten.",
},
{
id: "6",
title: "Wer bezahlt das Gutachten?",
content: "Bei Versicherungsfällen trägt in der Regel die Versicherung die Kosten. Bei privaten Ankäufen oder Verkäufen können wir flexible Lösungen finden. Klären Sie dies am besten vorher mit Ihrer Versicherung oder dem jeweiligen Partner.",
},
{
id: "7",
title: "Wie kann ich ein Gutachten beauftragen?",
content: "Kontaktieren Sie uns per Telefon, E-Mail oder nutzen Sie unser Online-Anfrageformular. Wir vereinbaren dann einen Termin zur Besichtigung. Eine schriftliche Bestätigung erhalten Sie per E-Mail mit allen wichtigen Informationen.",
},
{
id: "8",
title: "Seid ihr auch außerhalb Berlins tätig?",
content: "Ja, wir bieten Dienstleistungen in Berlin und dem näheren Umland an. Für Anfragen außerhalb unseres Standardbereichs kontaktieren Sie uns bitte direkt – wir prüfen gerne eine Lösung.",
},
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="smooth"
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Weitere Fragen?"
tagIcon={MessageCircle}
tagAnimation="slide-up"
title="Wir helfen Ihnen gerne weiter"
description="Haben Sie noch Fragen, die nicht beantwortet wurden? Kontaktieren Sie uns direkt – unser Team ist schnell und freundlich für Sie erreichbar."
buttons={[
{ text: "Kontakt aufnehmen", href: "/kontakt" },
{ text: "Angebot anfordern", href: "/dienstleistungen" },
]}
buttonAnimation="slide-up"
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="KFZ Gutachter Berlin"
columns={footerColumns}
copyrightText="© 2025 KFZ Gutachter Berlin. Alle Rechte vorbehalten."
/>
</div>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

5
src/app/globals.css Normal file
View File

@@ -0,0 +1,5 @@
@import "tailwindcss";
@import "./styles/variables.css";
@import "./styles/theme.css";
@import "./styles/utilities.css";
@import "./styles/base.css";

151
src/app/kontakt/page.tsx Normal file
View File

@@ -0,0 +1,151 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { MapPin, Phone, Mail, Clock } from "lucide-react";
import Link from "next/link";
export default function ContactPage() {
const navItems = [
{ name: "Startseite", id: "/" },
{ name: "Dienstleistungen", id: "/dienstleistungen" },
{ name: "Über uns", id: "/uber-uns" },
{ name: "FAQ", id: "/faq" },
{ name: "Kontakt", id: "/kontakt" },
];
const footerColumns = [
{
title: "Dienstleistungen",
items: [
{ label: "Unfallgutachten", href: "/dienstleistungen" },
{ label: "Wertermittlung", href: "/dienstleistungen" },
{ label: "Oldtimer-Gutachten", href: "/dienstleistungen" },
{ label: "Flotten-Gutachten", href: "/dienstleistungen" },
],
},
{
title: "Unternehmen",
items: [
{ label: "Über uns", href: "/uber-uns" },
{ label: "Unser Team", href: "/uber-uns" },
{ label: "Blog", href: "#" },
{ label: "Karriere", href: "#" },
],
},
{
title: "Kontakt",
items: [
{ label: "Kontaktformular", href: "/kontakt" },
{ label: "Tel: 030 - 123 456 789", href: "tel:+493012345789" },
{ label: "Email: info@kfz-gutachter-berlin.de", href: "mailto:info@kfz-gutachter-berlin.de" },
{ label: "Adresse", href: "#" },
],
},
{
title: "Rechtliches",
items: [
{ label: "Impressum", href: "#" },
{ label: "Datenschutz", href: "#" },
{ label: "AGB", href: "#" },
{ label: "Disclaimer", href: "#" },
],
},
];
const CustomNavbarWrapper = () => (
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems.map((item) => ({
name: item.name,
id: item.id,
}))}
button={{
text: "Jetzt anfragen",
href: "/kontakt",
}}
brandName="KFZ Gutachter Berlin"
/>
</div>
);
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<CustomNavbarWrapper />
<div id="contact-info" data-section="contact-info">
<SplitAbout
title="Kontaktieren Sie uns"
description="Wir sind gerne für Sie da und beantworten Ihre Fragen schnell und unkompliziert. Erreichen Sie uns über mehrere Kanäle."
tag="Wir freuen uns auf Sie"
tagAnimation="slide-up"
bulletPoints={[
{
icon: Phone,
title: "Telefonisch",
description: "Tel: 030 - 123 456 789 | Montag-Freitag, 9:00-18:00 Uhr | Samstag nach Vereinbarung",
},
{
icon: Mail,
title: "Per E-Mail",
description: "Email: info@kfz-gutachter-berlin.de | Wir antworten in der Regel innerhalb von 24 Stunden",
},
{
icon: MapPin,
title: "Persönlich",
description: "Besuchen Sie unser Büro in Berlin-Mitte. Termine nach Vereinbarung.",
},
{
icon: Clock,
title: "Schnelle Verfügbarkeit",
description: "Notfälle und Eilaufträge können auch außerhalb der regulären Geschäftszeiten bearbeitet werden.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/confident-smiling-businesspeople-sitting-together-business-meeting_23-2147923338.jpg"
imageAlt="Kontaktinformationen"
imagePosition="right"
textboxLayout="default"
mediaAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Jetzt anfragen"
title="Gutachten direkt anfordern"
description="Füllen Sie unser Anforderungsformular aus oder rufen Sie uns direkt an. Wir kümmern uns um den Rest und vereinbaren einen passenden Termin für Sie."
buttons={[
{ text: "Online-Anfrage stellen", href: "#" },
{ text: "Tel: 030 - 123 456 789", href: "tel:+493012345789" },
]}
buttonAnimation="slide-up"
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="KFZ Gutachter Berlin"
columns={footerColumns}
copyrightText="© 2025 KFZ Gutachter Berlin. Alle Rechte vorbehalten."
/>
</div>
</ThemeProvider>
);
}

1427
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

284
src/app/page.tsx Normal file
View File

@@ -0,0 +1,284 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Award, CheckCircle, Clock, Shield, MapPin, Zap, Users, MessageCircle } from "lucide-react";
import Link from "next/link";
export default function HomePage() {
const navItems = [
{ name: "Startseite", id: "/" },
{ name: "Dienstleistungen", id: "/dienstleistungen" },
{ name: "Über uns", id: "/uber-uns" },
{ name: "FAQ", id: "/faq" },
{ name: "Kontakt", id: "/kontakt" },
];
const footerColumns = [
{
title: "Dienstleistungen",
items: [
{ label: "Unfallgutachten", href: "/dienstleistungen" },
{ label: "Wertermittlung", href: "/dienstleistungen" },
{ label: "Oldtimer-Gutachten", href: "/dienstleistungen" },
{ label: "Flotten-Gutachten", href: "/dienstleistungen" },
],
},
{
title: "Unternehmen",
items: [
{ label: "Über uns", href: "/uber-uns" },
{ label: "Unser Team", href: "/uber-uns" },
{ label: "Blog", href: "#" },
{ label: "Karriere", href: "#" },
],
},
{
title: "Kontakt",
items: [
{ label: "Kontaktformular", href: "/kontakt" },
{ label: "Tel: 030 - 123 456 789", href: "tel:+493012345789" },
{ label: "Email: info@kfz-gutachter-berlin.de", href: "mailto:info@kfz-gutachter-berlin.de" },
{ label: "Adresse", href: "#" },
],
},
{
title: "Rechtliches",
items: [
{ label: "Impressum", href: "#" },
{ label: "Datenschutz", href: "#" },
{ label: "AGB", href: "#" },
{ label: "Disclaimer", href: "#" },
],
},
];
const CustomNavbarWrapper = () => (
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems.map((item) => ({
name: item.name,
id: item.id,
}))}
button={{
text: "Jetzt anfragen",
href: "/kontakt",
}}
brandName="KFZ Gutachter Berlin"
/>
</div>
);
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<CustomNavbarWrapper />
<div id="hero" data-section="hero">
<HeroSplitTestimonial
title="Professionelle KFZ Gutachten in Berlin"
description="Zertifizierte Sachverständige für unabhängige Fahrzeugbegutachtung. Schnell, zuverlässig und gerichtsfest – für Versicherungen, Privatpersonen und Rechtsanwälte."
tag="Expertise seit 15 Jahren"
tagIcon={Award}
tagAnimation="slide-up"
background={{ variant: "circleGradient" }}
imageSrc="http://img.b2bpic.net/free-photo/young-happy-couple-signing-documents-while-being-with-car-mechanic-repair-shop_637285-4257.jpg"
imageAlt="Professionelle KFZ Begutachtung in Berlin"
imagePosition="right"
mediaAnimation="slide-up"
testimonials={[
{
name: "Thomas M.",
handle: "Versicherungsmakler",
testimonial: "Hervorragende Arbeit. Schnelle Bearbeitung und präzise Gutachten. Gerne jederzeit wieder!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
imageAlt: "Thomas M.",
},
{
name: "Julia K.",
handle: "Privatperson",
testimonial: "Sehr kompetent und freundlich. Das Gutachten war gerichtsfest und hat mir bei meinem Fall geholfen.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",
imageAlt: "Julia K.",
},
{
name: "Michael R.",
handle: "Anwalt",
testimonial: "Zuverlässige Partner für komplexe Sachverständigengutachten. Hochprofessionell.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-using-smartphone-outdoor-hipster-portrait_1296-728.jpg",
imageAlt: "Michael R.",
},
]}
buttons={[
{ text: "Gutachten anfordern", href: "/kontakt" },
{ text: "Unsere Leistungen", href: "/dienstleistungen" },
]}
buttonAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureBorderGlow
title="Warum KFZ Gutachter Berlin?"
description="Umfassende Expertise in allen Gutachtenarten – von Unfallschäden bis Wertermittlung."
features={[
{
icon: CheckCircle,
title: "Zertifiziert & Unabhängig",
description: "Durch TÜV und VDSI anerkannt. Völlig unabhängig von Versicherungen und Werkstätten.",
},
{
icon: Clock,
title: "Schnelle Bearbeitung",
description: "In der Regel innerhalb von 48 Stunden vor Ort oder im Büro verfügbar.",
},
{
icon: Shield,
title: "Gerichtsfeste Gutachten",
description: "Alle Gutachten sind für Gerichtsverfahren anerkannt und vollständig dokumentiert.",
},
{
icon: MapPin,
title: "Ganz Berlin & Umland",
description: "Wir kommen zu Ihnen – kostenlos in ganz Berlin und Umgebung.",
},
{
icon: Zap,
title: "Transparente Preise",
description: "Keine versteckten Kosten. Alle Gebühren sind vorher bekannt und orientieren sich an der BEMA.",
},
{
icon: Users,
title: "Persönliche Beratung",
description: "Erfahrene Sachverständige, die Ihre Fragen kompetent und freundlich beantworten.",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
title="Unsere Erfolgsstatistik"
description="Zahlen, die für unseren Erfolg und die Zufriedenheit unserer Kunden sprechen."
metrics={[
{ id: "1", value: "2.500+", description: "Gutachten pro Jahr" },
{ id: "2", value: "98%", description: "Kundenzufriedenheit" },
{ id: "3", value: "24-48h", description: "Durchschnittliche Bearbeitungsdauer" },
{ id: "4", value: "100%", description: "Gerichtsfeste Gutachten" },
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
title="Was unsere Kunden sagen"
description="Authentische Bewertungen von Versicherungen, Anwälten und Privatpersonen."
testimonials={[
{
id: "1",
name: "Thomas M.",
handle: "Versicherungsmakler, Berlin",
testimonial: "Hervorragende Zusammenarbeit über viele Jahre. Die Gutachten sind immer präzise, pünktlich und gerichtsfest. Absolute Empfehlung!",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
imageAlt: "Thomas M.",
},
{
id: "2",
name: "Julia K.",
handle: "Anwältin für Verkehrsrecht",
testimonial: "Sehr kompetent und zuverlässig. Die Gutachten halten auch vor Gericht stand. Gerne arbeite ich mit diesem Team zusammen.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman-office_1398-6.jpg",
imageAlt: "Julia K.",
},
{
id: "3",
name: "Michael R.",
handle: "Privatperson, Unfallgeschädigt",
testimonial: "Schnell, professionell und unkompliziert. Das Gutachten hat mir viel geholfen. Top Service!",
imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-using-smartphone-outdoor-hipster-portrait_1296-728.jpg",
imageAlt: "Michael R.",
},
{
id: "4",
name: "Sandra B.",
handle: "Flottenmanagerin, Berlin",
testimonial: "Zuverlässig für unsere gewerbliche Flotte. Schnelle Termine, faire Preise. Sehr zufrieden!",
imageSrc: "http://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",
imageAlt: "Sandra B.",
},
{
id: "5",
name: "Peter L.",
handle: "Versicherung, Nord-Deutschland",
testimonial: "Perfekte Dokumentation und schnelle Abläufe. Wir vertrauen auf diese Sachverständigen vollständig.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
imageAlt: "Peter L.",
},
{
id: "6",
name: "Karin H.",
handle: "Privatperson, Mitte",
testimonial: "Freundlich, kompetent und fair. Auch bei Streitfällen objektiv. Kann ich nur weiterempfehlen!",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg",
imageAlt: "Karin H.",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Noch Fragen?"
tagIcon={MessageCircle}
tagAnimation="slide-up"
title="Jetzt kostenlos Gutachten anfragen"
description="Kontaktieren Sie uns noch heute. Wir sind schnell, zuverlässig und kompetent. Ihre zufriedene Anfrage ist unser Erfolg."
buttons={[
{ text: "Zum Kontaktformular", href: "/kontakt" },
{ text: "Tel: 030 - 123 456 789", href: "tel:+493012345789" },
]}
buttonAnimation="slide-up"
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="KFZ Gutachter Berlin"
columns={footerColumns}
copyrightText="© 2025 KFZ Gutachter Berlin. Alle Rechte vorbehalten."
/>
</div>
</ThemeProvider>
);
}

161
src/app/preise/page.tsx Normal file
View File

@@ -0,0 +1,161 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { MessageCircle, DollarSign, Clock, FileCheck } from "lucide-react";
import Link from "next/link";
export default function PricingPage() {
const navItems = [
{ name: "Startseite", id: "/" },
{ name: "Dienstleistungen", id: "/dienstleistungen" },
{ name: "Über uns", id: "/uber-uns" },
{ name: "FAQ", id: "/faq" },
{ name: "Kontakt", id: "/kontakt" },
];
const footerColumns = [
{
title: "Dienstleistungen",
items: [
{ label: "Unfallgutachten", href: "/dienstleistungen" },
{ label: "Wertermittlung", href: "/dienstleistungen" },
{ label: "Oldtimer-Gutachten", href: "/dienstleistungen" },
{ label: "Flotten-Gutachten", href: "/dienstleistungen" },
],
},
{
title: "Unternehmen",
items: [
{ label: "Über uns", href: "/uber-uns" },
{ label: "Unser Team", href: "/uber-uns" },
{ label: "Blog", href: "#" },
{ label: "Karriere", href: "#" },
],
},
{
title: "Kontakt",
items: [
{ label: "Kontaktformular", href: "/kontakt" },
{ label: "Tel: 030 - 123 456 789", href: "tel:+493012345789" },
{ label: "Email: info@kfz-gutachter-berlin.de", href: "mailto:info@kfz-gutachter-berlin.de" },
{ label: "Adresse", href: "#" },
],
},
{
title: "Rechtliches",
items: [
{ label: "Impressum", href: "#" },
{ label: "Datenschutz", href: "#" },
{ label: "AGB", href: "#" },
{ label: "Disclaimer", href: "#" },
],
},
];
const CustomNavbarWrapper = () => (
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems.map((item) => ({
name: item.name,
id: item.id,
}))}
button={{
text: "Jetzt anfragen",
href: "/kontakt",
}}
brandName="KFZ Gutachter Berlin"
/>
</div>
);
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<CustomNavbarWrapper />
<div id="pricing-intro" data-section="pricing-intro">
<MetricCardTwo
title="Transparente Gebührenordnung"
description="Alle unsere Preise basieren auf der BEMA-Gebührenordnung. Keine versteckten Kosten, keine Überraschungen."
metrics={[
{ id: "1", value: "ab 150€", description: "Unfallgutachten" },
{ id: "2", value: "ab 120€", description: "Wertermittlung" },
{ id: "3", value: "ab 180€", description: "Oldtimer-Gutachten" },
{ id: "4", value: "Individuell", description: "Flottengutachten" },
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="pricing-features" data-section="pricing-features">
<FeatureBorderGlow
title="Was ist in unseren Preisen enthalten"
description="Vollständige Leistungen ohne versteckte Gebühren – alles, was Sie benötigen."
features={[
{
icon: DollarSign,
title: "BEMA-konforme Gebühren",
description: "Alle Gebühren nach der anerkannten Gebührenordnung für Sachverständige kalkuliert.",
},
{
icon: Clock,
title: "Kostenlose Anfahrt",
description: "Fahrtkosten sind kostenlos in Berlin und Umland. Nur bei Außenaufträgen zusätzlich berechnet.",
},
{
icon: FileCheck,
title: "Vollständige Dokumentation",
description: "Alle Berichte enthalten detaillierte Fotos, Messungen und offizielle Beurteilung.",
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Preisanfrage"
tagIcon={MessageCircle}
tagAnimation="slide-up"
title="Kostenlos & Unverbindlich"
description="Kontaktieren Sie uns für eine individuelle Preisauskunft. Wir erstellen Ihnen gerne ein maßgeschneidertes Angebot für Ihre Anforderungen."
buttons={[
{ text: "Angebot anfordern", href: "/kontakt" },
{ text: "Fragen stellen", href: "/faq" },
]}
buttonAnimation="slide-up"
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="KFZ Gutachter Berlin"
columns={footerColumns}
copyrightText="© 2025 KFZ Gutachter Berlin. Alle Rechte vorbehalten."
/>
</div>
</ThemeProvider>
);
}

28
src/app/styles/base.css Normal file
View File

@@ -0,0 +1,28 @@
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-nunito-sans), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-nunito-sans), sans-serif;
}

176
src/app/styles/theme.css Normal file
View File

@@ -0,0 +1,176 @@
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}

228
src/app/styles/utilities.css Normal file
View File

@@ -0,0 +1,228 @@
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.inset-glow-border {
@apply relative;
}
.inset-glow-border::before {
content: "";
@apply absolute pointer-events-none inset-0 p-[1px];
border-radius: inherit;
background: linear-gradient(
0deg,
color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
.mask-fade-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y-medium {
mask-image: linear-gradient(to bottom,
transparent 0%,
black 20%,
black 80%,
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 40s linear infinite;
}
@keyframes marquee-vertical-reverse {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
.animate-marquee-vertical-reverse {
animation: marquee-vertical-reverse 40s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}

217
src/app/styles/variables.css Normal file
View File

@@ -0,0 +1,217 @@
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f7f6f7;;
--card: #ffffff;;
--foreground: #1b0c25;;
--primary-cta: #1b0c25;;
--secondary-cta: #ffffff;;
--accent: #ff93e4;;
--background-accent: #e8a8c3;; */
--background: #f7f6f7;;
--card: #ffffff;;
--foreground: #1b0c25;;
--primary-cta: #1b0c25;;
--primary-cta-text: #f7f6f7;;
--secondary-cta: #ffffff;;
--secondary-cta-text: #1b0c25;;
--accent: #ff93e4;;
--background-accent: #e8a8c3;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}

171
src/app/uber-uns/page.tsx Normal file
View File

@@ -0,0 +1,171 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import SplitAbout from "@/components/sections/about/SplitAbout";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Briefcase, Award, Users, TrendingUp, MessageCircle } from "lucide-react";
import Link from "next/link";
export default function AboutPage() {
const navItems = [
{ name: "Startseite", id: "/" },
{ name: "Dienstleistungen", id: "/dienstleistungen" },
{ name: "Über uns", id: "/uber-uns" },
{ name: "FAQ", id: "/faq" },
{ name: "Kontakt", id: "/kontakt" },
];
const footerColumns = [
{
title: "Dienstleistungen",
items: [
{ label: "Unfallgutachten", href: "/dienstleistungen" },
{ label: "Wertermittlung", href: "/dienstleistungen" },
{ label: "Oldtimer-Gutachten", href: "/dienstleistungen" },
{ label: "Flotten-Gutachten", href: "/dienstleistungen" },
],
},
{
title: "Unternehmen",
items: [
{ label: "Über uns", href: "/uber-uns" },
{ label: "Unser Team", href: "/uber-uns" },
{ label: "Blog", href: "#" },
{ label: "Karriere", href: "#" },
],
},
{
title: "Kontakt",
items: [
{ label: "Kontaktformular", href: "/kontakt" },
{ label: "Tel: 030 - 123 456 789", href: "tel:+493012345789" },
{ label: "Email: info@kfz-gutachter-berlin.de", href: "mailto:info@kfz-gutachter-berlin.de" },
{ label: "Adresse", href: "#" },
],
},
{
title: "Rechtliches",
items: [
{ label: "Impressum", href: "#" },
{ label: "Datenschutz", href: "#" },
{ label: "AGB", href: "#" },
{ label: "Disclaimer", href: "#" },
],
},
];
const CustomNavbarWrapper = () => (
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems.map((item) => ({
name: item.name,
id: item.id,
}))}
button={{
text: "Jetzt anfragen",
href: "/kontakt",
}}
brandName="KFZ Gutachter Berlin"
/>
</div>
);
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="normal"
>
<CustomNavbarWrapper />
<div id="about-intro" data-section="about-intro">
<SplitAbout
title="Über KFZ Gutachter Berlin"
description="Mit über 15 Jahren Erfahrung in der Fahrzeugbegutachtung haben wir uns als vertrauenswürdiger Partner für Versicherungen, Privatpersonen und Rechtsanwälte etabliert."
tag="Unser Profil"
tagAnimation="slide-up"
bulletPoints={[
{
icon: Briefcase,
title: "Umfassende Expertise",
description: "Spezialisiert auf Unfallgutachten, Wertermittlungen, Oldtimer und Klassiker sowie Gewerbliche Flotten.",
},
{
icon: Award,
title: "Zertifizierungen",
description: "TÜV-zertifiziert, VDSI-anerkannt und regelmäßig fortgebildet nach den neuesten Standards.",
},
{
icon: Users,
title: "Vertrauensvolle Zusammenarbeit",
description: "Langfristige Partnerschaften mit Versicherungsgesellschaften, Anwaltskanzleien und privaten Kunden.",
},
{
icon: TrendingUp,
title: "Digitale Effizienz",
description: "Moderne Dokumentation und schnelle Berichterstellung durch aktuelle Technologie.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/confident-smiling-businesspeople-sitting-together-business-meeting_23-2147923338.jpg"
imageAlt="Unser Team von erfahrenen Sachverständigen"
imagePosition="right"
textboxLayout="default"
mediaAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="about-stats" data-section="about-stats">
<MetricCardTwo
title="Unsere Erfolgsstatistik"
description="Zahlen, die für unseren Erfolg und die Zufriedenheit unserer Kunden sprechen."
metrics={[
{ id: "1", value: "15+", description: "Jahre Erfahrung" },
{ id: "2", value: "2.500+", description: "Gutachten pro Jahr" },
{ id: "3", value: "98%", description: "Kundenzufriedenheit" },
{ id: "4", value: "100%", description: "Gerichtsfeste Gutachten" },
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Kontakt"
tagIcon={MessageCircle}
tagAnimation="slide-up"
title="Lernen Sie uns kennen"
description="Haben Sie Fragen zu unserer Arbeit oder möchten Sie mehr über unser Team erfahren? Kontaktieren Sie uns gerne – wir freuen uns auf ein Gespräch mit Ihnen."
buttons={[
{ text: "Zum Kontaktformular", href: "/kontakt" },
{ text: "Tel: 030 - 123 456 789", href: "tel:+493012345789" },
]}
buttonAnimation="slide-up"
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="KFZ Gutachter Berlin"
columns={footerColumns}
copyrightText="© 2025 KFZ Gutachter Berlin. Alle Rechte vorbehalten."
/>
</div>
</ThemeProvider>
);
}