diff --git a/acf/group_60bfdb328901d.json b/acf/group_60bfdb328901d.json index 815a701..710836f 100644 --- a/acf/group_60bfdb328901d.json +++ b/acf/group_60bfdb328901d.json @@ -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 } diff --git a/views/blocks/homepage-hero/homepage-hero.css b/views/blocks/homepage-hero/homepage-hero.css index e69de29..17153e6 100644 --- a/views/blocks/homepage-hero/homepage-hero.css +++ b/views/blocks/homepage-hero/homepage-hero.css @@ -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); } + } + } +} diff --git a/views/blocks/homepage-hero/homepage-hero.php b/views/blocks/homepage-hero/homepage-hero.php index 8f121ab..276fda5 100644 --- a/views/blocks/homepage-hero/homepage-hero.php +++ b/views/blocks/homepage-hero/homepage-hero.php @@ -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 ); ?>
> -
-
- -

- -

- +
+
+ +

+ +

+ - -
- -
- + +
+ +
+ - -
- $cta ) : ?> - +
+ $cta ) : ?> + - - color="primary" - - color="primary" variant="outline" - - width="small" - > - -
- -
-
+ // Handle admin preview + if ( is_admin() && $ctaURL ) { + $ctaURL = '#'; + } + ?> + + color="primary" + + color="primary" variant="outline" + + width="small" + > + +
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ + + <?php echo esc_attr( $heading ); ?> + + + + +
diff --git a/views/partials/hero-vector.php b/views/partials/hero-vector.php new file mode 100644 index 0000000..c74fae8 --- /dev/null +++ b/views/partials/hero-vector.php @@ -0,0 +1,10 @@ + + + + + + + + + +