<header class="header">
    <div class="promo-bar js-promo-bar">
        <div class="promo-bar__inner u-page-width-max">
            <a class="promo-bar__link" href="#">Free shipping and free returns</a>
            <button class="promo-bar__close-button">
      <span class="u-visually-hidden">Close</span>
      <svg class="icon icon--close">
  <use xlink:href="/assets/icons/icons.svg#close"></use>
</svg>

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

    <div class="headroom">
        <nav class="header-nav">
            <ul class="header-nav__primary">
                <li class="header-nav__primary-item header-nav__primary-item--active">
                    <div class="header-nav__secondary-wrapper js-header-nav__secondary-wrapper">
                        <div class="u-page-width-max">
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    SHOP
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items header-nav__tertiary-menu-items--graphic">
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="#">
                              <img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
                              Sunglasses
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="#">
                              <img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
                              Goggles
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="#">
                              <img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
                              Accessory Lenses
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--graphic">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--graphic" href="#">
                              <img class="header-nav__tertiary-menu-graphic" src="/assets/images/zeal-header-nav-sunglasses.png">
                              Accessories
                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    TECHNOLOGY
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items header-nav__tertiary-menu-items--horizontal">
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Sunglasses Technology
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Prescription
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Goggle Technology
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Tech Goggle Support
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              RLs
                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    OUR STORY
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items header-nav__tertiary-menu-items--horizontal">
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Who We Are
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Ambassadors
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Community
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Footprint
                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    EXPLORE MORE
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items header-nav__tertiary-menu-items--horizontal">
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Blog
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Events
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Media
                            </a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item header-nav__tertiary-menu-item--horizontal">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--horizontal" href="#">
                              Adventures
                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="">
                    Customer Service
                  </a>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="tel:+18884549325">
                    (888) 454-9325
                    <svg class="icon icon--action-phone">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Contact Us
                    <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Find a Retailer
                    <svg class="icon icon--action-location">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    Customer Service
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Order Status</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Repairs</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Returns</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Product Registration</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Prescription</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Retailers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">FAQs</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Shipping Information</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Login
                  </a>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link js-modal-open-link" href="#" data-modal-id="country-selector">
                    United States
                    <img src="/assets/images/flag-us.png" alt="United States" width="22" height="14">
                  </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="header-menu-bar"></div>
        <a class="header__logo-wrapper" href="#">
      <img class="header__logo" src="/assets/images/zeal-brand-logo.png" alt="Zeal Optics logo">
    </a>
        <div class="header__menu-icon">
            <button class="hamburger-spring header__icon header__icon--menu  zeal js-header-icon--menu" type="button">
        <span class="u-visually-hidden">Menu</span>
        <span class="hamburger-spring__box">
          <span class="hamburger-spring__inner"></span>
        </span>
      </button>
        </div>
        <div class="header__icons">
            <div class="header__icons-inner">
                <button class="header__icon header__icon--search js-header-icon--search">
          <span class="u-visually-hidden">Search</span>
          <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

          <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

        </button>
                <button class="header__icon header__icon--wishlist">
          <span class="u-visually-hidden">Wishlist</span>
          <svg class="icon icon--heart-item">
  <use xlink:href="/assets/icons/icons.svg#heart-item"></use>
</svg>

        </button>
                <button class="header__icon header__icon--account">
          <span class="u-visually-hidden">Account</span>
          <svg class="icon icon--account">
  <use xlink:href="/assets/icons/icons.svg#account"></use>
