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/__tests__/components/Hero.test.tsx

@@ -1,16 +1,21 @@
 import { render, screen } from '@testing-library/react';
 import Hero from '@/app/components/Hero';
 
-// Mock next-intl
-jest.mock('next-intl', () => ({
-  useLocale: () => 'en',
-  useTranslations: () => (key: string) => {
+// Mock next-intl/server
+jest.mock('next-intl/server', () => ({
+  getTranslations: () => Promise.resolve((key: string) => {
     const messages: Record<string, string> = {
       description: 'Dennis is a student and passionate self-hoster.',
-      ctaWork: 'View My Work'
+      ctaWork: 'View My Work',
+      ctaContact: 'Get in touch',
     };
     return messages[key] || key;
-  },
+  }),
+}));
+
+// Mock directus getMessages
+jest.mock('@/lib/directus', () => ({
+  getMessages: () => Promise.resolve({}),
 }));
 
 // Mock next/image
@@ -36,8 +41,9 @@ jest.mock('next/image', () => ({
 }));
 
 describe('Hero', () => {
-  it('renders the hero section correctly', () => {
-    render(<Hero />);
+  it('renders the hero section correctly', async () => {
+    const HeroResolved = await Hero({ locale: 'en' });
+    render(HeroResolved);
     
     // Check for the main headlines (defaults in Hero.tsx)
     expect(screen.getByText('Building')).toBeInTheDocument();