From 7312fbfe505962e7c822084de9af22c1db5f8d7e Mon Sep 17 00:00:00 2001
From: James Hunt <10615884+thetwopct@users.noreply.github.com>
Date: Sun, 16 Jun 2024 13:14:29 +0700
Subject: [PATCH] Move CNCF information below hero for takeovers

Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com>
---
 .../lf-mu/admin/partials/sync-kcds.php        |   4 +-
 .../components/home-cncf-about.php            | 122 ++++++++++++++++++
 .../cncf-twenty-two/components/home-hero.php  |   2 +-
 .../themes/cncf-twenty-two/front-page.php     |   2 +
 .../patterns/pjr-section-header.php           |   2 +-
 .../source/scss/components/_front-page.scss   |   7 +-
 6 files changed, 132 insertions(+), 7 deletions(-)
 create mode 100644 web/wp-content/themes/cncf-twenty-two/components/home-cncf-about.php

diff --git a/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/admin/partials/sync-kcds.php b/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/admin/partials/sync-kcds.php
index 35d336a41..44e429ff4 100644
--- a/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/admin/partials/sync-kcds.php
+++ b/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/admin/partials/sync-kcds.php
@@ -108,8 +108,8 @@
 	return false;
 }
 
-$remote_body = json_decode( wp_remote_retrieve_body( $data ) );
-$events      = $remote_body->results;
+$remote_body       = json_decode( wp_remote_retrieve_body( $data ) );
+$events            = $remote_body->results;
 $background_colors = array( '#14496c', '#641e16', '#5e2d72', '#0b5329', '#1a267d' );
 $background_color  = 0;
 
