<?php 
/**
 * Template Name: home_new 
 *
 * @package cactus
 */
 get_header();

?>  

    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/uptrade_assests/plugins/aos/aos.css">
    <main>
	<div class="home-block">
        <section class="section-hero" id="hero">
            <div class="parallax-window">
                <img src="<?php  echo get_field( "banner_image" );?>" class="goat-hero-image"
                    data-parallax='{"y" : 100,"smoothness": 0}'>
            </div>
            <!-- <div class="parallax-window" data-parallax="scroll" data-image-src="images/goat-hero-image.png"></div>  -->
            <!-- <div class="content" data-aos="fade-in">
                <a href="#" class="btn-hero">Buy From Us</a>
                <h1>Buy healthy vetted animals straight from the farm</h1>
            </div> -->
            <img class="uptrade-overlay" src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/uptrade-overlay.png" alt="Pattern"
                data-parallax='{"y" :50 ,"smoothness": 10}'>
        </section>
        <section class="section section-uptrade" data-aos="fade-up" data-aos-offset="0">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <img src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/logo.svg" alt="Logo">
                        <h1 class="section-text">Buy healthy vetted animals straight from the farmers</h1>
                    </div>
                </div>
            </div>
        </section>
        <section class="section section-what-we-do" id="whatwedo">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h2 data-aos="fade-up">What we do</h2>
                        <p class="section-text" data-aos="fade-up"><?php  echo get_field( "what_text" );?></p>
                        <div class="text-center">
                            <div class="play-wrap js-videoWrap" data-aos="fade-up">
                                <video controls style="display:none;" preload="none">
                                    <source src="<?php bloginfo('template_url'); ?>/uptrade_assests/uptrade.mp4" type="video/mp4">
                                    <source src="<?php bloginfo('template_url'); ?>/uptrade_assests/uptrade.ogg" type="video/ogg">
                                    Your browser does not support HTML5 video.
                                </video>
                                <div class="js-playerImages">
                                    <img src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/what-we-do.svg" alt="What we do">
                                    <img src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/play.svg" alt="Play" class="play js-playVideo"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="container">
            <div class="section-seperator">
                <img src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/uptrade-house-grey.svg" class="seperator-img">
            </div>
        </div>
        <section class="section section-ourproducts" id="ourproducts">
            <h2 data-aos="fade-up">Our Products and Services</h2>
            <div class="container-fluid no-padding" data-aos="fade-up">
                <div class="row no-gutters">
                    <div class="col-md-4 d-flex">
                       <div class="list-group" id="list-tab" role="tablist">
						  <?php if( have_rows('products_and_services') ): 
						  $i=1;
				          while( have_rows('products_and_services') ): the_row(); 
						  if($i==1){
							  $class="active";
							  $loop="one";
						  }elseif($i==2){
							  $class="";
							  $loop="two";
						  }else{
							  $class="";
							  $loop="three";
						  }
						  ?>
                            <a class="list-group-item list-group-item-action <?php echo $class?>" id="<?php echo $loop;?>-list" data-toggle="list"
                                href="#<?php echo $loop;?>" role="tab" aria-controls="<?php echo $loop;?>">
                                <span class="icon">
                                    <img src="<?php echo the_sub_field('product_image'); ?>">
                                </span>
                                <span class="text">
                                    <?php echo the_sub_field('products_title'); ?>
                                </span>
                            </a>
							
                            <?php 
							$i++;
							endwhile; ?>
	                      <?php endif; ?>
                        </div>
                    </div>
                    <div class="col-md-8 d-flex">
                        <div class="tab-content d-flex" id="nav-tabContent">
						<?php if( have_rows('products_and_services') ): 
						$j=1;
				          while( have_rows('products_and_services') ): the_row(); 
						  if($j==1){
							  $class="active";
							  $loops="one";
						  }elseif($j==2){
							  $class="";
							  $loops="two";
						  }else{
							  $class="";
							  $loops="three";
						  }
						  ?>
                            <div class="tab-pane fade show <?php echo $class;?>" id="<?php echo $loops;?>" role="tabpanel" aria-labelledby="<?php echo $loops;?>-list">
                                <h3><?php echo the_sub_field('products_title'); ?></h3>
                                <p><?php echo the_sub_field('product_description'); ?></p>

                            </div>
							<img class="uptrade-overlay" src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/uptrade-overlay-dark.png" alt="Pattern" data-parallax='{"y" : 50,"smoothness": 10}'>
                           <?php 
						   $j++;
						   endwhile; ?>
	                      <?php endif; ?>
                            

                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="container">
            <div class="section-seperator">
                <img src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/uptrade-house-grey.svg" class="seperator-img">
            </div>
        </div>
        <section class="section section-impact" id="impact">
            <h2 data-aos="fade-up">Our Impact</h2>
            <div class="container" data-aos="fade-up">
                <div class="row">
                    <div class="col-12">
                       
							<p class="section-text"><?php  echo get_field( "our_impact_description" );?></p>
                    </div>
                </div>
            </div>
            <div class="slider-wrap">
                <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist" data-aos="fade-up">
                    <li class="nav-item">
                        <a class="nav-link active" id="Livelihood-tab" data-toggle="tab" href="#Livelihood" role="tab"
                            aria-controls="Livelihood" aria-selected="true">Livelihood</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="Women-tab" data-toggle="tab" href="#Women" role="tab"
                            aria-controls="Women" aria-selected="false">Women</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="Health-tab" data-toggle="tab" href="#Health" role="tab"
                            aria-controls="Health" aria-selected="false">Health & Hygiene</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent" data-aos="fade-up">
                    <div class="tab-pane fade show active" id="Livelihood" role="tabpanel"
                        aria-labelledby="Livelihood-tab">
                        <!-- Swiper -->
                        <div class="swiper-container" id="swiper-livelihood">
                            <div class="swiper-wrapper">
                                <?php if( have_rows('livelihood') ): 
						            while( have_rows('livelihood') ): the_row(); ?>
                                <div class="swiper-slide">
                                    <img src="<?php echo the_sub_field('livelihood_image'); ?>" class="beneficiary-man">
                                    <div class="content">
                                        <p><?php echo the_sub_field('livelihood_caption'); ?></p>
                                    </div>
                                </div>
                                <?php endwhile; ?>
	                           <?php endif; ?>
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                        </div>
                        <div class="container">
                            <div class="row justify-content-center cards">
                                <div class="col-sm-6 col-md-3 d-flex" data-aos="fade-up">
                                    <div class="card">
                                        <h3>$<span class="js-counter">200</span></h3>
                                        <p>Increase in annual household income</p>
                                        <div class="icon">
                                            <img src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/money.svg">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3 d-flex" data-aos="fade-up" data-aos-delay="100">
                                    <div class="card">
                                        <h3><span class="js-counter">1,800</span></h3>
                                        <p>Number of farmers reached / E-mandi</p>
                                        <div class="icon">
                                            <img src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/farmer.svg">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3 d-flex" data-aos="fade-up" data-aos-delay="300">
                                    <div class="card">
                                        <h3><span class="js-counter">17,000</span></h3>
                                        <p>Number of people impacted</p>
                                        <div class="icon">
                                            <img src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/family.svg">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="Women" role="tabpanel" aria-labelledby="Women-tab">
                        <!-- Swiper -->
                        <div class="swiper-container" id="swiper-women">
                            <div class="swiper-wrapper">
                                
                                
                                 <?php if( have_rows('women') ): 
						       while( have_rows('women') ): the_row(); ?>
                                <div class="swiper-slide">
                                    <img src="<?php echo the_sub_field('women_image'); ?>" class="beneficiary-man">
                                    <div class="content">
                                        <p><?php echo the_sub_field('women_caption'); ?></p>
                                    </div>
                                </div>
                                <?php endwhile; ?>
	                           <?php endif; ?>
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                            <!-- Add Arrows -->
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                        <div class="container">
                            <div class="row justify-content-center cards cards-fix">
                                <div class="col-sm-6 col-md-3 d-flex" data-aos="fade-up">
                                    <div class="card">
                                        <h3><span class="js-counter">1,460</span></h3>
                                        <p>Hours of labour saved per woman per year</p>
                                        <div class="icon">
                                            <img src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/hours.svg">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3 d-flex" data-aos="fade-up" data-aos-delay="100">
                                    <div class="card">
                                        <h3><span class="js-counter">8,500</span></h3>
                                        <p>Number of women and girls impacted</p>
                                        <div class="icon">
                                            <img src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/woman.svg">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="Health" role="tabpanel" aria-labelledby="Health-tab">
                        <!-- Swiper -->
                        <div class="swiper-container" id="swiper-health">
                            <div class="swiper-wrapper">
                               <?php if( have_rows('health') ): 
						       while( have_rows('health') ): the_row(); ?>
                                <div class="swiper-slide">
                                    <img src="<?php echo the_sub_field('health_image'); ?>" class="beneficiary-man">
                                    <div class="content">
                                        <p><?php echo the_sub_field('health_caption'); ?></p>
                                    </div>
                                </div>
                                <?php endwhile; ?>
	                           <?php endif; ?>
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                        </div>
                        <div class="container">
                            <div class="row justify-content-center cards cards-fix">
                                <div class="col-sm-6 col-md-3 d-flex" data-aos="fade-up">
                                    <div class="card">
                                        <h3><span class="js-counter">2,830</span></h3>
                                        <p>Number of families with access to water</p>
                                        <div class="icon">
                                            <img src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/faucet.svg">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12" data-aos="fade-up">
                        <div class="find-more">
                            <a href="#">Find out more about our Impact<svg xmlns="http://www.w3.org/2000/svg" width="16"
                                    height="16" viewBox="0 0 16 16">
                                    <defs>
                                        <style>
                                            .cls-1 {
                                                fill: #008080;
                                            }
                                        </style>
                                    </defs>
                                    <g id="arrow-right" transform="translate(-1254 -507)">
                                        <path id="Path_10" data-name="Path 10" class="cls-1"
                                            d="M8,0,6.545,1.455l5.506,5.506H0V9.039H12.052L6.545,14.545,8,16l8-8Z"
                                            transform="translate(1254 507)" />
                                    </g>
                                </svg></a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="container">
                <div class="row justify-content-center cards">
                    <div class="col-sm-6 col-md-3 d-flex" data-aos="fade-up">
                        <div class="card">
                            <h3 class="numscroller" data-min='1' data-delay='2' data-max='1200'
                                data-increment='20'>1200</h3>
                            <p>Increase in annual household income</p>
                            <div class="icon">
                                <img src="images/goat2.svg">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 d-flex" data-aos="fade-up" data-aos-delay="100">
                        <div class="card">
                            <h3 class="numscroller" data-min='1' data-delay='2' data-max='42'
                                data-increment='2'>42</h3>
                            <p>Number of families with access to water</p>
                            <div class="icon">
                                <img src="images/solar-panel2.svg">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 d-flex" data-aos="fade-up" data-aos-delay="200">
                        <div class="card">
                            <h3 class="numscroller" data-min='1' data-delay='2' data-max='14'
                                data-increment='2'>14</h3>
                            <p> Increase in livlihood $/ household/ month</p>
                            <div class="icon">
                                <img src="images/village.svg">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 d-flex" data-aos="fade-up" data-aos-delay="300">
                        <div class="card">
                            <h3 class="numscroller" data-min='1' data-delay='2' data-max='3500'
                                data-increment='50'>3500</h3>
                            <p>Families Impacted</p>
                            <div class="icon">
                                <img src="images/family.svg">
                            </div>
                        </div>
                    </div>
                    <div class="col-12" data-aos="fade-up">
                        <div class="find-more">
                            <a href="#">Find out more about our Impact<svg xmlns="http://www.w3.org/2000/svg"
                                    width="16" height="16" viewBox="0 0 16 16">
                                    <defs>
                                        <style>
                                            .cls-1 {
                                                fill: #008080;
                                            }
                                        </style>
                                    </defs>
                                    <g id="arrow-right" transform="translate(-1254 -507)">
                                        <path id="Path_10" data-name="Path 10" class="cls-1" d="M8,0,6.545,1.455l5.506,5.506H0V9.039H12.052L6.545,14.545,8,16l8-8Z"
                                            transform="translate(1254 507)" />
                                    </g>
                                </svg></a>
                        </div>
                    </div>
                </div>
            </div> -->
        </section>
        <div class="container">
            <div class="section-seperator">
                <img src="<?php bloginfo('template_url'); ?>/uptrade_assests/images/uptrade-house-grey.svg" class="seperator-img"> </div>
        </div>
        <section class="section section-media" id="media">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h2 data-aos="fade-up">In the Media</h2>
                        <div class="row justify-content-center video-wrap">
						
						  <?php if( have_rows('blog') ): 
					           while( have_rows('blog') ): the_row(); ?>
                            <div class="col-sm-6 col-md-4 d-flex" data-aos="fade-up" data-aos-delay="100">
                                <div class="card video">
                                    <a href="<?php echo the_sub_field('blog_link'); ?>" target="_blank">
                                        <img src="<?php echo the_sub_field('blog_image'); ?>" class="podcast-1">
                                        <p><?php echo the_sub_field('blog_title'); ?></p>
                                    </a>
                                </div>
                            </div>
                            <?php endwhile; ?>
	                        <?php endif; ?> 
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section section-partners" id="partners">
		
            <div class="container">
                <div class="row">
                    <div class="col-12 text-center partners-row row1">
                        <?php if( have_rows('patner') ): 
					           while( have_rows('patner') ): the_row(); ?>
							<a href="<?php echo the_sub_field('patner_link'); ?>"
                            target="_blank"  target="_blank" data-aos="fade-up">   
                        <img src="<?php echo the_sub_field('patner_image'); ?>" srcset="<?php echo the_sub_field('patner_image'); ?>" style="height:70px">
						</a>
                        <?php endwhile; ?>
	                        <?php endif; ?> 
                    </div>
                    <!--<div class="col-12 text-center partners-row">
                            <a href=" https://www.inc.com/greg-satell/3-social-entrepreneurs-that-are-changing-world-from-bottom-up.html"
                            target="_blank"  target="_blank" data-aos="fade-up">
                            <img src="<?php //bloginfo('template_url'); ?>/uptrade_assests/images/inc-logo-black.png" srcset="images/inc-logo-black@2x.png 2x"
                                style="height:50px">
                        </a>
                        <a href="https://tribune.com.pk/story/1166757/centuries-old-barter-system-revived-pakistani-startup/"
                            target="_blank" data-aos="fade-up">
                            <img src="<?php //bloginfo('template_url'); ?>/uptrade_assests/images/express-noir.png" srcset="images/express-noir@2x.png 2x">
                        </a>
                        <a href="https://newslinemagazine.com/magazine/goats-and-goths/" target="_blank"
                            data-aos="fade-up">
                            <img src="<?php //bloginfo('template_url'); ?>/uptrade_assests/images/newsline-rouge.png" srcset="images/newsline-rouge@2x.png 2x">
                        </a>
                        <a href="https://www.techjuice.pk/pakistan-startups-impact/" target="_blank" data-aos="fade-up">
                            <img src="<?php //bloginfo('template_url'); ?>/uptrade_assests/images/tech-bleu.png" srcset="images/tech-bleu@2x.png 2x">
                        </a>
                    </div>-->
                </div>
            </div>
        </section>
		</div>
    </main>
    
	
	
<?php get_footer();?>	
 <script src="<?php bloginfo('template_url'); ?>/uptrade_assests/scripts/home.js"></script>
	<script>
	$(function() {
		 
		var url = window.location.href;
	    var result = url.split('#');
        var id=result[1];
		if(id){
			if(id =="ourproducts"){
				$('#ourproducts').find(".active").removeClass("active");

			    $('#ourproducts').find(".active").removeClass("show");

			    $('#two-list').addClass("active");

			    $('#two').addClass("active");

			    $('#two').addClass("show");
			$('html, body').animate({scrollTop: $("#"+id).offset().top - 115}, 700);
			}else{
				$('html, body').animate({scrollTop: $("#"+id).offset().top - 115}, 700);
			}
			  
		 }
	     
		
   
	
	
		
       });
	$(".buy").click(function(){
		 var url='<?php echo get_site_url();?>/buy-from-us-2/';
		 location.href = url;
		});
	</script>
	
</body>

</html>