www/src/layouts/index.html

{{ define "main" }}

<!-- Hero Section -->

<style>

  .comment{
    background-color: #ff4100;
    border-radius: 5px;
  }

  .comment-success{
    background-color: #00ffd0;
    border-radius: 5px;
  }

  .comment-process{
    background-color: #ffff00;
    border-radius: 5px;
  }

  .comment-success code{
    color: #1a1a1a;
  }
/*
  .hero{
    background-image: url("/Images/hero-background-mountains.png") !important;
    background-attachment: scroll;
    background-position: right;
    background-repeat: repeat-y;
    background-size: cover !important;
  }
*/
  @media only screen and (max-width: 992px) {

    .hero{
      background-image: none !important;
    }

  }

  code{
    color:white;
    font-size: 14px;
  }

  .inner-glow{
    color: #1a1a1a;
    text-shadow: 0 0px 18px rgba(255, 255, 255, 0.5);
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .code-box{
    border: 1px solid #ff4100;
    position: relative;
    padding: 2px;
    border-radius: 2px;
    color: #ff4100;
  }

  #copy-button{
    height: 40px;
    width: 120px;
    font-family: "inter", sans-serif !important;
    text-transform: uppercase;
  }

  @media only screen and (max-width: 768px) {
    .mobile-ctas,
    .mobile-term-loc{
      visibility: visible;
    }
    .desktop-ctas,
    .boilerplate,
    .hero-description,
    .hero-lead,
    .desktop-term-loc,
    .too-much{
      display:none;
    }
    .hero-text,
    .mobile-lead{
      text-align:center;
    }
    .mbtn{
      height:50px;
    }
    .hero-col{
      padding-top: 16vw;
      padding-bottom: 16vw;
    }
    .email{
      height: 50px !important;
    }
    .install-label{
      text-align: center;
    }
  }

  @media only screen and (min-width: 768px) {
    .mobile-ctas,
    .mobile-lead,
    .mobile-term-loc,
    .mobile-disclaimer,
    .section-divider{
      display:none;
    }
    .desktop-ctas,
    .desktop-term-loc{
      visibility: visible;
    }
    .bottom-cta{
      display: block;
      width:50%;
      margin-left:auto;
      margin-right:auto;
    }
  }

</style>

<section class="hero one-box">
  <div class="container">
    <div class="row gx-5">
      <div class="hero-col col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 my-auto">
        <h1 class="display-1 hero-text" style="z-index:3; position: relative;"><span class="inner-glow ">Invisible</span> yet <span class="callout white">powerful</span></h1>
          <p class="lead hero-lead">Upgrade to Tea - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth updates. From the creator of Brew.</p>
          <p class="lead mobile-lead mb-5">tea... from the creator of <a href="https://brew.sh/" target="_blank">brew</a></p>
          <p class="mb-5 hero-description">Introducing tea, the cross-platform package manager of the future. Say goodbye to slow package managers. With tea, simply type commands and it takes care of the rest. Get the latest version easily and support specific tool versions for different projects. Encoding dependencies in the README makes it readable by humans and tea, providing easier access for users. Experience better package management with tea.</p>

          <div class="mobile-ctas">
            {{- partial "mobile-ctas.html" -}}
          </div>

          {{- partial "desktop-ctas.html" -}}

      </div>
      <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
        <div>
          <p class="install-label">Install tea by running our one-liner</p>
        </div>
        <div class="terminal-animation mb-3">
          {{- partial "hero-terminal-animation.html" -}}
        </div>
      </div>
    </div>
  </div>
</section>

<style>

    .term-icon{
      position: relative;
      top: 3px;
    }

    .term-btn{
      text-transform: uppercase;
    }

    .traffic-light{
      height: 16px;
      width: 16px;
      border: 1px solid gray;
      border-radius: 100px;
      display: inline-block;
      margin-right: 5px;
    }

    .terminal{
      height: auto;
      min-height: 40%;
      width: 100%;
      display: block;
      border-radius: 10px;
      background-color: #1a1a1a;
      border: 1px solid gray;
      box-shadow: 0px 10px 18px rgba(10, 05, 05, .5);
      animation: float 3s ease-in-out infinite;
    }

    .terminal-bar{
      height: 30px;
      border-radius: 8px 8px 0px 0px;
      border-bottom: 1px solid gray;
    }

    #terminal-input:after {
      content: "|";
      color: green;
      position: absolute;
      left: 0;
      animation: blink 1s linear infinite;
    }

    @keyframes blink {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    #terminal-output {
      white-space: pre;
      display: inline-block;
      width: 100%;
    }
    #terminal-input {
      position: relative;
      display: inline-block;
      witdth: 100%;
    }
    .terminal-content{
      overflow: hidden;
      width: 100%;
    }

