/home/bdqbpbxa/rc-subdomains/optoman-rc.goodface.com.ua/wp-content/themes/optoman/front-page.php
<?php
// Template name: Home page

get_header();

$template_directory = get_template_directory_uri();
$srcset = "srcset='{$template_directory}/assets/images/lazyload.png'";
?>

    <main>
        <?php $main = get_field('main'); ?>
        <section class="hero -homepage" data-animate-group="list">
            <div class="container-big">
                <div class="hero__wrapper">
                    <div class="hero-content">
                        <h1 class="title title-1" data-animate="word" data-index="1">
                            <?php echo $main['title']; ?>
                        </h1>
                        <?php
                        if ($main['subtitle']) :
                            ?>
                            <p class="subtitle body-1" data-animate="swim-top" data-index="2">
                                <?php echo $main['subtitle']; ?>
                            </p>
                        <?php
                        endif;
                        ?>
                        <div class="buttons" data-animate="swim-top" data-index="3">
                            <?php if (!empty($main['buttons'])) :
                                foreach ($main['buttons'] as $button) :?>
                                    <?php echo get_button_group_field($button['button']); ?>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="hero-media">
                        <img class="-lazyload" <?php echo $srcset; ?>
                             src="<?php echo $main["image"]['url']; ?>"
                             alt="<?php echo $main["image"]['alt']; ?>" data-animate="swim-top" data-index="4">
                    </div>
                </div>
            </div>
        </section>


        <?php $recommends = get_field('recommends'); ?>
        <section class="recommends" data-animate-group="list">
            <div class="container">
                <h2 class="title title-2" data-animate="word"><?php echo esc_html($recommends['title']); ?></h2>
                <div class="recommends-swiper-container">
                    <div class="recommends-swiper swiper-container" data-animate="swim-top">
                        <div class="swiper-wrapper">
                            <?php

                            if (!empty($recommends['recommends_items'])) :
                                foreach ($recommends['recommends_items'] as $item) : ?>
                                    <div class="swiper-slide">
                                        <a href="<?php echo esc_url($item['link']); ?>" class="recommends-card">
                                            <div class="recommends-card-img">
                                                <?php if ($item['image']) : ?>
                                                    <img class="-lazyload"
                                                         <?php echo $srcset; ?>
                                                         src="<?php echo esc_url($item['image']['url']); ?>"
                                                         alt="<?php echo esc_attr($item['image']['alt']); ?>">
                                                <?php endif; ?>
                                            </div>
                                            <div class="recommends-card-content">
                                                <h3 class="recommends-card-title body-2"><?php echo esc_html($item['title']); ?></h3>
                                            </div>
                                        </a>
                                    </div>
                                <?php endforeach;
                            endif; ?>

                        </div>
                        <div class="swiper-navigation">
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="swiper-navigation">
                        <div class="swiper-button-prev slider-btn -green"></div>
                        <div class="swiper-button-next slider-btn -green"></div>
                    </div>
                </div>
            </div>
        </section>

        <?php $features = get_field('features'); ?>

        <section class="features">
            <div class="container-big">
                <video class="features-video -lazyload"
                       poster="<?php echo $features['video']['poster']['url']; ?>"
                       autoplay loop muted playsinline
                       data-src="<?php echo $features['video']['video']['url']; ?>"
                       data-start-position="5"
                       loading="lazy">
                </video>
            </div>
            <?php if (!empty($features['features_items'])) : ?>
                <div class="container">
                    <div class="features__wrapper">
                        <?php foreach ($features['features_items'] as $feature) : ?>
                            <div class="features-card" data-animate="swim-top">
                                <div class="icon --bg-secondary-color">
                                    <img class="-lazyload"
                                         <?php echo $srcset; ?>
                                         src="<?php echo $feature['icon']['url']; ?>"
                                         alt="<?php echo $feature['icon']['alt']; ?>">
                                </div>
                                <p class="title title-5"><?php echo $feature['title']; ?></p>
                                <p class="description body-3"><?php echo $feature['description']; ?></p>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php endif; ?>

        </section>


        <?php $about = get_field('about'); ?>

        <section class="about-home" data-animate-group="list">
            <div class="container-big">
                <div class="about-home__wrapper">
                    <div class="image --bg-secondary-color">
                        <img class="-lazyload"
                            <?php echo $srcset; ?>
                             src="<?php echo $about['image']['url']; ?>" alt="<?php echo $about['image']['alt']; ?>"
                             data-animate="swim-top">
                    </div>
                    <div class="container about-home-content">
                        <p class="title title-4" data-animate="swim-top"><?php echo $about['title']; ?></p>
                        <p class="description body-2" data-animate="swim-top"><?php echo $about['description']; ?></p>
                        <div class="buttons" data-animate="swim-top">
                            <?php if (!empty($about['buttons'])) :
                                foreach ($about['buttons'] as $button) :?>
                                    <?php echo get_button_group_field($button['button']); ?>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <?php
        $reviews = get_field('reviews');
        $reviews_mod = $reviews['reviews_mod'];
        $review_items = $reviews['review_items'];

        set_query_var('reviews_mod', $reviews_mod);
        set_query_var('review_items', $review_items);
        get_template_part('templates/reviews');
        ?>


        <?php get_template_part('templates/event-calendar') ?>

        <?php $superhero = get_field('superhero'); ?>

        <section class="superhero-home">
            <div class="container-big">
                <h2 class="title title-2" data-animate="word"><?php echo $superhero['title']; ?></h2>
                <div class="image" data-animate="fade">
                    <img class="-lazyload"
                    <?php echo $srcset; ?> src="<?php echo $superhero['image']['url']; ?>"
                         alt="<?php echo $superhero['image']['alt']; ?>">
                </div>
                <?php echo get_button_group_field($superhero['button']); ?>
            </div>
        </section>

        <?php get_template_part('templates/request') ?>

        <?php get_template_part('templates/get-in-touch') ?>


    </main>

<?php
get_footer();
?>