<?php
/**
 * Title: Feature Boxes Colored
 * Slug: strakture/feature-boxes-colored
 * Categories: strakture-general
 *
 * @package Strakture
 */

?>
<!-- wp:group {"metadata":{"name":"Feature boxes"},"align":"full","style":{"spacing":{"padding":{"top":"7rem","bottom":"3rem","right":"1.5rem","left":"1.5rem"}}},"backgroundColor":"background-light","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-background-light-background-color has-background" style="padding-top:7rem;padding-right:1.5rem;padding-bottom:3rem;padding-left:1.5rem"><!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"spacing":{"margin":{"bottom":"4rem"},"blockGap":{"left":"6rem"}}}} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center" style="margin-bottom:4rem"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"style":{"typography":{"fontSize":"3rem"}}} -->
<h2 class="wp-block-heading" style="font-size:3rem"><?php echo esc_html__( 'Everything You Need to Build Faster', 'strakture' ); ?></h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph {"style":{"typography":{"fontSize":"1.25rem"}}} -->
<p style="font-size:1.25rem"><?php echo esc_html__( 'From AI-generated layouts to production-ready WordPress patterns, Strakture helps you launch beautiful, high-performance sites with confidence and speed.', 'strakture' ); ?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"bottom":"4rem"},"blockGap":{"left":"1.5rem"}}}} -->
<div class="wp-block-columns alignwide" style="margin-bottom:4rem"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"metadata":{"name":"icon box"},"className":"hover-up","style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"},"blockGap":"1.13rem"},"border":{"radius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}},"color":{"background":"#fffffffc"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group hover-up has-background" style="border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background-color:#fffffffc;padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:strakture/svg-icon {"customIconBackgroundColor":"#eaf4fd","iconColor":"headings","width":"64px","height":"64px","hasNoIconFill":true,"style":{"border":{"radius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}},"spacing":{"padding":{"top":"1.28rem","bottom":"1.28rem"}}}} -->
<div class="wp-block-strakture-svg-icon"><div class="wp-block-strakture-svg-icon__container has-icon-color has-headings-color has-no-icon-fill-color" style="background-color:#eaf4fd;width:64px;height:64px;padding-top:1.28rem;padding-bottom:1.28rem;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z"></path></svg></div></div>
<!-- /wp:strakture/svg-icon -->

<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"1.25rem"}}} -->
<h3 class="wp-block-heading" style="font-size:1.25rem"><?php echo esc_html__( 'Cloud Library', 'strakture' ); ?></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"1rem"}}} -->
<p style="font-size:1rem"><?php echo esc_html__( 'Access a growing cloud library of AI-generated WordPress FSE patterns. Designed with consistent layout principles.', 'strakture' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textDecoration":"none","fontSize":"1rem"}},"fontFamily":"headings"} -->
<p class="has-headings-font-family" style="font-size:1rem;text-decoration:none"><a href="#"><?php echo esc_html__( 'Learn More', 'strakture' ); ?></a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"metadata":{"name":"icon box"},"className":"hover-up","style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"},"blockGap":"1.13rem"},"border":{"radius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}},"color":{"background":"#fffffffc"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group hover-up has-background" style="border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background-color:#fffffffc;padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:strakture/svg-icon {"customIconBackgroundColor":"#edf7e2","iconColor":"headings","width":"64px","height":"64px","hasNoIconFill":true,"style":{"border":{"radius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}},"spacing":{"padding":{"top":"1.28rem","bottom":"1.28rem"}}}} -->
<div class="wp-block-strakture-svg-icon"><div class="wp-block-strakture-svg-icon__container has-icon-color has-headings-color has-no-icon-fill-color" style="background-color:#edf7e2;width:64px;height:64px;padding-top:1.28rem;padding-bottom:1.28rem;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"></path></svg></div></div>
<!-- /wp:strakture/svg-icon -->

<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"1.25rem"}}} -->
<h3 class="wp-block-heading" style="font-size:1.25rem"><?php echo esc_html__( 'Connect Payments Easily', 'strakture' ); ?></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"1rem"}}} -->
<p style="font-size:1rem"><?php echo esc_html__( 'Transform your online presence with our cutting-edge web design and development services.', 'strakture' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textDecoration":"none","fontSize":"1rem"}},"fontFamily":"headings"} -->
<p class="has-headings-font-family" style="font-size:1rem;text-decoration:none"><a href="#"><?php echo esc_html__( 'Learn More', 'strakture' ); ?></a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"metadata":{"name":"icon box"},"className":"hover-up","style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"},"blockGap":"1.13rem"},"border":{"radius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}},"color":{"background":"#fffffffc"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group hover-up has-background" style="border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background-color:#fffffffc;padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:strakture/svg-icon {"customIconBackgroundColor":"#faedd5","iconColor":"headings","width":"64px","height":"64px","hasNoIconFill":true,"style":{"border":{"radius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}},"spacing":{"padding":{"top":"1.28rem","bottom":"1.28rem"}}}} -->
<div class="wp-block-strakture-svg-icon"><div class="wp-block-strakture-svg-icon__container has-icon-color has-headings-color has-no-icon-fill-color" style="background-color:#faedd5;width:64px;height:64px;padding-top:1.28rem;padding-bottom:1.28rem;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M7.864 4.243A7.5 7.5 0 0 1 19.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 0 0 4.5 10.5a7.464 7.464 0 0 1-1.15 3.993m1.989 3.559A11.209 11.209 0 0 0 8.25 10.5a3.75 3.75 0 1 1 7.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 0 1-3.6 9.75m6.633-4.596a18.666 18.666 0 0 1-2.485 5.33"></path></svg></div></div>
<!-- /wp:strakture/svg-icon -->

<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"1.25rem"}}} -->
<h3 class="wp-block-heading" style="font-size:1.25rem"><?php echo esc_html__( 'Secure and Protected', 'strakture' ); ?></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"1rem"}}} -->
<p style="font-size:1rem"><?php echo esc_html__( 'Every pattern is lightweight, responsive, and built to WordPress standards. Clean markup, fast loading.', 'strakture' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textDecoration":"none","fontSize":"1rem"}},"fontFamily":"headings"} -->
<p class="has-headings-font-family" style="font-size:1rem;text-decoration:none"><a href="#"><?php echo esc_html__( 'Learn More', 'strakture' ); ?></a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"metadata":{"name":"icon box"},"className":"hover-up","style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"},"blockGap":"1.13rem"},"border":{"radius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}},"color":{"background":"#fffffffc"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group hover-up has-background" style="border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background-color:#fffffffc;padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:strakture/svg-icon {"customIconBackgroundColor":"#f5eafd","iconColor":"headings","width":"64px","height":"64px","hasNoIconFill":true,"style":{"border":{"radius":{"topLeft":"12px","topRight":"12px","bottomLeft":"12px","bottomRight":"12px"}},"spacing":{"padding":{"top":"1.28rem","bottom":"1.28rem"}}}} -->
<div class="wp-block-strakture-svg-icon"><div class="wp-block-strakture-svg-icon__container has-icon-color has-headings-color has-no-icon-fill-color" style="background-color:#f5eafd;width:64px;height:64px;padding-top:1.28rem;padding-bottom:1.28rem;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:12px;border-bottom-right-radius:12px"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"></path></svg></div></div>
<!-- /wp:strakture/svg-icon -->

<!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"1.25rem"}}} -->
<h3 class="wp-block-heading" style="font-size:1.25rem"><?php echo esc_html__( 'CRM integration', 'strakture' ); ?></h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"1rem"}}} -->
<p style="font-size:1rem"><?php echo esc_html__( 'Strakture fits right into your existing WordPress setup. Use patterns in any FSE theme and extend them', 'strakture' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textDecoration":"none","fontSize":"1rem"}},"fontFamily":"headings"} -->
<p class="has-headings-font-family" style="font-size:1rem;text-decoration:none"><a href="#"><?php echo esc_html__( 'Learn More', 'strakture' ); ?></a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
