    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-php">&lt;?php

/**
 * Title: Hero banner inverse
 * Slug: spectra-one/hero-banner-3
 * Categories: featured
 * Keywords: hero Banner inverse
 */

$get_url = trailingslashit(get_template_directory_uri());

$images = [
    $get_url . &#039;assets/image/hero-img.png&#039;,
];
?&gt;

&lt;!-- wp:group {&quot;align&quot;:&quot;wide&quot;,&quot;style&quot;:{&quot;spacing&quot;:{&quot;padding&quot;:{&quot;top&quot;:&quot;var:preset|spacing|xx-large&quot;,&quot;bottom&quot;:&quot;0&quot;},&quot;margin&quot;:{&quot;top&quot;:&quot;0&quot;,&quot;bottom&quot;:&quot;0&quot;}}},&quot;backgroundColor&quot;:&quot;heading&quot;,&quot;layout&quot;:{&quot;type&quot;:&quot;constrained&quot;}} --&gt;
&lt;div class=&quot;wp-block-group alignwide has-heading-background-color has-background&quot; style=&quot;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--xx-large);padding-bottom:0&quot;&gt;&lt;!-- wp:heading {&quot;textAlign&quot;:&quot;center&quot;,&quot;level&quot;:1,&quot;style&quot;:{&quot;typography&quot;:{&quot;letterSpacing&quot;:&quot;-1px&quot;},&quot;spacing&quot;:{&quot;margin&quot;:{&quot;top&quot;:&quot;var:preset|spacing|large&quot;}}},&quot;textColor&quot;:&quot;background&quot;,&quot;className&quot;:&quot;wp-block-heading&quot;} --&gt;
&lt;h1 class=&quot;wp-block-heading has-text-align-center has-background-color has-text-color&quot; style=&quot;margin-top:var(--wp--preset--spacing--large);letter-spacing:-1px&quot;&gt;&lt;?php esc_html_e( &#039;Launch Your Website Today!&#039;, &#039;spectra-one&#039; ); ?&gt;&lt;/h1&gt;
&lt;!-- /wp:heading --&gt;

&lt;!-- wp:paragraph {&quot;align&quot;:&quot;center&quot;,&quot;textColor&quot;:&quot;background&quot;} --&gt;
&lt;p class=&quot;has-text-align-center has-background-color has-text-color&quot;&gt;&lt;?php esc_html_e( &#039;Create a functional and visually appealing website&#039;, &#039;spectra-one&#039; ); ?&gt;&lt;/p&gt;
&lt;!-- /wp:paragraph --&gt;

&lt;!-- wp:buttons {&quot;layout&quot;:{&quot;type&quot;:&quot;flex&quot;,&quot;justifyContent&quot;:&quot;center&quot;},&quot;style&quot;:{&quot;spacing&quot;:{&quot;margin&quot;:{&quot;top&quot;:&quot;var:preset|spacing|medium&quot;,&quot;bottom&quot;:&quot;var:preset|spacing|large&quot;}}}} --&gt;
&lt;div class=&quot;wp-block-buttons&quot; style=&quot;margin-top:var(--wp--preset--spacing--medium);margin-bottom:var(--wp--preset--spacing--large)&quot;&gt;&lt;!-- wp:button {&quot;backgroundColor&quot;:&quot;background&quot;,&quot;textColor&quot;:&quot;heading&quot;,&quot;className&quot;:&quot;is-style-fill&quot;} --&gt;
&lt;div class=&quot;wp-block-button is-style-fill&quot;&gt;&lt;a class=&quot;wp-block-button__link has-heading-color has-background-background-color has-text-color has-background wp-element-button&quot;&gt;&lt;?php esc_html_e( &#039;Get Started&#039;, &#039;spectra-one&#039; ); ?&gt;&lt;/a&gt;&lt;/div&gt;
&lt;!-- /wp:button --&gt;

&lt;!-- wp:button {&quot;textColor&quot;:&quot;background&quot;,&quot;className&quot;:&quot;is-style-outline&quot;} --&gt;
&lt;div class=&quot;wp-block-button is-style-outline&quot;&gt;&lt;a class=&quot;wp-block-button__link has-background-color has-text-color wp-element-button&quot;&gt;&lt;?php esc_html_e( &#039;Learn More&#039;, &#039;spectra-one&#039; ); ?&gt;&lt;/a&gt;&lt;/div&gt;
&lt;!-- /wp:button --&gt;&lt;/div&gt;
&lt;!-- /wp:buttons --&gt;

&lt;!-- wp:image {&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:1033,&quot;sizeSlug&quot;:&quot;full&quot;,&quot;linkDestination&quot;:&quot;none&quot;} --&gt;
&lt;figure class=&quot;wp-block-image aligncenter size-full&quot;&gt;&lt;img src=&quot;&lt;?php echo esc_url( $images[0] ); ?&gt;&quot; alt=&quot;&quot; class=&quot;wp-image-1033&quot;/&gt;&lt;/figure&gt;
&lt;!-- /wp:image --&gt;&lt;/div&gt;
&lt;!-- /wp:group --&gt;</code></pre>        </div>
    </div>