feat: complete migration to static MDX, stabilize local infrastructure and fix i18n issues

components/sections/TechnicalSpecsSection.tsx

@@ -2,14 +2,53 @@
 
 import React from "react";
 import Image from "next/image";
-import { Reveal } from "../Reveal";
-import { Counter } from "../Counter";
-import { TechBackground } from "../TechBackground";
+import { Reveal } from "@/components/Reveal";
+import { Counter } from "@/components/Counter";
+import { TechBackground } from "@/components/TechBackground";
 import { useTranslations } from "next-intl";
 
-export const TechnicalSpecsSection = () => {
+interface SpecItem {
+  label: string;
+  value: string;
+  desc: string;
+}
+
+interface TechnicalSpecsSectionProps {
+  tag?: string;
+  title?: string;
+  items?: SpecItem[];
+}
+
+export const TechnicalSpecsSection = ({
+  tag,
+  title,
+  items,
+}: TechnicalSpecsSectionProps) => {
   const t = useTranslations("Index");
 
+  const displayTag = tag || t("specs.tag");
+  const displayTitle = title || t("specs.title");
+
+  const defaultItems = [
+    {
+      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"),
+    },
+  ];
+
+  const displayItems = items || defaultItems;
+
   return (
     <section className="relative py-24 md:py-32 text-white overflow-hidden bg-slate-900">
       <div className="absolute inset-0 opacity-20">
@@ -31,31 +70,15 @@ export const TechnicalSpecsSection = () => {
 
         <Reveal className="mb-20">
           <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
-            {t("specs.tag")}
+            {displayTag}
           </span>
           <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
-            {t("specs.title")}
+            {displayTitle}
           </h2>
         </Reveal>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
-          {[
-            {
-              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) => (
+          {displayItems.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">
                 <div className="absolute top-0 left-0 w-full h-1 bg-accent/0 group-hover:bg-accent/50 transition-all duration-500" />