ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 08:25:12 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #279 from teaxyz/website-3-1

Browse source 
Website 3.1 - More focus on tea-cli
This commit is contained in:
Thomas Smith 2023-02-28 20:15:33 -05:00 committed by GitHub
commit f41184ab8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
63 changed files with 3324 additions and 2088 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -45,7 +45,7 @@ just package-pages
| Project | Version |
|--------------|---------|
| gohugo.io | >=0.99 |
| nodejs.org | >=14 |
| nodejs.org | =18.13.0 |
| npmjs.com | * |
| just.systems | ~1 |

15
src/config.toml
View file

@ -6,10 +6,17 @@ title = 'Equitable Open-Source for Web3'
[menu]
[[menu.main]]
identifier = 'community'
name = 'Community'
title = 'community'
url = '../#community'
identifier = 'docs'
name = 'Docs'
title = 'docs'
url = 'https://github.com/teaxyz/cli/blob/main/README.md'
weight = 3
[[menu.main]]
identifier = 'Quick Start'
name = 'Quick Start'
title = 'Quick Start'
url = 'https://github.com/teaxyz/cli#getting-started'
weight = 4
[security]

7
src/content/packages.md Normal file
View file

@ -0,0 +1,7 @@
---
title: "Pantry"
Description: "Browse our packages"
layout: "packages"
menu: main
weight: 1
---

2
src/content/products.md
View file

@ -2,6 +2,4 @@
title: "Products"
Description: "Our Products"
layout: "products"
menu: main
weight: 1
---

1
src/layouts/_default/baseof.html
View file

@ -28,6 +28,7 @@
{{- block "main" . }}{{- end }}
</main>
<footer>
{{- partial "footer-content.html" . -}}
{{- partial "footer.html" . -}}
</footer>
</body>

886
src/layouts/index.html
View file

@ -8,42 +8,257 @@
<!-- Hero Section -->
{{- partial "mobile-art-home" -}}
<style>
<section class="hero-section">
<div class="container hero-container">
<div class="row">
<div class="col">
<h1 class="impact" style="z-index:3; position: relative;">the next&#8208;generation, cross&#8208;platform <span class="white">package manager</span></h1>
.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/tea-hero-background.jpg") !important;
background-attachment: scroll;
background-position: left;
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 mb-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">Introducing <span class="tea">tea</span> - the revolutionary, cross-platform package manager. Say goodbye to slow & clunky, and say hello to fast & smooth. From the creator of Brew.</p>
<p class="lead mobile-lead mb-5"><span class="tea">tea</span>... from the creator of <a href="https://brew.sh/" target="_blank">brew</a></p>
<p class="mb-5 hero-description">With <span class="tea">tea</span>, simply type commands and it takes care of the rest. Get the latest versions of open source tools and support specific tool versions for different projects. Experience better package management with <span class="tea">tea</span>.</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 class="terminal-animation mb-3">
{{- partial "hero-terminal-animation.html" -}}
</div>
</div>
</div>
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="lead-text-container animated-25 animatedFadeInUp fadeInUp black-bg p-4" style="z-index:3; position: relative;">
<p class="lead" style="margin-bottom: 0px;"><a href="https://github.com/teaxyz/cli">Visit GitHub</a> to check out our README, and &#9734; the repository. You can install tea by running the one&#8208;liner in your terminal.</p>
</div>
{{- partial "purple-btn-large.html" -}}
<img class="mobile-grid-element mt-5" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
<div class="col">
{{- partial "click-to-copy.html" . -}}
</div>
</div>
</div>
</section>
<div class="full-width-cta-container">
{{- partial "clipboard-copy.html" . -}}
</div>
<div class="hero-bottom flex align-content-middle">
{{- partial "additional-install-methods.html" -}}
</div>
<!-- Teal Impact Section -->
<style>
<section class="teal-bg impact-section two-boxes">
.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);
}
.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">
<div class="row">
<div class="row one-box">
<div class="col">
<div class="box">
<div>
<h2 class="black text-center" style="z-index:2;">equitable open-source<br>for&nbsp;<br id="impact-break"><span class="cycle">web3</span></h2>
<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">
<a href="https://www.binance.com/en/blog/ecosystem/binance-labs-leads-$8-million-seed-funding-round-for-tea-421499824684903608" target="_blank">
<img src="/Images/binance.svg" alt="Binance Labs" style="width:140px;">
</a>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 p-3 text-center">
<a href="https://techcrunch.com/2022/03/23/open-source-project-tea-is-brew2-for-web3/" target="_blank">
<img src="/Images/tech-crunch-tea-xyz.svg" alt="Binance Labs" style="width:140px;">
</a>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 p-3 text-center">
<a href="https://stackoverflow.blog/2022/11/18/the-creator-of-homebrew-has-a-plan-to-get-open-source-contributors-paid-ep-506/" target="_blank">
<img src="/Images/stackoverflow-logo.svg" alt="Binance Labs" style="width:140px;">
</a>
</div>
</div>
</div>
@ -51,221 +266,508 @@
</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="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;">The unified packaging infrastructure.</h2>
<p class="lead">Access the latest tools, languages and frameworks seamlessly across all platforms with tea&#8212;the standalone, binary download from the creator of brew. Unleash the power of the open-source ecosystem by <a href="https://github.com/teaxyz/setup/blob/main/install.sh">installing tea</a> today.</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>
<!-- 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 UNIFIED PACKAGING INFRASTRUCTURE.</h2>
<p class="lead black text-center">And through that packaging infrastructure, we have plans of leveraging blockchain to help remunerate devs for their contributions to OSS. You can learn more about our grand ambitions for web3 by checking out our <a href="/white-paper/" style="color:#1a1a1a !important;">white paper here</a>.</p>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
</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>
<!-- Package Grid -->
<section>
<div class="section-divider">
<img src="/Images/pixel-section-divider-teal.svg" style="pointer-events:none;" alt="">
</div>
<div class="container two-boxes-up one-box-down">
<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 <span class="tea">tea</span> <span class="release"></span> and our <span class="tea">tea</span>'m and community are working hard to make <span class="tea">tea</span> the most powerful package manager that the world has ever seen. From our revolutionary `magic` to powerful scripts that draw upon the entire open-source ecosystem, we’re fundamentally reimagining what a package manager can be. If you have suggestions or thoughts on how <span class="tea">tea</span> 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 <span class="tea">tea</span>. Simply prefix your commands with "<span class="tea">tea</span>" and if the tool isn't installed, <span class="tea">tea</span> will install it for you. Add magic to your shell scripts and use developer environments to enhance your workflow. magic is optional; if you don’t enable it, then just prefix your commands with `<span class="tea">tea</span>`.</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" style="position:relative;">
<code id="terminal-output-2">
<div style="margin-top: 15%;">
{{- partial "play-btn.html" -}}
</div>
</code>
</div>
</div>
</div>
</div>
<!-- Desktop/Tablet Package Display -->
{{- partial "animation-1.html" . -}}
<span class="grid-package-display">
{{- partial "package-grid.html" . -}}
</span>
<section>
<div class="container">
<div class="row">
<div class="col">
<img src="/Images/lg-screen-grid.svg" alt="grid-element">
</div>
</div>
</div>
</section>
<!-- Mobile Package Display -->
<!-- Second -->
<span class="swiper-package-display">
{{- partial "swiper.html" . -}}
</span>
<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 <span class="tea">tea</span> by automatically fetching the specific versions of tools your project needs. With a range of specifications, <span class="tea">tea</span> 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>
<!-- Style for Swiper -->
{{- 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">
<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>Scripting is so powerful, but has been left in the dark ages because there’s no easy way to install the packages you need. <span class="tea">tea</span> can transform your scripts by leveraging the entire open source ecosystem.</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>
.swiper-package-display{
display:block;
}
.grid-package-display{
display:none;
}
@media only screen and (min-width: 576px) {
.grid-package-display{
display:block;
}
.swiper-package-display{
display:none;
}
.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;
overflow-y: auto;
}
.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>
<!-- Bottle CTA -->
<section>
<div class="container one-box-down">
<div class="row">
<div class="col">
<img src="/Images/lg-screen-grid.svg" alt="grid-element">
</div>
</div>
</div>
</section>
<hr>
<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 my-auto pe-5">
<h2 class="display-5">Getting started with tea!</h2>
<p class="mb-5"><span class="tea">tea</span> is a standalone binary for all platforms. You can curl it by itself or, if you want magic, use our installer. We provide a docker image and GitHub action for easier CI/CD.</p>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mb-3">
<div class="terminal mb-4 flex term-getting-started term-lead" style="min-height:auto; border:2px solid #00ffd0;">
<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>
<p class="mb-4 light-gray small">This will confirm before setting up <span class="tea">~/.tea</span> and adding to your ~/.shellrc. Our one-liner even abstracts installing <span class="tea">tea</span> itself:</p>
<div class="terminal mb-4 flex term-getting-started" style="min-height:auto;">
<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>
<p class="mb-4 light-gray small">This way, you don't need to start with "how to install tea" in your tutorials and blog posts. The installer also updates <span class="tea">tea</span>. If you hate installers, use brew:</p>
<div class="terminal flex term-getting-started" style="min-height:auto;">
<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>$ brew install teaxyz/pkgs/tea-cli</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-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 ran my script (yarnpkg.com), it was an amazing moment––I realized I have not setup deno yet but <span class="tea">tea magic</span> just did it for me. It was a 'wow' moment... just 'wow'.</p>
<hr class="mb-3" style="border-bottom: 1px solid black !important;">
<div class="flex-start">
<img class="avatar" src="/Images/neil-m.png" alt="">
<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">
<img class="avatar" src="/Images/jcinis-eth.jpeg" alt="">
<p class="small test-name black">jcinis.eth</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-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">
<img class="avatar" src="/Images/dd.png" alt="">
<p class="small test-name black">David D</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"><span class="tea">tea</span>’s +pkg syntax embodies our core belief that good tools should just get out of the way so that you can keep making the internet a better place. Access the entire open source ecosystem with one command, compose and combine everything, and enjoy an all-around more delightful dev experience.</p>
<div class="bottom-cta">{{- partial "desktop-ctas.html" -}}</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col">
<div class="one-box-down">
<h4 class="text-center">Check out which versions we have bottled</h4>
<p class="text-center">We&#39;ve compiled a list of every package that&#39;s been bottled, along with their corresponding versions.</p>
</div>
<a href="/bottles/">
<button class="detail-btn-large bottle-cta"><i class="icon-enter-arrow"></i>VIEW ALL BOTTLES</button>
</a>
<style>
.bottle-cta{
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<img src="/Images/lg-screen-grid.svg" alt="grid-element">
</div>
</div>
</div>
</section>
<!--
<hr>
<!-- Package CTA Section
<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 -->
<style>
<section class="statistics" style="padding-top: 8.371vw !important; padding-bottom: 8.371vw !important;">
.twitter-card{
border: 2px solid #1a1a1a;
background-color: #33ffd9 !important;
min-height: 466px;
}
.title-bar{
height:30px;
}
.avatar{
height: 24px;
width: 24px;
border-radius: 30px;
background-color: gray;
display: inline-block;
}
.test-name{
display: inline-block;
position: relative;
margin-left: 5px;
}
.top-bar i{
position: relative;
top: 2px;
}
<!-- Generative Art for the statistics section -->
</style>
<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>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- End generative art -->
<script>
<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">Much like its predecessor, <a href="https://brew.sh/">brew</a>, tea is seeing a rapid rate of adoption. Developers around the world are doing amazing things with our next&#8208;generation, cross&#8208;platform package manager.</p>
<p>In true open&#8208;source fashion, we&#39;re asking the community for <a href="https://github.com/teaxyz/cli">contributions to tea/cli</a>, as well as packaging assistance in an effort to add the web&#39;s top 300 packages to <a href="https://github.com/teaxyz/pantry.zero#contributing">our pantry</a>. Now is the time to be an early contributor in what will inevitably become the foundation of the future internet.</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>
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">
<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="gray stat-small-text">Number of rated repos owned by tea&#8208;authenticated developers.</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="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">TEA MAINTAINERS</p>
<p class="stat-number teal" id="stat-two"></p>
<p class="gray stat-small-text">Number of tea-maintainers for those <span id="stat-one-small"></span> repos.</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">
<h2 class="display-5">OSS wouldn't work without talented contributors like you.</h2>
<p class="mb-5">We at <span class="tea">tea</span> 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 <span class="tea"><a href="https://github.com/teaxyz/cli">tea</a></span> 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 <span class="tea"><a href="https://github.com/teaxyz/cli">tea</a></span> 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>
<div class="full-width-cta-container">
{{- partial "clipboard-copy.html" . -}}
</div>
<!-- partners
<section class="partners">
<div class="gen-art" id="gen-art-10"></div>
<div class="container">
<section>
<div class="container two-boxes-down">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12" style="position:relative; z-index: 2; margin-top: 20px;">
<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>
<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"><span class="tea">tea</span> 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 tech’s biggest problems: hardworking developers <i>not</i> getting compensated for their contributions to the building blocks of the internet. By leveraging blockchain technology we can keep track of who creates & maintains what, remunerate them for their efforts with <span class="tea">tea</span> tokens, and keep FAANG corporations from building empires atop unpaid labor.</p>
</div>
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
<img class="partner-logo" id="binance-logo" src="/Images/binance-logo-white.svg" alt="Binance Logo" style="width:37.757vw; margin-top:1.116vw; 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 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 }}

193
src/layouts/page/careers.html
View file

@ -1,20 +1,13 @@
{{ define "main" }}
<section class="two-boxes hero-section">
<div>
<span id="aa62fd265a9f"></span>
</div>
<!-- Hero Section -->
<section class="hero one-box teal-bg">
<div class="container">
<div class="row">
<div class="col">
<h1>Careers</h1>
<p class="lead">Join us!</p>
<p>tea is building an open-source ecosystem that is fair for everyone. We are growing our team of talented people to make this happen. We are looking for curious, passionate, and smart teammates. If you are interested please check out our open positions below.</p>
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
<div class="col-xl-2 col-lg-2 col-md-0 col-sm-0 col-0"></div>
<div class="hero-col col-xl-8 col-lg-8 col-md-0 col-sm-0 col-0 my-auto">
<h1 class="display-1 hero-text text-center black" style="z-index:3; position: relative;"><span class="inner-glow ">Careers</h1>
<p class="lead hero-lead mb-5 text-center black"><span class="tea">tea</span> is building an open-source ecosystem that is fair for everyone. We are growing our team of talented people to make this happen. We are looking for curious, passionate, and smart teammates. If you are interested please check out our open positions below.</p>
</div>
</div>
</div>
@ -22,105 +15,107 @@
<hr>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" id="jobOne" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body two-boxes">
<div class="one-box-down">
<p>Employment type: <span id="typeOne"></span></p>
<p>Department: <span id="deptOne"></span></p>
<p>Location: <span id="locOne"></span></p>
</div>
<div class="one-box-down">
<hr>
</div>
<div class="one-box-down" id="descOne"></div>
<div>
<a href="" id="linkOne">
<button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
</a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" id="jobTwo" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body two-boxes">
<div class="one-box-down">
<p>Employment type: <span id="typeTwo"></span></p>
<p>Department: <span id="deptTwo"></span></p>
<p>Location: <span id="locTwo"></span></p>
</div>
<div class="one-box-down">
<hr>
</div>
<div class="one-box-down" id="descTwo"></div>
<div>
<a href="" id="linkTwo">
<button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
</a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" id="jobThree" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body two-boxes">
<div class="one-box-down">
<p>Employment type: <span id="typeThree"></span></p>
<p>Department: <span id="deptThree"></span></p>
<p>Location: <span id="locThree"></span></p>
</div>
<div class="one-box-down">
<hr>
</div>
<div class="one-box-down" id="descThree"></div>
<div>
<a href="" id="linkThree">
<button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Why Work at tea -->
<section class="teal-bg two-boxes">
<div class="row">
<div class="container two-boxes">
<section>
<div class="container one-box">
<div class="container mt-5 mb-5 me-0">
<div class="row">
<div class="col">
<h3 class="black text-center">Why work @ tea?</h3>
<p class="text-center black" style="background-color:#00ffd0 !important;">Join a team of motivated and passionate individuals and be a part of a rapidly growing and exciting project in web3 and open source technologies. We offer an attractive salary, relocation packages (if applicable), token/equity options and performance&#8208;based bonuses.</p>
<h3 class="display-6 mb-4">Current Openings</h3>
</div>
</div>
<div class="row" id="card-container"></div>
</div>
</div>
</section>
<script>
// Fetch data from API
fetch("https://tea.breezy.hr/json?verbose=true")
.then(response => response.json())
.then(data => {
// Loop through data and create card for each item
data.forEach(item => {
// Create card element
const card = document.createElement("div");
card.classList.add("card", "mb-4");
// Create card body element
const cardBody = document.createElement("div");
cardBody.classList.add("card-body", "p-4");
// Add name to card body as a link to the URL
const title = document.createElement("a");
title.classList.add("card-title", "display-6", "teal");
title.href = item.url;
title.textContent = item.name;
cardBody.appendChild(title);
// Add description to card body
const description = document.createElement("div");
description.classList.add("card-text","mt-3","mb-5");
description.innerHTML = item.description.slice(0, 700);
cardBody.appendChild(description);
// Add show more link to card body
const showMoreLink = document.createElement("a");
showMoreLink.classList.add("me-3", "teal");
showMoreLink.href = "#";
showMoreLink.textContent = "Show more";
showMoreLink.addEventListener("click", event => {
event.preventDefault();
if (description.innerHTML === item.description) {
description.innerHTML = item.description.slice(0, 700);
showMoreLink.textContent = "Show more";
} else {
description.innerHTML = item.description;
showMoreLink.textContent = "Show less";
}
});
cardBody.appendChild(showMoreLink);
// Add url link to card body
const urlLink = document.createElement("a");
urlLink.classList.add("teal");
urlLink.href = item.url;
urlLink.textContent = "View on BreezyHR";
cardBody.appendChild(urlLink);
// Add card body to card
card.appendChild(cardBody);
// Add card to container
const container = document.getElementById("card-container");
const row = document.createElement("div");
row.classList.add("row");
const col = document.createElement("div");
col.classList.add("col");
col.appendChild(card);
row.appendChild(col);
container.appendChild(row);
});
})
.catch(error => console.log(error));
</script>
<style>
a:hover{
color: #2675f5;
}
.accordion-button{
line-height: 6vw;
}
.card-body{
background-color: #1a1a1a;
}
.card-text.show-more {
max-height: none !important;
}
</style>
{{ end }}

54
src/layouts/page/package-detail.html
View file

@ -6,25 +6,39 @@
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
<div class="package-thumbnail">
{{ range where $.Site.Data.packages "name" .Title }}
<img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
<img class="package-image mb-5" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
{{ end }}
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">
<h3>{{- .Title -}}</h3>
<h3 class="display-4" style="margin-top:-10px;">{{- .Title -}}</h3>
{{ range where $.Site.Data.packages "name" .Title }}
<p class="one-box-down">{{- .desc -}}</p>
{{ if not (eq .package_yml_url "#")}}
<a target="_blank" href="{{- .package_yml_url -}}">
<button class="detail-btn-large me-3" id="purple-bg-btn"><i class="icon-enter-arrow"></i>View on GitHub</button>
</a>
{{end}}
{{ if not (eq .homepage "") }}
<a target="_blank" href="{{- .homepage -}}">
<button class="detail-btn-large" id="standard-detail-btn"><i class="icon-enter-arrow"></i>Visit package home</button>
</a>
{{end}}
{{ end }}
<p class="mb-5">{{- .desc -}}</p>
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
{{ if not (eq .package_yml_url "#")}}
<a target="_blank" href="{{- .package_yml_url -}}">
<button class="hbtn hb-fill-right mb-3" style="width:100% !important;">VIEW ON GITHUB</button>
</a>
{{end}}
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
{{ if not (eq .homepage "") }}
<a target="_blank" href="{{- .homepage -}}">
<button class="hbtn-light hb-light-fill-right" style="width:100% !important;">VISIT PACKAGE HOME</button>
</a>
{{end}}
{{ end }}
</div>
</div>
<div class="row">
<div class="col">
{{ range where $.Site.Data.packages "name" .Title }}
{{- partial "clipboard-copy-package-detail.html" . -}}
{{ end }}
<p class="small grid-gray">Copy the tea one-liner above into your terminal to install &#160;{{- .Title -}}. tea will interpret the documentation and take care of any dependencies.</p>
</div>
</div>
</div>
</div>
</div>
@ -42,27 +56,15 @@
</div>
</div>
<div class="row">
<div class="col grid-gray">
Copy the tea one-liner below into your terminal to install &#160;{{- .Title -}}. tea will interpret the documentation and take care of any dependencies.
</div>
</div>
</div>
</section>
{{ range where $.Site.Data.packages "name" .Title }}
{{- partial "clipboard-copy-package-detail.html" . -}}
{{ end }}
<style>
.package-thumbnail{
width: 100%;
height: 100%;
background-color: gray;
}
a:hover{

50
src/layouts/page/packages.html
View file

@ -1,33 +1,57 @@
{{ define "main" }}
<!-- Package Grid -->
<!-- Desktop/Tablet Package Display -->
<span>
<span class="grid-package-display black-bg">
{{- partial "package-grid.html" . -}}
</span>
<!-- Mobile Package Display -->
<!-- dont remove, it is not completely useless there is a ui bug i couldnt figure out
the only solution is to keep it here. sorry - neil
-->
<span class="swiper-package-display">
{{- partial "swiper.html" . -}}
</span>
<!-- Style for Swiper -->
<hr>
<section>
<div class="container">
<div class="row two-boxes">
<div class="col packing-illustration me-4">
</div>
<div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12">
<h2 class="display-5 text-left">Wanna help us with the top 300 packages?</h2>
<p class="lead text-left">In order to ensure that the sun never sets on our packaging empire, we at tea are looking for help from the communi'tea to package up the top 300 packages.</p>
<p class="mb-5">Our developers are working hard, but it's a daunting task that we can't handle on our own. And of course, we're also grateful for packages <i>outside</i> of that top 300 roster. While at the moment, we're requesting that you assist purely for your love of open-source, once we launch our protocol, maintainers & contributors will be remunerated for their work via tea token.</p>
<div class="row desktop-ctas">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
<a href="https://github.com/teaxyz/cli#getting-started">
<button class="hbtn hb-fill-right" style="width:100% !important;"><i class="icon-tea-logo-iconasset-1"></i>INSTALL TEA (<span class="release" style="text-transform:lowercase;"></span>)</button>
</a>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<a href="https://github.com/teaxyz/cli">
<button class="hbtn-light hb-light-fill-right" style="width:100% !important;"><i class="icon-github" style="position:relative;top:2px;"></i>READ THE DOCS (&#9734;<span class="stargazers" style="text-transform: lowercase;"></span>)</button>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.grid-package-display{
display:block;
}
.swiper-package-display {
/* dont remove refer to comment above */
display: none;
.packing-illustration{
background: url('/Images/futuristic-packaging.jpg');
background-size: cover;
background-position: scroll;
border-radius: 10px;
}
</style>
{{ end }}

80
src/layouts/page/white-paper.html
View file

@ -1,28 +1,31 @@
{{ define "main" }}
{{- partial "white-paper-gen-art.html" -}}
<!-- Hero Section -->
<div class="section two-boxes wp-hero-section">
<section class="hero one-box">
<div class="container">
<div class="row">
<div class="col" style="position: relative; z-index: 2;">
<h1>White Paper</h1>
<div class="wp-lead-text-container animated-5 animatedFadeInUp fadeInUp p-4 black-bg">
<p class="lead" style="margin-bottom: 0px;">Open‐source is about the many coming together to create something great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to our white paper and help brew the future of the internet. This is our revolutionary undertaking to create equitable open‐source for web3, and we want you to be a part of laying its groundwork.</p>
</div>
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
<div class="row gx-5">
<div class="col-xl-2 col-lg-2 col-md-0 col-sm-0 col-0"></div>
<div class="hero-col col-xl-8 col-lg-8 col-md-0 col-sm-0 col-0 my-auto">
<h1 class="display-1 hero-text text-center" style="z-index:3; position: relative;"><span class="inner-glow ">WHITE PAPER</h1>
<p class="lead hero-lead mb-5 text-center">Take a look under the hood (bonnet) and see how we're planning on leveraging blockchain technology to fix open-source. We welcome commentary and feedback via any of our community channels.</p>
<div class="row desktop-ctas">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-3">
<a href="https://tea.xyz/tea.white-paper.pdf">
<button class="hbtn hb-fill-right" style="width:100% !important;"><i class="icon-tea-logo-iconasset-1"></i>INSTALL TEA (<span class="release" style="text-transform:lowercase;"></span>)</button>
</a>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<a href="https://github.com/teaxyz/white-paper">
<button class="hbtn-light hb-light-fill-right" style="width:100% !important;"><i class="icon-github" style="position:relative;top:2px;"></i>CONTRIBUTE</button>
</a>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-0 col-sm-0 col-0"></div>
</div>
</div>
</div>
<hr>
<div class="row button-container">
<a href="/tea.white-paper.pdf" role="button" class="btn btn-primary split-btn" id="nav-cta"><i class="icon-enter-arrow"></i>DOWNLOAD WHITEPAPER</a>
<a href="https://github.com/teaxyz/white-paper" role="button" class="btn btn-primary split-btn split-right" id="nav-cta"><i class="icon-enter-arrow"></i>CONTRIBUTE ON GITHUB</a>
</div>
<hr>
</section>
<style>
.split-btn{
@ -34,6 +37,15 @@
border-left: 0px !important;
}
.dropdown-toggle{
height: 50px;
width: auto;
padding: 0px 30px;
border: 1px solid #fff;
font-family: "inter", sans-serif;
}
</style>
@ -41,15 +53,14 @@
<div class="container">
<div class="row">
<div class="col">
<h4>Our white paper is available in multiple languages</h4>
<p>Thanks to the tea community's generosity and time, our white paper is available in several world languages. Select your preferred language from the dropdown menu.</p>
<h3 class="display-6">Our white paper is available in multiple languages</h3>
<p class="mb-4">Thanks to the tea community's generosity and time, our white paper is available in several world languages. Select your preferred language from the dropdown menu.</p>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle languages" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<button class="hbtn-light hb-light-fill-right dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Choose a Language
</button>
<ul class="dropdown-menu" id="language-selector"></ul>
</div>
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
</div>
</div>
</div>
@ -130,29 +141,4 @@
</div>
</section>
<!-- Start PDF
<div class="container pdf-iframe"
style="margin-bottom:100px; overflow:auto; -webkit-overflow-scrolling:touch; z-index:2;">
<iframe id="wp-iframe"src="https://tea.xyz/tea.white-paper.pdf#toolbar=0&navpanes=0&view=fitH" width="100%" height="800px">
</iframe>
</div>
<div class="container mobile-pdf" style="margin-bottom:100px;">
<div class="row">
<div class="col">
<div class="card">
<div style="display:flex; flex-direction:column; background-color:#23282C;" class="card-body pt-5 pb-5">
<div style="margin-top:auto; margin-bottom:auto;">
<p class="text-center">Mobile browsers can be finicky, so please view our white paper via the button
below.</p>
<a id="mobile-wp-download" style="display:block; margin-left:auto; margin-right:auto;" class="btn btn-primary mb-3"
href="https://tea.xyz/tea.white-paper.pdf" role="button">Download our White Paper</a>
</div>
</div>
</div>
</div>
</div>
</div>-->
{{ end }}

51
src/layouts/partials/animation-1.html Normal file
View file

@ -0,0 +1,51 @@
<script>
const commands2 = [
{ input: '$ sh <(curl https://tea.xyz)<br>##########################################', output: '<br>k, we installed /Users/thomassmith/.tea/tea.xyz/v0.24.2/bin/tea' },
{ input: `<br>$ tea redis-cli ping<br>##########################################`, output: `<br>installed: ~/.tea/redis.io/v7.0.8<br><div class="comment-success p-2" style="position:relative; top:5px;"><code class="small"><i class="icon-check-circle"></i>tea installs 'redis' automagically.</code></div>` },
{ input: '', output: 'pong' },
];
let commandIndex2 = 0;
let command2 = commands2[commandIndex2];
let commandOutput2 = '';
function typeCommand2() {
if (commandIndex2 === commands2.length) {
return;
}
if (command2.input.length === 0) {
setTimeout(() => {
commandOutput2 += '<br>' + command2.output + '<br>';
document.querySelector('#terminal-output-2').innerHTML = commandOutput2;
commandIndex2++;
command2 = commands2[commandIndex2];
setTimeout(typeCommand2, 1000);
}, 2000);
return;
}
let currentChar = command2.input[0];
if (currentChar === '#') {
currentChar = '#';
const delay = 20;
setTimeout(typeCommand2, delay);
} else {
const delay = Math.floor(Math.random() * 40) + 80;
setTimeout(typeCommand2, delay);
}
if (currentChar === '$') {
currentChar = '<span class="purple">$</span>';
}
commandOutput2 += currentChar;
command2.input = command2.input.slice(1);
document.querySelector('#terminal-output-2').innerHTML = commandOutput2;
}
const observer2 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
typeCommand2();
observer2.disconnect();
}
});
const target2 = document.querySelector('#terminal-output-2');
observer2.observe(target2);
</script>

49
src/layouts/partials/animation-2.html Normal file
View file

@ -0,0 +1,49 @@
<script>
const commands3 = [
{ input: '$ node --version<br>', output: `v19.3.0<br><br>` },
{ input: `$ cat &lt;&lt;EOF &gt;&gt;my-project/README.md<br>`, output: `# Dependencies<br>
| Project &nbsp;&nbsp;&nbsp;| Version |<br>
|------------|---------|<br>
| nodejs.org | ^18.4 &nbsp;&nbsp;|<br>
EOF
<br><br>` },
{ input: '$ cd my-project<br>', output: `my-project<br><br>` },
{ input: '$ node --version<br>', output: `v18.13.0` },
];
let commandIndex3 = 0;
let command3 = commands3[commandIndex3];
let commandOutput3 = '';
function typeCommand3() {
if (commandIndex3 === commands3.length) {
return;
}
if (command3.input.length === 0) {
commandOutput3 += '\n' + command3.output + '\n';
document.querySelector('#terminal-output-3').innerHTML = commandOutput3;
commandIndex3++;
command3 = commands3[commandIndex3];
setTimeout(typeCommand3, 1500);
return;
}
let char = command3.input[0];
if (char === '$') {
char = '<span class="purple">$</span>';
}
commandOutput3 += char;
command3.input = command3.input.slice(1);
document.querySelector('#terminal-output-3').innerHTML = commandOutput3;
setTimeout(typeCommand3, Math.floor(Math.random() * (150 - 70) + 70));
}
const terminalOutput = document.querySelector('#terminal-output-3');
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
typeCommand3();
observer.unobserve(terminalOutput);
}
});
observer.observe(terminalOutput);
</script>

