perf: convert Hero to server component for faster LCP

- Hero now renders server-side, eliminating JS dependency for LCP text
- CMS messages fetched server-side instead of client useEffect
- Removes Hero from client JS bundle (~5KB less)
- LCP element (hero paragraph) now in initial HTML response
- Eliminates 2,380ms 'element rendering delay' reported by PSI

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

app/components/Hero.tsx

@@ -1,27 +1,17 @@
-"use client";
-
-import { useLocale, useTranslations } from "next-intl";
+import { getTranslations } from "next-intl/server";
 import Image from "next/image";
-import { useEffect, useState } from "react";
+import { getMessages } from "@/lib/directus";
 
-const Hero = () => {
-  const locale = useLocale();
-  const t = useTranslations("home.hero");
-  const [cmsMessages, setCmsMessages] = useState<Record<string, string>>({});
+interface HeroProps {
+  locale: string;
+}
 
-  useEffect(() => {
-    (async () => {
-      try {
-        const res = await fetch(`/api/messages?locale=${locale}`);
-        if (res.ok) {
-          const data = await res.json();
-          setCmsMessages(data.messages || {});
-        }
-      } catch {}
-    })();
-  }, [locale]);
+export default async function Hero({ locale }: HeroProps) {
+  const [t, cmsMessages] = await Promise.all([
+    getTranslations("home.hero"),
+    getMessages(locale).catch(() => ({} as Record<string, string>)),
+  ]);
 
-  // Helper to get CMS text or fallback
   const getLabel = (key: string, fallback: string) => cmsMessages[key] || fallback;
 
   return (
@@ -86,6 +76,4 @@ const Hero = () => {
       </div>
     </section>
   );
-};
-
-export default Hero;
+}