page-dev-portal.php

<?php
/**
 * Template Name: Dev Portal
 *
 * Developer Portal page template
 *
 * @package Frequency
 */

get_header();

// Get ACF fields if available (safe wrapper handles missing ACF)
$hero_title = frequency_get_page_field('hero_title', 'Get Started with Frequency Development');
$hero_subtitle = frequency_get_page_field('hero_subtitle', 'Frequency offers a variety of open source tools and documentation in the Developers Portal to help you rapidly get applications up and running on Frequency.');
$explore_title = frequency_get_page_field('explore_title', 'Explore & Build');
$explore_content = frequency_get_page_field('explore_content', 'Frequency offers simple blockchain integration for your applications—bridging the gap between your app and the decentralized web. Frequency Developer Gateway offers a suite of self-hosted tools and services that make it easy to connect your applications to Frequency. This allows your developer team to focus on building outstanding user experiences without managing the complexity of blockchain interactions. With Frequency Developer Gateway, you can pick and choose among the tools and services to build the best applications for your users to:');

// Default accordion items
$default_items = [
    [
        'number' => '1',
        'title' => 'Quick Start/<br>Become a Provider',
        'title_desktop' => 'Quick Start/<br />Become a Provider',
        'description' => 'In 5 minutes, you can become a provider and set up the Social App Template Example Application that uses Frequency Developer Gateway Services. This will give you a quick introduction to a working integration with Frequency Developer Gateway Services and a starting place to explore the possibilities.',
        'url' => 'https://docs.frequency.xyz/Guides/BecomeAProvider.html',
        'icon' => 'icon-provider.svg'
    ],
    [
        'number' => '2',
        'title' => 'Frequency Developer Gateway',
        'title_desktop' => 'Frequency<br class="hidden lg:block" /> Developer<br class="hidden lg:block" /> Gateway',
        'description' => 'Select among this collection of easy-to-deploy microservices that provide simple REST APIs for interacting with Frequency. Configure and deploy only the components you need.',
        'url' => 'https://docs.frequency.xyz/Guides/Gateway.html',
        'icon' => 'icon-gateway.svg'
    ],
    [
        'number' => '3',
        'title' => 'Add Single Sign-on to your App',
        'title_desktop' => 'Add Single<br class="hidden lg:block" /> Sign-on to<br class="hidden lg:block" /> your App',
        'description' => 'Sign On With Frequency (SIWF) provides comprehensive documentation and tools to integrate with Frequency Access, an easy-to-use single sign-on identity solution for users on Frequency. SIWF simplifies the authentication process, allowing users to access the entire Frequency ecosystem effortlessly while maintaining control over their personal data.',
        'url' => 'https://docs.frequency.xyz/Guides/SSO.html',
        'icon' => 'icon-sso.svg'
    ],
    [
        'number' => '4',
        'title' => 'Frequency Whitepaper',
        'title_desktop' => 'Frequency<br class="hidden lg:block" /> Whitepaper',
        'description' => 'Here you will find detailed information about the building blocks of Frequency including technical overviews, advanced tutorials, API documentation, code samples and more–everything you need to build your first application to leverage the power of Frequency.',
        'url' => 'https://docs.frequency.xyz/',
        'icon' => 'icon-core.svg'
    ],
];

$accordion_items = frequency_have_rows('accordion_items') ? [] : $default_items;
if (frequency_have_rows('accordion_items')) {
    while (frequency_have_rows('accordion_items')) {
        frequency_the_row();
        $accordion_items[] = [
            'number' => frequency_get_field('number', '1'),
            'title' => frequency_get_field('title', ''),
            'title_desktop' => frequency_get_field('title_desktop', frequency_get_field('title', '')),
            'description' => frequency_get_field('description', ''),
            'url' => frequency_get_field('url', '#'),
            'icon' => frequency_get_field('icon', 'icon-provider.svg'),
        ];
    }
}
?>

