mirror of https://github.com/vacp2p/waku-site.git
Grid sections
This commit is contained in:
Pawel
parent
9a53b2ee4a
commit
f0f5a58459
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M49.1706 9.25208C43.8204 6.21769 38.6207 3.26878 33.421 0.319861C32.5401 -0.171625 31.6806 -0.0861493 30.8212 0.405337C21.3241 5.83305 11.8271 11.2394 2.35162 16.6671C2.05081 16.8381 1.77149 17.3295 1.77149 17.6714C1.75 28.5055 1.72851 39.3182 1.79297 50.1309C1.79297 50.836 2.33013 51.8404 2.91027 52.1823C8.02404 55.1953 13.2023 58.0801 18.3805 61.0077C18.4235 61.029 18.5094 61.0077 18.7458 61.0077C18.7458 60.6017 18.7458 60.1743 18.7458 59.7683C18.7458 49.1265 18.7673 38.5062 18.7243 27.8644C18.7243 26.8601 19.0896 26.39 19.906 25.9412C29.4245 20.5563 38.9215 15.1499 48.4185 9.74357C48.6119 9.63672 48.8268 9.48714 49.1706 9.25208Z" fill="#242424"/>
|
||||
<path d="M40.7046 63.9999C40.7046 63.5084 40.7046 63.1024 40.7046 62.7178C40.7046 55.2814 40.7261 47.845 40.6831 40.3872C40.6831 39.4256 40.9624 38.9128 41.8219 38.4427C48.4397 34.7458 55.0146 30.9849 61.6109 27.2454C61.9332 27.0744 62.234 26.8821 62.6208 26.647C62.4489 26.4974 62.3414 26.3692 62.191 26.2837C57.8937 23.8263 53.575 21.3903 49.2992 18.8901C48.0315 18.1422 46.9357 18.1208 45.625 18.8687C39.222 22.5656 32.7761 26.1983 26.3302 29.831C25.6211 30.2156 25.4062 30.6644 25.4062 31.455C25.4277 38.8701 25.4277 46.2637 25.4062 53.6787C25.4062 54.7899 25.75 55.666 26.7384 56.2216C31.1861 58.7432 35.6123 61.2433 40.06 63.7649C40.2104 63.8504 40.4038 63.8931 40.7046 63.9999Z" fill="#242424"/>
|
||||
<path d="M62.7495 51.584C57.5713 48.6351 52.5864 45.8144 47.4727 42.9082C47.4727 48.7419 47.4727 54.3833 47.4727 60.2598C52.5435 57.375 57.5283 54.5543 62.7495 51.584Z" fill="#242424"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="61" height="64" fill="white" transform="translate(1.75)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g style="mix-blend-mode:luminosity">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 32C0 14.3269 14.3263 0 31.9994 0C49.6726 0 64 14.3269 64 32C64 49.6731 49.6726 64 31.9994 64C14.3263 64 0 49.6731 0 32ZM32.1684 30.5978L32.1665 30.5976V30.5964C30.5537 30.4284 28.9409 30.2616 26.9573 30.3713C26.0061 30.4239 24.9965 30.5587 24.0373 30.7816C24.621 23.7256 29.8143 17.5496 36.8755 17.1587C41.208 16.9176 45.5381 19.4913 45.7739 23.6696C46.0051 27.7759 42.7498 30.5233 37.3769 30.8216C35.394 30.9313 33.7817 30.7646 32.1684 30.5978ZM26.7547 45.6993C22.65 45.921 18.5476 43.561 18.3256 39.7313L18.3244 39.7324C18.1069 35.9679 21.1894 33.4502 26.2796 33.177C28.1591 33.0753 29.6872 33.2284 31.2153 33.3827L31.253 33.3865C32.7697 33.5372 34.2881 33.6882 36.151 33.5884C37.0529 33.5393 38.0087 33.417 38.9175 33.2113C38.3647 39.6799 33.4462 45.3404 26.7547 45.6993Z" fill="white"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 989 B |
104
index.html
104
index.html
|
|
@ -7,7 +7,7 @@
|
|||
<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,400;0,700;1,500&family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
<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">
|
||||
<header class="flex justify-between items-center px-6 py-4 bg-white">
|
||||
|
|
@ -21,45 +21,95 @@
|
|||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<!-- Hero -->
|
||||
<div class="container max-w-screen-xl mx-auto">
|
||||
<section class="flex flex-col items-center bg-gray py-8 px-6 md:flex-row md:px-16 py-20 lg:px-32 lg:py-36">
|
||||
<div class="mb-10 min-w-max md:mb-0 md:mr-12 lg:mr-32">
|
||||
<img src="./img/symbol-pink.svg" alt="">
|
||||
</div>
|
||||
<div class="lg:max-w-2xl">
|
||||
<h1 class="font-special font-medium text-white text-2xl">
|
||||
<span class="text-pink font-bold">Waku</span> is a modular, privacy-preserving, peer-to-peer messaging protocol designed for resource restricted devices.
|
||||
</h1>
|
||||
<a class="block pl-3 mt-8 text-blue text-xs lg:mt-16" href="">Try WAKU</a>
|
||||
</div>
|
||||
</section>
|
||||
<!-- What is waku -->
|
||||
<section class="bg-pink py-10 px-6 md:flex md:p-0">
|
||||
<div class="flex items-center justify-center md:w-4/12 md:bg-white md:justify-start md:pl-16 lg:pl-32">
|
||||
<h2 class="font-special text-2xl md:w-28">What is Waku?</h2>
|
||||
<!-- Hero -->
|
||||
<section class="flex flex-col items-center bg-gray py-8 px-6 md:flex-row md:px-16 py-20 lg:px-32 lg:py-36">
|
||||
<div class="mb-10 min-w-max md:mb-0 md:mr-12 lg:mr-32">
|
||||
<img src="./img/symbol-pink.svg" alt="">
|
||||
</div>
|
||||
<div class="mt-10 md:w-8/12 md:px-16 md:py-11 md:mt-0 lg:px-28">
|
||||
<div class="lg:max-w-2xl">
|
||||
<h1 class="font-special font-medium text-white text-2xl">
|
||||
<span class="text-pink font-bold">Waku</span> is a modular, privacy-preserving, peer-to-peer messaging protocol designed for resource restricted devices.
|
||||
</h1>
|
||||
<a class="inline-block pl-3 mt-8 text-blue text-xs lg:mt-16 hover:underline" href="">Try WAKU</a>
|
||||
</div>
|
||||
</section>
|
||||
<!-- What is waku -->
|
||||
<section class="bg-pink py-10 px-6 text-gray md:flex md:p-0 lg:mb-32">
|
||||
<div class="flex items-center justify-center md:w-4/12 md:bg-white md:justify-start md:pl-16 lg:pl-32">
|
||||
<h2 class="font-special font-semibold text-2xl leading-10 md:w-28">What is Waku?</h2>
|
||||
</div>
|
||||
<div class="mt-10 md:w-8/12 md:px-16 md:py-11 md:mt-0 lg:px-28 lg:py-20">
|
||||
<p class="text-sm mb-8 leading-relaxed md:max-w-sm lg:max-w-none">Waku is a fork of the p2p Whisper protocol designed for <b>greater scalability.</b> </p>
|
||||
<p class="text-sm mb-8 leading-relaxed md:max-w-sm lg:max-w-none">Waku is a gossip based protocol that <b>removes centralized third parties</b> from our messaging and enables private, secure, censorship communication. </p>
|
||||
<p class="text-sm mb-8 leading-relaxed md:max-w-sm lg:max-w-none">Waku is designed for <b>generalized messaging,</b> enabling both human-to-human or machine-to-machine communication.</p>
|
||||
<a class="block text-blue text-xs pl-3" href="">Learn more about Waku</a>
|
||||
<a class="inline-block text-blue text-xs pl-3 hover:underline" href="">Learn more about Waku</a>
|
||||
</div>
|
||||
</section>
|
||||
<!-- How it works -->
|
||||
<section class="py-10 px-6 md:flex md:p-0">
|
||||
<section class="py-20 px-6 mb-4 text-gray md:flex md:p-0 lg:mb-32">
|
||||
<div class="flex items-center justify-center md:justify-start md:w-4/12 md:pl-16 lg:pl-32">
|
||||
<h2 class="font-special text-2xl md:w-28">How it works?</h2>
|
||||
<h2 class="font-special font-semibold leading-10 text-2xl md:w-28">How it works?</h2>
|
||||
</div>
|
||||
<div class="mt-10 md:w-8/12 md:pr-16 md:py-11 md:mt-0">
|
||||
<div class="mt-10 md:w-8/12 md:pr-16 md:py-11 md:mt-0 lg:py-2">
|
||||
<p class="text-sm font-bold mb-8 leading-relaxed">Waku implements PubSub over libp2p and adds capabilities on top of it. These capabilities are:</p>
|
||||
<ul class="text-sm mb-8 leading-relaxed">
|
||||
<li>1. Retrieving historical messages for mostly-offline devices.</li>
|
||||
<li>2. Adaptive nodes, allowing for heterogeneous nodes to contribute.</li>
|
||||
<li>3. Bandwidth preservation for light nodes. This makes it ideal for running a p2p protocol on mobile and in similarly restricted environments.</li>
|
||||
<ul class="text-sm mb-8 leading-relaxed 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. This makes it ideal for running a p2p protocol on mobile and in similarly restricted environments.</li>
|
||||
</ul>
|
||||
<p class="text-sm mb-8 leading-relaxed md:max-w-sm lg:max-w-none">This makes it ideal for running a p2p protocol on mobile and in similarly restricted environments.</p>
|
||||
<a class="block text-blue text-xs pl-3" href="">Learn more about Waku</a>
|
||||
<a class="inline-block text-blue text-xs pl-3 hover:underline" href="">Learn more about Waku</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grid grid-cols-1 grid-rows-3 gap-y-5 px-6 mb-24 md:px-16 lg:grid-cols-3 lg:grid-rows-1 lg:gap-x-5 lg:mb-32 xl:px-0">
|
||||
<div class="bg-blue text-white py-12 px-8">
|
||||
<h2 class="font-special font-bold text-center text-2xl leading-8 mb-6">go work</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-xs pl-3 mt-6 hover:underline" href="">Install go waku</a>
|
||||
</div>
|
||||
<div class="bg-green text-white py-12 px-8">
|
||||
<h2 class="font-special font-bold 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-xs pl-3 mt-6 hover:underline" href="">Install nim-waku</a>
|
||||
</div>
|
||||
<div class="bg-gray text-white py-12 px-8">
|
||||
<h2 class="font-special font-bold 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-xs pl-3 mt-6 hover:underline" href="">Install js-waku</a>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Run a Waku node -->
|
||||
<section class="px-6 mb-20 md:px-16 lg:mb-32 xl:px-0">
|
||||
<div class="flex flex-col items-center text-gray border-b border-gray pb-20 lg:pb-32">
|
||||
<h2 class="font-special font-semibold text-2xl leading-8 mb-6">Run a Waku node</h2>
|
||||
<p class="font-semibold text-sm text-center leading-7 max-w-lg">Remove centralized choke points from your communication and help decentralize the Waku Network by running your own node.</p>
|
||||
<a class="inline-block text-blue text-xs pl-3 mt-7 hover:underline" href="">Node Quick Start Guide</a>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Who is using Waku? -->
|
||||
<section class="px-6 mb-4 lg:flex md:px-16 lg:mb-32 lg:px-0">
|
||||
<div class="flex items-center justify-center lg:justify-start lg:pl-16 lg:pl-32 lg:w-4/12">
|
||||
<h2 class="font-special text-center text-gray font-semibold text-2xl leading-10 lg:w-40 lg:text-left">Who is using Waku?</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 grid-rows-2 gap-y-5 mt-10 md:mt-8 md:grid-cols-2 md:grid-rows-1 md:gap-x-5 lg:mt-0 lg:pr-28 lg:w-8/12">
|
||||
<div class="flex flex-col items-center bg-pink py-12 px-8 text-gray">
|
||||
<img src="./img/icon/dapp-logo.svg" alt="">
|
||||
<h3 class="font-special font-bold text-2xl leading-8 mb-6 mt-10">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-xs pl-3 mt-6 hover:underline" href="">Visit DApp Connect</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center bg-blue py-12 px-8 text-white">
|
||||
<img src="./img/icon/status-logo.svg" alt="">
|
||||
<h3 class="font-special font-bold text-2xl leading-8 mb-6 mt-10">Status</h3>
|
||||
<div>
|
||||
<p class="text-sm leading-6">Status leverages Waku as the messaging protocol to enable peer-to-peer messaging between people, groups, and communities.</p>
|
||||
<a class="inline-block text-xs pl-3 mt-6 hover:underline" href="">Visit Status</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@
|
|||
"build": "NODE_ENV=production gulp css",
|
||||
"build-images": "gulp images"
|
||||
},
|
||||
"keywords": [
|
||||
"tailwindcss",
|
||||
"boilerplate",
|
||||
"gulp",
|
||||
"postcss",
|
||||
"browsersync",
|
||||
"imagemin"
|
||||
],
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.2.4",
|
||||
"browser-sync": "^2.26.14",
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@ module.exports = {
|
|||
'md': '768px',
|
||||
'lg': '1024px',
|
||||
'xl': '1340px',
|
||||
'2xl': '1700px'
|
||||
'2xl': '1400px',
|
||||
'3xl': '1700px'
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue