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

<div class="uk-cover-container uk-text-center banner" uk-scrollspy="cls: uk-animation-fade; delay: 300">
    <canvas class="uk-visible@m" width="" height="900"></canvas>
    <canvas class="uk-hidden@m" width="" height="600"></canvas>

	<img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/Hero-banner.avif" data-width data-height uk-cover>

  <div class="uk-overlay uk-overlay-primary uk-position-cover"></div>
	<div class="uk-position-cover uk-text-center uk-container uk-flex uk-flex-center uk-flex-middle"  uk-scrollspy="cls: uk-animation-fade; delay: 500">
        <div>
			
          <h1 class="white">CMI Structural Steel Installations </h1>
          <h3 class="white uk-text-uppercase">Building with Precision, Installing with Strength</h3>
		  <nav class="nav uk-flex uk-flex-center uk-visible@m" role="navigation">
			 <?php html5blank_nav(); ?>
		  </nav>

		  <a class="uk-float-right uk-hidden@m menu_pointer" href="#mobile_nav" uk-toggle>
			<i class="far fa-bars fa-2x"></i>
		  </a>
        </div>
    </div>
</div>


<div class="grey-bg">
  <div class="uk-container uk-container-large">

    <h2  uk-scrollspy="cls: uk-animation-fade; delay: 300" class="white uk-text-center uk-margin-large-top uk-margin-large-bottom" id="projects">PROJECTS</h2>
    <?php
  $gallery = get_field('gallery');
  if ($gallery): ?>
      <div class="uk-grid-small uk-child-width-1-5@m uk-child-width-1-2 uk-margin-large-top uk-margin-large-bottom"  uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 100" uk-grid="masonry: true"  uk-lightbox>
          <?php foreach ($gallery as $image): ?>
              <div>
                  <a class="uk-width-1-1" href="<?php echo esc_url($image['url']); ?>" data-caption="<?php echo esc_attr($image['caption']); ?>" >
                    <div class="uk-width-1-1 uk-inline-clip uk-transition-toggle">
                        <img class="uk-width-1-1" src="<?php echo esc_url($image['sizes']['large']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
                        <div class="uk-transition-fade uk-overlay uk-overlay-primary uk-position-cover uk-flex uk-flex-center uk-flex-middle uk-opacity-0 hover-overlay">
                            <p class="uk-text-center"><?php echo esc_html($image['caption']); ?></p>
                        </div>
                    </div>
                  </a>
              </div>
          <?php endforeach; ?>
      </div>

  <?php endif; ?>

  </div>
</div>

<div class="uk-container"  uk-scrollspy="cls: uk-animation-fade; delay: 300">
  <div class="uk-child-width-1-2@m uk-margin-large-top uk-margin-large-bottom" uk-grid>
    <div>
      <h3 class="uk-margin-remove" id="contact">CONTACT US</h3>
      <h2 class="uk-margin-remove-top">Reach Out With Any Questions Or Inquiries</h2>
      <?php echo do_shortcode('[gravityform id="1" title="false"]'); ?>
    </div>
    <div>
      <div class="uk-text-center uk-text-right@m">
        <h3>PHONE</h3>
        <P class="uk-margin-remove"><a href="tel:1-250-826-8799">1-250-826-8799</a></P>

        <h3>EMAIL</h3>
        <h4 class="uk-margin-remove-bottom">QUOTES/OFFICE</h4>
        <P class="uk-margin-remove"><a href="mailto:troy@cmica.ca">troy@cmica.ca</a></P>
        <h4 class="uk-margin-remove-bottom">SITE FOREMAN</h4>
        <P class="uk-margin-remove"><a href="mailto:lane@cmica.ca">lane@cmica.ca</a></P>
      </div>
    </div>
  </div>
</div>


<?php get_footer(); ?>
