<?php
/**
 * Title: Our Services
 * Slug: monoframe/services
 * Categories: monoframe
 *
 * @since 1.0.0
 * @return void
 */
?>
<!-- wp:group {"className":"alignfull","layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group alignfull services">
    <!-- wp:heading {"textAlign":"center"} -->
    <h2 class="wp-block-heading has-text-align-center"><?php esc_html_e('Our Services', 'monoframe'); ?></h2>
    <!-- /wp:heading -->

    <!-- wp:paragraph {"align":"center"} -->
    <p class="has-text-align-center">
        <?php esc_html_e('Tailored solutions designed to help your business thrive.', 'monoframe'); ?>
    </p>
    <!-- /wp:paragraph -->

    <!-- wp:columns {"className": "alignwide"} -->
    <div class="wp-block-columns alignwide">
        <!-- wp:column {"layout":{"type":"default"}} -->
        <div class="wp-block-column">

            <!-- wp:image {"className":"services-icon","align":"center","sizeSlug":"large"} -->
            <figure class="wp-block-image aligncenter size-large services-icon">
                <img src="<?php echo get_theme_file_uri('assets/images/svg/bulb.svg'); ?>" alt="<?php esc_attr_e( 'Lightbulb icon', 'monoframe' ); ?>" />
            </figure>
            <!-- /wp:image -->

            <!-- wp:heading {"textAlign":"center","level":3,"className":"has-subheading-font-size","style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
            <h3 class="wp-block-heading has-text-align-center has-subheading-font-size">
                <?php esc_html_e('Custom Theme Design', 'monoframe'); ?>
            </h3>
            <!-- /wp:heading -->

            <!-- wp:paragraph -->
            <p><?php esc_html_e('Craft a unique, responsive WordPress theme that reflects your brand and scales to any device.', 'monoframe'); ?>
            </p>
            <!-- /wp:paragraph -->

            <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
            <div class="wp-block-buttons"><!-- wp:button {"textAlign":"center"} -->
                <div class="wp-block-button"><a
                        class="wp-block-button__link has-text-align-center wp-element-button"><?php esc_html_e('Learn More', 'monoframe'); ?></a>
                </div>
                <!-- /wp:button -->
            </div>
            <!-- /wp:buttons -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column {"layout":{"type":"default"}} -->
        <div class="wp-block-column">

            <!-- wp:image {"className":"services-icon","align":"center","sizeSlug":"large"} -->
            <figure class="wp-block-image aligncenter size-large services-icon">
                <img src="<?php echo get_theme_file_uri('assets/images/svg/gear.svg'); ?>" alt="<?php esc_attr_e( 'Gear icon', 'monoframe' ); ?>" />
            </figure>
            <!-- /wp:image -->

            <!-- wp:heading {"textAlign":"center","level":3,"className":"has-subheading-font-size","style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
            <h3 class="wp-block-heading has-text-align-center has-subheading-font-size">
                <?php esc_html_e('Plugin Development', 'monoframe'); ?>
            </h3>
            <!-- /wp:heading -->

            <!-- wp:paragraph -->
            <p><?php esc_html_e('Build custom plugins or extend existing ones to add exactly the functionality you need.', 'monoframe'); ?>
            </p>
            <!-- /wp:paragraph -->

            <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
            <div class="wp-block-buttons"><!-- wp:button {"textAlign":"center"} -->
                <div class="wp-block-button"><a
                        class="wp-block-button__link has-text-align-center wp-element-button"><?php esc_html_e('Learn More', 'monoframe'); ?></a>
                </div>
                <!-- /wp:button -->
            </div>
            <!-- /wp:buttons -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column {"layout":{"type":"default"}} -->
        <div class="wp-block-column">

            <!-- wp:image {"className":"services-icon","align":"center","sizeSlug":"large"} -->
            <figure class="wp-block-image aligncenter size-large services-icon">
                <img src="<?php echo get_theme_file_uri('assets/images/svg/globe.svg'); ?>" alt="<?php esc_attr_e( 'Globe icon', 'monoframe' ); ?>" />
            </figure>
            <!-- /wp:image -->

            <!-- wp:heading {"textAlign":"center","level":3,"className":"has-subheading-font-size","style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
            <h3 class="wp-block-heading has-text-align-center has-subheading-font-size">
                <?php esc_html_e('Support & Maintenance', 'monoframe'); ?>
            </h3>
            <!-- /wp:heading -->

            <!-- wp:paragraph -->
            <p><?php esc_html_e('Keep your site secure and up-to-date with regular backups, updates, and performance tuning.', 'monoframe'); ?>
            </p>
            <!-- /wp:paragraph -->

            <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
            <div class="wp-block-buttons"><!-- wp:button {"textAlign":"center"} -->
                <div class="wp-block-button"><a
                        class="wp-block-button__link has-text-align-center wp-element-button"><?php esc_html_e('Learn More', 'monoframe'); ?></a>
                </div>
                <!-- /wp:button -->
            </div>
            <!-- /wp:buttons -->
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->
</div>
<!-- /wp:group -->