From 621425025cd6afe724673af31b77f60377ab3f4f Mon Sep 17 00:00:00 2001 From: "j.foucher" Date: Fri, 15 May 2026 08:17:33 +0200 Subject: [PATCH] feat(home): cinematic video-background hero with overlay text MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces the home page's plain-navy hero with a full-bleed video-background section + dark navy overlay (60%) for text readability. The video URL is read from the WP option `av_home_hero_video_url`. If empty, the hero gracefully falls back to a solid navy background — same layout, same text, just no video. Settings (Bricks-native background.videoUrl pattern from container.php get_background_video_html) : - videoUrl : the configured option value - videoScale : 'cover' - videoAspectRatio : '16/9' - overlay : rgba(11,31,58,0.6) navy 60% - color fallback while video loads Typography : - H1 : 3.5rem white, weight 800, tight letter-spacing, responsive breakpoints down to 1.875rem on mobile - Lead : muted-white rgba 0.85 - CTAs : gold primary + outline-on-dark secondary Helper mu-plugin av-set-home-video.php : /?av_set_home_video=https://...mp4 sets the URL /?av_set_home_video=clear empties (back to navy) Workflow : 1. Upload MP4 to Media Library, copy URL 2. /?av_set_home_video= 3. /?av_generate_home=1 4. Visit / — cinematic hero with looping muted autoplay video bg Co-Authored-By: Claude Opus 4.7 (1M context) --- tools/av-generate-home.php | 142 +++++++++++++++++++++++++++++++++--- tools/av-set-home-video.php | 37 ++++++++++ 2 files changed, 169 insertions(+), 10 deletions(-) create mode 100644 tools/av-set-home-video.php diff --git a/tools/av-generate-home.php b/tools/av-generate-home.php index 9cd934f..81ba111 100644 --- a/tools/av-generate-home.php +++ b/tools/av-generate-home.php @@ -116,16 +116,8 @@ add_action('template_redirect', function () { function av_build_home_elements() { $els = []; - // 1. HERO — full bleed, large tagline - $els = array_merge($els, av_build_hero('home', [ - 'eyebrow' => '', - 'tagline' => 'Train like you operate.', - 'hero_lead' => "PROSERVE\u{2122} is the modular XR training platform engineered for European security forces. Real recoil, autonomous AI, sovereign by design \u{2014} from solo officer to full academy.", - 'ctas' => [ - ['label' => 'Book a demo', 'href' => '/request-demo/', 'variant' => 'primary'], - ['label' => 'Request a T&E Kit', 'href' => '/request-te-kit/', 'variant' => 'secondary'], - ], - ])); + // 1. HERO — full-bleed cinematic video background + overlay text + $els = array_merge($els, av_build_home_video_hero()); // 2. THREE PILLARS — 3-card grid (count===3 → 33% each, clean row of 3) $els = array_merge($els, av_build_cards_section('homep', 0, [ @@ -230,6 +222,136 @@ function av_build_home_elements() { return $els; } +/** + * Cinematic full-bleed hero with background video + dark overlay + light text. + * Video URL is read from the WP option `av_home_hero_video_url`. If empty, + * the hero falls back to a solid navy background (no video) — the layout and + * text stay identical so the page renders cleanly even without a video. + * + * To set the video URL : + * 1. Upload your MP4 to WP Admin → Media Library + * 2. Copy the file URL + * 3. Run /?av_set_home_video= (see av-set-home-video.php mu-plugin) + * or update_option('av_home_hero_video_url', '') via WP CLI / DB + * 4. Re-run /?av_generate_home=1 + */ +function av_build_home_video_hero() { + $video_url = (string) get_option('av_home_hero_video_url', ''); + + $sid = 'hhomesc'; + $oct = 'hhomeoc'; + $nrr = 'hhomenr'; + $eybId = 'hhomeeb'; + $h1Id = 'hhomeh1'; + $ledId = 'hhomeld'; + $rowId = 'hhomerw'; + + // Background settings : video if URL configured, otherwise navy color. + if ($video_url !== '') { + $section_background = [ + 'videoUrl' => $video_url, + 'videoScale' => 'cover', // fill the section, crop if needed + 'videoAspectRatio' => '16/9', + 'overlay' => [ + 'color' => ['raw' => 'rgba(11, 31, 58, 0.6)'], // navy 60% — readability + ], + 'color' => ['raw' => 'var(--color-brand-navy)'], // fallback while video loads + ]; + } else { + $section_background = ['color' => av_color('var(--color-brand-navy)')]; + } + + $els = []; + + // SECTION — full bleed, large vertical padding, video bg or navy + $els[] = [ + 'id' => $sid, 'name' => 'section', 'parent' => 0, 'children' => [$oct], + 'settings' => [ + '_padding' => av_sp('9rem', '0', '8rem', '0'), + '_padding:tablet_portrait' => av_sp('7rem', '0', '6rem', '0'), + '_padding:mobile_landscape' => av_sp('5rem', '0', '4rem', '0'), + '_padding:mobile_portrait' => av_sp('4rem', '0', '3.5rem', '0'), + '_background' => $section_background, + '_position' => 'relative', + '_overflow' => 'hidden', + ], + ]; + + // OUTER CONTAINER — 1280 max-width, no horizontal centering of inner + $els[] = [ + 'id' => $oct, 'name' => 'container', 'parent' => $sid, 'children' => [$nrr], + 'settings' => [ + '_direction' => 'column', + '_widthMax' => '1280px', + '_width' => '100%', + '_padding' => av_sp('0', '1.5rem', '0', '1.5rem'), + '_padding:mobile_landscape' => av_sp('0', '1rem', '0', '1rem'), + '_alignItems' => 'flex-start', + '_position' => 'relative', + '_zIndex' => '2', // above the video overlay + ], + ]; + + // NARRATIVE INNER — 800 max-width, light text + $els[] = [ + 'id' => $nrr, 'name' => 'container', 'parent' => $oct, 'children' => [$h1Id, $ledId, $rowId], + 'settings' => [ + '_direction' => 'column', + '_widthMax' => '800px', + '_widthMin' => '0', + '_width' => '100%', + '_margin' => av_sp('0', 'auto', '0', '0'), + '_padding' => av_sp('0', '0', '0', '0'), + '_rowGap' => '1.5rem', + ], + ]; + + // H1 — large, white, tactical + $els[] = [ + 'id' => $h1Id, 'name' => 'heading', 'parent' => $nrr, 'children' => [], + 'settings' => [ + 'tag' => 'h1', + 'text' => 'Train like you operate.', + '_typography' => [ + 'color' => av_color('var(--color-text-on-dark)'), + 'font-weight' => '800', + 'font-size' => '3.5rem', + 'line-height' => '1.1', + 'letter-spacing'=> '-0.02em', + ], + '_typography:tablet_portrait' => ['font-size' => '2.75rem'], + '_typography:mobile_landscape' => ['font-size' => '2.25rem'], + '_typography:mobile_portrait' => ['font-size' => '1.875rem'], + ], + ]; + + // LEAD — muted-white + $els[] = av_text( + $ledId, $nrr, + "PROSERVE\u{2122} is the modular XR training platform engineered for European security forces. Real recoil, autonomous AI, sovereign by design \u{2014} from solo officer to full academy.", + 'rgba(255, 255, 255, 0.85)', '1.25rem', '1.55' + ); + + // CTA row + $b1 = 'hhomeb0'; + $b2 = 'hhomeb1'; + $els[] = [ + 'id' => $rowId, 'name' => 'container', 'parent' => $nrr, 'children' => [$b1, $b2], + 'settings' => [ + '_direction' => 'row', + '_columnGap' => '1rem', + '_rowGap' => '1rem', + '_flexWrap' => 'wrap', + '_width' => '100%', + '_padding' => av_sp('1rem', '0', '0', '0'), + ], + ]; + $els[] = av_button($b1, $rowId, 'Book a demo', '/request-demo/', 'gold'); + $els[] = av_button($b2, $rowId, 'Request a T&E Kit', '/request-te-kit/', 'outline-on-dark'); + + return $els; +} + function av_build_home_closer_cta() { $sid = "schmhc"; $oct = "ochmhc"; diff --git a/tools/av-set-home-video.php b/tools/av-set-home-video.php new file mode 100644 index 0000000..44ebbde --- /dev/null +++ b/tools/av-set-home-video.php @@ -0,0 +1,37 @@ +