/home/bdqbpbxa/demo-subdomains/ecosphere.goodface.com.ua/wp-content/themes/ecosphere/about-us.php
<?php
/*
template name: about us
*/
get_header();
$current_lang = pll_current_language();
$srcset = get_template_directory_uri() . "/assets/images/lazyload.png";
?>
<?php
$main_container = get_field('main-container');
if ($main_container['title']) :
?>
<section class="about-company-start">
<div class="container animation -onload -fade">
<div
class="about-company-start__inner"
style="
background-image: url(<?php echo $main_container['background']['url']; ?>);
"
>
<?php if ($main_container['left-sticker']) : ?>
<div class="about-company-start__sticker-1 animation -onload -scale" data-delay="0.8s">
<img
src="<?php echo $main_container['left-sticker']['url']; ?>"
alt="<?php echo $main_container['left-sticker']['alt']; ?>"
/>
</div>
<?php
endif;
if ($main_container['right-sticker']) :
?>
<div class="about-company-start__sticker-2 animation -onload -scale" data-delay="0.9s">
<img
src="<?php echo $main_container['right-sticker']['url']; ?>"
alt="<?php echo $main_container['right-sticker']['alt']; ?>"
/>
</div>
<?php
endif;
?>
<div class="about-company-start__text">
<h1 class="title-1 mob-title-1 animation -onload -swim-top" data-delay="0.3s">
<?php echo $main_container['title']; ?>
</h1>
<?php if ($main_container['subtitle']) : ?>
<div class="text text-2 mob-text-2 animation -onload -swim-top" data-delay="0.4s">
<?php echo $main_container['subtitle']; ?>
</div>
<?php
endif;
?>
</div>
</div>
</div>
</section>
<?php
endif;
?>
<?php
$mission_container = get_field('mission-container');
if ($mission_container['title']) :
?>
<section class="our-mission">
<div class="container animation -swim-top">
<div class="our-mission__content-top">
<h2 class="title-2 mob-title-2">
<?php echo $mission_container['title']; ?>
</h2>
<?php
if ($mission_container['subtitle']) :
?>
<p class="text text-2 mob-text-2">
<?php echo $mission_container['subtitle']; ?>
</p>
<?php
endif;
?>
</div>
<?php
if ($mission_container['card-title']) :
?>
<div class="our-mission__content-bottom">
<p class="text text-1 mob-text-1 --extrabold">
<?php echo $mission_container['card-title']; ?>
</p>
<div class="our-mission__card-list">
<?php
foreach($mission_container['card-list'] as $item) :
if ($item['img'] && $item['title']) :
?>
<div class="our-mission__card">
<div class="img">
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $item['img']['url']; ?>" alt="<?php echo $item['img']['alt']; ?>">
</div>
<p class="text text-2 mob-text-2">
<?php echo $item['title']; ?>
</p>
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
<?php
endif;
?>
</div>
</section>
<?php
endif;
?>
<?php
$brands_container = get_field('brands-container');
if ($brands_container['title']) :
?>
<section class="brands-slider">
<div class="container animation -swim-top">
<div class="brands-slider__inner">
<div class="brands-slider__left">
<div class="brands-slider__description">
<h2 class="title-2 mob-title-2"><?php echo $brands_container['title']; ?></h2>
<?php
if ($brands_container['subtitle']) :
?>
<div class="text text-2 mob-text-2">
<p>
<?php echo $brands_container['subtitle']; ?>
</p>
</div>
<?php
endif;
?>
</div>
<?php
if ($brands_container['brand-list']) :
?>
<ul class="brands-slider__logos">
<?php
foreach($brands_container['brand-list'] as $item) :
$brand_logo_container = get_field('brand-container', $item);
$brand_slider = get_field('brand-slider', $item);
if ($brand_logo_container['logo']['color']) :
?>
<li class="brands-slider__logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 518 518">
<circle r="129.5" cx="259" cy="259" fill="none" stroke="#4CBE4F" stroke-width="259"></circle>
</svg>
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $brand_logo_container['logo']['color']['url']; ?>" alt="<?php echo $brand_logo_container['logo']['color']['alt']; ?>" />
</li>
<?php
endif;
endforeach;
?>
</ul>
<?php
endif;
?>
</div>
<div class="brands-slider__slider-container">
<div class="default-button swiper-button-prev"></div>
<div class="default-button swiper-button-next"></div>
<div class="swiper-pagination"></div>
<div class="brands-slider__slider swiper">
<div class="brands-slider__slider-inner swiper-wrapper">
<?php
foreach($brands_container['brand-list'] as $item) :
$brand_slider = get_field('brand-slider', $item);
if ($brand_slider['img']) :
?>
<div class="brands-slider__slide swiper-slide">
<div class="brands-slider__slide-preview">
<?php
if ($brand_slider['logo-sticker-need']) :
?>
<div>
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $brand_slider['logo']['url']; ?>" alt="<?php echo $brand_slider['logo']['alt']; ?>" />
</div>
<?php
endif;
?>
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $brand_slider['img']['url']; ?>" alt="<?php echo $brand_slider['img']['alt']; ?>" />
</div>
<p
class="
brands-slider__slide-title
text-1
mob-text-1
--extrabold
"
>
«<?php echo get_the_title($item); ?>»
</p>
<?php
$brand_permalink = get_field('brand-permalink', $item);
$link = '';
if ($brand_permalink['permalink_type'] == 'custom') {
$link = $brand_permalink['link'];
} elseif ($brand_permalink['permalink_type'] == 'default') {
$link = get_the_permalink($item);
} else {
$link = false;
}
if ($link) :
?>
<div class="button-container -center">
<a href="<?php echo $link; ?>"
class="default-button text-3 mob-text-3 -rectangular"
>
<?php
echo $brands_container['button-text'];
?>
</a>
</div>
<?php
endif;
?>
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
</div>
</div>
</div>
</section>
<?php
endif;
?>
<?php
$achivement_container = get_field('achivement-container');
if ($achivement_container['achievement-title']) :
?>
<section class="brand-achievements --about-company --dark-text">
<div
class="brand-achievements__wave-top"
style="background-color: #d0f087"
>
<svg class="svg-wave" xmlns="http://www.w3.org/2000/svg">
<clipPath
id="brand-achievements__wave-top"
clipPathUnits="objectBoundingBox"
>
<path
d="M0.042,0.149 L0,0.226 V1 H1 V0.968 V0.446 H0.958 C0.917,0.446,0.833,0.446,0.75,0.518 C0.667,0.595,0.583,0.744,0.5,0.631 C0.417,0.518,0.333,0.149,0.25,0.041 C0.167,-0.072,0.083,0.077,0.042,0.149"
></path>
</clipPath>
</svg>
</div>
<div
class="brand-achievements__inner"
style="background-color: #d0f087"
>
<div class="container animation -swim-top">
<h2 class="title title-2 mob-title-2"><?php echo $achivement_container['achievement-title']; ?></h2>
<?php
if ($achivement_container['add-title-point']) :
$achivement_header = $achivement_container['achivement-header'];
?>
<div class="brand-achievements__large-item">
<div class="brand-achievements__large-item-img">
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $achivement_header['icon']['url']; ?>" alt="<?php echo $achivement_header['icon']['alt']; ?>" />
</div>
<div class="brand-achievements__large-item-description">
<span class="--extrabold"><?php echo $achivement_header['title']; ?></span>
<p class="text-2 mob-text-2">
<?php echo $achivement_header['subtitle']; ?>
</p>
</div>
<div class="brand-achievements__large-item-line brand-achievements__animation">
<div class="brand-achievements__animation-arrow"></div>
<svg class="-pc" width="227" height="251" viewBox="0 0 227 251" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M209 2C282.5 160 61.5 234.499 2 249" stroke="#0B4129" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="16 20"/>
</svg>
<svg class="-mob" width="41" height="63" viewBox="0 0 41 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1.5C48 29.5 53 41.5 1.5 61" stroke="#0B4129" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 12"/>
</svg>
</div>
</div>
<?php
endif;
?>
<ul class="brand-achievements__list">
<?php
$achivement_1 = $achivement_container['achivement-1'];
$achivement_2 = $achivement_container['achivement-2'];
$achivement_3 = $achivement_container['achivement-3'];
$achivement_4 = $achivement_container['achivement-4'];
$achivement_5 = $achivement_container['achivement-5'];
$achivement_6 = $achivement_container['achivement-6'];
$achivement_7 = $achivement_container['achivement-7'];
if ($achivement_1['title']) :
?>
<li class="brand-achievements__item">
<div class="brand-achievements__item-img">
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $achivement_1['icon']['url']; ?>" alt="<?php echo $achivement_1['icon']['alt']; ?>" />
</div>
<div class="brand-achievements__item-description">
<span class="--extrabold"><?php echo $achivement_1['title']; ?></span>
<p class="text-2 mob-text-2">
<?php echo $achivement_1['subtitle']; ?>
</p>
</div>
<div class="brand-achievements__item-line brand-achievements__animation">
<div class="brand-achievements__animation-arrow"></div>
<svg class="-pc" width="485" height="233" viewBox="0 0 485 233" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.5 2C-88.5 173 279 272 482.5 213" stroke="#0B4129" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="16 20"/>
</svg>
<svg class="-mob" width="35" height="102" viewBox="0 0 35 102" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1.50024C-9 42.5 4 80.5 33 100.5" stroke="#0B4129" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 12"/>
</svg>
</div>
</li>
<?php
endif;
if ($achivement_2['title']) :
?>
<li class="brand-achievements__item">
<div class="brand-achievements__item-img">
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $achivement_2['icon']['url']; ?>" alt="<?php echo $achivement_2['icon']['alt']; ?>" />
</div>
<div class="brand-achievements__item-description">
<span class="--extrabold"><?php echo $achivement_2['title']; ?></span>
<p class="text-2 mob-text-2">
<?php echo $achivement_2['subtitle']; ?>
</p>
</div>
<div class="brand-achievements__item-line brand-achievements__animation">
<div class="brand-achievements__animation-arrow"></div>
<svg class="-pc" width="404" height="315" viewBox="0 0 404 315" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M383.5 2.49975C481 208.5 156.5 337.5 2.50036 308" stroke="#0B4129" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="16 20"/>
</svg>
<svg class="-mob" width="112" height="69" viewBox="0 0 112 69" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M103.5 1.50014C135.5 48.5 48 33.5 2.49836 66.9999" stroke="#0B4129" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 12"/>
</svg>
</div>
</li>
<?php
endif;
if ($achivement_3['title']) :
?>
<li class="brand-achievements__item">
<div class="brand-achievements__item-img">
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $achivement_3['icon']['url']; ?>" alt="<?php echo $achivement_3['icon']['alt']; ?>" />
</div>
<div class="brand-achievements__item-description">
<span class="--extrabold"><?php echo $achivement_3['title']; ?></span>
<p class="text-2 mob-text-2">
<?php echo $achivement_3['subtitle']; ?>
</p>
</div>
<div class="brand-achievements__item-line brand-achievements__animation">
<div class="brand-achievements__animation-arrow"></div>
<svg class="-pc" width="509" height="279" viewBox="0 0 509 279" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.4982 2.99809C-82.5 214 267.5 325 507 256.5" stroke="#0B4129" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="16 20"/>
</svg>
<svg class="-mob" width="35" height="103" viewBox="0 0 35 103" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 2.00024C-11.5 50.5 9.5 82 33.5002 101.499" stroke="#0B4129" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 12"/>
</svg>
</div>
</li>
<?php
endif;
if ($achivement_4['title']) :
?>
<li class="brand-achievements__item">
<div class="brand-achievements__item-img">
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $achivement_4['icon']['url']; ?>" alt="<?php echo $achivement_4['icon']['alt']; ?>" />
</div>
<div class="brand-achievements__item-description">
<span class="--extrabold"><?php echo $achivement_4['title']; ?></span>
<p class="text-2 mob-text-2">
<?php echo $achivement_4['subtitle']; ?>
</p>
</div>
<div class="brand-achievements__item-line brand-achievements__animation">
<div class="brand-achievements__animation-arrow"></div>
<svg class="-pc" width="497" height="91" viewBox="0 0 497 91" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M495 2.00165C447 189 107.5 -75.0004 2.00022 88.0029" stroke="#0B4129" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="16 20"/>
</svg>
<svg class="-mob" width="100" height="59" viewBox="0 0 100 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M98.4995 2C85.5 69.5 44 19 1.99951 57.0001" stroke="#0B4129" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 12"/>
</svg>
</div>
</li>
<?php
endif;
if ($achivement_5['title']) :
?>
<li class="brand-achievements__item">
<div class="brand-achievements__item-img">
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $achivement_5['icon']['url']; ?>" alt="<?php echo $achivement_5['icon']['alt']; ?>" />
</div>
<div class="brand-achievements__item-description">
<span class="--extrabold"><?php echo $achivement_5['title']; ?></span>
<p class="text-2 mob-text-2">
<?php echo $achivement_5['subtitle']; ?>
</p>
</div>
<div class="brand-achievements__item-line brand-achievements__animation">
<div class="brand-achievements__animation-arrow"></div>
<svg class="-pc" width="366" height="189" viewBox="0 0 366 189" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.5003 2.49987C61 159 179.5 231.5 364.001 156.5" stroke="#0B4129" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="16 20"/>
</svg>
<svg class="-mob" width="110" height="139" viewBox="0 0 110 139" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 1.99976C-12.5 75 61.5 153 108 134" stroke="#0B4129" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 12"/>
</svg>
</div>
</li>
<?php
endif;
if ($achivement_6['title']) :
?>
<li class="brand-achievements__item">
<div class="brand-achievements__item-img">
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $achivement_6['icon']['url']; ?>" alt="<?php echo $achivement_6['icon']['alt']; ?>" />
</div>
<div class="brand-achievements__item-description">
<span class="--extrabold"><?php echo $achivement_6['title']; ?></span>
<p class="text-2 mob-text-2">
<?php echo $achivement_6['subtitle']; ?>
</p>
</div>
<div class="brand-achievements__item-line brand-achievements__animation">
<div class="brand-achievements__animation-arrow"></div>
<svg class="-pc" width="310" height="236" viewBox="0 0 310 236" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M307.5 2.49993C280.5 185.5 106 50.5 2.50027 233.999" stroke="#0B4129" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="16 20"/>
</svg>
<svg class="-mob" width="53" height="58" viewBox="0 0 53 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.5 2C51.5 38 19.5 10.5 2.00005 56.5002" stroke="#0B4129" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="8 12"/>
</svg>
</div>
</li>
<?php
endif;
if ($achivement_7['title']) :
?>
<li class="brand-achievements__item <?php if ($achivement_7['icon_or_img'] == 'img') echo '-large-img' ?>">
<div class="brand-achievements__item-img">
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $achivement_7['icon']['url']; ?>" alt="<?php echo $achivement_7['icon']['alt']; ?>" />
</div>
<div class="brand-achievements__item-description -flex">
<span class="--extrabold"><?php echo $achivement_7['title']; ?></span>
<p class="text-2 mob-text-2">
<?php echo $achivement_7['subtitle']; ?>
</p>
</div>
</li>
<?php
endif;
?>
</ul>
</div>
</div>
<div
class="brand-achievements__wave-bottom"
style="background-color: #d0f087"
>
<svg class="svg-wave" xmlns="http://www.w3.org/2000/svg">
<clipPath
id="brand-achievements__wave-bottom"
clipPathUnits="objectBoundingBox"
>
<path
d="M0.958,0.748 L1,0.65 V0 H0 V0.945 C0.029,0.824,0.119,0.542,0.25,0.382 C0.333,0.26,0.417,0.307,0.5,0.477 C0.583,0.65,0.667,0.942,0.75,0.993 C0.833,1,0.917,0.843,0.958,0.748"
></path>
</clipPath>
</svg>
</div>
</section>
<?php
endif;
?>
<?php
$company_history_container = get_field('company-history-container');
if ($company_history_container['title']) :
?>
<div class="company-history">
<div class="container animation -swim-top">
<h2 class="company-history__title title-2 mob-title-2">
<?php echo $company_history_container['title']; ?>
</h2>
<div class="company-history__slider-container">
<img
class="company-history__line --lazyload"
srcset="<?php echo $srcset; ?>"
src="<?php echo get_template_directory_uri(); ?>/assets/images/elements/history-slider-line.svg"
alt="slider line"
/>
<div class="default-button swiper-button-prev"></div>
<div class="default-button swiper-button-next"></div>
<div class="swiper-pagination"></div>
<div class="company-history__slider swiper">
<div class="company-history__slider-inner swiper-wrapper">
<?php
foreach($company_history_container['date-list'] as $item) :
?>
<div class="company-history__slide swiper-slide">
<div class="company-history__slide-img">
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo $item['img']['url']; ?>" alt="<?php echo $item['img']['alt']; ?>" />
</div>
<div class="company-history__slide-description">
<span
class="company-history__slide-date title-3 mob-text-1"
style="background-color: <?php echo $item['color']; ?>"
>
<?php echo $item['date']; if ($current_lang == 'uk') echo ' рік' ?>
</span>
<div class="text text-2 mob-text-2">
<p>
<?php echo $item['text']; ?>
</p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
<?php
endif;
?>
<?php
$finance_container = get_field('finance-container');
if ($finance_container['title']) :
?>
<div class="finance-docs">
<div class="finance-docs__wave-top --noise-bg">
<svg class="svg-wave" xmlns="http://www.w3.org/2000/svg">
<clipPath
id="finance-docs__wave-top"
clipPathUnits="objectBoundingBox"
>
<path
d="M0.958,0.141 L1,0.072 V1 H0 V0.214 L0.042,0.141 C0.083,0.072,0.167,-0.074,0.25,0.045 C0.333,0.164,0.417,0.477,0.5,0.596 C0.583,0.715,0.667,0.641,0.75,0.499 L0.75,0.499 C0.833,0.356,0.917,0.214,0.958,0.141"
></path>
</clipPath>
</svg>
</div>
<div class="finance-docs__inner --noise-bg">
<div class="container animation -swim-top">
<h2 class="title-2 mob-title-2"><?php echo $finance_container['title']; ?></h2>
<ul class="finance-docs__list default-links">
<?php
foreach ($finance_container['finance-list'] as $item) :
$file_arr = getFile($item['file']);
if ($file_arr['displayed']) :
?>
<li class="finance-docs__item">
<a href="<?php echo $file_arr['url']; ?>" target="_blank">
<div class="finance-docs__item-icon">
<img class="--lazyload" srcset="<?php echo $srcset; ?>" src="<?php echo get_template_directory_uri();?>/assets/images/icons/document.svg" alt="document icon" />
</div>
<div class="finance-docs__item-info">
<h3 class="title text-1 mob-text-1 --extrabold">
<?php echo $item['title']; ?>
</h3>
<span class="text text-3 mob-text-3 --lowercase">.<?php echo $file_arr['filetype'];?>, <?php echo $file_arr['filesize'];?></span>
</div>
</a>
</li>
<?php
endif;
endforeach;
?>
</ul>
</div>
</div>
<div class="finance-docs__wave-bottom --noise-bg">
<svg class="svg-wave" xmlns="http://www.w3.org/2000/svg">
<clipPath
id="finance-docs__wave-bottom"
clipPathUnits="objectBoundingBox"
>
<path
d="M0.042,0.93 L0,1 V0 H1 V0.715 L0.958,0.788 C0.917,0.857,0.833,1,0.75,0.884 C0.667,0.764,0.583,0.523,0.5,0.404 C0.418,0.286,0.335,0.427,0.253,0.568 L0.25,0.573 L0.25,0.573 C0.167,0.715,0.083,0.858,0.042,0.93"
></path>
</clipPath>
</svg>
</div>
</div>
<?php
endif;
?>
<?php
get_template_part('template-parts/sertificates');
?>
<?php
get_footer();
?>