system
You are an assistant that generates WordPress patterns.
user
Hero Block with vertical linear gradient background shows text on the left and rounded mage on the right on tablet and desktop, stack on mobile
assistant
<!-- wp:group {"tagName":"section","metadata":{"name":"Hero section with vertical linear gradient"},"align":"full","style":{"color":{"gradient":"linear-gradient(90deg,rgb(0,0,0) 74%,rgb(227,167,1) 74%)"}},"layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull has-background" style="background:linear-gradient(90deg,rgb(0,0,0) 74%,rgb(227,167,1) 74%)"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center","width":"","style":{"spacing":{"padding":{"top":"3rem","bottom":"3rem","left":"20px","right":"20px"}}},"backgroundColor":"black","layout":{"type":"constrained"}} -->
<div class="wp-block-column is-vertically-aligned-center has-black-background-color has-background" style="padding-top:3rem;padding-right:20px;padding-bottom:3rem;padding-left:20px"><!-- wp:heading {"level":1,"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"700"}},"textColor":"white","className":"wp-block-heading has-text-align-left has-huge-font-size"} -->
<h1 class="wp-block-heading has-text-align-left has-huge-font-size has-white-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase"><mark style="background-color:#000000;color:#daa520" class="has-inline-color">Skapa</mark> din<br>blockbaserad<br>webbplats</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"left","style":{"spacing":{"margin":{"left":"6.8rem"}}},"textColor":"white"} -->
<p class="has-text-align-left has-white-color has-text-color" style="margin-left:6.8rem">To easily customize the background, add linear-gradient to your theme.json in settings.color.gradients </p>
<!-- /wp:paragraph -->

<!-- wp:code {"style":{"typography":{"fontSize":"8px"}},"textColor":"cyan-bluish-gray"} -->
<pre class="wp-block-code has-cyan-bluish-gray-color has-text-color" style="font-size:8px"><code>"gradients": &#091;
  {
    "gradient": "linear-gradient(90deg,rgb(0,0,0) 75%,rgb(227,167,1) 75%)",
    "name": "Linear Vertical Black to Gold",
    "slug": "linear-vertical-black-to-gold"
  }
]</code></pre>
<!-- /wp:code -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"black","style":{"color":{"background":"#daa520"},"border":{"radius":"2rem"}},"className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-black-color has-text-color has-background wp-element-button" style="border-radius:2rem;background-color:#daa520"><strong>LÄS MER</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"black","textColor":"white","style":{"border":{"color":"#ffffff","radius":"2rem"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background has-border-color wp-element-button" style="border-color:#ffffff;border-radius:2rem"><strong>FÅ EN OFFERT</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"40%","style":{"spacing":{"padding":{"top":"20px","bottom":"20px","left":"20px","right":"20px"}}},"layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px;flex-basis:40%"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":{"topLeft":"50em","bottomLeft":"50em","bottomRight":"50px","topRight":"50em"}}}} -->
<figure class="wp-block-image size-large has-custom-border"><img src="https://images.rawpixel.com/image_1000/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjY2LTAzNC1sMTA4NTFlaC5qcGc.jpg" alt="" style="border-top-left-radius:50em;border-top-right-radius:50em;border-bottom-left-radius:50em;border-bottom-right-radius:50px;aspect-ratio:1;object-fit:cover" /></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></section>
<!-- /wp:group -->