Feature icons and CTA

<?php
/**
 * Title: Feature icons and CTA
 * Slug: wlc/feature-list-with-icons
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Feature icons and CTA","categories":["featured"],"patternName":"wlc/feature-icons-and-cta"},"align":"full","className":"feature-icons-and-cta","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull feature-icons-and-cta"><!-- wp:group {"className":"feature-icons-and-cta__wrapper","layout":{"type":"default"}} -->
<div class="wp-block-group feature-icons-and-cta__wrapper"><!-- wp:heading {"className":"feature-icons-and-cta__heading"} -->
<h2 class="wp-block-heading feature-icons-and-cta__heading">Designed for business teams like yours</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"feature-icons-and-cta__description"} -->
<p class="feature-icons-and-cta__description">Here we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"feature-icons-and-cta__content","layout":{"type":"constrained"}} -->
<div class="wp-block-group feature-icons-and-cta__content"><!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:group {"className":"feature-icons-and-cta__content-svg feature-icons-and-cta__content-svg\u002d\u002dprimary","layout":{"type":"default"}} -->
<div class="wp-block-group feature-icons-and-cta__content-svg feature-icons-and-cta__content-svg--primary"><!-- wp:wlc/custom-svg {"svgContent":" \u003csvg class=\u0022mx-auto w-16 h-16 text-primary-600 dark:text-primary-500\u0022 fill=\u0022currentColor\u0022 viewBox=\u00220 0 20 20\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\u003cpath d=\u0022M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z\u0022\u003e\u003c/path\u003e\u003cpath d=\u0022M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z\u0022\u003e\u003c/path\u003e\u003c/svg\u003e"} /--></div>
<!-- /wp:group -->

<!-- wp:heading {"level":3,"className":"feature-icons-and-cta__content-heading"} -->
<h3 class="wp-block-heading feature-icons-and-cta__content-heading">Just the right balance for growth</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"feature-icons-and-cta__content-description"} -->
<p class="feature-icons-and-cta__content-description">Enterprise tools cost more, are difficult to use, and take longer to implement. According to G2, Flowbite is the easiest-to-use tool, with the fastest time to ROI.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:group {"className":"feature-icons-and-cta__content-svg feature-icons-and-cta__content-svg\u002d\u002dsecondary","layout":{"type":"default"}} -->
<div class="wp-block-group feature-icons-and-cta__content-svg feature-icons-and-cta__content-svg--secondary"><!-- wp:wlc/custom-svg {"svgContent":"\u003csvg class=\u0022mx-auto w-16 h-16 text-purple-600 dark:text-purple-500\u0022 fill=\u0022currentColor\u0022 viewBox=\u00220 0 20 20\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\u003cpath fill-rule=\u0022evenodd\u0022 d=\u0022M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z\u0022 clip-rule=\u0022evenodd\u0022\u003e\u003c/path\u003e\u003c/svg\u003e"} /--></div>
<!-- /wp:group -->

<!-- wp:heading {"level":3,"className":"feature-icons-and-cta__content-heading"} -->
<h3 class="wp-block-heading feature-icons-and-cta__content-heading">Just the right balance for growth</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"feature-icons-and-cta__content-description"} -->
<p class="feature-icons-and-cta__content-description">Enterprise tools cost more, are difficult to use, and take longer to implement. According to G2, Flowbite is the easiest-to-use tool, with the fastest time to ROI.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:buttons {"className":"feature-icons-and-cta__buttons"} -->
<div class="wp-block-buttons feature-icons-and-cta__buttons"><!-- wp:button {"className":"feature-icons-and-cta__button","icon":"chevron-right"} -->
<div class="wp-block-button feature-icons-and-cta__button"><a class="wp-block-button__link wp-element-button">Learn what makes Flowbite different</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.feature-list-with-icons {
    @apply bg-white dark:bg-gray-900;

    .feature-list-with-icons__wrapper {
        @apply py-8 px-4 mx-auto sm:py-16 lg:px-6;

        .feature-list-with-icons__header {
            @apply max-w-screen-md mb-8 lg:mb-16;
        }

        .feature-list-with-icons__heading {
            @apply mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white;
        }

        .feature-list-with-icons__description {
            @apply font-light text-gray-500 dark:text-gray-400 sm:text-xl mb-0;
        }

        .feature-list-with-icons__content {
            @apply space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-8 xl:gap-12 md:space-y-0 w-full;
        }

        .feature-list-with-icons__content-box {
            @apply w-full;

            .feature-list-with-icons__content-svg {
                @apply flex justify-center items-center mb-4 w-10 h-10 lg:h-16 lg:w-16 rounded;
            }

            .feature-list-with-icons__content-svg--primary {
                @apply bg-primary-100 dark:bg-primary-900;
            }

            .feature-list-with-icons__content-svg--secondary {
                @apply bg-purple-100 dark:bg-purple-900;
            }

            .feature-list-with-icons__content-svg--tertiary {
                @apply bg-teal-100 dark:bg-teal-900;
            }
        }

        .feature-list-with-icons__content-heading {
            @apply mb-2 text-xl font-bold dark:text-white text-gray-900;
        }

        .feature-list-with-icons__content-list {
            @apply my-6 lg:mb-0 space-y-4;

            li {
                @apply flex pl-7 relative leading-tight text-gray-500 dark:text-gray-400;
            }

            li::before {
                @apply content-[''] absolute left-0 w-5 h-5 bg-contain bg-no-repeat bg-center;
                mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
                mask-repeat: no-repeat;
                background-image: none;
            }
        }

        .feature-list-with-icons__content-box--primary .feature-list-with-icons__content-list li::before {
            @apply bg-primary-600 dark:bg-primary-500;
        }

        .feature-list-with-icons__content-box--secondary .feature-list-with-icons__content-list li::before {
            @apply bg-purple-600 dark:bg-purple-500;
        }

        .feature-list-with-icons__content-box--tertiary .feature-list-with-icons__content-list li::before {
            @apply bg-teal-500 dark:bg-teal-400;
        }
    }
}