<main id="main-content" class="flex w-full flex-col items-center">

    <!-- Hero Section -->
    <section class="freq-container xs:pb-f64 md:pb-f96 lg:pb-f24 flex flex-col lg:flex-row lg:items-center lg:justify-center">
        <!-- Animation -->
        <div class="xs:max-h-[500px] flex h-[100vw] w-full self-center lg:h-[700px] lg:w-1/2">
            <?php
            echo frequency_lottie(FREQUENCY_THEME_URI . '/assets/lottie/dev-portal-dot.lottie', [
                'autoplay' => true,
                'loop' => true,
                'play_on_visible' => true,
                'fit' => 'contain',
                'align_x' => 0.5,
                'align_y' => 0.5,
            ]);
            ?>
        </div>

        <!-- Hero Text -->
        <div class="flex max-w-[930px] flex-col gap-6 lg:w-1/2">
            <div data-animate="slide-in">
                <h1 class="title-70 text-primary"><?php echo wp_kses_post($hero_title); ?></h1>
            </div>
            <div data-animate="slide-in">
                <p class="title-h5 text-black"><?php echo wp_kses_post($hero_subtitle); ?></p>
            </div>
        </div>
    </section>

    <!-- Explore Section -->
    <div class="w-full bg-black">
        <section id="explore_section" class="freq-container gap-f12 pb-f96 pt-f64 lg:py-f96 flex w-full flex-col lg:flex-row lg:gap-0">

            <!-- Left Column - Description -->
            <div id="explore_description" class="text-primary md:px-f32 lg:pt-f96 relative flex w-full flex-row lg:w-1/2">
                <div class="gap-f32 flex flex-col">
                    <div data-animate="slide-in">
                        <h2 class="title-70 mt-f8 text-wrap text-clip text-white"><?php echo wp_kses_post($explore_title); ?></h2>
                    </div>
                    <div class="body pb-f64 xs:pb-f32 md:pb-f80 text-white">
                        <?php echo wp_kses_post($explore_content); ?>
                        <div class="pt-4 font-bold">
                            <ul class="list-inside list-disc lg:pl-5">
                                <li>Add authentication and onboarding workflows</li>
                                <li>Connect with their universal social graph</li>
                                <li>Read, write, and interact with social media content</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column - Accordion -->
            <div class="sm:px-f32 sm:py-f16 w-full">
                <div class="gap-x-f4 gap-y-f48 grid grid-cols-1 overflow-y-hidden md:grid-cols-2 lg:flex lg:h-[850px] xl:h-[700px]">
                    <?php foreach ($accordion_items as $index => $item) :
                        $num = intval($item['number']);
                        $is_even = ($num % 2 === 0);
                        $is_first = ($index === 0);

                        // Border classes based on even/odd
                        $border_classes = 'md:border-l-[1.5px] lg:pl-f12 md:border-r-0 lg:pr-3 ';
                        $border_classes .= $is_even ? 'border-r-[1.5px] sm:pr-f12' : 'border-l-[1.5px] sm:pl-f12';

                        // Text align classes
                        $text_align = 'md:text-left ' . ($is_even ? 'text-right' : '');

                        // Content align classes
                        $content_align = 'md:justify-normal ' . ($is_even ? 'justify-end' : '');

                        // Icon align for even items
                        $icon_align = $is_even ? 'justify-end' : '';
                    ?>
                        <div
                            id="explore_<?php echo esc_attr($item['number']); ?>"
                            class="h-accordion-item flex flex-col <?php echo esc_attr($border_classes); ?> border-grayBorder px-f32 lg:pb-f96 lg:pt-f96 lg:transition-all <?php echo $is_first ? 'lg:w-[316px] xl:w-[400px]' : 'shrink-0 lg:w-[160px] lg:cursor-pointer'; ?>"
                            data-accordion-index="<?php echo esc_attr($item['number']); ?>"
                            data-accordion-open="<?php echo $is_first ? 'true' : 'false'; ?>"
                        >
                            <!-- Section Number -->
                            <div class="font-title -mt-[9px] text-[40px] font-bold text-nowrap text-clip text-white sm:text-[44px] <?php echo esc_attr($text_align); ?>">
                                .<?php echo str_pad($num, 2, '0', STR_PAD_LEFT); ?>
                            </div>

                            <!-- Icon -->
                            <div id="explore_<?php echo esc_attr($item['number']); ?>_icon" class="flex w-full flex-row pt-[6px] lg:justify-normal <?php echo esc_attr($content_align); ?>">
                                <img
                                    src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/explore/' . $item['icon']); ?>"
                                    alt=""
                                    class="h-[62px] w-[62px] md:h-[65px] md:w-[65px] lg:h-[74px] lg:w-[74px]"
                                >
                            </div>

                            <!-- Label -->
                            <div id="explore_<?php echo esc_attr($item['number']); ?>_label" class="title-h6 pt-6 text-wrap text-clip text-white <?php echo esc_attr($text_align); ?>">
                                <?php echo wp_kses_post($item['title_desktop']); ?>
                            </div>

                            <!-- Content (toggles on desktop) -->
                            <div class="h-accordion-content lg:transition-all <?php echo $is_first ? 'block' : 'block lg:hidden'; ?>">
                                <div id="explore_<?php echo esc_attr($item['number']); ?>_content" class="body pb-f12 pr-f8 overflow-hidden pt-4 pl-0 text-white md:max-w-full <?php echo esc_attr($text_align); ?>">
                                    <?php echo wp_kses_post($item['description']); ?>
                                </div>
                                <div class="flex flex-row <?php echo esc_attr($content_align); ?>">
                                    <?php echo frequency_button('Learn', $item['url'], [
                                        'intent' => 'filled-light',
                                        'size' => 'sm',
                                        'target' => '_blank',
                                        'class' => 'inline-flex items-center gap-2',
                                    ]); ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>

        </section>
    </div>

</main>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const MAX_MOBILE_WIDTH = 1300;
    const accordionItems = document.querySelectorAll('.h-accordion-item');

    function isDesktop() {
        return (document.body?.scrollWidth || MAX_MOBILE_WIDTH) >= MAX_MOBILE_WIDTH;
    }

    function toggleAccordion(clickedItem) {
        if (!isDesktop()) return;

        const isCurrentlyOpen = clickedItem.dataset.accordionOpen === 'true';
        if (isCurrentlyOpen) return;

        accordionItems.forEach(item => {
            const content = item.querySelector('.h-accordion-content');
            if (item === clickedItem) {
                // Open this item
                item.dataset.accordionOpen = 'true';
                item.classList.remove('shrink-0', 'lg:w-[160px]', 'lg:cursor-pointer');
                item.classList.add('lg:w-[316px]', 'xl:w-[400px]');
                if (content) {
                    content.classList.remove('lg:hidden');
                    content.classList.add('block');
                }
            } else {
                // Close other items
                item.dataset.accordionOpen = 'false';
                item.classList.remove('lg:w-[316px]', 'xl:w-[400px]');
                item.classList.add('shrink-0', 'lg:w-[160px]', 'lg:cursor-pointer');
                if (content) {
                    content.classList.add('lg:hidden');
                }
            }
        });
    }

    accordionItems.forEach(item => {
        item.addEventListener('click', function() {
            toggleAccordion(this);
        });
    });
});
</script>

<?php
get_footer();