waku.org/about.html

221 lines
14 KiB
HTML

<!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="https://rfc.vac.dev/spec/10/">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="https://rfc.vac.dev/spec/10/">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>