Redesign homepage YouTube section as a full-bleed video hero

Replaces the two-column badge/embed layout with a full-width background
video, dark overlay, and centered eyebrow/heading/CTA - matching the
cinematic teaser style used by other car-audio shops. The CTA links
directly to the specific YouTube video instead of just the channel.

The provided source video (177MB, 2560x1440@60fps) was compressed for
web delivery: 1280px width, 30fps, audio stripped (video is muted
background anyway), H.264 CRF 30 - down to 8.2MB with no visible
quality loss at this scale.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

hifi-src/src/i18n/de.js

@@ -82,12 +82,10 @@ export default {
       { title: 'Sound-Paket entdecken', text: 'Passende Pakete inkl. aktueller Preise auf einen Blick.' },
       { title: 'Unverbindlich anfragen', text: 'Wir melden uns zeitnah mit allen Details bei dir.' },
     ],
-    youtubeBadge: 'HifiPlanet auf YouTube',
+    youtubeBadge: 'HifiPlanet präsentiert',
-    youtubeTitle: 'Sieh dir unsere Umbauten in Aktion an',
+    youtubeTitle: 'Das Handwerk hinter deinem Sound',
-    youtubeText: 'Umbauten, Soundchecks und Verstärker-Tests aus unserer Werkstatt – „Den besten Sound gibt es nicht ab Werk!"',
+    youtubeText: 'Entdecke die Handwerkskunst hinter unserer Arbeit',
-    youtubeChecklist: ['Umbauten Schritt für Schritt', 'Soundchecks & Vergleiche', 'Verstärker- & Komponenten-Tests'],
+    youtubeCta: 'Jetzt ansehen',
-    youtubeCta: 'Zum YouTube-Kanal',
-    youtubeEmbedName: 'Das YouTube-Video',
     heroImageAlt: 'Ground Zero Subwoofer und Endstufen mit violetter Ambiente-Beleuchtung',
     craftImageAlt: 'Individueller Subwoofer-Bau',
     adviceImageAlt: 'Endstufen-Einbau mit Ambiente-Beleuchtung',

hifi-src/src/i18n/en.js

@@ -82,12 +82,10 @@ export default {
       { title: 'Discover a sound package', text: 'Matching packages with current prices at a glance.' },
       { title: 'Get in touch', text: "We'll get back to you shortly with all the details." },
     ],
-    youtubeBadge: 'HifiPlanet on YouTube',
+    youtubeBadge: 'HifiPlanet presents',
-    youtubeTitle: 'See our installations in action',
+    youtubeTitle: 'The craft behind your sound',
-    youtubeText: 'Installations, sound checks and amplifier tests straight from our workshop – "The best sound doesn\'t come from the factory!"',
+    youtubeText: 'Discover the artistry behind our work',
-    youtubeChecklist: ['Installations step by step', 'Sound checks & comparisons', 'Amplifier & component tests'],
+    youtubeCta: 'Watch now',
-    youtubeCta: 'Visit our YouTube channel',
-    youtubeEmbedName: 'The YouTube video',
     heroImageAlt: 'Ground Zero subwoofer and amplifiers with purple ambient lighting',
     craftImageAlt: 'Custom subwoofer build',
     adviceImageAlt: 'Amplifier installation with ambient lighting',

hifi-src/src/pages/public/Home.jsx

@@ -6,7 +6,6 @@ import Reveal from '../../components/Reveal.jsx';
 import Accordion from '../../components/Accordion.jsx';
 import StarRating from '../../components/StarRating.jsx';
 import TestimonialSlider from '../../components/TestimonialSlider.jsx';
-import ExternalEmbed from '../../components/ExternalEmbed.jsx';
 import { useSiteSettings } from '../../context/SiteSettingsContext.jsx';
 import { useLanguage } from '../../context/LanguageContext.jsx';
 import defaultHeroImage from '../../assets/photos/gallery-dash2.jpg';
@@ -17,6 +16,7 @@ import galleryDash from '../../assets/photos/gallery-dash.jpg';
 import galleryTrunk from '../../assets/photos/hero-trunk.jpg';
 import galleryRear from '../../assets/photos/gallery-rear.jpg';
 import heroHighlight from '../../assets/leistungen/hero-highlight.jpg';
+import youtubeVideo from '../../assets/videos/youtube-hintergrund.mp4';
 
 const YOUTUBE_URL = 'https://www.youtube.com/@hifiplanet2812';
 const YOUTUBE_VIDEO_ID = 'ostj2mKDVUc';
