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

app/[locale]/twitter-image.tsx

@@ -0,0 +1,175 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+export const alt =
+  "MB Grid Solutions | Energiekabelprojekte & Technische Beratung";
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = "image/png";
+
+export default async function Image() {
+  return new ImageResponse(
+    <div
+      style={{
+        background: "#ffffff",
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        fontFamily: "sans-serif",
+      }}
+    >
+      {/* Grid Pattern Background */}
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundImage:
+            "radial-gradient(circle, #e2e8f0 1.5px, transparent 1.5px)",
+          backgroundSize: "40px 40px",
+          zIndex: 0,
+        }}
+      />
+
+      {/* Content Container */}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(255, 255, 255, 0.95)",
+          padding: "60px 80px",
+          borderRadius: "48px",
+          border: "1px solid #e2e8f0",
+          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.1)",
+          zIndex: 1,
+          position: "relative",
+        }}
+      >
+        {/* Engineering Excellence Badge */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            padding: "8px 20px",
+            backgroundColor: "rgba(16, 185, 129, 0.1)",
+            borderRadius: "100px",
+            marginBottom: "32px",
+          }}
+        >
+          <div
+            style={{
+              width: "10px",
+              height: "10px",
+              backgroundColor: "#10b981",
+              borderRadius: "50%",
+            }}
+          />
+          <div
+            style={{
+              fontSize: "14px",
+              fontWeight: "bold",
+              color: "#10b981",
+              textTransform: "uppercase",
+              letterSpacing: "0.1em",
+            }}
+          >
+            Engineering Excellence
+          </div>
+        </div>
+
+        {/* Brand Mark */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100px",
+            height: "100px",
+            backgroundColor: "#0f172a",
+            borderRadius: "24px",
+            marginBottom: "32px",
+            boxShadow: "0 10px 15px -3px rgba(15, 23, 42, 0.3)",
+          }}
+        >
+          <div
+            style={{
+              fontSize: "48px",
+              fontWeight: "bold",
+              color: "#10b981",
+            }}
+          >
+            MB
+          </div>
+        </div>
+
+        {/* Title */}
+        <div
+          style={{
+            fontSize: "72px",
+            fontWeight: "900",
+            color: "#0f172a",
+            marginBottom: "16px",
+            textAlign: "center",
+            letterSpacing: "-0.02em",
+          }}
+        >
+          MB Grid <span style={{ color: "#10b981" }}>Solutions</span>
+        </div>
+
+        {/* Subtitle */}
+        <div
+          style={{
+            fontSize: "32px",
+            fontWeight: "500",
+            color: "#64748b",
+            textAlign: "center",
+            maxWidth: "800px",
+            lineHeight: 1.4,
+          }}
+        >
+          Energiekabelprojekte & Technische Beratung
+          <br />
+          bis 110 kV
+        </div>
+      </div>
+
+      {/* Tech Lines */}
+      <div
+        style={{
+          position: "absolute",
+          top: "10%",
+          left: 0,
+          width: "200px",
+          height: "1px",
+          backgroundColor: "rgba(16, 185, 129, 0.2)",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          bottom: "15%",
+          right: 0,
+          width: "300px",
+          height: "1px",
+          backgroundColor: "rgba(16, 185, 129, 0.2)",
+        }}
+      />
+    </div>,
+    {
+      ...size,
+    },
+  );
+}