vacp2p/wakuconnect.dev
1
0
Fork 0
mirror of https://github.com/vacp2p/wakuconnect.dev.git synced 2025-02-28 19:10:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Pawel eth master (#10)

Browse Source 
Co-authored-by: Pawel <Pawel@Tests-MacBook-Air.local>
Co-authored-by: Paweł Rzepiński <pawel@TPL013-PR-MBA8.local>
Co-authored-by: Paweł Rzepiński <pawel.r@ethworks.io>
Co-authored-by: pawelEth <80252264+pawelEth@users.noreply.github.com>
This commit is contained in:
F 2021-12-10 16:21:05 +11:00 committed by GitHub
parent 782960d95e
commit b9cc17c2ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 117833 additions and 263346 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -3,15 +3,15 @@
1. Install the dependencies: 1. Install the dependencies:
```bash ```bash
# npm # yarn
npm install yarn install
``` ```
2. Start the development server: 2. Start the development server:
```bash ```bash
# Using gulp # gulp
npm run dev gulp
``` ```
Now you should be able to see the project running at [localhost:3000](http://localhost:3000). Now you should be able to see the project running at [localhost:3000](http://localhost:3000).
@ -21,7 +21,7 @@
## For production ## For production
```bash ```bash
# Using gulp # gulp
npm run build gulp build
``` ```

18753
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "dapp-connect", "name": "@dappconnect/dappconnect.dev",
"version": "1.0.0", "version": "1.0.0",
"description": "DApp Connect - landing page", "description": "DApp Connect - landing page",
"main": "src/index.html", "main": "src/index.html",

356402
src/css/style.min.css vendored
View File

File diff suppressed because it is too large Load Diff

18
src/css/styles.css
View File

@ -27,4 +27,22 @@
#code br { #code br {
content: ""; content: "";
@apply block mt-0 @apply block mt-0
}
#code .tight {
margin: 0 -3px;
}
#code .tight-left {
margin-left: -4px;
}
#typewriter:after {
content: '|';
animation: blink 400ms linear infinite alternate;
}
@keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
} }

136
src/index.html
View File

