Content section with logo, CTA links, image, and feature list

<?php
/**
 * Title: Content section with logo, CTA links, image, and feature list
 * Slug: section-logo-cta-links-img-list
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Section Logo CTA links, image, list"},"className":"section-logo-cta-links-img-list","layout":{"type":"constrained"}} -->
<section class="wp-block-group section-logo-cta-links-img-list"><!-- wp:group {"className":"content-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group content-wrapper"><!-- wp:group {"className":"top-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group top-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/brand/logo-light/type/flowbite-logo.svg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/brand/logo-dark/type/flowbite-logo.svg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline","icon":"arrow-right"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Visit the website</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline","icon":"arrow-right"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Let's work together</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/computer-dark.png" alt="" title="main-image"/></figure>
<!-- /wp:image -->

<!-- wp:group {"className":"grid-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group grid-wrapper"><!-- wp:group {"className":"left-block","layout":{"type":"constrained"}} -->
<div class="wp-block-group left-block"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Overview</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Since 1984, Flowbite has been serving up grab-and-go frozen daiquiris from its stores across the U.S. Its<br>signature drinks, souvenir cups, and discounted refills have made Flowbite synonymous with great music, good vibes,<br>and starting the best party in town.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"tick-list"} -->
<ul class="wp-block-list tick-list"><!-- wp:list-item -->
<li>A/B Testing</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Craft CMS development</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>UX/UI design</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Copywriting</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Brand development</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Graphic design</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Front-end development</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>SEO</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"right-block","layout":{"type":"constrained"}} -->
<div class="wp-block-group right-block"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Background</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Come 2021, Flowbite had expanded to over 40 locations. The brand’s digital presence existed, but it lacked<br>strategy. Although its target market of 21-30 year-olds was as engaged (and as loyal) as ever, the brand had outgrown<br>its amateur look of the early '00s and the family-owned business vibes. It needed to show it was a strong brand moving<br>in a new direction - and it was heading there fast.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">The challenge</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Flowbite’s new website would set the tone for all future marketing initiatives, so the brand needed<br>something to showcase its new identity as soon as possible. A tight timeline, paired with the fact that the new<br>management team were still exploring how to shift the brand from what it used to be to what it needed to be, meant that working collaboratively was a must.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.section-logo-cta-links-img-list {
  @apply bg-white dark:bg-gray-900;

  .content-wrapper {
    @apply max-w-screen-xl px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24;

    .top-wrapper {
      @apply text-center;

      &>figure {
        @apply w-auto !mx-auto justify-center;

        img {
          @apply object-contain
        }

        &:first-of-type {
          @apply flex dark:hidden;
        }

        &:last-of-type {
          @apply hidden dark:flex;
        }
      }

      .wp-block-buttons {
        @apply flex flex-col items-center justify-center gap-4 mt-4 sm:mt-5 sm:gap-8 sm:flex-row;
        a {
          @apply border-0 p-0;
          @apply inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700;
        }
      }
    }
    &>figure {
      @apply overflow-hidden;
      @apply max-w-5xl mx-auto mt-8 lg:mt-16 w-full h-auto aspect-[1024/460] rounded-lg shadow-lg;

      img {
        @apply w-full h-full object-cover;
      }
    }

    .grid-wrapper {
      @apply grid grid-cols-1 gap-8 mt-8 lg:gap-16 lg:grid-cols-2 lg:mt-16;

      .wp-block-heading {
        @apply text-2xl font-extrabold text-gray-900 dark:text-white;
      }

      p {
        @apply mt-2 text-lg font-normal text-gray-500 dark:text-gray-400;
      }

      .left-block {
        ul {
          @apply grid grid-cols-1 mt-8 sm:grid-cols-2 gap-x-4 gap-y-3;

          li {
            @apply flex items-center gap-2.5;
            @apply text-base font-normal text-gray-500 dark:text-gray-400;
            &::before {
              @apply content-[''] bg-[url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzIyYzU1ZSI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCAxOGE4IDggMCAxMDAtMTYgOCA4IDAgMDAwIDE2em0zLjcwNy05LjI5M2ExIDEgMCAwMC0xLjQxNC0xLjQxNEw5IDEwLjU4NiA3LjcwNyA5LjI5M2ExIDEgMCAwMC0xLjQxNCAxLjQxNGwyIDJhMSAxIDAgMDAxLjQxNCAwbDQtNHoiIGNsaXAtcnVsZT0iZXZlbm9kZCI+PC9wYXRoPgo8L3N2Zz4K)];
              @apply w-5 h-5 mr-2 bg-no-repeat bg-center;
            }
          }
        }
      }

      .right-block {
        @apply space-y-8;
      }
    }
  }
}