52
src/layouts/partials/animation-3.html Normal file
View file

@ -0,0 +1,52 @@
<script>
const commands4 = [
{ input: '$ tea github.com/teaxyz/hello-universe.sh<br><br>', output: `*** Interpreters ***<br><br>`},
{ input: '', output: `TypeScript: Hello, World!<br>`},
{ input: '', output: `Go: Hello, World!<br>`},
{ input: '', output: `JavaScript: Hello, World!<br>`},
{ input: '', output: `Perl: Hello, World!<br>`},
{ input: '', output: `Python: Hello, World!<br>`},
{ input: '', output: `Ruby: Hello World!<br>`},
{ input: '', output: `Lua: Hello, World!<br><br>`},
{ input: '', output: `*** Compilers ***<br><br>`},
{ input: '', output: `C: Hello, World!<br>`},
{ input: '', output: `Rust: Hello, World!<br>`},
];
let commandIndex4 = 0;
let command4 = commands4[commandIndex4];
let commandOutput4 = '';
function typeCommand4() {
if (commandIndex4 === commands4.length) {
return;
}
if (command4.input.length === 0) {
commandOutput4 += '\n' + command4.output + '\n';
document.querySelector('#terminal-output-4').innerHTML = commandOutput4;
commandIndex4++;
command4 = commands4[commandIndex4];
setTimeout(typeCommand4, 1000);
return;
}
let char = command4.input[0];
if (char === '$') {
char = '<span class="purple">$</span>';
}
commandOutput4 += char;
command4.input = command4.input.slice(1);
document.querySelector('#terminal-output-4').innerHTML = commandOutput4;
const delay = Math.floor(Math.random() * 100) + 50; // random delay between 50 and 150 ms
setTimeout(typeCommand4, delay);
}
const terminalOutput4 = document.querySelector('#terminal-output-4');
const observer4 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
typeCommand4();
observer4.disconnect();
}
});
observer4.observe(terminalOutput4);
</script>

62
src/layouts/partials/auth-data-snippet.html
View file

@ -1,24 +1,38 @@
<script>
try {
fetch('https://app.tea.xyz/api/signups')
.then(res => res.json())
.then(res => {
const signups = res.signups ? res.signups.toLocaleString() : ""
if (!(localStorage['signup'] || '').match(/:::/)) {
$('#count').html(signups)
}
$('#count1').html(signups)
$('#count2').html(signups)
$('#count3').html(signups)
$('#count4').html(signups)
$('#count5').html(signups)
$('#count6').html(signups)
$('#count7').html(signups)
$('#stat-one').html(res.repos ? res.repos.toLocaleString() : "")
$('#stat-one-small').html(res.repos ? res.repos.toLocaleString() : "")
$('#stat-two').html(res.maintainers ? res.maintainers.toLocaleString() : "")
})
} catch (e) {
console.error(e)
}
</script>
<script>
// Add a 400px tall placeholder
$('#count').html('<div style="height: 400px"></div>');
$('#count1').html('<div style="height: 400px"></div>');
$('#count2').html('<div style="height: 400px"></div>');
$('#count3').html('<div style="height: 400px"></div>');
$('#count4').html('<div style="height: 400px"></div>');
$('#count5').html('<div style="height: 400px"></div>');
$('#count6').html('<div style="height: 400px"></div>');
$('#count7').html('<div style="height: 400px"></div>');
$('#stat-one').html('<div style="height: 400px"></div>');
$('#stat-one-small').html('<div style="height: 400px"></div>');
$('#stat-two').html('<div style="height: 400px"></div>');
try {
fetch('https://app.tea.xyz/api/signups')
.then(res => res.json())
.then(res => {
const signups = res.signups ? res.signups.toLocaleString() : ""
if (!(localStorage['signup'] || '').match(/:::/)) {
$('#count').html(signups)
}
$('#count1').html(signups)
$('#count2').html(signups)
$('#count3').html(signups)
$('#count4').html(signups)
$('#count5').html(signups)
$('#count6').html(signups)
$('#count7').html(signups)
$('#stat-one').html(res.repos ? res.repos.toLocaleString() : "")
$('#stat-one-small').html(res.repos ? res.repos.toLocaleString() : "")
$('#stat-two').html(res.maintainers ? res.maintainers.toLocaleString() : "")
})
} catch (e) {
console.error(e)
}
</script>

31
src/layouts/partials/bottle-cta.html Normal file
View file

