Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
51 kB
2
Indexable
Never
<?php /* Template Name: Home Page Template */ get_header(); ?>

<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 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 container-fluid">
                            <div class="row center middle">
                                <div class="col-lg-12" data-aos="fade-up" data-aos-anchor=".hero">
                                    <div class="desktop-image">
                                        <img class="responsive-img" src="<?php echo esc_url($title_image['url']); ?>" alt="<?php echo esc_url($title_image['alt']); ?>">
                                    </div>
                                    <div class="mobile-image">
                                        <img class="responsive-img" src="<?php echo esc_url($title_image_mobile['url']); ?>" alt="<?php echo esc_url($title_image_mobile['alt']); ?>">
                                    </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 margin-right-19">
                                    <div class="hero-cta-content row end middle">
                                        <?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" 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
                                        $learn_more_link = get_sub_field('learn_more_link');
                                        if ($learn_more_link) :
                                            $learn_more_link_url = $learn_more_link['url'];
                                            $learn_more_link_title = $learn_more_link['title'];
                                            $learn_more_link_target = $learn_more_link['target'] ? $learn_more_link['target'] : '_self';
                                        ?>
                                            <a class="learn-more rollingText" data-text="<?php echo esc_html($learn_more_link_title); ?>" href="<?php echo esc_url($learn_more_link_url); ?>" target="<?php echo esc_attr($learn_more_link_target); ?>">
                                                <?php echo esc_html($learn_more_link_title); ?>
                                            </a>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

            <?php endif; ?>

            <?php
            if (get_row_layout() == 'get_involved') :
                $icon_rectangle = get_template_directory_uri() . '/resources/images/icon-rectangle.svg'
            ?>
                <section class="scroll-to" id="getInvolved">
                    <div class="get-involved container-fluid">
                        <div class="top-row row between bottom">
                            <div class="col-4" data-aos="fade-up">
                                <h2 class="get-involved-title">
                                    <?php the_sub_field("title"); ?>
                                </h2>
                            </div>
                            <div class="col-4" data-aos="fade-up" data-aos-delay="1400">
                                <div class="row end">
                                    <h4 class="get-involved-subtitle">
                                        <?php the_sub_field('subtitle'); ?>
                                    </h4>
                                    <img src="<?php echo $icon_rectangle; ?>" alt="icon-rectangle">
                                </div>

                            </div>
                        </div>
                        <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() == 'big_body_cta') : ?>
                <section class="scroll-to" id="bigBodyText">
                    <div class="big-body-text container-fluid">
                        <div class="row text-content">
                            <div class="col center middle">
                                <?php the_sub_field('big_body_text_field') ?>
                            </div>
                        </div>
                        <div class="row start">
                            <div class="big-body-text-cta col">
                                <?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
                                $learn_more_link = get_sub_field('learn_more_link');
                                if ($learn_more_link) :
                                    $learn_more_link_url = $learn_more_link['url'];
                                    $learn_more_link_title = $learn_more_link['title'];
                                    $learn_more_link_target = $learn_more_link['target'] ? $learn_more_link['target'] : '_self';
                                ?>
                                    <a class="link link-dark rollingText" data-text="<?php echo esc_html($learn_more_link_title); ?>" href="<?php echo esc_url($learn_more_link_url); ?>" target="<?php echo esc_attr($learn_more_link_target); ?>">
                                        <?php echo esc_html($learn_more_link_title); ?>
                                    </a>
                                <?php endif; ?>

                            </div>
                        </div>

                    </div>
                </section>

            <?php endif; ?>

            <?php if (get_row_layout() == 'photo_slider') : ?>
                <section class="scroll-to" id="photoSlider">
                    <div class="photo-slider container-fluid">
                        <div class="photo-slider-top-row row around">
                            <div class="col-4" data-aos="fade-up">
                                <h3 class="photo-slider-title">
                                    <?php the_sub_field('title') ?>
                                </h3>
                            </div>
                            <div class="col-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 container-fluid">
                                <?php if (have_rows('image_slider')) :
                                    $base_delay = 750;
                                    $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 class="scroll-to upcoming-event container-fluid" id="upcomingEvent">
                            <div class="row stretch">
                                <div class="col-lg-6 upcoming-event-main">
                                    <div class="top-row row">
                                        <div class="upcoming-event-subtitle container">
                                            <div class="row" data-aos="fade-up">
                                                <div class="col">
                                                    <img src="<?php echo $icon_event ?>" alt="icon-event">
                                                </div>
                                                <div class="col">
                                                    <h5>
                                                        <?php the_sub_field('subtitle'); ?>
                                                    </h5>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="upcoming-event-title row">
                                            <div class="col" data-aos="fade-up" data-aos-duration="1600">
                                                <h2>
                                                    <?php echo get_the_title($event->ID); ?>
                                                </h2>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="upcoming-event-mobile-slider row">
                                        <div class="upcoming-event-image-slider-mobile container">
                                            <?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 container-fluid" data-aos="fade-up" data-aos-duration="1600" data-aos-anchor=".upcoming-event">
                                            <div class="upcoming-event-time-place row">
                                                <div class="upcoming-event-when col-lg-2 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'];
                                                    ?>
                                                        <p><?php echo $event_month; ?></p>
                                                        <p><?php echo $event_starting_from; ?> - <?php echo $event_ends_on; ?></p>
                                                    <?php endif; ?>
                                                </div>
                                                <div class="upcoming-event-where col-lg-2 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']; ?>
                                                        <p><?php echo $event_location; ?>,</p>
                                                        <p><?php echo $event_state; ?></p>
                                                    <?php endif; ?>
                                                </div>
                                                <div class="upcoming-event-what col-lg">
                                                    <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 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 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 container">
                                        <?php if (have_rows('testimonial')) : ?>
                                            <?php while (have_rows('testimonial')) : the_row(); ?>
                                                <div class="testimonial-slide container">
                                                    <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 row">
                                                        <?php the_sub_field('testimonial_text'); ?>
                                                    </div>
                                                    <div class="testimonial-bottom container">
                                                        <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 class="scroll-to" id="community">
                    <div class="community">
                        <div class="mobile-top-panel container">
                            <div class="title row center middle">
                                <h2><?php the_sub_field('big_text') ?></h2>
                            </div>
                            <div class="community-mobile-slider row">
                                <?php if (have_rows('images')) : ?>
                                    <div class="community-image-slider-mobile-container">
                                        <?php while (have_rows('images')) : the_row(); ?>
                                            <?php $image = get_sub_field('image');
                                            ?>
                                            <img class="responsive-img" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
                                        <?php
                                        endwhile; ?>
                                    </div>
                                <?php
                                endif;
                                ?>
                                <div class="community-image-controls-mobile">
                                    <div class="progress-bar">
                                        <div id="progressBar" class="progress-community"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mobile-bottom-panel container">
                            <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.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 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() == "secondary_hero") :
                $secondary_hero_image = get_sub_field('hero_image') ?>
                <section class="scroll-to" id="secondaryHero">
                    <div class="secondary-hero container-fluid" style="background-image: url('<?php echo esc_url($secondary_hero_image['url']); ?>');" id="heroImage">
                        <script>
                            window.addEventListener('load', function() {
                                // Get the hero image element
                                const heroImage = document.getElementById('heroImage');

                                // Get the aspect ratio of the image
                                const imageWidth = <?php echo $secondary_hero_image['width']; ?>;
                                const imageHeight = <?php echo $secondary_hero_image['height']; ?>;
                                const aspectRatio = imageWidth / imageHeight;

                                // Calculate the height based on the width of the container and the image's aspect ratio
                                function setHeroHeight() {
                                    const containerWidth = heroImage.offsetWidth;
                                    const newHeight = containerWidth / aspectRatio;
                                    heroImage.style.height = newHeight + 'px';
                                }

                                // Call the function initially and whenever the window is resized
                                setHeroHeight();
                                window.addEventListener('resize', setHeroHeight);
                            });
                        </script>
                        <div class="main-row row">
                            <div class="col-lg-2 col-md-12 section-title">
                                <div class="row">
                                    <?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>

                            <div class="row">
                                <div class="col-lg-6 col-lg-offset-2 col-md-12 main-content">
                                    <div class="row">
                                        <div class="big-title">
                                            <h3>
                                                <?php the_sub_field('title') ?>
                                            </h3>
                                        </div>
                                        <div class="cta-content row center middle">
                                            <?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" 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
                                            $ways_to_give_link = get_sub_field('ways_to_give_link');
                                            if ($ways_to_give_link) :
                                                $ways_to_give_link_url = $ways_to_give_link['url'];
                                                $ways_to_give_link_title = $ways_to_give_link['title'];
                                                $ways_to_give_link_target = $ways_to_give_link['target'] ? $ways_to_give_link['target'] : '_self';
                                            ?>

                                                <a class="ways-to-give rollingText" data-text="<?php echo esc_html($ways_to_give_link_title); ?>" href="<?php echo esc_url($ways_to_give_link_url); ?>" target="<?php echo esc_attr($ways_to_give_link_target); ?>">
                                                    <?php echo esc_html($ways_to_give_link_title); ?>
                                                </a>


                                            <?php endif; ?>
                                            <?php
                                            $volunteer_link = get_sub_field('volunteer_link');
                                            if ($volunteer_link) :
                                                $volunteer_link_url = $volunteer_link['url'];
                                                $volunteer_link_title = $volunteer_link['title'];
                                                $volunteer_link_target = $volunteer_link['target'] ? $volunteer_link['target'] : '_self';
                                            ?>

                                                <a class="volunteer rollingText" data-text="<?php echo esc_html($volunteer_link_title); ?>" href="<?php echo esc_url($volunteer_link_url); ?>" target="<?php echo esc_attr($volunteer_link_target); ?>">
                                                    <?php echo esc_html($volunteer_link_title); ?>
                                                </a>


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



                        </div>

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

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

<?php get_footer(); ?>