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

components/sections/ExpertiseSection.tsx

@@ -3,14 +3,31 @@
 import React from "react";
 import Image from "next/image";
 import { CheckCircle2 } 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 ExpertiseSection = () => {
+interface ExpertiseSectionProps {
+  tag?: string;
+  title?: string;
+  description?: string;
+  groups?: string[];
+}
+
+export const ExpertiseSection = ({
+  tag,
+  title,
+  description,
+  groups,
+}: ExpertiseSectionProps) => {
   const t = useTranslations("Index");
 
+  const displayTag = tag || t("expertise.tag");
+  const displayTitle = title || t("expertise.title");
+  const displayDescription = description || t("expertise.description");
+  const displayGroups = groups || t.raw("expertise.groups");
+
   return (
     <section className="bg-white relative overflow-hidden">
       <TechBackground />
@@ -34,17 +51,17 @@ export const ExpertiseSection = () => {
           <div>
             <Reveal>
               <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
-                {t("expertise.tag")}
+                {displayTag}
               </span>
               <h2 className="text-3xl md:text-5xl font-bold text-primary mb-6 md:mb-8">
-                {t("expertise.title")}
+                {displayTitle}
               </h2>
               <p className="text-slate-600 text-base md:text-xl mb-8 md:mb-12">
-                {t("expertise.description")}
+                {displayDescription}
               </p>
             </Reveal>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              {t.raw("expertise.groups").map((item: string, i: number) => (
+              {displayGroups.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" />