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


<div class="black-bg white" uk-scrollspy="cls: uk-animation-fade; delay: 300">
  <div class="uk-container uk-container-large" uk-scrollspy="cls: uk-animation-fade; delay: 500">
    <div class="uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid>
      <div>
        <h1 class="green uk-margin-medium-bottom">Advertise Where People Least Expect It - On Water Bottles!</h1>
        <P>Turn free water into lasting brand connections. Advertise on water bottles that hydrate, inspire, and give back to the community.</P>
        <h5 class="red flash">Get Your Brand in Every Hand</h5>

        <a href="#begin" class="green-btn uk-margin-medium-top">Click Here to Advertise</a>
      </div>
      <div>
        <img class="uk-margin-medium-top uk-margin-medium-bottom" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/aluminum-water-bottle-with-advertisements-wrapped-around-it.webp" data-width data-height>
      </div>
    </div>
  </div>
</div>


<div class="leaves-bg">
  <div class="uk-container">
    	<h6 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center blue uk-margin-remove-bottom uk-margin-large-top">FROM DESIGN TO IMPACT</h6>
      <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" id="how" class="green uk-margin-remove-top uk-text-center uk-margin-large-bottom">How Does it Work?</h2>

      <div class="uk-child-width-1-3@m uk-margin-large-bottom" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
        <div>
          <div class="uk-grid-small uk-flex uk-flex-middle" uk-grid >
            <div class="uk-width-auto">
              <i class="fa-solid fa-circle-1 teal bigger-icon"></i>
            </div>
            <div class="uk-width-expand">
              <h4>Design</h4>
            </div>
          </div>
          <P>Your logo/message is printed on premium sustainable water bottles. Each bottle is custom-branded with business ads, including QR codes, directing people directly to your site.</P>
        </div>

        <div>
          <div class="uk-grid-small uk-flex uk-flex-middle" uk-grid>
            <div class="uk-width-auto">
              <i class="fa-solid fa-circle-2 teal bigger-icon"></i>
            </div>
            <div class="uk-width-expand">
              <h4>Distribution</h4>
            </div>
          </div>
          <P>Our team ensures bottles reach the right audiences.</P>
        </div>

        <div>
          <div class="uk-grid-small uk-flex uk-flex-middle" uk-grid>
            <div class="uk-width-auto">
              <i class="fa-solid fa-circle-3 teal bigger-icon"></i>
            </div>
            <div class="uk-width-expand">
              <h4>Impact</h4>
            </div>
          </div>
          <P>Your brand benefits from visibility, goodwill, and community support.</P>
        </div>
      </div>
  </div>
</div>


