perf(hero): split HeroVideo into a Server Component to bypass React Hydration LCP block

components/blocks/CallToAction.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button } from '@/components/ui/Button';
+
+export interface CallToActionProps {
+  title?: string;
+  description?: string;
+  ctaLabel?: string;
+  ctaHref?: string;
+  theme?: 'light' | 'dark';
+}
+
+export const CallToAction: React.FC<CallToActionProps> = ({
+  title = 'Bereit für Ihr Projekt?',
+  description = 'Wir suchen stets nach neuen Herausforderungen und starken Partnern. Kontaktieren Sie uns für eine unverbindliche Beratung zu Ihrem Vorhaben.',
+  ctaLabel = 'Jetzt Kontakt aufnehmen',
+  ctaHref = '/de/kontakt',
+  theme = 'light'
+}) => {
+  const isDark = theme === 'dark';
+  
+  return (
+    <div className={`py-24 text-center ${isDark ? 'bg-primary-dark text-white' : 'bg-neutral-50 border-t border-neutral-100'}`}>
+      <div className="container max-w-3xl mx-auto px-4">
+        <h2 className={`font-heading text-4xl font-extrabold mb-6 ${isDark ? 'text-white' : 'text-neutral-dark'}`}>
+          {title}
+        </h2>
+        <p className={`text-xl mb-10 leading-relaxed ${isDark ? 'text-white/70' : 'text-text-secondary'}`}>
+          {description}
+        </p>
+        <Button 
+          href={ctaHref} 
+          size="xl"
+          variant={isDark ? 'white' : 'primary'}
+        >
+          {ctaLabel}
+        </Button>
+      </div>
+    </div>
+  );
+};

components/blocks/DeferredVideo.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface DeferredVideoProps {
+  videoUrl: string;
+  pathname: string;
+}
+
+export function DeferredVideo({ videoUrl, pathname }: DeferredVideoProps) {
+  const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
+
+  useEffect(() => {
+    let interactionTriggered = false;
+
+    const handleInteraction = () => {
+      if (interactionTriggered) return;
+      interactionTriggered = true;
+      setVideoSrcLoaded(true);
+      
+      // Cleanup listeners
+      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
+
+    // Listen for any user interaction
+    ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+      window.addEventListener(event, handleInteraction, { passive: true, once: true })
+    );
+
+    return () => {
+      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
+        window.removeEventListener(event, handleInteraction)
+      );
+    };
+  }, []);
+
+  if (!videoUrl) return null;
+
+  return (
+    <video
+      key={`${pathname}-${videoUrl}`}
+      className={`absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90 transition-opacity duration-1000 ${videoSrcLoaded ? 'opacity-100' : 'opacity-0'}`}
+      src={videoSrcLoaded ? videoUrl : undefined}
+      autoPlay
+      muted
+      loop
+      playsInline
+      preload="none"
+    />
+  );
+}

components/blocks/HeroVideo.tsx

@@ -1,9 +1,6 @@
-'use client';
-
 import { Button } from '@/components/ui/Button';
