This commit is contained in:
status-im-auto 2022-01-17 14:33:00 +00:00 committed by Jenkins
commit 2415ac8df3
25 changed files with 171722 additions and 0 deletions

1
CNAME Normal file
View File

@ -0,0 +1 @@
waku.vac.dev

220
about.html Normal file
View File

@ -0,0 +1,220 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/style.min.css" rel="stylesheet" />
<title>Waku</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
</head>
<body class="font-body overflow-x-hidden">
<header class="fixed inset-x-0 z-50 bg-white">
<div class="h-18 max-w-screen-xl flex justify-between items-center mx-auto px-6 py-4 md:h-26 md:py-8 xl:px-0">
<a id="header-logo" class="text-gray" href="/index">
<img src="assets/images/logo/logo.svg" alt="">
</a>
<nav id="nav" class="absolute flex items-center justify-end -z-1 top-0 left-0 h-screen w-full bg-gray pt-16 pr-16 transform -translate-y-full md:-translate-y-0 md:bg-white md:relative md:h-auto md:p-0 md:justify-center md:z-0">
<div class="text-pink md:hidden">
<svg class="w-60 h-60 transform -translate-x-6">
<use href="#logo"/>
</svg>
</div>
<ul class="text-right text-white md:flex md:text-gray md:text-center">
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/index">Home</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium font-bold text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/about">About</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/node">Try</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/blog">Blog</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="">Support</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="">Specs</a></li>
</ul>
</nav>
<div id="social-box" class="hidden md:flex">
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/discord-dark.svg" alt="discord">
</a>
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/twitter-dark.svg" alt="twitter">
</a>
<a class="text-gray hover:text-blue" href="">
<img src="./assets/images/social/github-dark.svg" alt="github">
</a>
</div>
<div id="social-box-mobile" class="hidden">
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/discord-white.svg" alt="discord">
</a>
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/twitter-white.svg" alt="twitter">
</a>
<a class="text-gray hover:text-blue" href="">
<img src="./assets/images/social/github-white.svg" alt="github">
</a>
</div>
<div id="burger" class="flex flex-col justify-center items-center h-8 w-8 md:hidden">
<span class="block bg-gray w-7 h-0.5"></span>
<span class="block bg-gray w-7 h-0.5 my-2"></span>
<span class="block bg-gray w-7 h-0.5"></span>
</div>
</div>
</header>
<main class="pt-18 md:pt-26">
<!-- Hero -->
<section class="bg-pink w-full">
<div class="relative container max-w-screen-xl mx-auto md:h-98 md:px-16 lg:px-0">
<a class="absolute top-4 left-8 hidden text-sm italic underline text-gray mt-6 hover:underline lg:no-underline lg:flex lg:items-center xl:left-0" href="javascript:history.back();"><span class="block bg-link-arrow-black bg-left bg-no-repeat w-1.5 h-2 mr-1.5 transform rotate-180"></span>Back</a>
<div class="flex flex-col px-6 py-20 md:px-0 md:py-0 md:pt-30 lg:flex-row">
<div class="mb-10 md:mb-6 lg:w-4/12 lg:pl-32">
<h1 class="text-2xl text-gray font-semibold text-center lg:max-w-2xl lg:text-left">About</h1>
</div>
<div class="lg:w-8/12">
<div class="lg:w-3/4">
<p class="text-base text-gray font-semibold mb-5 md:mb-9">Communication today is rife with third party interference. From censorship and deplatforming, to rent seeking intermediaries, to the misuse of data in the surveillance economy.</p>
<p class="text-base text-gray font-semibold">Waku is designed to place control of communication back into the hands of the individual.</p>
</div>
</div>
</div>
</div>
</section>
<div class="container max-w-screen-xl mx-auto">
<!-- Motivation and goals -->
<section class="px-6 mt-10 md:px-16 md:mt-20 lg:px-16 lg:mt-32 xl:px-0">
<div class="border-b border-gray pb-16 md:pb-24 lg:flex lg:pb-36 lg:px-16 xl:px-32">
<div class="mb-10 md:mb-6 lg:mb-0 lg:w-1/5">
<h2 class="ont-semibold leading-10 text-2xl md:text-center lg:text-left lg:w-36">Motivation and goals</h2>
</div>
<div class="lg:w-4/5 lg:pl-6 xl:pl-0">
<p class="text-sm font-semibold mb-8 leading-7 md:text-center md:mb-6 lg:text-left lg:mb-12">Digital signature, public key difficulty hashrate whitepaper, Merkle Tree double-spend Mempool outputs, double-spend problem?</p>
<div class="grid grid-cols-1 gap-y-8 md:gap-y-6 lg:grid-cols-2 lg:gap-y-12 lg:gap-x-5">
<div>
<h3 class="text-sm font-semibold mb-4 text-gray md:mb-6">Privacy</h3>
<p class="text-sm leading-relaxed text-gray75">These applications have a desire for some privacy guarantees, such as pseudonymity, metadata protection in transit, etc.</p>
</div>
<div>
<h3 class="text-sm font-semibold mb-4 text-gray md:mb-6">Peer-to-Peer</h3>
<p class="text-sm leading-relaxed text-gray75">These applications sometimes have requirements that make them suitable for peer-to-peer solutions.</p>
</div>
<div>
<h3 class="text-sm font-semibold mb-4 text-gray md:mb-6">Generalized messaging</h3>
<p class="text-sm leading-relaxed text-gray75">Many applications require some form of messaging protocol to communicate between different subsystems or different nodes. This messaging can be human-to-human or machine-to-machine or a mix.</p>
</div>
<div>
<h3 class="text-sm font-semibold mb-4 text-gray md:mb-6">Resource restricted</h3>
<p class="text-sm leading-relaxed text-gray75">These applications often run in constrained environments, where resources or the environment is restricted in some fashion. E.g.:</p>
<ul class="text-sm leading-relaxed list-disc pl-4 text-gray75">
<li>limited bandwidth, CPU, memory, disk, battery, etc.,</li>
<li>not being publicly connectable,</li>
<li>only being intermittently connected; mostly-offline.</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- History -->
<section class="px-6 mt-10 md:px-16 md:mt-20 lg:px-16 lg:mt-32 xl:px-0">
<div class="pb-16 md:pb-24 lg:flex lg:pb-36 lg:px-16 xl:px-32">
<div class="mb-10 md:mb-6 lg:mb-0 lg:w-1/5 lg:flex">
<h2 class="font-semibold leading-10 text-2xl md:text-center lg:text-left lg:w-36">History</h2>
</div>
<div class="lg:w-4/5 lg:pl-6 xl:pl-0">
<p class="text-sm font-semibold mb-8 leading-7 md:text-center md:mb-6 lg:text-left lg:mb-12">Only Waku v1 was a fork of Whisper with some added tweaks for efficiency. Waku v2 is a completely redesigned suite of protocols designed to address the goals set out in the "Motivation and goals" section.</p>
<div class="grid grid-cols-1 gap-y-8">
<div class="relative flex items-center">
<div class="absolute top-1/2 left-8 h-full w-px bg-light"></div>
<div class="inline-flex flex-col items-center justify-center bg-blue rounded-full min-w-max w-16 h-16 mr-10 z-10">
<span class="text-white">2013</span>
</div>
<p class="text-sm w-8/12">Ethereum White Paper was introduced with the Holy Trinity, consisting of Ethereum for consensu, Swarm for decentralized storage, and Whisper for p2p messaging.</p>
</div>
<div class="relative flex items-center">
<div class="absolute top-1/2 left-8 h-full w-px bg-light"></div>
<div class="inline-flex flex-col items-center justify-center bg-blue rounded-full min-w-max w-16 h-16 mr-10 z-10">
<span class="text-white">2015</span>
<span class="text-white">2018</span>
</div>
<p class="text-sm w-8/12">R&D of Whisper was slow to follow progress of the Ethereum EVM and Swarm without a dedicated team building out the protocol.</p>
</div>
<div class="relative flex items-center">
<div class="absolute top-1/2 left-8 h-full w-px bg-light"></div>
<div class="inline-flex flex-col items-center justify-center bg-blue rounded-full min-w-max w-16 h-16 mr-10 z-10">
<span class="text-white">2018</span>
</div>
<p class="text-sm w-8/12">With little progress made on Whisper and significant scalability concerns growing, Vac was formed to conduct R&D on more scalable p2p messaging.</p>
</div>
<div class="relative flex items-center">
<div class="absolute top-1/2 left-8 h-full w-px bg-light"></div>
<div class="inline-flex flex-col items-center justify-center bg-blue rounded-full min-w-max w-16 h-16 mr-10 z-10">
<span class="text-white">2020</span>
</div>
<p class="text-sm w-8/12">Waku v1 was introduced as the messaging protocol in Status, replacing Whisper.</p>
</div>
<div class="relative flex items-center">
<div class="inline-flex flex-col items-center justify-center bg-blue rounded-full min-w-max w-16 h-16 mr-10 z-10">
<span class="text-white">2021</span>
</div>
<p class="text-sm w-8/12">Waku v2 replaces Waku v1 (details)</p>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<footer class="w-full bg-gray text-white">
<div class="flex flex-row flex-wrap justify-between max-w-screen-xl mx-auto p-6 pb-20 md:grid md:grid-cols-footer-md md:gap-x-14 md:gap-y-10 md:px-16 md:pt-8 md:pb-10 xl:grid-cols-footer-xl xl:px-0 xl:pb-14 xl:pr-28 xl:pt-11">
<a class="block text-pink mr-9 order-1 md:m-0" href="index">
<img src="assets/images/logo/logo-pink.svg" alt="">
</a>
<div class="search-input order-2 w-footer-input md:w-full xl:order-4">
<h3 class="text-sm mb-3 font-semibold">Signup for updates</h3>
<form action="#">
<div class="flex items-center border-b border-white w-full">
<input class="bg-gray text-xs w-full" type="email" placeholder="your email">
<button class="h-6 w-4 bg-gray bg-link-arrow-white bg-center bg-no-repeat" type="submit"> </button>
</div>
</form>
</div>
<nav class="flex justify-between w-full mt-8 mb-14 order-3 md:order-4 md:my-0 xl:order-3 xl:pl-14">
<div>
<h3 class="text-sm mb-3 font-semibold">Resources</h3>
<ul class="grid grid-cols-1 text-white70 md:grid-cols-2 md:gap-x-6">
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="/about">About</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="">FAQ</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="">Specs</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="/node">Run a node</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="/blog">Blog</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://forum.vac.dev/">Forum</a></li>
<li><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://jobs.status.im/">Careers</a></li>
</ul>
</div>
<div>
<h3 class="text-sm mb-3 font-semibold">Social</h3>
<ul class="text-white70">
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://twitter.com/vacp2p">Twitter</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://discord.gg/ev9GQGJ9Dg">Discord</a></li>
<li><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/vacp2p/">GitHub</a></li>
</ul>
</div>
<div>
<h3 class="text-sm mb-3 font-semibold">Install</h3>
<ul class="text-white70">
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/status-im/go-waku">go-waku</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/status-im/nim-waku/">nim-waku</a></li>
<li><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/status-im/js-waku">js-waku</a></li>
</ul>
</div>
</nav>
<p class="text-sm leading-6 order-4 md:order-3 xl:order-2">Waku is a privacy-preserving, peer-to-peer messaging protocol designed for resource restricted devices.</p>
</div>
</footer>
<script src="./js/main.js"></script>
</body>
</html>

View File

@ -0,0 +1 @@
<svg width="6" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 .5v8l6-4-6-4z" fill="#242424"/></svg>

