File: /var/www/stg-everycred.com/wp-content/themes/everycred/bkp-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_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="learn-about bg-dark-blue py-3 px-4">
<div class="font-16 text-white text-center">
<?php echo get_field('top_bar'); ?>
</div>
</section>
<section class="banner-section bg-black py-120 pb-lg-5">
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<div class="row w-100 align-items-center flex-column-reverse flex-lg-row">
<div class="col-12 col-lg-6 text-center text-lg-start mt-4 mt-lg-0">
<div class="font-16 mb-5 text-medium">Verifiable Credentials / Decentralized Identity</div>
<?php if ($banner_heading) { ?>
<div class="font-52 text-medium"><?php echo $banner_heading; ?></div>
<?php }
if ($banner_sub_heading) { ?>
<div class="font-20 my-5"><?php echo $banner_sub_heading; ?></div>
<?php }
if ($banner_button) { ?>
<a href="<?php echo $banner_button['url']; ?>" class="px-4 bg-white font-18 text-bold talk-btn text-black white-btn d-flex align-items-center justify-content-center mx-auto mx-lg-0">
<?php echo $banner_button['title']; ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/right-arrow.svg" alt="arrow-right" class="ms-2" />
</a>
<?php } ?>
</div>
<?php if ($banner_image) { ?>
<div class="col-12 col-lg-6 text-center">
<img src="<?php echo $banner_image['url']; ?>"
alt="<?php echo $banner_image['alt']; ?>" title="<?php echo $banner_image['title']; ?>"
class="banner-img mb-4 mb-lg-0" />
</div>
<?php } ?>
</div>
</div>
</section>
<?php } ?>
<?php
$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="800">
<div class="container">
<div class="about-detail mx-auto text-center">
<?php if ($heading_everycred) { ?>
<div class="font-42 text-medium text-black"><?php echo $heading_everycred; ?></div>
<?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="bg-blue font-18 text-bold blue-btn text-white 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="100%" />
</div>
<?php } ?>
</div>
</div>
</section>
<?php } ?>
<!-- connect section -->
<?php
$connect_sub_text = get_field('connect_sub_text');
$connect_heading = get_field('connect_heading');
$connect_main_content = get_field('connect_main_content');
$connect_image = get_field('connect_image');
$connect_button_url = get_field('connect_button_url');
if ($connect_sub_text || $connect_heading || $connect_main_content || $connect_image || $connect_button_url) {
?>
<section class="connect-section py-120 bg-black">
<div data-aos="fade-up" data-aos-duration="800">
<div class="container text-center">
<?php if ($connect_sub_text) { ?>
<div class="font-16 text-extra text-white"><?php echo $connect_sub_text; ?></div>
<?php }
if ($connect_heading) { ?>
<div class="font-42 text-white text-extra mb-5 mt-3"><?php echo $connect_heading; ?></div>
<?php }
if ($connect_main_content) { ?>
<div class="font-20 text-white text-justify text-lg-center">
<?php echo $connect_main_content; ?>
</div>
<?php }
if ($connect_image) { ?>
<img src="<?php echo $connect_image['url']; ?>"
alt="<?php echo $connect_image['alt']; ?>" title="<?php echo $connect_image['title']; ?>" class="my-5 pb-5 build-to-connect-img" />
<?php }
if ($connect_button_url) { ?>
<a href="<?php echo $connect_button_url['url']; ?>" class="bg-blue font-18 text-bold blue-btn talk-btn-connect text-white see-btn d-flex align-items-center justify-content-center mx-auto">
<?php echo $connect_button_url['title']; ?>
</a>
<?php } ?>
</div>
</div>
</section>
<?php } ?>
<!-- explore section -->
<?php
$heading_explore = get_field('heading_explore');
$description_explore = get_field('description_explore');
$accordion_detail = get_field('accordion_detail');
?>
<section class="explore-section py-120 bg-white">
<div data-aos="fade-up" data-aos-duration="800">
<div class="container text-center">
<?php if ($heading_explore) { ?>
<div class="font-42 text-medium text-black"><?php echo $heading_explore; ?></div>
<?php }
if ($description_explore) { ?>
<div class="font-20 text-black w-630 explore-description mx-auto mt-3">
<?php echo $description_explore; ?>
</div>
<?php } ?>
<div class="row">
<div class="col-12 col-lg-5">
<div class="title text-medium text-uppercase font-16 text-black text-start mb-4">Stages</div>
<div class="accordion" id="accordionExample">
<?php $f = 1;
foreach ($accordion_detail as $accordion_details) {
$explore_left_image = $accordion_details['explore_left_image'];
$question = $accordion_details['question'];
$answer = $accordion_details['answer'];
?>
<div class="accordion-item <?php if ($f !== 1) {
echo '';
} ?>">
<h2 class="accordion-header" id="explore<?php echo $f; ?>">
<button class="accordion-button font-18 text-bold <?php if ($f !== 1) {
echo 'collapsed';
} ?>" type="button" data-bs-toggle="collapse" data-bs-target="#exploreCollapse<?php echo $f; ?>" aria-expanded="true" aria-controls="exploreCollapse<?php echo $f; ?>" data-image-target="image<?php echo $f; ?>">
<?php echo $question; ?>
</button>
</h2>
<div id="exploreCollapse<?php echo $f; ?>" class="accordion-collapse collapse <?php if ($f == 1) {
echo 'show';
} ?>" aria-labelledby="explore<?php echo $f; ?>" data-bs-parent="#accordionExample">
<div class="accordion-body font-18 text-start p-0">
<?php echo $answer; ?>
</div>
<div class="accordion-explore-img-small d-lg-none d-flex align-items-center justify-content-center">
<img src="<?php echo $explore_left_image['url']; ?>" alt="<?php echo $explore_left_image['alt']; ?>" width="90%" height="100%">
</div>
</div>
</div>
<?php $f++;
}
wp_reset_postdata(); ?>
</div>
</div>
<div class="col-12 col-lg-6 offset-lg-1 text-center">
<div class="accordion-explore-img d-flex align-items-center justify-content-center">
<?php
$f = 1;
foreach ($accordion_detail as $accordion_details) {
$explore_left_image = $accordion_details['explore_left_image'];
?>
<img id="image<?php echo $f; ?>" class="explore-img" <?php if ($f == 1) { ?> style="display: block;" <?php } ?> src="<?php echo $explore_left_image['url']; ?>" alt="<?php echo $explore_left_image['alt']; ?>" title="<?php echo $explore_left_image['title']; ?>">
<?php $f++;
}
wp_reset_postdata(); ?>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- service section -->
<?php
$service_sub_text = get_field('service_sub_text');
$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');
if ($service_details) {
?>
<section class="service-section py-120 bg-black">
<div data-aos="fade-up" data-aos-duration="800">
<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) { ?>
<div class="font-42 text-white text-medium my-5"><?php echo $service_main_heading; ?></div>
<?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">
<button class="nav-link <?php if ($i == 1) { ?>active<?php } ?> font-18 text-bold 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) { ?>
<div class="font-32 text-medium text-white">
<?php echo $service_title; ?>
</div>
<?php }
if ($service_content) { ?>
<div class="font-20 tab-content-detail pb-3 pb-lg-5 pt-3 text-justify text-lg-start">
<?php echo $service_content; ?>
</div>
<?php }
if ($service_button) { ?>
<a href="<?php echo $service_button['url']; ?>" class="bg-blue font-18 text-bold blue-btn text-white 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-4 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="100%" height="100%" />
</div>
</div>
<?php } ?>
</div>
</div>
<?php $s++;
}
wp_reset_postdata(); ?>
</div>
</div>
</div>
</div>
</section>
<?php } ?>
<!-- use-cases section -->
<?php
$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="800">
<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) { ?>
<div class="font-42 text-black text-medium"><?php echo $middle_main_heading; ?>
</div>
<?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-4">
<?php foreach ($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-4 business-company">
<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']; ?>" />
</div>
<?php }
if ($usecase_title) { ?>
<div class="font-18 text-bold 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" 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>
</div>
<?php }
wp_reset_postdata(); ?>
</div>
<a href="<?php echo site_url(); ?>/contact-us" class="px-4 bg-black font-18 text-bold talk-btn text-white black-btn d-flex align-items-center justify-content-center mx-auto mx-lg-0">
Contact us to explore more
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/right-arrow-white.svg" alt="arrow" class="ms-2" />
</a>
</div>
</div>
</section>
<?php } ?>
<!-- join-customer section -->
<?php
$heading_join_customer = get_field('heading_join_customer');
$content_join_customer = get_field('content_join_customer');
$image_join_customer = get_field('image_join_customer');
$percentage_details = get_field('percentage_detail');
if ($heading_join_customer || $content_join_customer || $image_join_customer || $percentage_detail) {
?>
<section class="join-customer bg-dark-blue px-4 px-lg-0">
<div data-aos="fade-up" data-aos-duration="800">
<div class="container">
<div class="font-20 sub-title mb-2"><?php echo $heading_join_customer; ?></div>
<div class="font-42 text-white font-medium"><?php echo $content_join_customer; ?></div>
<div class="d-flex flex-wrap credentials-box">
<?php foreach ($percentage_details as $percentage_detail) { ?>
<div class="credential-card position-relative">
<div class="font-52 text-white"><?php echo $percentage_detail['percentage']; ?></div>
<div class="font-18 text-white mt-2"><?php echo $percentage_detail['text_prtcentage']; ?></div>
</div>
<?php } wp_reset_postdata(); ?>
</div>
</div>
</div>
</section>
<?php } ?>
<?php
$blog_heading = get_field('blog_heading');
$select_blog = get_field('select_blog');
$blog_button_url = get_field('blog_button_url');
if ($select_blog) {
?>
<section class="engineering-service bg-black">
<div data-aos="fade-zoom-in" data-aos-duration="800">
<div class="container">
<div class="font-42 text-medium"><?php echo $blog_heading; ?></div>
<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">
<img src="<?php echo $feture_img; ?>" alt="case-study" />
<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 class="container">
<div class="d-flex justify-content-between align-items-center">
<div class="content">
<?php if (get_field('title_contact')) { ?>
<div class="text-black font-42 text-medium"><?php echo get_field('title_contact'); ?></div>
<?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-4 px-4 bg-black font-16 text-bold talk-btn text-white black-btn d-flex align-items-center justify-content-center mx-0">Contact Sales</a>
<?php } ?>
</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(); ?>