<?php
/**
 * Title: Visual image with heading
 * Slug: visual-image-with-heading
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Visual image with heading"},"align":"full","className":"visual-image-with-heading","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull visual-image-with-heading"><!-- wp:columns {"className":"visual-image-with-heading__container"} -->
<div class="wp-block-columns visual-image-with-heading__container"><!-- wp:column {"verticalAlignment":"top","className":"visual-image-with-heading__content-column"} -->
<div class="wp-block-column is-vertically-aligned-top visual-image-with-heading__content-column"><!-- wp:heading {"level":1,"className":"visual-image-with-heading__title"} -->
<h1 class="wp-block-heading visual-image-with-heading__title">Payments tool for software companies</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"visual-image-with-heading__description"} -->
<p class="visual-image-with-heading__description">From checkout to global sales tax compliance, companies around the world use Flowbite to simplify their payment stack.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"visual-image-with-heading__buttons"} -->
<div class="wp-block-buttons visual-image-with-heading__buttons"><!-- wp:button {"className":"visual-image-with-heading__button visual-image-with-heading__button\u002d\u002dprimary","icon":"arrow-right"} -->
<div class="wp-block-button visual-image-with-heading__button visual-image-with-heading__button--primary"><a class="wp-block-button__link wp-element-button"> Get started</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"visual-image-with-heading__button visual-image-with-heading__button\u002d\u002dsecondary is-style-outline"} -->
<div class="wp-block-button visual-image-with-heading__button visual-image-with-heading__button--secondary is-style-outline"><a class="wp-block-button__link wp-element-button">Speak to Sales</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","className":"visual-image-with-heading__image-column"} -->
<div class="wp-block-column is-vertically-aligned-center visual-image-with-heading__image-column"><!-- wp:image {"sizeSlug":"large","className":"visual-image-with-heading__image"} -->
<figure class="wp-block-image size-large visual-image-with-heading__image"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/phone-mockup.png" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></section>
<!-- /wp:group -->

.visual-image-with-heading {
  @apply bg-white dark:bg-gray-900;

  .visual-image-with-heading__container {
    @apply grid max-w-screen-xl px-4 py-8 mx-auto lg:py-16 md:grid-cols-12 md:gap-8 xl:gap-0;
   
    .visual-image-with-heading__content-column {
      @apply mr-auto place-self-center md:col-span-7;

      .visual-image-with-heading__title {
        @apply max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white;
      }

      .visual-image-with-heading__description {
        @apply max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400;
      }

      .visual-image-with-heading__buttons {
        @apply flex;

        .visual-image-with-heading__button {
          a {
            @apply inline-flex items-center justify-center px-5 py-3;
          }
        }

        .visual-image-with-heading__button--primary {
          a {
            @apply mr-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900;
          }
        }

        .visual-image-with-heading__button--secondary {
          a {
            @apply text-base font-medium text-center text-gray-900 border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800;
          }
        }
      }
    }

    .visual-image-with-heading__image-column {
      @apply hidden md:flex md:mt-0 md:col-span-5;

      .visual-image-with-heading__image {
        @apply w-full;
        
        img {
          @apply w-full h-auto;
        }
      }
    }
  }
}