<?php
/**
 * Title: About Hero Section
 * Slug: aamira/about-hero-section
 * Categories: header, featured
 * Tags: header, hero, site title, navigation, buttons
 * Block Types: core/template-part/header
 * Description: Hero style section for Header area.
 * @package WordPress
 * @subpackage Aamira
 * @since Aamira 1.0
 */

?>

<!-- wp:group {"className":"bg-gray-900 mx-auto","align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"layout":{"type":"constrained","contentSize":"1150px","wideSize":"1380px"}} -->
<div class="wp-block-group alignfull bg-gray-900"
    style="padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)">
        <!-- wp:group {"layout":{"type":"constrained"}} -->
        <div class="wp-block-group">
            <!-- wp:heading {"textAlign":"center","className":"mb-4 text-3xl font-extrabold text-balance text-white"} -->
            <h2 class="wp-block-heading has-text-align-center mb-4 text-3xl font-extrabold text-balance text-white">
                <?php esc_html_e( 'Social media marketing for your online business', 'aamira' ); ?>
            </h2>
            <!-- /wp:heading -->

            <!-- wp:heading {"level":3,"className":"mx-auto text-lg font-medium text-gray-400"} -->
            <h3 class="wp-block-heading mx-auto text-lg font-medium text-gray-400">
                <?php esc_html_e( 'Automate your marketing efforts today and get more clients for your business. 7-day trial is now available to check it out.', 'aamira' ); ?>
            </h3>
            <!-- /wp:heading -->

            <!-- wp:group {"className":"flex flex-wrap justify-center gap-4 pt-10 pb-16","layout":{"type":"constrained"}} -->
                <div class="wp-block-group flex flex-wrap justify-center gap-4 pt-10 pb-16"><!-- wp:necessary-block/buttons-block {"layout":{"type":"flex","justifyContent":"center"}} -->
                <div class="wp-block-necessary-block-buttons-block"><!-- wp:necessary-block/button-block {"buttonText":"→ Get Started","buttonWidth":"50%","buttonType":"info","style":{"typography":{"textAlign":"center"}},"fontSize":"x-large"} -->
                <div class="necessary-block-button align-center alignundefined" style="width:calc(50% - 1.2rem * .5);height:auto"><a target="_self" class="wp-block-necessary-block-button-block has-text-align-center button button-info align-center has-x-large-font-size" style="--button-hover-color:#ffffff;--button-hover-bg:#475467;text-align:center;background:#475467;color:#ffffff;text-decoration:none">→ <?php esc_html_e( 'Get Started', 'aamira' ); ?></a></div>
                <!-- /wp:necessary-block/button-block -->

                <!-- wp:necessary-block/button-block {"buttonText":"→ Live Demo","buttonWidth":"50%","buttonType":"info","style":{"typography":{"textAlign":"center"}},"fontSize":"x-large"} -->
                <div class="necessary-block-button align-center alignundefined" style="width:calc(50% - 1.2rem * .5);height:auto"><a target="_self" class="wp-block-necessary-block-button-block has-text-align-center button button-info align-center has-x-large-font-size" style="--button-hover-color:#ffffff;--button-hover-bg:#475467;text-align:center;background:#475467;color:#ffffff;text-decoration:none">→ <?php esc_html_e( 'Live Demo', 'aamira' ); ?></a></div>
                <!-- /wp:necessary-block/button-block --></div>
                <!-- /wp:necessary-block/buttons-block --></div>
            <!-- /wp:group -->

            <!-- wp:group {"align":"full","layout":{"type":"constrained"}} -->
                <div class="wp-block-group alignfull">
                    <!-- wp:image {"id":5695,"sizeSlug":"full","linkDestination":"none","align":"wide","className":"mx-auto aspect-3/2 w-full rounded-sm object-cover"} -->
                    <figure class="wp-block-image alignwide size-full mx-auto aspect-3/2 w-full rounded-sm object-cover">
                        <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/banner.jpg" alt="" class="wp-image-5695"/>
                    </figure>
                <!-- /wp:image -->
                </div>
            <!-- /wp:group -->


        </div>
        <!-- /wp:group -->
</div>
<!-- /wp:group -->