<div class="water-bg uk-padding uk-padding-remove-horizontal" uk-scrollspy="cls: uk-animation-fade; delay: 200">
  <div class="uk-container uk-container-expand">
  	<h6 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="green uk-margin-remove-bottom uk-margin-large-top">ADVERTISING WITH PURPOSE</h6>
    <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" id="why" class="white uk-margin-remove-top uk-margin-medium-bottom">Why Water Bottle Advertising?</h2>
    <div class="uk-child-width-1-3@m uk-margin-large-bottom uk-grid-large" uk-grid uk-height-match="target: > div > .white-bg" uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
      <div>
        <div class="white-bg rounded uk-padding">
          <div class="uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid>
            <div class="uk-width-auto">
              <div class="icon-square">
                <i class="fa-solid fa-brightness-low"></i>
              </div>
            </div>
            <div class="uk-width-expand">
              <h4 class="teal uk-margin-remove">High-Visibility Branding</h4>
            </div>
          </div>
          <P class="uk-margin-remove">Your logo and message travel with consumers in offices, gyms, events, and public spaces. <b>Ads are directly placed in people’s hands!</b></P>
        </div>
      </div>

      <div>
        <div class="white-bg rounded uk-padding">
          <div class="uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid>
            <div class="uk-width-auto">
              <div class="icon-square">
                <i class="fa-solid fa-face-smile-beam"></i>
              </div>
            </div>
            <div class="uk-width-expand">
              <h4 class="teal uk-margin-remove">Positive Association</h4>
            </div>
          </div>
          <P class="uk-margin-remove">Providing free water links your brand with care, wellness, and community support. Communities need more support, not more billboards.</P>
        </div>
      </div>

      <div>
        <div class="white-bg rounded uk-padding">
          <div class="uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid>
            <div class="uk-width-auto">
              <div class="icon-square">
                <i class="fa-solid fa-bottle-droplet"></i>
              </div>
            </div>
            <div class="uk-width-expand">
              <h4 class="teal uk-margin-remove">Extended Reach</h4>
            </div>
          </div>
          <P class="uk-margin-remove">Unlike traditional ads, water bottles are kept, carried, and reused — extending brand exposure.</P>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="uk-container">
  <h6 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center blue uk-margin-remove-bottom uk-margin-large-top">ADVERTISING WITH PURPOSE</h6>
  <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="green uk-margin-remove-top uk-text-center uk-margin-large-bottom">Why Brands Choose Free Water Project</h2>

  <div class="uk-child-width-1-4@m" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
    <div>
      <img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/high-visibility-aluminum-bottle-branding@2x.webp" data-width data-height>
      <h4 class="blue">High-Visibility Branding</h4>
      <h5>Your logo travels into offices, gyms, schools, and events.</h5>
    </div>
    <div>
      <img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/hands-together-in-centre-teamwork@2x.webp" data-width data-height>
      <h4 class="blue">Positive Association</h4>
      <h5>Free water links your brand with care and community support.</h5>
    </div>
    <div>
      <img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/woman-drinking-from-free-water-project-aluminum-bottle@2x.webp" data-width data-height>
      <h4 class="blue">Extended Reach</h4>
      <h5>Reusable bottles carry your message further than traditional ads.</h5>
    </div>
    <div>
      <img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/charity-thank-you-written-on-cardboard-boxes@2x.webp" data-width data-height>
      <h4 class="blue">Built-In Goodwill</h4>
      <h5>Every bottle gives back to local charities.</h5>
    </div>
  </div>

  <div uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center uk-margin-large-top uk-margin-large-bottom">
    <a href="#begin" class="green-btn">Click Here to Advertise</a>
  </div>
</div>

<div class="blue-bg">

  <img class="uk-width-1-1 uk-hidden@m" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/white-wave-top-mobile.webp" data-width data-height>
  <img class="uk-width-1-1 uk-visible@m" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/white-wave-top.webp" data-width data-height>

  <div class="uk-container">
    <h6 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center teal uk-margin-remove-bottom uk-margin-large-top">COMMUNITY IMPACT</h6>
    <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" id="community" class="blue uk-margin-remove-top uk-text-center uk-margin-large-bottom">Advertising That Gives Back</h2>

    <div class="uk-child-width-1-2@m uk-margin-large-bottom uk-grid-large" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
      <div>
        <img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/free-water-project-bottle-handoff@2x.webp" data-width data-height>
        <h4 class="teal">Free Distribution</h4>
        <P>We distribute your branded water bottles directly into high-traffic areas, including events, schools, sporting events, gyms, etc.</P>
      </div>
      <div>
        <img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/team-motivation-and-friends-in-a-huddle@2x.webp" data-width data-height>
        <h4 class="teal">Charitable Giving</h4>
        <P><b>10 cents from every bottle of water goes to charity,</b> aligning your company with meaningful local community impact.</P>
      </div>
    </div>
  </div>
</div>
<div class="blue-half-bg">
  <div class="uk-container uk-container-large">
    <img uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-hidden@m" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/eco-friendly-community-illustration-mobile@2x.webp" data-width data-height>
    <img uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-width-1-1 uk-visible@m" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/eco-friendly-community-illustration@2x.webp" data-width data-height>
  </div>
</div>

<div class="uk-container uk-container-large">
  <h4 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="teal uk-text-center uk-margin-large-top">4 Times a Year, a New Charity</h4>
  <div uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-width-3-5@m uk-margin-auto uk-text-center">
    <P>Every quarter, we proudly select a new organization to sponsor — one quarter it might be a local school, the next it could be MADD or another community-driven cause.</P>
  </div>

  <P uk-scrollspy="cls: uk-animation-fade; delay: 300" class="grey uk-text-center small  uk-margin-medium-top uk-margin-medium-bottom">*Not limited to the following listed charities.</P>

  <div uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="autoplay: true; autoplay-interval: 3000">

    <div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-5@m uk-grid uk-grid-large">
      <div>
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/bc-childrens-hospital-logo@2x.webp" data-width data-height>
      </div>
      <div>
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/bcspca-logo@2x.webp" data-width data-height>
      </div>
      <div>
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/easter-seals-canada-logo@2x.webp" data-width data-height>
      </div>
      <div>
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/kelowna-womens-shelter-logo@2x.webp" data-width data-height>
      </div>
      <div>
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/madd-logo@2x.webp" data-width data-height>
      </div>
      <div>
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/united-way-logo@2x.webp" data-width data-height>
      </div>
      <div>
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/variety-childrens-charity-logo@2x.webp" data-width data-height>
      </div>
    </div>
  </div>
