feat: first about version

src/app/about/page.tsx

@@ -1,7 +1,81 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+const sections = [
+    { 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 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 (
         <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="relative w-full flex justify-center py-20">
+                <div className="relative w-full max-w-3xl">
+
+                    {/* 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>
         </main>
     );
-};
+}

src/app/page.tsx

@@ -4,14 +4,14 @@ 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-(--color-primary)">MKV Kleinholz</span>
+                    <h1 className="text-4xl font-bold mb-4">Willkommen bei <span className="bg-[var(--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-(--color-primary) text-white px-6 py-2 rounded hover:bg-(--color-primary) transition"
+                        className="inline-block bg-[var(--color-primary)] text-white px-6 py-2 rounded hover:bg-[var(--color-primary)] transition"
                     >
                         Mehr erfahren
                     </a>

src/app/services/page.tsx

@@ -19,7 +19,7 @@ const sections = [
 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>
+            <h1 className="text-4xl font-bold text-center mb-20 text-gray-800">Dienstleistungen</h1>
 
             <div className="space-y-28">
                 {sections.map((section, index) => (