mirror of https://github.com/vacp2p/waku-site.git
Header menu, links, sections max-width
This commit is contained in:
Pawel
parent
f0f5a58459
commit
ec806469ef
17342
assets/css/styles.css
17342
assets/css/styles.css
File diff suppressed because it is too large
Load Diff
BIN
img/arrow.png
BIN
img/arrow.png
Binary file not shown.
|
Before Width: | Height: | Size: 222 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0.5L0 8.5L6 4.5L0 0.5Z" fill="#242424"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 152 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="7" height="9" viewBox="0 0 7 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.273438 0.5L0.273438 8.5L6.27344 4.5L0.273438 0.5Z" fill="#3A71F9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 179 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="6" height="9" viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0.5L0 8.5L6 4.5L0 0.5Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 150 B |
78
index.html
78
index.html
|
|
@ -10,14 +10,44 @@
|
|||
<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">
|
||||
<a href="">
|
||||
<img src="./img/logo.svg" alt="">
|
||||
</a>
|
||||
<div class="flex flex-col justify-center items-center h-8 w-8">
|
||||
<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>
|
||||
<header class="relative z-50">
|
||||
<div class="max-w-screen-xl flex justify-between items-center mx-auto px-6 py-4 bg-white md:py-8 lg:px-0">
|
||||
<a href="">
|
||||
<img src="./img/logo.svg" alt="">
|
||||
</a>
|
||||
<nav class="absolute flex items-center justify-end -z-1 top-0 left-0 h-screen w-full bg-blue pt-16 pr-16 md:bg-white md:relative md:h-auto md:p-0 md:justify-center md:z-0">
|
||||
<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-special font-medium text-2xl md:font-body md:text-xs md:hover:underline md:hover:text-blue" href="">Home</a></li>
|
||||
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-special font-medium text-2xl md:font-body md:text-xs md:hover:underline md:hover:text-blue" href="">About</a></li>
|
||||
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-special font-medium text-2xl md:font-body md:text-xs md:hover:underline md:hover:text-blue" href="">Try</a></li>
|
||||
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-special font-medium text-2xl md:font-body md:text-xs md:hover:underline md:hover:text-blue" href="">Blog</a></li>
|
||||
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-special font-medium text-2xl md:font-body md:text-xs md:hover:underline md:hover:text-blue" href="">Team</a></li>
|
||||
<li class="mb-8 md:w-16 md:mb-0 lg:w-24"><a class="font-special font-medium text-2xl md:font-body 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-special font-medium text-2xl md:font-body md:text-xs md:hover:underline md:hover:text-blue" href="">Specs</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="hidden md:flex">
|
||||
<a class="text-gray mr-6 hover:text-blue" href="">
|
||||
<svg class="fill-current" width="17" height="16" viewBox="0 0 17 16" fill="none">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.91602 0C13.3343 0 16.916 3.58173 16.916 8C16.916 12.4183 13.3343 16 8.91602 16C4.49774 16 0.916016 12.4183 0.916016 8C0.916016 3.58173 4.49774 0 8.91602 0ZM5.95621 12.2212C5.95621 12.2212 6.35922 11.7728 6.64917 11.3774C5.25253 10.982 4.72597 10.191 4.72597 10.191C6.17809 11.0888 7.53429 11.4343 8.91602 11.3894C10.2977 11.4342 11.6539 11.0888 13.1059 10.191C13.1059 10.191 12.5795 10.982 11.1827 11.3774C11.4728 11.7729 11.8756 12.2212 11.8756 12.2212C13.8349 12.178 14.8134 11.1899 15.1344 10.8657C15.2059 10.7935 15.2448 10.7542 15.2546 10.7658C15.2546 7.50176 13.6699 4.84403 13.6699 4.84403C12.2518 3.82643 10.9304 3.78413 10.6779 3.77885L10.5168 3.93178C12.327 4.43798 13.2026 5.22896 13.2026 5.22896C11.6489 4.47853 10.1845 4.21456 8.91602 4.19875C7.64747 4.21475 6.18322 4.47853 4.62942 5.22896C4.62942 5.22896 5.50501 4.43798 7.31525 3.93178L7.1541 3.77885C6.90162 3.78413 5.58021 3.8263 4.1621 4.84403C4.1621 4.84403 2.57749 7.5017 2.57749 10.7658C2.58728 10.7542 2.62614 10.7935 2.69765 10.8657L2.69766 10.8657C3.01858 11.1898 3.99704 12.178 5.95621 12.2212ZM10.8665 7.49128V7.486C11.4788 7.486 11.973 7.99224 11.973 8.61445C11.973 9.23665 11.4788 9.74293 10.8665 9.74293C10.2541 9.74293 9.75986 9.23669 9.75986 8.61973C9.75986 7.99746 10.2594 7.49128 10.8665 7.49128ZM6.96642 7.49103V7.48575C6.35404 7.48575 5.85986 7.99196 5.85986 8.6142C5.85986 9.23644 6.35407 9.74268 6.96642 9.74268C7.57878 9.74268 8.07302 9.23644 8.07302 8.61948C8.07302 7.99727 7.57343 7.49103 6.96642 7.49103Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="text-gray mr-6 hover:text-blue" href="">
|
||||
<svg class="fill-current" width="19" height="16" viewBox="0 0 19 16" fill="none">
|
||||
<path d="M18.9673 2.4033C18.296 2.69776 17.5807 2.89294 16.835 2.98771C17.6022 2.52966 18.1877 1.80986 18.463 0.942274C17.7477 1.36874 16.958 1.66997 16.1163 1.83807C15.4371 1.11489 14.4691 0.666992 13.4131 0.666992C11.3643 0.666992 9.71489 2.32997 9.71489 4.36863C9.71489 4.66197 9.73971 4.94402 9.80063 5.21253C6.72402 5.06248 4.00166 3.58792 2.17284 1.34166C1.85355 1.89561 1.66627 2.52966 1.66627 3.21222C1.66627 4.49386 2.32627 5.62997 3.31007 6.28771C2.7155 6.27643 2.13222 6.10381 1.63807 5.83191C1.63807 5.8432 1.63807 5.85786 1.63807 5.87253C1.63807 7.67089 2.92084 9.16463 4.60299 9.50873C4.30176 9.59109 3.97345 9.63058 3.63273 9.63058C3.39581 9.63058 3.15663 9.61704 2.93212 9.5674C3.41161 11.0329 4.77222 12.1104 6.39007 12.1454C5.13099 13.1303 3.53232 13.7237 1.80166 13.7237C1.49817 13.7237 1.20709 13.7102 0.916016 13.6729C2.5553 14.7301 4.49807 15.3337 6.59314 15.3337C13.403 15.3337 17.1261 9.69263 17.1261 4.80299C17.1261 4.6394 17.1204 4.48145 17.1125 4.32463C17.847 3.8034 18.4641 3.15243 18.9673 2.4033Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="text-gray hover:text-blue" href="">
|
||||
<svg class="fill-current" width="17" height="16" viewBox="0 0 17 16" fill="none">
|
||||
<path d="M8.91502 0C4.49802 0 0.935345 3.6724 0.959189 8.20264C0.97826 11.826 3.28644 14.9 6.47215 15.9856C6.87255 16.0611 7.01722 15.8079 7.01607 15.5903C7.01505 15.3953 7.00533 14.8795 6.99773 14.1953C4.77534 14.6906 4.29694 13.0954 4.29694 13.0954C3.92895 12.1477 3.40263 11.8955 3.40263 11.8955C2.67295 11.3869 3.454 11.3971 3.454 11.3971C4.25731 11.4553 4.68345 12.2427 4.68345 12.2427C5.40405 13.4958 6.56115 13.1342 7.01604 12.9239C7.08525 12.3938 7.29035 12.0323 7.51827 11.827C5.74117 11.6197 3.86947 10.9161 3.85293 7.77372C3.84822 6.87809 4.15636 6.14585 4.66534 5.57191C4.58125 5.3646 4.30286 4.53024 4.73192 3.40177C4.73192 3.40177 5.40276 3.18118 6.93634 4.24225C7.57339 4.06047 8.25691 3.96958 8.93789 3.96652C9.61691 3.9706 10.3024 4.06047 10.9423 4.24327C12.4638 3.1822 13.1359 3.40279 13.1359 3.40279C13.5779 4.53229 13.3083 5.36562 13.2273 5.57294C13.7434 6.14688 14.0562 6.87911 14.0609 7.77474C14.0775 10.9253 12.2112 11.6187 10.4302 11.8219C10.7186 12.0752 10.9772 12.5756 10.9812 13.3405C10.987 14.4373 10.9817 15.3217 10.9831 15.5903C10.9842 15.8099 11.1296 16.0652 11.5351 15.9845C14.7044 14.8979 16.9783 11.825 16.9592 8.20264C16.9353 3.6724 13.334 0 8.91502 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div 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>
|
||||
|
|
@ -31,27 +61,27 @@
|
|||
<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>
|
||||
<a class="inline-block pl-3 mt-8 text-blue text-xs bg-link-arrow-blue bg-left bg-no-repeat 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">
|
||||
<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 xl:w-3/12">
|
||||
<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">
|
||||
<div class="mt-10 md:w-8/12 md:px-16 md:py-11 md:mt-0 lg:px-28 lg:py-20 xl:w-9/12">
|
||||
<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="inline-block text-blue text-xs pl-3 hover:underline" href="">Learn more about Waku</a>
|
||||
<a class="inline-block text-blue text-xs pl-3 bg-link-arrow-blue bg-left bg-no-repeat hover:underline" href="">Learn more about Waku</a>
|
||||
</div>
|
||||
</section>
|
||||
<!-- How it works -->
|
||||
<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">
|
||||
<div class="flex items-center justify-center md:justify-start md:w-4/12 md:pl-16 lg:pl-32 xl:w-3/12">
|
||||
<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 lg:py-2">
|
||||
<div class="mt-10 md:w-8/12 md:pr-16 md:py-11 md:mt-0 lg:py-2 xl:w-9/12">
|
||||
<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 list-decimal pl-4">
|
||||
<li>Retrieving historical messages for mostly-offline devices.</li>
|
||||
|
|
@ -59,7 +89,7 @@
|
|||
<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="inline-block text-blue text-xs pl-3 hover:underline" href="">Learn more about Waku</a>
|
||||
<a class="inline-block text-blue text-xs pl-3 bg-link-arrow-blue bg-left bg-no-repeat hover:underline" href="">Learn more about Waku</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -67,17 +97,17 @@
|
|||
<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>
|
||||
<a class="inline-block text-xs pl-3 mt-6 bg-link-arrow-white bg-left bg-no-repeat 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>
|
||||
<a class="inline-block text-xs pl-3 mt-6 bg-link-arrow-white bg-left bg-no-repeat 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>
|
||||
<a class="inline-block text-xs pl-3 mt-6 bg-link-arrow-white bg-left bg-no-repeat hover:underline" href="">Install js-waku</a>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Run a Waku node -->
|
||||
|
|
@ -85,21 +115,21 @@
|
|||
<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>
|
||||
<a class="inline-block text-blue text-xs pl-3 mt-7 bg-link-arrow-blue bg-left bg-no-repeat 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">
|
||||
<div class="flex items-center justify-center lg:justify-start lg:pl-16 lg:pl-32 lg:w-4/12 xl:w-3/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="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 xl:w-9/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>
|
||||
<a class="inline-block text-xs pl-3 mt-6 bg-link-arrow-black bg-left bg-no-repeat hover:underline" href="">Visit DApp Connect</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center bg-blue py-12 px-8 text-white">
|
||||
|
|
@ -107,7 +137,7 @@
|
|||
<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>
|
||||
<a class="inline-block text-xs pl-3 mt-6 bg-link-arrow-white bg-left bg-no-repeat hover:underline" href="">Visit Status</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,18 @@ module.exports = {
|
|||
'2xl': '1400px',
|
||||
'3xl': '1700px'
|
||||
},
|
||||
extend: {},
|
||||
extend: {
|
||||
backgroundImage: theme => ({
|
||||
'link-arrow-black': "url('/img/arrow/arrow-black.svg')",
|
||||
'link-arrow-blue': "url('/img/arrow/arrow-blue.svg')",
|
||||
'link-arrow-white': "url('/img/arrow/arrow-white.svg')",
|
||||
}),
|
||||
zIndex: {
|
||||
'-1':'-1',
|
||||
'-2':'-2',
|
||||
'-3':'-3',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
|
|
|
|||
Loading…
Reference in New Issue