Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
52 kB
4
Indexable
<?php /* Template Name: Building blocks */ get_header(); ?>

<?php
function output_button($button, $classes = '')
{
    if ($button) {
        $url = esc_url($button['url']);
        $title = esc_html($button['title']);
        $target = esc_attr($button['target'] ? $button['target'] : '_self');
        echo "<a class=\"button $classes\" href=\"$url\" target=\"$target\">
                <span class=\"rollingText\" data-text=\"$title\">$title</span>
            </a>";
    }
}

function output_link($link, $classes = '')
{
    if ($link) {
        $url = esc_url($link['url']);
        $title = esc_html($link['title']);
        $target = esc_attr($link['target'] ? $link['target'] : '_self');
        echo "<a class=\"link rollingText $classes\" data-text=\"$title\" href=\"$url\" target=\"$target\">$title</a>";
    }
}
?>

<div class="homepage">
    <?php
    if (have_rows('building_blocks')) :
        while (have_rows('building_blocks')) : the_row();
    ?>

            <?php
            if (get_row_layout() == 'hero_image') :
                $hero_image = get_sub_field('hero_image');
                $title_image = get_sub_field('title_image');
                $title_image_mobile = get_sub_field('title_image_mobile'); ?>

                <section data-snap-point class="scroll-to" id="heroSection">
                    <div class="hero container-fluid" style="background-image: url('<?php echo esc_url($hero_image['url']); ?>')">
                        <div class="hero-content">
                            <div class="row center middle">
                                <div class="col-lg-12" data-aos="fade-up" data-aos-anchor=".hero">
                                    <div class="desktop-image">
                                        <?php echo wp_get_attachment_image($title_image['ID'], 'full', false, array('class' => 'responsive-img')); ?>
                                    </div>
                                    <div class="mobile-image">
                                        <?php echo wp_get_attachment_image($title_image_mobile['ID'], 'full', false, array('class' => 'responsive-img')); ?>
                                    </div>
                                </div>
                            </div>
                            <div class="row hero-bottom" data-aos="fade-up" data-aos-delay="2000" data-aos-anchor=".hero">
                                <div class="col-lg-6">
                                    <div class="row start">
                                        <p class="hero-description"><?php the_sub_field('description'); ?></p>
                                    </div>
                                </div>
                                <div class="hero-cta col-lg-6">
                                    <div class="hero-cta-content row end middle">
                                        <?php
                                        $cta_button = get_sub_field('cta_button');
                                        if ($cta_button) {
                                            output_button($cta_button, 'button-primary-light');
                                        }
                                        ?>
                                        <?php
                                        $learn_more_link = get_sub_field('learn_more_link');
                                        if ($learn_more_link) {
                                            output_link($learn_more_link, 'learn-more');
                                        }
                                        ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

            <?php endif; ?>
            <?php if (get_row_layout() == 'secondary_hero') :
                $secondary_hero_image = get_sub_field('image'); ?>

                <section class="container-fluid" id="secondaryHero" style="background-image: url('<?php echo esc_url($secondary_hero_image['url']); ?>')">
                    <div class="row bottom start">
                        <div class="col-lg-12 col-md-12 secondary-hero-title">
                            <h2><?php the_sub_field('title'); ?></h2>
                        </div>
                    </div>
                </section>
            <?php endif; ?>

            <?php
            if (get_row_layout() == 'image_callout_tiles') : ?>
                <section data-snap-point class="scroll-to" id="getInvolved">
                    <div class="get-involved container-fluid">
                        <div class="card-row middle row">
                            <?php
                            $base_delay = 750;
                            $delay = 0;
                            if (have_rows('image_card_links')) :
                            ?>
                                <?php while (have_rows('image_card_links')) : the_row(); ?>
                                    <?php
                                    $card_hero_image = get_sub_field('image');
                                    $page_link = get_sub_field('page_link');
                                    if ($page_link) :
                                        $page_link_url = $page_link['url'];
                                        $page_link_title = $page_link['title'];
                                        $page_link_target = $page_link['target'];
                                        $delay = $base_delay * (get_row_index() + 1);
                                    ?>
                                        <a class="card-link" href="<?php echo esc_url($page_link_url); ?>" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="<?php echo esc_attr($delay); ?>" data-aos-anchor="#getInvolved">
                                            <div class="card">
                                                <img src="<?php echo esc_url($card_hero_image['url']); ?>" alt="<?php echo esc_url($card_hero_image['alt']); ?>" class="card-image">
                                                <div class="card-header row">
                                                    <div class="col">
                                                        <h4 class="card-cta-text">
                                                            <?php the_sub_field('cta_text'); ?>
                                                        </h4>
                                                    </div>
                                                    <div class="col">
                                                        <h3 class="card-page-link">
                                                            <?php echo esc_html($page_link_title); ?>
                                                        </h3>
                                                    </div>

                                                </div>
                                            </div>
                                        </a>
                                    <?php endif; ?>
                            <?php endwhile;
                            endif; ?>
                        </div>
                    </div>
                </section>
            <?php endif; ?>

            <?php
            if (get_row_layout() == 'small_copy') :
                $icon_rectangle = get_template_directory_uri() . '/resources/images/icon-rectangle.svg';
                $layout_type = get_sub_field('layout_type');
            ?>
                <div class="small-copy row between bottom">
                    <div class="col-lg-4 col-md-12 small-copy-title" data-aos="fade-up">
                        <?php if ($layout_type == 'Headline + subtext') : ?>
                            <h1>
                                <?php the_sub_field("headline"); ?>
                            </h1>
                        <?php else : ?>
                            <h2 class="test-class-so-that-color-shift-works">
                                <?php the_sub_field("title"); ?>
                            </h2>
                        <?php endif; ?>
                        <img src="<?php echo $icon_rectangle; ?>" alt="icon-rectangle">
                    </div>
                    <div class="col-lg-4 col-lg-offset-4 col-md-12 text-square" data-aos="fade-up">
                        <h4 class="small-copy-subtitle">
                            <?php the_sub_field('subtitle'); ?>
                        </h4>
                        <img src="<?php echo $icon_rectangle; ?>" alt="icon-rectangle">
                    </div>
                </div>


            <?php endif; ?>

            <?php if (get_row_layout() == 'big_body_cta') : ?>
                <section data-snap-point class="scroll-to" id="bigBodyText">
                    <div class="big-body-text container-fluid">
                        <div class="text-content">
                            <h2><?php the_sub_field('big_body_text_field') ?></h2>
                        </div>
                        <?php
                        $cta_button = get_sub_field('cta_button');
                        $learn_more_link = get_sub_field('learn_more_link');

                        if ($cta_button || $learn_more_link) :
                        ?>
                            <div class="big-body-text-cta start" data-aos="fade-up">
                                <?php
                                if ($cta_button) {
                                    output_button($cta_button, 'button-primary-dark');
                                }

                                if ($learn_more_link) {
                                    output_link($learn_more_link, 'link-dark');
                                }
                                ?>
                            </div>
                        <?php endif; ?>
                    </div>
                </section>

            <?php endif; ?>

            <?php if (get_row_layout() == 'photo_slider') : ?>
                <section data-snap-point class="scroll-to" id="photoSlider">
                    <div class="photo-slider container-fluid">
                        <div class="photo-slider-top-row row around">
                            <div class="col-lg-4" data-aos="fade-up">
                                <h4 class="photo-slider-title">
                                    <?php the_sub_field('title') ?>
                                </h4>
                            </div>
                            <div class="col-lg-4">
                                <div class="photo-slider-control-icons">
                                    <?php
                                    $icon_control_left = get_template_directory_uri() . '/resources/images/icon-control-left.svg';
                                    $icon_control_right = get_template_directory_uri() . '/resources/images/icon-control-right.svg';
                                    ?>
                                    <svg class="photo-slider-icon-control-left" width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M4.15475 9.05587L9.24275 14.1439L7.89875 15.4639L0.43475 7.99986L7.89875 0.535866L9.24275 1.87987L4.15475 6.94387L18.2188 6.94387L18.2188 9.05587L4.15475 9.05587Z" fill="#1F2626" />
                                    </svg>
                                    <svg class="photo-slider-icon-control-right" width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M14.2828 6.94389L9.19475 1.85589L10.5388 0.535889L18.0028 7.99989L10.5388 15.4639L9.19475 14.1199L14.2828 9.05589H0.21875V6.94389H14.2828Z" fill="#1F2626" />
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="photo-slider-gallery">
                                <?php if (have_rows('image_slider')) :
                                    $base_delay = 250;
                                    $delay = 0; ?>
                                    <?php while (have_rows('image_slider')) : the_row();
                                        $delay = $base_delay * (get_row_index() + 1);
                                    ?>
                                        <div class="image-slider-wrapper">
                                            <?php $image = get_sub_field('image'); ?>
                                            <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" data-aos="fade-up" data-aos-delay="<?php echo esc_attr($delay); ?>">
                                        </div>
                                    <?php endwhile; ?>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </section>
            <?php endif; ?>

            <?php if (get_row_layout() == 'upcoming_events') : ?>
                <?php
                // Fetch the most recent event.
                $events = get_posts([
                    'post_type' => 'events',
                    'numberposts' => 1,
                    'orderby' => 'date',
                    'order' => 'DESC',
                    'post_status' => 'publish'
                ]);


                if ($events) :
                    foreach ($events as $event) :
                        setup_postdata($event);
                        $icon_event = get_template_directory_uri() . '/resources/images/icon-event.svg';
                        $event_when_group = get_field('when', $event->ID);
                        $event_where_group = get_field('where', $event->ID);
                        $event_what = get_field('short_description', $event->ID);
                ?>
                        <section data-snap-point class="scroll-to upcoming-event container-fluid" id="upcomingEvent">
                            <div class="row stretch">
                                <div class="col-lg-6 col-md-12 upcoming-event-main">
                                    <div class="top-row row">
                                        <div class="upcoming-event-subtitle row start">
                                            <img src="<?php echo $icon_event ?>" alt="icon-event">
                                            <h5>
                                                <?php the_sub_field('subtitle'); ?>
                                            </h5>
                                        </div>
                                        <div class="upcoming-event-title">
                                            <h2>
                                                <?php echo get_the_title($event->ID); ?>
                                            </h2>
                                        </div>
                                    </div>
                                    <div class="upcoming-event-mobile-slider">
                                        <div class="upcoming-event-image-slider-mobile">
                                            <?php
                                            if (have_rows('images', $event->ID)) :
                                                while (have_rows('images', $event->ID)) : the_row();
                                                    $image = get_sub_field('image');
                                            ?>
                                                    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" data-aos="fade-up" data-aos-anchor=".upcoming-event">
                                            <?php
                                                endwhile;
                                            endif;
                                            ?>

                                        </div>
                                        <div class="upcoming-event-image-controls-mobile">
                                            <div class="progress-bar">
                                                <div id="progressBar" class="progress"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="upcoming-event-bottom row">
                                        <div class="upcoming-event-info">
                                            <div class="row top between">
                                                <div class="upcoming-event-when col-lg-4 col-md-6">
                                                    <span><?php the_sub_field('when'); ?></span>

                                                    <?php if ($event_when_group) :
                                                        $event_month = $event_when_group['month'];
                                                        $event_starting_from = $event_when_group['starting_from'];
                                                        $event_ends_on = $event_when_group['ends_on'];
                                                    ?>
                                                        <h5><?php echo $event_month; ?></h5>
                                                        <p><?php echo $event_starting_from; ?> <?php echo $event_ends_on; ?></p>
                                                    <?php endif; ?>
                                                </div>
                                                <div class="upcoming-event-where col-lg-4 col-md-6">
                                                    <span><?php the_sub_field('where'); ?></span>
                                                    <?php if ($event_where_group) :
                                                        $event_location = $event_where_group['location'];
                                                        $event_state = $event_where_group['state']; ?>
                                                        <h5><?php echo $event_location; ?></h5>
                                                        <p><?php echo $event_state; ?></p>
                                                    <?php endif; ?>
                                                </div>
                                                <div class="upcoming-event-what col-lg-4 col-md-12">
                                                    <span><?php the_sub_field('what'); ?></span>
                                                    <p><?php echo $event_what; ?></p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="upcoming-event-cta row end middle" data-aos="fade-up" data-aos-anchor=".upcoming-event">
                                            <?php
                                            $cta_button = get_sub_field('cta_button');
                                            if ($cta_button) :
                                                $cta_button_url = $cta_button['url'];
                                                $cta_button_title = $cta_button['title'];
                                                $cta_button_target = $cta_button['target'] ? $cta_button['target'] : '_self';
                                            ?>
                                                <button class="button button-primary-dark" href="<?php echo esc_url($cta_button_url); ?>" target="<?php echo esc_attr($cta_button_target); ?>">
                                                    <span class="rollingText" data-text="<?php echo esc_html($cta_button_title); ?>">
                                                        <?php echo esc_html($cta_button_title); ?>
                                                    </span>
                                                </button>
                                            <?php endif; ?>
                                            <?php
                                            $view_event = get_sub_field('view_event');
                                            if ($view_event) :
                                                $view_event_url = $view_event['url'];
                                                $view_event_title = $view_event['title'];
                                                $view_event_target = $view_event['target'] ? $view_event['target'] : '_self';
                                            ?>
                                                <a class="link link-dark rollingText" data-text="<?php echo esc_html($view_event_title); ?>" href="<?php echo esc_url($view_event_url); ?>" target="<?php echo esc_attr($view_event_target); ?>">
                                                    <?php echo esc_html($view_event_title); ?>
                                                </a>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                                <div class="upcoming-event-slider col-lg-5 col-lg-offset-1">
                                    <div class="upcoming-event-slider-wrapper">
                                        <?php
                                        if (have_rows('images', $event->ID)) :
                                            while (have_rows('images', $event->ID)) : the_row();
                                                $image = get_sub_field('image');
                                        ?>
                                                <div class="upcoming-event-slider-item" style="background-image: url('<?php echo esc_url($image['url']); ?>')">
                                                </div>
                                        <?php
                                            endwhile;
                                        endif;
                                        ?>
                                    </div>
                                    <div class="upcoming-event-image-controls">
                                        <span id="imageSliderIndex" data-current="1" data-total="0">1/6</span>
                                        <div class="image-controls">
                                            <img id="leftArrow" src="<?php echo get_template_directory_uri() . '/resources/images/icon-control-left.svg'; ?>" alt="icon-arrow-left-small">
                                            <img id="rightArrow" src="<?php echo get_template_directory_uri() . '/resources/images/icon-control-right.svg'; ?>" alt="icon-arrow-left-small">
                                        </div>
                                    </div>
                                </div>
                        </section>

                <?php
                    endforeach;
                    wp_reset_postdata();
                endif;
                ?>

            <?php endif;  ?>

            <?php if (get_row_layout() == 'video_cta') :
                $video_cta = get_sub_field('image'); /* Change to video */
                $video_cta_mobile = get_sub_field('image_mobile');
                $icon_heart = get_template_directory_uri() . '/resources/images/icon-heart.svg';
            ?>
                <section data-snap-point class="scroll-to" id="videoCTA">
                    <div id="video-cta" class="video-cta video-background container-fluid" data-desktop-img="<?php echo esc_url($video_cta['url']); ?>" data-mobile-img="<?php echo esc_url($video_cta_mobile['url']); ?>">
                        <div class="video-cta-content row">
                            <div class="video-cta-content-wrapper col-lg-7 col-md-12">
                                <div class="video-cta-section-title">
                                    <div class="col-4">
                                        <img src="<?php echo $icon_heart; ?>" alt="icon-heart">
                                    </div>
                                    <div class="col-10">
                                        <?php the_sub_field('section_title'); ?>
                                    </div>
                                </div>
                                <div class="video-cta-title">
                                    <div class="col-lg-10 col-md-12">
                                        <?php the_sub_field('title'); ?>
                                    </div>
                                </div>
                                <div class="video-cta-subtitle">
                                    <div class="col-lg-6 col-md-12">
                                        <?php the_sub_field('subtitle'); ?>
                                    </div>
                                </div>
                                <div class="video-cta-cta-button">
                                    <div class="col-lg-4 col-md-12">
                                        <?php
                                        $cta_button = get_sub_field('cta_button');
                                        if ($cta_button) :
                                            $cta_button_url = $cta_button['url'];
                                            $cta_button_title = $cta_button['title'];
                                            $cta_button_target = $cta_button['target'] ? $cta_button['target'] : '_self';
                                        ?>
                                            <button class="button button-primary-light-grey" href="<?php echo esc_url($cta_button_url); ?>" target="<?php echo esc_attr($cta_button_target); ?>">
                                                <span class="rollingText" data-text="<?php echo esc_html($cta_button_title); ?>">
                                                    <?php echo esc_html($cta_button_title); ?>
                                                </span>
                                            </button>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            <?php endif; ?>

            <?php if (get_row_layout() == 'testimonials') : ?>
                <section data-snap-point class="scroll-to" id="testimonials">
                    <div class="testimonials container-fluid">
                        <div class="main-row row">
                            <div class="testimonials-title col-lg-4 col-md-12">
                                <?php $icon_testimonials = get_template_directory_uri() . '/resources/images/icon-testimonials.svg' ?>
                                <img src="<?php echo $icon_testimonials ?>" alt="icon-testimonials" />
                                <h5><?php the_sub_field('title'); ?></h5>
                            </div>
                            <div class="testimonials-main col-lg-8 col-md-12">
                                <div class="testimonial-wrapper">
                                    <div class="testimonial-slider">
                                        <?php if (have_rows('testimonial')) : ?>
                                            <?php while (have_rows('testimonial')) : the_row(); ?>
                                                <div class="testimonial-slide">
                                                    <div class="testimonial-icon">
                                                        <?php $icon_quotes = get_template_directory_uri() . '/resources/images/icon-quotes.svg' ?>
                                                        <img src="<?php echo $icon_quotes ?>" alt="icon-quotes" />
                                                    </div>
                                                    <div class="testimonial-text">
                                                        <?php the_sub_field('testimonial_text'); ?>
                                                    </div>
                                                    <div class="testimonial-bottom">
                                                        <div class="testimonial-image row">
                                                            <?php $image = get_sub_field('image'); ?>
                                                            <?php if ($image) : ?>
                                                                <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                                                            <?php endif; ?>
                                                            <div class="testimonial-name">
                                                                <h4 class="name">
                                                                    <?php the_sub_field('name'); ?>
                                                                </h4>
                                                                <h4 class="bottom-text">
                                                                    <?php the_sub_field('bottom_text'); ?>
                                                                </h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            <?php endwhile; ?>
                                        <?php endif; ?>
                                    </div>
                                    <div class="testimonial-pagination">
                                        <span id="testimonialSlideNumber" class="number"></span>
                                        <div class="controls">
                                            <img src="<?php echo $icon_control_left ?>" alt="icon_control_left" />
                                            <img src="<?php echo $icon_control_right ?>" alt="icon_control_right" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            <?php endif; ?>


            <?php if (get_row_layout() == "community") : ?>
                <section data-snap-point class="normal-scroll" id="community">
                    <div class="community">
                        <div class="mobile-top-panel">
                            <div class="title row center middle">
                                <h2><?php the_sub_field('big_text') ?></h2>
                            </div>
                            <div class="community-mobile-slider">
                                <div class="community-image-slider-mobile">
                                    <?php if (have_rows('images')) : ?>
                                        <?php while (have_rows('images')) : the_row(); ?>
                                            <?php $image = get_sub_field('image'); ?>
                                            <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
                                    <?php endwhile;
                                    endif; ?>
                                </div>
                                <div class="community-image-controls-mobile">
                                    <div class="progress-bar">
                                        <div class="progress-community"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mobile-bottom-panel">
                            <div class="row">
                                <div class="subtext">
                                    <h3><?php the_sub_field('subtext') ?></h3>
                                </div>
                            </div>
                            <div class="row">
                                <?php if (have_rows('page_links')) : ?>
                                    <div class="community-page-links">
                                        <?php while (have_rows('page_links')) : the_row(); ?>
                                            <?php $community_page_link = get_sub_field('page_link');
                                            $community_page_link_icon = get_template_directory_uri() . '/resources/images/icon-community-link-small.svg' ?>
                                            <a class="community-link" href="<?php echo esc_url($community_page_link['url']); ?>">
                                                <span class="rollingText" data-text="<?php echo esc_html($community_page_link['title']); ?>">
                                                    <?php echo esc_html($community_page_link['title']); ?>
                                                </span>
                                                <img src="<?php echo $community_page_link_icon; ?>" alt="icon-community-link">

                                            </a>
                                        <?php endwhile; ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                            <div class="row">
                                <div class="keep-scrolling">
                                    <?php $icon_arrow_down = get_template_directory_uri() . '/resources/images/icon-arrow-down.svg' ?>
                                    <img src="<?php echo $icon_arrow_down; ?>" alt="icon-arrow-down">
                                    <h4><?php the_sub_field('keep_scrolling') ?></h4>
                                </div>
                            </div>
                        </div>
                        <div class="container-scroller">
                            <div class="horizontal-content">
                                <div class="horizontal-item">
                                    <div class="big-text-container">
                                        <h2><?php the_sub_field('big_text') ?></h2>
                                        <div class="image-wrapper">
                                            <?php if (have_rows('images')) :
                                                while (have_rows('images')) : the_row(); ?>
                                                    <div class="community-image-on-text">
                                                        <?php $image = get_sub_field('image'); ?>
                                                        <img class="community-image" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
                                                    </div>
                                            <?php endwhile;
                                            endif; ?>
                                        </div>
                                    </div>
                                    <div class="mobile-top-panel container">
                                        <div class="row center middle">
                                            <h2><?php the_sub_field('big_text') ?></h2>
                                        </div>
                                        <div class="community-mobile-slider row">
                                            <div class="community-image-slider-mobile container">
                                                <?php if (have_rows('images')) :
                                                    while (have_rows('images')) : the_row(); ?>
                                                        <?php $image = get_sub_field('image');
                                                        ?>
                                                        <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
                                                <?php
                                                    endwhile;
                                                endif;
                                                ?>
                                            </div>
                                            <div class="community-image-controls-mobile">
                                                <div class="progress-bar">
                                                    <div id="progressBar" class="progressCommunity"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right-panel">
                                        <div class="left-side col-lg-3">
                                            <div class="subtext">
                                                <h3><?php the_sub_field('subtext') ?></h3>
                                            </div>
                                            <div class="keep-scrolling">
                                                <?php $icon_arrow_down = get_template_directory_uri() . '/resources/images/icon-arrow-down.svg' ?>
                                                <img src="<?php echo $icon_arrow_down; ?>" alt="icon-arrow-down">
                                                <h4><?php the_sub_field('keep_scrolling') ?></h4>
                                            </div>
                                        </div>
                                        <div class="right-side col-lg-offset-2 col-lg-7">
                                            <?php if (have_rows('page_links')) : ?>
                                                <div class="community-page-links">
                                                    <?php while (have_rows('page_links')) : the_row(); ?>
                                                        <?php $community_page_link = get_sub_field('page_link');
                                                        $comunity_page_link_icon = get_template_directory_uri() . '/resources/images/icon-community-link.svg' ?>
                                                        <a class="community-link" href="<?php echo esc_url($community_page_link['url']); ?>">
                                                            <span class="rollingText" data-text="<?php echo esc_html($community_page_link['title']); ?>">
                                                                <?php echo esc_html($community_page_link['title']); ?>
                                                            </span>
                                                            <svg width="74" height="76" viewBox="0 0 74 76" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path d="M10.1072 76L0 66.0339L43.8582 20.1134L51.9801 13.5901H0V0.18121L74 0L73.8195 74.4738L60.2824 74.2926L60.4629 22.1066L53.7849 30.2606L10.1072 76Z" fill="#181B17" />
                                                            </svg>

                                                        </a>
                                                    <?php endwhile; ?>
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </section>
            <?php endif; ?>

            <?php if (get_row_layout() == 'hotline') :
                $icon_phone = get_template_directory_uri() . '/resources/images/icon-phone.svg' ?>
                <section data-snap-point class="scroll-to" id="hotline">
                    <div class="hotline container-fluid">
                        <div class="top-row row">
                            <div class="col-lg-3 col-md-12">
                                <img src="<?php echo $icon_phone ?>" alt="icon-phone">
                                <p><?php the_sub_field('subtitle') ?></p>
                            </div>
                        </div>
                        <div class="bottom-row row between bottom">
                            <div class="col-lg-10 col-md-12 big-title">
                                <h2><?php the_sub_field('title') ?></h2>
                            </div>
                            <div class="col-lg-2 col-md-12">
                                <div class="row call-text">
                                    <p>
                                        <?php the_sub_field('call_text', false, false) ?>
                                    </p>
                                </div>
                                <div class="row available">
                                    <p><?php the_sub_field('available') ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            <?php endif; ?>


            <?php if (get_row_layout() == "fullbleed_image") :
                $secondary_hero_image = get_sub_field('hero_image');
            ?>
                <section id="fullbleedImage" class="fullbleed-image container-fluid" style="background-image: url('<?php echo esc_url($secondary_hero_image['url']); ?>');">
                    <div class="main-row row">

                        <div class="col-lg-2 col-md-12 section-title">
                            <?php $icon_plus = get_template_directory_uri() . '/resources/images/icon-plus.svg' ?>
                            <img src="<?php echo $icon_plus ?>" alt="icon-plus">
                            <h5><?php the_sub_field('section_title') ?></h5>
                        </div>

                        <div class="col-lg-6 col-lg-offset-2 col-md-12 main-content row">
                            <div class="big-title">
                                <h2><?php the_sub_field('title') ?></h2>
                                <?php
                                // Output the unordered list items
                                if (have_rows('unordered_list')) {
                                    echo '<ul class="unordered-list">';
                                    while (have_rows('unordered_list')) : the_row();
                                        $list_item = get_sub_field('list_item');
                                        if ($list_item) {
                                            echo '<li>' . esc_html($list_item) . '</li>';
                                        }
                                    endwhile;
                                    echo '</ul>';
                                }
                                ?>
                            </div>

                            <div class="cta-content center middle">
                                <?php
                                $cta_button = get_sub_field('cta_button');
                                if ($cta_button) {
                                    output_button($cta_button, 'button-primary-light');
                                }

                                // Output the links using the output_link function
                                if (have_rows('links')) {
                                    while (have_rows('links')) : the_row();
                                        $link = get_sub_field('link');
                                        if ($link) {
                                            output_link($link, 'link rollingText');
                                        }
                                    endwhile;
                                }
                                ?>
                            </div>
                        </div>
                    </div>
                </section>
            <?php endif; ?>

            <?php if (get_row_layout() == 'donations') :  ?>
                <section id="donations" class="donations-section container-fluid">
                    <?php if (have_rows('donation_row')) :
                        while (have_rows('donation_row')) : the_row();
                            $donate_title = get_sub_field('donate_title');
                            $donation_amount = get_sub_field('donation_amount');
                            $donation_description = get_sub_field('donation_description');
                    ?>
                            <a href="<?php echo esc_url($donate_title['url']); ?>" class="donation-row row center middle">
                                <h2 class="donate-title">
                                    <?php echo esc_html($donate_title['title']); ?>
                                    <svg class="donation-mobile-link" width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M3.27802 25L0 21.7217L14.2243 6.61624L16.8584 4.47043H0V0.0596087L24 0L23.9415 24.498L19.5511 24.4383L19.6096 7.2719L17.4438 9.95416L3.27802 25Z" fill="#1F2626" />
                                    </svg>
                                </h2>
                                <div class="donation-amount">$<?php echo esc_html($donation_amount); ?></div>
                                <h5 class="donation-description"><?php echo esc_html($donation_description); ?></h5>
                                <svg class="donation-desktop-link" width="74" height="76" viewBox="0 0 74 76" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.1072 76L0 66.0339L43.8582 20.1134L51.9801 13.5901H0V0.18121L74 0L73.8195 74.4738L60.2824 74.2926L60.4629 22.1066L53.7849 30.2606L10.1072 76Z" fill="#F9F8F3" />
                                </svg>
                            </a>
                    <?php
                        endwhile;
                    endif;
                    ?>
                </section>
            <?php endif; ?>

            <?php if (get_row_layout() == 'desktop_tabs') :  ?>
                <section id="desktop-tabs" class="tabs-section container-fluid">
                    <div class="tabs-container row start middle">
                        <?php if (have_rows('desktop_tab')) : ?>
                            <?php while (have_rows('desktop_tab')) : the_row(); ?>
                                <?php $tab_link = get_sub_field('tab_link'); ?>
                                <a href="<?php echo esc_url($tab_link['url']); ?>" class="tab-link<?php echo (is_page($tab_link['url']) ? ' active' : ''); ?>" target="<?php echo esc_attr($tab_link['target']); ?>">
                                    <?php echo esc_html($tab_link['title']); ?>
                                </a>
                            <?php endwhile; ?>
                        <?php endif; ?>
                    </div>
                </section>
            <?php endif; ?>


            <?php if (get_row_layout() == 'spotlight') :
                $image_position = get_sub_field('image_position');
                $spotlight_image = get_sub_field('spotlight_image');
                $icon_spotlight = get_template_directory_uri() . '/resources/images/icon-spotlight.svg' ?>
                <section class="spotlight container-fluid">
                    <div class="spotlight-row row stretch <?php echo $image_position == 'left' ? 'image-left' : ''; ?>">
                        <div class="col-lg-6 col-md-12 spotlight-main">
                            <div class="spotlight-section-title flex-start">
                                <img src="<?php echo $icon_spotlight ?>" alt="icon-spotlight">
                                <h5><?php the_sub_field('section_title'); ?></h5>
                            </div>
                            <div class="spotlight-main-text">
                                <h3><?php the_sub_field('spotlight_main_text'); ?></h3>
                            </div>
                            <div class="spotlight-copy">
                                <span><?php the_sub_field('spotlight_copy');  ?></span>
                            </div>
                            <div class="spotlight-cta">
                                <?php
                                $cta_button = get_sub_field('cta_button');
                                if ($cta_button) {
                                    output_button($cta_button, 'button-primary-dark');
                                }
                                ?>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 spotlight-image" style="background-image: url('<?php echo $spotlight_image['url'] ?>')">
                        </div>
                    </div>
                </section>
            <?php endif; ?>

            <?php if (get_row_layout() == 'contact_form') : ?>
                <section class="contact-form-section container-fluid">
                    <div class="row">
                        <div class="col-lg-5 col-md-12 contact-form-main">
                            <h2><?php the_sub_field('heading'); ?></h2>
                            <h3><?php the_sub_field('subheading'); ?></h3>
                            <?php if (have_rows('unordered_list')) : ?>
                                <ol class="list">
                                    <?php while (have_rows('unordered_list')) : the_row(); ?>
                                        <li><?php the_sub_field('list_item'); ?></li>
                                    <?php endwhile; ?>
                                </ol>
                            <?php endif; ?>
                            <?php if (have_rows('social_icons')) : ?>
                                <div class="social-images">
                                    <?php while (have_rows('social_icons')) : the_row();
                                        $social_image = get_sub_field('social_icon');
                                        $social_link = get_sub_field('social_link'); ?>
                                        <a href="<?php echo esc_url($social_link['url']) ?>">
                                            <img src="<?php echo $social_image['url']; ?>" alt="<?php echo $social_image['alt'] ?>">
                                        </a>
                                    <?php endwhile; ?>
                                </div>
                            <?php endif; ?>
                        </div>
                        <div class="col-lg-6 col-lg-offset-1 col-md-12 col-md-offset-0 contact-form-wrapper">
                            <?php echo do_shortcode(get_sub_field('shortcode')); ?>
                        </div>
                    </div>
                </section>
            <?php endif; ?>





    <?php
        endwhile;
    endif;
    ?>
</div>

<?php get_footer(); ?>