</svg>

        </button>
                <button class="header__icon header__icon--cart header__icon--cart--button js-header-icon-empty-cart js-header-icon--cart">
          <span class="u-visually-hidden">Cart</span>
          <svg class="icon icon--cart">
  <use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>

          <svg class="icon icon--cart-item">
  <use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>

        </button>
                <a href="#" class="header__icon header__icon--cart header__icon--cart--link js-header-icon-empty-cart">
          <span class="u-visually-hidden">Cart</span>
          <svg class="icon icon--cart">
  <use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>

          <svg class="icon icon--cart-item">
  <use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>

        </a>
                <button class="header-nav__country js-modal-open-link" data-modal-id="country-selector">
          <img class="header-nav__country-image" src="/assets/images/flag-us.png" alt="US" width="31" height="20">
          <span class="header-nav__country-label">US</span>
        </button>
            </div>
        </div>
        <div class="header-search header-flyout header-flyout--search js-header-search">
            <form class="header-search__form">
                <input class="header-search__input js-header-search-input" type="text" placeholder="Search on Zeal">
                <button class="header-search__button js-header-search-button" type="reset">
          <span class="u-visually-hidden">Clear</span>
          <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

          <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

        </button>
            </form>
            <div class="header-search__list">
                <span class="header-search__list-label">Latest Search</span>
                <ul class="header-search__list-items">
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Forecast</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Eclipse</a>
                    </li>
                </ul>
            </div>
            <div class="header-search__list">
                <span class="header-search__list-label">Popular Searches</span>
                <ul class="header-search__list-items">
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Slate</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Tramline</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Level</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Vintage</a>
                    </li>
                </ul>
            </div>
            <div class="header-search__results">
                <a class="header-search__result-link" href="#">View all results <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Ho&#x27;okipa Reader Universal Fit</span>
          </a>
                </div>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Sandy Beach Universal Fit</span>
          </a>
                </div>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Hanalei Universal Fit</span>
          </a>
                </div>
            </div>
        </div>
        <div class="header-cart header-cart--default header-cart--tax header-flyout header-flyout--cart js-header-cart">
            <div class="header-cart__header">
                <span class="header-cart__title">Your Cart <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</span>
                <span class="header-cart__item-count header-cart__item-count--empty">0 items</span>
            </div>
            <div class="header-cart__empty">
                <div class="header-cart__empty-inner">
                    <img class="header-cart__empty-brand-logo" src="/assets/images/zeal-brand-mark-grey-small.png">
                    <span class="header-cart__empty-label">Your Shopping Cart is Empty</span>
                    <a class="header-cart__empty-button button button--primary">Shop Now</a>
                </div>
            </div>
        </div>
        <div class="header-flyout-overlay js-header-flyout-overlay"></div>
    </div>
</header>

<main class="main main--secondary u-page-width-max">
    <div class="l-secondary-secondary-hero">
        <div class="secondary-hero">
            <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-about-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-about-small.jpg 432w, /assets/images/hero-about-large.jpg 1420w">
            <div class="secondary-hero__copy">
                <h1 class="secondary-hero__title">Who we are &amp; what we believe in</h1>
                <h2 class="secondary-hero__subtitle">At ZEAL Optics, we build the highest quality eyewear for people like us who live for outdoor adventure. But that is just the beginning of our adventure. We focus on more than just being an eyewear company. We are guided by a simple set
                    of beliefs: Use Less, Give Back, Explore More.</h2>
                <button class="button button--primary secondary-hero__call-to-action">We are all Zeal</button>

            </div>
        </div>

    </div>
    <div class="l-secondary-mosaic-card">
        <div class="mosaic-card mosaic-card--call-to-action u-block u-page-width-max-gutters">
            <div class="mosaic-card__pair mosaic-card__pair--image-right">
                <a class="mosaic-card__link js-mosaic-card__link" href="">
                    <div class="mosaic-card__image-container">
                        <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-4-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-4-small.jpg 300w, /assets/images/mosaic-card-4-medium.jpg 335w, /assets/images/mosaic-card-4-max.jpg 474w">
                    </div>
                    <div class="mosaic-card__text">
                        <span class="mosaic-card__prefix">Family</span>
                        <p class="mosaic-card__description">We have a diverse family of athletes and ambassadors ranging from explorers to top-level competitors who all rely on unsurpassed optics to excel in their passions.</p>
                        <button class="mosaic-card__call-to-action button button--outlined js-mosaic-card__call-to-action" href="">Meet Our Ambassadors</button>
                    </div>
                </a>
            </div>
            <div class="mosaic-card__pair mosaic-card__pair--image-left">
                <a class="mosaic-card__link js-mosaic-card__link" href="">
                    <div class="mosaic-card__image-container">
                        <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-5-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-5-small.jpg 300w, /assets/images/mosaic-card-5-medium.jpg 335w, /assets/images/mosaic-card-5-max.jpg 474w">
                    </div>
                    <div class="mosaic-card__text">
                        <span class="mosaic-card__prefix">Team</span>
                        <p class="mosaic-card__description">Come visit our flagship store at 1230 Spruce Street in Boulder, Colorado next time. We’d love to meet you!</p>
                        <button class="mosaic-card__call-to-action button button--outlined js-mosaic-card__call-to-action" href="">Virtual Tour</button>
                    </div>
                </a>
            </div>
            <div class="mosaic-card__pair mosaic-card__pair--image-bottom">
                <div class="mosaic-card__image-container">
                    <img class="mosaic-card__image u-object-fit-cover" src="/assets/images/mosaic-card-6-max.jpg" sizes="(min-width: 1025px) 33vw, (min-width: 681px) 50vw, 100vw" srcset="/assets/images/mosaic-card-6-small.jpg 300w, /assets/images/mosaic-card-6-medium.jpg 335w, /assets/images/mosaic-card-6-max.jpg 474w">
                </div>
                <div class="mosaic-card__text">
                    <span class="mosaic-card__prefix">Flagship</span>
                    <p class="mosaic-card__description">We are a small team based in Boulder, Colorado. When we’re not up working late to improve our products, we’re up early to get outside and test what we make.</p>
                </div>
            </div>
        </div>

    </div>
    <div class="l-secondary-centered-text">
        <div class="centered-text">
            <img class="centered-text__image" src="/assets/images/zeal-centered-text.png" alt="Use Less">
            <h2 class="centered-text__headline">Use Less</h2>
            <div class="centered-text__subheadline">
                <p>We use plant-based materials in all our sunglass frames and lenses to help you see the world around you more clearly while protecting the views that inspire us for generations to come. We believe it’s our responsibility to take the charge
                    and create the change.</p>
            </div>
            <a class="button button--outlined centered-text__action" href="#">Our Technology</a>
        </div>

    </div>
    <div class="l-secondary-big-card">
        <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
            <a class="big-card__link" href="">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">Give Back</span>
                    <h2 class="big-card__headline"></h2>
                    <p class="big-card__description">Living outdoors will change your life, but not everyone gets a chance to experience the wild. At ZEAL we work to bring inspirational adventures to those who might never have felt the thrill of a running river or the calm of a mountain
                        top. We do this through some amazing projects and partnerships that reduce our environmental footprint, create social change and leave us all with better memories of our time outdoors.</p>
                    <button class="big-card__call-to-action button button--outlined">Our Community</button>
                </div>
            </a>
        </div>

    </div>
    <div class="l-secondary-big-card">
        <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
            <a class="big-card__link" href="">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">Explore More</span>
                    <h2 class="big-card__headline"></h2>
                    <p class="big-card__description">Life is about having fun and making memories. Through our lenses, we hope you will experience adventure, pursue your passions, and define your purpose on a daily basis. Get outside and explore more. Maybe we’ll see you out there.</p>
                    <button class="big-card__call-to-action button button--outlined">Our Blog</button>
                </div>
            </a>
        </div>

    </div>
