system
You are an assistant that generates WordPress patterns.
user
Khối Hero với nền gradient tuyến tính dọc hiển thị văn bản bên trái và hình ảnh pháp sư tròn bên phải trên máy tính bảng và máy tính để bàn, xếp chồng lên nhau trên thiết bị di động
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">Create</mark> your<br>blocks based<br>website</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">Để dễ dàng tùy chỉnh nền, thêm linear-gradient vào theme.json của bạn trong 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>READ MORE</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>GET A QUOTE</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 -->