<?php
/**
 * Title: Pricing
 * Slug: starter-blog/pricing
 * Categories: featured
 */
?>

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide">
    <div class="wp-block-group__inner-container">
        <!-- wp:heading {"textAlign":"center","level":2} -->
        <h2 class="has-text-align-center">Our Pricing</h2>
        <!-- /wp:heading -->

        <!-- wp:columns -->
        <div class="wp-block-columns">
            <!-- wp:column -->
            <div class="wp-block-column">
                <!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","bottom":"20px","left":"10px","right":"10px"}}},"backgroundColor":"light-gray"} -->
                <div class="wp-block-group has-light-gray-background-color" style="padding:20px 10px">
                    <!-- wp:heading {"level":3,"textAlign":"center"} -->
                    <h3 class="has-text-align-center">Basic</h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"align":"center"} -->
                    <p class="has-text-align-center">$10/month</p>
                    <!-- /wp:paragraph -->

                    <!-- wp:list -->
                    <ul>
                        <li>Feature 1</li>
                        <li>Feature 2</li>
                        <li>Feature 3</li>
                    </ul>
                    <!-- /wp:list -->

                    <!-- wp:button {"align":"center"} -->
                    <div class="wp-block-button aligncenter">
                        <a class="wp-block-button__link">Get Started</a>
                    </div>
                    <!-- /wp:button -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:column -->

            <!-- Repeat similar structure for the other two columns -->

        </div>
        <!-- /wp:columns -->
    </div>
</div>
<!-- /wp:group -->
