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

components/sections/PortfolioSection.tsx

@@ -3,14 +3,59 @@
 import React from "react";
 import Link from "next/link";
 import { ChevronRight, Zap, Shield, BarChart3 } from "lucide-react";
-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 PortfolioSection = () => {
+interface PortfolioItem {
+  icon: React.ReactNode;
+  title: string;
+  desc: string;
+}
+
+interface PortfolioSectionProps {
+  tag?: string;
+  title?: string;
+  description?: string;
+  linkText?: string;
+  items?: PortfolioItem[];
+}
+
+export const PortfolioSection = ({
+  tag,
+  title,
+  description,
+  linkText,
+  items,
+}: PortfolioSectionProps) => {
   const t = useTranslations("Index");
 
+  const displayTag = tag || t("portfolio.tag");
+  const displayTitle = title || t("portfolio.title");
+  const displayDescription = description || t("portfolio.description");
+  const displayLinkText = linkText || t("portfolio.link");
+
+  const defaultItems = [
+    {
+      icon: <Zap size={32} />,
+      title: t("portfolio.items.beratung.title"),
+      desc: t("portfolio.items.beratung.desc"),
+    },
+    {
+      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"),
+    },
+  ];
+
+  const displayItems = items || defaultItems;
+
   return (
     <section className="bg-slate-950 text-accent relative overflow-hidden">
       <TechBackground />
@@ -19,20 +64,20 @@ export const PortfolioSection = () => {
         <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">
-              {t("portfolio.tag")}
+              {displayTag}
             </span>
             <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
-              {t("portfolio.title")}
+              {displayTitle}
             </h2>
             <p className="text-slate-400 text-base md:text-xl">
-              {t("portfolio.description")}
+              {displayDescription}
             </p>
           </div>
           <Link
             href="/ueber-uns"
             className="text-accent font-bold flex items-center gap-2 hover:text-white transition-colors group"
           >
-            {t("portfolio.link")}{" "}
+            {displayLinkText}{" "}
             <ChevronRight
               className="transition-transform group-hover:translate-x-1"
               size={20}
@@ -41,23 +86,7 @@ export const PortfolioSection = () => {
         </Reveal>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {[
-            {
-              icon: <Zap size={32} />,
-              title: t("portfolio.items.beratung.title"),
-              desc: t("portfolio.items.beratung.desc"),
-            },
-            {
-              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"),
-            },
-          ].map((item, i) => (
+          {displayItems.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">
                 <div className="absolute top-0 right-0 w-16 h-16 bg-accent/5 -mr-8 -mt-8 rounded-full group-hover:bg-accent/10 transition-colors" />