diff --git a/web/wp-content/themes/cncf-twenty-two/components/home-cncf-about.php b/web/wp-content/themes/cncf-twenty-two/components/home-cncf-about.php
new file mode 100644
index 000000000..140b756c2
--- /dev/null
+++ b/web/wp-content/themes/cncf-twenty-two/components/home-cncf-about.php
@@ -0,0 +1,122 @@
+<?php
+/**
+ * Home - CNCF About
+ *
+ * A small block that can be used when there is a hero takeover.
+ *
+ * @package WordPress
+ * @subpackage cncf-theme
+ * @since 1.0.0
+ */
+
+$metrics = LF_Utils::get_homepage_metrics();
+
+?>
+
+<style>
+@media (max-width: 767px) {
+	.home-cncf-about {
+		text-align: center;
+	}
+
+	.home-cncf-about__metric-wrapper {
+		justify-content: center;
+	}
+}
+
+.home-cncf-about__metric-wrapper {
+	flex-wrap: wrap;
+	row-gap: 30px;
+	column-gap: 30px;
+}
+
+@media (min-width: 1000px) {
+	.home-cncf-about__metric-wrapper {
+		column-gap: 90px;
+	}
+}
+
+.home-cncf-about__blob {
+	display: none;
+}
+
+@media (min-width: 1200px) {
+	.home-cncf-about__metric-wrapper {
+		column-gap: 70px;
+	}
+
+	.home-cncf-about__columns {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.home-cncf-about__blob {
+		display: block;
+		max-width: 350px;
+	}
+}
+</style>
+
+<section class="home-cncf-about wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow
+	is-vertically-aligned-center has-gray-200-background-color has-background
+	">
+	<div class="wp-block-group is-style-no-padding">
+
+		<div aria-hidden="true" class="wp-block-spacer is-style-40-80"></div>
+
+		<div class="home-cncf-about__columns">
+			<div>
+			<h2 class="has-extra-extra-large-font-size">Make cloud native
+				ubiquitous
+			</h2>
+
+			<div aria-hidden="true" class="wp-block-spacer"
+				style="height:20px;">
+			</div>
+
+			<p class="is-style-max-width-700">CNCF is the open source,
+							vendor-neutral
+							hub of <strong>cloud native computing</strong>, hosting
+							projects like Kubernetes and Prometheus to make cloud native
+							universal and sustainable.</p>
+
+			<ul
+				class="home-hero__metric_wrapper home-cncf-about__metric-wrapper">
+				<li style="margin-left: 0; margin-right: 0;">
+					<?php echo esc_html( $metrics['projects'] ); ?>
+					<span>Projects</span>
+				</li>
+				<li style="margin-left: 0; margin-right: 0;">
+					<?php echo esc_html( round( $metrics['contributors'] / 1000 ) ); ?>K
+					<span>Contributors</span>
+				</li>
+				<li style="margin-left: 0; margin-right: 0;">
+					<?php echo esc_html( round( $metrics['contributions'] / 1000000, 1 ) ); ?>M
+					<span>Contributions</span>
+				</li>
+				<li style="margin-left: 0; margin-right: 0;"
+					class="show-over-600">
+					<?php echo esc_html( $metrics['countries'] ); ?>
+					<span>Countries</span>
+				</li>
+				<li style="margin-left: 0; margin-right: 0;">
+					<div class="wp-block-button"><a href="/about/who-we-are/"
+							class="wp-block-button__link has-black-background-color has-background wp-element-button"
+							title="Learn more about CNCF">About CNCF</a></div>
+				</li>
+			</ul>
+			</div>
+			<div class="home-cncf-about__blob">
+				<!-- wp:image {"align":"left","id":65023,"sizeSlug":"large","linkDestination":"none","className":"is-style-blob"} -->
+				<div class="wp-block-image is-style-blob">
+					<figure class="size-large">
+					<?php LF_Utils::display_responsive_images( 109366, 'large', '350px', null, 'lazy', 'Developers at a conference' ); ?>
+						</figure>
+				</div>
+				<!-- /wp:image -->
+			</div>
+		</div>
+		<div aria-hidden="true" class="wp-block-spacer" style="height: 1px;">
+		</div>
+	</div>
+</section>
diff --git a/web/wp-content/themes/cncf-twenty-two/components/home-hero.php b/web/wp-content/themes/cncf-twenty-two/components/home-hero.php
index 251d37f6b..202d3795b 100644
--- a/web/wp-content/themes/cncf-twenty-two/components/home-hero.php
+++ b/web/wp-content/themes/cncf-twenty-two/components/home-hero.php
@@ -77,4 +77,4 @@ class="home-hero__poster" style="width: 100%; height: 100%;"
 			</ul>
 		</div>
 	</div>
-</section>
\ No newline at end of file
+</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..3b2389cf3 100644
--- a/web/wp-content/themes/cncf-twenty-two/front-page.php
+++ b/web/wp-content/themes/cncf-twenty-two/front-page.php
@@ -15,6 +15,8 @@
 ?>
 <article class="container wrap">
 	<?php
+	get_template_part( 'components/home-cncf-about' );
+
 	get_template_part( 'components/home-projects' );
 
 	if ( have_posts() ) :
diff --git a/web/wp-content/themes/cncf-twenty-two/patterns/pjr-section-header.php b/web/wp-content/themes/cncf-twenty-two/patterns/pjr-section-header.php
index 5e44d2678..5f45d7764 100644
--- a/web/wp-content/themes/cncf-twenty-two/patterns/pjr-section-header.php
+++ b/web/wp-content/themes/cncf-twenty-two/patterns/pjr-section-header.php
@@ -45,4 +45,4 @@
 <p>Start here</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group --></div>
-<!-- /wp:group -->
\ No newline at end of file
+<!-- /wp:group -->
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..4287c09c2 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
@@ -91,6 +91,7 @@
 		}
 	}
 	&__metric_wrapper {
+		list-style: none;
 		margin-top: min(8%, 30px);
 		@media (min-width: 600px) {
 			margin-top: min(8%, 50px);
@@ -344,9 +345,9 @@
 }
 
 .home-intro-box {
-    background: $white;
-    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08);
-    border-radius: 10px;
+	background: $white;
+	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08);
+	border-radius: 10px;
 	border: 1px solid $gray-300;
 	letter-spacing: 0.02em;
 	line-height: 150%;