<?php
/**
 * Title: Portfolio Grid
 * Slug: super-agency/portfolio-grid
 * Categories: gallery, portfolio, featured
 * Keywords: portfolio, projects, work, showcase, gallery, grid
 * Description: A portfolio grid showcasing 4 featured projects with categories and hover effects
 */

$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',
    $get_url . 'assets/images/portfolio-1.jpg'
];
?>

<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|xxx-large","bottom":"var:preset|spacing|xxx-large"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" 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":"700px"}} -->
    <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('Our Portfolio', 'super-agency'); ?></h2>
        <!-- /wp:heading -->

        <!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|large"}}},"textColor":"body","fontSize":"x-large"} -->
        <p class="has-text-align-center has-body-color has-text-color has-x-large-font-size" style="margin-bottom:var(--wp--preset--spacing--large)"><?php esc_html_e('Explore our diverse collection of successful projects across web design, development, and digital strategy.', '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","className":"super-agency-portfolio-card","layout":{"type":"constrained"}} -->
            <div class="wp-block-group has-background-background-color has-background super-agency-portfolio-card" 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('E-commerce Platform Project', '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|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:paragraph {"style":{"typography":{"fontWeight":"600","textTransform":"uppercase","letterSpacing":"0.5px"}},"textColor":"primary","fontSize":"small"} -->
                    <p class="has-primary-color has-text-color has-small-font-size" style="font-weight:600;letter-spacing:0.5px;text-transform:uppercase"><?php esc_html_e('E-commerce', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- 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('Modern E-commerce Platform', 'super-agency'); ?></h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|small"}}},"textColor":"body","fontSize":"small"} -->
                    <p class="has-body-color has-text-color has-small-font-size" style="margin-bottom:var(--wp--preset--spacing--small)"><?php esc_html_e('A comprehensive e-commerce solution with advanced features, seamless checkout, and mobile-optimized design.', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|x-small"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
                    <div class="wp-block-group">
                        <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"4px","right":"12px","bottom":"4px","left":"12px"}},"border":{"radius":"20px"}},"backgroundColor":"surface","textColor":"body","fontSize":"small"} -->
                        <p class="has-body-color has-surface-background-color has-text-color has-background has-small-font-size" style="border-radius:20px;padding-top:4px;padding-right:12px;padding-bottom:4px;padding-left:12px"><?php esc_html_e('React', 'super-agency'); ?></p>
                        <!-- /wp:paragraph -->

                        <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"4px","right":"12px","bottom":"4px","left":"12px"}},"border":{"radius":"20px"}},"backgroundColor":"surface","textColor":"body","fontSize":"small"} -->
                        <p class="has-body-color has-surface-background-color has-text-color has-background has-small-font-size" style="border-radius:20px;padding-top:4px;padding-right:12px;padding-bottom:4px;padding-left:12px"><?php esc_html_e('Node.js', 'super-agency'); ?></p>
                        <!-- /wp:paragraph -->

                        <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"4px","right":"12px","bottom":"4px","left":"12px"}},"border":{"radius":"20px"}},"backgroundColor":"surface","textColor":"body","fontSize":"small"} -->
                        <p class="has-body-color has-surface-background-color has-text-color has-background has-small-font-size" style="border-radius:20px;padding-top:4px;padding-right:12px;padding-bottom:4px;padding-left:12px"><?php esc_html_e('MongoDB', 'super-agency'); ?></p>
                        <!-- /wp:paragraph -->
                    </div>
                    <!-- /wp:group -->
                </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","className":"super-agency-portfolio-card","layout":{"type":"constrained"}} -->
            <div class="wp-block-group has-background-background-color has-background super-agency-portfolio-card" 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('SaaS Dashboard Project', '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|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:paragraph {"style":{"typography":{"fontWeight":"600","textTransform":"uppercase","letterSpacing":"0.5px"}},"textColor":"primary","fontSize":"small"} -->
                    <p class="has-primary-color has-text-color has-small-font-size" style="font-weight:600;letter-spacing:0.5px;text-transform:uppercase"><?php esc_html_e('SaaS', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- 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('Analytics Dashboard', 'super-agency'); ?></h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|small"}}},"textColor":"body","fontSize":"small"} -->
                    <p class="has-body-color has-text-color has-small-font-size" style="margin-bottom:var(--wp--preset--spacing--small)"><?php esc_html_e('Data-driven dashboard with real-time analytics, custom charts, and intuitive user interface design.', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|x-small"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
                    <div class="wp-block-group">
                        <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"4px","right":"12px","bottom":"4px","left":"12px"}},"border":{"radius":"20px"}},"backgroundColor":"surface","textColor":"body","fontSize":"small"} -->
                        <p class="has-body-color has-surface-background-color has-text-color has-background has-small-font-size" style="border-radius:20px;padding-top:4px;padding-right:12px;padding-bottom:4px;padding-left:12px"><?php esc_html_e('Vue.js', 'super-agency'); ?></p>
                        <!-- /wp:paragraph -->

                        <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"4px","right":"12px","bottom":"4px","left":"12px"}},"border":{"radius":"20px"}},"backgroundColor":"surface","textColor":"body","fontSize":"small"} -->
                        <p class="has-body-color has-surface-background-color has-text-color has-background has-small-font-size" style="border-radius:20px;padding-top:4px;padding-right:12px;padding-bottom:4px;padding-left:12px"><?php esc_html_e('Python', 'super-agency'); ?></p>
                        <!-- /wp:paragraph -->

                        <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"4px","right":"12px","bottom":"4px","left":"12px"}},"border":{"radius":"20px"}},"backgroundColor":"surface","textColor":"body","fontSize":"small"} -->
                        <p class="has-body-color has-surface-background-color has-text-color has-background has-small-font-size" style="border-radius:20px;padding-top:4px;padding-right:12px;padding-bottom:4px;padding-left:12px"><?php esc_html_e('PostgreSQL', 'super-agency'); ?></p>
                        <!-- /wp:paragraph -->
                    </div>
                    <!-- /wp:group -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->

    <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|large","left":"var:preset|spacing|large"},"margin":{"top":"var:preset|spacing|large"}}}} -->
    <div class="wp-block-columns alignwide" style="margin-top:var(--wp--preset--spacing--large)">
        <!-- wp:column -->
        <div class="wp-block-column">
            <!-- wp:group {"style":{"spacing":{"blockGap":"0"},"border":{"radius":"16px"}},"backgroundColor":"background","className":"super-agency-portfolio-card","layout":{"type":"constrained"}} -->
            <div class="wp-block-group has-background-background-color has-background super-agency-portfolio-card" 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 App Project', '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|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:paragraph {"style":{"typography":{"fontWeight":"600","textTransform":"uppercase","letterSpacing":"0.5px"}},"textColor":"primary","fontSize":"small"} -->
                    <p class="has-primary-color has-text-color has-small-font-size" style="font-weight:600;letter-spacing:0.5px;text-transform:uppercase"><?php esc_html_e('Mobile App', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- 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('Fitness Tracking App', 'super-agency'); ?></h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|small"}}},"textColor":"body","fontSize":"small"} -->
                    <p class="has-body-color has-text-color has-small-font-size" style="margin-bottom:var(--wp--preset--spacing--small)"><?php esc_html_e('Cross-platform mobile app with workout tracking, social features, and personalized fitness plans.', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|x-small"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
                    <div class="wp-block-group">
                        <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"4px","right":"12px","bottom":"4px","left":"12px"}},"border":{"radius":"20px"}},"backgroundColor":"surface","textColor":"body","fontSize":"small"} -->
                        <p class="has-body-color has-surface-background-color has-text-color has-background has-small-font-size" style="border-radius:20px;padding-top:4px;padding-right:12px;padding-bottom:4px;padding-left:12px"><?php esc_html_e('React Native', 'super-agency'); ?></p>
                        <!-- /wp:paragraph -->

                        <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"4px","right":"12px","bottom":"4px","left":"12px"}},"border":{"radius":"20px"}},"backgroundColor":"surface","textColor":"body","fontSize":"small"} -->
                        <p class="has-body-color has-surface-background-color has-text-color has-background has-small-font-size" style="border-radius:20px;padding-top:4px;padding-right:12px;padding-bottom:4px;padding-left:12px"><?php esc_html_e('Firebase', 'super-agency'); ?></p>
                        <!-- /wp:paragraph -->

                        <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"4px","right":"12px","bottom":"4px","left":"12px"}},"border":{"radius":"20px"}},"backgroundColor":"surface","textColor":"body","fontSize":"small"} -->
                        <p class="has-body-color has-surface-background-color has-text-color has-background has-small-font-size" style="border-radius:20px;padding-top:4px;padding-right:12px;padding-bottom:4px;padding-left:12px"><?php esc_html_e('GraphQL', 'super-agency'); ?></p>
                        <!-- /wp:paragraph -->
                    </div>
                    <!-- /wp:group -->
                </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","className":"super-agency-portfolio-card","layout":{"type":"constrained"}} -->
            <div class="wp-block-group has-background-background-color has-background super-agency-portfolio-card" 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[3]); ?>" alt="<?php esc_attr_e('Corporate Website Project', '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|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:paragraph {"style":{"typography":{"fontWeight":"600","textTransform":"uppercase","letterSpacing":"0.5px"}},"textColor":"primary","fontSize":"small"} -->
                    <p class="has-primary-color has-text-color has-small-font-size" style="font-weight:600;letter-spacing:0.5px;text-transform:uppercase"><?php esc_html_e('Corporate', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- 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('Corporate Website', 'super-agency'); ?></h3>
                    <!-- /wp:heading -->

                    <!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|small"}}},"textColor":"body","fontSize":"small"} -->
                    <p class="has-body-color has-text-color has-small-font-size" style="margin-bottom:var(--wp--preset--spacing--small)"><?php esc_html_e('Professional corporate website with content management system and multi-language support.', 'super-agency'); ?></p>
                    <!-- /wp:paragraph -->

                    <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|x-small"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
                    <div class="wp-block-group">
                        <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"4px","right":"12px","bottom":"4px","left":"12px"}},"border":{"radius":"20px"}},"backgroundColor":"surface","textColor":"body","fontSize":"small"} -->
                        <p class="has-body-color has-surface-background-color has-text-color has-background has-small-font-size" style="border-radius:20px;padding-top:4px;padding-right:12px;padding-bottom:4px;padding-left:12px"><?php esc_html_e('WordPress', 'super-agency'); ?></p>
                        <!-- /wp:paragraph -->

                        <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"4px","right":"12px","bottom":"4px","left":"12px"}},"border":{"radius":"20px"}},"backgroundColor":"surface","textColor":"body","fontSize":"small"} -->
                        <p class="has-body-color has-surface-background-color has-text-color has-background has-small-font-size" style="border-radius:20px;padding-top:4px;padding-right:12px;padding-bottom:4px;padding-left:12px"><?php esc_html_e('PHP', 'super-agency'); ?></p>
                        <!-- /wp:paragraph -->

                        <!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"4px","right":"12px","bottom":"4px","left":"12px"}},"border":{"radius":"20px"}},"backgroundColor":"surface","textColor":"body","fontSize":"small"} -->
                        <p class="has-body-color has-surface-background-color has-text-color has-background has-small-font-size" style="border-radius:20px;padding-top:4px;padding-right:12px;padding-bottom:4px;padding-left:12px"><?php esc_html_e('MySQL', 'super-agency'); ?></p>
                        <!-- /wp:paragraph -->
                    </div>
                    <!-- /wp:group -->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->

    <!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|xx-large"}}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--xx-large)">
        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
        <div class="wp-block-buttons">
            <!-- wp:button {"backgroundColor":"primary","textColor":"background","style":{"spacing":{"padding":{"left":"var:preset|spacing|x-large","right":"var:preset|spacing|x-large","top":"var:preset|spacing|small","bottom":"var:preset|spacing|small"}}}} -->
            <div class="wp-block-button"><a class="wp-block-button__link has-background-color has-primary-background-color has-text-color has-background wp-element-button" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--x-large);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--x-large)"><?php esc_html_e('View All Projects', 'super-agency'); ?></a></div>
            <!-- /wp:button -->
        </div>
        <!-- /wp:buttons -->
    </div>
    <!-- /wp:group -->
</div>
<!-- /wp:group -->