<?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.frontand-layout','data' => ['assets' => $assets ?? []]]); ?>
<?php $component->withName('frontand-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes(['assets' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($assets ?? [])]); ?>
<style>
    .gKOKma {
    width: 100%;
    background-color: rgb(247, 253, 250);
    padding-bottom: 24px;
    margin-top: 5px;
    
    .card {
    margin: 20px;
    flex: 1 1 calc(20% - 30px); /* Flexbox to keep all cards responsive */
    max-width: calc(20% - 30px);
}

.card-img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Add border-radius */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: add some shadow */
}

@media (max-width: 992px) {
    .card {
        flex: 1 1 calc(50% - 30px); /* For medium screens (tablets) */
        max-width: calc(50% - 30px);
    }
}

@media (max-width: 768px) {
    .card {
        flex: 1 1 calc(100% - 30px); /* For small screens (phones) */
        max-width: calc(100% - 30px);
    }
}

}

/* Card Styles */

.background-effect {
    background-image: linear-gradient(-180deg, rgb(255, 255, 255), rgb(255, 255, 255) 30%, rgb(240, 242, 247) 15%, rgb(240, 242, 247) 85%);
    padding: 20px;
    border-radius: 10px;
}

.delivery-section {
    padding: 60px;
    margin-top: 70px; /* Adjust this value as needed */
}

.text-content {
    text-align: left;
}

.bike {
    max-width: 110%; /* Increase the size of the image */
    height: auto;
    display: inline-block;
}

.row.align-items-center > div {
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 768px) {
    .row.align-items-center {
        flex-direction: column-reverse;
    }

    .bike {
        margin-top: 20px;
        width: 100%;
        height: auto;
    }
}

.delivery-section {
        min-height: 580px !important;
    }
    
    .first-p{
        font-size:24px;
    }
.specifications {
  padding: 50px 0;
  background-color: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.icon-content-list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0 -15px;
}

.icon-content-list li {
  flex: 0 0 33.333%;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
}

.icon-content-list .icon {
  width: 60px;
  height: 60px;
  /*background-color: #00ff9d;*/
  border-radius: 8px;
  margin-right: 15px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-content-list .icon img {
  max-width: 100%;
  max-height: 100%;
}

.icon-content-list .content {
  flex-grow: 1;
}

.icon-content-list h2 {
  font-size: 24px;
  margin: 0 0 10px;
  line-height:26px;
  font-weight:700;
}

.icon-content-list p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Responsiveness */
@media (max-width: 992px) {
  .icon-content-list li {
    flex: 0 0 50%;
  }
}

@media (max-width: 768px) {
  .icon-content-list li {
    flex: 0 0 100%;
  }
}


.testimonials-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.testimonials-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.testimonial-item {
    width: calc(33.333% - 20px);
    margin-bottom: 40px;
}

.testimonial-content {
    background-color: #f5f5f5;
    padding: 30px;
    border-radius: 10px;
    position: relative;
    margin-bottom: 20px;
}

/*.quote-marks {
    font-size: 60px;
    color: #ccc;
    position: absolute;
    top: 10px;
    left: 20px;*/
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
}

.author-image {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid #00ff9d;
}

.author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-info {
    flex-grow: 1;
}

.author-name {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.author-location {
    font-size: 14px;
    color: #666;
    margin: 0;
}

@media (max-width: 992px) {
    .testimonial-item {
        width: calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .testimonial-item {
        width: 100%;
    }
}

.customer-review {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 0px;
}
.customer-review h2 {
    text-align: center;
    margin-bottom: 30px;
}

.review-carousel {
    position: relative;
    display: flex;
    align-items: center;
}

.review-container {
    overflow: hidden;
    width: 100%;
}

.review-track {
    display: flex;
    transition: transform 0.3s ease;
}

.review-card {
    flex: 0 0 calc(33.333% - 20px);
    margin-right: 20px;
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 20px;
}

.review-content {
    position: relative;
    margin-bottom: 20px;
}


.reviewer-info {
    display: flex;
    align-items: center;
}

.reviewer-info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
    border: 2px solid #00ff9d;
}

.nav-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0 10px;
}