</div>


<div class="landscape-bg uk-padding-large uk-padding-remove-horizontal uk-margin-large-top" uk-scrollspy="cls: uk-animation-fade; delay: 300">
  <div class="uk-container" uk-scrollspy="cls: uk-animation-fade; delay: 500">
    <div class="uk-flex uk-flex-bottom" uk-grid>
      <div class="uk-width-expand@m">
        <h6 class="green uk-margin-remove-bottom">LET’S PARTNER</h6>
        <h2 class="white uk-margin-remove large">Put Your Brand in Every Hand</h2>
      </div>
      <div class="uk-width-auto@m">
        <a href="#begin" class="green-btn uk-margin-bottom">Get Started</a>
      </div>
    </div>
  </div>
</div>


<div class="blue-bg">
  <div class="uk-container uk-container-large">
    <h6 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="teal uk-margin-remove-bottom uk-margin-xlarge-top">RENEWABLE MATERIAL. CIRCULAR BY DESIGN.</h6>
    <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" id="sustainability" class="blue uk-margin-remove">Why Aluminum Matters for Sustainability</h2>

    <div class="uk-grid-large uk-child-width-1-2@m uk-margin-large-top uk-margin-large-bottom" uk-grid>
      <div>
        <div uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-flex uk-flex-middle" uk-grid>
          <div class="uk-width-auto">
            <div class="icon-square">
              <i class="fa-solid fa-infinity"></i>
            </div>
          </div>
          <div class="uk-width-expand">
            <h4 class="teal uk-margin-remove">Infinitely Recyclable</h4>
          </div>
        </div>
        <P uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-margin-medium-bottom uk-margin-top">Aluminum retains its material properties no matter how many times it’s recycled. It can be melted down and reformed without losing strength, colour, or quality.</P>

        <div uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-flex uk-flex-middle" uk-grid>
          <div class="uk-width-auto">
            <div class="icon-square">
              <i class="fa-solid fa-circle-bolt"></i>
            </div>
          </div>
          <div class="uk-width-expand">
            <h4 class="teal uk-margin-remove">Massive Energy Savings Using Recycled Aluminum</h4>
          </div>
        </div>
        <P uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-margin-medium-bottom uk-margin-top">Producing aluminum from recycled sources requires up to 95% less energy compared to making it from virgin ore. That means fewer emissions, less environmental damage, and reduced cost.</P>

        <div uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-flex uk-flex-middle" uk-grid>
          <div class="uk-width-auto">
            <div class="icon-square">
              <i class="fa-solid fa-recycle"></i>
            </div>
          </div>
          <div class="uk-width-expand">
            <h4 class="teal uk-margin-remove">Part of a Circular Economy</h4>
          </div>
        </div>
        <P uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-margin-medium-bottom uk-margin-top">Aluminum bottles can be reused, refilled, and recycled again—across formats, finishes, and designs. Whether in bottle, packaging, cap, or other products, the same aluminum continues its life cycle.</P>

      </div>
      <div>
        <img uk-scrollspy="cls: uk-animation-fade; delay: 300" class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/dark-tree-leaves-with-free-water-project-advertising-bottle@2x.webp" data-width data-height>
      </div>
    </div>
  </div>
  <img class="uk-width-1-1 uk-hidden@m" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/white-wave-bottom-mobile.webp" data-width data-height>
  <img class="uk-width-1-1 uk-visible@m" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/white-wave-bottom.webp" data-width data-height>

</div>