</style>

<section>
  <div class="container">
    <hr>
    <div class="row one-box">
      <div class="col">
        <p class="text-uppercase text-center small mb-5 grid-gray">As featured on</p>
        <div class="row logos" style="width:60%;margin-left:auto;margin-right:auto;">
          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 p-3 text-center">
            <img src="/Images/binance.svg" alt="Binance Labs" style="width:140px;">
          </div>
          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 p-3 text-center">
            <img src="/Images/tech-crunch-tea-xyz.svg" alt="Binance Labs" style="width:140px;">
          </div>
          <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 p-3 text-center">
            <img src="/Images/stackoverflow-logo.svg" alt="Binance Labs" style="width:140px;">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Teal Impact Section -->
<div class="section-divider teal-bg">
  <img src="/Images/pixel-section-divider.svg" style="pointer-events:none;" alt="">
</div>
<section class="teal-bg impact-section two-boxes">
  <div class="container">
    <div class="row">
      <div class="col">
          <div>
            <h2 class="black display-5 text-xl-center text-lg-center text-md-left text-sm-left text-left" style="z-index:2;">THIS ISN’T A PACKAGE MANAGER. TEA IS A UNIFIED PACKAGING INFRASTRUCTURE.</h2>
            <p class="lead black text-left">And through that packaging infrastructure, we have plans of leveraging blockchain to help remunerate devs for their contributions to OSS. But first and foremost, we're a packaging tool that empowers devs to do what they do best, in the most equitable way possible.</p>
          </div>
      </div>
    </div>
    <div class="row one-box-up">
      <div class="col">
        <p class="text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="too-much">NO. OF </span>REPOS</p>
        <h1 class="display-2 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span id="stat-one">56,987</span></h1>
      </div>
      <div class="col">
        <p class="text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="too-much">NO. OF </span>MAINTAINERS</p>
        <h1 class="display-2 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span id="stat-two">56,987</span></h1>
      </div>
      <div class="col">
        <p class="text-xl-center text-lg-center text-md-left text-sm-left text-left black">STAR COUNT</p>
        <a href="https://github.com/teaxyz/cli/stargazers" target="_blank"><h1 class="display-2 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="stargazers">56,987</span></h1></a>
      </div>
      <div class="col">
        <p class="text-xl-center text-lg-center text-md-left text-sm-left text-left black">CURRENT RELEASE</p>
        <a href="https://github.com/teaxyz/cli/releases" target="_blank"><h1 class="display-2 text-xl-center text-lg-center text-md-left text-sm-left text-left black"><span class="release" style="text-transform:lowercase;">56,987</span></h1></a>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="section-divider">
    <img src="/Images/pixel-section-divider-teal.svg" style="pointer-events:none;" alt="">
  </div>
  <div class="container two-boxes">
    <div class="row one-box-down">
      <div class="col">
        <h2 class="display-5 text-center">features</h2>
        <p class="text-center">We're currently on tea <span class="release"></span> and our tea'm and community are working hard to make tea the most powerful package manager that the world has ever seen. If you have suggestions or thoughts on how tea could be improved even further, we'd love for you to join the discussion! </p>
      </div>
    </div>
    <hr>
    <div class="row one-box-up">
      <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 flex order-2">
          <div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
            <h2 class="display-5">tea magic</h2>
            <p>Easily access the entire open source ecosystem with tea. Simply prefix your commands with "tea" and if the tool isn't installed, tea will install it for you. Add magic to your shell scripts and use developer environments to enhance your workflow.</p>
          </div>
        </div>
      <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-3 mb-sm-3 mb-3">
        <div class="feature-terminal" id="start-btn" style="cursor:pointer;">
          <div class="terminal-bar feature-bar black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
          <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
            <code id="terminal-output-2">
              <div style="margin-top: 15%;">
                {{- partial "play-btn.html" -}}
              </div>
            </code>
          </div>
        </div>
      </div>
    </div>

    {{- partial "animation-1.html" . -}}

    <section>
      <div class="container">
        <div class="row">
          <div class="col">
            <img src="/Images/lg-screen-grid.svg" alt="grid-element">
          </div>
        </div>
      </div>
    </section>

    <!-- Second -->

    <div class="row">
      <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-5 mb-sm-5 mb-5 order-xl-1 order-lg-1 order-md-2 order-sm-2 order-2 flex">
          <div class="feature-content pe-xl-5 pe-lg-3 pe-md-0 pe-sm-0 pe-0">
            <h2 class="display-5">Developer Environments</h2>
            <p>Simplify your development environment setup with tea by automatically fetching the specific versions of tools your project needs. With a range of specifications, tea provides a seamless solution to manage project dependencies. Debug changes, supplement your environment, and see the full environment with ease.</p>
          </div>
        </div>
      <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-3 mb-sm-3 mb-3 order-xl-2 order-lg-2 order-md-1 order-sm-1 order-1">
        <div class="feature-terminal" id="start-button" style="cursor:pointer;">
          <div class="terminal-bar black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
          <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
            <code id="terminal-output-3">
              <div style="margin-top: 15%;">
                {{- partial "play-btn.html" -}}
              </div>
            </code>
          </div>
        </div>
      </div>
    </div>

    {{- partial "animation-2.html" . -}}

    <section>
      <div class="container">
        <div class="row">
          <div class="col">
            <img src="/Images/lg-screen-grid.svg" alt="grid-element">
          </div>
        </div>
      </div>
    </section>

    <!-- Third -->

    <div class="row three-boxes-down">
      <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12 flex order-2">
          <div class="feature-content ps-xl-5 ps-lg-3 ps-md-0 ps-sm-0 ps-0">
            <h2 class="display-5">tea scripts</h2>
            <p>This is next-generation, cross-platform package management. With tea, you no longer have to install packages—just type the commands you need and tea does the rest. Enjoy seamless and flexible version control, with the full https://semver.org spec supported.</p>
          </div>
        </div>
      <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12 mb-xl-0 mb-lg-0 mb-md-3 mb-sm-3 mb-3">
        <div class="feature-terminal" id="start-animation-4" style="cursor:pointer;">
          <div class="terminal-bar black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
          <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
            <code id="terminal-output-4">
              <div style="margin-top: 15%;">
                {{- partial "play-btn.html" -}}
              </div>
            </code>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

    {{- partial "animation-3.html" . -}}