@media (max-width: 992px) {
    .review-card {
        flex: 0 0 calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .review-card {
        flex: 0 0 calc(100% - 20px);
    }
}
</style>    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
    const track = document.querySelector('.review-track');
    const cards = track.querySelectorAll('.review-card');
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');
    
    let cardIndex = 0;
    const cardWidth = cards[0].offsetWidth + 20; // 20px for margin
    
    nextBtn.addEventListener('click', () => {
        if (cardIndex < cards.length - 3) {
            cardIndex++;
            track.style.transform = `translateX(-${cardIndex * cardWidth}px)`;
        }
    });
    
    prevBtn.addEventListener('click', () => {
        if (cardIndex > 0) {
            cardIndex--;
            track.style.transform = `translateX(-${cardIndex * cardWidth}px)`;
        }
    });
});
    </script>
    <!-- START FIRST SECTION -->
<!-- START FIRST SECTION -->
<div class="container-fluid delivery-section">
    <div class="row d-flex justify-content-center align-items-center text-center">
        <div class="col-lg-5 col-md-8 col-sm-12">
            <div class="text-content">
                <h1 class="fw-normal text-white mb-0"><?php echo e($data['app_content']['app_name']); ?></h1>
                <span class="hr"></span><span class="space"></span><span class="hr2"></span>
                <p class="first-p mt-4 font-bold"><?php echo e($data['app_content']['create_order_description']); ?></p>
                <div class="d-grid">
                    <a class="btn create-order-btn text-white mt-1 mb-2 p-2 w-50" href="#" data-bs-toggle="modal" data-bs-target="#signinModal" role="button"><?php echo e(__('message.create_order')); ?></a>
                </div>
            </div>
        </div>
        <div class="col-lg-5 col-md-4 col-sm-12">
            <img src="<?php echo e($data['app_content']['delivery_man_image']); ?>" class="img-fluid bike">
        </div>
    </div>
</div>


<section class="specifications">
  <div class="container">
    <ul class="icon-content-list">
      <li>
        <div class="icon">
          <img src="<?php echo e(asset('frontend-website/assets/website/save-money.png')); ?>" alt="Police hat icon" width="60" height="60">
        </div>
        <div class="content">
          <h2>You're in charge</h2>
          <p>There is no one to report to, you are your own boss</p>
        </div>
      </li>
      <li>
        <div class="icon">
          <img src="<?php echo e(asset('frontend-website/assets/website/location.png')); ?>" alt="Clock icon" width="60" height="60">
        </div>
        <div class="content">
          <h2>You pick the time</h2>
          <p>Log in and log out anytime you want. We are live 24x7</p>
        </div>
      </li>
      <li>
        <div class="icon">
          <img src="<?php echo e(asset('frontend-website/assets/website/stopwatch.png')); ?>" alt="City icon" width="60" height="60">
        </div>
        <div class="content">
          <h2>Your ride, your city</h2>
          <p>All deliveries will be made within city limits</p>
        </div>
      </li>
      <li>
        <div class="icon">
          <img src="<?php echo e(asset('frontend-website/assets/website/business-and-trade.png')); ?>" alt="Money icon" width="60" height="60">
        </div>
        <div class="content">
          <h2>Earn as you go</h2>
          <p>We offer one of the best compensations in the market</p>
        </div>
      </li>
      <li>
        <div class="icon">
          <img src="<?php echo e(asset('frontend-website/assets/website/review.png')); ?>" alt="Sparkles icon" width="60" height="60">
        </div>
        <div class="content">
          <h2>You'll be far from bored</h2>
          <p>Run different orders ranging from deliveries to rides</p>
        </div>
      </li>
      <li>
        <div class="icon">
          <img src="<?php echo e(asset('frontend-website/assets/website/right.png')); ?>" alt="Raised fist icon" width="60" height="60">
        </div>
        <div class="content">
          <h2>Join the movement</h2>
          <p>Be a part of the fastest growing delivery startup</p>
        </div>
      </li>
    </ul>
  </div>
