File: /var/www/stg-everycred.com/wp-content/themes/everycred/front-page.php
<?php
/**
* The template for displaying home page
*
* @link https://codex.wordpress.org/Creating_an_Error_404_Page
*
* @package WordPress
* @subpackage Twenty_Twenty_One
* @since Twenty Twenty-One 1.0
*/
get_header(); ?>
<!-- banner section -->
<?php
$banner_tagline = get_field('banner_tagline');
$banner_heading = get_field('banner_heading');
$banner_sub_heading = get_field('banner_sub_heading');
$banner_button = get_field('banner_button');
$banner_image = get_field('banner_image');
if ($banner_image) {
?>
<div class="main-content">
<section class="banner-section bg-black py-120 pb-lg-5">
<div class="container">
<div class="row align-items-center flex-column-reverse flex-md-row">
<!-- Text column -->
<div class="col-12 col-md-6 text-center text-md-start hero-text-col d-flex flex-column justify-content-center">
<div class="font-16 mb-5 text-medium"><?php echo $banner_tagline; ?></div>
<?php if ($banner_heading) { ?>
<h1 class="font-52 text-medium"><?php echo $banner_heading; ?></h1>
<?php } ?>
<?php if ($banner_sub_heading) { ?>
<h3 class="font-20 my-5"><?php echo $banner_sub_heading; ?></h3>
<?php } ?>
<?php if ($banner_button) { ?>
<a href="<?php echo $banner_button['url']; ?>" class="px-4 font-18 text-medium talk-btn white-btn d-flex align-items-center justify-content-center mx-auto mx-md-0">
<?php echo $banner_button['title']; ?>
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="margin-left:8px;flex-shrink:0;">
<path d="M9.31344 11.94L8.12544 10.752L12.0254 6.84H0.733438V5.16H12.0254L8.12544 1.248L9.31344 0.0599999L15.2654 6L9.31344 11.94Z" fill="#0F1419" />
</svg>
</a>
<?php } ?>
</div>
<!-- Image column -->
<?php if ($banner_image) { ?>
<div class="col-12 col-md-6 text-center hero-img-col d-flex flex-column justify-content-center">
<div class="banner-img-wrap">
<?php
echo wp_get_attachment_image($banner_image['ID'], 'full', false, array(
'class' => 'banner-img',
'fetchpriority' => 'high',
'loading' => 'eager',
'decoding' => 'sync',
'sizes' => '(max-width: 767px) 400px, 50vw',
'width' => '728',
'height' => '728',
));
?>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<?php } ?>
<?php
$client_logos = get_field('client_logos');
$client_section_title = get_field('client_section_title');
$tag = get_field('client_choose_heading');
if ($client_logos) {
?>
<section class="client-logos py-120">
<div data-aos="fade-up" data-aos-duration="300">
<div class="container">
<?php if ($client_section_title) { ?>
<div class="trusted-title">
<<?php echo esc_html($tag); ?> class="font-18 text-medium text-black text-center mb-5">
<?php echo esc_html($client_section_title); ?>
</<?php echo esc_html($tag); ?>>
</div>
<?php } ?>
<div class="logos d-flex flex-wrap justify-content-center">
<?php foreach ($client_logos as $client_logo) {
$add_client_logo = $client_logo['add_client_logo'];
?>
<div class="logo-box">
<?php
$cw = !empty($add_client_logo['width']) ? esc_attr($add_client_logo['width']) : '200';
$ch = !empty($add_client_logo['height']) ? esc_attr($add_client_logo['height']) : '80';
?>
<img src="<?php echo $add_client_logo['url']; ?>" alt="<?php echo $add_client_logo['alt']; ?>" width="<?php echo $cw; ?>" height="<?php echo $ch; ?>" style="width: 100%; height: auto;" loading="lazy" />
</div>
<?php } ?>
</div>
</div>
</div>
</section>
<?php } ?>
<?php
$what_choose_heading = get_field('what_choose_heading');
$heading_everycred = get_field('heading_everycred');
$everycred_content = get_field('everycred_content');
$button_everycred = get_field('button_everycred');
if ($heading_everycred || $everycred_content || $button_everycred) {
?>
<section class="about-everycred bg-white position-relative py-120">
<div data-aos="fade-up" data-aos-duration="300">
<div class="container">
<div class="about-detail mx-auto text-center">
<?php if ($heading_everycred) { ?>
<<?php echo esc_html($what_choose_heading); ?> class="font-42 text-medium text-black"><?php echo $heading_everycred; ?></<?php echo esc_html($what_choose_heading); ?>>
<?php }
if ($everycred_content) { ?>
<div class="font-18 text-black text-justify text-lg-center pt-5 description">
<?php echo $everycred_content; ?></div>
<?php }
if ($button_everycred) { ?>
<a href="<?php echo $button_everycred['url']; ?>" class="font-18 text-medium blue-btn about-btn d-flex align-items-center justify-content-center m-auto mt-5">
<?php echo $button_everycred['title']; ?>
</a>
<?php } ?>
</div>
<?php if (get_field('bottom_image_why')['url']) { ?>
<div class="about-img">
<img src="<?php echo get_field('bottom_image_why')['url']; ?>" alt="about-img" width="1011" height="500" style="width: 100%; height: auto;" decoding="async" loading="lazy" />
</div>
<?php } ?>
<a href="<?php echo get_field('cta_link'); ?>" class="font-18 text-medium blue-btn talk-btn-connect mt-5 see-btn d-flex align-items-center justify-content-center mx-auto"><?php echo get_field('cta_label'); ?></a>
</div>
</div>
</section>
<?php } ?>
<!-- explore section -->
<?php if (get_field('solutions_details')) { ?>
<section class="engineering-service bg-black">
<div data-aos="fade-up" data-aos-duration="300">
<div class="container">
<?php if (get_field('title_solution')) { ?>
<<?php echo get_field('solutions_choose_heading'); ?> class="font-42 text-center m-0">
<?php echo get_field('title_solution'); ?>
</<?php echo get_field('solutions_choose_heading'); ?>>
<?php } ?>
<?php if (get_field('description_solution')) { ?>
<div class="font-18 text-center desc mt-2">
<?php echo get_field('description_solution'); ?>
</div>
<?php } ?>
<div class="owl-carousel owl-theme case-study">
<?php foreach (get_field('solutions_details') as $item) { ?>
<div class="item">
<div class="engineering-card solutions position-relative overflow-hidden d-block">
<div class="engineering-card-img">
<img src="<?php echo $item['image']['url']; ?>"
alt="<?php echo $item['image']['alt']; ?>"
width="400" height="250"
style="width: 100%; height: auto; object-fit: cover;"
decoding="async" loading="lazy" />
</div>
<div class="engineering-detail">
<?php if (!empty($item['title'])) { ?>
<<?php echo get_field('choose_sol_heading'); ?> class="font-20 m-0 sol-title">
<?php echo $item['title']; ?>
</<?php echo get_field('choose_sol_heading'); ?>>
<?php } ?>
<?php if (!empty($item['description'])) { ?>
<div class="sol-box-desc">
<?php echo $item['description']; ?>
</div>
<?php } ?>
</div>
</div>
</div>
<?php }
wp_reset_postdata(); ?>
</div>
</div>
</div>
</section>
<?php } ?>
<!-- trust ecosystem -->
<?php
$trust_choose_heading = get_field('trust_choose_heading');
$trust_middle_main_heading = get_field('trust_middle_main_heading');
$trust_usecase_detail = get_field('trust_usecase_detail');
if ($trust_usecase_detail) {
?>
<section class="usecase-section py-120 overflow-hidden">
<div data-aos="fade-up" data-aos-duration="300">
<div class="container">
<?php
if ($trust_middle_main_heading) { ?>
<<?php echo $trust_choose_heading; ?> class="font-42 text-black text-medium text-center usecase-detail"><?php echo $trust_middle_main_heading; ?>
</<?php echo $trust_choose_heading; ?>>
<?php } ?>
<div class="row gy-3 gy-md-4">
<?php foreach ($trust_usecase_detail as $usecase_details) {
$usecase_logo = $usecase_details['usecase_logo'];
$usecase_title = $usecase_details['usecase_title'];
$usecase_description = $usecase_details['usecase_description'];
?>
<div class="col-12 col-md-6 col-lg-6 business-company">
<div class="business-card h-100">
<?php if ($usecase_logo) { ?>
<?php }
if ($usecase_title) { ?>
<div class="font-18 text-medium text-black d-flex align-items-center gap-4 mt-5 mb-3">
<img src="<?php echo $usecase_logo['url']; ?>" alt="<?php echo $usecase_logo['alt']; ?>" title="<?php echo $usecase_logo['title']; ?>" width="40" height="40" decoding="async" loading="lazy" />
<?php echo $usecase_title; ?>
</div>
<?php }
if ($usecase_description) { ?>
<div class="font-14 text-black business-card-detail">
<?php echo $usecase_description; ?>
</div>
<?php } ?>
</div>
</div>
<?php }
wp_reset_postdata(); ?>
</div>
</div>
</div>
</section>
<?php } ?>
<!-- service section -->
<?php
$service_sub_text = get_field('service_sub_text');
$service_choose_heading = get_field('service_choose_heading');
$service_main_heading = get_field('service_main_heading');
$service_description = get_field('service_description');
$service_tabs = get_field('service_tabs');
$service_details = get_field('service_details');
$choose_service_heading = get_field('choose_service_heading');
if ($service_details) {
?>
<section class="service-section py-120 bg-black">
<div data-aos="fade-up" data-aos-duration="300">
<div class="container text-center">
<?php if ($service_sub_text) { ?>
<div class="font-16 text-medium text-white initialism"><?php echo $service_sub_text; ?></div>
<?php }
if ($service_main_heading) { ?>
<<?php echo $service_choose_heading; ?> class="font-42 text-white text-medium my-5"><?php echo $service_main_heading; ?></<?php echo $service_choose_heading; ?>>
<?php }
if ($service_description) { ?>
<div class="font-18 description m-auto text-white mb-5 text-justify text-lg-center">
<?php echo $service_description; ?>
</div>
<?php } ?>
<div class="tabs mt-5">
<ul class="nav nav-tabs justify-content-start justify-content-md-center mb-5" id="myTab" role="tablist">
<?php $i = 1;
foreach ($service_tabs as $service_tab) {
$tab_name = $service_tab['tab_name'];
if ($tab_name) {
?>
<li class="nav-item mx-0 mx-lg-3" role="presentation"> <button class="nav-link <?php if ($i == 1) { ?>active<?php } ?> font-18 text-medium pb-2 mt-3 mt-lg-0 text-white" id="service<?php echo $i; ?>-tab" data-bs-toggle="tab" data-bs-target="#service<?php echo $i; ?>" type="button" role="tab" aria-controls="service<?php echo $i; ?>" aria-selected="<?php if ($i == 1) {
echo 'true';
} else {
echo 'false';
} ?>">
<?php echo $tab_name; ?>
</button>
</li>
<?php }
$i++;
}
wp_reset_postdata(); ?>
</ul>
<div class="tab-content pt-0 pt-lg-5" id="myTabContent">
<?php $s = 1;
foreach ($service_details as $service_detail) {
$service_title = $service_detail['service_title'];
$service_image = $service_detail['service_image'];
$service_content = $service_detail['service_content'];
$service_button = $service_detail['service_button'];
?>
<div class="tab-pane fade<?php if ($s == 1) { ?> show active<?php } ?>" id="service<?php echo $s; ?>" role="tabpanel" aria-labelledby="service<?php echo $s; ?>-tab">
<div class="row flex-column-reverse flex-lg-row">
<div class="col-12 col-lg-5 offset-lg-1 text-center text-lg-start justify-content-center d-flex flex-column">
<?php if ($service_title) { ?>
<<?php echo $choose_service_heading; ?> class="font-32 text-medium text-white">
<?php echo $service_title; ?>
</<?php echo $choose_service_heading; ?>>
<?php }
if ($service_content) { ?>
<div class="font-20 tab-content-detail pb-md-3 pb-lg-5 pt-1 pt-md-3 text-justify text-lg-start">
<?php echo $service_content; ?>
</div>
<?php }
if ($service_button) { ?>
<a href="<?php echo $service_button['url']; ?>" class="font-18 text-medium blue-btn see-btn d-flex align-items-center justify-content-center m-auto m-lg-0">
<?php echo $service_button['title']; ?>
</a>
<?php } ?>
</div>
<?php if ($service_image) { ?>
<div class="col-12 col-lg-5 offset-lg-1 mb-3 mb-lg-0">
<div class="tab-image m-auto m-lg-0">
<img src="<?php echo $service_image['url']; ?>" alt="<?php echo $service_image['alt']; ?>" title="<?php echo $service_image['title']; ?>" width="500" height="400" style="width: 100%; height: auto;" decoding="async" loading="lazy" />
</div>
</div>
<?php } ?>
</div>
</div>
<?php $s++;
}
wp_reset_postdata(); ?>
</div>
</div>
</div>
</div>
</section>
<?php } ?>
<!-- use-cases section -->
<?php
$usecases_choose_heading = get_field('usecases_choose_heading');
$middle_sub_text = get_field('middle_sub_text');
$middle_main_heading = get_field('middle_main_heading');
$middle_description = get_field('middle_description');
$use_cases_left_logo = get_field('use_cases_left_logos');
$use_cases_right_logo = get_field('use_cases_right_logos');
$bottom_content = get_field('bottom_content');
$usecase_detail = get_field('usecase_detail');
if ($use_cases_left_logo || $use_cases_right_logo || $usecase_detail) {
?>
<section class="usecase-section py-120 overflow-hidden">
<div data-aos="fade-up" data-aos-duration="300">
<div class="container">
<?php if ($middle_sub_text) { ?>
<!-- <div class="font-16 text-medium text-black"><?php echo $middle_sub_text; ?></div> -->
<?php }
if ($middle_main_heading) { ?>
<<?php echo $usecases_choose_heading; ?> class="font-42 text-black text-medium"><?php echo $middle_main_heading; ?>
</<?php echo $usecases_choose_heading; ?>>
<?php }
if ($middle_description) { ?>
<div class="font-20 text-black"><?php echo $middle_description; ?></div>
<?php } ?>
<div class="font-18 text-black usecase-detail">
<?php echo $bottom_content; ?>
</div>
<div class="row gy-3 gy-md-4">
<?php foreach ($usecase_detail as $usecase_details) {
$usecase_logo = $usecase_details['usecase_logo'];
$use_case_link = $usecase_details['use_case_link'];
$usecase_title = $usecase_details['usecase_title'];
$usecase_description = $usecase_details['usecase_description'];
?>
<div class="col-12 col-md-6 col-lg-4 business-company">
<a href="<?php echo $use_case_link; ?>">
<div class="business-card h-100">
<?php if ($usecase_logo) { ?>
<div class="business-logo">
<img src="<?php echo $usecase_logo['url']; ?>" alt="<?php echo $usecase_logo['alt']; ?>" title="<?php echo $usecase_logo['title']; ?>" width="50" height="50" decoding="async" loading="lazy" />
</div>
<?php }
if ($usecase_title) { ?>
<div class="font-18 text-medium text-black d-flex align-items-center mt-5 mb-2">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/caret-circle.svg" alt="circle" width="16" height="16" class="me-2" />
<?php echo $usecase_title; ?>
</div>
<?php }
if ($usecase_description) { ?>
<div class="font-14 text-black business-card-detail">
<?php echo $usecase_description; ?>
</div>
<?php } ?>
</div>
</a>
</div>
<?php }
wp_reset_postdata(); ?>
</div>
<a href="<?php echo site_url(); ?>/industries" class="px-4 font-18 text-medium talk-btn black-btn d-flex align-items-center justify-content-center mx-auto mx-lg-0">
See use cases for your Industry
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.31344 11.94L8.12544 10.752L12.0254 6.84H0.733438V5.16H12.0254L8.12544 1.248L9.31344 0.0599999L15.2654 6L9.31344 11.94Z" fill="#ffffff" />
</svg>
</a>
</div>
</div>
</section>
<?php } ?>
<?php
$blog_choose_heading = get_field('blog_choose_heading');
$blog_heading = get_field('blog_heading');
$select_blog = get_field('select_blogs');
if ($select_blog) {
?>
<section class="engineering-service bg-black">
<div data-aos="fade-up" data-aos-duration="300">
<div class="container">
<<?php echo $blog_choose_heading; ?> class="font-42 text-medium"><?php echo $blog_heading; ?></<?php echo $blog_choose_heading; ?>>
<div class="owl-carousel owl-theme case-study">
<?php foreach ($select_blog as $post) {
$feture_img = get_the_post_thumbnail_url($post->ID);
?>
<div class="item">
<a href="<?php the_permalink($post->ID); ?>" class="engineering-card position-relative overflow-hidden d-block">
<div class="engineering-card-img">
<img src="<?php echo $feture_img; ?>" alt="case-study" width="400" height="250" style="width: 100%; height: auto; object-fit: cover;" loading="lazy" />
</div>
<div class="engineering-detail">
<div class="font-20 text-black text-medium detail-text">
<?php echo get_the_title(); ?>
</div>
</div>
</a>
</div>
<?php }
wp_reset_postdata(); ?>
</div>
</div>
</div>
</section>
<?php } ?>
<section class="contact-section bg-white py-120">
<div data-aos="fade-up" data-aos-duration="300">
<div class="container">
<div class="d-flex justify-content-between align-items-start align-items-lg-center flex-column flex-lg-row">
<div class="content">
<?php if (get_field('title_contact')) { ?>
<h2 class="text-black font-42 text-medium"><?php echo get_field('title_contact'); ?></h2>
<?php }
if (get_field('description')) { ?>
<div class="font-16 text-black text-medium mt-3">
<?php echo get_field('description'); ?>
</div>
</div>
<?php }
if (get_field('button_url')) { ?>
<a href="<?php echo get_field('button_url'); ?>"
class="mt-3 mt-md-4 px-4 font-16 text-medium talk-btn black-btn d-flex align-items-center justify-content-center mx-0"><?php echo get_field('title_contact'); ?></a>
<?php } ?>
</div>
</div>
</div>
</section>
</div>
<script>
const accordionButtons = document.querySelectorAll('.accordion-button');
const exploreImages = document.querySelectorAll('.explore-img');
accordionButtons.forEach(button => {
button.addEventListener('click', () => {
const targetImageId = button.getAttribute('data-image-target');
exploreImages.forEach(image => {
image.style.display = 'none';
});
document.getElementById(targetImageId).style.display = 'block';
});
});
</script>
<?php get_footer(); ?>