@ -0,0 +1,31 @@
<hr>
<section>
<div class="container">
<div class="row">
<div class="col">
<div class="one-box-down">
<h4 class="text-center">Check out which versions we have bottled</h4>
<p class="text-center">We&#39;ve compiled a list of every package that&#39;s been bottled, along with their corresponding versions.</p>
</div>
<a href="/bottles/">
<button class="detail-btn-large bottle-cta"><i class="icon-enter-arrow"></i>VIEW ALL BOTTLES</button>
</a>
<style>
.bottle-cta{
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</div>
</div>
</div>
</section>
<hr>

30
src/layouts/partials/click-to-copy.html Normal file
View file

@ -0,0 +1,30 @@
<h3 class="install-label text-center display-6 mb-4">Install tea by running our one-liner:</h3>
<div class="flex pt-1 pb-1 ps-4 pe-1 mb-4 black-bg" style="max-width: 800px; margin-left:auto; margin-right:auto; height:80px; border: 1px solid #949494; border-radius: 5px;">
<code id="copy-text" class="white lead">sh <(curl tea.xyz)</code>
<button class="hbtn hb-fill-right" id="copy-button" style="height:100%;">Copy</button>
</div>
<script>
$("#copy-button").on("click", function() {
var copyText = "sh <(curl https://tea.xyz)";
var tempInput = document.createElement("input");
tempInput.style = "position: absolute; left: -1000px; top: -1000px";
tempInput.value = copyText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
// Change the button text to 'Copied'
var button = $("#copy-button");
var originalText = button.text();
button.text("Copied!");
// Change the button text back to original after 5 seconds
setTimeout(function() {
button.text(originalText);
}, 2000);
});
</script>

185
src/layouts/partials/clipboard-copy-package-detail.html
View file

@ -1,181 +1,42 @@
<hr>
<div class="row button-container" onclick="myFunction()" style="display:flex; justify-content:space-between;">
<input class="one-liner" type="text" value="sh <(curl tea.xyz) +{{- .full_name -}}" id="shortcodeCopy" readonly>
<div class="row mt-3 mb-3" onclick="myFunction()">
<div class="col">
<div class="input-container p-1" style="display:flex; justify-content:space-between;">
<input class="one-liner ms-3" type="text" value="sh <(curl tea.xyz) +{{- .full_name -}}" id="shortcodeCopy" readonly>
<!-- The button used to copy the text -->
<!-- The button used to copy the text -->
<button type="button" class="clipboard-copy" id="liveToastBtn" onclick="changeCopied()">copy</button>
<button type="button" class="clipboard-copy hbtn hb-fill-right" id="liveToastBtn" onclick="changeCopied()">copy</button>
</div>
</div>
</div>
<hr>
<style>
.button-container{
background-color: #1a1a1a;
}
@media only screen and (min-width: 992px) {
.one-liner{
width: 80%;
padding: 2.455vw 4.185vw;
border-radius: 0px;
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 2vw;
border-left: 2px solid #949494;
}
.one-liner:focus{
width:75%;
height:100%;
background-color:#1a1a1a;
border:none;
outline: none;
border-left: 2px solid #949494;
color: #fff;
}
.clipboard-copy{
height: 8.371vw;
width: 18%;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 2.1vw;
float:right !important;
background-color: #1a1a1a !important;
border: none;
border-right: 2px solid #949494;
transition: 0.2s linear;
}
.clipboard-copy:hover{
background-color: #00ffd0 !important;
color: #1a1a1a !important;
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.button-container{
padding:0px 6.1vw !important;
}
.one-liner{
width: 80%;
padding: 2.455vw 5.040vw !important;
border-radius: 0px;
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 2vw;
border-left: 2px solid #949494;
}
.one-liner:focus{
border:none;
outline: none;
border-left: 2px solid #949494;
box-shadow:none!important;
outline:none;
border:none !important;
}
.clipboard-copy{
height: 8.371vw;
width: 18%;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 2.1vw;
float:right !important;
background-color: #1a1a1a !important;
border: none;
border-right: 2px solid #949494;
transition: 0.2s linear;
width:25%;
height:100%;
}
.input-container{
width:100%;
border: 2px solid gray;
border-radius: 7px;
height:60px;
.clipboard-copy:hover{
background-color: #00ffd0 !important;
color: #1a1a1a !important;
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
.button-container{
padding: 0vw 8vw !important;
}
.one-liner{
width: 77%;
padding: 5vw 4vw;
border-radius: 0px;
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 3.5vw;
border-left: 2px solid #949494;
}
.one-liner:focus{
border:none;
outline: none;
border-left: 2px solid #949494;
}
.clipboard-copy{
padding: 5vw 4vw;
width: 20%;
font-family: "pp-neue-machina";
color:#ffffff;
font-size: 3.5vw;
float:right;
background-color: #1a1a1a !important;
border: none;
border-right: 2px solid #949494;
transition: 0.2s linear;
}
.clipboard-copy:hover{
background-color: #00ffd0 !important;
color: #1a1a1a !important;
box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
}
}
@media only screen and (max-width: 576px) {
.one-liner{
width: 100%;
padding: 7.5vw 7.5vw !important;
border-radius: 0px;
border: none;
background-color: #1a1a1a !important;
font-family: "pp-neue-machina";
color:#ffffff;
text-align: center !important;
font-size: 4vw;
border-left: 2px solid #949494;
border-right: 2px solid #949494;
}
.one-liner:focus{
border:none;
outline: none;
border-left: 2px solid #949494;
border-right: 2px solid #949494;
}
.clipboard-copy{
display: none;
}
}
</style>
<script>
function changeCopied() {

13
src/layouts/partials/desktop-ctas.html Normal file
View file

@ -0,0 +1,13 @@
<!-- Desktop CTA's -->
<div class="row desktop-ctas">
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<a href="https://github.com/teaxyz/cli#getting-started">
<button class="hbtn hb-fill-right" style="width:100% !important;">INSTALL TEA (<span class="release" style="text-transform:lowercase;"></span>)</button>
</a>
</div>
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
<a href="https://github.com/teaxyz/cli">
<button class="hbtn-light hb-light-fill-right" style="width:100% !important;">GITHUB (<span class="stargazers" style="text-transform:uppercase;"></span>)</button>
</a>
</div>
</div>

218
src/layouts/partials/footer-content.html Normal file
View file

@ -0,0 +1,218 @@
<div id="myData"></div>
<hr>
<section>
<div class="container">
<div class="row one-box">
<div class="col-xl-4 col-lg-4 col-md-8 col-sm-12 col-12">
<img class="mb-3" src="/Images/tea-logo-2.svg" alt="tea Logo (teal)" style="width:40px;">
<p class="small">tea is a unified packaging infrastructure from the creator of brew that aims to leverage blockchain in order to remunerate open-source developers for their contributions to the larger ecosystem.</p>
<div class="social-icons flex-start">
<a href="https://twitter.com/teaxyz">
<i class="icon-twitter lead me-2"></i>
</a>
<a href="https://discord.gg/KCZsXfJphn">
<i class="icon-discord lead me-2"></i>
</a>
<a href="https://github.com/teaxyz/cli">
<i class="icon-github lead me-2"></i>
</a>
<a href="https://t.me/tea_xyz">
<i class="icon-telegram lead me-2"></i>
</a>
</div>
</div>
<div class="col-xl-2 col-lg-2 col-md-4 col-sm-12 col-12 mt-5 ps-xl-5">
<h6 class="white mt-2">Quick Links</h6>
<a href="https://medium.com/teaxyz">blog</a><br>
<a href="/careers/">careers</a><br>
<a href="/privacy-policy/">privacy policy</a><br>
<a href="/terms-of-use/">terms of use</a><br>
</div>
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 mt-5 ps-3" style="margin-left:auto;">
<h6 class="white mb-3 mt-2">Enter your email to join our newsletter:</h6>
<div class="klaviyo-form-WXJy3Y mb-2"></div>
<p class="small grid-gray">We will never share your information with anyone else; this is just for the occasional newsletter. You can learn more by reading our <a href="/privacy-policy/" style="color:#00ffd0 !important;">privacy policy</a>. </p>
</div>
</div>
<div class="row">
<div class="col">
<p class="small">©<span id="copyYear"></span> tea inc. You can also share our <a href="https://linktr.ee/teaxyz" class="teal" style="color:#00ffd0 !important;">Linktree</a>.</p>
</div>
</div>
</div>
</section>
<style>
#email_61878536{
height: 50px !important;
}
</style>
<script>
const copyrightDate = new Date().getFullYear();
document.getElementById('copyYear').innerHTML = copyrightDate;
</script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(window).scroll(function () {
$('nav').toggleClass('scrolled', $(this).scrollTop() > 100);
});
if (localStorage['signup'].match(/:::/)) {
const [username, serial_] = localStorage.signup.split(':::');
const serial = (+serial_).toLocaleString()
$('.box-auth-true').show();
$('.box-auth-false').hide();
$('#auth-username').html(username);
$('#count').html(`${serial} / <span id='count3'></span>`);
$('#count-sub-text').html('YOUR AUTHENTICATION NUMBER');
$('#communitea').html('Thanks for joining our communi&#39;<span style="color:#54BAAB;">tea</span>');
$('#revolution-text').html(
'Now stay tuned! As an early authenticator, you’ll be entitled to a variety of exciting rewards, including minted NFT certificates.'
);
$('#auth-body-text').hide();
$('.rounded-pill').hide();
$('.auth-btn').html('Configure GitHub App');
$('.auth-btn').attr('href', 'https://github.com/apps/tea-xyz')
}
</script>
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "c9ohlhyxzf");
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3M5LVH76F"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-Q3M5LVH76F');
</script>
<script>
const textList = [
"game&#8208;dev",
"AI",
"automation",
"data",
"ML",
"web",
"devops",
"creating",
"everything",
"<i>you<i>"
];
const cycle = document.querySelector(".cycle","#cycle");
let i = 0;
const cycleText = () => {
cycle.innerHTML = textList[i];
i = ++i % textList.length;
};
cycleText();
setInterval(cycleText, 2400);
</script>
<script>
rdt('track', 'SignUp');
rdt('track', 'ViewContent');
</script>
<script>
const url = 'https://tea.breezy.hr/json?verbose=true';
fetch(url)
.then(res => res.json())
.then((out) => {
//Debugging + Reference
console.log(out);
//Job Description One
document.getElementById('typeOne').innerHTML = out[0].type.name;
document.getElementById('deptOne').innerHTML = out[0].department;
out[0].location.is_remote === true ? document.getElementById('locOne').innerHTML = 'Remote' : document.getElementById('locOne').innerHTML = out[0].location.name;
document.getElementById('jobOne').innerHTML = out[0].name;
document.getElementById('descOne').innerHTML = out[0].description;
document.getElementById('linkOne').href = out[0].url;
document.getElementById('typeTwo').innerHTML = out[1].type.name;
document.getElementById('deptTwo').innerHTML = out[1].department;
document.getElementById('jobTwo').innerHTML = out[1].name;
document.getElementById('descTwo').innerHTML = out[1].description;
out[1].location.is_remote === true ? document.getElementById('locTwo').innerHTML = 'Remote' : document.getElementById('locTwo').innerHTML = out[1].location.name;
document.getElementById('linkTwo').href = out[1].url;
document.getElementById('jobThree').innerHTML = out[2].name;
document.getElementById('typeThree').innerHTML = out[2].type.name;
document.getElementById('deptThree').innerHTML = out[2].department;
out[2].location.is_remote === true ? document.getElementById('locThree').innerHTML = 'Remote' : document.getElementById('locThree').innerHTML = out[2].location.name;
document.getElementById('descThree').innerHTML = out[2].description;
document.getElementById('linkThree').href = out[2].url;
})
.catch(err => { throw err });
</script>
<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
</script>
<script>
$(document).ready(function() {
var repository = "teaxyz/cli";
var url = "https://api.github.com/repos/" + repository;
$.get(url, function(data) {
var stargazers = numeral(data.stargazers_count).format("0.0a");
$(".stargazers").html(stargazers).hide().fadeIn(400);
});
});
</script>
<script>
$(document).ready(function() {
var repository = "teaxyz/cli";
var url = "https://api.github.com/repos/"+ repository +"/releases/latest";
$.get(url, function(data) {
var release = data.tag_name;
$(".release").html(release).hide().fadeIn(400);
});
});
</script>

71
src/layouts/partials/footer.html
View file

@ -1,42 +1,5 @@
<hr>
<div id="myData"></div>
<section class="footer" id="community">
<div class="container">
<div class="row footer-top one-box-down">
<div class="col-lg-8 footer-content">
<h4>the next-generation, cross‐platform package manager</h4>
<p>tea.cli is a delightful package manager that gets out of your way and sets you up for a joyful development process. <a class="teal" href="#">You can install it today</a>. <!--Our web3 protocol will create an OSS ecosystem that is safer for all users, and fair for all maintainers. Read our <a class="teal" href="#">white paper</a> here.--></p>
<img class="footer-grid" src="/Images/footer-grid-element.svg" alt="tea.grid">
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
</div>
<div class="col-lg-4">
<div class="card social-box" style="width: 100%; float:right;">
<ul class="list-group list-group-flush">
<a class="list-group-item" role="button" href="https://twitter.com/teaxyz"><i class="icon-twitter social-icon"></i>Twitter</a>
<a class="list-group-item" role="button" href="https://discord.gg/KCZsXfJphn"><i class="icon-discord social-icon"></i>Discord</a>
<a class="list-group-item" role="button" href="https://github.com/teaxyz/cli"><i class="icon-github social-icon"></i>GitHub <span style="font-size:16px;">(&#9734;<span class="stargazers"></span>, <span class="release"></span>)</span></a>
<a class="list-group-item" role="button" href="https://t.me/tea_xyz"><i class="icon-telegram social-icon"></i>Telegram</a>
</ul>
</div>
</div>
</div>
<div class="row mb-4">
<h4 class="mb-4">sign up for tea'mails</h4>
<div class="col">
{{- partial "klaviyo-form.html" -}}
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p class="small">©<span id="copyYear"></span> tea inc. You can also share our <a href="https://linktr.ee/teaxyz" class="teal">Linktree</a>.</p>
</div>
<div class="col-lg-6">
{{- partial "footer-nav.html" . -}}
</div>
</div>
</div>
</section>
<div id="myData"></div>
<script>
@ -177,27 +140,27 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
</script>
<script>
$(document).ready(function() {
var repository = "teaxyz/cli";
var url = "https://api.github.com/repos/" + repository;
$(document).ready(function() {
var repository = "teaxyz/cli";
var url = "https://api.github.com/repos/" + repository;
$.get(url, function(data) {
var stargazers = numeral(data.stargazers_count).format("0.0a");
$(".stargazers").html(stargazers);
});
});
$.get(url, function(data) {
var stargazers = numeral(data.stargazers_count).format("0.0a");
$(".stargazers").html(stargazers).hide().fadeIn(400);
});
});
</script>
<script>
$(document).ready(function() {
var repository = "teaxyz/cli";
var url = "https://api.github.com/repos/"+ repository +"/releases/latest";
$(document).ready(function() {
var repository = "teaxyz/cli";
var url = "https://api.github.com/repos/"+ repository +"/releases/latest";
$.get(url, function(data) {
var release = data.tag_name;
$(".release").html(release);
});
});
$.get(url, function(data) {
var release = data.tag_name;
$(".release").html(release).hide().fadeIn(400);
});
});
</script>

297
src/layouts/partials/full-width-cta-split.html
View file

@ -1,18 +1,299 @@
<hr>
<div class="row button-container">
<a href="#" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-0 mt-0 split-btn" id="nav-cta"><i class="icon-enter-arrow"></i>NPM</a>
<a href="#" role="button" class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-0 mt-0 split-btn split-right" id="nav-cta"><i class="icon-enter-arrow"></i>INSTALL</a>
<div class="row button-container flex">
<a href="https://github.com/teaxyz/cli" class="ps-0 pe-0 btn-div" id="btn-div-top" >
<button class="sbtn sb-fill-top">GIVE US A STAR (<span class="stargazers" style="text-transform: lowercase;"></span>)</button>
</a>
<a href="https://github.com/teaxyz/cli" class="ps-0 pe-0 btn-div" id="btn-div" >
<button class="sbtn sb-fill-top">INSTALL TEA (<span class="release" style="text-transform: lowercase;"></span>)</button>
</a>
</div>
<hr>
<style>
.split-btn{
display: inline-block;
width: 50%;
@media only screen and (min-width: 1200px) {
.btn-div{
width: 50%;
border-left: 2px solid #949494;
}
#btn-div{
border-right: 2px solid #949494;
}
.sbtn {
font-family: "pp-neue-machina";
background-color: #1a1a1a;
position: relative;
box-sizing: border-box;
height: 8.8vw !important;
display: inline-block;
overflow: hidden;
width: 100%;
text-align: center;
border: none;
text-decoration: none;
color: rgb(225, 225, 225);
white-space: nowrap;
z-index: 0;
}
.sb-fill-top::before {
position: absolute;
content: "";
background: rgb(6, 255, 208);
transition-duration: 0.2s;
z-index: -1;
inset: auto auto 0px 0px;
width: 100%;
height: 0px;
opacity: 1;
}
.sb-fill-top:hover::before {
width: 100%;
height: 100%;
opacity: 1;
}
.sb-fill-top:hover {
color: rgb(10, 5, 5);
background: rgb(255, 255, 255);
transition: color 0.2s ease 0s, background 0s ease 0.3s;
}
}
.split-right{
border-left: 0px !important;
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.btn-div{
width: 50%;
border-left: 2px solid #949494;
}
#btn-div{
border-right: 2px solid #949494;
}
.sbtn {
font-family: "pp-neue-machina";
background-color: #1a1a1a;
position: relative;
box-sizing: border-box;
height: 8.8vw !important;
display: inline-block;
overflow: hidden;
width: 100%;
text-align: center;
border: none;
text-decoration: none;
color: rgb(225, 225, 225);
white-space: nowrap;
z-index: 0;
}
.sb-fill-top::before {
position: absolute;
content: "";
background: rgb(6, 255, 208);
transition-duration: 0.2s;
z-index: -1;
inset: auto auto 0px 0px;
width: 100%;
height: 0px;
opacity: 1;
}
.sb-fill-top:hover::before {
width: 100%;
height: 100%;
opacity: 1;
}
.sb-fill-top:hover {
color: rgb(10, 5, 5);
background: rgb(255, 255, 255);
transition: color 0.2s ease 0s, background 0s ease 0.3s;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.btn-div{
width: 50%;
border-left: 2px solid #949494;
}
#btn-div{
border-right: 2px solid #949494;
}
.sbtn {
font-family: "pp-neue-machina";
background-color: #1a1a1a;
position: relative;
box-sizing: border-box;
height: 8.8vw !important;
display: inline-block;
overflow: hidden;
width: 100%;
text-align: center;
border: none;
text-decoration: none;
color: rgb(225, 225, 225);
white-space: nowrap;
z-index: 0;
}
.sb-fill-top::before {
position: absolute;
content: "";
background: rgb(6, 255, 208);
transition-duration: 0.2s;
z-index: -1;
inset: auto auto 0px 0px;
width: 100%;
height: 0px;
opacity: 1;
}
.sb-fill-top:hover::before {
width: 100%;
height: 100%;
opacity: 1;
}
.sb-fill-top:hover {
color: rgb(10, 5, 5);
background: rgb(255, 255, 255);
transition: color 0.2s ease 0s, background 0s ease 0.3s;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
.btn-div{
width: 50%;
border-left: 2px solid #949494;
}
#btn-div{
border-right: 2px solid #949494;
}
.sbtn {
font-family: "pp-neue-machina";
background-color: #1a1a1a;
position: relative;
box-sizing: border-box;
height: 8.8vw !important;
display: inline-block;
overflow: hidden;
width: 100%;
text-align: center;
border: none;
text-decoration: none;
color: rgb(225, 225, 225);
white-space: nowrap;
z-index: 0;
}
.sb-fill-top::before {
position: absolute;
content: "";
background: rgb(6, 255, 208);
transition-duration: 0.2s;
z-index: -1;
inset: auto auto 0px 0px;
width: 100%;
height: 0px;
opacity: 1;
}
.sb-fill-top:hover::before {
width: 100%;
height: 100%;
opacity: 1;
}
.sb-fill-top:hover {
color: rgb(10, 5, 5);
background: rgb(255, 255, 255);
transition: color 0.2s ease 0s, background 0s ease 0.3s;
}
}
@media only screen and (max-width: 576px) {
.btn-div{
width: 100%;
border-left: 2px solid #949494;
}
#btn-div{
border-right: 2px solid #949494;
}
#btn-div-top{
border-right: 2px solid #949494;
border-bottom: 2px solid #949494;
}
.sbtn {
font-family: "pp-neue-machina";
background-color: #1a1a1a;
position: relative;
box-sizing: border-box;
height: 10.938vw !important;
display: inline-block;
overflow: hidden;
width: 100%;
text-align: center;
border: none;
text-decoration: none;
color: rgb(225, 225, 225);
white-space: nowrap;
z-index: 0;
}
.sb-fill-top::before {
position: absolute;
content: "";
background: rgb(6, 255, 208);
transition-duration: 0.2s;
z-index: -1;
inset: auto auto 0px 0px;
width: 100%;
height: 0px;
opacity: 1;
}
.sb-fill-top:hover::before {
width: 100%;
height: 100%;
opacity: 1;
}
.sb-fill-top:hover {
color: rgb(10, 5, 5);
background: rgb(255, 255, 255);
transition: color 0.2s ease 0s, background 0s ease 0.3s;
}
}
</style>

41
src/layouts/partials/head.html
View file

@ -97,6 +97,39 @@
<meta name="facebook-domain-verification" content="0fsbdl7joh0gha23zbhtovtpn0z0cl" />
<meta name="description" content="The tools that build the internet have steeped too long. For the past two decades, big tech has made trillions off the generosity of visionary developers and web pioneers… never thanking, never mentioning, and certainly never paying. At tea, we’re brewing something to change that by enabling developers (you) to continue doing what you love, while earning what you deserve.">
<!-- Hotjar Tracking Code for https://tea.xyz -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:3383276,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
<!-- Style for Swiper -->
<style>
.swiper-package-display{
display:block;
}
.grid-package-display{
display:none;
}
@media only screen and (min-width: 576px) {
.grid-package-display{
display:block;
}
.swiper-package-display{
display:none;
}
}
</style>
<script>
const q = window.location.search.match(/[\^\?&]store=[^&]*/)
if (q) {
@ -113,5 +146,11 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
</head>
<style>
.tea {
font-family: "sono", sans-serif !important;
text-transform: lowercase;
}
</style>
</head>

11
src/layouts/partials/header.html
View file

@ -1,7 +1,7 @@
<div class="offcanvas black-bg offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasRightLabel">MENU</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"><i class="icon-tea-x-btn"></i></button>
</div>
<div class="offcanvas-body">
@ -11,6 +11,9 @@
<a class="top-nav-link nav-link{{ if $.IsMenuCurrent "main" . }} active" aria-current="page {{ end }}" href="{{ .URL }}">{{ .Name}}</a>
</li>
{{ end }}
<li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3">
<a class="top-nav-link nav-link" aria-current="page" href="https://github.com/teaxyz/cli/stargazers">GitHub (<span class="stargazers"></span>)</a>
</li>
</ul>
</div>
@ -20,10 +23,6 @@
@media only screen and (max-width: 992px) {
.offcanvas{
border-left: 2px solid #949494;
}
.offcanvas-title{
font-size: 3vw;
}
@ -40,4 +39,4 @@
}
</style>
</style>

75
src/layouts/partials/hero-terminal-animation.html Normal file
View file

@ -0,0 +1,75 @@
<div class="terminal flex">
<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-xl-5 p-lg-5 p-md-3 p-sm-3 p-3">
<div class="terminal-content" id="hero-terminal-content">
<code id="terminal-output"></code>
<p id="terminal-input"></p>
</div>
</div>
</div>
<style>
.icon-exclamation-circle,
.icon-check-circle{
position: relative;
top:2px;
margin-right:5px;
}
</style>
<script>
const commands = [
{ input: "$ node --eval 'console.log(\"Hello World!\")'", output: `<span class="mb-5">command not found: node</span><br><div class="comment p-2" style="position:relative; top:5px;"><code class="small"><i class="icon-exclamation-circle"></i>Node is not installed, thus command is not found</code></div>`},
{ input: "$ sh <(curl tea.xyz) --yes<br>############################################################", output: ``},
{ input: "$ node --eval 'console.log(\"Hello World!\")'", output: `tea: installing nodejs.org^19` },
{ input: "", output: `Hello World! &#128526;<br><div class="comment-success p-2" style="position:relative; top:5px;"><code class="small"><i class="icon-check-circle"></i>tea magically installs needed dependencies</code></div>` },
];
let commandIndex = 0;
let command = commands[commandIndex];
let commandOutput = "";
function typeCommand() {
if (commandIndex === commands.length) {
return;
}
if (command.input.length === 0) {
setTimeout(() => {
commandOutput += '\n' + command.output + '\n';
document.querySelector("#terminal-output").innerHTML = commandOutput;
commandIndex++;
command = commands[commandIndex];
// Add a longer delay after each command output (500ms in this case)
setTimeout(typeCommand, 2000);
}, 1000);
return;
}
let currentChar = command.input[0];
if (currentChar === '$') {
currentChar = '<span class="purple">$</span>';
}
commandOutput += currentChar;
command.input = command.input.slice(1);
// Check if the current character is a '#' character
if (currentChar === '#') {
// Animate the '#' character really fast
setTimeout(typeCommand, 10);
} else {
// Add a random delay between 40ms and 80ms (except for '#' characters)
const delay = Math.floor(Math.random() * 40) + 40;
setTimeout(typeCommand, delay);
}
document.querySelector("#terminal-output").innerHTML = commandOutput;
}
typeCommand();
</script>

87
src/layouts/partials/mobile-ctas.html Normal file
View file

@ -0,0 +1,87 @@
<!-- Mobile CTA's -->
<div class="row mt-5 gx-3 mobile-ctas">
<div class="col-12 mb-2">
<div class="klaviyo-form-WxjYGS"></div>
</div>
<p class="text-center small light-gray">or</p>
<div class="col-12">
<button class="mbtn hbtn-light hb-light-fill-right mb-4" id="follow-button" style="width:100%; text-transform:uppercase;"><i class="icon-twitter" style="position:relative;top:2px;"></i>Follow Us</button>
</div>
</div>
<div class="mb-4 subscribe-collapse">
<div class="col">
<p class="text-center small grid-gray">Enter your email to join our newsletter:</p>
<div class="klaviyo-form-WXJy3Y"></div>
<div id="formResponse"></div>
</div>
</div>
<style>
.subscribe-collapse{
display:none;
}
.klaviyo-form-WxjYGS{
border: none !important;
padding: 0px !important;
}
.form-container{
border: 1px solid #949494;
border-radius: 5px !important;
height: 50px;
}
#email{
width:100%;
height: 100% !important;
background-color: #1a1a1a;
border:none !important;
color: white;
font-family: "inter", sans-serif;
border-radius: 5px;
}
#email-btn{
text-transform: uppercase !important;
}
.email-send{
text-transform: uppercase !important;
width:20% !important;
border-radius: 3px;
height: 100% !important;
}
#email_62853377{
background-color: #1a1a1a !important;
border-radius: 0px !important;
text-align: center !important;
border-color: #949494 !important;
color: #ffffff !important;
}
#email_62853377:hover{
border-color: #949494 !important;
}
#email_62853377:focus{
box-shadow:none !important;
}
.go3894874857{
height: 50px !important;
border-radius: 0px !important;
font-family: "inter", sans-serif !important;
}
</style>
<!-- Deep-linking script for Twitter follow button -->
<script>
document.getElementById("follow-button").addEventListener("click", function() {
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
window.location.href = "twitter://user?screen_name=teaxyz";
} else if (navigator.userAgent.match(/Android/i)) {
window.location.href = "twitter://user?screen_name=teaxyz";
} else {
window.location.href = "https://twitter.com/teaxyz";
}
});
</script>

140
src/layouts/partials/navbar.html
View file

@ -1,21 +1,141 @@
<nav class="navbar bg-dark navbar-expand-lg navbar-dark sticky-top my-auto main-nav">
<div class="container-fluid top-nav">
<a class="navbar-brand" href="/"><img class="nav-logo" src="/Images/tea-logo-2.svg"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
<nav class="navbar navbar-expand-lg sticky-top my-auto main-nav">
<div class="container-fluid top-nav p-0">
<a class="navbar-brand p-0" href="/"><img src="/Images/tea-logo-1.png" class="top-logo" alt="top-logo"></a>
<button class="navbar-toggler me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
aria-controls="offcanvasRight" aria-expanded="false" aria-label="Toggle navigation">
MENU
<i class="icon-hamburger-icon-square dark-gray"></i>
</button>
<div class="collapse navbar-collapse pt-2 pb-2" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-4 my-auto">
<div class="collapse navbar-collapse flex" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto my-auto">
{{ range .Site.Menus.main }}
<li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3">
<li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3 top-nav-item">
<a class="nav-link{{ if $.IsMenuCurrent "main" . }} active" aria-current="page {{ end }}" href="{{ .URL }}">{{ .Name}}</a>
</li>
{{ end }}
<li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3">
<a class="nav-link" aria-current="page" href="https://github.com/teaxyz/cli">GITHUB (&#9734;<span class="stargazers"></span>, <span class="release"></span>)</a>
<li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3 top-nav-item">
<a class="nav-link" aria-current="page" href="https://github.com/teaxyz/cli/stargazers">GitHub (<span class="stargazers"></span>)</a>
</li>
<style>
.hbtn {
background-color: #8000ff;
position: relative;
box-sizing: border-box;
height: 60px;
display: inline-block;
overflow: hidden;
padding: 8px 20px;
width: 300px;
text-align: center;
border: 1px solid #8000ff;
text-decoration: none;
color: rgb(225, 225, 225);
white-space: nowrap;
z-index: 0;
}
.hbtn i {
padding-right: 8px;
}
.hb-fill-right::before {
position: absolute;
content: "";
background: rgb(91, 0, 184);
transition-duration: 0.2s;
z-index: -1;
inset: 0px auto auto 0px;
width: 0px;
height: 100%;
opacity: 1;
}
.hb-fill-right:hover::before {
width: 100%;
height: 100%;
opacity: 1;
}
.hb-fill-right:hover {
color: rgb(255, 255, 255);
background: rgb(91, 0, 184);
transition: color 0.3s ease 0s, background 0s ease 0.3s;
}
.hbtn-light {
font-family: "pp-neue-machina";
background: none !important;
position: relative;
box-sizing: border-box;
height: 60px;
display: inline-block;
overflow: hidden;
padding: 8px 20px;
width: 300px;
text-align: center;
border: 1px solid #e1e1e1;
text-decoration: none;
color: #e1e1e1;
white-space: nowrap;
z-index: 0;
}
.hbtn-light i {
padding-right: 8px;
}
.hb-light-fill-right::before {
position: absolute;
content: "";
background: #e1e1e1;
transition-duration: 0.2s;
z-index: -1;
inset: 0px auto auto 0px;
width: 0px;
height: 100%;
opacity: 1;
}
.hb-light-fill-right:hover::before {
width: 100%;
height: 100%;
opacity: 1;
}
.hb-light-fill-right:hover {
color: #1a1a1a;
background: rgb(91, 0, 184);
transition: color 0.3s ease 0s, background 0s ease 0.3s;
}
#top-menu-btn{
height:50px;
}
.top-nav-item{
color: #e1e1e1 !important;
}
.top-nav-item:hover{
color: #1a1a1a !important;
}
</style>
</ul>
<a href="https://github.com/teaxyz/cli#getting-started" class="ms-3">
<button class="hbtn hb-fill-right" id="top-menu-btn">INSTALL TEA</button>
</a>
<!--
<a class="btn btn-primary auth-btn mt-lg-0 mt-md-0 mt-sm-4 mt-4" id="nav-cta" href="https://github.com/login/oauth/authorize?client_id=9d1f1a72f1300b6991df&state=teaxyz" role="button"><span id="cta-text">Authenticate with tea</span><span class="badge rounded-pill bg-primary ms-3"><span id="count1">287</span></span><span id="lp-text"></span></a>-->
</div>