</section>
    <!-- END FIRST SECTION -->
   <!-- <section data-baseweb="block" id="" class="css-ktNNbE"><div data-baseweb="block" class="css-hazmlH"><div data-baseweb="block" class="css-ofGld"><div data-baseweb="block" class="container-inner css-igbwHX"><div data-baseweb="block" data-testid="block-container" class="css-bVFrLX"><div data-baseweb="block" class="css-dKKMsW"><div class="css-cZnRbK"><div data-baseweb="block" class="css-PKJb"><div class="css-eGWZWN"><div class="css-hPnljU"><h2 class="css-jDKtrq">Help is on the way</h2></div></div></div><div data-baseweb="block" class="css-PKJb"><div class="css-kFvwTq"><div data-testid="markdown-wrapper" class="css-jKLevy"><p class="cmln__paragraph">Uber Connect is an easy delivery solution that allows people to send items the same day, whether it’s a care package for a loved one, a gift for a friend’s birthday, an item sold online, or a business&nbsp;document.</p>
</div></div></div><div data-baseweb="block" class="css-PKJb"></div></div></div></div></div></div></div></section> -->
     <!-- START SECOND SECTION -->
     
   <div class="container-fluid second-section px-lg-5 position-relative">
    <div class="white-background"></div>
    <div class="content-wrapper">
        <div class="row">
            <div class="col-12 text-center">
                <h1 class="fw-bold mb-0" style="font-size: 2.5rem;"><?php echo e($data['why_choose']['title']); ?></h1>
                <p class="fw mt-3" style="font-size: 1.25rem;"><?php echo e($data['why_choose']['description']); ?></p>
                <div class="d-flex justify-content-center align-items-center mt-2">
                    <span class="hr"></span><span class="space"></span><span class="hr2"></span>
                </div>
            </div>
        </div>
        <div class="row mt-5">
            <?php $__currentLoopData = $why_delivery; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="col-12 col-md-4 mb-4">
                    <div class="card">
                        <img src="<?php echo e(getSingleMediaSettingImage($item->id != null ? $item : null ,'frontend_data_image','why_delivery_image')); ?>" alt="mightydelivery" class="card-img-top why-section-img" style="width: 30% !important; height: auto; margin: 0 auto;">
                        <div class="card-body text-center">
                            <h3 class="second-section-h3 mt-3" style="font-size: 1.5rem; font-weight: bold;"><?php echo e($item->title); ?></h3>
                            <p class="card-text second-section-p" style="font-size: 1.1rem;"><?php echo e($item->subtitle); ?></p>
                        </div>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</div>

    <!-- END SECOND SECTION -->

<div class="sc-AxjAm StDqM sc-861fib-1 gKOKma">
    <div class="sc-AxjAm StDqM sc-sblcwm-0 fTzudd">
        <div class="sc-AxjAm byNQaL sc-AxirZ ktnnZL sc-861fib-0 bMHqsE d-flex justify-content-center flex-wrap">
            <!-- <h1 class="fw-bold mb-7" style="font-size: 2.5rem;">MXunzo Provides..</h1> <br>-->
                
            <a itemprop="url"  class="sc-fzqNqU hpmFkU sc-861fib-2 kamyJO card">
                <img src="<?php echo e(asset('frontend-website/assets/website/MXUnzo1.jpg')); ?>"
                    class="sc-fzoiQi bOQxei sc-861fib-3 bzamwU card-img" alt="" title="">
            </a>
            <a itemprop="url"  class="sc-fzqNqU hpmFkU sc-861fib-2 kamyJO card">
                  <img src="<?php echo e(asset('frontend-website/assets/website/MXUnzo2.jpg')); ?>"
                    class="sc-fzoiQi bOQxei sc-861fib-3 bzamwU card-img" alt="" title="">
            </a>
            <a itemprop="url"  class="sc-fzqNqU hpmFkU sc-861fib-2 kamyJO card">
                 <img src="<?php echo e(asset('frontend-website/assets/website/MXUnzo3.jpg')); ?>"
                    class="sc-fzoiQi bOQxei sc-861fib-3 bzamwU card-img" alt="" title="">
            </a>
            <a itemprop="url"  class="sc-fzqNqU hpmFkU sc-861fib-2 kamyJO card">
                  <img src="<?php echo e(asset('frontend-website/assets/website/MXUnzo4.jpg')); ?>"
                    class="sc-fzoiQi bOQxei sc-861fib-3 bzamwU card-img" alt="" title="">
            </a>
        </div>
    </div>
