feat: first about version

This reverts commit d2c30ed43a.

Dockerfile

@@ -1,6 +1,7 @@
 # --- Base image ---
 FROM node:22-alpine AS base
 WORKDIR /app
+ENV NEXT_TELEMETRY_DISABLED=1
 
 # --- Install dependencies ---
 FROM base AS deps
@@ -24,12 +25,11 @@ RUN addgroup -g 1001 nodejs \
     && adduser -u 1001 -G nodejs -s /bin/sh -D nextjs
 
 # Copy only what is needed for runtime
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
 COPY --from=builder /app/public ./public
-COPY --from=builder /app/.next ./.next
-COPY --from=builder /app/node_modules ./node_modules
-COPY --from=builder /app/package.json ./package.json
 
 USER nextjs
 
 EXPOSE 3000
-CMD ["npm", "start"]
+CMD ["node", "server.js"]

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  output: "standalone"
 };
 
 export default nextConfig;

package.json

@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "16.1.6",
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "next": "16.2.6",
+    "react": "19.2.6",
+    "react-dom": "19.2.6"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

src/app/about/page.tsx

@@ -1,51 +1,81 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
 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",
-    },
+    { year: "2017", text: "HEWUhueh<euwhuheruhru" },
+    { year: "2019", text: "HEWUeo338934u89432u43j34iu2j23" },
+    { year: "2021", text: "HrterreEWUhueh<euwhuheruhru" },
+    { year: "2026", text: "HEWUfiriejrieuwhuheruhru" },
+    { year: "2017", text: "HEWUhueh<euwhuheruhru" },
+    { year: "2019", text: "HEWUeo338934u89432u43j34iu2j23" },
+    { year: "2021", text: "HrterreEWUhueh<euwhuheruhru" },
+    { year: "2026", text: "HEWUfiriejrieuwhuheruhru" },
+    { year: "2017", text: "HEWUhueh<euwhuheruhru" },
+    { year: "2019", text: "HEWUeo338934u89432u43j34iu2j23" },
+    { year: "2021", text: "HrterreEWUhueh<euwhuheruhru" },
+    { year: "2026", text: "HEWUfiriejrieuwhuheruhru" },
+    { year: "2017", text: "HEWUhueh<euwhuheruhru" },
+    { year: "2019", text: "HEWUeo338934u89432u43j34iu2j23" },
+    { year: "2021", text: "HrterreEWUhueh<euwhuheruhru" },
+    { year: "2026", text: "HEWUfiriejrieuwhuheruhru" },
 ];
 
-export default function About() {
+export default function Page() {
+    const refs = useRef<(HTMLDivElement | null)[]>([]);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            entries => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add("opacity-100", "translate-y-0");
+                    }
+                });
+            },
+            { threshold: 0.2 }
+        );
+
+        refs.current.forEach(el => el && observer.observe(el));
+        return () => observer.disconnect();
+    }, []);
+
     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>
+        <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">
-                {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>
+            <div className="relative w-full flex justify-center py-20">
+                <div className="relative w-full max-w-3xl">
 
-                        {/* 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>
+                    {/* Mittlere Linie */}
+                    <div className="absolute inset-0 flex justify-center">
+                        <div className="w-1 bg-gray-300"></div>
                     </div>
-                ))}
+
+                    {sections.map((section, index) => (
+                        <div
+                            key={index}
+                            ref={(el: HTMLDivElement | null): void => {
+                                refs.current[index] = el;
+                            }}
+                            className="relative mb-20 opacity-0 translate-y-10 transition-all duration-700"
+                        >
+                            {/* Jahr */}
+                            <div className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white text-blue-700 px-6 py-2 text-3xl font-bold shadow z-10">
+                                {section.year}
+                            </div>
+
+                            {/* Text */}
+                            <div className="mt-20 text-center">
+                                <p className="text-gray-700 text-lg">{section.text}</p>
+                            </div>
+                        </div>
+                    ))}
+
+                </div>
             </div>
-        </div>
+        </main>
     );
 }

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

@@ -17,7 +17,7 @@ export default function Home() {
                     </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">Dienstleistungen</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>