From fa4385af4c1b7a3bbd5542d8e34b7a4766fe31a2 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sat, 13 Jun 2026 19:07:49 +0200
Subject: [PATCH] feat: Add historical data from 2016 to GrowthChart with i18n
 support

---
 app/[locale]/layout.tsx           |  1 +
 components/blocks/GrowthChart.tsx | 53 ++++++++++++++++++++++++-------
 messages/de.json                  |  7 ++++
 messages/en.json                  |  7 ++++
 4 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index ca3e168f7..eac0756b6 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -130,6 +130,7 @@ export default async function Layout(props: {
     'CompanyTimeline',
     'TeamGrid',
     'AISearch',
+    'GrowthChart',
   ];
   const clientMessages: Record<string, any> = {};
   for (const key of clientKeys) {
diff --git a/components/blocks/GrowthChart.tsx b/components/blocks/GrowthChart.tsx
index 15869c7c2..fecce3aa8 100644
--- a/components/blocks/GrowthChart.tsx
+++ b/components/blocks/GrowthChart.tsx
@@ -2,12 +2,22 @@
 
 import React from 'react';
 import { motion } from 'framer-motion';
+import { useTranslations } from 'next-intl';
 
 export function GrowthChart() {
+  const t = useTranslations('GrowthChart');
+  
   const data = [
-    { year: '2023', hdd: 29436, kabel: 76727 },
-    { year: '2024', hdd: 28680, kabel: 131964 },
-    { year: '2025', hdd: 44655, kabel: 163470 },
+    { year: '2016', offener: 5000, hdd: 1200, kabel: 16064 },
+    { year: '2017', offener: 33401, hdd: 8363, kabel: 84675 },
+    { year: '2018', offener: 30773, hdd: 10225, kabel: 108127 },
+    { year: '2019', offener: 32445, hdd: 8505, kabel: 87468 },
+    { year: '2020', offener: 31305, hdd: 9050, kabel: 93556 },
+    { year: '2021', offener: 38756, hdd: 10957, kabel: 110127 },
+    { year: '2022', offener: 41445, hdd: 9505, kabel: 102468 },
+    { year: '2023', offener: 17908, hdd: 29436, kabel: 76727 },
+    { year: '2024', offener: 30801, hdd: 28680, kabel: 131964 },
+    { year: '2025', offener: 38166, hdd: 44655, kabel: 163470 },
   ];
 
   const maxVal = 163470; // Highest value for scaling
@@ -15,14 +25,15 @@ export function GrowthChart() {
   return (
     <div className="w-full bg-white rounded-3xl p-8 md:p-12 shadow-sm border border-neutral-100 my-16">
       <div className="mb-10">
-        <h3 className="text-3xl font-heading font-extrabold text-neutral-dark mb-2">Bewiesene Leistungsfähigkeit</h3>
-        <p className="text-neutral-500 font-medium">Unsere verlässliche Baukapazität der letzten drei Jahre (in Metern)</p>
+        <h3 className="text-3xl font-heading font-extrabold text-neutral-dark mb-2">{t('title')}</h3>
+        <p className="text-neutral-500 font-medium">{t('subtitle')}</p>
       </div>
 
       <div className="space-y-8">
         {data.map((item, index) => {
-          const hddWidth = (item.hdd / maxVal) * 100;
           const kabelWidth = (item.kabel / maxVal) * 100;
+          const offenerWidth = (item.offener / maxVal) * 100;
+          const hddWidth = (item.hdd / maxVal) * 100;
 
           return (
             <div key={item.year} className="relative">
@@ -40,7 +51,23 @@ export function GrowthChart() {
                     />
                   </div>
                   <div className="w-24 text-right text-xs font-bold text-neutral-500 uppercase">
-                    Kabel: {new Intl.NumberFormat('de-DE').format(item.kabel)}m
+                    {t('kabel')}: {new Intl.NumberFormat('de-DE').format(item.kabel)}m
+                  </div>
+                </div>
+
+                {/* Offener Tiefbau Bar */}
+                <div className="flex items-center gap-4">
+                  <div className="flex-1 bg-neutral-100 rounded-full h-5 overflow-hidden relative">
+                    <motion.div
+                      initial={{ width: 0 }}
+                      whileInView={{ width: `${offenerWidth}%` }}
+                      viewport={{ once: true, margin: "-50px" }}
+                      transition={{ duration: 1.5, delay: 0.15 + 0.1 * index, ease: "easeOut" }}
+                      className="absolute top-0 left-0 h-full bg-neutral-300 rounded-full"
+                    />
+                  </div>
+                  <div className="w-24 text-right text-xs font-bold text-neutral-500 uppercase">
+                    {t('offener')}: {new Intl.NumberFormat('de-DE').format(item.offener)}m
                   </div>
                 </div>
 
@@ -56,7 +83,7 @@ export function GrowthChart() {
                     />
                   </div>
                   <div className="w-24 text-right text-xs font-bold text-neutral-500 uppercase">
-                    HDD: {new Intl.NumberFormat('de-DE').format(item.hdd)}m
+                    {t('hdd')}: {new Intl.NumberFormat('de-DE').format(item.hdd)}m
                   </div>
                 </div>
               </div>
@@ -65,14 +92,18 @@ export function GrowthChart() {
         })}
       </div>
       
-      <div className="mt-8 flex gap-6 border-t border-neutral-100 pt-6">
+      <div className="mt-8 flex flex-wrap gap-6 border-t border-neutral-100 pt-6">
         <div className="flex items-center gap-2">
           <div className="w-3 h-3 rounded-full bg-primary" />
-          <span className="text-xs font-bold text-neutral-500 uppercase">Kabelverlegung</span>
+          <span className="text-xs font-bold text-neutral-500 uppercase">{t('kabel')}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-neutral-300" />
+          <span className="text-xs font-bold text-neutral-500 uppercase">{t('offener')}</span>
         </div>
         <div className="flex items-center gap-2">
           <div className="w-3 h-3 rounded-full bg-neutral-dark" />
-          <span className="text-xs font-bold text-neutral-500 uppercase">HDD Spülbohrung</span>
+          <span className="text-xs font-bold text-neutral-500 uppercase">{t('hdd')}</span>
         </div>
       </div>
     </div>
diff --git a/messages/de.json b/messages/de.json
index efb422805..d38a331bf 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -318,6 +318,13 @@
     "timeoutError": "Anfrage hat zu lange gedauert. Bitte versuche es erneut.",
     "genericError": "Ein Fehler ist aufgetreten."
   },
+  "GrowthChart": {
+    "title": "Bewiesene Leistungsfähigkeit",
+    "subtitle": "Unsere verlässliche Baukapazität der letzten Jahre (in Metern)",
+    "kabel": "Kabelverlegung",
+    "hdd": "HDD Spülbohrung",
+    "offener": "Offener Tiefbau"
+  },
   "ReferenceDetail": {
     "backToOverview": "Zurück zur Übersicht",
     "projectReference": "Projektreferenz",
diff --git a/messages/en.json b/messages/en.json
index cd1b1de88..8c6579428 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -318,6 +318,13 @@
     "timeoutError": "Request took too long. Please try again.",
     "genericError": "An error occurred."
   },
+  "GrowthChart": {
+    "title": "Proven Performance",
+    "subtitle": "Our reliable construction capacity of the last years (in meters)",
+    "kabel": "Cable Laying",
+    "hdd": "HDD Drilling",
+    "offener": "Open Trenching"
+  },
   "ReferenceDetail": {
     "backToOverview": "Back to Overview",
     "projectReference": "Project Reference",