Image with CTA button

<?php
/**
 * Title: Image with CTA button
 * Slug: image-with-cta-button
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Image with CTA button"},"align":"full","className":"image-with-cta-button","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull image-with-cta-button"><!-- wp:columns {"className":"image-with-cta-button__columns"} -->
<div class="wp-block-columns image-with-cta-button__columns"><!-- wp:column {"className":"image-with-cta-button__image-column"} -->
<div class="wp-block-column image-with-cta-button__image-column"><!-- wp:image {"sizeSlug":"large","className":"image-with-cta-button__image image-with-cta-button__image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large image-with-cta-button__image image-with-cta-button__image--light"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/cta-dashboard-mockup.svg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","className":"image-with-cta-button__image image-with-cta-button__image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large image-with-cta-button__image image-with-cta-button__image--dark"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/cta-dashboard-mockup-dark.svg" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"image-with-cta-button__content-column"} -->
<div class="wp-block-column image-with-cta-button__content-column"><!-- wp:heading {"className":"image-with-cta-button__heading"} -->
<h2 class="wp-block-heading image-with-cta-button__heading">Let's create more tools and ideas that brings us together.</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"image-with-cta-button__description"} -->
<p class="image-with-cta-button__description">Flowbite helps you connect with friends and communities of people who share your interests. Connecting with your friends and family as well as discovering new ones is easy with features like Groups.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"image-with-cta-button__button-wrapper"} -->
<div class="wp-block-buttons image-with-cta-button__button-wrapper"><!-- wp:button {"className":"image-with-cta-button__button"} -->
<div class="wp-block-button image-with-cta-button__button"><a class="wp-block-button__link wp-element-button">Get started</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></section>
<!-- /wp:group -->

.image-with-cta-button {
  @apply bg-white dark:bg-gray-900;
  
  .image-with-cta-button__columns {
    @apply gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6;
  }
 
  .image-with-cta-button__image {
    @apply w-full;
    
    &.image-with-cta-button__image--light {
      @apply dark:hidden;
    }
    
    &.image-with-cta-button__image--dark {
      @apply hidden dark:block;
    }
  }
  
  .image-with-cta-button__content-column {
    @apply mt-4 md:mt-0;
  }
  
  .image-with-cta-button__heading {
    @apply mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white;
  }
  
  .image-with-cta-button__description {
    @apply mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400;
  }
    
  .image-with-cta-button__button {
    .wp-block-button__link {
      @apply inline-flex items-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900;
    }
  }
}