After

Width:  |  Height:  |  Size: 122 B

View File

@ -0,0 +1 @@
<svg width="7" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.273.5v8l6-4-6-4z" fill="#3A71F9"/></svg>

After

Width:  |  Height:  |  Size: 124 B

View File

@ -0,0 +1 @@
<svg width="7" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.273.5v8l6-4-6-4z" fill="#FDB4C4"/></svg>

After

Width:  |  Height:  |  Size: 124 B

View File

@ -0,0 +1 @@
<svg width="6" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 .5v8l6-4-6-4z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 119 B

View File

@ -0,0 +1 @@
<svg width="65" height="64" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)" fill="#242424"><path d="M49.17 9.252L33.422.32c-.88-.492-1.74-.406-2.6.085-9.497 5.428-18.994 10.834-28.47 16.262-.3.171-.58.662-.58 1.004-.021 10.835-.042 21.647.022 32.46 0 .705.537 1.71 1.117 2.051 5.114 3.013 10.292 5.898 15.47 8.826.044.021.13 0 .366 0v-1.24c0-10.642.021-21.262-.022-31.904 0-1.004.366-1.474 1.182-1.923A12519.01 12519.01 0 0048.42 9.744c.193-.107.408-.257.752-.492z"/><path d="M40.705 64v-1.282c0-7.437.021-14.873-.022-22.33 0-.962.28-1.475 1.139-1.945 6.618-3.697 13.193-7.458 19.789-11.198.322-.17.623-.363 1.01-.598-.172-.15-.28-.278-.43-.363-4.297-2.458-8.616-4.894-12.892-7.394-1.267-.748-2.363-.77-3.674-.021-6.403 3.697-12.849 7.33-19.295 10.962-.709.385-.924.833-.924 1.624.022 7.415.022 14.809 0 22.224 0 1.11.344 1.987 1.332 2.543 4.448 2.521 8.874 5.021 13.322 7.543.15.085.344.128.645.235z"/><path d="M62.75 51.584c-5.179-2.949-10.164-5.77-15.277-8.676V60.26c5.07-2.885 10.055-5.706 15.276-8.676z"/></g><defs><clipPath id="clip0"><path fill="#fff" transform="translate(1.75)" d="M0 0h61v64H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.875 18.825c-.618.117-1.246.175-1.875.175-4.478 0-8.268-2.943-9.543-7A9.97 9.97 0 014.02 8.971m5.858.908a3 3 0 114.243 4.243M9.878 9.879l4.243 4.243M9.878 9.879l4.242 4.241m.001.002l3.291 3.29M9.88 9.88L6.59 6.59m0 0L3 3m3.59 3.59A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.024 10.024 0 01-4.132 5.411M6.59 6.59l10.821 10.821m0 0L21 21" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

After

Width:  |  Height:  |  Size: 518 B

View File

@ -0,0 +1 @@
<svg width="25" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.621 14.121A3 3 0 1010.38 9.88a3 3 0 004.242 4.242z" stroke="#242424" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2.958 12C4.232 7.943 8.023 5 12.5 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" stroke="#242424" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

After

Width:  |  Height:  |  Size: 442 B

View File

@ -0,0 +1 @@
<svg width="64" height="64" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 32C0 14.327 14.326 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.325 64 0 49.673 0 32zm32.168-1.402h-.002v-.002c-1.612-.168-3.225-.334-5.209-.225a17.33 17.33 0 00-2.92.41c.584-7.055 5.777-13.231 12.839-13.622 4.332-.241 8.662 2.332 8.898 6.51.231 4.107-3.024 6.854-8.397 7.153-1.983.11-3.595-.057-5.209-.224zm-5.413 15.101c-4.105.222-8.207-2.138-8.43-5.968v.001c-.218-3.764 2.864-6.282 7.955-6.555 1.88-.102 3.407.051 4.935.206l.038.003c1.517.151 3.035.302 4.898.202a16.814 16.814 0 002.766-.377c-.552 6.469-5.47 12.13-12.162 12.488z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 695 B

View File

@ -0,0 +1 @@
<svg width="167" height="248" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_433_5710)" fill="#FDB4C4"><path d="M-65.882 178.286a5.51 5.51 0 01-4.674-2.62c-1.534-2.619-.73-5.967 1.898-7.495.366-.218 32.133-19.357 57.4-43.953-26.29-25.615-56.888-44.026-57.253-44.244-2.63-1.528-3.433-4.876-1.9-7.495 1.535-2.62 4.894-3.42 7.523-1.892C-61.501 71.46-27.69 91.69.426 120.36c2.045 2.111 2.045 5.531 0 7.641-26.8 27.434-61.927 48.61-63.46 49.556-.877.437-1.826.728-2.848.728zm217.91.001c-.95 0-1.899-.219-2.848-.801-1.461-.873-36.66-22.049-63.46-49.556-2.046-2.111-2.046-5.531 0-7.641 28.042-28.671 61.853-48.901 63.314-49.775 2.629-1.528 5.988-.727 7.521 1.892 1.534 2.62.731 5.968-1.898 7.496-.292.218-30.964 18.556-57.254 44.244 25.268 24.596 57.108 43.807 57.4 43.953 2.556 1.528 3.432 4.875 1.898 7.495a5.42 5.42 0 01-4.673 2.693zM42.927 83.103c-1.388 0-2.775-.51-3.798-1.528C11.6 54.868-9.653 19.865-10.602 18.338c-1.534-2.62-.657-5.967 1.899-7.496 2.556-1.528 5.915-.727 7.521 1.893.22.363 19.426 32.018 44.109 57.197 25.705-26.198 44.181-56.688 44.4-57.052 1.534-2.62 4.893-3.42 7.522-1.892 2.556 1.528 3.432 4.876 1.899 7.495-.877 1.456-21.178 35.075-49.95 63.092-1.096.946-2.484 1.528-3.871 1.528zM-5.855 238.031c-.95 0-1.899-.219-2.848-.801-2.556-1.528-3.433-4.875-1.899-7.495.876-1.455 22.2-36.531 49.731-63.237 2.118-2.038 5.55-2.038 7.668 0 28.773 27.944 49.075 61.636 49.95 63.091 1.534 2.62.731 5.968-1.898 7.496-2.556 1.528-5.988.727-7.522-1.892-.219-.291-18.622-30.855-44.4-57.052-24.683 25.178-43.962 56.906-44.109 57.197a5.422 5.422 0 01-4.673 2.693z"/><path d="M161.306 115.34c-3.506 0-41.918-.218-79.746-10.042-2.848-.728-4.6-3.639-3.944-6.55 8.69-37.258 27.824-73.57 28.7-75.025 1.388-2.693 4.747-3.639 7.376-2.256 2.702 1.382 3.724 4.73 2.264 7.35-.146.363-17.454 33.11-26.363 67.239 35.71 8.441 71.201 8.369 71.932 8.441 2.994 0 5.477 2.402 5.477 5.458s-2.41 5.458-5.477 5.458c-.073-.073-.146-.073-.219-.073zM-24.842 227.262a5.35 5.35 0 01-2.556-.655c-2.702-1.383-3.651-4.73-2.264-7.35.146-.291 16.87-31.873 26.144-67.312-34.25-8.005-71.275-8.15-71.932-8.15-3.067 0-5.55-2.475-5.55-5.458a5.46 5.46 0 015.477-5.458c1.826-.218 42.867 0 80.038 9.751 2.848.728 4.6 3.639 3.943 6.55-9.201 39.004-27.604 73.716-28.407 75.171-1.023 1.819-2.921 2.911-4.893 2.911z"/><path d="M66.37 89.288c-2.41 0-4.601-1.6-5.259-4.002-10.37-36.822-11.1-77.791-11.1-79.538-.073-2.983 2.337-5.457 5.404-5.53h.073c2.995 0 5.404 2.401 5.477 5.385 0 .364.658 37.404 9.348 71.533 35.418-9.752 66.82-26.925 67.112-27.144 2.629-1.455 5.988-.509 7.449 2.11 1.46 2.62.511 5.968-2.118 7.423-1.461.8-36.003 19.72-74.999 29.545-.511.145-.95.218-1.388.218zM30.803 247.709c-2.994 0-5.404-2.402-5.477-5.385 0-.364-.584-36.021-9.64-71.533-34.103 9.46-66.673 27.216-66.966 27.361-2.628 1.456-5.988.51-7.448-2.11s-.511-5.967 2.117-7.422c1.534-.801 37.61-20.522 74.853-29.763 2.921-.728 5.842 1.018 6.573 3.856 10.735 38.569 11.392 77.864 11.392 79.538.073 2.911-2.337 5.385-5.404 5.458zM20.51 88.78c-.51 0-.949-.074-1.46-.22-37.025-10.187-72.662-30.635-74.123-31.509a5.46 5.46 0 01-1.971-7.495c1.46-2.547 4.82-3.493 7.449-1.965.365.219 32.497 18.702 66.308 28.963C26.572 41.26 27.96 5.676 28.033 5.239c.145-2.983 2.774-5.458 5.695-5.24 2.995.074 5.404 2.62 5.258 5.677-.073 1.6-1.606 40.897-13.29 79.246-.658 2.329-2.849 3.857-5.185 3.857zm32.132 159.219h-.22c-2.994-.145-5.403-2.619-5.258-5.676.073-1.746 1.753-42.643 13-79.246.876-2.838 3.87-4.439 6.718-3.639 38.704 10.697 72.808 30.418 74.268 31.291a5.46 5.46 0 011.972 7.496c-1.533 2.619-4.893 3.493-7.522 1.964-.292-.218-31.255-18.047-66.454-28.671-9.42 33.911-10.954 70.951-11.027 71.315-.074 2.838-2.556 5.166-5.477 5.166z"/><path d="M-75.304 114.831h-.292c-2.994 0-5.404-2.474-5.404-5.458 0-2.983 2.41-5.312 5.477-5.457.073 0 37.536 0 72.005-7.932-9.129-35.512-25.779-67.094-25.925-67.385-1.46-2.693-.438-5.967 2.264-7.423 2.702-1.382 5.988-.364 7.376 2.256C-19 24.888-.67 59.672 8.385 98.676c.657 2.911-1.095 5.749-3.943 6.55-36.003 9.387-75.802 9.605-79.746 9.605zM110.77 227.406c-1.971 0-3.87-1.091-4.819-2.911-.804-1.528-19.864-37.84-28.481-75.098a5.416 5.416 0 013.944-6.477c38.923-9.969 78.431-9.824 79.964-9.897 2.994 0 5.477 2.475 5.477 5.458 0 2.984-2.483 5.458-5.477 5.458h-.146c-2.337 0-37.098.145-71.859 8.223 8.837 34.056 26.071 66.948 26.217 67.239 1.388 2.693.365 5.967-2.264 7.35a5.336 5.336 0 01-2.556.655z"/></g><defs><clipPath id="clip0_433_5710"><path fill="#fff" transform="translate(-81)" d="M0 0h248v248H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

View File

