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

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

	<img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/jewelry-hero-1.webp" data-width data-height uk-cover>


	<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>
          <div class="uk-width-2-3@m uk-margin-auto">
            <h1 class="white">About Jewelhouse Canada</h1>
            <P class="uk-margin-medium-top uk-margin-medium-bottom">Jewelhouse Canada is a Canadian wholesaler and distributor of quality jewellery to independent Canadian jewelers. Jewelhouse Canada sources well-designed, price-pointed pieces from North America and around the world. Our goal is to service and provide the independent jeweler with current, stylish, well-made sellable products at a great value.</P>

            <div class="uk-child-width-1-2@m" uk-grid>
              <div>
                <div class="uk-text-center uk-text-right@m">

                  <?php
                  // Check if the correct password cookie is set
                  if ( isset( $_COOKIE['custom_password'] ) && $_COOKIE['custom_password'] === get_field('password_field', 7) ) {
                  ?>
                  <a  href="<?php echo home_url(); ?>/contact" class=" yellow-btn yellow-blue">Contact Us <i class="fa-kit fa-diamond-icon"></i></a>

                  <?php
                  } else { ?>
                    <a href="" uk-toggle="target: #login" class="yellow-btn">Log In or Sign Up <i class="fa-kit fa-diamond-icon"></I></a>
                  <?php }
                  ?>

                </div>
              </div>
              <div>
                <div class="uk-text-center uk-text-left@m">
                  <a href="<?php echo home_url(); ?>/collections" class="outline-btn">View Our Jewellery <i class="fa-light fa-ring-diamond"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</div>



<div class="uk-container uk-container-large uk-margin-xlarge-top">
	<div class="uk-child-width-1-2@m" uk-grid uk-scrollspy="cls: uk-animation-fade; delay: 300">
    <div>
      <h2 class="uk-margin-remove">Our Collections</h2>
    </div>
    <div>
      <P>Browse through our collections. Jewelhouse Canada carries an attractive, price-pointed selection of 10 karat & 14 karat Chain, 10 karat hoop earrings, handmade catalogue of special order any karat &amp; length chain, program trays and body jewellery.</P>
    </div>
  </div>

  <div class="uk-grid-small uk-margin-large-top" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
    <div class="uk-width-1-2@m">
      <div>
        <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
        	<img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/handmade-chains.webp" data-width data-height>
          <div class="uk-position-bottom-left ">
            <div class="white-box">
              <h3 class="uk-margin-remove">Handmade Chains</h3>
            </div>
          </div>
          <a href="<?php echo home_url(); ?>/collections/handmade-chains/" class="uk-position-cover"></a>
        </div>
      </div>
    </div>
    <div class="uk-width-1-2@m">
      <div>
        <div class="uk-grid-small" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
          <div class="uk-width-1-2">
            <div>
              <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/program-trays.webp" data-width data-height>
                <div class="uk-position-bottom-left ">
                  <div class="white-box">
                    <h3 class="uk-margin-remove">Program Trays</h3>
                  </div>
                </div>
                <a href="<?php echo home_url(); ?>/collections/program-trays/" class="uk-position-cover"></a>
              </div>
            </div>
          </div>
          <div class="uk-width-1-2">
            <div>
              <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/body-jewellery.webp" data-width data-height>
                <div class="uk-position-bottom-left ">
                  <div class="white-box">
                    <h3 class="uk-margin-remove">Body Jewellery</h3>
                  </div>
                </div>
                <a href="<?php echo home_url(); ?>/collections/body-jewellery/" class="uk-position-cover"></a>
              </div>
            </div>
          </div>
          <div class="uk-width-1-2">
            <div>
              <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/14-karat-chains-2.webp" data-width data-height>
                <div class="uk-position-bottom-left ">
                  <div class="white-box">
                    <h3 class="uk-margin-remove">14 Karat Chains</h3>
                  </div>
                </div>
                <a href="<?php echo home_url(); ?>/collections/14-karat-chains/" class="uk-position-cover"></a>
              </div>
            </div>
          </div>

          <div class="uk-width-1-2">
            <div>
              <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/18-karat-chains.webp" data-width data-height>
                <div class="uk-position-bottom-left ">
                  <div class="white-box">
                    <h3 class="uk-margin-remove">18 Karat Chains</h3>
                  </div>
                </div>
                <a href="<?php echo home_url(); ?>/collections/18-karat-chains/" class="uk-position-cover"></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="uk-width-1-2@m">
      <div>
        <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
          <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/10-karat-chains-bracelets.webp" data-width data-height>
          <div class="uk-position-bottom-left ">
            <div class="white-box">
              <h3 class="uk-margin-remove">10 Karat Chains and Bracelets</h3>
            </div>
          </div>
          <a href="<?php echo home_url(); ?>/collections/10-karat-chains-bracelets" class="uk-position-cover"></a>
        </div>
      </div>
    </div>
    <div class="uk-width-1-2@m">
      <div>
        <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
          <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/10-karat-hoop-earrings.webp" data-width data-height>
          <div class="uk-position-bottom-left ">
            <div class="white-box">
              <h3 class="uk-margin-remove">10 Karat Hoop Earrings</h3>
            </div>
          </div>
          <a href="<?php echo home_url(); ?>/collections/10-karat-hoop-earrings/" class="uk-position-cover"></a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="crystal-bg uk-padding-large uk-padding-remove-horizontal uk-text-center uk-margin-top" uk-scrollspy="cls: uk-animation-fade; delay: 300">
  <div class="uk-container" uk-scrollspy="cls: uk-animation-fade; delay: 500">
    <h2 class="white">Register as a Retail Client</h2>
    <a href="" uk-toggle="target: #login" class="yellow-btn">Register Now <i class="fa-kit fa-diamond-icon"></I></a>
  </div>