@ -33,13 +33,13 @@
<nav class="mb-auto"> <nav class="mb-auto">
<ul class="md:flex"> <ul class="md:flex">
<li class="items-center menu-item relative mb-8 cursor-pointer md:flex md:m-0 md:py-2"> <li class="items-center menu-item relative mb-8 cursor-pointer md:flex md:m-0 md:py-2">
<a class="inline-block font-special font-bold text-xs mb-4 md:m-0" href="">Docs</a> <a class="inline-block font-special font-bold text-xs mb-4 md:m-0" href="https://docs.dappconnect.dev/">Docs</a>
<img class="hidden transform duration-200 rotate-90 ml-2 md:block" src="assets/images/arrow/arrow-black.svg" alt=""> <img class="hidden transform duration-200 rotate-90 ml-2 md:block" src="assets/images/arrow/arrow-black.svg" alt="">
<ul class="bg-rectangle102 md:absolute md:top-full md:left-2/4 md:transform md:-translate-x-2/4 md:p-4 md:shadow md:hidden"> <ul class="bg-rectangle102 md:absolute md:top-full md:left-2/4 md:transform md:-translate-x-2/4 md:p-4 md:shadow md:hidden">
<li class="mb-4 md:my-0 md:mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Quick Start</a></li> <li class="mb-4 md:my-0 md:mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://docs.dappconnect.dev/quick_start.html">Quick Start</a></li>
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Guides</a></li> <li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://docs.dappconnect.dev/guides/index.html">Guides</a></li>
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Docs</a></li> <li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://docs.dappconnect.dev/">Docs</a></li>
<li><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">GitHub</a></li> <li><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://github.com/status-im/?q=dappconnect&type=&language=&sort=">GitHub</a></li>
</ul> </ul>
</li> </li>
<li class="menu-item md:m-0 cursor-pointer mb-8 md:mb-0 md:mx-16 md:py-2"> <li class="menu-item md:m-0 cursor-pointer mb-8 md:mb-0 md:mx-16 md:py-2">
@ -50,13 +50,14 @@
<img class="hidden transform duration-200 rotate-90 ml-2 md:block" src="assets/images/arrow/arrow-black.svg" alt=""> <img class="hidden transform duration-200 rotate-90 ml-2 md:block" src="assets/images/arrow/arrow-black.svg" alt="">
<ul class="bg-rectangle102 md:absolute md:top-full md:left-2/4 md:transform md:-translate-x-2/4 md:p-4 md:shadow md:hidden"> <ul class="bg-rectangle102 md:absolute md:top-full md:left-2/4 md:transform md:-translate-x-2/4 md:p-4 md:shadow md:hidden">
<li class="my-4 md:my-0 md:mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">About us</a></li> <li class="my-4 md:my-0 md:mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">About us</a></li>
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Careers</a></li> <li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://status.im/our_team/jobs.html">Careers</a></li>
<li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Blog</a></li> <li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://vac.dev/research-log/">Blog</a></li>
<li><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Forum</a></li> <li class="mb-4"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://forum.vac.dev/">Forum</a></li>
<li><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="https://discord.gg/NgQERkYbHD">Discord</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
<button class="border border-rectangle97 font-bold text-xs py-3 px-6 md:hidden">Get Started</button> <a href="https://docs.dappconnect.dev/quick_start.html" class="border border-rectangle97 font-bold text-xs py-3 px-6 md:hidden">Get Started</a>
</nav> </nav>
<div class="flex items-center justify-center mt-6 md:hidden"> <div class="flex items-center justify-center mt-6 md:hidden">
<a href=""> <a href="">
@ -77,7 +78,7 @@
</div> </div>
</div> </div>
</div> </div>
<button class="hidden border border-rectangle97 font-bold text-xs py-3 px-6 transition-colors duration-200 hover:bg-rectangle97 hover:text-rectangle102 md:block ">Get Started</button> <a href="https://docs.dappconnect.dev/quick_start.html" class="hidden border border-rectangle97 font-bold text-xs py-3 px-6 transition-colors duration-200 hover:bg-rectangle97 hover:text-rectangle102 md:block ">Get Started</a>
<button id="burger" class="relative flex flex-col justify-center items-center w-12 h-12 md:hidden"> <button id="burger" class="relative flex flex-col justify-center items-center w-12 h-12 md:hidden">
<span id="line-top" class="block w-6 h-0.5 bg-rectangle97"></span> <span id="line-top" class="block w-6 h-0.5 bg-rectangle97"></span>
<span id="line-middle" class="block w-6 h-0.5 bg-rectangle97 my-1.5"></span> <span id="line-middle" class="block w-6 h-0.5 bg-rectangle97 my-1.5"></span>
@ -91,8 +92,8 @@
<section class="py-10 mb-10 border-b border-grey md:pl-20 lg:flex lg:justify-center lg:py-26 lg:mb-26"> <section class="py-10 mb-10 border-b border-grey md:pl-20 lg:flex lg:justify-center lg:py-26 lg:mb-26">
<div class="max-w-lg md:max-w-2xl"> <div class="max-w-lg md:max-w-2xl">
<h1 class="text-title md:text-3.5xl">Empower your dApp with decentralized communication</h1> <h1 class="text-title md:text-3.5xl">Empower your dApp with decentralized communication</h1>
<p class="text-sm italic my-8 opacity-75 max-w-31 sm:pr-7">DappConnect gives you the tools to seamlessly enable your project with off-chain communication for decentralized, private, and secure messaging.</p> <p class="text-sm italic my-8 opacity-75 max-w-31 sm:pr-7">DappConnect seamlessly enhances your project with off-chain communication for decentralized, private, and secure messaging.</p>
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="" >See the docs</a> <a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="https://docs.dappconnect.dev/" >See the docs</a>
</div> </div>
</section> </section>
<!-- Grid section --> <!-- Grid section -->
@ -101,30 +102,76 @@
<div class="grid grid-cols-1 gap-16 md:grid-cols-3 md:gap-4 lg:px-35 lg:gap-22"> <div class="grid grid-cols-1 gap-16 md:grid-cols-3 md:gap-4 lg:px-35 lg:gap-22">
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="assets/images/photo1.svg" alt="Private and Secure by Design"> <img src="assets/images/photo1.svg" alt="Private and Secure by Design">
<h3 class="font-bold text-sm text-center leading-6 my-4">Private and Secure by Design</h3> <h3 class="font-bold text-sm text-center leading-6 my-4">Private and secure by design</h3>
<p class="text-sm text-center leading-6 opacity-75">Leveraging peer-to-peer messaging protocols and tools for strong end-to-end encryption, DappConnect is designed to protect your users.</p> <p class="text-sm text-center leading-6 opacity-75">DappConnect leverages peer-to-peer messaging protocols and strong end-to-end encryption to protect your users.</p>
</div> </div>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="assets/images/photo2.svg" alt="Decentralized Messaging"> <img src="assets/images/photo2.svg" alt="Decentralized Messaging">
<h3 class="font-bold text-sm text-center leading-6 my-4">Decentralized Messaging</h3> <h3 class="font-bold text-sm text-center leading-6 my-4">Decentralized messaging</h3>
<p class="text-sm text-center leading-6 opacity-75">Adopt DappConnect to protect your users from censorship and remove the need for centralized infrastructure.</p> <p class="text-sm text-center leading-6 opacity-75">Protect your users from censorship, and remove the weaknesses of centralized infrastructure.</p>
</div> </div>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="assets/images/photo3.svg" alt="dApp Ready"> <img src="assets/images/photo3.svg" alt="dApp Ready">
<h3 class="font-bold text-sm text-center leading-6 my-4">dApp Ready</h3> <h3 class="font-bold text-sm text-center leading-6 my-4">dApp ready</h3>
<p class="text-sm text-center leading-6 opacity-75">Optimized for mobile and web platforms, DappConnect can be used by any project built on Ethereum or other blockchains. </p> <p class="text-sm text-center leading-6 opacity-75">Optimized for mobile and web platforms, DappConnect can be used by any project built on Ethereum or other blockchains.</p>
</div> </div>
</div> </div>
</section> </section>
<!-- section code --> <!-- section code -->
<section id="sectionCode" class="border-b border-grey pb-10 mb-10 md:border-0 lg:border-b lg:flex lg:justify-between lg:px-28 lg:pb-25 lg:mb-25"> <section id="sectionCode" class="border-b border-grey pb-10 mb-10 md:border-0 lg:border-b lg:flex lg:justify-between lg:px-28 lg:pb-25 lg:mb-25">
<div class="mb-11 md:mb-15 lg:max-w-xs"> <div class="mb-11 md:mb-15 lg:max-w-xs">
<h2 class="font-bold text-sm leading-6 whitespace-nowrap mb-4">Get started with DappConnect in Minutes</h2> <h2 class="font-bold text-sm leading-6 whitespace-nowrap mb-4">Get started with DappConnect in minutes</h2>
<p class="text-sm leading-6 italic opacity-75 mb-7">The simple API allows you to introduce decentralized, private, secure communication in your application in minutes.</p> <p class="text-sm leading-6 italic opacity-75 mb-7">The simple API allows you to introduce decentralized, private, secure communication to your application in minutes.</p>
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="" >Get started</a> <a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="" >Get started</a>
<h1 class="testArea"></h1>
</div> </div>
<div id="code" class="bg-rectangle97 p-4 md:px-8 lg:max-w-code lg:w-full lg:p-8 lg:h-96"> <div id="code" class="bg-rectangle97 p-4 md:px-8 lg:max-w-code lg:w-full lg:p-8 lg:h-96">
<div id="testText" class="text-sm font-special"></div>
<span class="text-sm font-special text-red">import</span>
<span class="text-sm font-special text-rectangle102">{</span>
<span class="text-sm font-special text-orange">Waku</span>
<span class="text-sm font-special text-rectangle102 tight-left">,</span>
<span class="text-sm font-special text-orange">WakuMessage</span>
<span class="text-sm font-special text-rectangle102">}</span>
<span class="text-sm font-special text-red">from</span>
<span class="text-sm font-special text-rectangle98">'js-waku'</span>
<span class="text-sm font-special text-rectangle102 tight-left">;</span>
<br><br>
<span class="text-sm font-special text-red">const</span>
<span class="text-sm font-special text-rectangle102">waku</span>
<span class="text-sm font-special text-blueLight">=</span>
<span class="text-sm font-special text-red">await</span>
<span class="text-sm font-special text-orange">Waku</span>
<span class="text-sm font-special text-rectangle102 tight">.</span>
<span class="text-sm font-special text-violet">create</span>
<span class="text-sm font-special text-rectangle102">({</span>
<span class="text-sm font-special text-blueLight">relay</span>
<span class="text-sm font-special text-rectangle102 tight-left">:</span>
<span class="text-sm font-special text-blueLight">true</span>
<span class="text-sm font-special text-rectangle102"> </span>
<span class="text-sm font-special text-rectangle102">});</span>
<br><br>
<span class="text-sm font-special text-red">const</span>
<span class="text-sm font-special text-rectangle102">msg</span>
<span class="text-sm font-special text-blueLight">=</span>
<span class="text-sm font-special text-red">await</span>
<span class="text-sm font-special text-orange">WakuMessage</span>
<span class="text-sm font-special text-rectangle102 tight">.</span>
<span class="text-sm font-special text-violet">fromUtf8String</span>
<span class="text-sm font-special text-rectangle102">(</span>
<br><br>
<span class="text-sm font-special text-rectangle98 pl-4">'I am using a decentralized network for messaging',</span>
<br><br>
<span class="text-sm font-special text-rectangle98 pl-4">'/my-cool-app/1/my-use-case/proto'</span>
<br><br>
<span class="text-sm font-special text-rectangle102">);</span>
<br><br>
<span class="text-sm font-special text-red">await</span>
<span class="text-sm font-special text-rectangle102">waku.</span>
<span class="text-sm font-special text-blueLight tight-left">relay</span>
<span class="text-sm font-special text-rectangle102 tight">.</span>
<span class="text-sm font-special text-violet">send</span>
<span class="text-sm font-special text-rectangle102 tight-left">(msg);</span>
</div> </div>
</section> </section>
<!-- Use Cases --> <!-- Use Cases -->
@ -157,7 +204,7 @@
<section class="lg:px-28"> <section class="lg:px-28">
<div class="flex flex-col items-center mb-11 xl:mb-26"> <div class="flex flex-col items-center mb-11 xl:mb-26">
<h2 class="font-bold text-sm text-center leading-6 whitespace-nowrap mb-4">Built with Waku</h2> <h2 class="font-bold text-sm text-center leading-6 whitespace-nowrap mb-4">Built with Waku</h2>
<p class="text-sm text-center leading-6 italic opacity-75 mb-7 md:max-w-32.5">Waku is a suite of protocols designed for private, secure, decentralized messaging. The communication layer for Web3.</p> <p class="text-sm text-center leading-6 italic opacity-75 mb-7 md:max-w-32.5">Waku is a suite of protocols designed for private, secure, and decentralized messaging. Waku is the communication layer for Web3.</p>
<a class="text-blue text-xs text-center font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="">Learn more about Waku</a> <a class="text-blue text-xs text-center font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 hover:underline" href="">Learn more about Waku</a>
</div> </div>
<div class="grid grid-cols-1 gap-6 mb-20 md:grid-cols-3 xl:gap-26"> <div class="grid grid-cols-1 gap-6 mb-20 md:grid-cols-3 xl:gap-26">
@ -196,32 +243,39 @@
<svg width="33" height="32" viewBox="0 0 33 32" fill="none"> <svg width="33" height="32" viewBox="0 0 33 32" fill="none">
<path d="M32.2485 6.11174C31.0521 6.63195 29.7858 6.97584 28.4889 7.13272C29.8537 6.31485 30.8728 5.0282 31.3574 3.51145C30.0749 4.27728 28.6694 4.81685 27.202 5.10672C26.2146 4.04199 24.9034 3.33325 23.4741 3.09165C22.0448 2.85006 20.5782 3.08927 19.3044 3.77178C18.0305 4.45428 17.0215 5.54148 16.4354 6.86285C15.8494 8.18423 15.7196 9.66504 16.0664 11.073C13.4644 10.9415 10.9164 10.2642 8.58778 9.08511C6.25917 7.90606 4.20206 6.25164 2.5501 4.22932C1.97971 5.23461 1.68321 6.37308 1.69007 7.53154C1.69369 8.60736 1.96329 9.667 2.47485 10.6161C2.98641 11.5652 3.72407 12.3743 4.62214 12.9714C3.58182 12.9431 2.56241 12.664 1.65061 12.1578L1.65103 12.2376C1.66676 13.745 2.20265 15.2034 3.16805 16.3661C4.13346 17.5289 5.46911 18.3246 6.94909 18.6187C6.38089 18.7919 5.7905 18.8832 5.19569 18.8899C4.78391 18.8851 4.37297 18.8477 3.96673 18.7782C4.39457 20.0749 5.21527 21.2081 6.31464 22.0201C7.41401 22.8321 8.73736 23.2826 10.1006 23.3088C7.8084 25.1199 4.97187 26.1083 2.04314 26.1165C1.5099 26.1182 0.976899 26.0863 0.447338 26.0208C3.44777 27.9515 6.9379 28.9764 10.4973 28.972C12.9537 28.9975 15.388 28.5333 17.6579 27.6066C19.9279 26.6798 21.9881 25.3091 23.7181 23.5744C25.4482 21.8397 26.8134 19.7759 27.734 17.5034C28.6547 15.231 29.1123 12.7955 29.0801 10.3392C29.0787 10.068 29.0772 9.78087 29.0757 9.49372C30.3226 8.56019 31.3962 7.41576 32.2485 6.11174Z" fill="#132644"/> <path d="M32.2485 6.11174C31.0521 6.63195 29.7858 6.97584 28.4889 7.13272C29.8537 6.31485 30.8728 5.0282 31.3574 3.51145C30.0749 4.27728 28.6694 4.81685 27.202 5.10672C26.2146 4.04199 24.9034 3.33325 23.4741 3.09165C22.0448 2.85006 20.5782 3.08927 19.3044 3.77178C18.0305 4.45428 17.0215 5.54148 16.4354 6.86285C15.8494 8.18423 15.7196 9.66504 16.0664 11.073C13.4644 10.9415 10.9164 10.2642 8.58778 9.08511C6.25917 7.90606 4.20206 6.25164 2.5501 4.22932C1.97971 5.23461 1.68321 6.37308 1.69007 7.53154C1.69369 8.60736 1.96329 9.667 2.47485 10.6161C2.98641 11.5652 3.72407 12.3743 4.62214 12.9714C3.58182 12.9431 2.56241 12.664 1.65061 12.1578L1.65103 12.2376C1.66676 13.745 2.20265 15.2034 3.16805 16.3661C4.13346 17.5289 5.46911 18.3246 6.94909 18.6187C6.38089 18.7919 5.7905 18.8832 5.19569 18.8899C4.78391 18.8851 4.37297 18.8477 3.96673 18.7782C4.39457 20.0749 5.21527 21.2081 6.31464 22.0201C7.41401 22.8321 8.73736 23.2826 10.1006 23.3088C7.8084 25.1199 4.97187 26.1083 2.04314 26.1165C1.5099 26.1182 0.976899 26.0863 0.447338 26.0208C3.44777 27.9515 6.9379 28.9764 10.4973 28.972C12.9537 28.9975 15.388 28.5333 17.6579 27.6066C19.9279 26.6798 21.9881 25.3091 23.7181 23.5744C25.4482 21.8397 26.8134 19.7759 27.734 17.5034C28.6547 15.231 29.1123 12.7955 29.0801 10.3392C29.0787 10.068 29.0772 9.78087 29.0757 9.49372C30.3226 8.56019 31.3962 7.41576 32.2485 6.11174Z" fill="#132644"/>
</svg> </svg>
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Twitter</a> <a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="https://twitter.com/dappconnect">Twitter</a>
</div> </div>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<svg width="40" height="32" viewBox="0 0 40 32" fill="none"> <svg width="40" height="32" viewBox="0 0 40 32" fill="none">
<path d="M37.7988 13.6081C36.2597 8.19607 34.5066 5.39968 34.4783 5.34952C34.3782 5.22592 31.8959 2.22193 25.8867 0L25.0796 2.17663C27.9384 3.23372 29.9637 4.52331 31.0769 5.35655C27.7456 4.35535 23.7796 3.74217 20.2641 3.74217C16.7486 3.74217 12.7762 4.35535 9.43433 5.35655C10.5562 4.52339 12.5951 3.23372 15.4651 2.17663L14.6809 0C8.64845 2.22193 6.13452 5.22592 6.0331 5.34952C6.0043 5.39968 4.22168 8.19607 2.62568 13.6081C1.08748 18.8237 0.47484 26.1813 0.452441 26.4764C0.585942 26.6878 3.65409 31.9996 12.0919 31.9996L14.247 28.8875C11.8543 28.2482 9.57488 27.2172 7.49073 25.8183L8.77957 23.888C12.1419 26.1448 16.0702 27.3377 20.1399 27.3377C24.2097 27.3377 28.1506 26.1448 31.5366 23.888L32.8051 25.8183C30.7064 27.2172 28.416 28.2482 26.0165 28.8875L28.1389 31.9996C36.5767 31.9996 39.7008 26.6878 39.8365 26.4764C39.8172 26.1813 39.282 18.8237 37.7988 13.6081ZM14.8451 19.6744H12.5375L12.5578 15.8096H14.8655L14.8451 19.6744ZM27.8231 19.6744H25.5154L25.5358 15.8096H27.8434L27.8231 19.6744Z" fill="#132644"/> <path d="M37.7988 13.6081C36.2597 8.19607 34.5066 5.39968 34.4783 5.34952C34.3782 5.22592 31.8959 2.22193 25.8867 0L25.0796 2.17663C27.9384 3.23372 29.9637 4.52331 31.0769 5.35655C27.7456 4.35535 23.7796 3.74217 20.2641 3.74217C16.7486 3.74217 12.7762 4.35535 9.43433 5.35655C10.5562 4.52339 12.5951 3.23372 15.4651 2.17663L14.6809 0C8.64845 2.22193 6.13452 5.22592 6.0331 5.34952C6.0043 5.39968 4.22168 8.19607 2.62568 13.6081C1.08748 18.8237 0.47484 26.1813 0.452441 26.4764C0.585942 26.6878 3.65409 31.9996 12.0919 31.9996L14.247 28.8875C11.8543 28.2482 9.57488 27.2172 7.49073 25.8183L8.77957 23.888C12.1419 26.1448 16.0702 27.3377 20.1399 27.3377C24.2097 27.3377 28.1506 26.1448 31.5366 23.888L32.8051 25.8183C30.7064 27.2172 28.416 28.2482 26.0165 28.8875L28.1389 31.9996C36.5767 31.9996 39.7008 26.6878 39.8365 26.4764C39.8172 26.1813 39.282 18.8237 37.7988 13.6081ZM14.8451 19.6744H12.5375L12.5578 15.8096H14.8655L14.8451 19.6744ZM27.8231 19.6744H25.5154L25.5358 15.8096H27.8434L27.8231 19.6744Z" fill="#132644"/>
</svg> </svg>
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Discord</a> <a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="https://discord.gg/NgQERkYbHD">Discord</a>
</div> </div>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<svg width="33" height="32" viewBox="0 0 33 32" fill="none"> <svg width="33" height="32" viewBox="0 0 33 32" fill="none">
<path d="M15.9978 -0.000488281C7.1639 -0.000488281 0.0375093 7.12605 0.0837804 15.9173C0.120789 22.9487 4.73612 28.9139 11.1071 31.0206C11.9079 31.1672 12.1973 30.6757 12.1951 30.2536C12.1931 29.8751 12.1738 28.8743 12.1588 27.5465C7.71394 28.5076 6.75766 25.4121 6.75766 25.4121C6.02199 23.573 4.96943 23.0835 4.96943 23.0835C3.51026 22.0965 5.07234 22.1163 5.07234 22.1163C6.67891 22.2293 7.53094 23.7573 7.53094 23.7573C8.97172 26.1889 11.286 25.4874 12.1958 25.0791C12.3344 24.0506 12.7447 23.349 13.2006 22.9507C9.64655 22.5484 5.90341 21.1829 5.87132 15.0849C5.86217 13.3469 6.47868 11.926 7.49681 10.8122C7.32869 10.4099 6.77218 8.79076 7.63064 6.60087C7.63064 6.60087 8.97237 6.1728 12.0392 8.23189C13.3133 7.87913 14.6803 7.70275 16.0423 7.6968C17.4003 7.70473 18.7712 7.87913 20.0511 8.23387C23.0942 6.17479 24.4384 6.60285 24.4384 6.60285C25.3219 8.79472 24.7825 10.4119 24.6206 10.8142C25.6524 11.9279 26.2779 13.3489 26.287 15.0869C26.3192 21.2008 22.5864 22.5464 19.0245 22.9408C19.6011 23.4323 20.1182 24.4033 20.126 25.8877C20.1372 28.0161 20.1262 29.7324 20.129 30.2536C20.1312 30.6797 20.4218 31.1751 21.233 31.0186C27.5718 28.9099 32.1203 22.9467 32.0833 15.9173C32.0371 7.12605 24.8357 -0.000488281 15.9978 -0.000488281Z" fill="#132644"/> <path d="M15.9978 -0.000488281C7.1639 -0.000488281 0.0375093 7.12605 0.0837804 15.9173C0.120789 22.9487 4.73612 28.9139 11.1071 31.0206C11.9079 31.1672 12.1973 30.6757 12.1951 30.2536C12.1931 29.8751 12.1738 28.8743 12.1588 27.5465C7.71394 28.5076 6.75766 25.4121 6.75766 25.4121C6.02199 23.573 4.96943 23.0835 4.96943 23.0835C3.51026 22.0965 5.07234 22.1163 5.07234 22.1163C6.67891 22.2293 7.53094 23.7573 7.53094 23.7573C8.97172 26.1889 11.286 25.4874 12.1958 25.0791C12.3344 24.0506 12.7447 23.349 13.2006 22.9507C9.64655 22.5484 5.90341 21.1829 5.87132 15.0849C5.86217 13.3469 6.47868 11.926 7.49681 10.8122C7.32869 10.4099 6.77218 8.79076 7.63064 6.60087C7.63064 6.60087 8.97237 6.1728 12.0392 8.23189C13.3133 7.87913 14.6803 7.70275 16.0423 7.6968C17.4003 7.70473 18.7712 7.87913 20.0511 8.23387C23.0942 6.17479 24.4384 6.60285 24.4384 6.60285C25.3219 8.79472 24.7825 10.4119 24.6206 10.8142C25.6524 11.9279 26.2779 13.3489 26.287 15.0869C26.3192 21.2008 22.5864 22.5464 19.0245 22.9408C19.6011 23.4323 20.1182 24.4033 20.126 25.8877C20.1372 28.0161 20.1262 29.7324 20.129 30.2536C20.1312 30.6797 20.4218 31.1751 21.233 31.0186C27.5718 28.9099 32.1203 22.9467 32.0833 15.9173C32.0371 7.12605 24.8357 -0.000488281 15.9978 -0.000488281Z" fill="#132644"/>
</svg> </svg>
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">GitHub</a> <a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="https://github.com/status-im/?q=dappconnect&type=&language=&sort=">GitHub</a>
</div> </div>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<svg class="w-8 h-8" viewBox="0 0 40 32" fill="none"> <svg width="33" height="32" viewBox="0 0 33 32" fill="none">
<use href="#logo"/> <path d="M17.1187 2C9.45625 2 3 8.15625 3 15.7563C3 16 3.00625 30 3.00625 30L17.1187 29.9875C24.7875 29.9875 31 23.5938 31 15.9937C31 8.39375 24.7875 2 17.1187 2ZM17 24C15.7875 24 14.6313 23.7312 13.6 23.2437L8.53125 24.5L9.9625 19.8125C9.35 18.6812 9 17.3813 9 16C9 11.5813 12.5813 8 17 8C21.4188 8 25 11.5813 25 16C25 20.4188 21.4188 24 17 24Z" fill="#132644"/>
</svg> </svg>
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Forum</a> <a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="https://forum.vac.dev/">Forum</a>
</div> </div>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"> <svg width="15" height="32" viewBox="0 0 15 32" fill="none">
<path d="M22.7754 4.97859C20.4766 3.67482 18.2425 2.40777 16.0083 1.14072C15.6298 0.929547 15.2605 0.966273 14.8913 1.17745C10.8107 3.50955 6.73019 5.83247 2.65889 8.16457C2.52964 8.23803 2.40962 8.4492 2.40962 8.5961C2.40039 13.2511 2.39116 17.897 2.41885 22.5428C2.41885 22.8458 2.64965 23.2773 2.89892 23.4242C5.09613 24.7188 7.32104 25.9583 9.54595 27.2162C9.56441 27.2254 9.60134 27.2162 9.70289 27.2162C9.70289 27.0417 9.70289 26.8581 9.70289 26.6837C9.70289 22.1113 9.71213 17.5481 9.69366 12.9757C9.69366 12.5442 9.85061 12.3422 10.2014 12.1493C14.2912 9.83561 18.3717 7.51269 22.4523 5.18977C22.5354 5.14386 22.6277 5.07959 22.7754 4.97859Z" fill="#132644"/> <g clip-path="url(#clip0_1662_10901)">
<path d="M10.1758 27.3105C12.4745 28.6142 14.7087 29.8813 16.9428 31.1483C17.3213 31.3595 17.6906 31.3228 18.0599 31.1116C22.1404 28.7795 26.221 26.4566 30.2923 24.1245C30.4215 24.051 30.5415 23.8399 30.5415 23.693C30.5508 19.0379 30.56 14.3921 30.5323 9.74625C30.5323 9.44326 30.3015 9.01173 30.0523 8.86483C27.855 7.57023 25.6301 6.33073 23.4052 5.07286C23.3868 5.06368 23.3498 5.07286 23.2483 5.07286C23.2483 5.24731 23.2483 5.43094 23.2483 5.60539C23.2483 10.1778 23.239 14.741 23.2575 19.3134C23.2575 19.7449 23.1006 19.9469 22.7498 20.1397C18.66 22.4535 14.5794 24.7764 10.4989 27.0993C10.4158 27.1452 10.3235 27.2095 10.1758 27.3105Z" fill="#132644"/> <path d="M6.84648 11.0368C6.79238 8.40203 5.70498 5.872 4.29297 3.61958C5.0666 3.15862 5.94842 2.90195 6.84107 3.06957C7.73372 3.23719 8.55063 3.80816 8.93474 4.60436C9.26474 5.30103 9.24851 6.09724 9.19441 6.86201C9.16736 7.20249 9.1349 7.54821 9.0213 7.87298C8.94556 8.0825 8.84277 8.27632 8.72375 8.45965C8.57227 8.70061 8.39915 8.92585 8.22603 9.15109C7.76618 9.76396 7.30633 10.424 6.84648 11.0368Z" fill="#284778"/>
<path d="M14.4806 16.1597C14.3291 15.8139 14.1398 15.4839 13.9071 15.1801C13.7773 15.0073 13.6366 14.8449 13.5014 14.6773C13.1714 14.253 13.0632 13.6925 12.652 13.3468C12.23 12.9958 12.0894 12.3672 12.3112 11.8696C12.4032 11.6653 12.5546 11.4872 12.6466 11.2882C12.9171 10.7172 12.7332 10.0467 12.4735 9.47052C12.111 8.66384 11.6079 7.92526 11.0777 7.20763C10.3582 6.22809 9.58997 5.28522 8.77847 4.37378C8.92454 5.15951 8.85421 5.91904 8.65945 6.69953C8.55125 7.12906 8.39977 7.54811 8.20501 7.95145C7.96697 8.44384 7.66401 8.91004 7.36105 9.371C5.58658 12.0687 3.758 14.7349 1.87533 17.3644C0.798744 18.8678 0.425456 20.8478 0.301026 22.6707C0.176597 24.4936 0.539065 26.3689 1.46958 27.9613C2.01058 28.8884 2.73552 29.7056 3.47128 30.5018C3.93653 31.0047 4.47753 31.7799 5.14296 31.9999C5.22952 31.2299 5.37018 30.1927 5.47838 29.428C5.66232 28.1813 6.07889 26.9608 6.71186 25.8608C7.13925 25.1117 7.71811 24.3731 8.55666 24.1007C9.12471 23.9174 9.76309 23.9907 10.3636 24.0431C10.699 24.0169 11.0398 24.0641 11.3753 24.0641C11.7107 24.0641 12.0677 24.0169 12.3382 23.8284C12.6412 23.6188 12.8035 23.2679 12.8576 22.9117C12.9117 22.5555 12.8684 22.1836 12.8468 21.8274C12.8305 21.5917 12.8197 21.3455 12.9333 21.1359C13.1389 20.7483 13.7232 20.565 13.7557 20.1302C13.7719 19.9312 13.6583 19.7478 13.5771 19.5592C13.496 19.3707 13.4581 19.1402 13.5988 18.9883C13.6691 18.9149 13.7665 18.8783 13.8314 18.8049C13.9666 18.6478 13.8909 18.4121 13.7719 18.2445C13.6529 18.0768 13.4906 17.9249 13.4581 17.7259C13.4202 17.5321 13.5176 17.333 13.6583 17.1864C13.7989 17.0397 13.9775 16.9402 14.156 16.8354C14.3237 16.7359 14.5022 16.6049 14.5185 16.4163C14.5239 16.3325 14.4968 16.2487 14.4698 16.1701C14.3562 15.8663 14.1993 15.5782 13.9991 15.3163" fill="#132644"/>
</g>
<defs>
<clipPath id="clip0_1662_10901">
<rect width="14" height="32" fill="white" transform="translate(0.599609)"/>
</clipPath>
</defs>
</svg> </svg>
<a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="">Blog</a> <a class="text-blue text-xs font-bold italic bg-link-arrow-blue bg-left bg-no-repeat pl-3 mt-5 lg:mt-9 hover:underline" href="https://vac.dev/research-log/">Blog</a>
</div> </div>
</div> </div>
</section> </section>
@ -240,26 +294,26 @@
<div class="text-rectangle102 w-1/2 sm:w-auto md:w-24"> <div class="text-rectangle102 w-1/2 sm:w-auto md:w-24">
<h3 class="text-sm leading-6 mb-5">Developers</h3> <h3 class="text-sm leading-6 mb-5">Developers</h3>
<ul> <ul>
<li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Quick Starts</a></li> <li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://docs.dappconnect.dev/quick_start.html">Quick Starts</a></li>
<li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Docs</a></li> <li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://docs.dappconnect.dev/">Docs</a></li>
<li><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Guides</a></li> <li><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://docs.dappconnect.dev/guides/index.html">Guides</a></li>
</ul> </ul>
</div> </div>
<div class="text-rectangle102 w-1/2 sm:w-auto md:w-24 sm:order-3 xl:w-auto"> <div class="text-rectangle102 w-1/2 sm:w-auto md:w-24 sm:order-3 xl:w-auto">
<h3 class="text-sm leading-6 mb-5">Connect</h3> <h3 class="text-sm leading-6 mb-5">Connect</h3>
<ul class="xl:grid xl:grid-cols-2 xl:gap-x-16"> <ul class="xl:grid xl:grid-cols-2 xl:gap-x-16">
<li class="mb-3.5 xl:order-1"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Twitter</a></li> <li class="mb-3.5 xl:order-1"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://twitter.com/dappconnect">Twitter</a></li>
<li class="mb-3.5 xl:order-3"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Discord</a></li> <li class="mb-3.5 xl:order-3"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://discord.gg/NgQERkYbHD">Discord</a></li>
<li class="mb-3.5 xl:order-5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">GitHub</a></li> <li class="mb-3.5 xl:order-5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://github.com/status-im/?q=dappconnect&type=&language=&sort=">GitHub</a></li>
<li class="mb-3.5 xl:order-2"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Forum</a></li> <li class="mb-3.5 xl:order-2"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://forum.vac.dev/">Forum</a></li>
<li class="xl:order-4"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Blog</a></li> <li class="xl:order-4"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://vac.dev/research-log/">Blog</a></li>
</ul> </ul>
</div> </div>
<div class="text-rectangle102 w-1/2 -mt-10 sm:w-auto md:w-24 sm:mt-0"> <div class="text-rectangle102 w-1/2 -mt-10 sm:w-auto md:w-24 sm:mt-0">
<h3 class="text-sm leading-6 mb-5">About us</h3> <h3 class="text-sm leading-6 mb-5">About us</h3>
<ul> <ul>
<li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">About</a></li> <li class="mb-3.5"><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">About</a></li>
<li><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="">Careers</a></li> <li><a class="text-sm leading-6 opacity-75 hover:underline hover:opacity-100" href="https://status.im/our_team/jobs.html">Careers</a></li>
</ul> </ul>
</div> </div>
</div> </div>