@ -0,0 +1 @@
<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1032_5290)" fill="#FDB4C4"><path d="M2.438 28.756a.889.889 0 01-.754-.422.877.877 0 01.307-1.21c.059-.035 5.182-3.121 9.258-7.089-4.24-4.131-9.176-7.1-9.235-7.136a.884.884 0 11.907-1.514c.224.141 5.677 3.404 10.212 8.028.33.34.33.892 0 1.233-4.323 4.425-9.988 7.84-10.235 7.993-.142.07-.295.117-.46.117zm35.147 0a.855.855 0 01-.459-.13c-.236-.14-5.913-3.555-10.236-7.992a.891.891 0 010-1.232c4.523-4.625 9.977-7.888 10.212-8.029a.884.884 0 11.907 1.514c-.047.036-4.994 2.993-9.234 7.137 4.075 3.967 9.21 7.065 9.258 7.089a.888.888 0 01.306 1.209.874.874 0 01-.754.434zM19.988 13.403a.866.866 0 01-.612-.246c-4.44-4.308-7.868-9.953-8.021-10.2a.887.887 0 01.306-1.209.889.889 0 011.213.306c.035.058 3.133 5.164 7.114 9.225 4.146-4.225 7.126-9.143 7.162-9.202a.884.884 0 011.52.904c-.142.235-3.417 5.657-8.058 10.176a.973.973 0 01-.624.246zM12.12 38.392a.887.887 0 01-.766-1.338c.142-.234 3.581-5.892 8.022-10.2a.899.899 0 011.236 0c4.641 4.508 7.916 9.942 8.057 10.177a.877.877 0 01-.306 1.209.886.886 0 01-1.213-.305c-.036-.047-3.004-4.977-7.162-9.202-3.98 4.06-7.09 9.178-7.114 9.225a.874.874 0 01-.754.434z"/><path d="M39.081 18.603c-.565 0-6.76-.035-12.862-1.62a.886.886 0 01-.636-1.056c1.402-6.01 4.488-11.866 4.63-12.1a.88.88 0 011.189-.365c.436.223.6.763.365 1.186-.023.058-2.815 5.34-4.252 10.845 5.76 1.361 11.484 1.35 11.602 1.361a.88.88 0 01.883.88c0 .493-.388.88-.883.88-.012-.01-.024-.01-.035-.01zM9.058 36.655a.862.862 0 01-.413-.106.873.873 0 01-.365-1.185c.024-.047 2.721-5.141 4.217-10.857C6.973 23.216 1.001 23.192.895 23.192a.89.89 0 01-.895-.88.88.88 0 01.883-.88c.295-.035 6.914 0 12.91 1.573.46.117.742.587.636 1.056-1.484 6.291-4.453 11.89-4.582 12.124a.912.912 0 01-.79.47z"/><path d="M23.77 14.401a.88.88 0 01-.848-.645c-1.673-5.94-1.79-12.547-1.79-12.829a.88.88 0 01.87-.892h.013c.482 0 .871.387.883.869 0 .058.106 6.033 1.508 11.537C30.118 10.868 35.183 8.1 35.23 8.063a.888.888 0 011.202.34.882.882 0 01-.342 1.198c-.236.129-5.807 3.18-12.097 4.765a.802.802 0 01-.223.035zm-5.737 25.552a.886.886 0 01-.884-.868c0-.059-.094-5.81-1.555-11.538-5.5 1.526-10.753 4.39-10.8 4.413a.888.888 0 01-1.202-.34.882.882 0 01.342-1.197c.247-.13 6.066-3.31 12.073-4.8a.873.873 0 011.06.621c1.731 6.221 1.837 12.56 1.837 12.83.012.468-.377.868-.871.88zM16.372 14.32a.818.818 0 01-.235-.036C10.165 12.641 4.417 9.343 4.18 9.202a.88.88 0 11.884-1.526c.059.035 5.241 3.017 10.695 4.672C17.35 6.655 17.574.916 17.585.845c.024-.48.448-.88.92-.845a.874.874 0 01.847.916c-.012.258-.259 6.596-2.143 12.781a.869.869 0 01-.837.623zM21.555 40h-.035a.881.881 0 01-.849-.916c.012-.281.283-6.878 2.097-12.781a.884.884 0 011.084-.587c6.242 1.725 11.743 4.906 11.978 5.047a.88.88 0 01.319 1.209.887.887 0 01-1.214.317c-.047-.036-5.041-2.911-10.718-4.625-1.52 5.47-1.767 11.444-1.779 11.502-.012.458-.412.834-.883.834z"/><path d="M.919 18.52H.872A.878.878 0 010 17.64c0-.48.389-.856.883-.88.012 0 6.055 0 11.614-1.28C11.025 9.754 8.34 4.66 8.316 4.613a.877.877 0 01.365-1.197.887.887 0 011.19.364c.129.235 3.085 5.845 4.546 12.136a.892.892 0 01-.636 1.056c-5.807 1.514-12.226 1.55-12.862 1.55zM30.93 36.678a.88.88 0 01-.776-.47c-.13-.246-3.204-6.103-4.594-12.112a.873.873 0 01.636-1.045c6.278-1.608 12.65-1.584 12.897-1.596.483 0 .884.4.884.88 0 .482-.4.88-.884.88h-.023c-.377 0-5.984.024-11.59 1.327 1.425 5.493 4.205 10.798 4.228 10.845a.88.88 0 01-.777 1.291z"/></g><defs><clipPath id="clip0_1032_5290"><path fill="#fff" d="M0 0h40v40H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1 @@
<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)" fill="#242424"><path d="M2.44 28.756a.889.889 0 01-.755-.422.877.877 0 01.307-1.21c.059-.035 5.182-3.121 9.258-7.089-4.24-4.131-9.176-7.1-9.235-7.136a.884.884 0 11.907-1.514c.224.141 5.677 3.404 10.212 8.028.33.34.33.892 0 1.233-4.323 4.425-9.988 7.84-10.235 7.993-.142.07-.295.117-.46.117zm35.147 0a.855.855 0 01-.46-.13c-.235-.14-5.912-3.555-10.235-7.992a.891.891 0 010-1.232c4.523-4.625 9.976-7.888 10.212-8.029a.884.884 0 11.907 1.514c-.047.036-4.994 2.993-9.235 7.137 4.076 3.967 9.211 7.065 9.258 7.089a.887.887 0 01.307 1.209.874.874 0 01-.754.434zM19.988 13.404a.865.865 0 01-.612-.246c-4.44-4.308-7.868-9.953-8.021-10.2a.887.887 0 01.306-1.209.889.889 0 011.213.306c.035.058 3.133 5.164 7.114 9.225 4.146-4.225 7.126-9.143 7.162-9.202a.884.884 0 011.52.904c-.142.235-3.417 5.657-8.058 10.176a.973.973 0 01-.624.246zM12.12 38.392a.887.887 0 01-.766-1.338c.142-.235 3.581-5.893 8.022-10.2a.899.899 0 011.236 0c4.641 4.507 7.916 9.941 8.057 10.176a.877.877 0 01-.306 1.209.886.886 0 01-1.213-.305c-.036-.047-3.004-4.977-7.162-9.202-3.98 4.06-7.09 9.178-7.114 9.225a.875.875 0 01-.754.434z"/><path d="M39.081 18.603c-.565 0-6.76-.035-12.862-1.62a.886.886 0 01-.636-1.056c1.401-6.01 4.487-11.866 4.629-12.1a.88.88 0 011.19-.365c.435.223.6.763.364 1.186-.023.058-2.814 5.34-4.251 10.845 5.76 1.361 11.484 1.35 11.601 1.361a.88.88 0 01.884.88c0 .493-.389.88-.884.88-.011-.01-.023-.01-.035-.01zM9.058 36.655a.862.862 0 01-.413-.106.873.873 0 01-.365-1.185c.024-.047 2.721-5.141 4.217-10.857C6.973 23.216 1.001 23.192.895 23.192a.89.89 0 01-.895-.88.88.88 0 01.883-.88c.295-.035 6.914 0 12.91 1.573.46.117.742.587.636 1.056-1.484 6.291-4.453 11.89-4.582 12.124a.912.912 0 01-.79.47z"/><path d="M23.77 14.401a.88.88 0 01-.848-.645c-1.673-5.94-1.79-12.547-1.79-12.829a.88.88 0 01.87-.892h.013c.482 0 .871.387.883.869 0 .058.106 6.033 1.508 11.537C30.118 10.868 35.183 8.1 35.23 8.063a.888.888 0 011.202.34.882.882 0 01-.342 1.198c-.236.129-5.807 3.18-12.097 4.765a.802.802 0 01-.223.035zm-5.736 25.552a.886.886 0 01-.884-.868c0-.059-.094-5.81-1.555-11.538-5.5 1.526-10.753 4.39-10.8 4.413a.888.888 0 01-1.202-.34.882.882 0 01.342-1.197c.247-.13 6.066-3.31 12.073-4.8a.873.873 0 011.06.621c1.731 6.221 1.837 12.56 1.837 12.83.012.468-.377.868-.872.88zM16.373 14.32a.818.818 0 01-.236-.036c-5.972-1.643-11.72-4.941-11.955-5.082a.88.88 0 11.883-1.526c.06.035 5.242 3.017 10.695 4.672C17.35 6.655 17.574.916 17.586.845c.024-.48.448-.88.919-.845a.874.874 0 01.848.916c-.012.258-.26 6.596-2.144 12.781a.869.869 0 01-.836.623zM21.554 40h-.035a.881.881 0 01-.848-.916c.012-.281.283-6.878 2.096-12.781a.884.884 0 011.084-.587c6.243 1.725 11.743 4.906 11.979 5.047a.88.88 0 01.318 1.209.887.887 0 01-1.213.317c-.047-.036-5.041-2.911-10.719-4.625-1.52 5.47-1.767 11.444-1.778 11.502-.012.458-.412.834-.884.834z"/><path d="M.919 18.52H.872A.878.878 0 010 17.64c0-.48.389-.856.883-.88.012 0 6.055 0 11.614-1.28C11.025 9.754 8.34 4.66 8.316 4.613a.877.877 0 01.365-1.197.887.887 0 011.19.364c.129.235 3.085 5.845 4.546 12.136a.892.892 0 01-.636 1.056c-5.807 1.514-12.226 1.55-12.862 1.55zM30.93 36.678a.88.88 0 01-.777-.47c-.13-.246-3.204-6.103-4.594-12.112a.873.873 0 01.636-1.045c6.278-1.608 12.65-1.584 12.898-1.596.483 0 .883.4.883.88 0 .482-.4.88-.883.88h-.024c-.377 0-5.983.024-11.59 1.327 1.425 5.493 4.205 10.798 4.229 10.845a.88.88 0 01-.778 1.291z"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h40v40H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1 @@
<svg width="17" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.916 0a8 8 0 110 16 8 8 0 010-16zm-2.96 12.221s.403-.448.693-.844c-1.396-.395-1.923-1.186-1.923-1.186 1.452.898 2.808 1.243 4.19 1.198 1.382.045 2.738-.3 4.19-1.198 0 0-.527.791-1.923 1.186.29.396.693.844.693.844 1.959-.043 2.937-1.031 3.258-1.355.072-.072.11-.112.12-.1 0-3.264-1.584-5.922-1.584-5.922-1.418-1.018-2.74-1.06-2.992-1.065l-.161.153c1.81.506 2.686 1.297 2.686 1.297a10.068 10.068 0 00-4.287-1.03c-1.269.016-2.733.28-4.287 1.03 0 0 .876-.791 2.686-1.297l-.16-.153c-.253.005-1.575.047-2.993 1.065 0 0-1.585 2.658-1.585 5.922.01-.012.05.027.12.1.322.324 1.3 1.312 3.26 1.355zm4.91-4.73v-.005c.613 0 1.107.506 1.107 1.128 0 .623-.494 1.129-1.107 1.129A1.116 1.116 0 019.76 8.62c0-.623.5-1.129 1.107-1.129zm-3.9 0v-.005c-.612 0-1.106.506-1.106 1.128 0 .622.494 1.129 1.106 1.129.613 0 1.107-.507 1.107-1.124 0-.622-.5-1.128-1.107-1.128z" fill="#242424"/></svg>

