<?php
/**
 * Title: Banner 2: Style 2
 * Slug: brahma/banner-2-style-2
 * Categories: banner, buttons, call-to-action
 * Description: Hero Banner with gray background and image
 *
 * @package brahma
 * @since 1.0.4
 */

?>

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|70","padding":{"top":"200px","bottom":"200px"}}},"backgroundColor":"gray-100","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-gray-100-background-color has-background" style="padding-top:200px;padding-bottom:200px">
	<!-- wp:heading {"textAlign":"center","level":1,"align":"wide","fontSize":"80"} -->
	<h1 class="wp-block-heading alignwide has-text-align-center has-80-font-size">
		<?php esc_html_e( 'Transform Your Design With Brahma Theme', 'brahma' ); ?>
	</h1>
	<!-- /wp:heading -->

	<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|gray-200"}}}},"textColor":"gray-200","fontSize":"20"} -->
	<p class="has-text-align-center has-gray-200-color has-text-color has-link-color has-20-font-size">
		<?php esc_html_e( 'We craft innovative, responsive websites that capture your brand\'s essence and elevate your online presence . Infuse your designs with the divine energy of Brahma and pave the way for growth and success in the digital world.', 'brahma' ); ?>
	</p>
	<!-- /wp:paragraph -->

	<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
	<div class="wp-block-buttons">
		<!-- wp:button {"className":"is-style-fill","style":{"border":{"radius":"8px"},"spacing":{"padding":{"left":"var:preset|spacing|70","right":"var:preset|spacing|70","top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"fontSize":"20"} -->
		<div class="wp-block-button has-custom-font-size is-style-fill has-20-font-size">
			<a class="wp-block-button__link wp-element-button" href="#" style="border-radius:8px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--70)">
				<?php esc_html_e( 'Transform Your Design', 'brahma' ); ?>			
			</a>
		</div>
		<!-- /wp:button -->
	</div>
	<!-- /wp:buttons -->

	<!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
	<div class="wp-block-group alignwide">
		<!-- wp:image {"id":1022,"sizeSlug":"full","linkDestination":"none","align":"center"} -->
		<figure class="wp-block-image aligncenter size-full">
			<img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder-gray-1-1920x1080.webp' ) ); ?>" alt="Placeholder Image"/>
		</figure>
		<!-- /wp:image -->
	</div>
	<!-- /wp:group -->
</div>
<!-- /wp:group -->