Heading with statistics

<?php
/**
 * Title: Heading with statistics
 * Slug: wlc/heading-with-statistics
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Heading with statistics","categories":["featured"],"patternName":"wlc/heading-with-statistics"},"align":"full","className":"heading-with-statistics","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull heading-with-statistics"><!-- wp:group {"className":"heading-with-statistics__wrapper","layout":{"type":"default"}} -->
<div class="wp-block-group heading-with-statistics__wrapper"><!-- wp:heading {"className":"heading-with-statistics__header"} -->
<h2 class="wp-block-heading heading-with-statistics__header">Sign up for our newsletter</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"left","className":"heading-with-statistics__description"} -->
<p class="has-text-align-left heading-with-statistics__description">Stay up to date with the roadmap progress, announcements and exclusive discounts feel free to sign up with your email.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"heading-with-statistics__content","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
<div class="wp-block-group heading-with-statistics__content"><!-- wp:group {"className":"heading-with-statistics__content-box","layout":{"type":"default"}} -->
<div class="wp-block-group heading-with-statistics__content-box"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">$76 billion</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>24h trading volume on Flowbite exchange</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"heading-with-statistics__content-box","layout":{"type":"default"}} -->
<div class="wp-block-group heading-with-statistics__content-box"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">600+</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Cryptocurrencies listed on our platform</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"heading-with-statistics__content-box","layout":{"type":"default"}} -->
<div class="wp-block-group heading-with-statistics__content-box"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">90 million</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Registered users who trust Flowbite</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"heading-with-statistics__content-box","layout":{"type":"default"}} -->
<div class="wp-block-group heading-with-statistics__content-box"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><0.10%</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lowest transaction fees</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

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

    .heading-with-statistics__wrapper {
        @apply py-8 lg:py-16 px-4 mx-auto lg:px-6;

        .heading-with-statistics__header {
            @apply mb-4 text-3xl tracking-tight font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white;
        }

        .heading-with-statistics__description {
            @apply mb-8 max-w-2xl font-light text-gray-500 sm:text-xl dark:text-gray-400;
        }

        .heading-with-statistics__content {
            @apply grid gap-8 mt-8 text-gray-900 sm:grid-cols-2 lg:gap-20 lg:mt-14 lg:grid-cols-4 dark:text-white;
        }
        .heading-with-statistics__content-box {
            @apply flex flex-col;

            .wp-block-heading {
                @apply mb-2 text-3xl md:text-4xl font-extrabold tracking-tight;
            }

            p {
                @apply mb-0 font-light text-gray-500 dark:text-gray-400;
            }
        }
    }
}