After

Width:  |  Height:  |  Size: 995 B

View File

@ -0,0 +1 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zM7.56 18.332s.605-.673 1.04-1.266c-2.095-.593-2.885-1.78-2.885-1.78 2.178 1.347 4.212 1.865 6.285 1.798 2.073.067 4.107-.45 6.285-1.797 0 0-.79 1.186-2.885 1.78.435.592 1.04 1.265 1.04 1.265 2.938-.065 4.406-1.547 4.887-2.033.108-.109.166-.168.18-.15 0-4.896-2.376-8.883-2.376-8.883-2.127-1.526-4.11-1.59-4.488-1.598l-.242.23c2.715.759 4.029 1.945 4.029 1.945C16.1 6.718 13.903 6.322 12 6.298c-1.903.024-4.1.42-6.43 1.545 0 0 1.313-1.186 4.029-1.945l-.242-.23c-.379.008-2.36.071-4.488 1.598 0 0-2.377 3.986-2.377 8.883.015-.018.073.041.18.15.482.486 1.95 1.968 4.888 2.033zm7.364-7.095v-.008c.918 0 1.66.76 1.66 1.693s-.742 1.693-1.66 1.693c-.919 0-1.66-.76-1.66-1.685 0-.933.75-1.693 1.66-1.693zm-5.85 0v-.008c-.918 0-1.66.76-1.66 1.692 0 .934.742 1.693 1.66 1.693.919 0 1.66-.76 1.66-1.685 0-.933-.749-1.692-1.66-1.692z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1 @@
<svg width="17" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.915 0C4.498 0 .935 3.672.959 8.203c.02 3.623 2.327 6.697 5.513 7.783.4.075.545-.178.544-.396-.001-.195-.01-.71-.018-1.395-2.223.496-2.701-1.1-2.701-1.1-.368-.947-.894-1.2-.894-1.2-.73-.508.051-.498.051-.498.803.058 1.23.846 1.23.846.72 1.253 1.877.891 2.332.68.07-.53.274-.89.502-1.096-1.777-.207-3.649-.91-3.665-4.053-.005-.896.303-1.628.812-2.202-.084-.207-.362-1.042.067-2.17 0 0 .67-.22 2.204.84a7.468 7.468 0 012.002-.275 7.517 7.517 0 012.004.276c1.522-1.06 2.194-.84 2.194-.84.442 1.13.172 1.963.091 2.17.516.574.83 1.306.834 2.202.017 3.15-1.85 3.844-3.63 4.047.288.253.546.754.55 1.519.006 1.096 0 1.98.002 2.25.001.219.147.474.552.394 3.17-1.087 5.443-4.16 5.424-7.782C16.935 3.673 13.334 0 8.915 0z" fill="#242424"/></svg>

After

Width:  |  Height:  |  Size: 820 B

View File

@ -0,0 +1 @@
<svg width="25" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.998 0C5.373 0 .03 5.509.066 12.304c.028 5.435 3.49 10.046 8.27 11.674.6.114.817-.266.815-.593-.001-.292-.016-1.066-.027-2.092-3.334.743-4.052-1.65-4.052-1.65-.552-1.421-1.341-1.8-1.341-1.8-1.095-.763.077-.747.077-.747 1.205.087 1.844 1.268 1.844 1.268 1.081 1.88 2.817 1.337 3.499 1.022.104-.795.411-1.337.753-1.645-2.665-.311-5.473-1.367-5.498-6.08-.007-1.344.456-2.442 1.219-3.303-.126-.311-.544-1.563.1-3.255 0 0 1.006-.331 3.306 1.26a11.21 11.21 0 013.003-.413c1.018.006 2.047.14 3.007.415 2.282-1.592 3.29-1.26 3.29-1.26.663 1.693.258 2.943.137 3.254.774.861 1.243 1.96 1.25 3.303.025 4.726-2.774 5.766-5.446 6.07.433.38.82 1.131.827 2.279.008 1.645 0 2.972.003 3.375.001.329.22.712.828.59 4.754-1.63 8.164-6.238 8.136-11.672C24.029 5.509 18.627 0 11.998 0z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 871 B

View File

@ -0,0 +1 @@
<svg width="19" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.967 2.403a7.716 7.716 0 01-2.132.584A3.68 3.68 0 0018.463.942a7.395 7.395 0 01-2.347.896 3.7 3.7 0 00-6.401 2.53c0 .293.025.576.086.844a10.475 10.475 0 01-7.628-3.87 3.726 3.726 0 00-.507 1.87c0 1.281.66 2.417 1.644 3.075a3.655 3.655 0 01-1.672-.456v.041a3.718 3.718 0 002.965 3.636c-.301.083-.63.122-.97.122a3.24 3.24 0 01-.7-.063 3.736 3.736 0 003.457 2.578 7.436 7.436 0 01-4.588 1.578c-.304 0-.595-.013-.886-.05a10.419 10.419 0 005.677 1.66c6.81 0 10.533-5.64 10.533-10.53 0-.164-.006-.322-.014-.479a7.382 7.382 0 001.855-1.921z" fill="#242424"/></svg>

After

Width:  |  Height:  |  Size: 644 B

View File

@ -0,0 +1 @@
<svg width="25" height="22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.068 3.537c-.895.392-1.848.653-2.843.779a4.907 4.907 0 002.171-2.727 9.86 9.86 0 01-3.129 1.194 4.933 4.933 0 00-8.535 3.374c0 .391.033.767.114 1.125-4.102-.2-7.732-2.166-10.17-5.16A4.968 4.968 0 001 4.614c0 1.71.88 3.224 2.192 4.101a4.873 4.873 0 01-2.23-.608v.054a4.958 4.958 0 003.954 4.849c-.402.11-.84.162-1.294.162a4.37 4.37 0 01-.934-.084c.64 1.954 2.454 3.39 4.61 3.437a9.915 9.915 0 01-6.117 2.105c-.405 0-.793-.018-1.181-.068a13.891 13.891 0 007.57 2.214c9.08 0 14.043-7.521 14.043-14.04 0-.219-.007-.43-.018-.638a9.843 9.843 0 002.473-2.562z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 660 B

View File

@ -0,0 +1 @@
<svg width="192" height="192" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)" fill="#FDB4C4"><path d="M11.704 138.028A4.266 4.266 0 018.085 136c-1.187-2.028-.565-4.62 1.47-5.803.283-.169 24.877-14.986 44.439-34.028C33.64 76.338 9.95 62.084 9.669 61.915c-2.036-1.183-2.658-3.774-1.47-5.802 1.187-2.029 3.787-2.648 5.823-1.465 1.074.676 27.25 16.338 49.018 38.535 1.583 1.634 1.583 4.282 0 5.915-20.75 21.24-47.944 37.634-49.131 38.367-.679.338-1.414.563-2.205.563zm168.706.001c-.735 0-1.47-.169-2.205-.62-1.131-.676-28.382-17.07-49.131-38.366-1.583-1.634-1.583-4.282 0-5.916 21.71-22.197 47.887-37.859 49.018-38.535 2.035-1.183 4.636-.563 5.823 1.465 1.187 2.028.565 4.62-1.47 5.803-.226.169-23.972 14.366-44.325 34.253 19.562 19.043 44.212 33.916 44.438 34.028 1.979 1.184 2.657 3.775 1.47 5.803a4.198 4.198 0 01-3.618 2.085zM95.944 64.338c-1.074 0-2.148-.395-2.94-1.183C71.69 42.477 55.237 15.38 54.502 14.197c-1.187-2.028-.509-4.62 1.47-5.803 1.98-1.183 4.58-.563 5.824 1.465.17.281 15.039 24.788 34.148 44.281 19.901-20.281 34.205-43.887 34.375-44.169 1.187-2.028 3.788-2.647 5.823-1.464 1.979 1.183 2.657 3.774 1.47 5.802-.679 1.127-16.396 27.155-38.671 48.846-.849.732-1.923 1.183-2.997 1.183zM58.177 184.282c-.735 0-1.47-.169-2.205-.62-1.979-1.183-2.657-3.774-1.47-5.802.679-1.127 17.188-28.282 38.502-48.958 1.64-1.578 4.297-1.578 5.936 0 22.276 21.634 37.993 47.718 38.672 48.845 1.187 2.028.565 4.62-1.47 5.803-1.979 1.183-4.636.563-5.823-1.465-.17-.225-14.417-23.887-34.375-44.169-19.11 19.493-34.035 44.056-34.148 44.282a4.197 4.197 0 01-3.619 2.084z"/><path d="M187.59 89.295c-2.714 0-32.453-.169-61.739-7.775-2.205-.563-3.562-2.816-3.053-5.07 6.728-28.845 21.541-56.958 22.219-58.085 1.075-2.084 3.675-2.816 5.711-1.746 2.091 1.07 2.883 3.662 1.752 5.69-.113.282-13.512 25.634-20.41 52.056 27.647 6.536 55.124 6.48 55.689 6.536 2.318 0 4.241 1.859 4.241 4.225 0 2.366-1.866 4.225-4.241 4.225-.056-.056-.113-.056-.169-.056zM43.477 175.943a4.137 4.137 0 01-1.979-.507c-2.092-1.07-2.827-3.662-1.752-5.69.113-.225 13.06-24.676 20.24-52.112-26.516-6.198-55.18-6.31-55.69-6.31-2.374 0-4.296-1.916-4.296-4.226a4.227 4.227 0 014.24-4.225c1.414-.169 33.188 0 61.965 7.549 2.205.564 3.562 2.817 3.053 5.071-7.124 30.197-21.371 57.07-21.993 58.197-.791 1.408-2.261 2.253-3.788 2.253z"/><path d="M114.091 69.127a4.221 4.221 0 01-4.07-3.099c-8.029-28.507-8.594-60.225-8.594-61.577-.057-2.31 1.809-4.226 4.184-4.282h.056c2.318 0 4.184 1.86 4.241 4.169 0 .282.508 28.958 7.236 55.38 27.421-7.55 51.732-20.845 51.958-21.014 2.035-1.127 4.636-.394 5.767 1.634 1.13 2.028.395 4.62-1.64 5.746-1.131.62-27.873 15.268-58.063 22.874a3.856 3.856 0 01-1.075.169zM86.558 191.774c-2.318 0-4.184-1.859-4.24-4.169 0-.282-.452-27.887-7.463-55.38-26.403 7.324-51.618 21.07-51.844 21.183-2.036 1.127-4.636.394-5.767-1.634-1.131-2.028-.396-4.62 1.64-5.746 1.187-.62 29.116-15.888 57.95-23.043 2.261-.563 4.523.789 5.088 2.986 8.311 29.859 8.82 60.282 8.82 61.578.057 2.253-1.81 4.169-4.184 4.225zm-7.97-123.042a3.93 3.93 0 01-1.131-.169c-28.664-7.887-56.255-23.718-57.385-24.394a4.227 4.227 0 01-1.527-5.803c1.13-1.972 3.732-2.704 5.767-1.521.283.169 25.159 14.479 51.336 22.422C83.28 31.943 84.354 4.394 84.41 4.056c.113-2.31 2.148-4.225 4.41-4.056 2.318.056 4.183 2.028 4.07 4.394-.056 1.24-1.243 31.662-10.29 61.352-.508 1.803-2.204 2.986-4.013 2.986zM103.464 192h-.17c-2.318-.113-4.183-2.028-4.07-4.394.056-1.352 1.357-33.014 10.063-61.352.679-2.198 2.997-3.437 5.202-2.817 29.964 8.281 56.367 23.549 57.498 24.225a4.227 4.227 0 011.526 5.803 4.258 4.258 0 01-5.823 1.521c-.226-.169-24.198-13.972-51.449-22.197-7.293 26.253-8.48 54.929-8.537 55.211-.056 2.197-1.979 4-4.24 4z"/><path d="M4.41 88.901h-.226C1.866 88.901 0 86.986 0 84.676c0-2.31 1.866-4.113 4.24-4.225.057 0 29.06 0 55.746-6.141-7.067-27.493-19.958-51.944-20.07-52.17-1.131-2.084-.34-4.619 1.752-5.746 2.092-1.07 4.636-.281 5.71 1.747.622 1.126 14.813 28.056 21.823 58.253.51 2.254-.848 4.45-3.053 5.07-27.872 7.268-58.685 7.437-61.738 7.437zm144.056 87.156a4.225 4.225 0 01-3.732-2.254c-.621-1.183-15.378-29.296-22.049-58.141a4.193 4.193 0 013.053-5.014c30.134-7.718 60.721-7.605 61.908-7.662 2.318 0 4.24 1.916 4.24 4.226s-1.922 4.225-4.24 4.225h-.113c-1.809 0-28.721.113-55.633 6.366 6.841 26.366 20.184 51.831 20.297 52.057 1.075 2.084.283 4.619-1.752 5.69a4.14 4.14 0 01-1.979.507z"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h192v192H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

