Untitled
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(); ?>