<?php

/**
 * Title: Feature Banner 
 * Slug: axvart/a7-feature-banner
 * Categories: banner
 * Block Types: core/template-part/banner
 * Description: A full-width cover section with a large background image and an oversized heading.
 *
 * @package WordPress
 * @subpackage Axvart
 * @since Axvart 1.0
 */
?>

<!-- wp:cover {"url":"<?php echo esc_url(get_template_directory_uri() . '/assets/images/axvart-grid-lines.png'); ?>","id":6711,"alt":"Axvart Banner Image","dimRatio":50,"isUserOverlayColor":true,"gradient":"primary","sizeSlug":"full","align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|axvart-huge","bottom":"var:preset|spacing|axvart-huge"},"margin":{"top":"-20px","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull" style="margin-top:-20px;margin-bottom:0;padding-top:var(--wp--preset--spacing--axvart-huge);padding-bottom:var(--wp--preset--spacing--axvart-huge)"><img class="wp-block-cover__image-background wp-image-6711 size-full" alt="Axvart Banner Image" src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/axvart-grid-lines.png'); ?>" data-object-fit="cover" /><span aria-hidden="true" class="wp-block-cover__background has-background-dim wp-block-cover__gradient-background has-background-gradient has-primary-gradient-background"></span>
    <div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"typography":{"fontStyle":"normal","fontWeight":"500"}},"textColor":"contrast","fontSize":"normal","fontFamily":"urbanist"} -->
        <h2 class="wp-block-heading has-text-align-center has-contrast-color has-text-color has-link-color has-urbanist-font-family has-normal-font-size" style="font-style:normal;font-weight:500"><?php echo esc_html__('Empowering Creativity', 'axvart'); ?></h2>
        <!-- /wp:heading -->

        <!-- wp:heading {"textAlign":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"700"},"spacing":{"margin":{"top":"0","bottom":"0","left":"0","right":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|accent-2"}}}},"textColor":"accent-2","fontSize":"extra-large","fontFamily":"urbanist"} -->
        <h2 class="wp-block-heading has-text-align-center has-accent-2-color has-text-color has-link-color has-urbanist-font-family has-extra-large-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;font-style:normal;font-weight:700"><?php echo esc_html__('Fits Every Website Type', 'axvart'); ?></h2>
        <!-- /wp:heading -->

        <!-- wp:columns {"style":{"border":{"radius":{"topLeft":"20px","topRight":"20px","bottomLeft":"20px","bottomRight":"20px"}},"spacing":{"margin":{"top":"var:preset|spacing|axvart-normal"}}}} -->
        <div class="wp-block-columns" style="border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;margin-top:var(--wp--preset--spacing--axvart-normal)"><!-- wp:column {"verticalAlignment":"center"} -->
            <div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-2"}}}},"textColor":"accent-2","fontSize":"large","fontFamily":"urbanist"} -->
                <h2 class="wp-block-heading has-accent-2-color has-text-color has-link-color has-urbanist-font-family has-large-font-size"><?php echo esc_html__('Block-based design system', 'axvart'); ?></h2>
                <!-- /wp:heading -->

                <!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-3"}}},"typography":{"lineHeight":1.6}},"textColor":"accent-3","fontSize":"small","fontFamily":"open-sans"} -->
                <p class="has-accent-3-color has-text-color has-link-color has-open-sans-font-family has-small-font-size" style="line-height:1.6"><?php echo esc_html__('Design freely with Gutenberg blocks and powerful layout controls built directly into Axvart. Craft pixel-perfect pages, maintain visual consistency, and customize every section with ease—without depending on heavy page builders or sacrificing performance.', 'axvart'); ?></p>
                <!-- /wp:paragraph -->

                <!-- wp:axvart/advanced-button {"text":"Build Your Website","icon":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 viewBox=\u00220 0 512 512\u0022\u003e\u003cpath d=\u0022M256 8C119.3 8 8 119.2 8 256c0 136.7 111.3 248 248 248s248-111.3 248-248C504 119.2 392.7 8 256 8zM33 256c0-32.3 6.9-63 19.3-90.7l106.4 291.4C84.3 420.5 33 344.2 33 256zm223 223c-21.9 0-43-3.2-63-9.1l66.9-194.4 68.5 187.8c.5 1.1 1 2.1 1.6 3.1-23.1 8.1-48 12.6-74 12.6zm30.7-327.5c13.4-.7 25.5-2.1 25.5-2.1 12-1.4 10.6-19.1-1.4-18.4 0 0-36.1 2.8-59.4 2.8-21.9 0-58.7-2.8-58.7-2.8-12-.7-13.4 17.7-1.4 18.4 0 0 11.4 1.4 23.4 2.1l34.7 95.2L200.6 393l-81.2-241.5c13.4-.7 25.5-2.1 25.5-2.1 12-1.4 10.6-19.1-1.4-18.4 0 0-36.1 2.8-59.4 2.8-4.2 0-9.1-.1-14.4-.3C109.6 73 178.1 33 256 33c58 0 110.9 22.2 150.6 58.5-1-.1-1.9-.2-2.9-.2-21.9 0-37.4 19.1-37.4 39.6 0 18.4 10.6 33.9 21.9 52.3 8.5 14.8 18.4 33.9 18.4 61.5 0 19.1-7.3 41.2-17 72.1l-22.2 74.3-80.7-239.6zm81.4 297.2l68.1-196.9c12.7-31.8 17-57.2 17-79.9 0-8.2-.5-15.8-1.5-22.9 17.4 31.8 27.3 68.2 27.3 107 0 82.3-44.6 154.1-110.9 192.7z\u0022\u003e\u003c/path\u003e\u003c/svg\u003e","iconType":"svg","iconPosition":"left","iconSize":24,"iconGap":10,"paddingX":30,"paddingY":15} -->
                <a class="wp-block-axvart-advanced-button axvart-advanced-button align-center width-auto hover-effect-lift icon-anim-slide" style="--bg-gradient:var(--wp--preset--gradient--accent-gradient);--hover-bg-gradient:var(--wp--preset--gradient--accent-gradient);--text-color:var(--wp--preset--color--base);--hover-text-color:var(--wp--preset--color--base);--font-size:16px;--font-weight:600;--line-height:1;--letter-spacing:0px;--border-radius:50px;--padding-x:30px;--padding-y:15px;--border-width:0px;--border-style:solid;--border-color:transparent;--hover-border-color:transparent;--icon-size:24px;--icon-gap:10px;--transition-duration:0.3s;background:var(--wp--preset--gradient--accent-gradient);color:var(--wp--preset--color--base);font-size:16px;font-weight:600;line-height:1;letter-spacing:0px;border-radius:50px;padding:15px 30px;border:0px solid transparent;display:inline-flex;width:auto" href="" target="_self">
                    <div class="button-content"><span class="button-icon position-left" style="font-size:24px;margin-right:10px;margin-left:0"><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path d="M256 8C119.3 8 8 119.2 8 256c0 136.7 111.3 248 248 248s248-111.3 248-248C504 119.2 392.7 8 256 8zM33 256c0-32.3 6.9-63 19.3-90.7l106.4 291.4C84.3 420.5 33 344.2 33 256zm223 223c-21.9 0-43-3.2-63-9.1l66.9-194.4 68.5 187.8c.5 1.1 1 2.1 1.6 3.1-23.1 8.1-48 12.6-74 12.6zm30.7-327.5c13.4-.7 25.5-2.1 25.5-2.1 12-1.4 10.6-19.1-1.4-18.4 0 0-36.1 2.8-59.4 2.8-21.9 0-58.7-2.8-58.7-2.8-12-.7-13.4 17.7-1.4 18.4 0 0 11.4 1.4 23.4 2.1l34.7 95.2L200.6 393l-81.2-241.5c13.4-.7 25.5-2.1 25.5-2.1 12-1.4 10.6-19.1-1.4-18.4 0 0-36.1 2.8-59.4 2.8-4.2 0-9.1-.1-14.4-.3C109.6 73 178.1 33 256 33c58 0 110.9 22.2 150.6 58.5-1-.1-1.9-.2-2.9-.2-21.9 0-37.4 19.1-37.4 39.6 0 18.4 10.6 33.9 21.9 52.3 8.5 14.8 18.4 33.9 18.4 61.5 0 19.1-7.3 41.2-17 72.1l-22.2 74.3-80.7-239.6zm81.4 297.2l68.1-196.9c12.7-31.8 17-57.2 17-79.9 0-8.2-.5-15.8-1.5-22.9 17.4 31.8 27.3 68.2 27.3 107 0 82.3-44.6 154.1-110.9 192.7z"></path>
                                </svg></span></span><span class="button-text"><?php echo esc_html__('Build Your Website', 'axvart'); ?></span></div>
                </a>
                <!-- /wp:axvart/advanced-button -->
            </div>
            <!-- /wp:column -->

            <!-- wp:column -->
            <div class="wp-block-column"><!-- wp:image {"id":7085,"sizeSlug":"full","linkDestination":"none"} -->
                <figure class="wp-block-image size-full"><img src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/axvart-themes-feature.webp'); ?>" alt="Axvart Image" class="wp-image-7085" /></figure>
                <!-- /wp:image -->
            </div>
            <!-- /wp:column -->
        </div>
        <!-- /wp:columns -->
    </div>
</div>
<!-- /wp:cover -->