14
src/layouts/partials/new-hero-section-grid.html Normal file
View file

@ -0,0 +1,14 @@
<div class="container hero-container">
<div class="row">
<div class="col">
<h1 class="impact text-center" style="z-index:3; position: relative;">Invisible yet <span class="callout white">powerful</span></h1>
<div class="lead-box flex text-center black-bg p-xl-5 p-lg-5 p-md-5 p-sm-3 p-3">
<p class="lead-text 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>
</div>
</div>
</div>
</div>
</section>
<div class="full-width-cta-container">
{{- partial "full-width-cta-split.html" . -}}
</div>

33
src/layouts/partials/nft-cta.html Normal file
View file

@ -0,0 +1,33 @@
<!-- Package CTA Section
<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" . -}}

44
src/layouts/partials/package-grid.html
View file

@ -1,36 +1,32 @@
<!-- Package Grid -->
<section>
<!-- Package Grid Header -->
<hr>
<div class="container package-grid-header two-boxes">
<section class="flex flex-column flex-md-row">
<h3>packages</h3>
</section>
<p style="width:60%;">There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here. We use <a href="https://stability.ai/blog/stable-diffusion-public-release">Stable Diffusion</a> to generate the artwork for each package using their title and code for input. That’s the power of Open Source.</p>
</div>
<hr>
<div class="container black-bg">
<div class="row">
<div class="col">
{{- partial "search-menu.html" "searchTermDesktop" -}}
<hr>
{{- partial "search-menu.html" "searchTermDesktop" -}}
<hr>
<div class="package-grid">
<div class="package-grid">
<!-- Start Package Grid -->
<!-- Start Package Grid -->
<div class="row package-row black-bg g-0">
<div id="packageGrid" class="package-grid">
{{ range $.Site.Data.packages }}
{{- partial "package-thumbnail.html" .}}
{{ end }}
<div class="row package-row black-bg g-0">
<div id="packageGrid" class="package-grid">
{{ range $.Site.Data.packages }}
{{- partial "package-thumbnail.html" .}}
{{ end }}
</div>
{{- partial "no-results-found.html" }}
</div>
</div>
<hr>
<div id="loadMoreSection" class="container small">
<div id="loadMorePackagesBtn"><i class="icon-enter-arrow"></i> SHOW MORE</div>
</div>
</div>
{{- partial "no-results-found.html" }}
</div>
</div>
<hr>
<div id="loadMoreSection" class="container small">
<div id="loadMorePackagesBtn"><i class="icon-enter-arrow"></i> SHOW MORE</div>
</div>
</section>
<style>

52
src/layouts/partials/package-section.html Normal file
View file

@ -0,0 +1,52 @@
<!-- Package Section: Before -->
<section class="package-before-section ">
<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;">The unified packaging infrastructure.</h2>
<p class="lead">Access the latest tools, languages and frameworks seamlessly across all platforms with tea&#8212;the standalone, binary download from the creator of brew. Unleash the power of the open-source ecosystem by <a href="https://github.com/teaxyz/setup/blob/main/install.sh">installing tea</a> today.</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>
.swiper-package-display{
display:block;
}
.grid-package-display{
display:none;
}
@media only screen and (min-width: 576px) {
.grid-package-display{
display:block;
}
.swiper-package-display{
display:none;
}
}
</style>

484
src/layouts/partials/package-thumbnail.html
View file

