<?php
/** Title: Homepage Hero
 * Slug: crowdfunding-platform/homepage-hero
 * Categories: banner, crowdfunding_platform
 * Description: A compelling hero section for the homepage with call-to-action buttons
 */
?>

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var(--wp--preset--spacing--60)","bottom":"var(--wp--preset--spacing--60)"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">

	<!-- wp:columns {"align":"wide","verticalAlignment":"center","style":{"spacing":{"blockGap":{"top":"var(--wp--preset--spacing--60)","left":"var(--wp--preset--spacing--60)"}}}} -->
	<div class="wp-block-columns alignwide are-vertically-aligned-center">
		
		<!-- wp:column {"verticalAlignment":"center","width":"60%"} -->
		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:60%">
			
			<!-- wp:heading {"level":1,"style":{"spacing":{"margin":{"bottom":"var(--wp--preset--spacing--40)"}}},"fontSize":"jumbo"} -->
			<h1 class="wp-block-heading has-jumbo-font-size" style="margin-bottom:var(--wp--preset--spacing--40)"><?php esc_html_e( 'Turn Your Vision Into Reality', 'crowdfunding-platform' ); ?></h1>
			<!-- /wp:heading -->

			<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"var(--wp--preset--spacing--50)"}}},"textColor":"secondary","fontSize":"base"} -->
			<p class="has-secondary-color has-text-color has-base-font-size" style="margin-bottom:var(--wp--preset--spacing--50)"><?php esc_html_e( 'Launch your crowdfunding campaign with confidence. Connect with supporters, share your story, and bring your innovative ideas to life with our community-driven platform.', 'crowdfunding-platform' ); ?></p>
			<!-- /wp:paragraph -->
			
			<!-- wp:buttons {"style":{"spacing":{"blockGap":"var(--wp--preset--spacing--30)"}}} -->
			<div class="wp-block-buttons">
				<!-- wp:button {"fontSize":"big"} -->
				<div class="wp-block-button has-big-font-size"><a href="#" class="wp-block-button__link has-big-font-size has-custom-font-size wp-element-button"><?php esc_html_e( 'Start Your Campaign', 'crowdfunding-platform' ); ?></a></div>
				<!-- /wp:button -->

				<!-- wp:button {"className":"is-style-outline","fontSize":"big"} -->
				<div class="wp-block-button has-big-font-size is-style-outline"><a href="#" class="wp-block-button__link has-big-font-size has-custom-font-size wp-element-button"><?php esc_html_e( 'Browse Campaigns', 'crowdfunding-platform' ); ?></a></div>
				<!-- /wp:button -->
			</div>
			<!-- /wp:buttons -->
			
		</div>
		<!-- /wp:column -->
		
		<!-- wp:column {"verticalAlignment":"center","width":"40%"} -->
		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:40%">
			
			<!-- wp:group {"style":{"border":{"radius":"16px"},"spacing":{"padding":{"top":"var(--wp--preset--spacing--50)","bottom":"var(--wp--preset--spacing--50)","left":"var(--wp--preset--spacing--40)","right":"var(--wp--preset--spacing--40)"}}},"backgroundColor":"accent-5","layout":{"type":"constrained"}} -->
			<div class="wp-block-group has-accent-5-background-color has-background" style="border-radius:16px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--40)">
				
				<!-- wp:heading {"level":3,"textAlign":"center","style":{"spacing":{"margin":{"bottom":"var(--wp--preset--spacing--30)"}}},"fontSize":"bigger"} -->
				<h3 class="wp-block-heading has-text-align-center has-bigger-font-size" style="margin-bottom:var(--wp--preset--spacing--30)"><?php esc_html_e( 'Platform Stats', 'crowdfunding-platform' ); ?></h3>
				<!-- /wp:heading -->
				
				<!-- wp:group {"style":{"spacing":{"blockGap":"var(--wp--preset--spacing--40)"}},"layout":{"type":"constrained"}} -->
				<div class="wp-block-group">
					
					<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
					<div class="wp-block-group">
						<!-- wp:paragraph {"fontSize":"base"} -->
						<p class="has-base-font-size" ><?php esc_html_e( 'Active Campaigns', 'crowdfunding-platform' ); ?></p>
						<!-- /wp:paragraph -->

						<!-- wp:paragraph {"textColor":"primary","fontSize":"base"} -->
						<?php
						/* translators: Example number of active campaigns for theme demonstration */
						?>
						<p class="has-primary-color has-text-color has-base-font-size"><strong><?php esc_html_e( '247', 'crowdfunding-platform' ); ?></strong></p>
						<!-- /wp:paragraph -->
					</div>
					<!-- /wp:group -->
					
					<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
					<div class="wp-block-group">
						<!-- wp:paragraph {"fontSize":"base"} -->
						<p class="has-base-font-size" ><?php esc_html_e( 'Total Raised', 'crowdfunding-platform' ); ?></p>
						<!-- /wp:paragraph -->

						<!-- wp:paragraph {"textColor":"accent","fontSize":"base"} -->
						<?php
						/* translators: Example total amount raised for theme demonstration */
						?>
						<p class="has-accent-color has-text-color has-base-font-size"><strong><?php esc_html_e( '$2.4M', 'crowdfunding-platform' ); ?></strong></p>
						<!-- /wp:paragraph -->
					</div>
					<!-- /wp:group -->

					<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
					<div class="wp-block-group">
						<!-- wp:paragraph {"fontSize":"base"} -->
						<p class="has-base-font-size" ><?php esc_html_e( 'Success Rate', 'crowdfunding-platform' ); ?></p>
						<!-- /wp:paragraph -->

						<!-- wp:paragraph {"textColor":"accent","fontSize":"base"} -->
						<?php
						/* translators: Example success rate percentage for theme demonstration */
						?>
						<p class="has-accent-color has-text-color has-base-font-size"><strong><?php esc_html_e( '78%', 'crowdfunding-platform' ); ?></strong></p>
						<!-- /wp:paragraph -->
					</div>
					<!-- /wp:group -->
					
				</div>
				<!-- /wp:group -->
				
			</div>
			<!-- /wp:group -->
			
		</div>
		<!-- /wp:column -->
		
	</div>
	<!-- /wp:columns -->
	
</div>
<!-- /wp:group -->