280 lines
12 KiB
PHP
280 lines
12 KiB
PHP
<?php
|
||
|
||
/**
|
||
* Front Page template.
|
||
*
|
||
* @package ThemeStarter
|
||
*/
|
||
|
||
?>
|
||
|
||
<!-- Get Header -->
|
||
<?php get_header(); ?>
|
||
|
||
<!-- Homepage -->
|
||
|
||
|
||
<!-- Hero -->
|
||
<section class="bg-white">
|
||
<div class="relative bg-gradient-to-b from-yellow-100/20">
|
||
<div class="mx-auto max-w-7xl pb-10 pt-10 px-4 2xl:px-0 grid lg:grid-cols-2 gap-8 items-center">
|
||
|
||
<div class="lg:pt-4">
|
||
<div class="mx-auto lg:mx-0 max-w-2xl">
|
||
<div class="mx-auto lg:mx-0 max-w-lg">
|
||
<h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Tailored custom software consulting and services.</h1>
|
||
<p class="mt-6 text-lg leading-8 text-gray-600">Transform your business with premium quality software, end to end support, automation and machine intelligence (AI). </p>
|
||
|
||
<div class="mt-10 space-y-2 md:flex md:space-x-2 md:space-y-0">
|
||
<?php get_template_part('template-parts/partials/book-a-meeting-button') ?>
|
||
<?php get_template_part('template-parts/partials/get-a-quote-button') ?>
|
||
</div>
|
||
|
||
<ul class="mt-10 grid grid-cols-3 gap-2 lg:gap-8 md:grid-cols-5 text-base leading-7 text-gray-600">
|
||
<li class="flex space-x-2 font-semibold text-gray-900">
|
||
<i class="bi bi-pen"></i>
|
||
<p>Design</p>
|
||
</li>
|
||
<li class="flex space-x-2 font-semibold text-gray-900">
|
||
<i class="bi bi-file-code-fill"></i>
|
||
<p>Develop</p>
|
||
</li>
|
||
<li class="flex space-x-2 font-semibold text-gray-900">
|
||
<i class="bi bi-check-circle"></i>
|
||
<p>Test</p>
|
||
</li>
|
||
<li class="flex space-x-2 font-semibold text-gray-900">
|
||
<i class="bi bi-rocket"></i>
|
||
<p>Launch</p>
|
||
</li>
|
||
<li class="flex space-x-2 font-semibold text-gray-900">
|
||
<i class="bi bi-wrench"></i>
|
||
<p>Maintain</p>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-full flex items-center justify-center">
|
||
<img class="" src="<?php echo esc_url(get_template_directory_uri()) . '/assets/images/bgs/system-experiences.png'; ?>">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="absolute inset-x-0 bottom-0 -z-10 h-24 bg-gradient-to-t from-white sm:h-32"></div>
|
||
</div>
|
||
|
||
|
||
|
||
</section>
|
||
|
||
<!-- Client Grid -->
|
||
<section class="py-12 sm:py-16">
|
||
<div class="mx-auto px-4 sm:px-6 lg:px-8 ">
|
||
<?php get_template_part('template-parts/partials/client-grid'); ?>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Custom Systems and Applications -->
|
||
<section id="reliable-software-section">
|
||
<div class="overflow-hidden py-12 sm:py-16">
|
||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||
<div class="mx-auto items-center grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
|
||
|
||
|
||
<div class=" lg:ml-auto lg:pl-4 lg:pt-4">
|
||
<div class="lg:max-w-lg">
|
||
<p class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Custom systems and applications you can rely on.</p>
|
||
<h2 class="mt-4 text-lg font-semibold leading-7 text-stone-300">Even on the go...</h2>
|
||
<p class="mt-4 text-lg font-medium leading-8 text-stone-200">We strive to provide you with reliable & user-friendly custom software service that delivers exactly what your business needs to take control of your systems. With direct consulting, standard accessible code, and post-launch support, we'll help you grow and accomplish your business objectives.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative lg:order-first p-16 shadow-sm">
|
||
<img src="<?php echo esc_url(get_template_directory_uri()) . '/assets/images/bgs/7apps.png'; ?>" alt="Device Mockups of 7 Mobile Applications" class="relative rounded-xl shadow-xl z-20">
|
||
<div class="bg-yellow-300 bg-opacity-10 blur-sm rounded-md inset-0 absolute z-10"></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
|
||
<!-- Testimonial -->
|
||
<?php get_template_part('template-parts/partials/why-us-testimonial'); ?>
|
||
|
||
<!-- -->
|
||
<section>
|
||
<div class="relative bg-stone-900">
|
||
<div class="relative h-80 overflow-hidden bg-indigo-600 md:absolute md:left-0 md:h-full md:w-1/3 lg:w-1/2">
|
||
<img class="h-full w-full object-cover" src="<?php echo esc_url(get_template_directory_uri()) . '/assets/images/bgs/here-to-help.jpg'; ?>" alt="">
|
||
<svg viewBox="0 0 926 676" aria-hidden="true" class="absolute -bottom-24 left-24 w-[57.875rem] transform-gpu blur-[118px]">
|
||
<path fill="url(#60c3c621-93e0-4a09-a0e6-4c228a0116d8)" fill-opacity=".4" d="m254.325 516.708-90.89 158.331L0 436.427l254.325 80.281 163.691-285.15c1.048 131.759 36.144 345.144 168.149 144.613C751.171 125.508 707.17-93.823 826.603 41.15c95.546 107.978 104.766 294.048 97.432 373.585L685.481 297.694l16.974 360.474-448.13-141.46Z" />
|
||
<defs>
|
||
<linearGradient id="60c3c621-93e0-4a09-a0e6-4c228a0116d8" x1="926.392" x2="-109.635" y1=".176" y2="321.024" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#776FFF" />
|
||
<stop offset="1" stop-color="#FF4694" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
</div>
|
||
<div class="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
|
||
<div class="pl-6 pr-6 md:ml-auto md:w-2/3 md:pl-16 lg:w-1/2 lg:pl-24 lg:pr-0 xl:pl-32">
|
||
<p class="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">We’re here to help</p>
|
||
<p class="mt-6 text-base leading-7 text-white">We will invest in drafting specs, creating designs, and delivering quick proof of concept as part of your first project .</p>
|
||
<p class="mt-6 text-base leading-7 text-white">You can decide if you want to move forward with us to develop the full scope. </p>
|
||
<div class="mt-8">
|
||
<a href="<?= get_post_type_archive_link('solutions') ?>" class="w-full text-center rounded-md border border-black bg-stone-100 px-8 py-2.5 text-sm font-semibold shadow-sm hover:bg-stone-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow-600 uppercase">View Solutions</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
|
||
<!-- Solutions -->
|
||
<section class="bg-stone-100" id="problem-solution">
|
||
<div class="py-10">
|
||
<div class="flex flex-col max-w-7xl mx-auto px-4 relative">
|
||
|
||
<div class="text-center text-inherit">
|
||
<div class="mb-4 text-center text-inherit">
|
||
<p class="font-bold mb-4 text-3xl text-gray-900 tracking-tight sm:text-4xl"><?php _e('What we offer', 'harplabs'); ?></p>
|
||
<div class="bg-yellow-300 h-0.5 mx-auto w-28"></div>
|
||
</div>
|
||
<div class="mb-4">
|
||
<h3 class="font-semibold text-2xl text-center lg:text-3xl"><?php _e('A suite of software services...', 'harplabs'); ?></h3>
|
||
<p class="my-5 text-xl"><?php _e('That provide the peace of mind to focus on growth.', 'harplabs'); ?></p>
|
||
</div>
|
||
<div class="gap-4 md:gap-8 grid md:grid-cols-2 lg:grid-cols-4">
|
||
|
||
<?php
|
||
$args = array(
|
||
'post_type' => 'solutions',
|
||
'posts_per_page' => -1,
|
||
'orderby' => 'date',
|
||
'order' => 'ASC',
|
||
);
|
||
$query = new WP_Query($args);
|
||
if ($query->have_posts()) {
|
||
while ($query->have_posts()) {
|
||
$query->the_post();
|
||
$title = get_the_title() ?>
|
||
<div class="rounded-l-lg group hover:-translate-y-4 transition-transform duration-300 ease-in-out relative min-w-0 flex-1 overflow-hidden py-4 px-4 text-center text-sm font-medium focus:z-10">
|
||
|
||
<a href="<?php the_permalink() ?>">
|
||
<img src="<?= get_field('solution_image') ?>">
|
||
<p class="font-medium"><?php _e($title, 'harplabs'); ?></p>
|
||
</a>
|
||
|
||
|
||
</div>
|
||
<?php }
|
||
wp_reset_postdata();
|
||
} else {
|
||
// No posts found
|
||
}
|
||
?>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- Technologies Ticker -->
|
||
<?php get_template_part('template-parts/partials/technologies-ticker'); ?>
|
||
|
||
<!-- From The Blog -->
|
||
<section>
|
||
<div class="py-8 md:py-16">
|
||
<div class="items-center justify-center mb-8 mx-auto relative md:flex md:max-w-2xl lg:max-w-4xl xl:max-w-6xl">
|
||
<h3 class="font-bold mb-4 text-3xl text-center text-gray-900 tracking-tight sm:text-4xl"><?php _e('From The Blog', 'harplabs'); ?></h3>
|
||
|
||
</div>
|
||
<?php
|
||
$front_page_blog_args = array(
|
||
'post_type' => 'post',
|
||
'posts_per_page' => 4,
|
||
'paged' => get_query_var('paged') ?: 1,
|
||
'order' => 'ASC',
|
||
'orderby' => 'date'
|
||
)
|
||
?>
|
||
<?php $front_page_blog = new WP_Query($front_page_blog_args); ?>
|
||
<div>
|
||
<?php if ($front_page_blog->have_posts()) : ?>
|
||
<div class="gap-2 grid max-w-7xl mx-auto px-4 md:grid-cols-2 lg:grid-cols-4 xl:px-0">
|
||
<?php $front_page_blog_item_number = 0; ?>
|
||
<?php while ($front_page_blog->have_posts()) : $front_page_blog->the_post(); ?>
|
||
<?php if ($front_page_blog_item_number >= 0 && $front_page_blog_item_number <= 3) : ?>
|
||
<div id="post-<?php the_ID(); ?>" <?php post_class('bg-white flex flex-col justify-between overflow-hidden'); ?>><a href="<?php echo esc_url(get_permalink()); ?>">
|
||
<img src="<?php the_post_thumbnail_url(get_the_ID()) ?> " alt="">
|
||
|
||
</a>
|
||
<div class="bg-white p-4">
|
||
<?php $terms = get_the_terms(get_the_ID(), 'category') ?>
|
||
<?php if (!empty($terms)) : ?>
|
||
<?php foreach ($terms as $term_i => $term) : ?>
|
||
<?php if ($term_i == 0) : ?>
|
||
<p class="font-medium text-sm"><?php echo $term->name; ?></p>
|
||
<?php endif; ?>
|
||
<?php endforeach; ?>
|
||
<?php endif; ?>
|
||
<a href="<?php echo esc_url(get_permalink()); ?>" class="font-semibold">
|
||
<p class="font-medium mb-2 text-lg"><?php the_title(); ?></p>
|
||
</a>
|
||
<p class="hidden"><?php the_time(get_option('date_format')); ?></p>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
<?php $front_page_blog_item_number++; ?>
|
||
<?php endwhile; ?>
|
||
<?php wp_reset_postdata(); ?>
|
||
</div>
|
||
<?php else : ?>
|
||
<div class="hidden max-w-3xl mt-4 mx-auto px-4 shadow-md w-full sm:col-span-2 md:col-span-4">
|
||
<div class="bg-yellow-100 px-4 py-5 text-center sm:p-6">
|
||
<h3 class="text-base font-semibold leading-6">SORRY NO POSTS WERE FOUND</h3>
|
||
<div class="mt-2">
|
||
<p>FOLLOW Harplabs FOR UPDATES</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
<div class="hidden max-w-3xl mt-4 mx-auto px-4 shadow-md w-full sm:col-span-2 md:col-span-4">
|
||
<div class="bg-yellow-100 px-4 py-5 text-center sm:p-6">
|
||
<h3 class="text-base font-semibold leading-6"><?php _e('SORRY NO POSTS WERE FOUND', 'harplabs'); ?></h3>
|
||
<div class="mt-2">
|
||
<p><?php _e('FOLLOW Harplabs FOR UPDATES', 'harplabs'); ?></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQs -->
|
||
<section id="faqs" class="bg-gray-50 shadow">
|
||
<div class="max-w-7xl mx-auto px-4 py-8 lg:px-8">
|
||
<div class="mx-auto max-w-3xl divide-y-2 divide-gray-200">
|
||
<div class="font-bold my-6 text-4xl text-center sm:text-5xl xl:text-6xl">
|
||
<h2 class="font-bold mb-4 text-3xl text-gray-900 tracking-tight sm:text-4xl"><?php _e('FAQs', 'harplabs'); ?></h2>
|
||
</div>
|
||
|
||
<?php get_template_part('template-parts/partials/faqs-loop') ?>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Get Footer -->
|
||
<?php get_footer(); ?>
|