211
blog.html Normal file
View File

@ -0,0 +1,211 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/style.min.css" rel="stylesheet" />
<title>Waku</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
</head>
<body class="font-body overflow-x-hidden">
<header class="fixed inset-x-0 z-50 bg-white">
<div class="h-18 max-w-screen-xl flex justify-between items-center mx-auto px-6 py-4 md:h-26 md:py-8 xl:px-0">
<a id="header-logo" class="text-gray" href="/index">
<img src="assets/images/logo/logo.svg" alt="">
</a>
<nav id="nav" class="absolute flex items-center justify-end -z-1 top-0 left-0 h-screen w-full bg-gray pt-16 pr-16 transform -translate-y-full md:-translate-y-0 md:bg-white md:relative md:h-auto md:p-0 md:justify-center md:z-0">
<div class="text-pink md:hidden">
<img src="assets/images/logo/logo-nav-pink.svg" alt="">
</div>
<ul class="text-right text-white md:flex md:text-gray md:text-center">
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/index">Home</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/about">About</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/node">Try</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium font-bold text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/blog">Blog</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="">Support</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="">Specs</a></li>
</ul>
</nav>
<div id="social-box" class="hidden md:flex">
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/discord-dark.svg" alt="discord">
</a>
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/twitter-dark.svg" alt="twitter">
</a>
<a class="text-gray hover:text-blue" href="">
<img src="./assets/images/social/github-dark.svg" alt="github">
</a>
</div>
<div id="social-box-mobile" class="hidden">
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/discord-white.svg" alt="discord">
</a>
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/twitter-white.svg" alt="twitter">
</a>
<a class="text-gray hover:text-blue" href="">
<img src="./assets/images/social/github-white.svg" alt="github">
</a>
</div>
<div id="burger" class="flex flex-col justify-center items-center h-8 w-8 md:hidden">
<span class="block bg-gray w-7 h-0.5"></span>
<span class="block bg-gray w-7 h-0.5 my-2"></span>
<span class="block bg-gray w-7 h-0.5"></span>
</div>
</div>
</header>
<main class="pt-18 md:pt-26">
<!-- Hero -->
<section class="bg-green w-full">
<div class="relative container max-w-screen-xl mx-auto md:h-98 md:px-16 lg:px-0">
<a class="absolute top-4 left-8 hidden text-sm italic underline text-white mt-6 hover:underline lg:no-underline lg:flex lg:items-center xl:left-0" href="javascript:history.back();"><span class="block bg-link-arrow-white bg-left bg-no-repeat w-1.5 h-2 mr-1.5 transform rotate-180"></span>Back</a>
<div class="flex flex-col px-6 py-20 md:px-0 md:py-0 md:pt-30 lg:flex-row">
<div class="mb-10 md:mb-6 lg:w-4/12 lg:pl-32">
<h1 class="text-2xl text-white font-semibold text-center lg:max-w-2xl lg:text-left">Blog</h1>
</div>
<div class="lg:w-8/12">
<div class="lg:w-3/4">
<p class="text-base text-white font-semibold">We take inspiration from core internet architecture, existing survey work and other efforts that have been done to decompose the problem into orthogonal pieces.</p>
</div>
</div>
</div>
</div>
</section>
<div class="container max-w-screen-xl mx-auto">
<!-- Blog entries -->
<section class="px-6 mt-10 md:px-16 md:mt-20 lg:px-16 lg:mt-32 xl:px-0">
<div class="pb-10 md:pb-20 lg:flex lg:px-16 lg:pb-32 xl:px-32">
<div class="mb-10 md:mb-6 lg:mb-0 lg:w-1/5 lg:flex">
<h2 class="gufont-semibold leading-10 text-2xl text-center lg:text-left">Blog entries</h2>
</div>
<div class="lg:w-4/5 lg:pl-6 xl:pl-0">
<div class="grid grid-cols-1 gap-y-10 md:pl-3 md:grid-cols-2 md:gap-x-2 lg:gap-x-6">
<div>
<span class="block text-10 text-gray75">March 05, 2021</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">Privacy-preserving p2p economic spam protection in Waku v2</a>
</div>
<div>
<span class="block text-10 text-gray75">November 10, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">[Talk] Vac, Waku v2 and Ethereum Messaging</a>
</div>
<div>
<span class="block text-10 text-gray75">September 28, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">Waku v2 Update</a>
</div>
<div>
<span class="block text-10 text-gray75">July 01, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">What's the Plan for Waku v2?</a>
</div>
<div>
<span class="block text-10 text-gray75">July 01, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">What's the Plan for Waku v2?</a>
</div>
<div>
<span class="block text-10 text-gray75">March 05, 2021</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">Privacy-preserving p2p economic spam protection in Waku v2</a>
</div>
<div>
<span class="block text-10 text-gray75">November 10, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">[Talk] Vac, Waku v2 and Ethereum Messaging</a>
</div>
<div>
<span class="block text-10 text-gray75">September 28, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">Waku v2 Update</a>
</div>
<div>
<span class="block text-10 text-gray75">July 01, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">What's the Plan for Waku v2?</a>
</div>
<div>
<span class="block text-10 text-gray75">July 01, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">What's the Plan for Waku v2?</a>
</div>
<div>
<span class="block text-10 text-gray75">March 05, 2021</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">Privacy-preserving p2p economic spam protection in Waku v2</a>
</div>
<div>
<span class="block text-10 text-gray75">November 10, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">[Talk] Vac, Waku v2 and Ethereum Messaging</a>
</div>
<div>
<span class="block text-10 text-gray75">September 28, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">Waku v2 Update</a>
</div>
<div>
<span class="block text-10 text-gray75">July 01, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">What's the Plan for Waku v2?</a>
</div>
<div>
<span class="block text-10 text-gray75">July 01, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">What's the Plan for Waku v2?</a>
</div>
<div>
<span class="block text-10 text-gray75">July 01, 2020</span>
<a href="" class="text-sm font-semibold text-gray hover:text-blue hover:underline">What's the Plan for Waku v2?</a>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<footer class="w-full bg-gray text-white">
<div class="flex flex-row flex-wrap justify-between max-w-screen-xl mx-auto p-6 pb-20 md:grid md:grid-cols-footer-md md:gap-x-14 md:gap-y-10 md:px-16 md:pt-8 md:pb-10 xl:grid-cols-footer-xl xl:px-0 xl:pb-14 xl:pr-28 xl:pt-11">
<a class="block text-pink mr-9 order-1 md:m-0" href="index">
<img src="assets/images/logo/logo-pink.svg" alt="">
</a>
<div class="search-input order-2 w-footer-input md:w-full xl:order-4">
<h3 class="text-sm mb-3 font-semibold">Signup for updates</h3>
<form action="#">
<div class="flex items-center border-b border-white w-full">
<input class="bg-gray text-xs w-full" type="email" placeholder="your email">
<button class="h-6 w-4 bg-gray bg-link-arrow-white bg-center bg-no-repeat" type="submit"> </button>
</div>
</form>
</div>
<nav class="flex justify-between w-full mt-8 mb-14 order-3 md:order-4 md:my-0 xl:order-3 xl:pl-14">
<div>
<h3 class="text-sm mb-3 font-semibold">Resources</h3>
<ul class="grid grid-cols-1 text-white70 md:grid-cols-2 md:gap-x-6">
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="/about">About</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="">FAQ</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="">Specs</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="/node">Run a node</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="/blog">Blog</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://forum.vac.dev/">Forum</a></li>
<li><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://jobs.status.im/">Careers</a></li>
</ul>
</div>
<div>
<h3 class="text-sm mb-3 font-semibold">Social</h3>
<ul class="text-white70">
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://twitter.com/vacp2p">Twitter</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://discord.gg/ev9GQGJ9Dg">Discord</a></li>
<li><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/vacp2p/">GitHub</a></li>
</ul>
</div>
<div>
<h3 class="text-sm mb-3 font-semibold">Install</h3>
<ul class="text-white70">
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/status-im/go-waku">go-waku</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/status-im/nim-waku/">nim-waku</a></li>
<li><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/status-im/js-waku">js-waku</a></li>
</ul>
</div>
</nav>
<p class="text-sm leading-6 order-4 md:order-3 xl:order-2">Waku is a privacy-preserving, peer-to-peer messaging protocol designed for resource restricted devices.</p>
</div>
</footer>
<script src="./js/main.js"></script>
</body>
</html>

170560
css/style.min.css vendored Normal file

File diff suppressed because it is too large Load Diff

401
index.html Normal file
View File

