<?php
/**
 * Title: Portfolio
 * Slug: super-agency/portfolio
 * Categories: gallery, portfolio, featured
 * Keywords: portfolio, projects, work, showcase, gallery
 * Description: Showcase your featured projects and portfolio work
 */

$get_url = trailingslashit(get_template_directory_uri());
$portfolio_images = [
    $get_url . 'assets/images/portfolio-1.jpg',
    $get_url . 'assets/images/portfolio-2.jpg',
    $get_url . 'assets/images/portfolio-3.jpg'
];
?>

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|xxx-large","bottom":"var:preset|spacing|xxx-large"},"margin":{"top":"0","bottom":"0"}}},"backgroundColor":"light-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-light-gray-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--xxx-large);padding-bottom:var(--wp--preset--spacing--xxx-large)">
    <!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|xx-large"}}},"layout":{"type":"constrained","contentSize":"600px"}} -->
    <div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--xx-large)">
        <!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|medium"}},"typography":{"fontWeight":"800"}},"textColor":"heading","fontSize":"xxxx-large"} -->
        <h2 class="wp-block-heading has-text-align-center has-heading-color has-text-color has-xxxx-large-font-size" style="margin-bottom:var(--wp--preset--spacing--medium);font-weight:800"><?php esc_html_e('Featured Projects', 'super-agency'); ?></h2>
        <!-- /wp:heading -->

        <!-- wp:paragraph {"align":"center","textColor":"body","fontSize":"x-large"} -->
        <p class="has-text-align-center has-body-color has-text-color has-x-large-font-size"><?php esc_html_e('Explore our latest work and see how we\'ve helped agencies and businesses achieve their digital goals.', 'super-agency'); ?></p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:group -->

    <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|large","left":"var:preset|spacing|large"}}}} -->
    <div class="wp-block-columns alignwide">
        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"spacing":{"blockGap":"0"},"border":{"radius":"16px"}},"backgroundColor":"background","layout":{"type":"constrained"}} -->
            <div class="wp-block-group has-background-background-color has-background" style="border-radius:16px">
                <!-- wp:image {"sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px","topRight":"16px"}}}} -->
                <figure class="wp-block-image size-large has-custom-border"><img src="<?php echo esc_url($portfolio_images[0]); ?>" alt="<?php esc_attr_e('Creative Agency Website', 'super-agency'); ?>" style="border-top-left-radius:16px;border-top-right-radius:16px"/></figure>
                <!-- /wp:image -->

                <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","right":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium"},"blockGap":"var:preset|spacing|x-small"}},"layout":{"type":"constrained"}} -->
                <div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
                    <!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|x-small"}},"typography":{"fontWeight":"700"}},"textColor":"heading","fontSize":"x-large"} -->
                    <h3 class="wp-block-heading has-heading-color has-text-color has-x-large-font-size" style="margin-bottom:var(--wp--preset--spacing--x-small);font-weight:700"><?php esc_html_e('Creative Agency Website', 'super-agency'); ?></h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"style":{"typography":{"fontWeight":"500"}},"textColor":"body","fontSize":"small"} -->
                    <p class="has-body-color has-text-color has-small-font-size" style="font-weight:500"><?php esc_html_e('Web Design • Development', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"spacing":{"blockGap":"0"},"border":{"radius":"16px"}},"backgroundColor":"background","layout":{"type":"constrained"}} -->
            <div class="wp-block-group has-background-background-color has-background" style="border-radius:16px">
                <!-- wp:image {"sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px","topRight":"16px"}}}} -->
                <figure class="wp-block-image size-large has-custom-border"><img src="<?php echo esc_url($portfolio_images[1]); ?>" alt="<?php esc_attr_e('E-commerce Platform', 'super-agency'); ?>" style="border-top-left-radius:16px;border-top-right-radius:16px"/></figure>
                <!-- /wp:image -->

                <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","right":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium"},"blockGap":"var:preset|spacing|x-small"}},"layout":{"type":"constrained"}} -->
                <div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
                    <!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|x-small"}},"typography":{"fontWeight":"700"}},"textColor":"heading","fontSize":"x-large"} -->
                    <h3 class="wp-block-heading has-heading-color has-text-color has-x-large-font-size" style="margin-bottom:var(--wp--preset--spacing--x-small);font-weight:700"><?php esc_html_e('E-commerce Platform', 'super-agency'); ?></h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"style":{"typography":{"fontWeight":"500"}},"textColor":"body","fontSize":"small"} -->
                    <p class="has-body-color has-text-color has-small-font-size" style="font-weight:500"><?php esc_html_e('UI/UX • Development', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->

        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"spacing":{"blockGap":"0"},"border":{"radius":"16px"}},"backgroundColor":"background","layout":{"type":"constrained"}} -->
            <div class="wp-block-group has-background-background-color has-background" style="border-radius:16px">
                <!-- wp:image {"sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px","topRight":"16px"}}}} -->
                <figure class="wp-block-image size-large has-custom-border"><img src="<?php echo esc_url($portfolio_images[2]); ?>" alt="<?php esc_attr_e('Mobile Application', 'super-agency'); ?>" style="border-top-left-radius:16px;border-top-right-radius:16px"/></figure>
                <!-- /wp:image -->

                <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","right":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium"},"blockGap":"var:preset|spacing|x-small"}},"layout":{"type":"constrained"}} -->
                <div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)">
                    <!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|x-small"}},"typography":{"fontWeight":"700"}},"textColor":"heading","fontSize":"x-large"} -->
                    <h3 class="wp-block-heading has-heading-color has-text-color has-x-large-font-size" style="margin-bottom:var(--wp--preset--spacing--x-small);font-weight:700"><?php esc_html_e('Mobile Application', 'super-agency'); ?></h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"style":{"typography":{"fontWeight":"500"}},"textColor":"body","fontSize":"small"} -->
                    <p class="has-body-color has-text-color has-small-font-size" style="font-weight:500"><?php esc_html_e('App Design • Development', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->
</div>
<!-- /wp:group -->