</div>

<div class="uk-container uk-margin-large-bottom">
  <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center uk-margin-xlarge-top">Contact Us</h2>
  <P uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center">If you need to get ahold of us right away please contact Mario at:</P>

  <div class="uk-child-width-1-2@m uk-margin-medium-top" uk-grid uk-scrollspy="cls: uk-animation-fade; delay: 300">
    <div>
      <div class="uk-grid-small" uk-grid>
        <div class="uk-width-auto@m">
          <div class="uk-grid-collapse uk-flex uk-flex-middle" uk-grid>
            <div class="uk-width-auto">
              <i class="fa-kit fa-jewel-house-leaf fa-2-5x red"></i>
            </div>
            <div class="uk-width-expand">
              <P class="uk-margin-remove small">Vancouver/Lower Mainland</P>
              <h4 class="uk-margin-remove"><a class="blue yellow-hov" href="tel:604-341-9496">604-341-9496</a></h4>
            </div>
          </div>
        </div>
        <div class="uk-width-expand@m">
          <div class="uk-flex uk-flex-right">
            <div class="uk-grid-collapse uk-flex uk-flex-middle" uk-grid>
              <div class="uk-width-auto">
                <i class="fa-kit fa-jewel-house-leaf fa-2-5x red"></i>
              </div>
              <div class="uk-width-expand">
                <P class="uk-margin-remove small">Canada-wide toll-free</P>
                <h4 class="uk-margin-remove"><a class="blue yellow-hov" href="tel:1-866-341-9496">1-866-341-9496</a></h4>
              </div>
            </div>
          </div>
        </div>
      </div>

      <h4 class="uk-margin-medium-top">Jewelhouse Canada,<br> P.O. Box 20242, RPO Towne Centre,<br> Kelowna, BC<br> V1Y 9H2</h4>
    </div>
    <div>
      <div class="grey-bg uk-padding">
        <h4 class="uk-margin-remove-top">Or, contact us using our contact form, thank you.</h4>
        <a href="<?php echo home_url(); ?>/contact" class="yellow-btn yellow-blue">Contact Form <i class="fa-light fa-ring-diamond"></i></a>

      </div>
    </div>
  </div>
</div>



<?php get_footer(); ?>