@ -0,0 +1,401 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/style.min.css" rel="stylesheet" />
<title>Waku</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
</head>
<body class="font-body overflow-x-hidden">
<header class="fixed inset-x-0 z-50 bg-white">
<div class="h-18 max-w-screen-xl flex justify-between items-center mx-auto px-6 py-4 md:h-26 md:py-8 xl:px-0">
<a id="header-logo" class="text-gray" href="/index">
<img src="assets/images/logo/logo.svg" alt="">
</a>
<nav id="nav" class="absolute flex items-center justify-end -z-1 top-0 left-0 h-screen w-full bg-gray pt-16 pr-16 transform -translate-y-full md:-translate-y-0 md:bg-white md:relative md:h-auto md:p-0 md:justify-center md:z-0">
<div class="text-pink md:hidden">
<img src="./assets/images/logo/logo-nav-pink.svg" alt="Waku">
</div>
<ul class="text-right text-white md:flex md:text-gray md:text-center">
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium font-bold text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/index">Home</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/about">About</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/node">Try</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/blog">Blog</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="">Support</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="">Specs</a></li>
</ul>
</nav>
<div id="social-box" class="hidden md:flex">
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/discord-dark.svg" alt="discord">
</a>
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/twitter-dark.svg" alt="twitter">
</a>
<a class="text-gray hover:text-blue" href="">
<img src="./assets/images/social/github-dark.svg" alt="github">
</a>
</div>
<div id="social-box-mobile" class="hidden">
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/discord-white.svg" alt="discord">
</a>
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/twitter-white.svg" alt="twitter">
</a>
<a class="text-gray hover:text-blue" href="">
<img src="./assets/images/social/github-white.svg" alt="github">
</a>
</div>
<div id="burger" class="flex flex-col justify-center items-center h-8 w-8 md:hidden">
<span class="block bg-gray w-7 h-0.5"></span>
<span class="block bg-gray w-7 h-0.5 my-2"></span>
<span class="block bg-gray w-7 h-0.5"></span>
</div>
</div>
</header>
<main class="pt-18 md:pt-26">
<!-- Hero -->
<section class="bg-gray w-full">
<div class="relative container max-w-screen-xl mx-auto md:h-98 md:px-16 lg:px-0">
<div class="flex flex-col px-6 py-20 md:px-0 md:py-0 md:pt-28 lg:flex-row">
<div class="mb-10 md:mb-6 lg:w-4/12 lg:pl-32">
<div class="w-full h-full block"></div>
</div>
<div class="lg:w-8/12">
<div class="lg:w-3/4">
<h1 class="text-32 text-white max-w-2xl">Waku is the communication layer for Web3. Decentralized communication that scales. Private, secure, and it runs anywhere.</h1>
<a class="inline-block pl-3 mt-8 text-pink text-sm italic underline bg-link-arrow-pink bg-left bg-no-repeat lg:no-underline lg:mt-16 hover:underline" href="/node">Try Waku</a>
</div>
</div>
</div>
</div>
</section>
<div class="container max-w-screen-xl mx-auto">
<!-- What is WAKU -->
<section class="px-6 md:px-16 lg:px-16">
<div class="flex flex-col pt-20 pb-24 border-b-thin border-gray lg:flex-row lg:pt-48 lg:pb-32">
<div class="mb-10 md:mb-6 lg:mb-0 lg:w-4/12 md:pr-4 lg:pl-16 lg:pr-0">
<h2 class="text-2xl text-gray text-center font-semibold lg:max-w-2xl lg:text-left">What is Waku?</h2>
</div>
<div class="lg:w-8/12">
<p class="text-sm mb-8 leading-normal">Waku has its origins in the Whisper protocol, but optimized for scalability and better usability</p>
<p class="text-sm mb-8 leading-normal">Waku <b>removes centralized third parties</b> from our messaging, enabling private, secure, censorship-free communication. </p>
<p class="text-sm mb-8 leading-normal">Waku is designed for <b>generalized messaging</b>, enabling both human-to-human or machine-to-machine communication.</p>
<a class="inline-block text-blue text-sm underline italic pl-3 bg-link-arrow-blue bg-left bg-no-repeat lg:no-underline hover:underline" href="/about">Learn more about Waku</a>
</div>
</div>
</section>
<!-- How it works -->
<section class="px-6 md:px-16 lg:px-16">
<div class="flex flex-col pt-20 pb-24 border-b-thin border-gray lg:flex-row lg:pt-48 lg:pb-32">
<div class="mb-10 md:mb-6 lg:mb-0 lg:w-4/12 md:pr-4 lg:pl-16 lg:pr-0">
<h2 class="text-2xl text-gray text-center font-semibold lg:max-w-2xl lg:text-left">How does it work?</h2>
</div>
<div class="lg:w-8/12">
<p class="text-sm font-bold leading-6">Waku v1 is a fork of Whisper that primarily improves scalability.</p>
<p class="text-sm font-bold mb-8 leading-6">Waku v2 is a complete rewrite. Its relay protocol implements pub/sub over libp2p, and also introduces additional capabilities:</p>
<ul class="text-sm mb-8 leading-6 list-decimal pl-4">
<li>Retrieving historical messages for mostly-offline devices.</li>
<li>Adaptive nodes, allowing for heterogeneous nodes to contribute.</li>
<li>Bandwidth preservation for light nodes.</li>
</ul>
<p class="text-sm mb-8 leading-6">This makes it ideal for running a p2p protocol on mobile, or in other similarly resource restricted environments.</p>
<a class="inline-block text-blue text-sm italic underline pl-3 bg-link-arrow-blue bg-left bg-no-repeat lg:no-underline hover:underline" href="/about">Learn more about Waku</a>
</div>
</div>
</section>
<!-- Who is using Waku -->
<section class="px-6 md:px-16 lg:px-16">
<div class="flex flex-col pt-20 pb-24 lg:flex-row lg:pt-48 lg:pb-32">
<div class="mb-10 md:mb-6 md:pr-4 lg:mb-0 lg:w-4/12 lg:pl-16 lg:pr-6">
<h2 class="text-2xl text-gray text-center font-semibold lg:max-w-2xl lg:text-left">Who is using Waku?</h2>
</div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-3 lg:w-8/12 lg:gap-9">
<div>
<h3 class="font-semibold text-lg leading-10 mb-2">DApp Connect</h3>
<div>
<p class="text-sm leading-6">The communication layer for Ethereum. A tech stack enabling decentralized communication between DApps and people.</p>
<a class="inline-block text-sm text-blue underline italic pl-3 mt-6 bg-link-arrow-blue bg-left bg-no-repeat lg:no-underline hover:underline" href="">Visit DApp Connect</a>
</div>
</div>
<div>
<h3 class="font-semibold text-lg leading-10 mb-2">Status</h3>
<div>
<p class="text-sm leading-6">Status is a secure messaging app, crypto wallet, and Web3 browser built with state of the art technology.</p>
<a class="inline-block text-sm text-blue underline italic pl-3 mt-6 bg-link-arrow-blue bg-left bg-no-repeat lg:no-underline hover:underline" href="">Visit Status</a>
</div>
</div>
<div>
<h3 class="font-semibold text-lg leading-10 mb-2">WalletConnect</h3>
<div>
<p class="text-sm leading-6">WalletConnect v2 is using Waku v2 for decentralized messaging infrastructure.</p>
<a class="inline-block text-sm text-blue underline italic pl-3 mt-6 bg-link-arrow-blue bg-left bg-no-repeat lg:no-underline hover:underline" href="https://walletconnect.com/">Visit WalletConnect</a>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="grid grid-cols-1 grid-rows-3 md:grid-cols-2 md:grid-rows-2 lg:mt-24">
<div class="bg-green text-white py-12 px-8">
<div class="max-w-xs mx-auto">
<h2 class="text-center text-2xl leading-8 mb-6">nim-waku</h2>
<p class="text-sm leading-6">A nim implementation of the Waku v2 protocol. Reference client and flagship
implementation.</p>
<a class="inline-block text-sm italic underline pl-3 mt-6 bg-link-arrow-white bg-left bg-no-repeat lg:no-underline hover:underline"
href="">Install nim-waku</a>
</div>
</div>
<div class="bg-gray text-white py-12 px-8">
<div class="max-w-xs mx-auto">
<h2 class="text-center text-2xl leading-8 mb-6">js-waku</h2>
<p class="text-sm leading-6">A JS implementation to reach browser environments and optimized for interacting
with Dapps.</p>
<a class="inline-block text-sm underline italic pl-3 mt-6 bg-link-arrow-white bg-left bg-no-repeat lg:no-underline hover:underline"
href="">Install js-waku</a>
</div>
</div>
<div class="bg-blue text-white py-12 px-8">
<div class="max-w-xs mx-auto">
<h2 class="text-center text-2xl leading-8 mb-6">go-waku</h2>
<p class="text-sm leading-6">Subset of Waku v2 implemented to facilitate integration with Status mobile
app.</p>
<a class="inline-block text-sm underline italic pl-3 mt-6 bg-link-arrow-white bg-left bg-no-repeat lg:no-underline hover:underline"
href="">Install go-waku</a>
</div>
</div>
<div class="bg-pink text-gray py-12 px-8">
<div class="max-w-xs mx-auto">
<h2 class="text-center text-2xl leading-8 mb-6">Run a Waku node</h2>
<p class="text-sm leading-6">Remove centralized choke points from your communication and help decentralize
the Waku Network by running your own node.</p>
<a class="inline-block text-sm text-blue underline italic pl-3 mt-6 bg-link-arrow-blue bg-left bg-no-repeat lg:no-underline hover:underline"
href="">Node Quick Start Guide</a>
</div>
</div>
</section>
<!-- <div class="container max-w-screen-xl mx-auto">-->
<!-- &lt;!&ndash; team &ndash;&gt;-->
<!-- <section class="px-6 md:px-16 lg:px-16">-->
<!-- <div class="flex flex-col pt-20 pb-24 lg:flex-row lg:pt-48 lg:pb-32">-->
<!-- <div class="mb-10 md:pr-4 lg:w-4/12 lg:mb-0 lg:pl-16 lg:pr-0">-->
<!-- <h2 class="text-2xl text-gray text-center font-semibold lg:max-w-2xl lg:text-left">Team</h2>-->
<!-- </div>-->
<!-- <div class="grid grid-cols-2 gap-x-2.5 gap-y-14 lg:w-8/12 md:grid-cols-4">-->
<!-- &lt;!&ndash; Member &ndash;&gt;-->
<!-- <div class="flex flex-col items-center">-->
<!-- <div class="flex justify-center items-center bg-gray rounded-full w-16 h-16 mb-5">-->
<!-- <svg class="w-14 h-14 rounded-full text-white">-->
<!-- <use href="#logo"/>-->
<!-- </svg>-->
<!-- </div>-->
<!-- <h3 class="text-sm text-gray font-semibold text-center">Oskar Thoren</h3>-->
<!-- <div class="flex items-center mt-2">-->
<!-- <a class="inline-block text-gray hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#twitter"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- <a class="inline-block text-gray ml-6 hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#github"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; Member &ndash;&gt;-->
<!-- <div class="flex flex-col items-center">-->
<!-- <div class="flex justify-center items-center bg-gray rounded-full w-16 h-16 mb-5">-->
<!-- <svg class="w-14 h-14 rounded-full text-white">-->
<!-- <use href="#logo"/>-->
<!-- </svg>-->
<!-- </div>-->
<!-- <h3 class="text-sm text-gray font-semibold text-center">Dean Eigenmann</h3>-->
<!-- <div class="flex items-center mt-2">-->
<!-- <a class="inline-block text-gray hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#twitter"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- <a class="inline-block text-gray ml-6 hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#github"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; Member &ndash;&gt;-->
<!-- <div class="flex flex-col items-center">-->
<!-- <div class="flex justify-center items-center bg-gray rounded-full w-16 h-16 mb-5">-->
<!-- <svg class="w-14 h-14 rounded-full text-white">-->
<!-- <use href="#logo"/>-->
<!-- </svg>-->
<!-- </div>-->
<!-- <h3 class="text-sm text-gray font-semibold text-center">Jacek Sieka</h3>-->
<!-- <div class="flex items-center mt-2">-->
<!-- <a class="inline-block text-gray hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#github"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; Member &ndash;&gt;-->
<!-- <div class="flex flex-col items-center">-->
<!-- <div class="flex justify-center items-center bg-gray rounded-full w-16 h-16 mb-5">-->
<!-- <svg class="w-14 h-14 rounded-full text-white">-->
<!-- <use href="#logo"/>-->
<!-- </svg>-->
<!-- </div>-->
<!-- <h3 class="text-sm text-gray font-semibold text-center">Dimitriy Ryajov</h3>-->
<!-- <div class="flex items-center mt-2">-->
<!-- <a class="inline-block text-gray hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#twitter"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- <a class="inline-block text-gray ml-6 hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#github"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; Member &ndash;&gt;-->
<!-- <div class="flex flex-col items-center">-->
<!-- <div class="flex justify-center items-center bg-gray rounded-full w-16 h-16 mb-5">-->
<!-- <svg class="w-14 h-14 rounded-full text-white">-->
<!-- <use href="#logo"/>-->
<!-- </svg>-->
<!-- </div>-->
<!-- <h3 class="text-sm text-gray font-semibold text-center">Kim De Mey</h3>-->
<!-- <div class="flex items-center mt-2">-->
<!-- <a class="inline-block text-gray hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#github"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; Member &ndash;&gt;-->
<!-- <div class="flex flex-col items-center">-->
<!-- <div class="flex justify-center items-center bg-gray rounded-full w-16 h-16 mb-5">-->
<!-- <svg class="w-14 h-14 rounded-full text-white">-->
<!-- <use href="#logo"/>-->
<!-- </svg>-->
<!-- </div>-->
<!-- <h3 class="text-sm text-gray font-semibold text-center">Hanno Cornelius</h3>-->
<!-- <div class="flex items-center mt-2">-->
<!-- <a class="inline-block text-gray hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#github"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; Member &ndash;&gt;-->
<!-- <div class="flex flex-col items-center">-->
<!-- <div class="flex justify-center items-center bg-gray rounded-full w-16 h-16 mb-5">-->
<!-- <svg class="w-14 h-14 rounded-full text-white">-->
<!-- <use href="#logo"/>-->
<!-- </svg>-->
<!-- </div>-->
<!-- <h3 class="text-sm text-gray font-semibold text-center">Sanaz Teheri-Boshrooyeh</h3>-->
<!-- <div class="flex items-center mt-2">-->
<!-- <a class="inline-block text-gray hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#twitter"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- <a class="inline-block text-gray ml-6 hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#github"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; Member &ndash;&gt;-->
<!-- <div class="flex flex-col items-center">-->
<!-- <div class="flex justify-center items-center bg-gray rounded-full w-16 h-16 mb-5">-->
<!-- <svg class="w-14 h-14 rounded-full text-white">-->
<!-- <use href="#logo"/>-->
<!-- </svg>-->
<!-- </div>-->
<!-- <h3 class="text-sm text-gray font-semibold text-center">Corey Petty</h3>-->
<!-- <div class="flex items-center mt-2">-->
<!-- <a class="inline-block text-gray hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#twitter"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- <a class="inline-block text-gray ml-6 hover:text-blue" href="">-->
<!-- <svg class="w-6 h-6">-->
<!-- <use href="#github"/>-->
<!-- </svg>-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- </div>-->
</main>
<footer class="w-full bg-gray text-white">
<div class="flex flex-row flex-wrap justify-between max-w-screen-xl mx-auto p-6 pb-20 md:grid md:grid-cols-footer-md md:gap-x-14 md:gap-y-10 md:px-16 md:pt-8 md:pb-10 xl:grid-cols-footer-xl xl:px-0 xl:pb-14 xl:pr-28 xl:pt-11">
<a class="block text-pink mr-9 order-1 md:m-0" href="index">
<img src="assets/images/logo/logo-pink.svg" alt="">
</a>
<div class="search-input order-2 w-footer-input md:w-full xl:order-4">
<h3 class="text-sm mb-3 font-semibold">Signup for updates</h3>
<form action="#">
<div class="flex items-center border-b border-white w-full">
<input class="bg-gray text-xs w-full" type="email" placeholder="your email">
<button class="h-6 w-4 bg-gray bg-link-arrow-white bg-center bg-no-repeat" type="submit"> </button>
</div>
</form>
</div>
<nav class="flex justify-between w-full mt-8 mb-14 order-3 md:order-4 md:my-0 xl:order-3 xl:pl-14">
<div>
<h3 class="text-sm mb-3 font-semibold">Resources</h3>
<ul class="grid grid-cols-1 text-white70 md:grid-cols-2 md:gap-x-6">
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="/about">About</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="">FAQ</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="">Specs</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="/node">Run a node</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="/blog">Blog</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://forum.vac.dev/">Forum</a></li>
<li><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://jobs.status.im/">Careers</a></li>
</ul>
</div>
<div>
<h3 class="text-sm mb-3 font-semibold">Social</h3>
<ul class="text-white70">
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://twitter.com/vacp2p">Twitter</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://discord.gg/ev9GQGJ9Dg">Discord</a></li>
<li><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/vacp2p/">GitHub</a></li>
</ul>
</div>
<div>
<h3 class="text-sm mb-3 font-semibold">Install</h3>
<ul class="text-white70">
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/status-im/go-waku">go-waku</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/status-im/nim-waku/">nim-waku</a></li>
<li><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/status-im/js-waku">js-waku</a></li>
</ul>
</div>
</nav>
<p class="text-sm leading-6 order-4 md:order-3 xl:order-2">Waku is a privacy-preserving, peer-to-peer messaging protocol designed for resource restricted devices.</p>
</div>
</footer>
<script src="./js/main.js"></script>
</body>
</html>

