Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

✨feature: Homepage hero
Sync TODOs with Issues / sync_todos (push) Successful in 6s
Details

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Keith Solomon
2026-05-12 12:25:38 -05:00
parent 489e0acb38
commit a0c6e3251b
4 changed files with 250 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/blocks/homepage-hero/homepage-hero.css
+52
View File
@@ -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); }
}
}
}
views/blocks/homepage-hero/homepage-hero.php
+95 -44
View File
@@ -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>