<!--
<hr>
-->

<style>

  .btn-icon{
    position: relative;
    top:2px;
  }
  .feature-row{
    border: 2px solid gray;
    position: fixed;
    width: 100%;
  }
  @media only screen and (max-width: 768px) {
    .feature-terminal{
      width: 100%;
      min-height: 250px;
      border: 2px solid gray;
      background-color: #1a1a1a;
      border-radius: 10px;
      box-shadow: 0px 10px 18px #121212;
      animation: float 3s ease-in-out infinite;
    }
    .terminal-content{
      height: 250px;
    }
    .horizon-img{
      height: 200px;
    }
  }
  @media only screen and (min-width: 768px) {
    .terminal-content{
      overflow-y: auto;
      min-height:400px;
      max-height: 400px;
    }
    .feature-terminal{
      width: 100%;
      min-height: 400px;
      border: 2px solid gray;
      background-color: #1a1a1a;
      border-radius: 10px;
      box-shadow: 0px 10px 18px #121212;
      animation: float 3s ease-in-out infinite;
    }
  }
  .speed-terminal{
    width: 100%;
    height: auto;
    min-height: 50%;
    border: 2px solid gray;
    background-color: #1a1a1a;
    border-radius: 10px;
    animation: float 3s ease-in-out infinite;
  }
  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
    100% {
      transform: translateY(0);
    }
  }
</style>

