From eeeae33d8eb06b44207b3bbbd6f357c87627eeb9 Mon Sep 17 00:00:00 2001
From: Chris Abraham <cjyabraham@gmail.com>
Date: Wed, 21 Aug 2024 10:24:20 +0700
Subject: [PATCH] Hero takeover for KCCNC NA 24 (#879)

* set up Takeover hero template

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>

* update copy

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>

* Don't show hello bar on homepage

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>

* Remove "UTAH"

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>

* some tweaks

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>

* remove The

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>

* Remove tkt info

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>

---------

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
---
 .../cncf-twenty-two/components/header.php     |  2 +-
 .../components/home-hero-takeover.php         | 85 +++++++++++++++++++
 .../themes/cncf-twenty-two/front-page.php     |  3 +-
 .../source/scss/components/_front-page.scss   |  4 +-
 4 files changed, 90 insertions(+), 4 deletions(-)
 create mode 100644 web/wp-content/themes/cncf-twenty-two/components/home-hero-takeover.php

diff --git a/web/wp-content/themes/cncf-twenty-two/components/header.php b/web/wp-content/themes/cncf-twenty-two/components/header.php
index 68a6c5a24..c8d21621f 100644
--- a/web/wp-content/themes/cncf-twenty-two/components/header.php
+++ b/web/wp-content/themes/cncf-twenty-two/components/header.php
@@ -13,7 +13,7 @@
 
 $site_options = get_option( 'lf-mu' );
 
-if ( isset( $site_options['show_hello_bar'] ) && $site_options['show_hello_bar'] ) :
+if ( isset( $site_options['show_hello_bar'] ) && $site_options['show_hello_bar'] && ! is_front_page() ) :
 	get_template_part( 'components/hello-bar' );
 endif;
 ?>
diff --git a/web/wp-content/themes/cncf-twenty-two/components/home-hero-takeover.php b/web/wp-content/themes/cncf-twenty-two/components/home-hero-takeover.php
new file mode 100644
index 000000000..5872b764e
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/components/home-hero-takeover.php
@@ -0,0 +1,85 @@
+<?php
+/**
+ * Home - Takeover
+ *
+ * @package WordPress
+ * @subpackage cncf-theme
+ * @since 1.0.0
+ */
+
+?>
+
+<link rel="preload" as="image" fetchpriority="high"
+	href="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.webp' ); ?>">
+
+<?php
+wp_enqueue_script( 'home-hero', get_template_directory_uri() . '/source/js/on-demand/video.js', null, filemtime( get_template_directory() . '/source/js/on-demand/video.js' ), true );
+
+$metrics = LF_Utils::get_homepage_metrics();
+?>
+<section class="home-hero">
+	<div aria-hidden="true" class="home-hero__overlay"></div>
+
+	<picture>
+		<source srcset="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.webp' ); ?>" type="image/webp">
+		<img src="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.jpg' ); ?>"
+			class="home-hero__poster" style="width: 100%; height: 100%;"
+			alt="Make cloud native ubiquitous" decoding="async">
+	</picture>
+
+	<div class="home-hero__video-wrapper">
+		<video class="home-hero__video" loop muted playsinline width="100%"
+			preload="none" style="width: 100%;
+		height: 100%;
+		object-fit: cover;
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		left: 0;">
+			<source
+				src="<?php echo esc_url( get_template_directory_uri() . '/source/videos/hero.mp4' ); ?>"
+				type="video/mp4">
+				<picture>
+				<source srcset="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.webp' ); ?>" type="image/webp">
+				<img src="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.jpg' ); ?>"
+		alt="Make cloud native ubiquitous">
+				</picture>
+		</video>
+	</div>
+
+	<div class="home-hero__content">
+		<div class="container wrap">
+
+			<h1 class="home-hero__title">JOIN US IN<br />
+				SALT LAKE CITY<br />
+				<span>NOVEMBER 12-15</span>
+			</h1>
+
+			<h2 class="home-hero__description"><strong>KubeCon + CloudNativeCon</strong> is the flagship conference for cloud native.</h2>
+
+			<ul class="home-hero__metric_wrapper" style="margin-bottom: 40px;">
+				<li>10K+
+					<span>Attendees</span>
+				</li>
+				<li>200+
+					<span>Sponsors</span>
+				</li>
+				<li>300+
+					<span>Sessions</span>
+				</li>
+				<li>
+						∞
+					<span>Swag</span>
+				</li>
+			</ul>
+
+			<div class="wp-block-buttons is-content-justification-left is-layout-flex wp-container-core-buttons-is-layout-2 wp-block-buttons-is-layout-flex">
+				<div class="wp-block-button show-over-600"><a class="wp-block-button__link has-text-align-center wp-element-button" href="https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/?utm_source=www&utm_medium=homepage&utm_campaign=KubeCon-NA-2024&utm_content=hero" title="Learn more about KubeCon + CloudNativeCon">Learn More</a></div>
+				<div class="wp-block-button"><a class="wp-block-button__link has-text-align-center wp-element-button" href="https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/register/?utm_source=www&utm_medium=homepage&utm_campaign=KubeCon-NA-2024&utm_content=hero" title="Register for KubeCon + CloudNativeCon">Register</a></div>
+			</div>
+
+			<div style="height:70px;" aria-hidden="true" class="wp-block-spacer">
+			</div>
+		</div>
+	</div>
+</section>
diff --git a/web/wp-content/themes/cncf-twenty-two/front-page.php b/web/wp-content/themes/cncf-twenty-two/front-page.php
index ce45da784..29192796f 100644
--- a/web/wp-content/themes/cncf-twenty-two/front-page.php
+++ b/web/wp-content/themes/cncf-twenty-two/front-page.php
@@ -11,7 +11,8 @@
 
 get_template_part( 'components/skip-link-target' );
 
-get_template_part( 'components/home-hero' );
+// get_template_part( 'components/home-hero' ); // phpcs:ignore.
+get_template_part( 'components/home-hero-takeover' );
 ?>
 <article class="container wrap">
 	<?php
diff --git a/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss b/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss
index 8a2b175ea..b57d4b71f 100644
--- a/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss
+++ b/web/wp-content/themes/cncf-twenty-two/source/scss/components/_front-page.scss
@@ -76,7 +76,7 @@
 		margin-bottom: min(8%, 40px);
 		@media (min-width: 412px) {
 			margin-top: min(10%, 45px);
-			margin-bottom: min(10%, 50px);
+			margin-bottom: min(10%, 42px);
 		}
 		letter-spacing: 0.02em;
 		font-weight: 400;
@@ -93,7 +93,7 @@
 	&__metric_wrapper {
 		margin-top: min(8%, 30px);
 		@media (min-width: 600px) {
-			margin-top: min(8%, 50px);
+			margin-top: min(8%, 36px);
 		}
 		margin-bottom: min(20%, 100px);
 		display: flex;