1
js/main.js Normal file
View File

@ -0,0 +1 @@
const nav=document.querySelector("#nav"),burger=document.querySelector("#burger"),social=document.querySelector("#social-box"),socialMobile=document.querySelector("#social-box-mobile"),logo=document.querySelector("#header-logo");function handleHeader(){social.classList.toggle("social--visible"),socialMobile.classList.toggle("social-mobile--visible"),logo.classList.toggle("logo--hidden"),burger.classList.toggle("burger--active"),nav.classList.toggle("nav--active")}burger.addEventListener("click",handleHeader);

310
node.html Normal file
View File

@ -0,0 +1,310 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/style.min.css" rel="stylesheet" />
<title>Waku</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
</head>
<body class="font-body overflow-x-hidden">
<header class="fixed inset-x-0 z-50 bg-white">
<div class="h-18 max-w-screen-xl flex justify-between items-center mx-auto px-6 py-4 md:h-26 md:py-8 xl:px-0">
<a id="header-logo" class="text-gray" href="/index">
<img src="assets/images/logo/logo.svg" alt="">
</a>
<nav id="nav" class="absolute flex items-center justify-end -z-1 top-0 left-0 h-screen w-full bg-gray pt-16 pr-16 transform -translate-y-full md:-translate-y-0 md:bg-white md:relative md:h-auto md:p-0 md:justify-center md:z-0">
<div class="text-pink md:hidden">
<svg class="w-60 h-60 transform -translate-x-6">
<use href="#logo"/>
</svg>
</div>
<ul class="text-right text-white md:flex md:text-gray md:text-center">
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/index">Home</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/about">About</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium font-bold text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/node">Try</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="/blog">Blog</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="">Support</a></li>
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-medium text-2xl md:text-xs md:hover:underline md:hover:text-blue" href="">Specs</a></li>
</ul>
</nav>
<div id="social-box" class="hidden md:flex">
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/discord-dark.svg" alt="discord">
</a>
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/twitter-dark.svg" alt="twitter">
</a>
<a class="text-gray hover:text-blue" href="">
<img src="./assets/images/social/github-dark.svg" alt="github">
</a>
</div>
<div id="social-box-mobile" class="hidden">
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/discord-white.svg" alt="discord">
</a>
<a class="text-gray mr-6 hover:text-blue" href="">
<img src="./assets/images/social/twitter-white.svg" alt="twitter">
</a>
<a class="text-gray hover:text-blue" href="">
<img src="./assets/images/social/github-white.svg" alt="github">
</a>
</div>
<div id="burger" class="flex flex-col justify-center items-center h-8 w-8 md:hidden">
<span class="block bg-gray w-7 h-0.5"></span>
<span class="block bg-gray w-7 h-0.5 my-2"></span>
<span class="block bg-gray w-7 h-0.5"></span>
</div>
</div>
</header>
<main class="pt-18 md:pt-26">
<!-- Hero -->
<section class="bg-blue w-full">
<div class="relative container max-w-screen-xl mx-auto md:h-98 md:px-16 lg:px-0">
<a class="absolute top-4 left-8 hidden text-sm italic underline text-white mt-6 hover:underline lg:no-underline lg:flex lg:items-center xl:left-0" href="javascript:history.back();"><span class="block bg-link-arrow-white bg-left bg-no-repeat w-1.5 h-2 mr-1.5 transform rotate-180"></span>Back</a>
<div class="flex flex-col px-6 py-20 md:px-0 md:py-0 md:pt-30 lg:flex-row">
<div class="mb-10 md:mb-6 lg:w-4/12 lg:pl-32 xl:pl-32">
<h1 class="text-2xl text-white font-semibold text-center lg:max-w-2xl lg:text-left">Run a node</h1>
</div>
<div class="lg:w-8/12">
<div class="lg:w-3/4">
<p class="text-base text-white font-semibold mb-5 md:mb-9">By running your own node you provide additional nodes for the Status community. We encourage anyone to publish the enode addresses of their nodes for others to use.</p>
<p class="text-base text-white font-semibold">We also recommend running them as a permanent service or a docker container, so that it keeps running after system restart or a runtime node error.</p>
</div>
</div>
</div>
</div>
</section>
<div class="container max-w-screen-xl mx-auto">
<!-- Types of nodes -->
<section class="px-6 md:px-16 lg:px-16 xl:px-0">
<div class="flex flex-col pt-20 pb-24 border-b-thin border-gray lg:flex-row lg:pt-48 lg:pb-32">
<div class="mb-10 md:mb-6 lg:mb-0 lg:w-4/12 md:pr-4 lg:pl-32 lg:pr-0">
<h2 class="text-2xl text-gray text-center font-semibold lg:max-w-2xl lg:text-left">Types of node</h2>
</div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:w-8/12 lg:gap-9">
<div>
<h3 class="text-sm font-semibold text-gray mb-4">relay node</h3>
<p class="text-sm text-gray leading-7">A regular Waku Node which relays messages between nodes, including mobile or desktop clients.</p>
</div>
<div>
<h3 class="text-sm font-semibold text-gray mb-4">history node</h3>
<p class="text-sm text-gray leading-7">Also known as a Mailserver, stores historical messages and delivers them when queried. Around 1 GB of free space would be a start for storing last 30 days.</p>
</div>
</div>
</div>
</section>
<!-- Running A Status Node -->
<section class="px-6 md:px-16 lg:px-16 lg:pb-35 lg:mb-48 xl:px-0">
<div class="flex flex-col pt-20 pb-24 lg:flex-row lg:pt-32 lg:pb-14">
<div class="mb-10 md:mb-6 lg:mb-0 lg:w-4/12 md:pr-4 lg:pl-32">
<h2 class="text-2xl text-gray text-center font-semibold lg:max-w-2xl lg:text-left lg:w-40">Running a status node</h2>
</div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:w-8/12 lg:gap-x-16 lg:pr-24 xl:gap-x-40">
<div>
<p class="text-sm text-gray font-semibold leading-7 mb-10 md:text-center">
Status Node is a modified <span class="text-blue">go-ethereum</span> node called <span class="text-blue">status-go</span> running on a server and supporting the Status app.
As we operate in a decentralized model, we need multiple peers scattered around the globe to provide a reliable service.
</p>
</div>
<div>
<p class="text-sm text-gray font-semibold leading-7 md:text-center">
When correctly configured a Status Node supports relaying Waku messages - helps propagate them between nodes
- and storing them for devices that were offline when it was sent.
</p>
</div>
</div>
</div>
</section>
<!-- Requirements -->
<section class="px-6 mb-20 md:px-16 lg:flex lg:px-32 lg:mb-32">
<div class="mb-6 md:mb-0 lg:max-w-lg">
<h2 class="font-semibold leading-10 text-2xl text-center text-gray mb-10 md:text-left lg:mb-4">Requirements</h2>
<p class="text-sm text-gray leading-7 mb-10 text-justify">A machine running Linux or MacOS is required. It is entirely possible to run a Status Node on a physical machine in a local network, but for full functionality it would require a public and static IP address via which the service can be accessed.</p>
<p class="text-sm text-gray leading-7 mb-10 text-justify">An alternative would be to use a <span class="text-blue">cloud service provider</span> which would provide you with a public and static IP out of the box in most cases. Using a cloud service would also provide you with the high uptime necessary to collect as many envelopes as possible for later retrieval.</p>
<p class="text-sm text-gray font-semibold leading-7 text-justify">A single instance with 1GB of RAM and 1 vCPU should be enough to run Status Node reliably.</p>
</div>
<div class="mt-6 md:px-11 lg:px-0 lg:pl-14 lg:max-w-xl">
<div class="bg-gray px-4 py-6 md:p-8 lg:py-12">
<p class="text-sm text-white mb-2.5 leading-9">
In terms of software the minimum would include <span class="inline-block bg-black py-1 px-2 rounded leading-none">make</span> and <span class="inline-block bg-black py-1 px-2 rounded leading-none">jq</span>.<br>
If you want to build <span class="inline-block bg-black py-1 px-2 rounded leading-none">status-go</span> you will also need <span class="inline-block bg-black py-1 px-2 rounded leading-none">golang</span>,
version 1.13 or higher. A nice-to-have is <span class="inline-block bg-black py-1 px-2 rounded leading-none">qrencode</span>
to display a QR Code with your <span class="inline-block bg-black py-1 px-2 rounded leading-none">enode://</span> adress.
</p>
<div class="mx-auto mt-10 pt-10 border-t border-grayDark">
<p class="text-sm text-white text-center mb-4 leading-7">For Ubuntu <span class="inline-block bg-black py-1 px-2 mx-2 rounded leading-none">20.04</span> you can just do:</p>
<div class="px-7">
<div class="text-sm text-white leading-7 bg-black p-4 rounded text-justify">
<span class="text-blue02">sudo</span> apt install make jq golang qrencode
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Ports -->
<section class="px-6 mb-20 lg:px-32 lg:mb-32">
<h2 class="font-semibold leading-10 text-2xl text-center text-gray mb-10">Ports</h2>
<div class="grid grid-cols-1 gap-y-4 md:grid-cols-3 md:gap-x-4 lg:gap-12">
<div class="flex flex-col items-center bg-pink p-4">
<h3 class="font-special text-sm w-max bg-black py-1 px-2 mx-2 mb-4 text-white rounded leading-none">30303</h3>
<p class="text-sm text-gray text-center leading-7 mb-4">TCP - JSON RPC management port. </p>
<p class="text-sm text-gray leading-7 font-semibold pl-7 bg-eye-open-black bg-left bg-no-repeat">Must ALWAYS be public.</p>
</div>
<div class="flex flex-col items-center bg-green p-4">
<h3 class="font-special text-sm w-max bg-black py-1 px-2 mx-2 mb-4 text-white rounded leading-none">8545</h3>
<p class="text-sm text-white text-center leading-7 mb-4">TCP/UDP - DevP2P wire protocol port.</p>
<p class="text-sm text-white leading-7 font-semibold pl-7 bg-eye-close-white bg-left bg-no-repeat">Must ALWAYS be public.</p>
</div>
<div class="flex flex-col items-center bg-blue p-4">
<h3 class="font-special text-sm w-max bg-black py-1 px-2 mx-2 mb-4 text-white rounded leading-none">9090</h3>
<p class="text-sm text-white text-center leading-7 mb-4">TCP - Prometheus metrics port.</p>
<p class="text-sm text-white leading-7 font-semibold pl-7 bg-eye-close-white bg-left bg-no-repeat">Should not be public.</p>
</div>
</div>
</section>
<!-- Quick Start -->
<section class="px-6 mb-20 md:px-16 lg:mb-32">
<div class="pb-20 border-b border-gray lg:pb-32">
<h2 class="font-semibold leading-10 text-2xl text-center text-gray mb-10">Quick Start</h2>
<div class="max-w-3xl mx-auto">
<p class="text-sm text-gray text-center font-semibold leading-7">
The quickest way to start a node is using our Makefile scripts. You can read about that <a class="text-blue" href="">here</a>.
</p>
<p class="text-sm text-gray text-center font-semibold leading-7 mb-6">
In simple terms you clone the <a class="text-blue" href="">status-go</a> repo and run:
</p>
<div class="flex flex-col items-center md:flex-row md:justify-center">
<span class="text-sm inline-block bg-black font-special text-white p-4 rounded leading-none">make run-mailserver-docker</span>
<span class="text-sm my-2 md:my-0 md:mx-6">or</span>
<span class="text-sm inline-block bg-black font-special text-white p-4 rounded leading-none">make run-mailserver-systemd</span>
</div>
</div>
</div>
</section>
<!-- Build -->
<section class="px-6 mb-10 md:px-16 md:mb-12 lg:px-32">
<div class="border-gray300 md:border-b md:pb-12 md:flex md:justify-between">
<div>
<h2 class="font-semibold leading-10 text-2xl text-gray mb-4">Building</h2>
<p class="mb-5 text-sm text-gray leading-7">First youll have to build a <span class="inline-block bg-black py-1 px-2 rounded leading-none text-white font-special">20.04</span> binary.</p>
</div>
<div class="md:w-22 md:min-w-22r lg:w-34r lg:min-w-34r">
<div class="bg-black rounded p-4">
<p class="text-sm text-white leading-7">mkdir ~/go/src/github.com/status-im</p>
<p class="text-sm text-white leading-7">git clone https://github.com/status-im/status-go</p>
<p class="text-sm text-white leading-7">~/go/src/github.com/status-im/status-go</p>
<p class="text-sm text-white leading-7">cd ~/go/src/github.com/status-im/status-go</p>
<p class="text-sm text-white leading-7">make statusgo</p>
</div>
</div>
</div>
</section>
<!-- Running -->
<section class="px-6 mb-10 md:px-16 md:mb-12 lg:px-32">
<div class="border-gray300 md:border-b md:pb-12 md:flex md:justify-between">
<div class="max-w-14-5r lg:w-6/12 xl:max-w-none">
<h2 class="font-semibold leading-10 text-2xl text-gray mb-4">Running</h2>
<p class="mb-5 text-sm text-gray leading-7">You can check the available options using the <span class="inline-block bg-black py-1 px-2 rounded leading-none text-white font-special">-h</span> / <span class="inline-block bg-black py-1 px-2 rounded leading-none text-white font-special">--help</span> flags</p>
</div>
<div class="md:w-22 md:min-w-22r lg:w-34r lg:min-w34r lg:p-0">
<div class="bg-black rounded p-4">
<pre><code class="font-body text-white text-sm leading-7">./build/bin/statusd -h</code></pre>
</div>
</div>
</div>
</section>
<!-- Configuration -->
<section class="px-6 mb-10 md:px-16 md:mb-12 lg:mb-32 lg:px-32">
<div class="md:flex md:justify-between">
<div class="max-w-14-5r lg:w-6/12 xl:max-w-none">
<h2 class="font-semibold leading-10 text-2xl text-gray mb-4">Configuration</h2>
<p class="mb-5 text-sm text-gray leading-7">The configuration is provided as a JSON file. A basic config that will let you run a Waku node that also stores historical messages would look like this: <span class="inline-block bg-black py-1 px-2 rounded leading-none text-white font-special">./config.json</span></p>
</div>
<div class="md:w-22 md:min-w-22r lg:w-34r lg:min-w34r lg:p-0">
<div class="bg-black rounded p-4">
<pre class="block"><code class="font-body text-white text-sm leading-7">
{
<span class="text-red">"AdvertiseAddr"</span>: <span class="text-yellow">"< YOUR_PUBLIC_IP >"</span>,
<span class="text-red">"ListenAddr"</span>: <span class="text-yellow">"0.0.0.0:30303"</span>,
<span class="text-red">"HTTPEnabled"</span>: <span class="text-purple">true</span>,
<span class="text-red">"HTTPHost"</span>: <span class="text-yellow">"127.0.0.1"</span>,
<span class="text-red">"HTTPPort"</span>: <span class="text-purple">8545</span>,
<span class="text-red">"APIModules"</span>: <span class="text-yellow">"eth,net,web3,admin,mailserver"</span>,
<span class="text-red">"RegisterTopics"</span>: [<span class="text-yellow">"whispermail"</span>],
<span class="text-red">"WakuConfig"</span>: {
<span class="text-red">"Enabled"</span>: <span class="text-purple">true</span>,
<span class="text-red">"EnableMailServer"</span>: <span class="text-purple">true</span>,
<span class="text-red">"DataDir"</span>: <span class="text-yellow">"/var/tmp/statusd/waku"</span>,
<span class="text-red">"MailServerPassword"</span>: <span class="text-yellow">"status-offline-inbox"</span>
}
}</code>
</pre>
</div>
</div>
</div>
</section>
</div>
</main>
<footer class="w-full bg-gray text-white">
<div class="flex flex-row flex-wrap justify-between max-w-screen-xl mx-auto p-6 pb-20 md:grid md:grid-cols-footer-md md:gap-x-14 md:gap-y-10 md:px-16 md:pt-8 md:pb-10 xl:grid-cols-footer-xl xl:px-0 xl:pb-14 xl:pr-28 xl:pt-11">
<a class="block text-pink mr-9 order-1 md:m-0" href="index">
<img src="assets/images/logo/logo-pink.svg" alt="">
</a>
<div class="search-input order-2 w-footer-input md:w-full xl:order-4">
<h3 class="text-sm mb-3 font-semibold">Signup for updates</h3>
<form action="#">
<div class="flex items-center border-b border-white w-full">
<input class="bg-gray text-xs w-full" type="email" placeholder="your email">
<button class="h-6 w-4 bg-gray bg-link-arrow-white bg-center bg-no-repeat" type="submit"> </button>
</div>
</form>
</div>
<nav class="flex justify-between w-full mt-8 mb-14 order-3 md:order-4 md:my-0 xl:order-3 xl:pl-14">
<div>
<h3 class="text-sm mb-3 font-semibold">Resources</h3>
<ul class="grid grid-cols-1 text-white70 md:grid-cols-2 md:gap-x-6">
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="/about">About</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="">FAQ</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="">Specs</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="/node">Run a node</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="/blog">Blog</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://forum.vac.dev/">Forum</a></li>
<li><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://jobs.status.im/">Careers</a></li>
</ul>
</div>
<div>
<h3 class="text-sm mb-3 font-semibold">Social</h3>
<ul class="text-white70">
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://twitter.com/vacp2p">Twitter</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://discord.gg/ev9GQGJ9Dg">Discord</a></li>
<li><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/vacp2p/">GitHub</a></li>
</ul>
</div>
<div>
<h3 class="text-sm mb-3 font-semibold">Install</h3>
<ul class="text-white70">
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/status-im/go-waku">go-waku</a></li>
<li class="mb-4"><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/status-im/nim-waku/">nim-waku</a></li>
<li><a class="text-sm leading-6 hover:underline hover:text-blue" href="https://github.com/status-im/js-waku">js-waku</a></li>
</ul>
</div>
</nav>
<p class="text-sm leading-6 order-4 md:order-3 xl:order-2">Waku is a privacy-preserving, peer-to-peer messaging protocol designed for resource restricted devices.</p>
</div>
</footer>
<script src="./js/main.js"></script>
</body>
</html>