<section class="two-boxes-down">
  <div class="container">
    <div class="row">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <h2 class="display-5">Getting started with tea!</h2>
        <p class="mb-5">Tea is a cross-platform binary that can be easily installed using a curl command or by using the one-liner installer. The installer sets up tea and its shell magic without requiring "sudo" or Xcode Command Line Tools, and is compatible with Linux, macOS, and WSL. Package managers such as brew or Docker can also be used for installation, or you can use GitHub Actions to install tea as part of your workflow.</p>
      </div>
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-3">
        <div class="terminal flex term-getting-started term-lead">
          <div class="terminal-bar black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
            <div class="p-5">
              <div class="terminal-content-gs">
                <code>sh <(curl https://tea.xyz)</code>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-3 ">
        <p class="mb-4 light-gray">This will confirm before setting up ~/.tea and adding to your ~/.shellrc. Our one-liner even abstracts installing tea itself:</p>

        <div class="terminal flex term-getting-started">
          <div class="terminal-bar black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
            <div class="p-5">
              <div class="terminal-content-gs">
                <code>sh <(curl tea.xyz) bun run start</code>
              </div>
          </div>
        </div>
      </div>
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <p class="mb-4 light-gray">This will confirm before setting up ~/.tea and adding to your ~/.shellrc. Our one-liner even abstracts installing tea itself:</p>

        <div class="terminal flex term-getting-started">
          <div class="terminal-bar black-bg flex-start p-1 ps-3">
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
            <div class="traffic-light"></div>
          </div>
            <div class="p-5">
              <div class="terminal-content-gs">
                <code>sh <(curl tea.xyz) bun run start</code>
              </div>
          </div>
        </div>
      </div>

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


<style>

  .top-bar{
    border-bottom: 2px solid #1a1a1a;
  }

</style>


<section class="teal-bg">
  <div class="container one-box-up two-boxes two-boxes-down">
    <div class="row one-box-down">
      <div class="col">
        <h2 class="display-5 black text-center">Don't just take our word for it; everybody's liking the new brew</h2>
      </div>
    </div>
    <div class="row twitter-desktop">
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        <div class="twitter-card mb-4">
          <div class="top-bar flex p-1 ps-3">
            <i class="icon-discord black lead"></i>
          </div>
          <div class="twitter-content p-xl-5 p-lg-5 p-md-3 p-sm-4 p-4">
            <p class="black">You guys are really onto something with <a href="https://github.com/teaxyz/cli#magic" style="color:#1a1a1a !important;">magics</a> – it's so awesome. I've been using it all day and I am hooked.</p>
            <hr class="mb-3" style="border-bottom: 1px solid black !important;">
            <div class="flex-start">
              <div class="avatar"></div>
              <p class="small test-name black">David D</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        <div class="twitter-card mb-4">
          <div class="top-bar flex p-1 ps-3">
            <i class="icon-github black lead"></i>
          </div>
          <div class="twitter-content p-xl-5 p-lg-5 p-md-3 p-sm-4 p-4">
            <div class="">

            </div>
            <p class="black">when i did ran <code class="orange">./pantry.core/scripts/build.ts yarnpkg.com</code>, it was the amazing moment, i realized I have not setup deno yet but tea does it for me.
            I know we have this feature but when I unintentionally experienced it. its just wow. just wow</p>
            <hr class="mb-3" style="border-bottom: 1px solid black !important;">
            <div class="flex-start">
              <div class="avatar"></div>
              <p class="small test-name black">Neil M</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        <div class="twitter-card mb-4">
          <div class="top-bar flex p-1 ps-3">
            <i class="icon-twitter black lead"></i>
          </div>
          <div class="twitter-content p-xl-5 p-lg-5 p-md-3 p-sm-4 p-4">
            <p class="black">It is hard to think of a more perfect use for blockchain technology than coordinating package releases for opensource software. What @teaxyz_ is embarking on will improve security, maintenance, and reliability, while providing much-needed incentive for independent developers. 🙌🏼</p>
            <hr class="mb-3" style="border-bottom: 1px solid black !important;">
            <div class="flex-start">
              <div class="avatar"></div>
              <p class="small test-name black">jcinis.eth</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row two-boxes-down">
      <div class="col">
        <h2 class="display-5 text-center">Ready to start building?<br>All you need is tea.</h2>
        <p class="lead text-center mb-5">Introducing tea’s +pkg syntax, the ultimate tool for streamlined open source access, allowing you to access the entire ecosystem with one command, compose and combine everything, and even more.</p>
        <div class="bottom-cta">{{- partial "desktop-ctas.html" -}}</div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col">
        <img src="/Images/lg-screen-grid.svg" alt="grid-element">
      </div>
    </div>
  </div>
</section>

<!--
<hr>
-->

<style>

  .twitter-card{
    border: 2px solid #1a1a1a;
    background-color: #33ffd9 !important;
  }
  .title-bar{
    height:30px;
  }
  .avatar{
    height: 20px;
    width: 20px;
    border-radius: 30px;
    background-color: gray;
    display: inline-block;
  }
  .test-name{
    display: inline-block;
    position: relative;
    bottom: 4px;
    margin-left: 5px;
  }
  .top-bar i{
    position: relative;
    top: 2px;
  }

</style>

<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

<script>

  var mySwiper = new Swiper ('.swiper-container', {
  spaceBetween: 10,
  freeMode: true,
  direction: 'horizontal',
  loop: true,
  pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })

</script>

<section>
  <div class="container two-boxes-down">
    <div class="row">
      <div class="col">
        <h2 class="display-5">OSS wouldn't work without talented contributors like you.</h2>
        <p class="mb-5">We at tea would like to give a big shout out to all the open-source developers out there. Your contributions and dedication to making the world a better place through technology is truly admirable. Thanks to your hard work and generosity, projects like teaxyz/cli can continue to improve and evolve. If you are interested in joining our team of code crusaders, we welcome you with open arms. Head on over to the teaxyz/cli repository on Github and start contributing today! Let's continue to make a positive impact on the world of technology together.</p>

      </div>

    </div>
    <div class="row p-3" id="contributors-list">
      <div>

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

<section>
  <div class="container two-boxes-down">
    <div class="row">
      <div class="col-xl-7 col-lg-7 col-md-6 col-sm-12 col-12 order-xl-1 order-lg-1 order-md-1 order-sm-2 order-2 my-auto">
        <h2 class="display-5">A mission to fix open-source development</h2>
        <p class="lead">tea is one of the first legitimate use cases for blockchain technology. Just as the US dollar was once backed by gold, we're building an economy that's backed <em>by code</em>.</p>
        <p>We want to fix one of web2's biggest problems: hardworking developers <i>not</i> getting compensated for their contributions to building blocks of the internet. By leveraging blockchain technology we can keep track who creates & maintains what, remunerate them for their efforts with tea token, and keep FANG corporations from building empires atop unpaid labor.</p>
      </div>
      <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12 col-12 order-xl-2 order-lg-2 order-md-2 order-sm-1 order-1 mb-4">
        <img src="/Images/horizon-illustration.png" class="horizon-img" alt="Over the horizon" style="border-radius:10px; width:100%;">
      </div>
    </div>
  </div>
</section>

<script>

  var contributorsList = $("#contributors-list");

  $.getJSON("https://api.github.com/repos/teaxyz/cli/contributors", function(cliContributors) {
    $.getJSON("https://api.github.com/repos/teaxyz/pantry.extra/contributors", function(extraContributors) {
      var allContributors = cliContributors.concat(extraContributors);
      var uniqueContributors = {};
      $.each(allContributors, function(i, contributor) {
        if (!(contributor.id in uniqueContributors)) {
          uniqueContributors[contributor.id] = true;
          contributorsList.append("<div class='col-3 col-sm-3 col-md-3 col-lg-1 col-xl-1 ps-0'>" + "<a href='" + contributor.html_url + "' target='_blank'><img class='con-img mb-3' src='" + contributor.avatar_url + "'></a>" + "<p class='small' style='hyphens:auto;'>" + contributor.login + "</p>" + "</div>");
        }
      });
    });
  });

</script>

<style>

  .con-img{
    width:100%;
    border-radius: 5px;
    filter: grayscale(100);
    background-color: gray;
    transition: 0.1s ease-in-out;
  }

  .con-img:hover{
    transform: translateY(-5px);
    filter:none;
  }

</style>

{{ end }}