<?php 
/**
* 
* Front Page Template 
* 
*/

get_header(); 

global $post;

?>
<div class="category-slider">
	<?php $banners_section = get_field('banner_section'); ?>
	<div id="sequence" class="seq">
		<div class="seq-screen">
		  <ul class="seq-canvas">
		  	<?php foreach($banners_section as $desktop_banner) { 
			$desktop_banner_image = $desktop_banner['banner_image'];
			$banner_title = $desktop_banner['title']; 
			$banner_sub_title = $desktop_banner['sub_title'];
			?>
			<li class="seq-in">
				  <div class="seq-model">
				  	<img data-seq src="<?php echo $desktop_banner_image['sizes']['home-banner-size']; ?>" alt="<?php echo $desktop_banner_image['alt']; ?>">			
				  </div>
				  <div class="seq-title">
					<h2 data-seq><?php echo $banner_title; ?></h2>
					<h3 data-seq><?php echo $banner_sub_title; ?></h3>
				  </div>
				</li>
			<?php } ?>
		  </ul>
		</div>
  	</div>
</div>

<div class="product-category">
	<div class="container">
		<h3>Explore our CTO Products</h3>
		<?php $home_product_categories = get_field('product_categories'); 
		?>
		<div class="row">
			<?php foreach($home_product_categories as $home_product_category) { 
				$thumbnail_id = get_term_meta( $home_product_category->term_id, 'thumbnail_id', true );
	   			$cat_image = wp_get_attachment_image_src($thumbnail_id, 'home-category-size');
				?>
				<div class="col-6 col-sm-4 col-md-2">
					<div class="item">
						<a href="<?php echo get_term_link($home_product_category); ?>">
							<img src="<?php echo $cat_image[0]; ?>" width="<?php echo $cat_image[0]; ?>" height="<?php echo $cat_image[1]; ?>" alt="<?php echo $home_product_category->name; ?>">
							<h5><?php echo $home_product_category->name; ?></h5>
						</a>
					</div>
				</div>
			<?php } ?>
		</div>
	</div>
</div>

<?php get_footer(); ?>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		
});
</script>