</main>
<div class="subscribe">
    <div class="u-page-width-max">
        <div class="subscribe__text">
            <h5 class="subscribe__header">Subscribe to our &#x27;ohana</h5>
            <span class="subscribe__description">Keep up with the Latest Products and News.</span>
        </div>
        <div class="subscribe-form-wrapper subscribe-form-wrapper--default js-subscribe-form js-subscribe-form--default">
            <form class="subscribe-form">
                <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Your Email" autocomplete="email">
                <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail">
  <use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>

    </button>
            </form>
            <div class="subscribe-form-status">
                <span class="subscribe-form-status__message js-subscribe-status-message"></span>
                <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </span>
            </div>
            <span class="subscribe-form-legal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
  </span>
        </div>

    </div>
</div>

<footer class="footer footer--default">
    <div class="footer-nav u-page-width-max">
        <a class="footer-nav__action footer-nav__action--phone" href="tel:+1800229933">
      1-888-666-5905
      <svg class="icon icon--action-phone">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

    </a>
        <a class="footer-nav__action footer-nav__action--contact" href="#">
      Contact Us
      <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

    </a>
        <a class="footer-nav__action footer-nav__action--retailers" href="#">
      Find a Retailer
      <svg class="icon icon--action-location">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

    </a>
        <div class="footer-nav__menus">
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Zeal Optics
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">About Us</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Sunglasses Technology</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Goggles Technology</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Events</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Careers</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Flagship Store</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Trade Login</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Blog</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Media</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Adventures</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Customer Service
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Contact Us</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Order Status</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Repairs</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Prescription</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Tech Goggle Support</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Retailers</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">FAQs</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Shipping Information</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link js-modal-open-link" href="#" data-modal-id="footer-catalogs">Catalogs</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Legal
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Terms &amp; Privacy</a>
                        </li>
                    </ul>
                </div>
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Gift Cards
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">VIP &amp; Gift Cardholder</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Shop Gift Card</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-nav__forms">
            <form class="footer__retailer-form">
                <label class="footer__retailer-label" for="footer__retailer-input">Retailers</label>
                <input class="footer__retailer-input" name="footer__retailer-input" type="text" placeholder="ZIP code or City" />
                <button class="footer__retailer-submit" type="submit">
          <svg class="icon icon--angle-right">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

        </button>
            </form>
            <div class="subscribe-form-wrapper subscribe-form-wrapper--mini js-subscribe-form js-subscribe-form--default">
                <form class="subscribe-form">
                    <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Subscribe to Our &#x27;Ohana" autocomplete="email">
                    <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail">
  <use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>

    </button>
                </form>
                <div class="subscribe-form-status">
                    <span class="subscribe-form-status__message js-subscribe-status-message"></span>
                    <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </span>
                </div>
                <span class="subscribe-form-legal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
  </span>
            </div>

        </div>
    </div>
    <div class="footer__bottom">
        <div class="u-page-width-max">
            <a class="footer__geo footer__geo--country js-modal-open-link" data-modal-id="country-identifier" href="#">
        <span class="footer__geo-label">Country:</span>
        <span class="footer__geo-current">
          United Arab Emirates
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </span>
      </a>
            <ul class="social-icons">
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-instagram">
  <use xlink:href="/assets/icons/icons.svg#social-instagram"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-facebook">
  <use xlink:href="/assets/icons/icons.svg#social-facebook"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-twitter">
  <use xlink:href="/assets/icons/icons.svg#social-twitter"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-tumblr">
  <use xlink:href="/assets/icons/icons.svg#social-tumblr"></use>
