<?php /*template name: Mobile App*/ get_header(); ?>

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

    <?php
    $banner_image = get_field('banner_image');
    if (!empty($banner_image)) : ?>
        <img uk-img data-src="<?php echo esc_url($banner_image['url']); ?>"
             alt="<?php echo esc_attr($banner_image['alt']); ?>"
             width="<?php echo esc_attr($banner_image['width']); ?>"
             height="<?php echo esc_attr($banner_image['height']); ?>"
             uk-cover>
    <?php else : ?>
        <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/hero-senior-couple-at-pharmacy-holding-hands-1.webp"
             data-width data-height uk-cover>
    <?php endif; ?>

    <div uk-scrollspy="cls: uk-animation-fade; delay: 500" class="uk-position-cover uk-text-center uk-container uk-container-large uk-flex uk-flex-center uk-flex-middle">
        <div>
            <h1 class="white uk-margin-medium-top"><?php the_title(); ?></h1>
        </div>
    </div>
</div>

<div class="uk-container uk-container-expand">
<div class="uk-padding">
  <div class="uk-flex uk-flex-bottom" uk-grid>
    <div class="uk-width-1-4@m">
      <div class="uk-text-right">
        <img uk-scrollspy="cls: uk-animation-fade; delay: 300" class="phone uk-visible@m" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/remedy-rx-mobile-app-1@2x.webp" data-width data-height>
      </div>
    </div>
    <div class="uk-width-expand@m">
      <div class="uk-text-center uk-padding-large uk-padding-remove-vertical">
        <P uk-scrollspy="cls: uk-animation-fade; delay: 300">Prescriptions That Wait for You</P>

        <i uk-scrollspy="cls: uk-animation-fade; delay: 300" class="fa-regular fa-mobile-screen green fa-2x uk-margin-medium-top"></i>
        <h4 uk-scrollspy="cls: uk-animation-fade; delay: 300" class="dark-grey">Reach your pharmacy from home</h4>
        <i uk-scrollspy="cls: uk-animation-fade; delay: 300" class="fa-regular fa-mobile-screen green fa-2x uk-margin-medium-top"></i>
        <h4 uk-scrollspy="cls: uk-animation-fade; delay: 300">Manage your medications easily</h4>
        <i uk-scrollspy="cls: uk-animation-fade; delay: 300" class="fa-regular fa-mobile-screen green fa-2x uk-margin-medium-top"></i>
        <h4 uk-scrollspy="cls: uk-animation-fade; delay: 300">Stay up-to-date on what’s new at your local pharmacy</h4>
        <div uk-scrollspy="cls: uk-animation-fade; delay: 300" class="uk-width-2-3@xl uk-margin-auto uk-margin-medium-top uk-margin-medium-bottom">
          <P>Download our free Carmi Remedy’sRx Mobile App for instant access to prescription refills. Plus get access to our flyer specials and newsletter on the go!</P>
        </div>
        <div class="uk-child-width-1-2@m" uk-grid uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 300">
          <div>
            <a class="app-btn" target="_BLANK" href="https://apps.apple.com/ca/app/remedysrx-pharmacy/id1439326443">
              <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/download-on-the-app-store-logo.webp" data-width data-height>
            </a>
          </div>
          <div>
            <a class="app-btn" target="_BLANK" href="https://play.google.com/store/apps/details?id=com.remedysrxstore.android">
              <img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/get-it-on-google-play-logo.webp" data-width data-height>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="uk-width-1-4@m">
      <img uk-scrollspy="cls: uk-animation-fade; delay: 300" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/remedy-rx-mobile-app-2@2x.webp" data-width data-height>
    </div>
  </div>
</div>


</div>

<?php get_footer(); ?>
