chore: restructure a bit

src/app/about/page.tsx

@@ -1,51 +1,7 @@
-const sections = [
+export default function Page() {
-    {
-        title: "Mobilkran",
-        text: "Wir glauben an digitale Lösungen, die Menschen verbinden. Technologie soll nicht nur funktionieren, sondern begeistern.",
-        image: "/mobilkran.jpg",
-    },
-    {
-        title: "Transport",
-        text: "Ein bunter Mix aus Kreativen, Entwicklern und Strategen – vereint durch die Leidenschaft für gute Ideen und sauberen Code.",
-        image: "/transport.jpg",
-    },
-    {
-        title: "ADAC Abschleppdienst",
-        text: "Transparenz, Empathie und Nachhaltigkeit sind keine Buzzwords für uns, sondern gelebte Prinzipien in jedem Projekt.",
-        image: "/abschleppdienst.jpg",
-    },
-];
-
-export default function About() {
     return (
-        <div className="bg-white py-20 px-6 lg:px-24">
+        <main className="min-h-screen bg-gray-100 py-10">
-            <h1 className="text-4xl font-bold text-center mb-20 text-gray-800">Über uns</h1>
 
-            <div className="space-y-28">
+        </main>
-                {sections.map((section, index) => (
-                    <div
-                        key={index}
-                        className={`flex flex-col lg:flex-row ${
-                            index % 2 === 1 ? "lg:flex-row-reverse" : ""
-                        } items-center gap-12`}
-                    >
-                        {/* Bild */}
-                        <div className="w-full lg:w-1/2">
-                            <img
-                                src={section.image}
-                                alt={section.title}
-                                className="w-full h-auto rounded-xl shadow-xl object-cover"
-                            />
-                        </div>
-
-                        {/* Text */}
-                        <div className="w-full lg:w-1/2">
-                            <h2 className="text-3xl font-semibold text-gray-700 mb-4">{section.title}</h2>
-                            <p className="text-gray-600 text-lg leading-relaxed">{section.text}</p>
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
     );
-}
+};

src/app/contact/page.tsx

@@ -1,10 +0,0 @@
-"use client"
-import ContactForm from "@/components/ContactForm";
-
-export default function Page() {
-    return (
-        <main className="min-h-screen bg-gray-100 py-10">
-            <ContactForm/>
-        </main>
-    );
-};

src/app/page.tsx

@@ -4,20 +4,20 @@ export default function Home() {
             <main
                 className="bg-[url('/background.jpg')] bg-cover flex flex-col items-center justify-center min-h-screen bg-gray-100 text-white px-4">
                 <section className="text-center max-w-2xl">
-                    <h1 className="text-4xl font-bold mb-4">Willkommen bei <span className="bg-[var(--color-primary)]">MKV Kleinholz</span>
+                    <h1 className="text-4xl font-bold mb-4">Willkommen bei <span className="bg-(--color-primary)">MKV Kleinholz</span>
                     </h1>
                     <p className="text-lg mb-6">
                         Ihr Mobilkranvermieter aus Mülheim und Umgebung
                     </p>
                     <a
                         href="/about"
-                        className="inline-block bg-[var(--color-primary)] text-white px-6 py-2 rounded hover:bg-[var(--color-primary)] transition"
+                        className="inline-block bg-(--color-primary) text-white px-6 py-2 rounded hover:bg-(--color-primary) transition"
                     >
                         Mehr erfahren
                     </a>
                 </section>
             </main>
-            <div className="w-full h-[400px]">
+            <div className="w-full h-100">
                 <iframe
                     src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2489.1370108126625!2d6.875406576840839!3d51.400537171789225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b8c14b986f8f25%3A0x8cc0d4e323228ee8!2sAdac%20Mobilit%C3%A4tspartner%20Kleinholz!5e0!3m2!1sde!2sde!4v1755638002671!5m2!1sde!2sde"
                     width="100%"

src/app/services/page.tsx

@@ -0,0 +1,51 @@
+const sections = [
+    {
+        title: "Mobilkran",
+        text: "Wir glauben an digitale Lösungen, die Menschen verbinden. Technologie soll nicht nur funktionieren, sondern begeistern.",
+        image: "/mobilkran.jpg",
+    },
+    {
+        title: "Transport",
+        text: "Ein bunter Mix aus Kreativen, Entwicklern und Strategen – vereint durch die Leidenschaft für gute Ideen und sauberen Code.",
+        image: "/transport.jpg",
+    },
+    {
+        title: "ADAC Abschleppdienst",
+        text: "Transparenz, Empathie und Nachhaltigkeit sind keine Buzzwords für uns, sondern gelebte Prinzipien in jedem Projekt.",
+        image: "/abschleppdienst.jpg",
+    },
+];
+
+export default function Services() {
+    return (
+        <div className="bg-white py-20 px-6 lg:px-24">
+            <h1 className="text-4xl font-bold text-center mb-20 text-gray-800">Über uns</h1>
+
+            <div className="space-y-28">
+                {sections.map((section, index) => (
+                    <div
+                        key={index}
+                        className={`flex flex-col lg:flex-row ${
+                            index % 2 === 1 ? "lg:flex-row-reverse" : ""
+                        } items-center gap-12`}
+                    >
+                        {/* Bild */}
+                        <div className="w-full lg:w-1/2">
+                            <img
+                                src={section.image}
+                                alt={section.title}
+                                className="w-full h-auto rounded-xl shadow-xl object-cover"
+                            />
+                        </div>
+
+                        {/* Text */}
+                        <div className="w-full lg:w-1/2">
+                            <h2 className="text-3xl font-semibold text-gray-700 mb-4">{section.title}</h2>
+                            <p className="text-gray-600 text-lg leading-relaxed">{section.text}</p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

src/components/ContactForm.tsx

@@ -1,87 +0,0 @@
-// components/ContactForm.tsx
-
-import { useState } from 'react';
-
-export default function ContactForm() {
-    const [formData, setFormData] = useState({
-        name: '',
-        email: '',
-        message: '',
-    });
-
-    const [submitted, setSubmitted] = useState(false);
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        setFormData({ ...formData, [e.target.name]: e.target.value });
-    };
-
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        // Hier kannst du die Daten an dein Backend oder einen Dienst senden
-        console.log('Formulardaten:', formData);
-        setSubmitted(true);
-    };
-
-    return (
-        <div className="max-w-xl mx-auto p-6 bg-white shadow-md rounded-md">
-            <h2 className="text-2xl font-semibold mb-4">Kontaktformular</h2>
-            {submitted ? (
-                <p className="text-green-600">Vielen Dank für deine Nachricht!</p>
-            ) : (
-                <form onSubmit={handleSubmit} className="space-y-4">
-                    <div>
-                        <label htmlFor="name" className="block text-sm font-medium text-gray-700">
-                            Name
-                        </label>
-                        <input
-                            type="text"
-                            name="name"
-                            id="name"
-                            required
-                            value={formData.name}
-                            onChange={handleChange}
-                            className="mt-1 block w-full border border-gray-300 rounded-md p-2"
-                        />
-                    </div>
-
-                    <div>
-                        <label htmlFor="email" className="block text-sm font-medium text-gray-700">
-                            E-Mail
-                        </label>
-                        <input
-                            type="email"
-                            name="email"
-                            id="email"
-                            required
-                            value={formData.email}
-                            onChange={handleChange}
-                            className="mt-1 block w-full border border-gray-300 rounded-md p-2"
-                        />
-                    </div>
-
-                    <div>
-                        <label htmlFor="message" className="block text-sm font-medium text-gray-700">
-                            Nachricht
-                        </label>
-                        <textarea
-                            name="message"
-                            id="message"
-                            rows={5}
-                            required
-                            value={formData.message}
-                            onChange={handleChange}
-                            className="mt-1 block w-full border border-gray-300 rounded-md p-2"
-                        />
-                    </div>
-
-                    <button
-                        type="submit"
-                        className="bg-[var(--color-primary)] text-white px-4 py-2 rounded hover:bg-[var(--color-primary)] transition"
-                    >
-                        Absenden
-                    </button>
-                </form>
-            )}
-        </div>
-    );
-}

src/components/Navbar.tsx

@@ -9,13 +9,13 @@ const Navbar: React.FC = () => {
         <nav className="bg-gray-800 text-white">
             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div className="flex justify-between h-16 items-center">
-                    <div className="flex-shrink-0">
+                    <div className="shrink-0">
                         <Link href="/" className="text-[var(--color-primary)] text-xl font-bold">MKV Kleinholz</Link>
                     </div>
                     <div className="hidden md:flex space-x-4">
                         <Link href="/" className="hover:text-gray-300">Home</Link>
+                        <Link href="/services" className="hover:text-gray-300">Dienstleistungen</Link>
                         <Link href="/about" className="hover:text-gray-300">Über uns</Link>
-                        <Link href="/contact" className="hover:text-gray-300">Kontakt</Link>
                     </div>
                     <div className="md:hidden">
                         <button
@@ -31,8 +31,8 @@ const Navbar: React.FC = () => {
             {isOpen && (
                 <div className="md:hidden px-4 pb-4 space-y-2">
                     <Link href="/" className="block hover:text-gray-300">Home</Link>
+                    <Link href="/services" className="block hover:text-gray-300">Dienstleistungen</Link>
                     <Link href="/about" className="block hover:text-gray-300">Über uns</Link>
-                    <Link href="/contact" className="block hover:text-gray-300">Kontakt</Link>
                 </div>
             )}
         </nav>