feat: Integrate Directus CMS, add i18n with next-intl, and configure project tooling with pnpm, husky, and commitlint.**

components/HomeContent.tsx

@@ -1,53 +1,62 @@
-'use client';
+"use client";
 
-import { m, LazyMotion, domAnimation } from 'framer-motion';
-import { BarChart3, CheckCircle2, ChevronRight, Shield, Zap } from 'lucide-react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { Button } from './Button';
-import { Counter } from './Counter';
-import { Reveal } from './Reveal';
-import { TechBackground } from './TechBackground';
-import { TileGrid } from './TileGrid';
+import { m, LazyMotion, domAnimation } from "framer-motion";
+import {
+  BarChart3,
+  CheckCircle2,
+  ChevronRight,
+  Shield,
+  Zap,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "./Button";
+import { Counter } from "./Counter";
+import { Reveal } from "./Reveal";
+import { TechBackground } from "./TechBackground";
+import { TileGrid } from "./TileGrid";
+import { useTranslations } from "next-intl";
 
 export default function Home() {
+  const t = useTranslations("Index");
+
   const serviceJsonLd = {
     "@context": "https://schema.org",
     "@type": "Service",
-    "name": "Technische Beratung für Energiekabelprojekte",
-    "provider": {
+    name: t("portfolio.items.beratung.title"),
+    provider: {
       "@type": "Organization",
-      "name": "MB Grid Solutions & Services GmbH"
+      name: "MB Grid Solutions & Services GmbH",
     },
-    "description": "Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV.",
-    "areaServed": "Europe",
-    "hasOfferCatalog": {
+    description: t("portfolio.description"),
+    areaServed: "Europe",
+    hasOfferCatalog: {
       "@type": "OfferCatalog",
-      "name": "Dienstleistungen",
-      "itemListElement": [
+      name: t("portfolio.title"),
+      itemListElement: [
         {
           "@type": "Offer",
-          "itemOffered": {
+          itemOffered: {
             "@type": "Service",
-            "name": "Technische Beratung"
-          }
+            name: t("portfolio.items.beratung.title"),
+          },
         },
         {
           "@type": "Offer",
-          "itemOffered": {
+          itemOffered: {
             "@type": "Service",
-            "name": "Projektbegleitung"
-          }
+            name: t("portfolio.items.begleitung.title"),
+          },
         },
         {
           "@type": "Offer",
-          "itemOffered": {
+          itemOffered: {
             "@type": "Service",
-            "name": "Produktbeschaffung"
-          }
-        }
-      ]
-    }
+            name: t("portfolio.items.beschaffung.title"),
+          },
+        },
+      ],
+    },
   };
 
   return (
@@ -56,9 +65,9 @@ export default function Home() {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(serviceJsonLd) }}
       />
-      
+
       {/* Hero Section */}
-      <section className="relative min-h-[90vh] flex items-center pt-32 pb-20 overflow-hidden">
+      <section className="relative min-h-[90vh] flex items-center pt-44 pb-20 overflow-hidden">
         <div className="absolute inset-0 z-0">
           <Image
             src="/media/business/hero-bg.jpg"
@@ -82,29 +91,37 @@ export default function Home() {
                   <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
                   <span className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
                 </span>
-                Engineering Excellence
+                {t("hero.tag")}
               </span>
             </Reveal>
-            
+
             <Reveal delay={0.2}>
               <h1 className="text-4xl sm:text-5xl md:text-7xl font-extrabold text-primary mb-6 md:mb-8 leading-[1.1]">
-                Spezialisierter Partner für <span className="text-accent">Energiekabelprojekte</span>
+                {t("hero.title") ===
+                "Spezialisierter Partner für Energiekabelprojekte" ? (
+                  <>
+                    Spezialisierter Partner für{" "}
+                    <span className="text-accent">Energiekabelprojekte</span>
+                  </>
+                ) : (
+                  t("hero.title")
+                )}
               </h1>
             </Reveal>
-            
+
             <Reveal delay={0.3}>
               <p className="text-slate-600 text-lg md:text-2xl leading-relaxed mb-8 md:mb-12 max-w-2xl">
-                Herstellerneutrale technische Beratung für Ihre Projekte in Mittel- und Hochspannungsnetzen bis zu 110 kV.
+                {t("hero.subtitle")}
               </p>
             </Reveal>
-            
+
             <Reveal delay={0.4}>
               <div className="flex flex-wrap gap-4">
                 <Button href="/kontakt" variant="accent" showArrow>
-                  Projekt anfragen
+                  {t("hero.ctaPrimary")}
                 </Button>
                 <Button href="/ueber-uns" variant="ghost">
-                  Mehr erfahren
+                  {t("hero.ctaSecondary")}
                 </Button>
               </div>
             </Reveal>
@@ -119,34 +136,45 @@ export default function Home() {
           <Counter value={2} className="section-number !text-white/5" />
           <Reveal className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
             <div>
-              <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Portfolio</span>
-              <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">Unsere Leistungen</h2>
+              <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
+                {t("portfolio.tag")}
+              </span>
+              <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
+                {t("portfolio.title")}
+              </h2>
               <p className="text-slate-400 text-base md:text-xl">
-                Beratung durch unabhängige Experten mit jahrzehntelanger Erfahrung aus Engineering, Normengremien, Planung und Produktion.
+                {t("portfolio.description")}
               </p>
             </div>
-            <Link href="/ueber-uns" className="text-accent font-bold flex items-center gap-2 hover:text-white transition-colors group">
-              Alle Details ansehen <ChevronRight className="transition-transform group-hover:translate-x-1" size={20} />
+            <Link
+              href="/ueber-uns"
+              className="text-accent font-bold flex items-center gap-2 hover:text-white transition-colors group"
+            >
+              {t("portfolio.link")}{" "}
+              <ChevronRight
+                className="transition-transform group-hover:translate-x-1"
+                size={20}
+              />
             </Link>
           </Reveal>
 
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             {[
-              { 
-                icon: <Zap size={32} />, 
-                title: 'Technische Beratung', 
-                desc: 'Individuelle Konzepte, Vergleiche, Risikobetrachtung und Empfehlungen für Ihre Kabelinfrastruktur.' 
+              {
+                icon: <Zap size={32} />,
+                title: t("portfolio.items.beratung.title"),
+                desc: t("portfolio.items.beratung.desc"),
               },
-              { 
-                icon: <Shield size={32} />, 
-                title: 'Projektbegleitung', 
-                desc: 'Wir begleiten Sie bei der Verlegung und Installation, um Herausforderungen proaktiv zu lösen.' 
+              {
+                icon: <Shield size={32} />,
+                title: t("portfolio.items.begleitung.title"),
+                desc: t("portfolio.items.begleitung.desc"),
+              },
+              {
+                icon: <BarChart3 size={32} />,
+                title: t("portfolio.items.beschaffung.title"),
+                desc: t("portfolio.items.beschaffung.desc"),
               },
-              { 
-                icon: <BarChart3 size={32} />, 
-                title: 'Produktbeschaffung', 
-                desc: 'Herstellerneutrale Marktanalyse und Unterstützung bei der Komponentenwahl hinsichtlich Qualität und Preis.' 
-              }
             ].map((item, i) => (
               <Reveal key={i} delay={i * 0.1}>
                 <div className="bg-white/5 p-8 rounded-2xl border border-white/10 group hover:-translate-y-2 transition-[box-shadow,transform] duration-300 h-full relative overflow-hidden">
@@ -154,7 +182,9 @@ export default function Home() {
                   <div className="w-16 h-16 rounded-2xl bg-accent/10 text-accent flex items-center justify-center mb-8 group-hover:bg-accent group-hover:text-white transition-colors relative z-10">
                     {item.icon}
                   </div>
-                  <h3 className="text-2xl font-bold text-white mb-4 relative z-10">{item.title}</h3>
+                  <h3 className="text-2xl font-bold text-white mb-4 relative z-10">
+                    {item.title}
+                  </h3>
                   <p className="text-slate-400 leading-relaxed relative z-10">
                     {item.desc}
                   </p>
@@ -187,21 +217,18 @@ export default function Home() {
             </Reveal>
             <div>
               <Reveal>
-                <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Expertise</span>
-                <h2 className="text-3xl md:text-5xl font-bold text-primary mb-6 md:mb-8">Anwendungen & Zielgruppen</h2>
+                <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
+                  {t("expertise.tag")}
+                </span>
+                <h2 className="text-3xl md:text-5xl font-bold text-primary mb-6 md:mb-8">
+                  {t("expertise.title")}
+                </h2>
                 <p className="text-slate-600 text-base md:text-xl mb-8 md:mb-12">
-                  Wir unterstützen Akteure der Energiewende bei der Realisierung komplexer Kabelprojekte mit höchster Präzision.
+                  {t("expertise.description")}
                 </p>
               </Reveal>
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                {[
-                  'Energieversorger',
-                  'Ingenieurbüros',
-                  'Tiefbauunternehmen',
-                  'Industrie',
-                  'Projektierer EE',
-                  'Planungsbüros'
-                ].map((item, i) => (
+                {t.raw("expertise.groups").map((item: string, i: number) => (
                   <Reveal key={i} delay={i * 0.05}>
                     <div className="flex items-center gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 hover:border-accent/30 transition-colors group relative overflow-hidden">
                       <div className="absolute top-0 left-0 w-1 h-full bg-accent/0 group-hover:bg-accent/100 transition-all duration-300" />
@@ -230,7 +257,7 @@ export default function Home() {
           <div className="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-900/80 to-slate-900" />
         </div>
         <TechBackground />
-        
+
         <div className="container-custom relative z-10">
           <Counter value={4} className="section-number !text-white/5" />
           {/* Data Stream Effect */}
@@ -238,15 +265,31 @@ export default function Home() {
           <div className="absolute -bottom-10 left-10 w-px h-64 bg-gradient-to-b from-transparent via-accent/30 to-transparent animate-pulse delay-700" />
 
           <Reveal className="mb-20">
-            <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Spezifikationen</span>
-            <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">Technische Expertise</h2>
+            <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
+              {t("specs.tag")}
+            </span>
+            <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
+              {t("specs.title")}
+            </h2>
           </Reveal>
-          
+
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
             {[
-              { label: 'Kabeltypen', value: 'N2XS(FL)2Y, N2X(F)KLD2Y...', desc: 'Umfassende Expertise im Design gängiger Hochspannungskabel.' },
-              { label: 'Spannungsebenen', value: '64/110 kV & Mittelspannung', desc: 'Spezialisierte Beratung für komplexe Infrastrukturprojekte.' },
-              { label: 'Leitertechnologie', value: 'Massiv-, Mehrdraht- & Milliken', desc: 'Optimierung des Leiterdesigns hinsichtlich Stromtragfähigkeit.' }
+              {
+                label: t("specs.items.kabel.label"),
+                value: t("specs.items.kabel.value"),
+                desc: t("specs.items.kabel.desc"),
+              },
+              {
+                label: t("specs.items.spannung.label"),
+                value: t("specs.items.spannung.value"),
+                desc: t("specs.items.spannung.desc"),
+              },
+              {
+                label: t("specs.items.technologie.label"),
+                value: t("specs.items.technologie.value"),
+                desc: t("specs.items.technologie.desc"),
+              },
             ].map((item, i) => (
               <Reveal key={i} delay={i * 0.1}>
                 <div className="p-10 rounded-3xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-colors h-full relative group overflow-hidden">
@@ -257,9 +300,7 @@ export default function Home() {
                   <p className="text-2xl font-bold text-white mb-4 leading-tight">
                     {item.value}
                   </p>
-                  <p className="text-slate-400 leading-relaxed">
-                    {item.desc}
-                  </p>
+                  <p className="text-slate-400 leading-relaxed">{item.desc}</p>
                 </div>
               </Reveal>
             ))}
@@ -283,38 +324,73 @@ export default function Home() {
               <div className="tech-corner top-8 right-8 border-t-2 border-r-2" />
               <div className="tech-corner bottom-8 left-8 border-b-2 border-l-2" />
               <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" />
-              
+
               <div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
                 <LazyMotion features={domAnimation}>
-                <svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <m.circle
-                    animate={{ r: [400, 410, 400], opacity: [0.1, 0.2, 0.1] }}
-                    transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }}
-                    cx="400" cy="0" r="400" stroke="white" strokeWidth="2"
-                  />
-                  <m.circle
-                    animate={{ r: [300, 310, 300], opacity: [0.1, 0.2, 0.1] }}
-                    transition={{ duration: 4, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}
-                    cx="400" cy="0" r="300" stroke="white" strokeWidth="2"
-                  />
-                  <m.circle
-                    animate={{ r: [200, 210, 200], opacity: [0.1, 0.2, 0.1] }}
-                    transition={{ duration: 3, repeat: Infinity, ease: "easeInOut", delay: 1 }}
-                    cx="400" cy="0" r="200" stroke="white" strokeWidth="2"
-                  />
-                </svg>
+                  <svg
+                    viewBox="0 0 400 400"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <m.circle
+                      animate={{ r: [400, 410, 400], opacity: [0.1, 0.2, 0.1] }}
+                      transition={{
+                        duration: 5,
+                        repeat: Infinity,
+                        ease: "easeInOut",
+                      }}
+                      cx="400"
+                      cy="0"
+                      r="400"
+                      stroke="white"
+                      strokeWidth="2"
+                    />
+                    <m.circle
+                      animate={{ r: [300, 310, 300], opacity: [0.1, 0.2, 0.1] }}
+                      transition={{
+                        duration: 4,
+                        repeat: Infinity,
+                        ease: "easeInOut",
+                        delay: 0.5,
+                      }}
+                      cx="400"
+                      cy="0"
+                      r="300"
+                      stroke="white"
+                      strokeWidth="2"
+                    />
+                    <m.circle
+                      animate={{ r: [200, 210, 200], opacity: [0.1, 0.2, 0.1] }}
+                      transition={{
+                        duration: 3,
+                        repeat: Infinity,
+                        ease: "easeInOut",
+                        delay: 1,
+                      }}
+                      cx="400"
+                      cy="0"
+                      r="200"
+                      stroke="white"
+                      strokeWidth="2"
+                    />
+                  </svg>
                 </LazyMotion>
               </div>
-              
+
               <div className="relative z-10">
                 <h2 className="text-3xl md:text-6xl font-bold text-white mb-6 md:mb-8 leading-tight">
-                  Bereit für Ihr nächstes Projekt?
+                  {t("cta.title")}
                 </h2>
                 <p className="text-slate-300 text-lg md:text-xl mb-8 md:mb-12 leading-relaxed">
-                  Lassen Sie uns gemeinsam die optimale Lösung für Ihre Energieinfrastruktur finden. Wir beraten Sie herstellerneutral und kompetent.
+                  {t("cta.subtitle")}
                 </p>
-                <Button href="/kontakt" variant="accent" showArrow className="w-full sm:w-auto !px-10 !py-5 text-lg">
-                  Jetzt Kontakt aufnehmen
+                <Button
+                  href="/kontakt"
+                  variant="accent"
+                  showArrow
+                  className="w-full sm:w-auto !px-10 !py-5 text-lg"
+                >
+                  {t("cta.button")}
                 </Button>
               </div>
             </div>