<?php
/**
 * Title: Home hero band — Natural Collection + palette image
 * Slug: iconvert-shoply/home-hero
 * Categories: iconvert-shoply, header, featured
 * Description: Full-width hero band shown under the homepage header.
 * Keywords: hero, banner, header
 * Inserter: no
 */

$iconvert_shoply_hero_image = get_template_directory_uri() . '/assets/img/hero-palette.jpg';

?>
<!-- wp:group {"align":"full","className":"iconvert-shoply-hero-band","backgroundColor":"surface","style":{"spacing":{"padding":{"top":"0","bottom":"0"},"blockGap":"0"}},"layout":{"type":"constrained","contentSize":"1232px"}} -->
<div class="wp-block-group alignfull iconvert-shoply-hero-band has-surface-background-color has-background">

	<!-- wp:group {"backgroundColor":"base","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"blockGap":"0"}},"layout":{"type":"default"},"className":"iconvert-shoply-home-hero-card"} -->
	<div class="wp-block-group has-base-background-color has-background iconvert-shoply-home-hero-card">

		<!-- wp:columns {"verticalAlignment":"stretch","style":{"spacing":{"blockGap":{"top":"0","left":"0"}}}} -->
		<div class="wp-block-columns are-vertically-aligned-stretch">

			<!-- wp:column {"verticalAlignment":"center","width":"50%","style":{"spacing":{"padding":{"top":"30px","bottom":"30px","left":"30px","right":"30px"}}}} -->
			<div class="wp-block-column is-vertically-aligned-center" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;flex-basis:50%">

				<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"bottom"}} -->
				<div class="wp-block-group">
					<!-- wp:heading {"level":1,"style":{"typography":{"fontSize":"80px","fontWeight":"300","lineHeight":"1.26"},"spacing":{"margin":{"top":"0","bottom":"0"}},"color":{"text":"#393e47"}}} -->
					<h1 class="wp-block-heading has-text-color" style="color:#393e47;margin-top:0;margin-bottom:0;font-size:80px;font-weight:300;line-height:1.26"><?php esc_html_e( 'Natural', 'iconvert-shoply' ); ?></h1>
					<!-- /wp:heading -->
					<!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"20px","fontWeight":"700","lineHeight":"1.6"},"spacing":{"margin":{"top":"0","bottom":"0.65rem","left":"0.6rem"}},"color":{"text":"#393e47"}}} -->
					<h4 class="wp-block-heading has-text-color" style="color:#393e47;margin-top:0;margin-bottom:0.65rem;margin-left:0.6rem;font-size:20px;font-weight:700;line-height:1.6"><?php esc_html_e( 'COLLECTION', 'iconvert-shoply' ); ?></h4>
					<!-- /wp:heading -->
				</div>
				<!-- /wp:group -->

				<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","fontWeight":"300","lineHeight":"1.5"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|40"}},"color":{"text":"#7d889b"}}} -->
				<p class="has-text-color" style="color:#7d889b;margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--40);font-size:16px;font-weight:300;line-height:1.5"><?php esc_html_e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'iconvert-shoply' ); ?></p>
				<!-- /wp:paragraph -->

				<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"flex","justifyContent":"left","flexWrap":"wrap","verticalAlignment":"center"}} -->
				<div class="wp-block-group">

					<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"constrained"}} -->
					<div class="wp-block-group">
						<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","fontWeight":"300"},"spacing":{"margin":{"top":"0","bottom":"0"}},"color":{"text":"#c2c9d5"}}} -->
						<p class="has-text-color" style="color:#c2c9d5;margin-top:0;margin-bottom:0;font-size:16px;font-weight:300"><?php esc_html_e( 'Price:', 'iconvert-shoply' ); ?></p>
						<!-- /wp:paragraph -->
						<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px","fontWeight":"700"},"spacing":{"margin":{"top":"0","bottom":"0"}},"color":{"text":"#393e47"}}} -->
						<p class="has-text-color" style="color:#393e47;margin-top:0;margin-bottom:0;font-size:18px;font-weight:700">$132.99</p>
						<!-- /wp:paragraph -->
					</div>
					<!-- /wp:group -->

					<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"constrained"}} -->
					<div class="wp-block-group">
						<!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","fontWeight":"300"},"spacing":{"margin":{"top":"0","bottom":"0"}},"color":{"text":"#c2c9d5"}}} -->
						<p class="has-text-color" style="color:#c2c9d5;margin-top:0;margin-bottom:0;font-size:16px;font-weight:300"><?php esc_html_e( 'Color:', 'iconvert-shoply' ); ?></p>
						<!-- /wp:paragraph -->
						<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px","fontWeight":"300"},"spacing":{"margin":{"top":"0","bottom":"0"}},"color":{"text":"#393e47"}}} -->
						<p class="has-text-color" style="color:#393e47;margin-top:0;margin-bottom:0;font-size:18px;font-weight:300"><?php esc_html_e( '121 colors', 'iconvert-shoply' ); ?></p>
						<!-- /wp:paragraph -->
					</div>
					<!-- /wp:group -->

					<!-- wp:buttons -->
					<div class="wp-block-buttons">
						<!-- wp:button {"backgroundColor":"accent","textColor":"base","style":{"border":{"radius":"0px"},"typography":{"fontSize":"16px","fontWeight":"300","letterSpacing":"1px"},"spacing":{"padding":{"top":"15px","bottom":"15px","left":"40px","right":"40px"}}}} -->
						<div class="wp-block-button"><a class="wp-block-button__link has-base-color has-accent-background-color has-text-color has-background has-custom-font-size wp-element-button" href="#" style="border-radius:0px;padding-top:15px;padding-right:40px;padding-bottom:15px;padding-left:40px;font-size:16px;font-weight:300;letter-spacing:1px"><?php esc_html_e( 'Buy now', 'iconvert-shoply' ); ?></a></div>
						<!-- /wp:button -->
					</div>
					<!-- /wp:buttons -->

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

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

			<!-- wp:column {"verticalAlignment":"stretch","width":"50%","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}}} -->
			<div class="wp-block-column is-vertically-aligned-stretch" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:50%">
				<!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"iconvert-shoply-home-hero-image"} -->
				<figure class="wp-block-image size-large iconvert-shoply-home-hero-image"><img src="<?php echo esc_url( $iconvert_shoply_hero_image ); ?>" alt=""/></figure>
				<!-- /wp:image -->
			</div>
			<!-- /wp:column -->

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

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

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