<div class="leaves2-bg">
  <div class="uk-container">
    	<h6 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-text-center blue uk-margin-remove-bottom uk-margin-large-top">A NEW WAY TO ADVERTISE</h6>
      <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="green uk-margin-remove-top uk-text-center uk-margin-large-bottom">Benefits to Your Business</h2>
      <div class="uk-width-4-5@m uk-margin-auto">
        <div class="uk-child-width-1-2@m uk-grid-small uk-margin-large-bottom uk-margin-large-top" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
          <div>
            <div class="uk-grid-small" uk-grid>
              <div class="uk-width-auto">
                <i class="fa-light fa-circle-check blue"></i>
              </div>
              <div class="uk-width-expand">
                <P>Increase brand awareness</P>
              </div>
            </div>
          </div>
          <div>
            <div class="uk-grid-small" uk-grid>
              <div class="uk-width-auto">
                <i class="fa-light fa-circle-check blue"></i>
              </div>
              <div class="uk-width-expand">
                <P>Strengthen corporate responsibility profile</P>
              </div>
            </div>
          </div>
          <div>
            <div class="uk-grid-small" uk-grid>
              <div class="uk-width-auto">
                <i class="fa-light fa-circle-check blue"></i>
              </div>
              <div class="uk-width-expand">
                <P>QR code directs people to your website</P>
              </div>
            </div>
          </div>
          <div>
            <div class="uk-grid-small" uk-grid>
              <div class="uk-width-auto">
                <i class="fa-light fa-circle-check blue"></i>
              </div>
              <div class="uk-width-expand">
                <P>Enhance public image</P>
              </div>
            </div>
          </div>
          <div>
            <div class="uk-grid-small" uk-grid>
              <div class="uk-width-auto">
                <i class="fa-light fa-circle-check blue"></i>
              </div>
              <div class="uk-width-expand">
                <P>Deliver a refreshing experience to potential customers</P>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-child-width-1-3@m uk-margin-large-bottom" uk-grid>
        <div>
          <img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/small-family-business-selling-fresh-flowers-happily@2x.webp" data-width data-height>
        </div>
        <div>
          <img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/a-husband-and-wife-with-tire-business-hugging-happily@2x.webp" data-width data-height>
        </div>
        <div>
          <img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/a-confident-real-estate-agent-smiling-after-house-sale@2x.webp" data-width data-height>
        </div>

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

<div class="forest-bg white" uk-scrollspy="cls: uk-animation-fade; delay: 200">
  <div class="uk-container uk-container-expand">
  	<h6 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="green uk-margin-remove-bottom uk-margin-large-top uk-text-center">WORK WITH US</h6>
    <h2 uk-scrollspy="cls: uk-animation-fade; delay: 300" id="begin" class="white uk-margin-remove-top uk-margin-medium-bottom uk-text-center">Let’s Get Your Brand in Every Hand</h2>
    <div class="uk-child-width-1-2@m uk-margin-large-bottom uk-grid-large" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
      <div>
        <h4 class="white">Request a quote. We look forward to speaking with you.</h4>
        <P>Partner with us to make your brand visible, memorable, and meaningful. Together, we can make an impact that flows far beyond the bottle.</P>

        <div class="uk-margin-medium-top" uk-grid>
          <div class="uk-width-auto">
            <i class="fa-regular fa-message-text fa-2x"></i>
          </div>
          <div class="uk-width-expand">
            <P class="small uk-margin-remove">TEXT US</P>
            <a class="white" href="tel:">*** *** ****</a>
          </div>
        </div>

      </div>
      <div>
        <?php echo do_shortcode('[gravityform id="1" title="false"]'); ?>

      </div>
    </div>
  </div>
  <img class="uk-width-1-1 down uk-hidden@m" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/white-wave-bottom-mobile-2.webp" data-width data-height>
  <img class="uk-width-1-1 down uk-visible@m" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/white-wave-bottom-2.webp" data-width data-height>
</div>


<div class="uk-container uk-container-large">
  <div class="uk-child-width-1-2@m uk-grid-large uk-flex uk-flex-bottom uk-margin-large-top uk-margin-xlarge-bottom" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
    <div>
      <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/free-water-project-bottle-layout-1@2x.webp" data-width data-height>
    </div>
    <div>
      <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/free-water-project-advertisements-1@2x.webp" data-width data-height>
    </div>
    <div>
      <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/free-water-project-advertisements-2@2x.webp" data-width data-height>
    </div>
    <div>
      <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/free-water-project-bottle-layout-2@2x.webp" data-width data-height>
    </div>
  </div>
</div>

<?php get_footer(); ?>