</svg>
</a>
                </li>
            </ul>

        </div>
    </div>
    <div class="footer__copyright">
        <img class="footer__copyright-logo" src="/assets/images/zeal-brand-logo-small-white.png">
        <span class="footer__copyright-text">©2016 Zeal Optics, Colorado</span>
    </div>
</footer>
{{render (dynamicComponent header)}}
<main class="main main--secondary u-page-width-max">
  {{#if breadcrumb}}
  {{render '@breadcrumb' breadcrumb}}
  {{/if}}
  {{#each components}}
  <div class="l-secondary-{{component}}">
    {{render (dynamicVariant component variant) context}}
  </div>
  {{/each}}
  {{#if imageCards}}
  <div class="image-cards{{#if imageCardsModifier}} image-cards--retailer{{/if}}">
    {{#each imageCards}}
    {{render '@image-card' this merge=true}}
    {{/each}}
  </div>
  {{#if imageCardCallToAction}}
  <a class="button button--primary l-secondary-image-card-call-to-action" href="#">{{imageCardCallToAction}}</a>
  {{/if}}
  {{/if}}
</main>
{{render '@subscribe'}}
{{render (dynamicComponent footer)}}
{
  "pageModals": [
    {
      "component": "video-modal",
      "context": {
        "id": "video-youtube",
        "youtubeId": null
      }
    }
  ],
  "header": "header--zeal--empty-cart",
  "footer": "footer--zeal",
  "components": [
    {
      "component": "secondary-hero",
      "variant": "default",
      "context": {
        "title": "Who we are & what we believe in",
        "subtitle": "At ZEAL Optics, we build the highest quality eyewear for people like us who live for outdoor adventure. But that is just the beginning of our adventure. We focus on more than just being an eyewear company. We are guided by a simple set of beliefs: Use Less, Give Back, Explore More.",
        "callsToAction": [
          {
            "modifier": "primary",
            "buttonValue": "We are all Zeal",
            "classes": [
              "secondary-hero__call-to-action"
            ]
          }
        ],
        "image": {
          "small": {
            "src": "/assets/images/hero-about-small.jpg",
            "width": "432"
          },
          "large": {
            "src": "/assets/images/hero-about-large.jpg",
            "width": "1420"
          },
          "vw": "100"
        }
      }
    },
    {
      "component": "mosaic-card",
      "variant": "call-to-action",
      "context": {
        "modifier": "call-to-action",
        "pairs": [
          {
            "modifier": "image-right",
            "imageSmall": "/assets/images/mosaic-card-4-small.jpg",
            "imageMedium": "/assets/images/mosaic-card-4-medium.jpg",
            "imageMax": "/assets/images/mosaic-card-4-max.jpg",
            "imageSmallWidth": "300",
            "imageMediumWidth": "335",
            "imageMaxWidth": "474",
            "imageMediumVw": "50",
            "imageXlargeVw": "33",
            "prefix": "Family",
            "description": "We have a diverse family of athletes and ambassadors ranging from explorers to top-level competitors who all rely on unsurpassed optics to excel in their passions.",
            "callToAction": "Meet Our Ambassadors"
          },
          {
            "modifier": "image-left",
            "imageSmall": "/assets/images/mosaic-card-5-small.jpg",
            "imageMedium": "/assets/images/mosaic-card-5-medium.jpg",
            "imageMax": "/assets/images/mosaic-card-5-max.jpg",
            "imageSmallWidth": "300",
            "imageMediumWidth": "335",
            "imageMaxWidth": "474",
            "imageMediumVw": "50",
            "imageXlargeVw": "33",
            "prefix": "Team",
            "description": "Come visit our flagship store at 1230 Spruce Street in Boulder, Colorado next time. We’d love to meet you!",
            "callToAction": "Virtual Tour"
          },
          {
            "modifier": "image-bottom",
            "imageSmall": "/assets/images/mosaic-card-6-small.jpg",
            "imageMedium": "/assets/images/mosaic-card-6-medium.jpg",
            "imageMax": "/assets/images/mosaic-card-6-max.jpg",
            "imageSmallWidth": "300",
            "imageMediumWidth": "335",
            "imageMaxWidth": "474",
            "imageMediumVw": "50",
            "imageXlargeVw": "33",
            "prefix": "Flagship",
            "description": "We are a small team based in Boulder, Colorado. When we’re not up working late to improve our products, we’re up early to get outside and test what we make."
          }
        ]
      }
    },
    {
      "component": "centered-text",
      "variant": "default"
    },
    {
      "component": "big-card",
      "variant": "image-right",
      "context": {
        "modifier": "image-right",
        "images": [
          {
            "imageSmall": "/assets/images/big-card-right-small.jpg",
            "imageMedium": "/assets/images/big-card-right-medium.jpg",
            "imageLarge": "/assets/images/big-card-right-large.jpg",
            "imageSmallWidth": "400",
            "imageMediumWidth": "533",
            "imageLargeWidth": "710",
            "imageMediumVw": "50"
          }
        ],
        "prefix": "Give Back",
        "description": "Living outdoors will change your life, but not everyone gets a chance to experience the wild. At ZEAL we work to bring inspirational adventures to those who might never have felt the thrill of a running river or the calm of a mountain top. We do this through some amazing projects and partnerships that reduce our environmental footprint, create social change and leave us all with better memories of our time outdoors.",
        "callToAction": "Our Community"
      }
    },
    {
      "component": "big-card",
      "variant": "image-left",
      "context": {
        "modifier": "image-left",
        "images": [
          {
            "imageSmall": "/assets/images/big-card-right-small.jpg",
            "imageMedium": "/assets/images/big-card-right-medium.jpg",
            "imageLarge": "/assets/images/big-card-right-large.jpg",
            "imageSmallWidth": "400",
            "imageMediumWidth": "533",
            "imageLargeWidth": "710",
            "imageMediumVw": "50"
          }
        ],
        "prefix": "Explore More",
        "description": "Life is about having fun and making memories. Through our lenses, we hope you will experience adventure, pursue your passions, and define your purpose on a daily basis. Get outside and explore more. Maybe we’ll see you out there.",
        "callToAction": "Our Blog"
      }
    }
  ]
}
  • Content:
    .l-secondary-accordion-tabs,
    .l-secondary-big-card {
      @include breakpoint($breakpoint-md) {
        margin: 30px $gutter-width-half;
      }
    }
    
    .l-secondary-accordion-tabs,
    .l-secondary-secondary-contact {
      @include breakpoint($breakpoint-xl) {
        max-width: 940px;
        margin-right: auto;
        margin-left: auto;
      }
    }
    
    .l-secondary-big-card {
      @include breakpoint($breakpoint-md) {
        .big-card {
          margin: 0;
        }
      }
    }
    
    .l-secondary-secondary-contact {
      margin: 0 $gutter-width-half 50px;
    
      @include breakpoint($breakpoint-xl) {
        margin: 0 auto 50px;
      }
    }
    
    .l-secondary-centered-text {
      margin: 40px 0;
    
      @include breakpoint($breakpoint-xl) {
        margin: 60px 0;
      }
    }
    
    .l-secondary-filters {
      margin-bottom: 10px;
    
      @include breakpoint($breakpoint-md) {
        margin: 30px 0 50px;
    
        .filter-controls {
          display: none;
        }
      }
    }
    
    .l-secondary-image-card-call-to-action {
      display: block;
      margin: 40px 0 60px 50%;
      clear: both;
      transform: translateX(-50%);
    }
    
  • URL: /components/raw/secondary-page/secondary-page.scss
  • Filesystem Path: src/components/03-pages/secondary-page/secondary-page.scss
  • Size: 987 Bytes

There are no notes for this item.