{{ define "main" }}

<!-- Hero Section -->

<style>

  #hero-grid-system{
    position:absolute;
    width:100%;
    z-index: -3;
    margin-top:-5px;
  }

  .hero-container{
    position:relative;
    z-index: 2;
  }

  .full-width-cta-container{
    position:relative;
    z-index: 2;
  }
</style>

<style>

  #m-home-gen-art-1{
    position:absolute;
    width:57vw;
    height: 19.3vw;
    left: 6.8vw;
    margin-top:164vw;
    z-index: 1;
    background-image: url("/Images/gen-art/orange-pattern.jpg");
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  #m-home-gen-art-2{
    position:absolute;
    width:36vw;
    height: 19.3vw;
    right: 6.8vw;
    margin-top:154vw;
    z-index: 3;
    background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  #m-home-gen-art-3{
    position:absolute;
    width:18vw;
    height: 18vw;
    border-radius:200px;
    right: 40vw;
    margin-top:167vw;
    z-index: 3;
    background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    animation: rotation 10s infinite linear;
  }

  #m-home-gen-art-4{
    position:absolute;
    width:36vw;
    height: 12vw;
    right: 50vw;
    margin-top:180vw;
    z-index: 2;
    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  #m-home-gen-art-5{
    position:absolute;
    width:36vw;
    height: 100vw;
    right: 50vw;
    margin-top:20vw;
    z-index: 1;
    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  #m-home-gen-art-6{
    position:absolute;
    width:36vw;
    height: 60vw;
    right: 30vw;
    margin-top:30vw;
    z-index: 0;
    background-image: url("/Images/gen-art/gen-art-_0020_DALL·E 2022-09-02 12.25.55 - crystals in polarized light under microscope.png.jpg");
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  @keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }

}

@media only screen and (min-width: 576px) {

  .gen-art-mobile{
    display: none;
  }

}

</style>

<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-1"></div>
<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-2"></div>
<div class="gen-art-mobile" id="m-home-gen-art-3"></div>
<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-4"></div>
<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-5"></div>
<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-6"></div>

<section class="hero-section">
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="gen-art-1"></div>
<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="gen-art-2"></div>
<!--<img src="/Images/x-large-grid-hero.svg" id="hero-grid-system" alt="hero-grid-system">-->
  <div class="container hero-container">
    <div class="row">
      <div class="col">
        <h1 class="impact">Keep <span class="white">what</span><br><span class="hero-float" style="float:right;"><span class="white">is</span> yours.</span></h1>
      </div>
    </div>
    <div class="row">
      <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <p class="lead hero-subhead animated-25 animatedFadeInUp fadeInUp" style="margin-top:8px; margin-bottom: -9px;">The open-source revolution is here. We’re calling on all devs to build with our powerful, new unified package manager.</p>
        <img class="mobile-grid-element mt-5" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
      </div>
    </div>
  </div>
</section>
  <div class="full-width-cta-container">
   {{- partial "clipboard-copy.html" . -}}
  </div>
  <div class="hero-bottom">

  </div>

<!-- Teal Impact Section -->

<section class="teal-bg impact-section two-boxes">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="box">
          <div>
            <h2 class="black text-center" style="z-index:2;">equitable open-source<br>for <br id="impact-break"><span class="cycle">web3</span></h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .box div {

  }

</style>
<!-- Package Section: Before -->

<section class="package-before-section ">
  <div class="gen-art" id="gen-art-3"></div>
  <div class="gen-art" id="gen-art-4"></div>
  <div class="gen-art" id="gen-art-4_5"></div>
  <div class="container package_before">
    <div class="row one-box">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <h2 style="margin-bottom: 1vw;">about tea.</h2>
        <p class="lead">tea.xyz is a feature-rich, delightful unified package manager that will revolutionize open-source development by providing creators and maintainers value for previously unpaid labor.</p>
        <p>We’ve reimagined what a package manager can do for the first time since brew with new features such as executable markdown, a virtual environment manager, and universal interpretation. In short, we’ve built a tool that improves how you develop by getting out of your way so you can keep building.</p>
        <p>Next we’re going to change the way you get rewarded for what you build by implementing a blockchain protocol that finally recognizes your hard work in open-source. You won’t have to use our web3 features to use tea, but we think you’ll want to. <a class="teal" href="/white-paper/">Check out our whitepaper for more details.</a></p>
        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
        <div class="gen-art-mobile" id="m-gen-art-1"></div>
        <div class="gen-art-mobile" id="m-gen-art-2"></div>
      </div>
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
      </div>
    </div>
  </div>
</section>

<!-- Package Grid -->

<!-- Desktop/Tablet Package Display -->

  <span class="grid-package-display">
    {{- partial "package-grid.html" . -}}
  </span>

<!-- Mobile Package Display -->

  <span class="swiper-package-display">
    {{- partial "swiper.html" . -}}
  </span>

<!-- Style for Swiper -->

<style>

  @media only screen and (min-width: 576px) {

      .grid-package-display{
        display:block;
      }

      .swiper-package-display{
        display:none;
      }
  }