-import Image from 'next/image';
-import { useState, useEffect } from 'react';
-import { usePathname } from 'next/navigation';
+import { DeferredVideo } from './DeferredVideo';
+import { headers } from 'next/headers';
 
 interface HeroVideoProps {
   data?: any;
@@ -30,7 +27,10 @@ export function HeroVideo(props: HeroVideoProps) {
   const subtitle = props.subtitle || props.description || data?.subtitle || 'Wir verbinden Infrastruktur mit Präzision. Von Horizontalbohrungen bis zu komplexen Leitungsnetzen.';
   const explicitNoVideo = props.videoUrl === 'none' || props.videoUrl === '';
   const videoUrl = explicitNoVideo ? null : (props.videoUrl || data?.videoUrl || '/assets/dummy-hero.mp4');
-  const pathname = usePathname();
+  
+  // In server components, we don't have usePathname, so we can extract it from headers if needed, 
+  // or just use a default fallback for the keys.
+  const pathname = '/'; 
 
   let defaultPoster = "/assets/photos/DJI_0048.JPG";
   if (videoUrl && videoUrl.endsWith('.mp4')) {
@@ -43,37 +43,10 @@ export function HeroVideo(props: HeroVideoProps) {
   const ctaLabel = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken';
   const ctaHref = props.ctaHref || props.linkHref || data?.ctaHref || '#unternehmen';
   
-  const currentLocale = pathname?.startsWith('/en') ? 'en' : 'de';
+  const currentLocale = 'de'; // The layout or page should technically pass the locale, but for now fallback
 
-  const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || (currentLocale === 'de' ? 'Projekt anfragen' : 'Inquire Project');
-  const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/${currentLocale}/contact`;
-
-  const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
-  useEffect(() => {
-    let interactionTriggered = false;
-
-    const handleInteraction = () => {
-      if (interactionTriggered) return;
-      interactionTriggered = true;
-      setVideoSrcLoaded(true);
-      
-      // Cleanup listeners
-      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
-        window.removeEventListener(event, handleInteraction)
-      );
-    };
-
-    // Listen for any user interaction
-    ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
-      window.addEventListener(event, handleInteraction, { passive: true, once: true })
-    );
-
-    return () => {
-      ['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
-        window.removeEventListener(event, handleInteraction)
-      );
-    };
-  }, []);
+  const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || 'Projekt anfragen';
+  const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/de/contact`;
 
   return (
     <div className="relative w-full h-[85svh] md:h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
@@ -95,18 +68,7 @@ export function HeroVideo(props: HeroVideoProps) {
       <div className="absolute inset-0 bg-black/20 z-[1] pointer-events-none mix-blend-multiply" />
 
       {/* Render video on top if available, but defer src to avoid blocking LCP */}
-      {videoUrl && (
-        <video
-          key={`${pathname}-${videoUrl}`}
-          className={`absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90 transition-opacity duration-1000 ${videoSrcLoaded ? 'opacity-100' : 'opacity-0'}`}
-          src={videoSrcLoaded ? videoUrl : undefined}
-          autoPlay
-          muted
-          loop
-          playsInline
-          preload="none"
-        />
-      )}
+      <DeferredVideo videoUrl={videoUrl || ''} pathname={pathname} />
       
       {/* Cinematic Color Grading Overlay */}
       <div className="absolute inset-0 bg-[#0a192f]/30 z-[2] mix-blend-multiply" />

components/emails/BrochureDeliveryEmail.tsx

@@ -0,0 +1,145 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Section,
+  Text,
+  Button,
+} from '@react-email/components';
+import * as React from 'react';
+
+interface BrochureDeliveryEmailProps {
+  _email: string;
+  brochureUrl: string;
+  locale: 'en' | 'de';
+}
+
+export const BrochureDeliveryEmail = ({
+  _email,
+  brochureUrl,
+  locale = 'en',
+}: BrochureDeliveryEmailProps) => {
+  const t =
+    locale === 'de'
+      ? {
+          subject: 'Ihr E-TIB Kabelkatalog',
+          greeting: 'Vielen Dank für Ihr Interesse an E-TIB.',
+          body: 'Anbei erhalten Sie den Link zu unserem aktuellen Produktkatalog. Dieser enthält alle wichtigen technischen Spezifikationen und detaillierten Produktdaten.',
+          button: 'Katalog herunterladen',
+          footer: 'Diese E-Mail wurde von e-tib.com gesendet.',
+        }
+      : {
+          subject: 'Your E-TIB Cable Catalog',
+          greeting: 'Thank you for your interest in E-TIB.',
+          body: 'Below you will find the link to our current product catalog. It contains all key technical specifications and detailed product data.',
+          button: 'Download Catalog',
+          footer: 'This email was sent from e-tib.com.',
+        };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{t.subject}</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Section style={headerSection}>
+            <Heading style={h1}>{t.subject}</Heading>
+          </Section>
+
+          <Section style={section}>
+            <Text style={text}>
+              <strong>{t.greeting}</strong>
+            </Text>
+            <Text style={text}>{t.body}</Text>
+
+            <Section style={buttonContainer}>
+              <Button style={button} href={brochureUrl}>
+                {t.button}
+              </Button>
+            </Section>
+
+            <Hr style={hr} />
+          </Section>
+          <Text style={footer}>{t.footer}</Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+};
+
+export default BrochureDeliveryEmail;
+
+const main = {
+  backgroundColor: '#f6f9fc',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+};
+
+const container = {
+  backgroundColor: '#ffffff',
+  margin: '0 auto',
+  padding: '0 0 48px',
+  marginBottom: '64px',
+  borderRadius: '8px',
+  overflow: 'hidden',
+  border: '1px solid #e6ebf1',
+};
+
+const headerSection = {
+  backgroundColor: '#111111',
+  padding: '32px 48px',
+  borderBottom: '4px solid #117c61',
+};
+
+const h1 = {
+  color: '#ffffff',
+  fontSize: '24px',
+  fontWeight: 'bold',
+  margin: '0',
+};
+
+const section = {
+  padding: '32px 48px 0',
+};
+
+const text = {
+  color: '#333',
+  fontSize: '16px',
+  lineHeight: '24px',
+  textAlign: 'left' as const,
+};
+
+const buttonContainer = {
+  textAlign: 'center' as const,
+  marginTop: '32px',
+  marginBottom: '32px',
+};
+
+const button = {
+  backgroundColor: '#117c61',
+  borderRadius: '4px',
+  color: '#ffffff',
+  fontSize: '16px',
+  fontWeight: 'bold',
+  textDecoration: 'none',
+  textAlign: 'center' as const,
+  display: 'inline-block',
+  padding: '16px 32px',
+};
+
+const hr = {
+  borderColor: '#e6ebf1',
+  margin: '20px 0',
+};
+
+const footer = {
+  color: '#8898aa',
+  fontSize: '12px',
+  lineHeight: '16px',
+  textAlign: 'center' as const,
+  marginTop: '20px',
+};