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

components/sections/AboutHero.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { Reveal } from "@/components/Reveal";
+import { TechBackground } from "@/components/TechBackground";
+import { Counter } from "@/components/Counter";
+
+interface AboutHeroProps {
+  tagline: string;
+  title: React.ReactNode;
+  subtitle: string;
+}
+
+export function AboutHero({ tagline, title, subtitle }: AboutHeroProps) {
+  return (
+    <section className="relative min-h-[60vh] flex items-center pt-44 pb-20 overflow-hidden">
+      <div className="absolute inset-0 z-0">
+        <Image
+          src="/media/drums/about-hero.jpg"
+          alt="About MB Grid Solutions"
+          fill
+          className="object-cover"
+          priority
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
+        <TechBackground />
+      </div>
+
+      <div className="container-custom relative z-10">
+        <div className="text-left relative">
+          <Counter value={1} className="section-number" />
+          <Reveal delay={0.1}>
+            <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">
+              {tagline}
+            </span>
+          </Reveal>
+          <Reveal delay={0.2}>
+            <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-primary mb-6 md:mb-8 leading-tight">
+              {title}
+            </h1>
+          </Reveal>
+          <Reveal delay={0.3}>
+            <p className="text-slate-600 text-lg md:text-2xl leading-relaxed mb-8">
+              {subtitle}
+            </p>
+          </Reveal>
+        </div>
+      </div>
+    </section>
+  );
+}