Hero Type 1
Reduce Your Financial Complexity
The above block is copied from the site: https://moisandfitzger.wpenginepowered.com/
Pattern HTML
<!-- wp:group {"metadata":{"name":"Hero Panel"},"align":"full","className":"hero-panel","backgroundColor":"third","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull hero-panel has-third-background-color has-background"><!-- wp:video {"id":371,"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<figure class="wp-block-video alignfull" style="margin-top:0;margin-bottom:0"><video autoplay loop muted src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/06/Home-Banner.mp4" playsinline></video></figure>
<!-- /wp:video -->
<!-- wp:group {"className":"hero-content","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"blockGap":"var:preset|spacing|15"}},"layout":{"type":"constrained","contentSize":"1180px"}} -->
<div class="wp-block-group hero-content" style="margin-top:0;margin-bottom:0"><!-- wp:heading {"level":1,"style":{"elements":{"link":{"color":{"text":"var:preset|color|first"}}},"typography":{"fontStyle":"normal","fontWeight":"300"}},"textColor":"first"} -->
<h1 class="wp-block-heading has-first-color has-text-color has-link-color" style="font-style:normal;font-weight:300">Reduce Your Financial Complexity <br>With a Tailored Plan</h1>
<!-- /wp:heading -->
<!-- wp:heading {"level":5,"style":{"elements":{"link":{"color":{"text":"var:preset|color|first"}}}},"textColor":"first"} -->
<h5 class="wp-block-heading has-first-color has-text-color has-link-color">Save time with a streamlined approach crafted by experts who work entirely for you</h5>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Pattern CSS
.hero-panel {
position: relative;
}
.hero-panel:after {
content: "";
display: block;
width: 100%;
height: 100%;
left: 0px;
bottom: 0px;
background: url(/wp-content/uploads/2025/06/hero-Gradients.png) 0 bottom no-repeat;
background-size: 100%;
position: absolute;
}
.hero-content {
position: absolute;
bottom: 115px;
z-index: 9;
left: 0px;
right: 0px;
padding-left: 60px !important;
border-left: 3px solid var(--wp--preset--color--sixth);
}
