File: /var/www/soreal.space/wp-content/themes/soreal/front-page.php
<?php
get_header();
?>
<?php
$banner_title = get_field('banner_title');
$banner_sub_title = get_field('banner_sub_title');
$banner_button_text = get_field('banner_button_text');
$banner_button_link = get_field('banner_button_link');
$banner_main_image = get_field('banner_main_image');
?>
<section class="banner"
style="background: url(<?php echo get_template_directory_uri() ?>/assets/images/Background.png) center bottom / cover no-repeat;">
<div class="container mx-auto">
<div class="md:flex -mx-4">
<div class="md:w-1/2 w-full pl-4">
<?php
if ($banner_title) {
?>
<h1 class="mb-2.5 text-[32px] md:text-[40px] lg:text-[48px] xl:text-[52px] leading-[normal]">
<?php echo $banner_title; ?>
</h1>
<?php }
if ($banner_sub_title) { ?>
<p class="mb-5 text-gray-400 w-96 max-w-full">
<?php echo $banner_sub_title; ?>
</p>
<?php }
if ($banner_button_link) { ?>
<a href="<?php echo $banner_button_link; ?>"
class="text-white bg-primary px-6 py-3 rounded-md hover:bg-transparent hover:text-primary border transition border-primary">
<?php echo $banner_button_text; ?>
</a>
<?php } ?>
</div>
<?php if ($banner_main_image) { ?>
<div class="md:w-1/2 w-full px-4 max-md:mt-4">
<div id="unity-container" class="unity-desktop relative lg:-top-[120px] md:-top-[70px]">
<canvas class="w-full max-md:rounded-xl md:rounded-b-2xl" id="unity-canvas" width=593 height=720 tabindex="-1"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
</div>
</div>
<?php } ?>
<?php // echo do_shortcode('[image_on_select]');
?>
</div>
</div>
</section>
<?php
$innovate_image = get_field('innovate_image');
$innovate_title = get_field('innovate_title');
$innovate_description = get_field('innovate_description');
$innovate_button_text = get_field('innovate_button_text');
$innovate_button_link = get_field('innovate_button_link');
$innovate_percentage_detail = get_field('innovate_percentage_detail');
?>
<section class="about">
<div class="relative" style="padding: 110px 0;">
<div class="container mx-auto py-0 xl:py-24">
<div class="md:flex justify-end -mx-4">
<?php
if ($innovate_image) { ?>
<div class="md:w-[calc(50%-40px)] w-full px-4 md:px-0 top-1/2 md:-translate-y-1/2 left-0 md:absolute">
<img src="<?php echo $innovate_image['url']; ?>" alt="<?php echo $innovate_image['alt']; ?>"
class="mb-4 md:mb-0" />
<div data-aos="fade-up" data-aos-duration="800"
class="about-details md:bg-[#000]/30 hidden md:flex gl:flex-wrap justify-between md:w-[522px] max-w-[90%] gap-5 xl:gap-8 p-4 xl:p-8 md:my-0 my-3 md:absolute top-4 xl:top-8 right-4 xl:right-8 rounded-[40px]"
id="percentage-section">
<?php
foreach ($innovate_percentage_detail as $index => $percentage_details) {
$percentage_value = rtrim($percentage_details['percentage_value'], '%');
$percentage_text = $percentage_details['percentage_text'];
$unique_id = 'percentage-value-' . $index;
?>
<div class="w-6/12 lg:w-1/3">
<h3 id="<?php echo $unique_id; ?>" class="md:mb-2 mb-0 text-primary md:text-white text-[24px] md:text-[32px] xl:text-[40px]">
<?php echo $percentage_value; ?></h3>
<p class="text-gray-700 md:text-white/80"><?php echo $percentage_text; ?></p>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
<div class="md:w-[52%] w-full px-4" data-aos="fade-up" data-aos-duration="800">
<?php
if ($innovate_title) {
?>
<h2 class="mb-2 text-[26px] md:text-[32px] lg:text-[36px] xl:text-[46px] leading-[normal]">
<?php echo $innovate_title; ?>
</h2>
<?php } ?>
<?php if ($innovate_description) { ?>
<p class="mb-5 text-gl lg:text-xl">
<?php echo $innovate_description; ?>
</p>
<div class="about-details md:hidden justify-between mt-3 flex">
<?php
foreach ($innovate_percentage_detail as $percentage_details) {
$percentage_value = $percentage_details['percentage_value'];
$percentage_text = $percentage_details['percentage_text'];
?>
<div class="w-1/2 p-1">
<h3 class="md:mb-2 mb-0 text-primary md:text-white"><?php echo $percentage_value; ?></h3>
<p class="text-gray-700 md:text-white/80"><?php echo $percentage_text; ?></p>
</div>
<?php } ?>
</div>
<?php }
/*if ($innovate_button_link) { ?>
<a href="<?php echo $innovate_button_link; ?>"
class="text-white bg-primary px-6 py-3 rounded-md hover:bg-transparent hover:text-primary border transition border-primary">
<?php echo $innovate_button_text; ?>
</a>
<?php } */ ?>
</div>
</div>
</div>
</div>
</section>
<?php
$feature_title = get_field('feature_title');
$feature_description = get_field('feature_description');
$feature_details = get_field('feature_details');
?>
<section class="feature bg-[#EEF2FF]">
<div class="container mx-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6 lg:gap-8">
<div class="lg:w-8/12 w-full" data-aos="fade-up" data-aos-duration="800">
<?php
if ($feature_title) { ?>
<h2 class="text-[26px] md:text-[32px] lg:text-[36px] xl:text-[46px] leading-[normal] m-0">
<?php echo $feature_title; ?>
</h2>
<?php }
/* if ($feature_description) { ?>
<p class="mb-5 md:mb-0">
<?php echo $feature_description; ?>
</p>
<?php } */ ?>
</div>
<?php
foreach ($feature_details as $feature_detail) {
$feature_icon = $feature_detail['feature_icon'];
$title = $feature_detail['title'];
$description = $feature_detail['description'];
?>
<div class="bg-white p-4 md:p-6 lg:p-8 h-full rounded-3xl" data-aos="fade-up" data-aos-duration="800">
<img src="<?php echo $feature_icon['url']; ?>" alt="<?php echo $feature_icon['alt']; ?>"
class="mb-2 w-12 md:w-auto">
<h4 class="mb-2"><?php echo $title; ?></h4>
<p><?php echo $description; ?></p>
</div>
<?php } ?>
</div>
</div>
</section>
<!-- Timeline section -->
<?php
$timeline_main_heading = get_field('timeline_main_heading');
$timeline_sub_heading = get_field('timeline_sub_heading');
$timeline_details = get_field('timeline_details');
?>
<section class="works">
<div class="container mx-auto">
<div class="text-center mb-6 sm:mb-10 md:mb-14" data-aos="fade-up" data-aos-duration="800">
<?php if ($timeline_main_heading) { ?>
<h2 class="text-[26px] md:text-[32px] lg:text-[36px] xl:text-[46px] leading-[normal]">
<?php echo $timeline_main_heading; ?></h2>
<?php }
if ($timeline_main_heading) { ?>
<p><?php echo $timeline_sub_heading; ?></p>
<?php } ?>
</div>
<ul class="lg:w-8/12 w-full mx-auto relative">
<?php
foreach ($timeline_details as $timeline_detail) {
$title = $timeline_detail['title'];
$description = $timeline_detail['description'];
$tl_image = $timeline_detail['image'];
?>
<li class="md:flex flex-wrap justify-between" data-aos="fade-up" data-aos-duration="800">
<div class="w-full md:w-5/12">
<h4 class="font-medium"><?php echo $title; ?></h4>
<p class="text-gray-800 mb-4 md:mb-0"><?php echo $description; ?></p>
</div>
<div class=" w-full md:w-5/12">
<img src="<?php echo $tl_image['url']; ?>" alt="<?php echo $tl_image['alt']; ?>"
class="w-full md:w-[312px] md:max-w-full rounded-2xl">
</div>
</li>
<?php } ?>
</ul>
</div>
</section>
<?php
$request_backgroud_image = get_field('request_backgroud_image');
$contact_sales_title = get_field('contact_sales_title');
$contact_sales_description = get_field('contact_sales_description');
$contact_sales_button_text = get_field('contact_sales_button_text');
$contact_sales_button_url = get_field('contact_sales_button_url');
$newslater_title = get_field('newslater_title');
$newslater_description = get_field('newslater_description');
$newslater_button_text = get_field('newslater_button_text');
$newslater_button_url = get_field('newslater_button_url');
?>
<section class="contact-section py-10"
style="background: url(<?php echo $request_backgroud_image['url']; ?>) center center / cover no-repeat;">
<div class="container mx-auto">
<div class="flex flex-wrap gap-y-4 justify-between items-center" data-aos="fade-up" data-aos-duration="800">
<?php if ($contact_sales_title) { ?>
<div class="w-[600px] max-w-full">
<h3 class="text-xl md:text-2xl lg:text-[40px] text-white capitalize mb-2 font-medium">
<?php echo $contact_sales_title; ?>
</h3>
<?php }
if ($contact_sales_description) { ?>
<p class="text-white mt-4">
<?php echo $contact_sales_description; ?>
</p>
</div>
<?php }
if ($contact_sales_button_url) { ?>
<a href="<?php echo $contact_sales_button_url; ?>"
class="text-white bg-primary px-6 py-3 rounded-md hover:bg-transparent hover:text-primary border transition border-primary">
<?php echo $contact_sales_button_text; ?>
</a>
<?php } ?>
</div>
</div>
</section>
<?php
$solution_heading = get_field('solution_heading');
$solution_sub_heading = get_field('solution_sub_heading');
$slider_details = get_field('slider_details');
?>
<section class="solutions">
<div class="container mx-auto">
<div class="md:w-7/12" data-aos="fade-up" data-aos-duration="800">
<?php if ($solution_heading) { ?>
<h2 class="text-[26px] md:text-[32px] lg:text-[36px] xl:text-[46px] leading-[normal]">
<?php echo $solution_heading; ?></h2>
<?php }
if ($solution_sub_heading) {
?>
<h6 class="mt-4">
<?php echo $solution_sub_heading; ?>
</h6>
<?php } ?>
</div>
<div class="solutions-slider mt-12 md:mt-8 xl:mt-10" data-aos="fade-up" data-aos-duration="800">
<?php
foreach ($slider_details as $slider_detail) {
$slider_img = $slider_detail['slider_image'];
$slider_title = $slider_detail['slider_title'];
$slider_description = $slider_detail['slider_description'];
$slider_button_text = $slider_detail['slider_button_text'];
$slider_button_url = $slider_detail['slider_button_url'];
?>
<div class="solutions-slide relative">
<div class="aspect-[1/0.541] overflow-hidden rounded-2xl">
<img class="object-cover h-full w-full" src="<?php echo $slider_img['url']; ?>" alt="<?php echo $slider_img['alt']; ?>" class="w-full">
</div>
<div class="solution-details md:w-[384px] text-white bg-primary md:bg-[#000]/30 rounded-tr-2xl rounded-bl-2xl p-4 md:p-10 md:absolute bottom-0 left-0"
data-aos="fade-up" data-aos-duration="800">
<?php if ($slider_title) { ?>
<h4 class="mb-3 sm:mb-4 lg:mb-5"><?php echo $slider_title; ?></h4>
<?php }
if ($slider_description) { ?>
<p class="text-white2">
<?php echo $slider_description; ?>
</p>
<?php } ?>
<?php /* if ($slider_button_url) { ?>
<a href="<?php echo $slider_button_url; ?>"
class="md:text-white text-black-700 mt-5 bg-white md:bg-primary px-6 py-3 rounded-md hover:bg-transperent hover:text-primary border-primary ">
<?php echo $slider_button_text; ?>
</a>
<?php } */ ?>
</div>
</div>
<?php }
wp_reset_postdata();
?>
</div>
</div>
</section>
<?php
$price_main_title = get_field('price_main_title');
$price_sub_title = get_field('price_sub_title');
$pricing_table_details = get_field('pricing_table_details');
?>
<section class="pricing bg-[#EEF2FF]">
<div class="container mx-auto">
<div class="text-center mb-6 sm:mb-10 md:mb-14" data-aos="fade-up" data-aos-duration="800">
<?php
if ($price_main_title) { ?>
<h2 class="text-[26px] md:text-[32px] lg:text-[36px] xl:text-[46px] leading-[normal]">
<?php echo $price_main_title; ?></h2>
<?php }
if ($price_sub_title) { ?>
<h6>
<?php echo $price_sub_title; ?>
</h6>
<?php } ?>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 xl:gap-7 2xl:gap-8" data-aos="fade-up" data-aos-duration="800">
<?php
$i = 1;
foreach ($pricing_table_details as $pricing_table_detail) {
$price = $pricing_table_detail['price'];
$price_tag = $pricing_table_detail['price_tag'];
$price_plan_name = $pricing_table_detail['price_plan_name'];
$plan_description = $pricing_table_detail['plan_description'];
$price_info_details = $pricing_table_detail['price_info_details'];
$plan_button_text = $pricing_table_detail['plan_button_text'];
$plan_button_url = $pricing_table_detail['plan_button_url'];
?>
<div class=" bg-white p-5 md:p-6 xl:p-8 2xl:p-10 h-full pt-4 md:pt-6 xl:pt-8 relative hover:shadow-lg transition rounded-b-[40px] border-t-2
<?php
if ($i === 1) {
echo 'border-t-2 border-[#0049C6]';
} elseif ($i === 2) {
echo 'border-t-2 border-[#EE4540]';
} elseif ($i === 3) {
echo 'border-t-2 border-[#7FBA7A]';
} else {
echo '';
}
?>">
<h4 class="text-[20px] xl:text-[24px]"><?php echo $price_plan_name; ?></h4>
<p class="text-gray-700 mb-6 md:mb-8 xl:mb-10"><?php echo $plan_description; ?></p>
<ul class="text-gray-700 text-md list-none flex flex-col gap-3 md:gap-4 lg:gap-5">
<?php
foreach ($price_info_details as $price_info_detail) {
$price_info_text = $price_info_detail['price_info_text'];
?>
<li class="text-base xl:text-lg "><?php echo $price_info_text; ?></li>
<?php } ?>
</ul>
<h3 class="text-[24px] leading-[22px] md:text-[28px] md:leading-[26px] xl:text-[32px] xl:leading-[28px] m-0 mt-6 hidden">₹<?php echo $price; ?> <span class="text-xs font-normal">/<?php echo $price_tag; ?></span></h3>
<?php /*if ($plan_button_url) { ?>
<a href="<?php echo $plan_button_url; ?>"
class="border-2 transition block text-center px-6 py-3 rounded-md hover:bg-primary hover:text-white text-primary font-medium bg-primary/30 border-primary/50 md:absolute bottom-10 w-full md:w-[calc(100%-80px)] left-10">
<?php echo $plan_button_text; ?>
</a>
<?php } */ ?>
</div>
<?php
$i++;
}
?>
</div>
<div class="text-center mt-6" data-aos="fade-up" data-aos-duration="800">
<a href="<?php echo $contact_sales_button_url; ?>"
class="text-white bg-primary px-6 py-3 rounded-md hover:bg-transparent hover:text-primary border transition border-primary">
Contact Us
</a>
</div>
</div>
</section>
<?php
get_footer();
?>