@ -1,364 +1,222 @@
<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}">
<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}">
<a href="/+{{- lower .full_name -}}/">
<div class="p-3">
<figure class="card-img-top" >
<img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
<article class="card-thumb-label">
<i class="icon-tea-logo-iconasset-1 lead" style="color:#1a1a1a;"></i>
<h3 class="package-title mb-1">{{- .name -}}</h3>
{{ if not (eq .maintainer "") }}
<h4 class="small">&#x2022;&nbsp;{{- .maintainer -}}</h4>
{{end}}
</article>
</figure>
</a>
<div class="card-body thumbnail-body">
<div class="card-text-container">
<p class="card-text small">
<span class="grid-gray">V&NonBreakingSpace;{{- .version -}}</span>
<!--
TODO: uncomment once install counts improve
<br>
<span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
</p>
</div>
<a href="/+{{- lower .full_name -}}/">
<figure class="card-img-top" >
<img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
<article class="card-thumb-label">
<i class="icon-tea-logo-iconasset-1"></i>
<h3>{{- .name -}}</h3>
{{ if not (eq .maintainer "") }}
<h4>&#x2022;&nbsp;{{- .maintainer -}}</h4>
{{end}}
</article>
</figure>
<button class="hbtn hb-fill-right detail-btn" type="button" name="button">Details</button>
</a>
<div class="card-body thumbnail-body">
<div class="card-text-container">
<p class="card-text">
<span class="package-version-no">V&NonBreakingSpace;{{- .version -}}</span>
<!--
TODO: uncomment once install counts improve
<br>
<span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
</p>
</div>
<a href="/+{{- lower .full_name -}}/">
{{- partial "detail-btn.html" . -}}
</a>
</div>
<div class="card-body thumbnail-body-mobile">
<a href="/+{{- lower .full_name -}}/">
<button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
</a>
</div>
</div>
<div class="card-body thumbnail-body-mobile">
<a href="/+{{- lower .full_name -}}/">
<button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
</a>
</div>
</div>
</div>
<style>
.detail-btn{
width: 100px !important;
height: 30px;
padding:0px;
}
.package-title{
font-size: 1.5rem;
}
div.card.card-thumbnail{
background-color: #1a1a1a;
transition: all .3s;
background-color: #1a1a1a;
transition: all .3s;
}
.card-img-top {
position: relative;
position: relative;
}
.detail-btn{
position: relative;
float:right!important;
right: 0;
position: relative;
float:right!important;
right: 0;
}
@media only screen and (min-width: 576px) {
.package-image{
box-shadow: 0px 0px 12px #0c0c0c !important;
}
.package-image{
box-shadow: 0px 0px 12px #0c0c0c !important;
}
figure{
transition: 0.2s ease-in-out;
}
figure{
transition: 0.2s ease-in-out;
}
figure:hover{
transform: scale(1.02);
}
figure:hover{
transform: scale(1.02);
}
}
@media only screen and (min-width: 992px) {
.card-thumb-label i{
font-size: 1.5vw;
}
.card-thumb-label {
position: absolute;
background: rgba(255,255,255,0.9);
left: 0;
bottom: 0vw;
padding: 1.116vw;
text-align: left;
width: 90%;
height: 40;
}
.card-thumb-label h3 {
color: black;
font-size: 1.8vw;
line-height: 1.8vw;
margin: 0px 0px 0.5vw 0vw;
padding: 0px;
}
.card-thumb-label h4 {
color: black;
font-size: .9vw;
line-height: 1vw;
margin: 0px;
padding: 0px;
}
.card-thumbnail{
background: none;
border-radius: 0px !important;
border: 1px solid #949494;
padding: 1.674vw;
}
.thumbnail-body{
display: flex;
border-radius: 0px !important;
padding: 0vw;
justify-content: space-between;
}
.card-img-top{
border-radius: 0px;
margin-bottom: 1.674vw;
}
.card-text{
font-size: 0.781vw;
float:left;
position: relative;
top:0.502vw;
}
.card-text-container{
float:left;
position: relative;
width:48%;
}
.thumbnail-body-mobile{
display: none;
}
.card-thumb-label i{
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.card-thumb-label i{
font-size: 2vw;
}
.card-thumb-label {
position: absolute;
background: rgba(255,255,255,0.9);
left: 0;
bottom: 0vw;
padding: 1.116vw;
text-align: left;
width: 90%;
height: 40%;
}
.card-thumb-label h3 {
color: black;
font-size: 2.8vw;
line-height: 2.8vw;
margin: 0px 0px 1vw 0vw;
padding: 0px;
}
.card-thumb-label h4 {
color: black;
font-size: 1.5vw;
line-height: 1.5vw;
margin: 0px;
padding: 0px;
}
.card-thumbnail{
background: none;
border-radius: 0px !important;
border: 1px solid #949494;
padding: 1.674vw;
}
.thumbnail-body{
display: flex;
border-radius: 0px !important;
padding: 0vw;
justify-content: space-between;
}
.card-img-top{
border-radius: 0px;
margin-bottom: 1.674vw;
}
.card-text{
font-size: 0.781vw;
float:left;
position: relative;
top:0.502vw;
}
.card-text-container{
float:left;
position: relative;
width:48%;
}
.thumbnail-body-mobile{
display: none;
}
.card-thumb-label {
position: absolute;
background: rgba(255,255,255,0.9);
left: 0;
bottom: 0vw;
padding: 1.116vw;
text-align: left;
width: 90%;
height: 50%;
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
.card-thumb-label h3 {
color: black;
margin: 0px 0px 0.5vw 0vw;
padding: 0px;
}
.card-thumb-label i{
font-size: 2.5vw;
}
.card-thumb-label h4 {
color: black;
margin: 0px;
padding: 0px;
}
.card-thumb-label {
position: absolute;
background: rgba(255,255,255,0.9);
left: 0;
bottom: 0vw;
padding: 1.116vw;
text-align: left;
width: 90%;
height: 40%;
}
.card-thumbnail{
background: none;
border-radius: 0px !important;
border: 1px solid #949494;
}
.card-thumb-label h3 {
color: black;
font-size: 3vw;
line-height: 3vw;
margin: 0px 0px 0.5vw 0vw;
padding: 0px;
}
.thumbnail-body{
display: flex;
border-radius: 0px !important;
padding: 0vw;
justify-content: space-between;
}
.card-thumb-label h4 {
color: black;
font-size: 1.5vw;
line-height: 1.5vw;
margin: 0px;
padding: 0px;
}
.card-img-top{
border-radius: 0px;
}
.card-thumbnail{
background: none;
border-radius: 0px !important;
border: 1px solid #949494;
padding: 1.674vw;
}
.card-text{
float:left;
position: relative;
font-size: .8rem;
top:2px;
}
.thumbnail-body{
display: flex;
border-radius: 0px !important;
padding: 0vw;
justify-content: space-between;
}
.card-img-top{
border-radius: 0px;
margin-bottom: 1.674vw;
}
.card-text{
font-size: 0.781vw;
float:left;
position: relative;
top:0.502vw;
}
.card-text-container{
float:left;
position: relative;
width:48%;
}
.thumbnail-body-mobile{
display: none;
}
.card-text-container{
float:left;
position: relative;
width:48%;
display: flex;
}
.thumbnail-body-mobile{
display: none;
}
@media only screen and (max-width: 576px) {
.card-thumb-label i{
font-size: 5vw;
}
.card-thumb-label i{
font-size: 5vw;
}
.card-thumb-label {
position: absolute;
background: rgba(255,255,255,0.9);
left: 0;
bottom: 0;
padding: 3vw;
text-align: left;
width: 100%;
height: 50%;
}
.card-thumb-label {
position: absolute;
background: rgba(255,255,255,0.9);
left: 0;
bottom: 0;
padding: 3vw;
text-align: left;
width: 100%;
height: 50%;
}
.card-thumb-label h3 {
color: black;
font-size: 6.8vw;
line-height: 6.8vw;
margin: 0px 0px 1vw 0vw;
padding: 0px;
}
.card-thumb-label h3 {
color: black;
font-size: 6.8vw;
line-height: 6.8vw;
margin: 0px 0px 1vw 0vw;
padding: 0px;
}
.card-thumb-label h4 {
color: black;
font-size: 3vw;
line-height: 3vw;
margin: 0px;
padding: 0px;
}
.card-thumb-label h4 {
color: black;
font-size: 3vw;
line-height: 3vw;
margin: 0px;
padding: 0px;
}
.card-thumbnail{
background: none;
border-radius: 0px !important;
border: none;
}
.card-thumbnail{
background: none;
border-radius: 0px !important;
border: none;
}
.thumbnail-body{
border-radius: 0px !important;
padding: 0vw;
display:none;
}
.thumbnail-body{
border-radius: 0px !important;
padding: 0vw;
display:none;
}
.thumbnail-body-mobile{
background-color: #8000ff;
padding: 1.25vw 0vw !important;
}
.thumbnail-body-mobile{
background-color: #8000ff;
padding: 1.25vw 0vw !important;
}
.card-img-top{
border-radius: 0px;
margin-bottom: 0vw;
}
.card-img-top{
border-radius: 0px;
margin-bottom: 0vw;
}
.detail-btn-mobile{
background:none;
border:none;
color: white;
font-family: "pp-neue-machina", sans-serif;
font-size: 4vw;
width: 100%;
height: 100%;
text-transform: uppercase;
padding-top: 2vw !important;
}
.detail-btn-mobile{
background:none;
border:none;
color: white;
font-family: "pp-neue-machina", sans-serif;
font-size: 4vw;
width: 100%;
height: 100%;
text-transform: uppercase;
padding-top: 2vw !important;
}
.detail-btn-mobile .icon-enter-arrow{
display: inline-block;
position: relaitve;
margin-right: 2vw;
transition: 0.2s ease-in-out;
}
.detail-btn-mobile .icon-enter-arrow{
display: inline-block;
position: relaitve;
margin-right: 2vw;
transition: 0.2s ease-in-out;
}
.detail-btn-mobile:hover .icon-enter-arrow{
display: inline-block;
transform: rotate(-45deg) !important;
}
.detail-btn-mobile:hover .icon-enter-arrow{
display: inline-block;
transform: rotate(-45deg) !important;
}
}

21
src/layouts/partials/partners-section.html Normal file
View file

@ -0,0 +1,21 @@
<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; margin-top: 20px;">
<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>
</div>
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
<img class="partner-logo" id="binance-logo" src="/Images/binance-logo-white.svg" alt="Binance Logo" style="width:37.757vw; margin-top:1.116vw; 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>

75
src/layouts/partials/play-btn.html Normal file
View file

@ -0,0 +1,75 @@
<div class="play-btn">
<i class="icon-play-icon"></i>
</div>
<style>
.icon-play-icon{
position: relative !important;
font-size: 22px;
left:3px;
top:3px;
}
.play-btn{
width: 100px;
height: 100px;
background-color: #4d4d4d !important;
border-radius: 60px;
display: block;
display: flex;
justify-content: center;
align-items: center;
margin-left:auto;
margin-right:auto;
position: relative;
}
.pulse-ring {
width: 200px;
height: 200px;
border-radius: 100px;
border: 4px solid #4d4d4d;
position: absolute;
top: -50px;
left: -50px;
opacity: 0;
animation: pulsate 2s ease-out;
animation-iteration-count: infinite;
}
@keyframes pulsate {
0% { transform: scale(0); opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
.play-btn:before {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 60px;
border: 4px solid #4d4d4d;
position: absolute;
top: 0;
left: 0;
animation: pulsate 2s ease-out;
animation-iteration-count: infinite;
}
.play-btn:after {
content: "";
display: block;
width: 200px;
height: 200px;
border-radius: 100px;
border: 4px solid #4d4d4d;
position: absolute;
top: -50px;
left: -50px;
animation: pulsate 2s ease-out;
animation-iteration-count: infinite;
animation-delay: 0.5s;
}
</style>

4
src/layouts/partials/search-menu.html
View file

@ -1,5 +1,5 @@
<section>
<div class="button-container">
<div>
<div class="searchBar">
<div style="display:flex; align-items:center;">
<div class="icon">
@ -50,4 +50,4 @@
color: #949494;
opacity: 1; /* Firefox */
}
</style>
</style>

7
src/layouts/partials/swiper.html
View file

@ -1,9 +1,4 @@
<!-- Package Grid Header -->
<hr>
<div class="container package-grid-header">
<h3>packages</h3>
</div>
<hr>
{{- partial "search-menu.html" "searchTermMobile" -}}
<hr>
@ -111,4 +106,4 @@
searchInputMobile.addEventListener("search", onSearchMobile);
searchInputMobile.addEventListener("change", onSearchMobile);
searchInputMobile.addEventListener("keyup", onSearchMobile);
</script>
</script>

32
src/layouts/partials/tea-magic-terminal-animation.html Normal file
View file

@ -0,0 +1,32 @@
<script>
const arrCommands = [
{ input: "$ python --eval 'print(\"Hello World!\")'", output: `command not found: python<br><span class="dark-gray">#Python is not installed, thus command is not found :/ ...</span><br>` },
{ input: "$ sh <(curl mysite.com) --yes", output: `installing ~/.mysite...`},
{ input: "$ python --eval 'print(\"Hello World!\")'", output: `mysite: installing python.org^19<br><span class="dark-gray">#mysite magically installs needed dependencies...</span>` },
{ input: "", output: `Hello World! &#128526;<br><span class="dark-gray">#and tah-dah!</span>` },
];
let intCommandIndex = 0;
let objCommand = arrCommands[intCommandIndex];
let strCommandOutput = "";
function typeCommand() {
if (intCommandIndex === arrCommands.length) {
return;
}
if (objCommand.input.length === 0) {
strCommandOutput += '\n' + objCommand.output + '\n';
document.querySelector("#terminal-display").innerHTML = strCommandOutput;
intCommandIndex++;
objCommand = arrCommands[intCommandIndex];
setTimeout(typeCommand, 1000);
return;
}
strCommandOutput += objCommand.input[0];
objCommand.input = objCommand.input.slice(1);
document.querySelector("#terminal-display").innerHTML = strCommandOutput;
setTimeout(typeCommand, 100);
}
typeCommand();
</script>

0
src/layouts/partials/twitter-card-swiper.html Normal file
View file

8
src/layouts/partials/twitter-card.html Normal file
View file

@ -0,0 +1,8 @@
<div class="twitter-card mb-4">
<div class="title-bar flex-start p-1 ps-3">
<i class="icon-twitter"></i>
</div>
<div class="twitter-content p-xl-5 p-lg-5 p-md-3 p-sm-4 p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

15
src/layouts/partials/twitter-grid.html Normal file
View file

@ -0,0 +1,15 @@
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
{{- partial "twitter-card.html" -}}
{{- partial "twitter-card.html" -}}
{{- partial "twitter-card.html" -}}
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
{{- partial "twitter-card.html" -}}
{{- partial "twitter-card.html" -}}
{{- partial "twitter-card.html" -}}
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
{{- partial "twitter-card.html" -}}
{{- partial "twitter-card.html" -}}
{{- partial "twitter-card.html" -}}
</div>

BIN
src/static/Images/dd.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
src/static/Images/futuristic-packaging.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
src/static/Images/hero-backgrond-grid.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/static/Images/hero-background-mountains.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 386 KiB

BIN
src/static/Images/horizon-illustration.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 370 KiB

BIN
src/static/Images/jcinis-eth.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

1
src/static/Images/lg-screen-grid.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

705
src/static/Images/mobile-grid.svg Normal file
View file

@ -0,0 +1,705 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="370" height="2220" viewBox="0 0 370 2220">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_1081" data-name="Rectangle 1081" width="370" height="370" fill="none"/>
</clipPath>
</defs>
<g id="Group_165" data-name="Group 165" transform="translate(-10 -750)">
<g id="Group_161" data-name="Group 161">
<g id="Group_159" data-name="Group 159" transform="translate(10 750)">
<g id="Group_141" data-name="Group 141">
<g id="Group_140" data-name="Group 140" clip-path="url(#clip-path)">
<rect id="Rectangle_1080" data-name="Rectangle 1080" width="41.092" height="41.092" transform="translate(0.086 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1082" data-name="Rectangle 1082" width="41.092" height="41.092" transform="translate(41.178 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1083" data-name="Rectangle 1083" width="41.092" height="41.092" transform="translate(82.27 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1084" data-name="Rectangle 1084" width="41.092" height="41.092" transform="translate(123.362 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1085" data-name="Rectangle 1085" width="41.092" height="41.092" transform="translate(164.454 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1086" data-name="Rectangle 1086" width="41.092" height="41.092" transform="translate(205.546 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1087" data-name="Rectangle 1087" width="41.092" height="41.092" transform="translate(246.638 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1088" data-name="Rectangle 1088" width="41.092" height="41.092" transform="translate(287.73 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_143" data-name="Group 143">
<g id="Group_142" data-name="Group 142" clip-path="url(#clip-path)">
<rect id="Rectangle_1089" data-name="Rectangle 1089" width="41.092" height="41.092" transform="translate(328.822 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1090" data-name="Rectangle 1090" width="41.092" height="41.092" transform="translate(0.086 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1092" data-name="Rectangle 1092" width="41.092" height="41.092" transform="translate(41.178 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1093" data-name="Rectangle 1093" width="41.092" height="41.092" transform="translate(82.27 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1094" data-name="Rectangle 1094" width="41.092" height="41.092" transform="translate(123.362 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1095" data-name="Rectangle 1095" width="41.092" height="41.092" transform="translate(164.454 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1096" data-name="Rectangle 1096" width="41.092" height="41.092" transform="translate(205.546 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1097" data-name="Rectangle 1097" width="41.092" height="41.092" transform="translate(246.638 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1098" data-name="Rectangle 1098" width="41.092" height="41.092" transform="translate(287.73 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_145" data-name="Group 145">
<g id="Group_144" data-name="Group 144" clip-path="url(#clip-path)">
<rect id="Rectangle_1099" data-name="Rectangle 1099" width="41.092" height="41.092" transform="translate(328.822 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1100" data-name="Rectangle 1100" width="41.092" height="41.092" transform="translate(0.086 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1102" data-name="Rectangle 1102" width="41.092" height="41.092" transform="translate(41.178 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1103" data-name="Rectangle 1103" width="41.092" height="41.092" transform="translate(82.27 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1104" data-name="Rectangle 1104" width="41.092" height="41.092" transform="translate(123.362 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1105" data-name="Rectangle 1105" width="41.092" height="41.092" transform="translate(164.454 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1106" data-name="Rectangle 1106" width="41.092" height="41.092" transform="translate(205.546 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1107" data-name="Rectangle 1107" width="41.092" height="41.092" transform="translate(246.638 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1108" data-name="Rectangle 1108" width="41.092" height="41.092" transform="translate(287.73 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_147" data-name="Group 147">
<g id="Group_146" data-name="Group 146" clip-path="url(#clip-path)">
<rect id="Rectangle_1109" data-name="Rectangle 1109" width="41.092" height="41.092" transform="translate(328.822 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1110" data-name="Rectangle 1110" width="41.092" height="41.092" transform="translate(0.086 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1112" data-name="Rectangle 1112" width="41.092" height="41.092" transform="translate(41.178 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1113" data-name="Rectangle 1113" width="41.092" height="41.092" transform="translate(82.27 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1114" data-name="Rectangle 1114" width="41.092" height="41.092" transform="translate(123.362 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1115" data-name="Rectangle 1115" width="41.092" height="41.092" transform="translate(164.454 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1116" data-name="Rectangle 1116" width="41.092" height="41.092" transform="translate(205.546 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1117" data-name="Rectangle 1117" width="41.092" height="41.092" transform="translate(246.638 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1118" data-name="Rectangle 1118" width="41.092" height="41.092" transform="translate(287.73 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_149" data-name="Group 149">
<g id="Group_148" data-name="Group 148" clip-path="url(#clip-path)">
<rect id="Rectangle_1119" data-name="Rectangle 1119" width="41.092" height="41.092" transform="translate(328.822 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1120" data-name="Rectangle 1120" width="41.092" height="41.092" transform="translate(0.086 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1121" data-name="Rectangle 1121" width="41.092" height="41.092" transform="translate(41.178 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1122" data-name="Rectangle 1122" width="41.092" height="41.092" transform="translate(82.27 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1123" data-name="Rectangle 1123" width="41.092" height="41.092" transform="translate(123.362 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1124" data-name="Rectangle 1124" width="41.092" height="41.092" transform="translate(164.454 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1125" data-name="Rectangle 1125" width="41.092" height="41.092" transform="translate(205.546 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1126" data-name="Rectangle 1126" width="41.092" height="41.092" transform="translate(246.638 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1127" data-name="Rectangle 1127" width="41.092" height="41.092" transform="translate(287.73 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1128" data-name="Rectangle 1128" width="41.092" height="41.092" transform="translate(328.822 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1129" data-name="Rectangle 1129" width="41.092" height="41.092" transform="translate(0.086 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1130" data-name="Rectangle 1130" width="41.092" height="41.092" transform="translate(41.178 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1131" data-name="Rectangle 1131" width="41.092" height="41.092" transform="translate(82.27 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1132" data-name="Rectangle 1132" width="41.092" height="41.092" transform="translate(123.362 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1133" data-name="Rectangle 1133" width="41.092" height="41.092" transform="translate(164.454 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1134" data-name="Rectangle 1134" width="41.092" height="41.092" transform="translate(205.546 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1135" data-name="Rectangle 1135" width="41.092" height="41.092" transform="translate(246.638 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1136" data-name="Rectangle 1136" width="41.092" height="41.092" transform="translate(287.73 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1137" data-name="Rectangle 1137" width="41.092" height="41.092" transform="translate(328.822 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1138" data-name="Rectangle 1138" width="41.092" height="41.092" transform="translate(0.086 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1140" data-name="Rectangle 1140" width="41.092" height="41.092" transform="translate(41.178 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1141" data-name="Rectangle 1141" width="41.092" height="41.092" transform="translate(82.27 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1142" data-name="Rectangle 1142" width="41.092" height="41.092" transform="translate(123.362 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1143" data-name="Rectangle 1143" width="41.092" height="41.092" transform="translate(164.454 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1144" data-name="Rectangle 1144" width="41.092" height="41.092" transform="translate(205.546 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1145" data-name="Rectangle 1145" width="41.092" height="41.092" transform="translate(246.638 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1146" data-name="Rectangle 1146" width="41.092" height="41.092" transform="translate(287.73 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_151" data-name="Group 151">
<g id="Group_150" data-name="Group 150" clip-path="url(#clip-path)">
<rect id="Rectangle_1147" data-name="Rectangle 1147" width="41.092" height="41.092" transform="translate(328.822 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1148" data-name="Rectangle 1148" width="41.092" height="41.092" transform="translate(0.086 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1150" data-name="Rectangle 1150" width="41.092" height="41.092" transform="translate(41.178 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1151" data-name="Rectangle 1151" width="41.092" height="41.092" transform="translate(82.27 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1152" data-name="Rectangle 1152" width="41.092" height="41.092" transform="translate(123.362 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1153" data-name="Rectangle 1153" width="41.092" height="41.092" transform="translate(164.454 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1154" data-name="Rectangle 1154" width="41.092" height="41.092" transform="translate(205.546 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1155" data-name="Rectangle 1155" width="41.092" height="41.092" transform="translate(246.638 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1156" data-name="Rectangle 1156" width="41.092" height="41.092" transform="translate(287.73 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_153" data-name="Group 153">
<g id="Group_152" data-name="Group 152" clip-path="url(#clip-path)">
<rect id="Rectangle_1157" data-name="Rectangle 1157" width="41.092" height="41.092" transform="translate(328.822 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1158" data-name="Rectangle 1158" width="41.092" height="41.092" transform="translate(0.086 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1160" data-name="Rectangle 1160" width="41.092" height="41.092" transform="translate(41.178 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1161" data-name="Rectangle 1161" width="41.092" height="41.092" transform="translate(82.27 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1162" data-name="Rectangle 1162" width="41.092" height="41.092" transform="translate(123.362 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1163" data-name="Rectangle 1163" width="41.092" height="41.092" transform="translate(164.454 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1164" data-name="Rectangle 1164" width="41.092" height="41.092" transform="translate(205.546 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1165" data-name="Rectangle 1165" width="41.092" height="41.092" transform="translate(246.638 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1166" data-name="Rectangle 1166" width="41.092" height="41.092" transform="translate(287.73 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_155" data-name="Group 155">
<g id="Group_154" data-name="Group 154" clip-path="url(#clip-path)">
<rect id="Rectangle_1167" data-name="Rectangle 1167" width="41.092" height="41.092" transform="translate(328.822 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
</g>
<g id="Group_160" data-name="Group 160" transform="translate(10 1120)">
<g id="Group_141-2" data-name="Group 141">
<g id="Group_140-2" data-name="Group 140" clip-path="url(#clip-path)">
<rect id="Rectangle_1080-2" data-name="Rectangle 1080" width="41.092" height="41.092" transform="translate(0.086 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1082-2" data-name="Rectangle 1082" width="41.092" height="41.092" transform="translate(41.178 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1083-2" data-name="Rectangle 1083" width="41.092" height="41.092" transform="translate(82.27 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1084-2" data-name="Rectangle 1084" width="41.092" height="41.092" transform="translate(123.362 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1085-2" data-name="Rectangle 1085" width="41.092" height="41.092" transform="translate(164.454 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1086-2" data-name="Rectangle 1086" width="41.092" height="41.092" transform="translate(205.546 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1087-2" data-name="Rectangle 1087" width="41.092" height="41.092" transform="translate(246.638 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1088-2" data-name="Rectangle 1088" width="41.092" height="41.092" transform="translate(287.73 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_143-2" data-name="Group 143">
<g id="Group_142-2" data-name="Group 142" clip-path="url(#clip-path)">
<rect id="Rectangle_1089-2" data-name="Rectangle 1089" width="41.092" height="41.092" transform="translate(328.822 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1090-2" data-name="Rectangle 1090" width="41.092" height="41.092" transform="translate(0.086 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1092-2" data-name="Rectangle 1092" width="41.092" height="41.092" transform="translate(41.178 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1093-2" data-name="Rectangle 1093" width="41.092" height="41.092" transform="translate(82.27 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1094-2" data-name="Rectangle 1094" width="41.092" height="41.092" transform="translate(123.362 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1095-2" data-name="Rectangle 1095" width="41.092" height="41.092" transform="translate(164.454 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1096-2" data-name="Rectangle 1096" width="41.092" height="41.092" transform="translate(205.546 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1097-2" data-name="Rectangle 1097" width="41.092" height="41.092" transform="translate(246.638 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1098-2" data-name="Rectangle 1098" width="41.092" height="41.092" transform="translate(287.73 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_145-2" data-name="Group 145">
<g id="Group_144-2" data-name="Group 144" clip-path="url(#clip-path)">
<rect id="Rectangle_1099-2" data-name="Rectangle 1099" width="41.092" height="41.092" transform="translate(328.822 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1100-2" data-name="Rectangle 1100" width="41.092" height="41.092" transform="translate(0.086 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1102-2" data-name="Rectangle 1102" width="41.092" height="41.092" transform="translate(41.178 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1103-2" data-name="Rectangle 1103" width="41.092" height="41.092" transform="translate(82.27 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1104-2" data-name="Rectangle 1104" width="41.092" height="41.092" transform="translate(123.362 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1105-2" data-name="Rectangle 1105" width="41.092" height="41.092" transform="translate(164.454 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1106-2" data-name="Rectangle 1106" width="41.092" height="41.092" transform="translate(205.546 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1107-2" data-name="Rectangle 1107" width="41.092" height="41.092" transform="translate(246.638 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1108-2" data-name="Rectangle 1108" width="41.092" height="41.092" transform="translate(287.73 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_147-2" data-name="Group 147">
<g id="Group_146-2" data-name="Group 146" clip-path="url(#clip-path)">
<rect id="Rectangle_1109-2" data-name="Rectangle 1109" width="41.092" height="41.092" transform="translate(328.822 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1110-2" data-name="Rectangle 1110" width="41.092" height="41.092" transform="translate(0.086 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1112-2" data-name="Rectangle 1112" width="41.092" height="41.092" transform="translate(41.178 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1113-2" data-name="Rectangle 1113" width="41.092" height="41.092" transform="translate(82.27 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1114-2" data-name="Rectangle 1114" width="41.092" height="41.092" transform="translate(123.362 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1115-2" data-name="Rectangle 1115" width="41.092" height="41.092" transform="translate(164.454 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1116-2" data-name="Rectangle 1116" width="41.092" height="41.092" transform="translate(205.546 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1117-2" data-name="Rectangle 1117" width="41.092" height="41.092" transform="translate(246.638 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1118-2" data-name="Rectangle 1118" width="41.092" height="41.092" transform="translate(287.73 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_149-2" data-name="Group 149">
<g id="Group_148-2" data-name="Group 148" clip-path="url(#clip-path)">
<rect id="Rectangle_1119-2" data-name="Rectangle 1119" width="41.092" height="41.092" transform="translate(328.822 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1120-2" data-name="Rectangle 1120" width="41.092" height="41.092" transform="translate(0.086 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1121-2" data-name="Rectangle 1121" width="41.092" height="41.092" transform="translate(41.178 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1122-2" data-name="Rectangle 1122" width="41.092" height="41.092" transform="translate(82.27 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1123-2" data-name="Rectangle 1123" width="41.092" height="41.092" transform="translate(123.362 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1124-2" data-name="Rectangle 1124" width="41.092" height="41.092" transform="translate(164.454 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1125-2" data-name="Rectangle 1125" width="41.092" height="41.092" transform="translate(205.546 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1126-2" data-name="Rectangle 1126" width="41.092" height="41.092" transform="translate(246.638 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1127-2" data-name="Rectangle 1127" width="41.092" height="41.092" transform="translate(287.73 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1128-2" data-name="Rectangle 1128" width="41.092" height="41.092" transform="translate(328.822 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1129-2" data-name="Rectangle 1129" width="41.092" height="41.092" transform="translate(0.086 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1130-2" data-name="Rectangle 1130" width="41.092" height="41.092" transform="translate(41.178 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1131-2" data-name="Rectangle 1131" width="41.092" height="41.092" transform="translate(82.27 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1132-2" data-name="Rectangle 1132" width="41.092" height="41.092" transform="translate(123.362 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1133-2" data-name="Rectangle 1133" width="41.092" height="41.092" transform="translate(164.454 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1134-2" data-name="Rectangle 1134" width="41.092" height="41.092" transform="translate(205.546 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1135-2" data-name="Rectangle 1135" width="41.092" height="41.092" transform="translate(246.638 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1136-2" data-name="Rectangle 1136" width="41.092" height="41.092" transform="translate(287.73 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1137-2" data-name="Rectangle 1137" width="41.092" height="41.092" transform="translate(328.822 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1138-2" data-name="Rectangle 1138" width="41.092" height="41.092" transform="translate(0.086 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1140-2" data-name="Rectangle 1140" width="41.092" height="41.092" transform="translate(41.178 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1141-2" data-name="Rectangle 1141" width="41.092" height="41.092" transform="translate(82.27 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1142-2" data-name="Rectangle 1142" width="41.092" height="41.092" transform="translate(123.362 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1143-2" data-name="Rectangle 1143" width="41.092" height="41.092" transform="translate(164.454 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1144-2" data-name="Rectangle 1144" width="41.092" height="41.092" transform="translate(205.546 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1145-2" data-name="Rectangle 1145" width="41.092" height="41.092" transform="translate(246.638 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1146-2" data-name="Rectangle 1146" width="41.092" height="41.092" transform="translate(287.73 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_151-2" data-name="Group 151">
<g id="Group_150-2" data-name="Group 150" clip-path="url(#clip-path)">
<rect id="Rectangle_1147-2" data-name="Rectangle 1147" width="41.092" height="41.092" transform="translate(328.822 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1148-2" data-name="Rectangle 1148" width="41.092" height="41.092" transform="translate(0.086 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1150-2" data-name="Rectangle 1150" width="41.092" height="41.092" transform="translate(41.178 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1151-2" data-name="Rectangle 1151" width="41.092" height="41.092" transform="translate(82.27 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1152-2" data-name="Rectangle 1152" width="41.092" height="41.092" transform="translate(123.362 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1153-2" data-name="Rectangle 1153" width="41.092" height="41.092" transform="translate(164.454 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1154-2" data-name="Rectangle 1154" width="41.092" height="41.092" transform="translate(205.546 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1155-2" data-name="Rectangle 1155" width="41.092" height="41.092" transform="translate(246.638 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1156-2" data-name="Rectangle 1156" width="41.092" height="41.092" transform="translate(287.73 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_153-2" data-name="Group 153">
<g id="Group_152-2" data-name="Group 152" clip-path="url(#clip-path)">
<rect id="Rectangle_1157-2" data-name="Rectangle 1157" width="41.092" height="41.092" transform="translate(328.822 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1158-2" data-name="Rectangle 1158" width="41.092" height="41.092" transform="translate(0.086 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1160-2" data-name="Rectangle 1160" width="41.092" height="41.092" transform="translate(41.178 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1161-2" data-name="Rectangle 1161" width="41.092" height="41.092" transform="translate(82.27 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1162-2" data-name="Rectangle 1162" width="41.092" height="41.092" transform="translate(123.362 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1163-2" data-name="Rectangle 1163" width="41.092" height="41.092" transform="translate(164.454 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1164-2" data-name="Rectangle 1164" width="41.092" height="41.092" transform="translate(205.546 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1165-2" data-name="Rectangle 1165" width="41.092" height="41.092" transform="translate(246.638 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1166-2" data-name="Rectangle 1166" width="41.092" height="41.092" transform="translate(287.73 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_155-2" data-name="Group 155">
<g id="Group_154-2" data-name="Group 154" clip-path="url(#clip-path)">
<rect id="Rectangle_1167-2" data-name="Rectangle 1167" width="41.092" height="41.092" transform="translate(328.822 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
</g>
</g>
<g id="Group_162" data-name="Group 162" transform="translate(0 740)">
<g id="Group_159-2" data-name="Group 159" transform="translate(10 750)">
<g id="Group_141-3" data-name="Group 141">
<g id="Group_140-3" data-name="Group 140" clip-path="url(#clip-path)">
<rect id="Rectangle_1080-3" data-name="Rectangle 1080" width="41.092" height="41.092" transform="translate(0.086 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1082-3" data-name="Rectangle 1082" width="41.092" height="41.092" transform="translate(41.178 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1083-3" data-name="Rectangle 1083" width="41.092" height="41.092" transform="translate(82.27 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1084-3" data-name="Rectangle 1084" width="41.092" height="41.092" transform="translate(123.362 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1085-3" data-name="Rectangle 1085" width="41.092" height="41.092" transform="translate(164.454 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1086-3" data-name="Rectangle 1086" width="41.092" height="41.092" transform="translate(205.546 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1087-3" data-name="Rectangle 1087" width="41.092" height="41.092" transform="translate(246.638 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1088-3" data-name="Rectangle 1088" width="41.092" height="41.092" transform="translate(287.73 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_143-3" data-name="Group 143">
<g id="Group_142-3" data-name="Group 142" clip-path="url(#clip-path)">
<rect id="Rectangle_1089-3" data-name="Rectangle 1089" width="41.092" height="41.092" transform="translate(328.822 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1090-3" data-name="Rectangle 1090" width="41.092" height="41.092" transform="translate(0.086 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1092-3" data-name="Rectangle 1092" width="41.092" height="41.092" transform="translate(41.178 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1093-3" data-name="Rectangle 1093" width="41.092" height="41.092" transform="translate(82.27 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1094-3" data-name="Rectangle 1094" width="41.092" height="41.092" transform="translate(123.362 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1095-3" data-name="Rectangle 1095" width="41.092" height="41.092" transform="translate(164.454 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1096-3" data-name="Rectangle 1096" width="41.092" height="41.092" transform="translate(205.546 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1097-3" data-name="Rectangle 1097" width="41.092" height="41.092" transform="translate(246.638 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1098-3" data-name="Rectangle 1098" width="41.092" height="41.092" transform="translate(287.73 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_145-3" data-name="Group 145">
<g id="Group_144-3" data-name="Group 144" clip-path="url(#clip-path)">
<rect id="Rectangle_1099-3" data-name="Rectangle 1099" width="41.092" height="41.092" transform="translate(328.822 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1100-3" data-name="Rectangle 1100" width="41.092" height="41.092" transform="translate(0.086 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1102-3" data-name="Rectangle 1102" width="41.092" height="41.092" transform="translate(41.178 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1103-3" data-name="Rectangle 1103" width="41.092" height="41.092" transform="translate(82.27 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1104-3" data-name="Rectangle 1104" width="41.092" height="41.092" transform="translate(123.362 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1105-3" data-name="Rectangle 1105" width="41.092" height="41.092" transform="translate(164.454 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1106-3" data-name="Rectangle 1106" width="41.092" height="41.092" transform="translate(205.546 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1107-3" data-name="Rectangle 1107" width="41.092" height="41.092" transform="translate(246.638 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1108-3" data-name="Rectangle 1108" width="41.092" height="41.092" transform="translate(287.73 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_147-3" data-name="Group 147">
<g id="Group_146-3" data-name="Group 146" clip-path="url(#clip-path)">
<rect id="Rectangle_1109-3" data-name="Rectangle 1109" width="41.092" height="41.092" transform="translate(328.822 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1110-3" data-name="Rectangle 1110" width="41.092" height="41.092" transform="translate(0.086 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1112-3" data-name="Rectangle 1112" width="41.092" height="41.092" transform="translate(41.178 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1113-3" data-name="Rectangle 1113" width="41.092" height="41.092" transform="translate(82.27 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1114-3" data-name="Rectangle 1114" width="41.092" height="41.092" transform="translate(123.362 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1115-3" data-name="Rectangle 1115" width="41.092" height="41.092" transform="translate(164.454 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1116-3" data-name="Rectangle 1116" width="41.092" height="41.092" transform="translate(205.546 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1117-3" data-name="Rectangle 1117" width="41.092" height="41.092" transform="translate(246.638 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1118-3" data-name="Rectangle 1118" width="41.092" height="41.092" transform="translate(287.73 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_149-3" data-name="Group 149">
<g id="Group_148-3" data-name="Group 148" clip-path="url(#clip-path)">
<rect id="Rectangle_1119-3" data-name="Rectangle 1119" width="41.092" height="41.092" transform="translate(328.822 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1120-3" data-name="Rectangle 1120" width="41.092" height="41.092" transform="translate(0.086 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1121-3" data-name="Rectangle 1121" width="41.092" height="41.092" transform="translate(41.178 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1122-3" data-name="Rectangle 1122" width="41.092" height="41.092" transform="translate(82.27 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1123-3" data-name="Rectangle 1123" width="41.092" height="41.092" transform="translate(123.362 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1124-3" data-name="Rectangle 1124" width="41.092" height="41.092" transform="translate(164.454 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1125-3" data-name="Rectangle 1125" width="41.092" height="41.092" transform="translate(205.546 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1126-3" data-name="Rectangle 1126" width="41.092" height="41.092" transform="translate(246.638 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1127-3" data-name="Rectangle 1127" width="41.092" height="41.092" transform="translate(287.73 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1128-3" data-name="Rectangle 1128" width="41.092" height="41.092" transform="translate(328.822 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1129-3" data-name="Rectangle 1129" width="41.092" height="41.092" transform="translate(0.086 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1130-3" data-name="Rectangle 1130" width="41.092" height="41.092" transform="translate(41.178 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1131-3" data-name="Rectangle 1131" width="41.092" height="41.092" transform="translate(82.27 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1132-3" data-name="Rectangle 1132" width="41.092" height="41.092" transform="translate(123.362 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1133-3" data-name="Rectangle 1133" width="41.092" height="41.092" transform="translate(164.454 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1134-3" data-name="Rectangle 1134" width="41.092" height="41.092" transform="translate(205.546 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1135-3" data-name="Rectangle 1135" width="41.092" height="41.092" transform="translate(246.638 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1136-3" data-name="Rectangle 1136" width="41.092" height="41.092" transform="translate(287.73 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1137-3" data-name="Rectangle 1137" width="41.092" height="41.092" transform="translate(328.822 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1138-3" data-name="Rectangle 1138" width="41.092" height="41.092" transform="translate(0.086 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1140-3" data-name="Rectangle 1140" width="41.092" height="41.092" transform="translate(41.178 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1141-3" data-name="Rectangle 1141" width="41.092" height="41.092" transform="translate(82.27 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1142-3" data-name="Rectangle 1142" width="41.092" height="41.092" transform="translate(123.362 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1143-3" data-name="Rectangle 1143" width="41.092" height="41.092" transform="translate(164.454 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1144-3" data-name="Rectangle 1144" width="41.092" height="41.092" transform="translate(205.546 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1145-3" data-name="Rectangle 1145" width="41.092" height="41.092" transform="translate(246.638 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1146-3" data-name="Rectangle 1146" width="41.092" height="41.092" transform="translate(287.73 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_151-3" data-name="Group 151">
<g id="Group_150-3" data-name="Group 150" clip-path="url(#clip-path)">
<rect id="Rectangle_1147-3" data-name="Rectangle 1147" width="41.092" height="41.092" transform="translate(328.822 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1148-3" data-name="Rectangle 1148" width="41.092" height="41.092" transform="translate(0.086 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1150-3" data-name="Rectangle 1150" width="41.092" height="41.092" transform="translate(41.178 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1151-3" data-name="Rectangle 1151" width="41.092" height="41.092" transform="translate(82.27 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1152-3" data-name="Rectangle 1152" width="41.092" height="41.092" transform="translate(123.362 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1153-3" data-name="Rectangle 1153" width="41.092" height="41.092" transform="translate(164.454 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1154-3" data-name="Rectangle 1154" width="41.092" height="41.092" transform="translate(205.546 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1155-3" data-name="Rectangle 1155" width="41.092" height="41.092" transform="translate(246.638 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1156-3" data-name="Rectangle 1156" width="41.092" height="41.092" transform="translate(287.73 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_153-3" data-name="Group 153">
<g id="Group_152-3" data-name="Group 152" clip-path="url(#clip-path)">
<rect id="Rectangle_1157-3" data-name="Rectangle 1157" width="41.092" height="41.092" transform="translate(328.822 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1158-3" data-name="Rectangle 1158" width="41.092" height="41.092" transform="translate(0.086 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1160-3" data-name="Rectangle 1160" width="41.092" height="41.092" transform="translate(41.178 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1161-3" data-name="Rectangle 1161" width="41.092" height="41.092" transform="translate(82.27 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1162-3" data-name="Rectangle 1162" width="41.092" height="41.092" transform="translate(123.362 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1163-3" data-name="Rectangle 1163" width="41.092" height="41.092" transform="translate(164.454 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1164-3" data-name="Rectangle 1164" width="41.092" height="41.092" transform="translate(205.546 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1165-3" data-name="Rectangle 1165" width="41.092" height="41.092" transform="translate(246.638 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1166-3" data-name="Rectangle 1166" width="41.092" height="41.092" transform="translate(287.73 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_155-3" data-name="Group 155">
<g id="Group_154-3" data-name="Group 154" clip-path="url(#clip-path)">
<rect id="Rectangle_1167-3" data-name="Rectangle 1167" width="41.092" height="41.092" transform="translate(328.822 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
</g>
<g id="Group_160-2" data-name="Group 160" transform="translate(10 1120)">
<g id="Group_141-4" data-name="Group 141">
<g id="Group_140-4" data-name="Group 140" clip-path="url(#clip-path)">
<rect id="Rectangle_1080-4" data-name="Rectangle 1080" width="41.092" height="41.092" transform="translate(0.086 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1082-4" data-name="Rectangle 1082" width="41.092" height="41.092" transform="translate(41.178 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1083-4" data-name="Rectangle 1083" width="41.092" height="41.092" transform="translate(82.27 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1084-4" data-name="Rectangle 1084" width="41.092" height="41.092" transform="translate(123.362 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1085-4" data-name="Rectangle 1085" width="41.092" height="41.092" transform="translate(164.454 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1086-4" data-name="Rectangle 1086" width="41.092" height="41.092" transform="translate(205.546 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1087-4" data-name="Rectangle 1087" width="41.092" height="41.092" transform="translate(246.638 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1088-4" data-name="Rectangle 1088" width="41.092" height="41.092" transform="translate(287.73 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_143-4" data-name="Group 143">
<g id="Group_142-4" data-name="Group 142" clip-path="url(#clip-path)">
<rect id="Rectangle_1089-4" data-name="Rectangle 1089" width="41.092" height="41.092" transform="translate(328.822 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1090-4" data-name="Rectangle 1090" width="41.092" height="41.092" transform="translate(0.086 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1092-4" data-name="Rectangle 1092" width="41.092" height="41.092" transform="translate(41.178 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1093-4" data-name="Rectangle 1093" width="41.092" height="41.092" transform="translate(82.27 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1094-4" data-name="Rectangle 1094" width="41.092" height="41.092" transform="translate(123.362 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1095-4" data-name="Rectangle 1095" width="41.092" height="41.092" transform="translate(164.454 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1096-4" data-name="Rectangle 1096" width="41.092" height="41.092" transform="translate(205.546 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1097-4" data-name="Rectangle 1097" width="41.092" height="41.092" transform="translate(246.638 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1098-4" data-name="Rectangle 1098" width="41.092" height="41.092" transform="translate(287.73 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_145-4" data-name="Group 145">
<g id="Group_144-4" data-name="Group 144" clip-path="url(#clip-path)">
<rect id="Rectangle_1099-4" data-name="Rectangle 1099" width="41.092" height="41.092" transform="translate(328.822 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1100-4" data-name="Rectangle 1100" width="41.092" height="41.092" transform="translate(0.086 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1102-4" data-name="Rectangle 1102" width="41.092" height="41.092" transform="translate(41.178 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1103-4" data-name="Rectangle 1103" width="41.092" height="41.092" transform="translate(82.27 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1104-4" data-name="Rectangle 1104" width="41.092" height="41.092" transform="translate(123.362 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1105-4" data-name="Rectangle 1105" width="41.092" height="41.092" transform="translate(164.454 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1106-4" data-name="Rectangle 1106" width="41.092" height="41.092" transform="translate(205.546 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1107-4" data-name="Rectangle 1107" width="41.092" height="41.092" transform="translate(246.638 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1108-4" data-name="Rectangle 1108" width="41.092" height="41.092" transform="translate(287.73 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_147-4" data-name="Group 147">
<g id="Group_146-4" data-name="Group 146" clip-path="url(#clip-path)">
<rect id="Rectangle_1109-4" data-name="Rectangle 1109" width="41.092" height="41.092" transform="translate(328.822 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1110-4" data-name="Rectangle 1110" width="41.092" height="41.092" transform="translate(0.086 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1112-4" data-name="Rectangle 1112" width="41.092" height="41.092" transform="translate(41.178 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1113-4" data-name="Rectangle 1113" width="41.092" height="41.092" transform="translate(82.27 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1114-4" data-name="Rectangle 1114" width="41.092" height="41.092" transform="translate(123.362 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1115-4" data-name="Rectangle 1115" width="41.092" height="41.092" transform="translate(164.454 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1116-4" data-name="Rectangle 1116" width="41.092" height="41.092" transform="translate(205.546 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1117-4" data-name="Rectangle 1117" width="41.092" height="41.092" transform="translate(246.638 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1118-4" data-name="Rectangle 1118" width="41.092" height="41.092" transform="translate(287.73 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_149-4" data-name="Group 149">
<g id="Group_148-4" data-name="Group 148" clip-path="url(#clip-path)">
<rect id="Rectangle_1119-4" data-name="Rectangle 1119" width="41.092" height="41.092" transform="translate(328.822 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1120-4" data-name="Rectangle 1120" width="41.092" height="41.092" transform="translate(0.086 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1121-4" data-name="Rectangle 1121" width="41.092" height="41.092" transform="translate(41.178 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1122-4" data-name="Rectangle 1122" width="41.092" height="41.092" transform="translate(82.27 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1123-4" data-name="Rectangle 1123" width="41.092" height="41.092" transform="translate(123.362 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1124-4" data-name="Rectangle 1124" width="41.092" height="41.092" transform="translate(164.454 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1125-4" data-name="Rectangle 1125" width="41.092" height="41.092" transform="translate(205.546 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1126-4" data-name="Rectangle 1126" width="41.092" height="41.092" transform="translate(246.638 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1127-4" data-name="Rectangle 1127" width="41.092" height="41.092" transform="translate(287.73 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1128-4" data-name="Rectangle 1128" width="41.092" height="41.092" transform="translate(328.822 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1129-4" data-name="Rectangle 1129" width="41.092" height="41.092" transform="translate(0.086 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1130-4" data-name="Rectangle 1130" width="41.092" height="41.092" transform="translate(41.178 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1131-4" data-name="Rectangle 1131" width="41.092" height="41.092" transform="translate(82.27 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1132-4" data-name="Rectangle 1132" width="41.092" height="41.092" transform="translate(123.362 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1133-4" data-name="Rectangle 1133" width="41.092" height="41.092" transform="translate(164.454 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1134-4" data-name="Rectangle 1134" width="41.092" height="41.092" transform="translate(205.546 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1135-4" data-name="Rectangle 1135" width="41.092" height="41.092" transform="translate(246.638 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1136-4" data-name="Rectangle 1136" width="41.092" height="41.092" transform="translate(287.73 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1137-4" data-name="Rectangle 1137" width="41.092" height="41.092" transform="translate(328.822 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1138-4" data-name="Rectangle 1138" width="41.092" height="41.092" transform="translate(0.086 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1140-4" data-name="Rectangle 1140" width="41.092" height="41.092" transform="translate(41.178 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1141-4" data-name="Rectangle 1141" width="41.092" height="41.092" transform="translate(82.27 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1142-4" data-name="Rectangle 1142" width="41.092" height="41.092" transform="translate(123.362 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1143-4" data-name="Rectangle 1143" width="41.092" height="41.092" transform="translate(164.454 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1144-4" data-name="Rectangle 1144" width="41.092" height="41.092" transform="translate(205.546 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1145-4" data-name="Rectangle 1145" width="41.092" height="41.092" transform="translate(246.638 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1146-4" data-name="Rectangle 1146" width="41.092" height="41.092" transform="translate(287.73 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_151-4" data-name="Group 151">
<g id="Group_150-4" data-name="Group 150" clip-path="url(#clip-path)">
<rect id="Rectangle_1147-4" data-name="Rectangle 1147" width="41.092" height="41.092" transform="translate(328.822 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1148-4" data-name="Rectangle 1148" width="41.092" height="41.092" transform="translate(0.086 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1150-4" data-name="Rectangle 1150" width="41.092" height="41.092" transform="translate(41.178 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1151-4" data-name="Rectangle 1151" width="41.092" height="41.092" transform="translate(82.27 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1152-4" data-name="Rectangle 1152" width="41.092" height="41.092" transform="translate(123.362 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1153-4" data-name="Rectangle 1153" width="41.092" height="41.092" transform="translate(164.454 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1154-4" data-name="Rectangle 1154" width="41.092" height="41.092" transform="translate(205.546 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1155-4" data-name="Rectangle 1155" width="41.092" height="41.092" transform="translate(246.638 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1156-4" data-name="Rectangle 1156" width="41.092" height="41.092" transform="translate(287.73 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_153-4" data-name="Group 153">
<g id="Group_152-4" data-name="Group 152" clip-path="url(#clip-path)">
<rect id="Rectangle_1157-4" data-name="Rectangle 1157" width="41.092" height="41.092" transform="translate(328.822 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1158-4" data-name="Rectangle 1158" width="41.092" height="41.092" transform="translate(0.086 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1160-4" data-name="Rectangle 1160" width="41.092" height="41.092" transform="translate(41.178 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1161-4" data-name="Rectangle 1161" width="41.092" height="41.092" transform="translate(82.27 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1162-4" data-name="Rectangle 1162" width="41.092" height="41.092" transform="translate(123.362 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1163-4" data-name="Rectangle 1163" width="41.092" height="41.092" transform="translate(164.454 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1164-4" data-name="Rectangle 1164" width="41.092" height="41.092" transform="translate(205.546 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1165-4" data-name="Rectangle 1165" width="41.092" height="41.092" transform="translate(246.638 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1166-4" data-name="Rectangle 1166" width="41.092" height="41.092" transform="translate(287.73 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_155-4" data-name="Group 155">
<g id="Group_154-4" data-name="Group 154" clip-path="url(#clip-path)">
<rect id="Rectangle_1167-4" data-name="Rectangle 1167" width="41.092" height="41.092" transform="translate(328.822 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
</g>
</g>
<g id="Group_163" data-name="Group 163" transform="translate(0 1480)">
<g id="Group_159-3" data-name="Group 159" transform="translate(10 750)">
<g id="Group_141-5" data-name="Group 141">
<g id="Group_140-5" data-name="Group 140" clip-path="url(#clip-path)">
<rect id="Rectangle_1080-5" data-name="Rectangle 1080" width="41.092" height="41.092" transform="translate(0.086 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1082-5" data-name="Rectangle 1082" width="41.092" height="41.092" transform="translate(41.178 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1083-5" data-name="Rectangle 1083" width="41.092" height="41.092" transform="translate(82.27 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1084-5" data-name="Rectangle 1084" width="41.092" height="41.092" transform="translate(123.362 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1085-5" data-name="Rectangle 1085" width="41.092" height="41.092" transform="translate(164.454 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1086-5" data-name="Rectangle 1086" width="41.092" height="41.092" transform="translate(205.546 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1087-5" data-name="Rectangle 1087" width="41.092" height="41.092" transform="translate(246.638 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1088-5" data-name="Rectangle 1088" width="41.092" height="41.092" transform="translate(287.73 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_143-5" data-name="Group 143">
<g id="Group_142-5" data-name="Group 142" clip-path="url(#clip-path)">
<rect id="Rectangle_1089-5" data-name="Rectangle 1089" width="41.092" height="41.092" transform="translate(328.822 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1090-5" data-name="Rectangle 1090" width="41.092" height="41.092" transform="translate(0.086 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1092-5" data-name="Rectangle 1092" width="41.092" height="41.092" transform="translate(41.178 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1093-5" data-name="Rectangle 1093" width="41.092" height="41.092" transform="translate(82.27 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1094-5" data-name="Rectangle 1094" width="41.092" height="41.092" transform="translate(123.362 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1095-5" data-name="Rectangle 1095" width="41.092" height="41.092" transform="translate(164.454 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1096-5" data-name="Rectangle 1096" width="41.092" height="41.092" transform="translate(205.546 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1097-5" data-name="Rectangle 1097" width="41.092" height="41.092" transform="translate(246.638 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1098-5" data-name="Rectangle 1098" width="41.092" height="41.092" transform="translate(287.73 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_145-5" data-name="Group 145">
<g id="Group_144-5" data-name="Group 144" clip-path="url(#clip-path)">
<rect id="Rectangle_1099-5" data-name="Rectangle 1099" width="41.092" height="41.092" transform="translate(328.822 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1100-5" data-name="Rectangle 1100" width="41.092" height="41.092" transform="translate(0.086 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1102-5" data-name="Rectangle 1102" width="41.092" height="41.092" transform="translate(41.178 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1103-5" data-name="Rectangle 1103" width="41.092" height="41.092" transform="translate(82.27 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1104-5" data-name="Rectangle 1104" width="41.092" height="41.092" transform="translate(123.362 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1105-5" data-name="Rectangle 1105" width="41.092" height="41.092" transform="translate(164.454 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1106-5" data-name="Rectangle 1106" width="41.092" height="41.092" transform="translate(205.546 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1107-5" data-name="Rectangle 1107" width="41.092" height="41.092" transform="translate(246.638 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1108-5" data-name="Rectangle 1108" width="41.092" height="41.092" transform="translate(287.73 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_147-5" data-name="Group 147">
<g id="Group_146-5" data-name="Group 146" clip-path="url(#clip-path)">
<rect id="Rectangle_1109-5" data-name="Rectangle 1109" width="41.092" height="41.092" transform="translate(328.822 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1110-5" data-name="Rectangle 1110" width="41.092" height="41.092" transform="translate(0.086 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1112-5" data-name="Rectangle 1112" width="41.092" height="41.092" transform="translate(41.178 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1113-5" data-name="Rectangle 1113" width="41.092" height="41.092" transform="translate(82.27 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1114-5" data-name="Rectangle 1114" width="41.092" height="41.092" transform="translate(123.362 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1115-5" data-name="Rectangle 1115" width="41.092" height="41.092" transform="translate(164.454 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1116-5" data-name="Rectangle 1116" width="41.092" height="41.092" transform="translate(205.546 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1117-5" data-name="Rectangle 1117" width="41.092" height="41.092" transform="translate(246.638 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1118-5" data-name="Rectangle 1118" width="41.092" height="41.092" transform="translate(287.73 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_149-5" data-name="Group 149">
<g id="Group_148-5" data-name="Group 148" clip-path="url(#clip-path)">
<rect id="Rectangle_1119-5" data-name="Rectangle 1119" width="41.092" height="41.092" transform="translate(328.822 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1120-5" data-name="Rectangle 1120" width="41.092" height="41.092" transform="translate(0.086 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1121-5" data-name="Rectangle 1121" width="41.092" height="41.092" transform="translate(41.178 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1122-5" data-name="Rectangle 1122" width="41.092" height="41.092" transform="translate(82.27 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1123-5" data-name="Rectangle 1123" width="41.092" height="41.092" transform="translate(123.362 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1124-5" data-name="Rectangle 1124" width="41.092" height="41.092" transform="translate(164.454 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1125-5" data-name="Rectangle 1125" width="41.092" height="41.092" transform="translate(205.546 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1126-5" data-name="Rectangle 1126" width="41.092" height="41.092" transform="translate(246.638 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1127-5" data-name="Rectangle 1127" width="41.092" height="41.092" transform="translate(287.73 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1128-5" data-name="Rectangle 1128" width="41.092" height="41.092" transform="translate(328.822 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1129-5" data-name="Rectangle 1129" width="41.092" height="41.092" transform="translate(0.086 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1130-5" data-name="Rectangle 1130" width="41.092" height="41.092" transform="translate(41.178 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1131-5" data-name="Rectangle 1131" width="41.092" height="41.092" transform="translate(82.27 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1132-5" data-name="Rectangle 1132" width="41.092" height="41.092" transform="translate(123.362 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1133-5" data-name="Rectangle 1133" width="41.092" height="41.092" transform="translate(164.454 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1134-5" data-name="Rectangle 1134" width="41.092" height="41.092" transform="translate(205.546 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1135-5" data-name="Rectangle 1135" width="41.092" height="41.092" transform="translate(246.638 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1136-5" data-name="Rectangle 1136" width="41.092" height="41.092" transform="translate(287.73 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1137-5" data-name="Rectangle 1137" width="41.092" height="41.092" transform="translate(328.822 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1138-5" data-name="Rectangle 1138" width="41.092" height="41.092" transform="translate(0.086 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1140-5" data-name="Rectangle 1140" width="41.092" height="41.092" transform="translate(41.178 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1141-5" data-name="Rectangle 1141" width="41.092" height="41.092" transform="translate(82.27 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1142-5" data-name="Rectangle 1142" width="41.092" height="41.092" transform="translate(123.362 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1143-5" data-name="Rectangle 1143" width="41.092" height="41.092" transform="translate(164.454 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1144-5" data-name="Rectangle 1144" width="41.092" height="41.092" transform="translate(205.546 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1145-5" data-name="Rectangle 1145" width="41.092" height="41.092" transform="translate(246.638 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1146-5" data-name="Rectangle 1146" width="41.092" height="41.092" transform="translate(287.73 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_151-5" data-name="Group 151">
<g id="Group_150-5" data-name="Group 150" clip-path="url(#clip-path)">
<rect id="Rectangle_1147-5" data-name="Rectangle 1147" width="41.092" height="41.092" transform="translate(328.822 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1148-5" data-name="Rectangle 1148" width="41.092" height="41.092" transform="translate(0.086 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1150-5" data-name="Rectangle 1150" width="41.092" height="41.092" transform="translate(41.178 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1151-5" data-name="Rectangle 1151" width="41.092" height="41.092" transform="translate(82.27 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1152-5" data-name="Rectangle 1152" width="41.092" height="41.092" transform="translate(123.362 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1153-5" data-name="Rectangle 1153" width="41.092" height="41.092" transform="translate(164.454 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1154-5" data-name="Rectangle 1154" width="41.092" height="41.092" transform="translate(205.546 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1155-5" data-name="Rectangle 1155" width="41.092" height="41.092" transform="translate(246.638 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1156-5" data-name="Rectangle 1156" width="41.092" height="41.092" transform="translate(287.73 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_153-5" data-name="Group 153">
<g id="Group_152-5" data-name="Group 152" clip-path="url(#clip-path)">
<rect id="Rectangle_1157-5" data-name="Rectangle 1157" width="41.092" height="41.092" transform="translate(328.822 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1158-5" data-name="Rectangle 1158" width="41.092" height="41.092" transform="translate(0.086 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1160-5" data-name="Rectangle 1160" width="41.092" height="41.092" transform="translate(41.178 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1161-5" data-name="Rectangle 1161" width="41.092" height="41.092" transform="translate(82.27 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1162-5" data-name="Rectangle 1162" width="41.092" height="41.092" transform="translate(123.362 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1163-5" data-name="Rectangle 1163" width="41.092" height="41.092" transform="translate(164.454 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1164-5" data-name="Rectangle 1164" width="41.092" height="41.092" transform="translate(205.546 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1165-5" data-name="Rectangle 1165" width="41.092" height="41.092" transform="translate(246.638 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1166-5" data-name="Rectangle 1166" width="41.092" height="41.092" transform="translate(287.73 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_155-5" data-name="Group 155">
<g id="Group_154-5" data-name="Group 154" clip-path="url(#clip-path)">
<rect id="Rectangle_1167-5" data-name="Rectangle 1167" width="41.092" height="41.092" transform="translate(328.822 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
</g>
<g id="Group_160-3" data-name="Group 160" transform="translate(10 1120)">
<g id="Group_141-6" data-name="Group 141">
<g id="Group_140-6" data-name="Group 140" clip-path="url(#clip-path)">
<rect id="Rectangle_1080-6" data-name="Rectangle 1080" width="41.092" height="41.092" transform="translate(0.086 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1082-6" data-name="Rectangle 1082" width="41.092" height="41.092" transform="translate(41.178 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1083-6" data-name="Rectangle 1083" width="41.092" height="41.092" transform="translate(82.27 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1084-6" data-name="Rectangle 1084" width="41.092" height="41.092" transform="translate(123.362 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1085-6" data-name="Rectangle 1085" width="41.092" height="41.092" transform="translate(164.454 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1086-6" data-name="Rectangle 1086" width="41.092" height="41.092" transform="translate(205.546 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1087-6" data-name="Rectangle 1087" width="41.092" height="41.092" transform="translate(246.638 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1088-6" data-name="Rectangle 1088" width="41.092" height="41.092" transform="translate(287.73 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_143-6" data-name="Group 143">
<g id="Group_142-6" data-name="Group 142" clip-path="url(#clip-path)">
<rect id="Rectangle_1089-6" data-name="Rectangle 1089" width="41.092" height="41.092" transform="translate(328.822 164.454)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1090-6" data-name="Rectangle 1090" width="41.092" height="41.092" transform="translate(0.086 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1092-6" data-name="Rectangle 1092" width="41.092" height="41.092" transform="translate(41.178 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1093-6" data-name="Rectangle 1093" width="41.092" height="41.092" transform="translate(82.27 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1094-6" data-name="Rectangle 1094" width="41.092" height="41.092" transform="translate(123.362 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1095-6" data-name="Rectangle 1095" width="41.092" height="41.092" transform="translate(164.454 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1096-6" data-name="Rectangle 1096" width="41.092" height="41.092" transform="translate(205.546 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1097-6" data-name="Rectangle 1097" width="41.092" height="41.092" transform="translate(246.638 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1098-6" data-name="Rectangle 1098" width="41.092" height="41.092" transform="translate(287.73 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_145-6" data-name="Group 145">
<g id="Group_144-6" data-name="Group 144" clip-path="url(#clip-path)">
<rect id="Rectangle_1099-6" data-name="Rectangle 1099" width="41.092" height="41.092" transform="translate(328.822 123.362)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1100-6" data-name="Rectangle 1100" width="41.092" height="41.092" transform="translate(0.086 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1102-6" data-name="Rectangle 1102" width="41.092" height="41.092" transform="translate(41.178 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1103-6" data-name="Rectangle 1103" width="41.092" height="41.092" transform="translate(82.27 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1104-6" data-name="Rectangle 1104" width="41.092" height="41.092" transform="translate(123.362 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1105-6" data-name="Rectangle 1105" width="41.092" height="41.092" transform="translate(164.454 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1106-6" data-name="Rectangle 1106" width="41.092" height="41.092" transform="translate(205.546 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1107-6" data-name="Rectangle 1107" width="41.092" height="41.092" transform="translate(246.638 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1108-6" data-name="Rectangle 1108" width="41.092" height="41.092" transform="translate(287.73 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_147-6" data-name="Group 147">
<g id="Group_146-6" data-name="Group 146" clip-path="url(#clip-path)">
<rect id="Rectangle_1109-6" data-name="Rectangle 1109" width="41.092" height="41.092" transform="translate(328.822 82.27)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1110-6" data-name="Rectangle 1110" width="41.092" height="41.092" transform="translate(0.086 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1112-6" data-name="Rectangle 1112" width="41.092" height="41.092" transform="translate(41.178 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1113-6" data-name="Rectangle 1113" width="41.092" height="41.092" transform="translate(82.27 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1114-6" data-name="Rectangle 1114" width="41.092" height="41.092" transform="translate(123.362 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1115-6" data-name="Rectangle 1115" width="41.092" height="41.092" transform="translate(164.454 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1116-6" data-name="Rectangle 1116" width="41.092" height="41.092" transform="translate(205.546 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1117-6" data-name="Rectangle 1117" width="41.092" height="41.092" transform="translate(246.638 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1118-6" data-name="Rectangle 1118" width="41.092" height="41.092" transform="translate(287.73 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_149-6" data-name="Group 149">
<g id="Group_148-6" data-name="Group 148" clip-path="url(#clip-path)">
<rect id="Rectangle_1119-6" data-name="Rectangle 1119" width="41.092" height="41.092" transform="translate(328.822 41.178)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1120-6" data-name="Rectangle 1120" width="41.092" height="41.092" transform="translate(0.086 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1121-6" data-name="Rectangle 1121" width="41.092" height="41.092" transform="translate(41.178 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1122-6" data-name="Rectangle 1122" width="41.092" height="41.092" transform="translate(82.27 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1123-6" data-name="Rectangle 1123" width="41.092" height="41.092" transform="translate(123.362 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1124-6" data-name="Rectangle 1124" width="41.092" height="41.092" transform="translate(164.454 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1125-6" data-name="Rectangle 1125" width="41.092" height="41.092" transform="translate(205.546 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1126-6" data-name="Rectangle 1126" width="41.092" height="41.092" transform="translate(246.638 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1127-6" data-name="Rectangle 1127" width="41.092" height="41.092" transform="translate(287.73 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1128-6" data-name="Rectangle 1128" width="41.092" height="41.092" transform="translate(328.822 0.086)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1129-6" data-name="Rectangle 1129" width="41.092" height="41.092" transform="translate(0.086 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1130-6" data-name="Rectangle 1130" width="41.092" height="41.092" transform="translate(41.178 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1131-6" data-name="Rectangle 1131" width="41.092" height="41.092" transform="translate(82.27 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1132-6" data-name="Rectangle 1132" width="41.092" height="41.092" transform="translate(123.362 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1133-6" data-name="Rectangle 1133" width="41.092" height="41.092" transform="translate(164.454 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1134-6" data-name="Rectangle 1134" width="41.092" height="41.092" transform="translate(205.546 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1135-6" data-name="Rectangle 1135" width="41.092" height="41.092" transform="translate(246.638 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1136-6" data-name="Rectangle 1136" width="41.092" height="41.092" transform="translate(287.73 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1137-6" data-name="Rectangle 1137" width="41.092" height="41.092" transform="translate(328.822 328.822)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1138-6" data-name="Rectangle 1138" width="41.092" height="41.092" transform="translate(0.086 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1140-6" data-name="Rectangle 1140" width="41.092" height="41.092" transform="translate(41.178 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1141-6" data-name="Rectangle 1141" width="41.092" height="41.092" transform="translate(82.27 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1142-6" data-name="Rectangle 1142" width="41.092" height="41.092" transform="translate(123.362 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1143-6" data-name="Rectangle 1143" width="41.092" height="41.092" transform="translate(164.454 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1144-6" data-name="Rectangle 1144" width="41.092" height="41.092" transform="translate(205.546 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1145-6" data-name="Rectangle 1145" width="41.092" height="41.092" transform="translate(246.638 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1146-6" data-name="Rectangle 1146" width="41.092" height="41.092" transform="translate(287.73 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_151-6" data-name="Group 151">
<g id="Group_150-6" data-name="Group 150" clip-path="url(#clip-path)">
<rect id="Rectangle_1147-6" data-name="Rectangle 1147" width="41.092" height="41.092" transform="translate(328.822 287.73)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1148-6" data-name="Rectangle 1148" width="41.092" height="41.092" transform="translate(0.086 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1150-6" data-name="Rectangle 1150" width="41.092" height="41.092" transform="translate(41.178 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1151-6" data-name="Rectangle 1151" width="41.092" height="41.092" transform="translate(82.27 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1152-6" data-name="Rectangle 1152" width="41.092" height="41.092" transform="translate(123.362 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1153-6" data-name="Rectangle 1153" width="41.092" height="41.092" transform="translate(164.454 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1154-6" data-name="Rectangle 1154" width="41.092" height="41.092" transform="translate(205.546 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1155-6" data-name="Rectangle 1155" width="41.092" height="41.092" transform="translate(246.638 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1156-6" data-name="Rectangle 1156" width="41.092" height="41.092" transform="translate(287.73 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_153-6" data-name="Group 153">
<g id="Group_152-6" data-name="Group 152" clip-path="url(#clip-path)">
<rect id="Rectangle_1157-6" data-name="Rectangle 1157" width="41.092" height="41.092" transform="translate(328.822 246.638)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1158-6" data-name="Rectangle 1158" width="41.092" height="41.092" transform="translate(0.086 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
<rect id="Rectangle_1160-6" data-name="Rectangle 1160" width="41.092" height="41.092" transform="translate(41.178 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1161-6" data-name="Rectangle 1161" width="41.092" height="41.092" transform="translate(82.27 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1162-6" data-name="Rectangle 1162" width="41.092" height="41.092" transform="translate(123.362 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1163-6" data-name="Rectangle 1163" width="41.092" height="41.092" transform="translate(164.454 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1164-6" data-name="Rectangle 1164" width="41.092" height="41.092" transform="translate(205.546 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1165-6" data-name="Rectangle 1165" width="41.092" height="41.092" transform="translate(246.638 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<rect id="Rectangle_1166-6" data-name="Rectangle 1166" width="41.092" height="41.092" transform="translate(287.73 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
<g id="Group_155-6" data-name="Group 155">
<g id="Group_154-6" data-name="Group 154" clip-path="url(#clip-path)">
<rect id="Rectangle_1167-6" data-name="Rectangle 1167" width="41.092" height="41.092" transform="translate(328.822 205.546)" fill="none" stroke="#949494" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
src/static/Images/neil-m.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 356 KiB

1
src/static/Images/pixel-section-divider-teal.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 766.33 215.95"><defs><style>.cls-1{fill:#00ffd0;}</style></defs><g id="Layer_1-2"><polygon class="cls-1" points="54.95 0 54.96 0 109.44 0 109.91 0 164.39 0 164.39 0 218.2 0 219.35 0 273.15 0 273.16 0 327.48 0 328.11 0 382.44 0 382.44 0 437.02 0 437.4 0 491.98 0 491.98 0 546.57 0 546.94 0 601.52 0 601.52 0 656.42 0 656.48 0 711.37 0 711.38 0 766.33 0 766.33 54.96 711.38 54.96 711.38 109.22 656.48 109.22 656.48 162.59 601.52 162.59 601.52 215.95 546.57 215.95 546.57 162.59 491.98 162.59 491.98 162.59 437.02 162.59 437.02 109.22 382.44 109.22 382.44 109.22 327.48 109.22 327.48 54.96 273.16 54.96 273.15 54.96 219.35 54.96 218.2 54.96 164.39 54.96 164.39 108.24 109.91 108.24 109.91 108.32 54.95 108.32 54.95 54.96 0 54.96 0 0 54.95 0"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 854 B

1
src/static/Images/pixel-section-divider.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 766.33 215.95"><defs><style>.cls-1{fill:#1a1a1a;}</style></defs><g id="Layer_1-2"><polygon class="cls-1" points="711.38 0 711.37 0 656.9 0 656.42 0 601.94 0 601.94 0 548.13 0 546.98 0 493.18 0 493.17 0 438.85 0 438.22 0 383.9 0 383.89 0 329.31 0 328.94 0 274.35 0 274.35 0 219.77 0 219.4 0 164.81 0 164.81 0 109.91 0 109.85 0 54.96 0 54.95 0 0 0 0 54.96 54.95 54.96 54.95 109.22 109.85 109.22 109.85 162.59 164.81 162.59 164.81 215.95 219.77 215.95 219.77 162.59 274.35 162.59 274.35 162.59 329.31 162.59 329.31 109.22 383.89 109.22 383.9 109.22 438.85 109.22 438.85 54.96 493.17 54.96 493.18 54.96 546.98 54.96 548.13 54.96 601.94 54.96 601.94 108.24 656.42 108.24 656.42 108.32 711.38 108.32 711.38 54.96 766.33 54.96 766.33 0 711.38 0"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 854 B

1
src/static/Images/stackoverflow-logo.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800.11 157.16"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clippath);}.cls-3{fill:#f48023;}.cls-4{fill:#fff;}.cls-5{fill:#bcbbbc;}</style><clipPath id="clippath"><rect class="cls-1" width="800.11" height="157.16"/></clipPath></defs><g id="svg2"><g class="cls-2"><path id="path22" class="cls-4" d="M220.91,81.34l7.68-7.68h-15.72v-18.66h-8.3v58.93c0,8.42,4.84,15.22,14.53,15.22h5.88v-7.15h-4.38c-5.31,0-7.73-3.11-7.73-8.3v-32.36h8.05Zm429.93,30.01V46.99h-14.75V112.27c0,8.4,5.11,16.91,17.25,16.91h8.39v-12.48h-5.67c-3.74,0-5.22-1.81-5.22-5.33h0Zm133.72-41.3l-9.53,36.53-12.14-36.53h-10.78l-12.03,36.53-9.53-36.53h-15.66l18.15,59.11h12.14l12.37-37.1,12.37,37.1h12.14l18.04-59.11h-15.54Zm-87.84,43.91c-1.7,1.7-3.97,2.61-6.92,2.61s-5.11-.91-6.81-2.61c-3.06-3.06-3.4-8.28-3.4-14.41s.34-11.23,3.4-14.3c1.7-1.7,3.86-2.61,6.81-2.61s5.22,.91,6.92,2.61c3.06,3.06,3.4,8.17,3.4,14.3s-.34,11.35-3.4,14.41Zm-6.92-44.59c-8.74,0-14.64,3.4-18.27,7.26-5.33,5.56-6.69,12.25-6.69,22.92s1.36,17.47,6.69,23.03c3.63,3.86,9.53,7.26,18.27,7.26s14.75-3.4,18.38-7.26c5.33-5.56,6.69-12.25,6.69-23.03s-1.36-17.36-6.69-22.92c-3.63-3.86-9.64-7.26-18.38-7.26Zm-86.37-5.48v65.21h14.75v-46.61h10.89v-11.23h-10.89v-6.47c0-3.4,1.7-5.33,5.22-5.33h5.67v-12.48h-8.4c-12.03,0-17.25,8.51-17.25,16.9Zm-33.39,11.83v-5.67h-14.41v59.11h14.75v-35.63c0-7.49,4.99-10.89,9.53-10.89,3.63,0,5.51,1.21,7.78,3.48l11.16-11.19c-4.08-4.08-8.17-5.56-13.96-5.56-6.35,0-12.03,2.95-14.86,6.35h0Zm-58.74,18.38c.11-2.61,.45-4.2,1.36-6.35,1.59-3.52,4.88-6.13,9.87-6.13s8.28,2.61,9.87,6.13c.91,2.16,1.25,3.74,1.36,6.35h-22.47Zm11.23-24.73c-15.32,0-25.75,10.89-25.75,30.18,0,23.94,13.39,30.29,27.34,30.29,10.67,0,16.45-3.29,22.47-9.3l-8.96-8.74c-3.75,3.74-6.92,5.56-13.39,5.56-8.28,0-12.93-5.56-12.93-13.16h36.99v-6.58c0-16.22-9.31-28.25-25.76-28.25h0Zm-40.64,.68l-11.91,36.53-12.03-36.53h-15.54l21.78,59.11h11.57l21.67-59.11h-15.54Zm-57.43,43.91c-1.7,1.7-3.97,2.61-6.92,2.61s-5.11-.91-6.81-2.61c-3.06-3.06-3.4-8.28-3.4-14.41s.34-11.23,3.4-14.3c1.7-1.7,3.86-2.61,6.81-2.61s5.22,.91,6.92,2.61c3.06,3.06,3.4,8.17,3.4,14.3s-.34,11.35-3.4,14.41Zm-6.92-44.59c-8.74,0-14.64,3.4-18.27,7.26-5.33,5.56-6.69,12.25-6.69,22.92s1.36,17.47,6.69,23.03c3.63,3.86,9.53,7.26,18.27,7.26s14.75-3.4,18.38-7.26c5.33-5.56,6.69-12.25,6.69-23.03s-1.36-17.36-6.69-22.92c-3.63-3.86-9.64-7.26-18.38-7.26Zm-39.01,2.95h-10.35l-25.73,25.05,.04-50.34h-8.3v82.12h8.3l-.04-20.71,10.07-10.11,19.03,30.82h10.26l-23.54-36.57,20.26-20.26Zm-71.12,6.77c5.42,0,8.77,1.61,13.03,6.34,0,0,5.56-5.4,5.51-5.45-5.82-6.23-10.76-8.27-18.55-8.27-14.3,0-25.14,9.69-25.14,29.06s10.84,29.06,25.14,29.06c7.84,0,12.8-2.08,18.68-8.42l-5.65-5.42c-4.27,4.73-7.61,6.46-13.03,6.46s-10.15-2.19-13.15-6.46c-2.65-3.69-3.69-8.07-3.69-15.22s1.04-11.53,3.69-15.22c3-4.27,7.61-6.46,13.15-6.46h0Zm-40.83,29.98c0,4.73-.92,7.96-2.88,9.8-3.58,3.46-7.84,3.81-12.69,3.81-9,0-13.03-3.11-13.03-9.69s4.15-10.03,12.69-10.03h15.92v6.11Zm-14.42-37.37c-9.1,0-14.84,1.8-19.86,8.16-.07,.09,5.45,5.45,5.45,5.45,3.35-4.73,7.04-6.46,14.3-6.46,10.38,0,14.53,4.15,14.53,12.46v5.42h-17.07c-12.69,0-19.61,6.46-19.61,16.38,0,4.5,1.5,8.76,4.27,11.53,3.58,3.69,8.19,5.19,16.03,5.19s11.76-1.5,16.38-6.11v5.42h8.3v-38.52c0-12.34-7.5-18.91-22.72-18.91h0Zm-71.01,25.49l-9.11-.81c-7.15-.58-9.92-3.46-9.92-8.3,0-5.77,4.38-9.34,12.69-9.34,5.88,0,11.07,1.38,15.11,4.5l5.42-5.42c-5.08-4.15-12.34-6.11-20.41-6.11-12.11,0-20.87,6.23-20.87,16.61,0,9.34,5.88,14.3,16.95,15.22l9.34,.81c6.57,.58,9.46,3.35,9.46,8.3,0,6.69-5.77,10.03-15.11,10.03-7.03,0-13.15-1.85-17.65-6.57l-5.53,5.54c6.23,6,13.72,8.19,23.3,8.19,13.72,0,23.07-6.34,23.07-17.3s-6.8-14.42-16.72-15.34"/><path id="path24" class="cls-5" d="M112.1,143.13v-42.07h14.02v56.09H0v-56.09H14.02v42.07H112.1"/><path id="path26" class="cls-3" d="M28.06,129.11H98.17v-14.02H28.06v14.02ZM90.89,0l-11.25,8.37,41.84,56.26,11.25-8.37L90.89,0ZM56.12,33.17l53.87,44.87,8.97-10.78L65.09,22.39l-8.97,10.77Zm-17.59,31.18l63.56,29.6,5.92-12.71-63.56-29.6-5.92,12.71Zm-9.08,32.85l68.61,14.42,2.88-13.72-68.61-14.42-2.88,13.72"/></g></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/static/Images/tea-hero-background.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 102 KiB

24
src/static/Images/xl-grid-one-row.svg Normal file
View file

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1601" height="81" viewBox="0 0 1601 81">
<g id="Group_1363" data-name="Group 1363" transform="translate(-159.5 -1911.5)">
<rect id="Rectangle_1219" data-name="Rectangle 1219" width="80" height="80" transform="translate(160 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1220" data-name="Rectangle 1220" width="80" height="80" transform="translate(240 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1221" data-name="Rectangle 1221" width="80" height="80" transform="translate(320 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1222" data-name="Rectangle 1222" width="80" height="80" transform="translate(400 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1223" data-name="Rectangle 1223" width="80" height="80" transform="translate(480 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1224" data-name="Rectangle 1224" width="80" height="80" transform="translate(560 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1225" data-name="Rectangle 1225" width="80" height="80" transform="translate(640 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1226" data-name="Rectangle 1226" width="80" height="80" transform="translate(720 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1227" data-name="Rectangle 1227" width="80" height="80" transform="translate(800 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2630" data-name="Rectangle 2630" width="80" height="80" transform="translate(1200 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1228" data-name="Rectangle 1228" width="80" height="80" transform="translate(880 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2631" data-name="Rectangle 2631" width="80" height="80" transform="translate(1279.999 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2672" data-name="Rectangle 2672" width="80" height="80" transform="translate(1600 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1229" data-name="Rectangle 1229" width="80" height="80" transform="translate(960 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2638" data-name="Rectangle 2638" width="80" height="80" transform="translate(1360 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2673" data-name="Rectangle 2673" width="80" height="80" transform="translate(1680 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1230" data-name="Rectangle 1230" width="80" height="80" transform="translate(1040 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2646" data-name="Rectangle 2646" width="80" height="80" transform="translate(1440 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_1231" data-name="Rectangle 1231" width="80" height="80" transform="translate(1120 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
<rect id="Rectangle_2660" data-name="Rectangle 2660" width="80" height="80" transform="translate(1520 1912)" fill="none" stroke="#1a1a1a" stroke-miterlimit="10" stroke-width="1"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

2
src/static/css/buttons.css
View file

@ -249,7 +249,7 @@
}
.button-container{
padding: 0vw 7vw !important;
padding: 0vw 13vw !important;
}
.dev-count{

198
src/static/css/footer.css
View file

@ -1,7 +1,5 @@
/* Footer Styling */
@media only screen and (min-width: 1200px) {
.social-box{
border-radius: 0px !important;
border: 2px solid #949494;
@ -17,19 +15,12 @@
padding: 1.116vw;
font-size: 1.562vw;
color: #fff;
font-family: "pp-neue-machina", sans-serif;
font-family: "inter", sans-serif !important;
text-transform: uppercase;
border-bottom: 2px solid #949494;
transition: 0.2s ease-in-out;
}
.list-group-item:hover{
padding-left: 2.232vw;
background-color: #00ffd0 !important;
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
color: #1a1a1a !important;
}
.footer-content{
padding-right: 5.580vw;
}
@ -43,190 +34,3 @@
.footer-grid{
width:50.223vw;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.social-box{
border-radius: 0px !important;
border: 2px solid #949494;
background-color: none;
}
.list-group{
border-radius: 0px !important;
}
.list-group-item{
background-color: #1a1a1a !important;
padding: 1.116vw;
font-size: 1.562vw;
color: #fff;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
border-bottom: 2px solid #949494;
transition: 0.2s ease-in-out;
}
.list-group-item:hover{
padding-left: 2.232vw;
background-color: #00ffd0 !important;
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
color: #1a1a1a !important;
}
.footer-content{
padding-right: 5.580vw;
}
.social-icon{
margin-right: 1.116vw !important;
position: relative;
top: 0.167vw;
}
.footer-grid{
width:50.223vw;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.social-box{
border-radius: 0px !important;
border: 2px solid #949494;
background-color: none;
}
.list-group{
border-radius: 0px !important;
}
.list-group-item{
background-color: #1a1a1a !important;
padding: 1.116vw;
font-size: 1.562vw;
color: #fff;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
border-bottom: 2px solid #949494;
transition: 0.2s ease-in-out;
}
.list-group-item:hover{
padding-left: 2.232vw;
background-color: #00ffd0 !important;
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
color: #1a1a1a !important;
}
.footer-content{
padding-right: 5.580vw;
}
.social-icon{
margin-right: 1.116vw !important;
position: relative;
top: 0.167vw;
}
.footer-grid{
width:50.223vw;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px){
.social-box{
border-radius: 0px !important;
border: 2px solid #949494;
background-color: none;
}
.list-group{
border-radius: 0px !important;
}
.list-group-item{
background-color: #1a1a1a !important;
padding: 1.116vw;
font-size: 1.562vw;
color: #fff;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
border-bottom: 2px solid #949494;
transition: 0.2s ease-in-out;
}
.list-group-item:hover{
padding-left: 2.232vw;
background-color: #00ffd0 !important;
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
color: #1a1a1a !important;
}
.footer-content{
padding-right: 5.580vw;
}
.social-icon{
margin-right: 1.116vw !important;
position: relative;
top: 0.167vw;
}
.footer-grid{
width:50.223vw;
}
}
@media only screen and (max-width: 576px) {
.social-box{
border-radius: 0px !important;
border: 2px solid #949494;
background-color: none;
}
.list-group{
border-radius: 0px !important;
}
.list-group-item{
background-color: #1a1a1a !important;
padding: 3.5vw;
font-size: 4vw;
color: #fff;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
border-bottom: 2px solid #949494;
transition: 0.2s ease-in-out;
}
.list-group-item:hover{
padding-left: 7vw;
background-color: #00ffd0 !important;
box-shadow: inset 0vw 0vw 0vw 0.391vw #1a1a1a !important;
color: #1a1a1a !important;
}
.footer-content{
padding-right: 2.3vw;
}
.social-icon{
margin-right: 2vw !important;
position: relative;
top: 0.167vw;
}
.footer-grid{
width:100%;
display: none !important;
}
}

504
src/static/css/homepage.css
View file

@ -1,106 +1,17 @@
/* General/Utilities */
@media only screen and (min-width: 1792px) {
html,body{
background-color: #1a1a1a;
max-width: none;
overflow-x: hidden;
margin-top: 2.2vw;
margin-top:25px;
}
.container{
max-width: none;
padding: 4.5vw 8.371vw 4.185vw 8.371vw;
max-width: 1280px;
/*padding: 8.371vw 4.5vw;*/
}
}
@media only screen and (min-width: 1200px) and (max-width: 1792px) {
html,body{
background-color: #1a1a1a;
max-width: 1920px;
overflow-x: hidden;
margin-top: 2.2vw;
}
.container{
max-width: 1920px;
padding: 4.5vw 8.371vw 4.185vw 8.371vw;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
html,body{
background-color: #1a1a1a;
max-width: 1920px;
overflow-x: hidden;
margin-top: 2.2vw;
}
.container{
max-width: 1920px;
padding: 4.2vw 10vw 4.185vw 10vw !important;
}
.hero-float{
float: none !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
html,body{
background-color: #1a1a1a;
max-width: 1920px;
overflow-x: hidden;
margin-top: 5vw;
}
.container{
max-width: 1920px;
padding: 4.185vw 5.040vw 4.185vw 5.040vw !important;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
html,body{
background-color: #1a1a1a;
max-width: 1920px;
overflow-x: hidden;
margin-top: 6.65vw !important;
}
.container{
max-width: 1920px;
padding: 4.185vw 6.510vw 4.185vw 6.510vw;
}
}
@media only screen and (max-width: 576px) {
html,body{
background-color: #1a1a1a;
max-width: 1920px;
overflow-x: hidden;
margin-top: 7.5vw !important;
}
section{
padding-left: 4vw !important;
padding-right: 4vw !important;
}
.container{
max-width: 1920px;
padding: 5.5vw 3vw !important;
}
}
/* Brand Colors */
.teal{color:#00ffd0;}
@ -125,8 +36,33 @@
/* Spacers & Dividers */
.klaviyo-form{
border: 1px solid #949494;
padding: 5px;
border-radius: 5px;
}
#email_61878536{
background-color: #1a1a1a !important;
border-radius: 0px !important;
border: none !important;
font-family: "inter", sans-serif !important;
color: #ffffff !important;
height: 40px !important;
}
#email_61878536:focus{
border:none !important;
box-shadow: none !important;
}
.go3894874857{
background-color: #8000ff!important;
font-family: "inter", sans-serif !important;
border-radius: 3px !important;
font-weight: 400 !important;
height: 40px !important;
}
hr{
border-bottom: 2px solid #949494 !important;
border-bottom: 1px solid #949494 !important;
opacity: 1;
margin: 0px !important;
}
@ -136,383 +72,19 @@ mark{
color: #1a1a1a;
}
@media only screen and (min-width: 1200px) {
.hero-section{
background-image: url("/Images/x-large-grid-generative-art.png") !important;
background-attachment: scroll;
background-position: top;
background-repeat: repeat-y;
background-size: cover !important;
}
.lead-text-container{
border: 1px solid #949494 !important;
width: 41.6vw;
display: flex;
justify-content: center;
align-items: center;
height: 12.556vw;
margin-top: 1vw;
}
.hero-bottom{
background-image: url("/Images/x-large-grid.svg");
background-attachment: scroll;
background-position: top;
background-repeat: repeat;
background-size: cover;
height: 4.185vw;
}
.impact-section{
background-image: url("/Images/impact-section-grid.svg");
background-attachment: fixed;
background-repeat: repeat;
background-size: contain;
opacity: 1;
}
.package_before{
background-image: url("/Images/home-x-large-grid-generative-art_half.gif") !important;
background-attachment: scroll;
background-repeat: repeat-y;
background-position: right;
background-size: contain;
}
.package-cta{
background-image: url("/Images/x-large-grid.svg");
background-attachment: scroll;
background-repeat: repeat-y;
background-size: cover;
}
.statistics{
background-image: url("/Images/x-large-stats-grid.svg");
background-attachment: fixed;
background-position: top;
background-repeat: repeat;
background-size: cover;
}
.metric-block{
padding: 4.185vw;
border: 2px solid #949494;
max-width: 33.3vw;
background-color: #1a1a1a;
position: relative;
z-index:2;
}
.stat-head{
font-size: 1.339vw;
}
.stat-number{
font-family: "pp-neue-machina", sans-serif;
font-size: 6.696vw;
margin-top: -2.232vw;
margin-bottom: -2.232vw;
}
.partners{
background-image: url("/Images/x-large-grid.svg");
background-attachment: scroll;
background-repeat: repeat;
background-size: cover;
}
.mobile-grid-element{
display: none;
}
.navbar{
position: fixed;
width:100%;
padding: 0px !important;
background-color: #1a1a1a !important;
text-transform: uppercase;
border-bottom: 1px solid gray;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.hero-section{
background-image: url("/Images/large-grid-generative-art.png") !important;
background-attachment: scroll;
background-position: top;
background-repeat: repeat-y !important;
background-size: contain !important;
}
.lead-text-container{
border: 1px solid #949494;
width: 60vw;
display: flex;
justify-content: center;
align-items: center;
height: 15vw;
margin-top: 0.4vw;
margin-bottom: 0px;
}
.package_before{
background-image: url("/Images/home-large-grid-generative-art_half.gif") !important;
background-attachment: scroll;
background-repeat: repeat-y;
background-position: right;
background-size: contain;
}
.metric-block{
padding: 4.185vw;
border: 2px solid #949494;
max-width: 30vw;
background-color: #1a1a1a;
position: relative;
z-index:2;
}
.stat-head{
font-size: 1.339vw;
}
.stat-number{
font-family: "pp-neue-machina", sans-serif;
font-size: 6.696vw;
margin-top: -2.232vw;
margin-bottom: -2.232vw;
}
.mobile-grid-element{
display: none;
}
.top-logo{
width:50px !important;
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.hero-section{
background-image: url("/Images/large-grid-generative-art.png") !important;
background-attachment: scroll;
background-position: top;
background-repeat: repeat-y !important;
background-size: contain !important;
}
.lead-text-container{
border: 1px solid #949494;
width: 70vw;
display: flex;
justify-content: center;
align-items: center;
height: 15vw;
margin-top: 1.1vw;
margin-bottom: 0px;
}
.package_before{
background-image: url("/Images/home-large-grid-generative-art_half.gif") !important;
background-attachment: scroll;
background-repeat: repeat-y;
background-position: right;
background-size: contain;
}
.metric-block{
padding: 4.185vw;
border: 2px solid #949494;
max-width: 41.741vw;
background-color: #1a1a1a;
position: relative;
z-index:2;
}
.stat-head{
font-size: 1.339vw;
}
.stat-number{
font-family: "pp-neue-machina", sans-serif;
font-size: 6.696vw;
margin-top: -2.232vw;
margin-bottom: -2.232vw;
}
.mobile-grid-element{
display: none;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
.hero-section{
background-image: url("/Images/medium-grid-generative-art.png");
background-attachment: scroll;
background-position: top;
background-repeat: repeat-y;
background-size: cover;
}
.lead-text-container{
border: 1px solid #949494;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 20.2vw;
margin-top: .5vw;
margin-bottom: 0;
}
.metric-block{
padding: 4.185vw;
border: 2px solid #949494;
max-width: 41.741vw;
background-color: #1a1a1a;
position: relative;
z-index:2;
}
.stat-head{
font-size: 1.339vw;
}
.stat-number{
font-family: "pp-neue-machina", sans-serif;
font-size: 6.696vw;
margin-top: -2.232vw;
margin-bottom: -2.232vw;
}
.mobile-grid-element{
display: none;
}
}
@media only screen and (max-width: 576px) {
.hero-section{
padding-right: 4vw;
padding-left: 4vw;
}
.lead-text-container{
padding: 0px !important;
}
.hero-container{
/*
background-image: url("/Images/small-grid.svg");
background-position: top;
background-repeat: repeat-y;
background-size: cover;*/
padding-top: 21.800vw !important;
padding-bottom: 21.800vw !important;
margin-bottom: 5.4vw
}
.hero-container h1{
margin-bottom: 5vw;
}
.hero-float{
float: none !important;
}
.hero-bottom{
height:4vw;
}
.impact-section{
padding-top: 20vw;
padding-bottom: 20vw;
}
.package-before-section{
padding: 4vw !important;
}
.package_before{
padding-top: 20vw;
padding-bottom: 20vw;
}
.package-grid-header{
padding-left:7vw !important;
padding-right:7vw !important;
}
.package-cta-section{
padding: 4vw !important;
}
.statistics{
padding: 4vw !important;
}
.stat-small-text{
text-align: center;
}
.metric-block{
padding: 4.185vw;
border: 2px solid #949494;
width: 100%;
background-color: #1a1a1a;
position: relative;
float:none !important;
margin-top: 0px !important;
margin-bottom: 0vw !important;
z-index:2;
}
.stat-head{
font-size: 3vw;
text-align: center;
}
.stat-number{
font-family: "pp-neue-machina", sans-serif;
font-size: 14vw;
text-align: center;
margin-top: -2.232vw;
margin-bottom: -2.232vw;
}
.partners{
padding: 4vw !important;
}
.partner-logo{
padding: 0px !important;
}
#binance-logo{
width: 60% !important;
margin-bottom: 5vw !important;
}
.footer{
padding: 4vw !important;
}
.footer-top{
margin-bottom: 10vw;
}
.mobile-grid-element{
width: 100%;
}
}
@media only screen and (min-width: 576px) {
#impact-break{
display:none;
}
}
.flex {
display: flex;
justify-content: space-between;

183
src/static/css/navbar.css
View file

@ -1,184 +1 @@
/* Navbar General */
.navbar{
position: fixed;
width:100%;
}
@media only screen and (min-width: 1200px) {
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 4.5vw;
border-bottom: 2px solid #949494;
}
.nav-logo{
width: 4.4vw;
}
.nav-logo:hover{
transform: scale(0.9);
}
.nav-item{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 1vw;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 5vw;
border-bottom: 2px solid #949494;
}
.navbar-brand{
padding-top:0px !important;
padding-bottom: 0px !important;
}
.nav-logo{
width: 4.9vw;
}
.nav-logo:hover{
transform: scale(0.9);
}
.nav-item{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 1.2vw;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 10vw;
border-bottom: 2px solid #949494;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.navbar-brand{
padding-top:0px;
padding-bottom: 0px;
}
.container-fluid{
background: none !important;
}
.nav-logo{
width: 9.8vw;
top:0px !important;
}
.nav-logo:hover{
transform: scale(0.9);
}
.nav-item{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 1.2vw;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px) {
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 13.5vw;
border-bottom: 2px solid #949494;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.navbar-brand{
padding-top:0px;
padding-bottom: 0px;
}
.container-fluid{
background: none !important;
}
.nav-logo{
width: 13.2vw;
top:0px !important;
}
.nav-logo:hover{
transform: scale(0.9);
}
.nav-item{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 1.2vw;
}
}
@media only screen and (max-width: 576px) {
div.container-fluid.top-nav{
padding-left: 0px !important;
}
.navbar{
background-color: #1a1a1a !important;
height: 11vw;
border-bottom: 2px solid #949494;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.navbar-brand{
padding-top:0px;
padding-bottom: 0px;
}
.container-fluid{
background: none !important;
}
.nav-logo{
width: 10.7vw;
top:0px !important;
}
.nav-logo:hover{
transform: scale(0.9);
}
.nav-item{
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 1.2vw;
}
}

31
src/static/css/package-grid.css
View file

@ -1,36 +1,5 @@
/* Package Display Section */
.grid-square{
margin-bottom: 1.116vw;
height: 17.857vw;
background-color: gray;
width: 100%;
}
.package-label{
font-size: 0.781vw;
float:left;
padding: 0.558vw 0vw;
}
.detail-btn{
float:right;
}
.package-grid{
padding-top: 0vw !important;
padding-bottom: 0vw !important;
background-image: url("/Images/x-large-grid.svg");
background-attachment: scroll;
background-repeat: repeat;
background-size: contain;
}
@media only screen and (max-width: 576px) {
.package-grid{
padding-left: 0vw !important;
padding-right: 0vw !important;
}
}

269
src/static/css/typography.css
View file

@ -10,264 +10,111 @@
src: url("/fonts/Sono-Light.woff2");
}
@font-face {
font-family: "inter";
src: url("/fonts/Inter-Regular.woff");
}
@font-face {
font-family: "mona";
src: url("/fonts/Mona-Sans-ExtraBold.woff");
}
@font-face {
font-family: "mona-sb";
src: url("/fonts/Mona-Sans-SemiBold.woff");
}
/*
h1,h2,h3,h4,h5,h6,p,.lead{
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto !important;
}
*/
.impact{
text-shadow: 0px 0px 18px #121212;
}
h1{
font-family: "pp-neue-machina", sans-serif;
font-family: "mona", sans-serif;
color:#00ffd0;
text-transform:uppercase;
text-shadow: 0px 0px 4px #1a1a1a !important;
}
h2{
font-family: "pp-neue-machina", sans-serif;
font-family: "mona-sb", sans-serif;
color:#00ffd0;
text-transform:uppercase;
hyphens: auto;
}
h3{
font-family: "pp-neue-machina", sans-serif;
font-family: "mona-sb", sans-serif;
color:#00ffd0;
}
h4{
font-family: "pp-neue-machina", sans-serif;
font-family: "mona-sb", sans-serif;
color:#00ffd0;
}
h5{
font-family: "pp-neue-machina", sans-serif;
font-family: "mona-sb", sans-serif;
color:#00ffd0;
text-transform: uppercase;
}
.lead{
background-color: #1a1a1a !important;
h6{
font-family: "mona-sb", sans-serif;
color:#00ffd0;
}
p{
font-family: "sono", sans-serif;
font-size: 1.1rem;
line-height: 1.7rem;
font-family: "inter", sans-serif !important;
color: #ffffff;
font-weight: 500;
}
li{
font-family: "sono", sans-serif;
font-family: "inter", sans-serif !important;
color: #ffffff;
}
.terminal-output,.terminal-input{
font-family: "sono", sans-serif !important;
color: #ffffff;
}
a{
color: #00ffd0;
color: #fff;
text-decoration: none;
}
a:hover{
a.nav-link{
color: #e1e1e1;
border-bottom: 1px solid #1a1a1a;
}
a.nav-link:hover{
color: #00ffd0;
text-decoration: underline;
border-bottom: 1px solid #00ffd0;
}
/* Breakpoint-Specific Typography */
/* Extra-Large Screens*/
@media only screen and (min-width: 1200px) {
.impact{
font-size: 7.812vw !important;
line-height: 8.3vw!important;
margin-top: 2vw !important;
margin-bottom: 1vw !important;
}
h1{
font-size: 11.5vw;
line-height: 12.4vw;
margin-top: -1.116vw;
margin-left: -0.837vw;
}
h2{
font-size: 5.5vw;
line-height: 8.4vw;
}
h3{
font-size: 3.8rem;
line-height: 4.8vw;
}
h4{
font-size: 2.121vw;
line-height: 2.5vw;
}
h5{
font-size: 1.5vw;
line-height: 4.116vw;
margin-top: -0.3vw;
margin-bottom: 1.2vw;
}
.lead{
font-size: 1.5vw !important;
line-height: 2.3vw !important;
margin-bottom: 2.232vw;
}
p{
font-size: 1.116vw;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.impact{
font-size: 8.5vw !important;
line-height: 9.9vw!important;
margin-top: 4vw !important;
margin-bottom: 1.9vw !important;
}
h1{
font-size: 14vw;
line-height: 15vw;
margin-top: -0.3vw;
margin-left: -0.837vw;
}
h2{
font-size: 6.5vw;
line-height: 10vw;
}
h3{
font-size: 3.4rem;
line-height: 10vw;
}
h4{
font-size: 3vw;
line-height: 5.116vw;
}
h5{
font-size: 1.5vw;
line-height: 5vw;
margin-top: -0.3vw;
margin-bottom: 1.2vw;
}
.lead{
font-size: 2vw !important;
line-height: 2.8vw !important;
margin-bottom: 2.232vw;
}
p{
font-size: 1.667vw;
}
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
.impact{
font-size: 8.5vw !important;
line-height: 9.9vw!important;
margin-top: 4vw !important;
margin-bottom: 1.2vw !important;
}
h1{
font-size: 14vw;
line-height: 15vw;
margin-top: -0.3vw;
margin-left: -0.837vw;
}
h2{
font-size: 7vw;
line-height: 10vw;
}
h3{
font-size: 4.5vw;
line-height: 10vw;
}
h4{
font-size: 3.5vw;
line-height: 5vw;
}
h5{
font-size: 2vw;
line-height: 5vw;
}
.lead{
font-size: 2.419vw !important;
line-height: 3.5vw !important;
}
p{
font-size: 2.016vw;
}
}
@media only screen and (min-width: 576px) and (max-width: 768px){
.impact{
font-size: 12vw !important;
line-height: 13.3vw!important;
margin-top: 0vw !important;
margin-bottom: 2vw !important;
}
h1{
font-size: 14vw;
line-height: 20vw;
margin-top: 2vw;
margin-left: -0.7vw;
}
h2{
font-size: 6rem;
line-height: 7rem;
}
h3{
font-size: 3.8rem;
line-height: 80px;
}
h4{
font-size: 38px;
line-height: 45px;
}
.lead{
font-size: 3.125vw !important;
line-height: 3.776vw !important;
margin-bottom: 40px;
}
p{
font-size: 20px;
}
}
@media only screen and (max-width: 576px) {
.impact{
font-size: 12vw !important;
line-height: 13.3vw!important;
margin-top: 0vw !important;
margin-bottom: 2vw !important;
line-height: 11.2vw!important;
margin-top: 1vw !important;
margin-bottom: -2.5vw !important;
text-align: left !important;
}
h1{
@ -290,15 +137,6 @@ a:hover{
line-height: 9vw;
}
.lead{
font-size: 4.800vw !important;
line-height: 6vw !important;
}
p{
font-size: 4vw;
}
a.nav-link.footer-link.small{
font-size: 3vw;
padding-left: 0px !important;
@ -308,5 +146,4 @@ a:hover{
ul.nav.justify-content-end{
justify-content: flex-start !important;
}
}

BIN
src/static/fonts/Inter-Regular.woff Normal file
View file

Binary file not shown.

BIN
src/static/fonts/Inter-Regular.woff2 Normal file
View file

Binary file not shown.

BIN
src/static/fonts/Mona-Sans-ExtraBold.woff Normal file
View file

Binary file not shown.

BIN
src/static/fonts/Mona-Sans-SemiBold.woff Normal file
View file

Binary file not shown.