@media only screen and (max-width: 576px) {

    .grid-package-display{
      display:none;
    }

    .swiper-package-display{
      display:block;
    }
}

  .swiper {
    width: 100%;
    height: 100%;
    margin-bottom: 1vw !important;
    margin-top: 1vw;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide figure > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

</style>

<!-- Package CTA Section -->

<hr>
  <section class="package-cta-section" id="authenticate">
      <div class="container package-cta-container one-box">
        <div class="row one-box-down one-box-up">
          <div class="col-lg-9">
            <h3>Authenticate your GitHub for an even bigger sip</h3>
            <p class="lead">Using tea without authenticating is like playing a video game without the DLC. There’s so much more to our ecosystem than a command line interface, and we want you to be a part of it.</p>
          </div>
        </div>
        <hr>
        <div class="row one-box-up">
          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 one-box-down">
            <i class="icon-pattern-random-21 teal display-6"></i>
            <h5>Map out the Tea’cosystem</h5>
            <p>The more people authenticate, the clearer picture we have on just how strong the pot of tea we’re brewing is. We’ll be able to see just how many newcomers and bona-fide OSS veterans have enlisted for the revolution.</p>
            <img class="mobile-grid-element" src="/Images/mobile-grid-element-one-row.svg" alt="grid">
          </div>
          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 one-box-down">
            <i class="icon-pattern-random-15 teal display-6"></i>
            <h5>Get Recognized</h5>
            <p>Authenticating your GitHub enables us to quantify and reward the contributions <em>you’ve already made</em> to the Open-Source Community</p>
            <img class="mobile-grid-element" src="/Images/mobile-grid-element-one-row.svg" alt="grid">
          </div>
          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 one-box-down">
            <i class="icon-pattern-random-19 teal display-6"></i>
            <h5>NFT Reward Badges</h5>
            <p>Authenticating your GitHub entitles you to unique NFT reward badges, including one with rare artwork specific to how soon you authenticate.</p>
            <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
          </div>
        </div>
      </div>
  </section>
{{- partial "full-width-cta.html" . -}}

<!-- Statistics -->

<section class="statistics" style="padding-top: 8.371vw !important; padding-bottom: 8.371vw !important;">

<!-- Generative Art for the statistics section -->

<div class="gen-art" id="gen-art-5"></div>
<div class="gen-art" id="gen-art-6"></div>
<div class="gen-art" id="gen-art-7"></div>
<div class="gen-art" id="gen-art-8"></div>
<div class="gen-art" id="gen-art-9"></div>

<!-- End generative art -->

  <div class="container">
    <div class="row mb-5">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
        <h2>sta'tea'stics</h2>
        <p class="lead">The problem is bigger than most realize. While everyday people use software every day, very few understand that the technology underlying their daily routine is provided by uncompensated labor.</p>
        <p>Even many developers don’t fully recognize the security risks of unpaid open-source until something deep in the stack collapses, like log4J.We want to shine a light on the scale of OSS usage, both to celebrate the achievements of unsung heroes as well as highlight the need for a better way.</p><br>
        <!-- Commenting this out until more data is available. Everything can fit on the homepage as of now.
        {{- partial "detail-btn-large.html" "#" -}}
        -->
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="metric-block" style="float:right; margin-top:-300px;">
          <p class="stat-head">NUMBER OF REPOS</p>
          <p class="stat-number teal" id="stat-one"></p>
          <p class="small gray stat-small-text">Number of repos above 0 stars and forks, owned by tea authenticated develoeprs</p>
        </div>
        <div class="gen-art-mobile" id="m-gen-art-3"></div>
        <div class="gen-art-mobile" id="m-gen-art-4"></div>
        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
        <div class="metric-block mb-5 mt-4">
          <p class="stat-head">AUTHENTICATED DEVS</p>
          <p class="stat-number teal"><span id="count2"></span></p>
          <p class="small gray stat-small-text">This is the number of OSS developers who have chosen to join the battle for the future of the internet.</p>
        </div>
        <div class="gen-art-mobile" id="m-gen-art-5"></div>
        <div class="gen-art-mobile" id="m-gen-art-6"></div>
        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
        <div class="metric-block" style="float:right;">
          <p class="stat-head">OS CONTRIBUTIONS</p>
          <p class="stat-number teal" id="stat-two"></p>
          <p class="small gray stat-small-text">Number of maintainers for those 2042 packages</p>
        </div>
        <div class="gen-art-mobile" id="m-gen-art-7"></div>
        <div class="gen-art-mobile" id="m-gen-art-8"></div>
        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
      </div>
    </div>
  </div>
</section>
{{- partial "full-width-cta.html" . -}}

<!-- partners -->

<section class="partners">
  <div class="gen-art" id="gen-art-10"></div>
  <div class="container">
    <div class="row">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12" style="position:relative; z-index: 2;">
        <h2>partners</h2>
        <p>At our core, tea is about building an open-source ecosystem that is fair for everyone. This is an enormous undertaking and we can’t do it alone. Here we want to thank those that have already enlisted for the Open-Source Revolution.</p>
        <!-- Add in community to partners, with large metric feed. Maybe use fists icon for that -->
      </div>
      <div class="col">

      </div>
    </div>
    <div class="row pt-5">
      <div class="col">
        <img class="partner-logo" id="binance-logo" src="/Images/binance-logo-white.svg" alt="Binance Logo" style="width:16.183vw; z-index:2; position:relative;">
        <img class="partner-logo ps-5" id="galaxy-eco-labs" src="/Images/galaxy-eco.svg" alt="Galaxy Eco Logo" style="width:40%; z-index:2; position:relative;">
        <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid" style="margin-top: -2.8vw;">
        <div class="gen-art-mobile" id="m-gen-art-9"></div>
      </div>
    </div>
  </div>
</section>

{{ end }}