Feature section with rounded icons

Automatic categorization

Flow Budget automatically categorizes your income and expenses, making it easy to track where your money is going.

Budgeting methods

The app offers a variety of budgeting methods, such as 50/30/20 rule, to help users find the approach that works best for them.

Budget goals

Set budget goals for each category and get real-time updates on how close you are to reaching them.

Reports and Analytics

We provide detailed reports and analytics that help users understand their spending habits, and make more informed financial decisions.

Cloud synchronization

Synch your data across multiple devices, so you can access your budget and expenses from anywhere, at any time, and on any device.

Alerts and notifications

Flow budget will alert you if you are over-budgeting, and remind you of upcoming bills, so you’ll never miss a payment again.

Get a demo

<?php
/**
 * Title: Feature section with rounded icons
 * Slug: wlc/featur-section-with-rounded-icons
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"categories":["featured"],"patternName":"wlc/featur-section-with-rounded-icons","name":"Feature section with rounded icons"},"align":"full","className":"featur-section-with-rounded-icons","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull featur-section-with-rounded-icons"><!-- wp:group {"className":"featur-section-with-rounded-icons__wrapper","layout":{"type":"default"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__wrapper"><!-- wp:group {"className":"featur-section-with-rounded-icons__header","layout":{"type":"constrained","contentSize":"48rem"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__header"><!-- wp:heading {"className":"featur-section-with-rounded-icons__heading"} -->
<h2 class="wp-block-heading featur-section-with-rounded-icons__heading">Designed for business teams like yours</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"featur-section-with-rounded-icons__description"} -->
<p class="featur-section-with-rounded-icons__description">Here we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"featur-section-with-rounded-icons__content","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__content"><!-- wp:group {"className":"featur-section-with-rounded-icons__content-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__content-box"><!-- wp:group {"className":"featur-section-with-rounded-icons__box","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box"><!-- wp:group {"className":"featur-section-with-rounded-icons__box-svg","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box-svg"><!-- wp:wlc/custom-svg {"svgContent":" \u003csvg aria-hidden=\u0022true\u0022 class=\u0022w-10 lg:w-12 h-10 lg:h-12 text-primary-600 dark:text-primary-500\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00222\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 aria-hidden=\u0022true\u0022\u003e\n              \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\u0022\u003e\u003c/path\u003e\n              \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022M15 12a3 3 0 11-6 0 3 3 0 016 0z\u0022\u003e\u003c/path\u003e\n            \u003c/svg\u003e"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"className":"featur-section-with-rounded-icons__box-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box-content"><!-- wp:heading {"level":3,"className":"featur-section-with-rounded-icons__box-heading"} -->
<h3 class="wp-block-heading featur-section-with-rounded-icons__box-heading"> Automatic categorization</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"featur-section-with-rounded-icons__box-description"} -->
<p class="featur-section-with-rounded-icons__box-description"> Flow Budget automatically categorizes your income and expenses, making it easy to track where your money is going.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"featur-section-with-rounded-icons__box","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box"><!-- wp:group {"className":"featur-section-with-rounded-icons__box-svg","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box-svg"><!-- wp:wlc/custom-svg {"svgContent":"\u003csvg aria-hidden=\u0022true\u0022 class=\u0022w-10 lg:w-12 h-10 lg:h-12 text-primary-600 dark:text-primary-500\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00222\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 aria-hidden=\u0022true\u0022\u003e\n              \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\u0022\u003e\u003c/path\u003e\n            \u003c/svg\u003e"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"className":"featur-section-with-rounded-icons__box-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box-content"><!-- wp:heading {"level":3,"className":"featur-section-with-rounded-icons__box-heading"} -->
<h3 class="wp-block-heading featur-section-with-rounded-icons__box-heading">Budgeting methods</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"featur-section-with-rounded-icons__box-description"} -->
<p class="featur-section-with-rounded-icons__box-description">The app offers a variety of budgeting methods, such as 50/30/20 rule, to help users find the approach that works best for them.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"featur-section-with-rounded-icons__box","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box"><!-- wp:group {"className":"featur-section-with-rounded-icons__box-svg","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box-svg"><!-- wp:wlc/custom-svg {"svgContent":" \u003csvg aria-hidden=\u0022true\u0022 class=\u0022w-10 lg:w-12 h-10 lg:h-12 text-primary-600 dark:text-primary-500\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00222\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 aria-hidden=\u0022true\u0022\u003e\n              \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z\u0022\u003e\u003c/path\u003e\n            \u003c/svg\u003e"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"className":"featur-section-with-rounded-icons__box-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box-content"><!-- wp:heading {"level":3,"className":"featur-section-with-rounded-icons__box-heading"} -->
<h3 class="wp-block-heading featur-section-with-rounded-icons__box-heading">Budget goals</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"featur-section-with-rounded-icons__box-description"} -->
<p class="featur-section-with-rounded-icons__box-description">Set budget goals for each category and get real-time updates on how close you are to reaching them.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"featur-section-with-rounded-icons__box","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box"><!-- wp:group {"className":"featur-section-with-rounded-icons__box-svg","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box-svg"><!-- wp:wlc/custom-svg {"svgContent":"\u003csvg aria-hidden=\u0022true\u0022 class=\u0022w-10 lg:w-12 h-10 lg:h-12 text-primary-600 dark:text-primary-500\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00222\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 aria-hidden=\u0022true\u0022\u003e\n              \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z\u0022\u003e\u003c/path\u003e\n            \u003c/svg\u003e"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"className":"featur-section-with-rounded-icons__box-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box-content"><!-- wp:heading {"level":3,"className":"featur-section-with-rounded-icons__box-heading"} -->
<h3 class="wp-block-heading featur-section-with-rounded-icons__box-heading">Reports and Analytics</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"featur-section-with-rounded-icons__box-description"} -->
<p class="featur-section-with-rounded-icons__box-description">We provide detailed reports and analytics that help users understand their spending habits, and make more informed financial decisions.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"featur-section-with-rounded-icons__box","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box"><!-- wp:group {"className":"featur-section-with-rounded-icons__box-svg","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box-svg"><!-- wp:wlc/custom-svg {"svgContent":" \u003csvg aria-hidden=\u0022true\u0022 class=\u0022w-10 lg:w-12 h-10 lg:h-12 text-primary-600 dark:text-primary-500\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00222\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 aria-hidden=\u0022true\u0022\u003e\n              \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z\u0022\u003e\u003c/path\u003e\n            \u003c/svg\u003e"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"className":"featur-section-with-rounded-icons__box-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box-content"><!-- wp:heading {"level":3,"className":"featur-section-with-rounded-icons__box-heading"} -->
<h3 class="wp-block-heading featur-section-with-rounded-icons__box-heading">Cloud synchronization</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"featur-section-with-rounded-icons__box-description"} -->
<p class="featur-section-with-rounded-icons__box-description">Synch your data across multiple devices, so you can access your budget and expenses from anywhere, at any time, and on any device.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"featur-section-with-rounded-icons__box","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box"><!-- wp:group {"className":"featur-section-with-rounded-icons__box-svg","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box-svg"><!-- wp:wlc/custom-svg {"svgContent":" \u003csvg aria-hidden=\u0022true\u0022 class=\u0022w-10 lg:w-12 h-10 lg:h-12 text-primary-600 dark:text-primary-500\u0022 fill=\u0022none\u0022 stroke=\u0022currentColor\u0022 stroke-width=\u00222\u0022 viewBox=\u00220 0 24 24\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022 aria-hidden=\u0022true\u0022\u003e\n              \u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\u0022\u003e\u003c/path\u003e\n            \u003c/svg\u003e"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"className":"featur-section-with-rounded-icons__box-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group featur-section-with-rounded-icons__box-content"><!-- wp:heading {"level":3,"className":"featur-section-with-rounded-icons__box-heading"} -->
<h3 class="wp-block-heading featur-section-with-rounded-icons__box-heading">Alerts and notifications</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"featur-section-with-rounded-icons__box-description"} -->
<p class="featur-section-with-rounded-icons__box-description">Flow budget will alert you if you are over-budgeting, and remind you of upcoming bills, so you'll never miss a payment again.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:buttons {"className":"featur-section-with-rounded-icons__buttons","layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons featur-section-with-rounded-icons__buttons"><!-- wp:button {"className":"featur-section-with-rounded-icons__button","icon":"arrow-right"} -->
<div class="wp-block-button featur-section-with-rounded-icons__button"><a class="wp-block-button__link wp-element-button">Get a demo</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.featur-section-with-rounded-icons {
    @apply bg-white dark:bg-gray-900 antialiased;
    
    .featur-section-with-rounded-icons__wrapper {
        @apply px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24;
    }

    .featur-section-with-rounded-icons__header {
        @apply mx-auto text-center;
    }

    .featur-section-with-rounded-icons__heading {
        @apply text-3xl font-extrabold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-white;
    }

    .featur-section-with-rounded-icons__description {
        @apply mt-4 text-base font-normal text-gray-500 sm:text-xl dark:text-gray-400 mb-0;
    }

    .featur-section-with-rounded-icons__content {
        @apply p-4 mt-8 rounded-lg sm:p-12 lg:mt-16 bg-gray-50 dark:bg-gray-800;
    }

    .featur-section-with-rounded-icons__content-box {
        @apply grid grid-cols-1 gap-8 sm:gap-12 lg:grid-cols-2;
    }

    .featur-section-with-rounded-icons__box {
        @apply flex flex-col items-start gap-4 sm:gap-5 sm:flex-row;
    }

    .featur-section-with-rounded-icons__box-svg {
        @apply bg-gray-100 dark:bg-gray-700 rounded-full w-16 h-16 lg:w-24 lg:h-24 flex items-center justify-center shrink-0;
    }

    .featur-section-with-rounded-icons__box-heading {
        @apply text-xl font-bold text-gray-900 sm:text-2xl dark:text-white;
    }

    .featur-section-with-rounded-icons__box-description {
        @apply mt-2 text-base font-normal text-gray-500 sm:text-lg dark:text-gray-400 mb-0;
    }

    .featur-section-with-rounded-icons__buttons {
        @apply mt-8 text-center lg:mt-16;

        .featur-section-with-rounded-icons__button {
            @apply text-white inline-flex items-center;

            .wp-element-button {
                @apply bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800;
            }
        }
    }
}