<?php
/* Template Name: homepage */
get_header(); ?>

<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
        
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="<?php echo get_field('first_banner'); ?>" style="width:100%;">
            <div class="container">
              <div class="carousel-caption text-start">
                <h1 class="display-1 text-white mb-5 animated slideInDown text-center">Expert Garden Care <br>at Brisbane <br><a href="" class="btn btn-primary py-sm-3 px-sm-4">Explore More</a></h1>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img src="<?php echo get_field('second_banner'); ?>" style="width:100%;">
            
            <div class="container">
              <div class="carousel-caption">
                <h1 class="display-1 text-white mb-5 animated slideInDown text-center">Top Services for <br>Lawn Moving <br> <a href="" class="btn btn-primary py-sm-3 px-sm-4">Explore More</a></h1>
              </div>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
    </div>
    
    
    <!-- aboutus Start -->
    
    <div class="container aboutus py-5 pt-lg-0">
            <div class="row gx-0">
                <div class="col-lg-4 wow fadeIn" data-wow-delay="0.1s">
                    <div class="bg-white shadow d-flex align-items-center h-100 px-5" style="min-height: 160px;">
                        <div class="d-flex">
                            <div class="flex-shrink-0 btn-lg-square rounded-circle bg-light">
                                <i class="fa fa-times text-primary" style="padding: 17px 23px;"></i>
                            </div>
                            <div class="ps-3">
                                <h4>No Hidden Cost</h4>
                                <span>Transparent pricing. No surprises. We value your trust and budget.</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 wow fadeIn" data-wow-delay="0.3s">
                    <div class="bg-white shadow d-flex align-items-center h-100 px-5" style="min-height: 160px;">
                        <div class="d-flex">
                            <div class="flex-shrink-0 btn-lg-square rounded-circle bg-light">
                                <i class="fa fa-users text-primary" style="padding: 17px 14px;"></i>
                            </div>
                            <div class="ps-3">
                                <h4>Dedicated Team</h4>
                                <span>Access a pool of skilled & cost-effective professionals as needed.</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 wow fadeIn" data-wow-delay="0.5s">
                    <div class="bg-white shadow d-flex align-items-center h-100 px-5" style="min-height: 160px;">
                        <div class="d-flex">
                            <div class="flex-shrink-0 btn-lg-square rounded-circle bg-light">
                                <i style="padding: 16px 21px;" class="fa fa-phone text-primary"></i>
                            </div>
                            <div class="ps-3">
                                <h4>Call Us</h4>
                                <span>We are available Monday to Saturday from 7:00 AM to 7:00 PM. </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <!-- aboutus End -->

    <div class="container py-5">
        <div class="text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
            <p class="fs-5 fw-bold text-primary">Our Services</p>
            <h1 class="display-5 mb-5">Services That We Offer For You</h1>
        </div>
        <div class="row g-4">
            <div class="col-sm-4">
                <div class="card">
                    <img src="<?php echo get_template_directory_uri();?>/assets/images/icons/icons8-garden-64.png" class="card-img-top" alt="...">
                    <div class="card-body text-center">
                      <h5 class="card-title">Garden Maintenance</h5>
                      <p class="card-text">Best services for Regular mowing, edging, and trimming, Weeding and pruning, Fertilizing, pest control & composting.</p>
                      <a href="#" class="btn btn-primary">Read More</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="card">
                    <img src="<?php echo get_template_directory_uri();?>/assets/images/icons/icons8-garden-sprinkler-64.png" class="card-img-top" alt="...">
                    <div class="card-body text-center">
                      <h5 class="card-title">Landscaping</h5>
                      <p class="card-text">We offer Landscape design and planning, Planting and installation of trees, shrubs, and flowers, Hardscaping & Water features.</p>
                      <a href="#" class="btn btn-primary">Read More</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="card">
                    <img src="<?php echo get_template_directory_uri();?>/assets/images/icons/icons8-lawn-mowing-78.png" class="card-img-top" alt="..." style="padding: 0;">
                    <div class="card-body text-center">
                      <h5 class="card-title">Lawn Care</h5>
                      <p class="card-text">Our services includes Lawn mowing and edging, Fertilization and weed control, Lawn disease and pest control.</p>
                      <a href="#" class="btn btn-primary">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    <div class="about">
        <div class="container py-5">
            <div class="row g-5 align-items-end">
                <div class="col-lg-3 col-md-5 wow fadeInUp" data-wow-delay="0.1s">
                    <img class="img-fluid rounded" data-wow-delay="0.1s" src="<?php echo get_field('gc_image');?>">
                </div>
                <div class="col-lg-6 col-md-7 wow fadeInUp" data-wow-delay="0.3s">
                    <h1 class="display-5 mb-4">Expert Garden Care & Landscaping at Brisbane</h1>
                    <p class="mb-4">Maintaining a home garden is an ongoing process that ensures its beauty and productivity. We, at <strong>Green Brissie</strong>, transform your garden with best service of watering, weeding, pruning, pest and disease control you can enjoy a thriving and vibrant home garden year-round.</p>
                    <a class="btn btn-primary py-3 px-4" href="">Explore More</a>
                </div>
                <div class="col-lg-3 col-md-12 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="row g-5">
                        <div class="col-12 col-sm-6 col-lg-12">
                            <div class="border-start ps-4">
                                <i class="fa fa-face-smile fa-3x text-primary mb-3"></i>
                                <h4 class="mb-3">Satisfaction</h4>
                                <span>We strive to build long-term relationships with our clients by providing excellent service</span>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-lg-12">
                            <div class="border-start ps-4">
                                <i class="fa fa-users fa-3x text-primary mb-3"></i>
                                <h4 class="mb-3">Dedicated Team</h4>
                                <span>We have experts for Garden Care, Landscaping & Full-Service Residential Garden Maintenance</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container py-5">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                <p class="fs-5 fw-bold text-primary">Why Choose Us!</p>
                <h1 class="display-5 mb-4">Few Reasons Why People Choosing Us!</h1>
                <p class="mb-4">Our team of skilled horticulturists possesses years of experience in all aspects of garden care. Our commitment to customer satisfaction is unwavering. We strive to build long-term relationships with our clients by providing excellent service, open communication, and addressing any concerns promptly.</p>
                <a class="btn btn-primary py-3 px-4" href="">Explore More</a>
            </div>
            <div class="col-lg-6">
                <div class="row g-4 align-items-center">
                    <div class="col-md-6">
                        <div class="row g-4">
                            <div class="col-12 wow fadeIn" data-wow-delay="0.3s">
                                <div class="text-center rounded py-5 px-4 whyus">
                                    <div class="btn-square bg-light rounded-circle mx-auto mb-4" style="width:90px;">
                                        <img class="py-2" src="<?php echo get_template_directory_uri();?>/assets/images/icons/icons8-satisfaction-64.png">
                                    </div>
                                    <h4 class="mb-0">100% Satisfaction</h4>
                                </div>
                            </div>
                            <div class="col-12 wow fadeIn" data-wow-delay="0.5s">
                                <div class="text-center rounded py-5 px-4 whyus">
                                    <div class="btn-square bg-light rounded-circle mx-auto mb-4" style="width:90px;">
                                        <img class="py-3" src="<?php echo get_template_directory_uri();?>/assets/images/icons/icons8-dedicated-64.png">
                                    </div>
                                    <h4 class="mb-0">Dedicated Team</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 wow fadeIn" data-wow-delay="0.7s">
                        <div class="text-center rounded py-5 px-4 whyus">
                            <div class="btn-square bg-light rounded-circle mx-auto mb-4" style="width:90px;">
                                <img class="py-3" src="<?php echo get_template_directory_uri();?>/assets/images/icons/icons8-gardening-tools-64.png">
                            </div>
                            <h4 class="mb-0">Modern Equipment</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    


    <!-- Quote Start -->
    <div class="container-fluid quote my-5 py-5" style="background:url(<?php echo get_field('fq_image');?>)">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-7">
                    <div class="bg-white rounded p-4 p-sm-5 wow fadeIn" data-wow-delay="0.5s">
                        <h1 class="display-5 text-center mb-5">Get A Free Quote</h1>
                            
                            <?php echo do_shortcode('[wpforms id="53" title="false"]'); ?>
                            
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Quote End -->



    <!-- Testimonial Start -->
    
        <div class="container py-5">
            <div class="row g-5">
                <div class="col-lg-5 wow fadeInUp" data-wow-delay="0.1s">
                    <p class="fs-5 fw-bold text-primary">Testimonial</p>
                    <h1 class="display-5 mb-5">What Our Clients Say About Us!</h1>
                    <p class="mb-4">We value our clients and their feedback. See how we've helped our clients achieve their goals. Their success stories are our inspiration. Here's what they have to say about their experience with us. </p>
                    <a class="btn btn-primary py-3 px-4" href="">See More</a>
                </div>
                <div class="col-lg-7 wow fadeInUp" data-wow-delay="0.5s" style="background-color:#24a328; color: #FFF;">
                    <div id="testiCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
                        <div class="carousel-indicators">
                          <button type="button" data-bs-target="#testiCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                          <button type="button" data-bs-target="#testiCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                          <button type="button" data-bs-target="#testiCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                        </div>
                        <div class="carousel-inner">
                        <?php 
                            $posts = get_posts([
                                'post_type' => 'testimonial',
                                'post_status' => 'publish',
                                'numberposts' => -1
                                // 'order'    => 'ASC'
                              ]);
                              foreach ($posts as $k=>$p){
                                echo '<div class="carousel-item'; 
                                if($k==0){
                                    echo ' active';
                                }
                                echo '" style="min-height: 300px;"><p></p><h4>'.$p->post_content.'</h4><p class="text-center">';
                                if(get_field( "t_name", $p->ID )) {
                                    echo get_field( "t_name", $p->ID );
                                } else {
                                    echo 'Client';
                                }
                                echo ' from ';
                                if(get_field( "t_location", $p->ID )) {
                                    echo get_field( "t_location", $p->ID );
                                } else {
                                    echo 'Brisbane';
                                }
                                echo '</p></div>';
                              } 
                            ?>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#testiCarousel" data-bs-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#testiCarousel" data-bs-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    <!-- Testimonial End -->

<?php get_footer(); ?>