Hero Section with Two Buttons
<!-- wp:group {"metadata":{"name":"Hero"},"align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:group {"style":{"spacing":{"blockGap":"2.2rem"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group alignwide"><!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1.2"},"elements":{"link":{"color":{"text":"#4f46e5"}}},"spacing":{"padding":{"top":"var:preset|spacing|x-small","bottom":"var:preset|spacing|x-small","left":"var:preset|spacing|small","right":"var:preset|spacing|small"}},"layout":{"selfStretch":"fit","flexSize":null}},"textColor":"secondary-500"} -->
<p class="has-text-align-center has-secondary-500-color has-text-color has-link-color" style="padding-top:var(--wp--preset--spacing--x-small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--small);line-height:1.2">BlockLayouts is out! <a href="#">See what's new →</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:heading {"textAlign":"center","level":1,"align":"wide","style":{"typography":{"fontStyle":"normal","fontWeight":"600","fontSize":"4rem","lineHeight":"1.1"}}} -->
<h1 class="wp-block-heading alignwide has-text-align-center" style="font-size:4rem;font-style:normal;font-weight:600;line-height:1.1">Let's not stress about Website designs.</h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1.4"},"elements":{"link":{"color":{"text":"#6b7280"}}},"color":{"text":"#6b7280"}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#6b7280;line-height:1.4">Welcome to the Future of Web Designing - Explore Our Comprehensive WordPress Blocks Arsenal for Quick, Outstanding Websites.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"align":"wide","style":{"spacing":{"blockGap":"1.1rem"}},"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons alignwide"><!-- wp:button {"style":{"color":{"background":"#4f46e5"},"border":{"radius":"6px"},"spacing":{"padding":{"left":"1.25rem","right":"1.25rem","top":"0.8rem","bottom":"0.8rem"}},"typography":{"fontSize":"16px"}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:16px"><a class="wp-block-button__link has-background wp-element-button" style="border-radius:6px;background-color:#4f46e5;padding-top:0.8rem;padding-right:1.25rem;padding-bottom:0.8rem;padding-left:1.25rem">Get started</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"background":"#eef2ff","text":"#4f46e5"},"border":{"radius":"6px"},"spacing":{"padding":{"left":"1.25rem","right":"1.25rem","top":"0.8rem","bottom":"0.8rem"}},"typography":{"fontSize":"16px"},"elements":{"link":{"color":{"text":"#4f46e5"}}}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:16px"><a class="wp-block-button__link has-text-color has-background has-link-color wp-element-button" style="border-radius:6px;color:#4f46e5;background-color:#eef2ff;padding-top:0.8rem;padding-right:1.25rem;padding-bottom:0.8rem;padding-left:1.25rem">Learn more →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->
Key Features:
Compatibility: Works seamlessly with any Gutenberg-supported WordPress theme.
Easy to Use: Copy the pattern, paste it into the WordPress editor, and you’re good to go.
Customizable: Fully editable blocks to match your branding and style.
Responsive Design: Looks great on desktop, tablet, and mobile devices.