Dark portfolio hero section
<!-- wp:group {"metadata":{"name":"Hero"},"align":"full","style":{"color":{"background":"#080808"},"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#080808"><!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"2rem"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontSize":"14px"},"color":{"text":"#ffffff"},"elements":{"link":{"color":{"text":"#ffffff"}}}}} -->
<p class="has-text-color has-link-color" style="color:#ffffff;font-size:14px;text-transform:uppercase">Hi! Welcome to my portfolio</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"400","fontSize":"3.5rem"},"color":{"text":"#ffffff"},"elements":{"link":{"color":{"text":"#ffffff"}}}}} -->
<h2 class="wp-block-heading has-text-color has-link-color" style="color:#ffffff;font-size:3.5rem;font-style:normal;font-weight:400">I'm Connie, Software Developer from California</h2>
<!-- /wp:heading -->
<!-- wp:buttons {"align":"wide","style":{"spacing":{"blockGap":"1.1rem"}},"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons alignwide"><!-- wp:button {"style":{"color":{"background":"#ffffff","text":"#000000"},"border":{"radius":"6px"},"spacing":{"padding":{"left":"1.25rem","right":"1.25rem","top":"0.8rem","bottom":"0.8rem"}},"typography":{"fontSize":"16px"},"elements":{"link":{"color":{"text":"#000000"}}}}} -->
<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:#000000;background-color:#ffffff;padding-top:0.8rem;padding-right:1.25rem;padding-bottom:0.8rem;padding-left:1.25rem">Contact me</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"background":"#ffffff00","text":"#fefeff"},"border":{"radius":"6px","color":"#ffffff","width":"1px"},"spacing":{"padding":{"left":"1.25rem","right":"1.25rem","top":"0.8rem","bottom":"0.8rem"}},"typography":{"fontSize":"16px"},"elements":{"link":{"color":{"text":"#fefeff"}}}}} -->
<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 has-border-color wp-element-button" style="border-color:#ffffff;border-width:1px;border-radius:6px;color:#fefeff;background-color:#ffffff00;padding-top:0.8rem;padding-right:1.25rem;padding-bottom:0.8rem;padding-left:1.25rem">Explore Portfolio →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"stretch"} -->
<div class="wp-block-column is-vertically-aligned-stretch"><!-- wp:image {"id":1461,"width":"430px","align":"center","style":{"color":[]}} -->
<figure class="wp-block-image aligncenter is-resized"><img src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="wp-image-1461" style="width:430px" /></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Info:
This block pattern is fully customizable, responsive, and easy to use. Simply copy and paste it into your website for seamless integration. It’s designed to enhance user engagement and improve overall user experience.