@@ -183,63 +183,38 @@ export default function Home() {
         </div>
       </section>
 
-      <section
+      <section className="relative flex min-h-[70vh] items-center justify-center overflow-hidden sm:min-h-[85vh]">
-        className="relative overflow-hidden py-20 sm:py-28"
+        <video
-        style={{ backgroundImage: 'linear-gradient(to bottom, transparent, #0a0a0a 3%, #0a0a0a 97%, transparent)' }}
+          autoPlay
+          loop
+          muted
+          playsInline
+          poster={galleryDash}
+          className="absolute inset-0 h-full w-full object-cover"
         >
-        <div className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-brand-500/25 blur-3xl" />
+          <source src={youtubeVideo} type="video/mp4" />
-        <div className="pointer-events-none absolute -bottom-24 -left-24 h-72 w-72 rounded-full bg-brand-500/15 blur-3xl" />
+        </video>
+        <div className="absolute inset-0 bg-black/55" />
 
-        <div className="relative mx-auto grid max-w-6xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:items-center">
+        <Reveal className="relative mx-auto max-w-3xl px-4 text-center sm:px-6">
-          <Reveal direction="left" className="text-center lg:text-left">
+          <p className="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-neutral-200 sm:text-sm">
-            <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1.5 text-sm font-semibold text-white backdrop-blur">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5 text-white">
-                <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31.4 31.4 0 0 0 0 12a31.4 31.4 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31.4 31.4 0 0 0 24 12a31.4 31.4 0 0 0-.5-5.8ZM9.6 15.6V8.4l6.3 3.6-6.3 3.6Z" />
-              </svg>
             {t('home.youtubeBadge')}
-            </div>
+          </p>
-            <h2 className="text-3xl font-extrabold text-white sm:text-4xl">{t('home.youtubeTitle')}</h2>
+          <h2 className="text-3xl font-bold uppercase tracking-wide text-white sm:text-5xl">
-            <p className="mx-auto mt-4 max-w-xl text-lg text-neutral-300 lg:mx-0">
+            {t('home.youtubeTitle')}
+          </h2>
+          <p className="mt-4 text-xs font-semibold uppercase tracking-wide text-neutral-200 sm:text-sm">
             {t('home.youtubeText')}
           </p>
-            <ul className="mx-auto mt-6 flex max-w-xl flex-col items-center gap-2 text-sm text-neutral-300 sm:flex-row sm:flex-wrap sm:justify-center lg:mx-0 lg:justify-start">
-              {t('home.youtubeChecklist').map((item) => (
-                <li key={item} className="flex items-center gap-2 rounded-full bg-white/10 px-3 py-1">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-3.5 w-3.5 flex-none">
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-                  </svg>
-                  {item}
-                </li>
-              ))}
-            </ul>
           <a
-              href={YOUTUBE_URL}
+            href={`https://www.youtube.com/watch?v=${YOUTUBE_VIDEO_ID}`}
             target="_blank"
             rel="noopener noreferrer"
-              className="mt-8 inline-flex items-center gap-2 rounded-md bg-brand-500 px-6 py-3 text-sm font-bold text-white shadow-lg shadow-black/40 transition hover:-translate-y-0.5 hover:bg-brand-400"
+            className="mt-8 inline-flex items-center justify-center rounded-full bg-white px-8 py-3 text-xs font-bold uppercase tracking-wide text-neutral-900 transition hover:-translate-y-0.5 hover:bg-neutral-100"
           >
             {t('home.youtubeCta')}
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-4 w-4">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0-4 4m4-4H3" />
-              </svg>
           </a>
         </Reveal>
-
-          <Reveal direction="right" index={1} className="overflow-hidden rounded-xl border border-white/10 shadow-2xl shadow-black/40">
-            <div className="aspect-video w-full">
-              <ExternalEmbed name={t('home.youtubeEmbedName')} className="h-full w-full">
-                <iframe
-                  className="h-full w-full"
-                  src={`https://www.youtube-nocookie.com/embed/${YOUTUBE_VIDEO_ID}`}
-                  title="HifiPlanet Amorbach – Car-Hifi Umbauten"
-                  loading="lazy"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                  allowFullScreen
-                />
-              </ExternalEmbed>
-            </div>
-          </Reveal>
-        </div>
       </section>
 
       <section className="border-y border-neutral-200 bg-neutral-50 py-16 dark:border-neutral-800 dark:bg-neutral-900/40">