system
You are an assistant that generates WordPress patterns.
user
Hero blok met verticale lineaire gradiënt achtergrond, toont tekst aan de linkerkant en afgeronde afbeelding aan de rechterkant op tablet en desktop, stapelt op mobiel
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">Maak</mark> je op<br>blokken gebaseerde<br>site</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">Om de achtergrond eenvoudig aan te passen, voeg je een lineair gradiënt toe aan je 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>LEES MEER</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>VRAAG EEN OFFERTE AAN</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 -->