</div>

   

    <!-- START TESTIMONIAL SECTION -->

<div class="multiple-card-slider ">
    <div id="carouselExampleControls" class="carousel carousel-dark" data-bs-ride="false">
        <section class="home-testimonial">
            <div class="container-fluid">
                <!--<div class="row justify-content-center">-->
                <!--    <div class="col-md-6 pt-4 d-flex flex-column align-items-center testimonial-center">-->
                <!--        <h1 class="text-center mb-3"><?php echo e($data['client_review']['client_review_title']); ?></h1>-->
                <!--    </div>-->
                <!--</div>-->

<section class="customer-review">
                <div class="row justify-content-center">
                    <div class="col-md-6 pt-4 d-flex flex-column align-items-center testimonial-center">
                        <h1 class="fw-bold text-center mb-3"><?php echo e($data['client_review']['client_review_title']); ?></h1>
                    </div>
                </div>
    <div class="review-carousel">
        <button class="nav-btn prev-btn">&lt;</button>
        <div class="review-container">
            <div class="review-track">
                <?php $__currentLoopData = $client_review; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="review-card">
                        <div class="review-content">
                            <div class="quote-marks">"</div>
                            <p><?php echo e($item->description); ?></p>
                        </div>
                        <div class="reviewer-info">
                            <img src="<?php echo e(getSingleMediaSettingImage($item, 'frontend_data_image', 'client_review_image')); ?>" alt="<?php echo e($item->title); ?>">
                            <div>
                                <h3><?php echo e($item->title); ?></h3>
                                <p><?php echo e($item->subtitle); ?></p>
                            </div>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
        <button class="nav-btn next-btn">&gt;</button>
    </div>
</section></div>
        </section>

        <!--<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"-->
        <!--    data-bs-slide="prev">-->
        <!--    <span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
        <!--    <span class="visually-hidden"><?php echo e(__('message.previous')); ?></span>-->
        <!--</button>-->
        <!--<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"-->
        <!--    data-bs-slide="next">-->
        <!--    <span class="carousel-control-next-icon" aria-hidden="true"></span>-->
        <!--    <span class="visually-hidden"><?php echo e(__('message.next')); ?></span>-->
        <!--</button>-->
    </div>
</div>
     <div class="container mobile-section">
   
        <div class="row">
            <div class="col-lg-6 d-flex justify-content-center">
                <img src="<?php echo e($data['download_app']['download_app_logo']); ?>" class="img-fluid mobile-img">
            </div>
            <div class="col-lg-6 my-auto mt-5 py-4">
                <h1 class="fw-normal"><?php echo e($data['download_app']['download_title']); ?></h1>
                <span class="hr"></span><span class="space"></span><span class="hr2"></span>
                <p class="mobile-section-p mt-3"><?php echo e($data['download_app']['download_description']); ?></p>
                <a href="<?php echo e($data['download_app']['play_store_link']['url']); ?>" <?php echo e($data['download_app']['play_store_link']['target']); ?> class="text-decoration-none">
                    <img src="<?php echo e(asset('frontend-website/assets/website/ic_play_store.png')); ?>" alt="Play Store" class="mt-3 me-2">
                </a>
                <a href="<?php echo e($data['download_app']['app_store_link']['url']); ?>" <?php echo e($data['download_app']['app_store_link']['target']); ?>>
                    <img src="<?php echo e(asset('frontend-website/assets/website/ic_app_store.png')); ?>" alt="App Store" class="mt-3 me-2">
                </a>
            </div>
        </div>
    </div>
    <!-- END MOBILE SECTION -->
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
<?php /**PATH /www/wwwroot/mxunzo.mimeld.com/resources/views/frontend-website/index.blade.php ENDPATH**/ ?>