www/src/layouts/index.html

{{ 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>

<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" 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">
      <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 two-boxes">
        <div class="row one-box-down">
          <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>
        <div class="row">
          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 one-box-down">
            <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>
          </div>
          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 one-box-down">
            <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>
          </div>
          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 one-box-down">
            <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>
          </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">PACKAGES AVAILABLE</p>
          <p class="stat-number teal">5,103,789</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">500,000</span></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">500,000</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 }}