61
src/js/main.js
View File

@ -1,38 +1,44 @@
const section = document.getElementById('sectionCode') const section = document.getElementById('sectionCode')
const string = ' \n { \t\xa0\xa0 "AdvertiseAddr" \n: "YOUR_PUBLIC_IP", \n \t\xa0\xa0 "ListenAddr" \n: "0.0.0.0:30303", \t\xa0\xa0 "HTTPEnabled" \n: true, \t\xa0\xa0 "HTTPHost" \n: "127.0.0.1", \t\xa0\xa0"HTTPPort" \n: 8545, \t\xa0\xa0 "APIModules" \n: "eth,net,web3,admin,mailserver", \t\xa0\xa0 "RegisterTopics" \n : ["whispermail"], \t\xa0\xa0 "WakuConfig" \n: { \t \xa0\xa0\xa0\xa0\xa0\xa0"Enabled" \n : true, \n \xa0\xa0\xa0\xa0} \n }';
const array = string.split("");
const wrapper = document.getElementById("code")
let container = document.getElementById("testText")
let timer;
const menuVisibility = () => { const menuVisibility = () => {
document.querySelector('body').classList.toggle('body-noScroll') document.querySelector('body').classList.toggle('body-noScroll')
document.querySelector('#menu-wrapper').classList.toggle('menu-visible'); document.querySelector('#menu-wrapper').classList.toggle('menu-visible');
} }
function writeCode () { const code = document.querySelector('#code')
if (array.length > 0) { const content = code.querySelectorAll('span')
const letter = array.shift() const codeText = []
if(letter === '\n') { const codeElements = []
const newContainer = document.createElement("span")
const brakeLine = document.createElement('br') const codeInitContent = () => {
newContainer.classList.add('text-rectangle102', 'text-sm', 'font-special') content.forEach(el => {
wrapper.appendChild(newContainer) codeText.push(el.innerText)
wrapper.appendChild(brakeLine) el.innerText = ''
container = newContainer codeElements.push(el)
} else if (letter === '\t') { })
const newContainer = document.createElement("span")
newContainer.classList.add('text-rectangle99', 'text-sm', 'font-special')
wrapper.appendChild(newContainer)
container = newContainer
}
container.innerHTML += letter;
} else {
clearTimeout(timer);
}
loopTimer = setTimeout('writeCode()',40);
} }
const writeCode = (speed = 50) => {
let startWriting = 0
let textElement
codeText.forEach((el, index) => {
const text = [...el]
setTimeout(() => {
textElement = codeElements[index]
text.forEach((char, i) => {
setTimeout(() => {
char === ' ' ? char = ' ' : char
textElement.innerHTML += char
}, i * speed)
})
}, startWriting * speed)
startWriting = startWriting + text.length
})
};
function isInViewport(element) { function isInViewport(element) {
const rect = element.getBoundingClientRect(); const rect = element.getBoundingClientRect();
return ( return (
@ -45,11 +51,12 @@ function isInViewport(element) {
function eventOnScroll () { function eventOnScroll () {
if(isInViewport(section)) { if(isInViewport(section)) {
writeCode(); writeCode(40)
document.removeEventListener('scroll', eventOnScroll); document.removeEventListener('scroll', eventOnScroll);
} }
} }
codeInitContent()
document.querySelector('#burger').addEventListener('click', menuVisibility); document.querySelector('#burger').addEventListener('click', menuVisibility);
document.querySelector('.button--close').addEventListener('click', menuVisibility); document.querySelector('.button--close').addEventListener('click', menuVisibility);
window.addEventListener('resize', function () { window.addEventListener('resize', function () {

4
tailwind.config.js
View File

@ -15,8 +15,12 @@ module.exports = {
rectangle102: '#fff', rectangle102: '#fff',
black: '#000000', black: '#000000',
blue: '#3A71F9', blue: '#3A71F9',
blueLight: '#73b6f2',
grey: '#D5D5D5', grey: '#D5D5D5',
green: '#60D086', green: '#60D086',
red: '#f67971',
violet: '#b592dc',
orange: '#e09350',
}, },
container: { container: {
padding: { padding: {

5789
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff