Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Keith Solomon
@@ -2,6 +2,95 @@
|
||||
"key": "group_60bfdb328901d",
|
||||
"title": "Homepage Hero",
|
||||
"fields": [
|
||||
{
|
||||
"key": "field_69ff9afbc854a",
|
||||
"label": "Media Type",
|
||||
"name": "media",
|
||||
"aria-label": "",
|
||||
"type": "radio",
|
||||
"instructions": "",
|
||||
"required": 0,
|
||||
"conditional_logic": 0,
|
||||
"wrapper": {
|
||||
"width": "",
|
||||
"class": "",
|
||||
"id": ""
|
||||
},
|
||||
"choices": {
|
||||
"image": "Image",
|
||||
"video": "Video"
|
||||
},
|
||||
"default_value": "",
|
||||
"return_format": "value",
|
||||
"allow_null": 0,
|
||||
"other_choice": 0,
|
||||
"allow_in_bindings": 0,
|
||||
"layout": "vertical",
|
||||
"save_other_choice": 0
|
||||
},
|
||||
{
|
||||
"key": "field_69ff9b26c854b",
|
||||
"label": "Hero Image",
|
||||
"name": "hero_image",
|
||||
"aria-label": "",
|
||||
"type": "image",
|
||||
"instructions": "",
|
||||
"required": 0,
|
||||
"conditional_logic": [
|
||||
[
|
||||
{
|
||||
"field": "field_69ff9afbc854a",
|
||||
"operator": "==",
|
||||
"value": "image"
|
||||
}
|
||||
]
|
||||
],
|
||||
"wrapper": {
|
||||
"width": "",
|
||||
"class": "",
|
||||
"id": ""
|
||||
},
|
||||
"return_format": "array",
|
||||
"library": "all",
|
||||
"min_width": "",
|
||||
"min_height": "",
|
||||
"min_size": "",
|
||||
"max_width": "",
|
||||
"max_height": "",
|
||||
"max_size": "",
|
||||
"mime_types": "",
|
||||
"allow_in_bindings": 0,
|
||||
"preview_size": "medium"
|
||||
},
|
||||
{
|
||||
"key": "field_69ff9b4cc854c",
|
||||
"label": "Hero Video",
|
||||
"name": "hero_video",
|
||||
"aria-label": "",
|
||||
"type": "file",
|
||||
"instructions": "",
|
||||
"required": 0,
|
||||
"conditional_logic": [
|
||||
[
|
||||
{
|
||||
"field": "field_69ff9afbc854a",
|
||||
"operator": "==",
|
||||
"value": "video"
|
||||
}
|
||||
]
|
||||
],
|
||||
"wrapper": {
|
||||
"width": "",
|
||||
"class": "",
|
||||
"id": ""
|
||||
},
|
||||
"return_format": "url",
|
||||
"library": "all",
|
||||
"min_size": "",
|
||||
"max_size": "",
|
||||
"mime_types": "",
|
||||
"allow_in_bindings": 0
|
||||
},
|
||||
{
|
||||
"key": "field_60bfdb328cfae",
|
||||
"label": "Heading",
|
||||
@@ -102,5 +191,8 @@
|
||||
"active": true,
|
||||
"description": "",
|
||||
"show_in_rest": 0,
|
||||
"modified": 1742332828
|
||||
"display_title": "",
|
||||
"allow_ai_access": false,
|
||||
"ai_description": "",
|
||||
"modified": 1778359288
|
||||
}
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
.homepage-hero {
|
||||
--hgtHero: calc(100vh - (var(--hgtHeader) + 2rem));
|
||||
|
||||
min-height: var(--hgtHero);
|
||||
|
||||
.heroBG /* Rectangle 2 */{
|
||||
background: linear-gradient(83.68deg, #032F46 3.13%, #006196 45.91%, #8FC9E6 96.27%);
|
||||
mix-blend-mode: normal;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.bgVector /* Rectangle 83 */ {
|
||||
background: linear-gradient(73.8deg, #032F46 12.47%, rgba(0, 97, 150, 0.4) 47.08%, rgba(143, 201, 230, 0.1) 73.75%);
|
||||
background-blend-mode: multiply;
|
||||
height: 100%;
|
||||
mix-blend-mode: multiply;
|
||||
opacity: 0.7;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topGradient /* Rectangle 88 */ {
|
||||
background: linear-gradient(347.21deg, #032F46 18.31%, rgba(0, 97, 150, 0.4) 56.56%, rgba(143, 201, 230, 0.1) 81.82%);
|
||||
background-blend-mode: multiply;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
.heroVector {
|
||||
background-blend-mode: normal !important;
|
||||
height: var(--hgtHero);
|
||||
mix-blend-mode: normal !important;
|
||||
opacity: 1 !important;
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
}
|
||||
}
|
||||
|
||||
.intro {
|
||||
h1 {
|
||||
font-size: var(--text-55px);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
|
||||
strong {
|
||||
font-size: var(--text-65px);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
em { color: var(--color-cwc-orange-01); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,59 +8,110 @@
|
||||
namespace CWC;
|
||||
|
||||
// Retrieve ACF fields
|
||||
$media = get_field( 'media' );
|
||||
$heading = get_field( 'heading' );
|
||||
$intro = get_field( 'intro' );
|
||||
$ctas = get_field( 'calls_to_action' );
|
||||
|
||||
$classes = 'homepage-hero mx-break-out bg-black bg-cover bg-no-repeat text-light py-12 lg:py-16 overflow-hidden';
|
||||
if ( $media === 'image' ) {
|
||||
$heroImage = get_field( 'hero_image' );
|
||||
|
||||
if ( $heroImage ) {
|
||||
$heroURL = $heroImage['url'];
|
||||
}
|
||||
} elseif ( $media === 'video' ) {
|
||||
$heroVideo = get_field( 'hero_video' );
|
||||
|
||||
if ( $heroVideo ) {
|
||||
$heroURL = $heroVideo;
|
||||
}
|
||||
}
|
||||
|
||||
$classes = 'homepage-hero mx-break-out relative text-light overflow-hidden';
|
||||
$wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
?>
|
||||
|
||||
<section <?php echo wp_kses_post( $wrapper ); ?>>
|
||||
<div class="container content-wrapper">
|
||||
<div class="max-w-lg sm:text-center lg:text-left lg:items-center ml-0">
|
||||
<?php if ( ! empty( $heading ) ) : ?>
|
||||
<h1 class="text-4xl lg:text-5xl font-bold leading-tight mb-4">
|
||||
<?php echo esc_html( $heading ); ?>
|
||||
</h1>
|
||||
<?php endif; ?>
|
||||
<div class="container content-wrapper relative z-10">
|
||||
<div class="max-w-4xl sm:text-center lg:text-left lg:items-center ml-0 pt-24">
|
||||
<?php if ( ! empty( $heading ) ) : ?>
|
||||
<h1 class="text-4xl lg:text-5xl font-bold leading-tight mb-4">
|
||||
<?php echo esc_html( $heading ); ?>
|
||||
</h1>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( ! empty( $intro ) ) : ?>
|
||||
<div class="mt-3 text-base text-light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl with:max-w-full">
|
||||
<?php echo wp_kses_post( $intro ); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $intro ) ) : ?>
|
||||
<div class="intro">
|
||||
<?php echo wp_kses_post( $intro ); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( ! empty( $ctas ) ) : ?>
|
||||
<div class="reset mt-4 sm:mt-6 flex flex-wrap justify-center lg:justify-start gap-2">
|
||||
<?php foreach ( $ctas as $index => $cta ) : ?>
|
||||
<?php
|
||||
$ctaLink = $cta['link'];
|
||||
$ctaURL = $ctaLink['url'] ?? '#';
|
||||
$ctaTarget = $ctaLink['target'] ?? '_self';
|
||||
$ctaTitle = $ctaLink['title'] ?? '';
|
||||
<?php if ( ! empty( $ctas ) ) : ?>
|
||||
<div class="reset mt-4 sm:mt-6 flex flex-wrap justify-center lg:justify-start gap-2">
|
||||
<?php foreach ( $ctas as $index => $cta ) : ?>
|
||||
<?php
|
||||
$ctaLink = $cta['link'];
|
||||
$ctaURL = $ctaLink['url'] ?? '#';
|
||||
$ctaTarget = $ctaLink['target'] ?? '_self';
|
||||
$ctaTitle = $ctaLink['title'] ?? '';
|
||||
|
||||
// Handle admin preview
|
||||
if ( is_admin() && $ctaURL ) {
|
||||
$ctaURL = '#';
|
||||
}
|
||||
?>
|
||||
<x-button
|
||||
btnclasses="button text-center min-w-32"
|
||||
element="a"
|
||||
url="<?php echo esc_url( $ctaURL ); ?>"
|
||||
target="<?php echo esc_attr( $ctaTarget ); ?>"
|
||||
title="<?php echo esc_attr( $ctaTitle ); ?>"
|
||||
<?php if ( $index === 0 ) { ?>
|
||||
color="primary"
|
||||
<?php } else { ?>
|
||||
color="primary" variant="outline"
|
||||
<?php } ?>
|
||||
width="small"
|
||||
></x-button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
// Handle admin preview
|
||||
if ( is_admin() && $ctaURL ) {
|
||||
$ctaURL = '#';
|
||||
}
|
||||
?>
|
||||
<x-button
|
||||
btnclasses="button text-center min-w-32"
|
||||
element="a"
|
||||
url="<?php echo esc_url( $ctaURL ); ?>"
|
||||
target="<?php echo esc_attr( $ctaTarget ); ?>"
|
||||
title="<?php echo esc_attr( $ctaTitle ); ?>"
|
||||
<?php if ( $index === 0 ) { ?>
|
||||
color="primary"
|
||||
<?php } else { ?>
|
||||
color="primary" variant="outline"
|
||||
<?php } ?>
|
||||
width="small"
|
||||
></x-button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="heroVector absolute inset-0 z-10">
|
||||
<div class="vector absolute bottom-4 w-full">
|
||||
<?php get_template_part( 'views/partials/hero-vector' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topGradient absolute inset-0 z-1"><!-- Rectangle 88 --></div>
|
||||
|
||||
<div class="bgVector absolute inset-0 z-1"><!-- Rectangle 83 --></div>
|
||||
|
||||
<div class="heroBG absolute inset-0 z-1"><!-- Rectangle 2 --></div>
|
||||
|
||||
<div class="heroMedia absolute inset-0 z-0">
|
||||
<?php if ( ! empty( $heroURL ) ) : ?>
|
||||
<?php if ( $media === 'image' ) : ?>
|
||||
<img
|
||||
src="<?php echo esc_url( $heroURL ); ?>"
|
||||
alt="<?php echo esc_attr( $heading ); ?>"
|
||||
class="w-full h-full object-cover object-center"
|
||||
/>
|
||||
<?php elseif ( $media === 'video' ) : ?>
|
||||
<video
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
disablePictureInPicture
|
||||
class="w-full h-full object-cover object-center"
|
||||
>
|
||||
<source src="<?php echo esc_url( $heroURL ); ?>" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 154 KiB |
Reference in New Issue
Block a user