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

Grid sections

Browse Source
This commit is contained in:
Pawel 2021-09-13 15:50:01 +02:00
parent 138335349e
commit 3926b451a0
11 changed files with 45545 additions and 87183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132496
assets/css/styles.css
View File

File diff suppressed because it is too large Load Diff

BIN
assets/fonts/HelveticaNeue.ttc Normal file
View File

Binary file not shown.

3
assets/images/arrow/arrow-black.svg Normal file
View File

@ -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="#132644"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 152 B

3
assets/images/arrow/arrow-blue.svg Normal file
View File

@ -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="#3A71F9"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 152 B

3
assets/images/arrow/arrow-green.svg Normal file
View File

@ -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="#C9E953"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 152 B

15
assets/images/photo1.svg Normal file
View File

@ -0,0 +1,15 @@
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M78.7044 56.7319L41.0481 37.9038C40.3883 37.5739 39.6117 37.5739 38.9519 37.9038L1.29562 56.7319C0.501562 57.1287 0 57.9403 0 58.8281C0 59.7159 0.501562 60.5275 1.29562 60.9244L38.9519 79.7525C39.2817 79.9175 39.6409 80 40 80C40.3591 80 40.7183 79.9175 41.0481 79.7525L78.7044 60.9244C79.4984 60.5275 80 59.7159 80 58.8281C80 57.9403 79.4984 57.1287 78.7044 56.7319Z" fill="#146288"/>
<path d="M78.704 56.7319L41.0477 37.9038C40.7005 37.7302 40.3212 37.6505 39.9434 37.6595V79.9967C39.9621 79.9972 39.9809 80 39.9996 80C40.3587 80 40.7179 79.9175 41.0477 79.7525L78.704 60.9244C79.498 60.5275 79.9996 59.7159 79.9996 58.8281C79.9996 57.9403 79.498 57.1288 78.704 56.7319Z" fill="#132644" fill-opacity="0.1"/>
<path d="M78.7044 37.9037L41.0481 19.0756C40.3883 18.7458 39.6117 18.7458 38.9519 19.0756L1.29562 37.9037C0.501562 38.3006 0 39.1122 0 40C0 40.8878 0.501562 41.6994 1.29562 42.0962L38.9519 60.9244C39.2817 61.0894 39.6409 61.1719 40 61.1719C40.3591 61.1719 40.7183 61.0894 41.0481 60.9244L78.7044 42.0962C79.4984 41.6994 80 40.8877 80 40C80 39.1123 79.4984 38.3006 78.7044 37.9037Z" fill="#3896C3"/>
<path d="M78.704 37.9038L41.0477 19.0756C40.7005 18.902 40.3212 18.8223 39.9434 18.8314V61.1686C39.9621 61.1691 39.9809 61.1719 39.9996 61.1719C40.3587 61.1719 40.7179 61.0894 41.0477 60.9244L78.704 42.0963C79.498 41.6994 79.9996 40.8877 79.9996 40C79.9996 39.1124 79.498 38.3006 78.704 37.9038Z" fill="#132644" fill-opacity="0.1"/>
<path d="M78.7044 19.0763L41.0481 0.248146C40.3883 -0.081698 39.6117 -0.081698 38.9519 0.248146L1.29562 19.0763C0.501562 19.4731 0 20.2847 0 21.1725C0 22.0603 0.501562 22.8719 1.29562 23.2688L38.9519 42.0969C39.2817 42.2619 39.6409 42.3444 40 42.3444C40.3591 42.3444 40.7183 42.2619 41.0481 42.0969L78.7044 23.2688C79.4984 22.8719 80 22.0603 80 21.1725C80 20.2847 79.4984 19.4731 78.7044 19.0763Z" fill="#8BC3DE"/>
<path d="M78.704 19.0756L41.0477 0.247506C40.7005 0.0739124 40.3212 -0.00577514 39.9434 0.00328736V42.3405C39.9621 42.3409 39.9809 42.3438 39.9996 42.3438C40.3587 42.3438 40.7179 42.2612 41.0477 42.0962L78.704 23.2681C79.498 22.8713 79.9996 22.0597 79.9996 21.1719C79.9996 20.2841 79.498 19.4725 78.704 19.0756Z" fill="#132644" fill-opacity="0.1"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="80" height="80" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

26
assets/images/photo2.svg Normal file
View File

@ -0,0 +1,26 @@
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M39.9998 39.7L25.2998 32.6V52.4001L39.9998 59.5001V39.7Z" fill="#146288"/>
<path d="M40 39.7V59.5001L54.7 52.4001V32.6L40 39.7Z" fill="#3896C3"/>
<path d="M39.9998 39.7L54.6999 32.6L39.9998 25.5L25.2998 32.6L39.9998 39.7Z" fill="#8BC3DE"/>
<path d="M39.9998 14.2L25.2998 7.09998V26.9L39.9998 34V14.2Z" fill="#146288"/>
<path d="M40 14.2V34L54.7 26.9V7.09998L40 14.2Z" fill="#3896C3"/>
<path d="M39.9998 14.2L54.6999 7.1L39.9998 0L25.2998 7.1L39.9998 14.2Z" fill="#8BC3DE"/>
<path d="M62.9006 51L48.1006 43.9V63.7001L62.9006 70.8001V51Z" fill="#146288"/>
<path d="M62.9004 51V70.8001L77.6004 63.7001V43.9L62.9004 51Z" fill="#3896C3"/>
<path d="M62.9006 51L77.6006 43.9L62.9006 36.8L48.1006 43.9L62.9006 51Z" fill="#8BC3DE"/>
<path d="M62.9006 25.5L48.1006 18.4V38.2001L62.9006 45.3001V25.5Z" fill="#146288"/>
<path d="M62.9004 25.5V45.3001L77.6004 38.2001V18.4L62.9004 25.5Z" fill="#3896C3"/>
<path d="M62.9006 25.5L77.6006 18.4L62.9006 11.3L48.1006 18.4L62.9006 25.5Z" fill="#8BC3DE"/>
<path d="M17.0994 51L2.39941 43.9V63.7001L17.0994 70.8001V51Z" fill="#146288"/>
<path d="M17.0996 51V70.8001L31.8997 63.7001V43.9L17.0996 51Z" fill="#3896C3"/>
<path d="M17.0994 51L31.8996 43.9L17.0994 36.8L2.39941 43.9L17.0994 51Z" fill="#8BC3DE"/>
<path d="M17.0994 25.5L2.39941 18.4V38.2001L17.0994 45.3001V25.5Z" fill="#146288"/>
<path d="M17.0996 25.5V45.3001L31.8997 38.2001V18.4L17.0996 25.5Z" fill="#3896C3"/>
<path d="M17.0994 25.5L31.8996 18.4L17.0994 11.3L2.39941 18.4L17.0994 25.5Z" fill="#8BC3DE"/>
<path d="M39.9998 60.2L25.2998 53.1V72.9L39.9998 80V60.2Z" fill="#146288"/>
<path d="M40 60.2V80L54.7 72.9V53.1L40 60.2Z" fill="#3896C3"/>
<path d="M39.9998 60.2L54.6999 53.1L39.9998 46L25.2998 53.1L39.9998 60.2Z" fill="#8BC3DE"/>
<path d="M39.9998 34.7L25.2998 27.6V47.4L39.9998 54.5V34.7Z" fill="#146288"/>
<path d="M40 34.7V54.5L54.7 47.4V27.6L40 34.7Z" fill="#3896C3"/>
<path d="M39.9998 34.6999L54.6999 27.5999L39.9998 20.4999L25.2998 27.5999L39.9998 34.6999Z" fill="#8BC3DE"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

18
assets/images/photo3.svg Normal file
View File

@ -0,0 +1,18 @@
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M39.9864 16.83L20 12.1545V34.8649C20 35.5023 20.3667 36.083 20.9423 36.3569L39.2769 45.0802C39.7258 45.2938 40.2469 45.2939 40.6958 45.0805L59.0567 36.3566C59.6328 36.0828 59.9998 35.502 59.9998 34.8642V12.5108L39.9864 16.83Z" fill="#146288"/>
<path d="M40 45.2403C40.238 45.2384 40.4756 45.1858 40.6959 45.0813L59.0569 36.3574C59.633 36.0836 60 35.5028 60 34.865V12.5114L40 16.8277V45.2403Z" fill="#3896C3"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M40.3959 3.00753L59.4052 11.6071C59.777 11.7753 59.975 12.113 59.9978 12.4613C60.0238 12.8496 59.8319 13.2513 59.4203 13.4457L53.275 16.3483L40.4264 22.4172C40.1483 22.5486 39.8255 22.5464 39.5493 22.4111L20.5669 13.1164C19.7924 12.7372 19.8169 11.625 20.6072 11.2802L29.2114 7.52566L39.5743 3.00379C39.7099 2.94457 39.8552 2.91652 40 2.91953V2.91925C40.1352 2.92206 40.27 2.9505 40.3959 3.00753Z" fill="#8BC3DE"/>
<path d="M19.9864 48.6704L0 43.9951V66.7054C0 67.3429 0.366719 67.9235 0.942344 68.1974L19.2769 76.9207C19.7258 77.1343 20.2469 77.1344 20.6958 76.921L39.0567 68.1971C39.6328 67.9233 39.9998 67.3426 39.9998 66.7047V44.3511L19.9864 48.6704Z" fill="#146288"/>
<path d="M20 77.0809C20.238 77.079 20.4756 77.0263 20.6959 76.9218L39.0569 68.1979C39.633 67.9241 40 67.3434 40 66.7055V44.1987L20 48.6682V77.0809Z" fill="#3896C3"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.4203 45.286L33.275 48.1886L20.4264 54.2574C20.1483 54.3888 19.8255 54.3866 19.5493 54.2513L0.566912 44.9566C-0.207619 44.5774 -0.183088 43.4652 0.607225 43.1204L9.21144 39.366L19.5743 34.8441C19.7099 34.7849 19.8552 34.7568 20 34.7599V34.7597C20.1352 34.7626 20.27 34.791 20.3959 34.848L39.4052 43.223C39.8412 43.4202 40.0382 43.8506 39.9939 44.2576C40.038 44.6593 39.8474 45.0842 39.4203 45.286Z" fill="#8BC3DE"/>
<path d="M59.9864 48.6704L40 44.1987V66.7054C40 67.3429 40.3667 67.9235 40.9423 68.1974L59.2769 76.9207C59.7258 77.1343 60.2469 77.1345 60.6958 76.921L79.0567 68.1971C79.6328 67.9234 79.9998 67.3426 79.9998 66.7048V44.3512L59.9864 48.6704Z" fill="#146288"/>
<path d="M60 77.0808C60.238 77.079 60.4756 77.0263 60.6959 76.9218L79.0569 68.1979C79.633 67.9241 80 67.3433 80 66.7055V44.3519L60 48.6682V77.0808Z" fill="#3896C3"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M79.4204 45.286L73.275 48.1886L60.4264 54.2574C60.1483 54.3888 59.8255 54.3866 59.5493 54.2513L40.5669 45.1144C39.7924 44.7352 39.8169 43.623 40.6072 43.2782L49.2114 39.366L59.5743 34.8441C59.7099 34.7849 59.8552 34.7568 60 34.7599V34.7597C60.1352 34.7626 60.27 34.791 60.3959 34.848L79.4052 43.4474C79.7723 43.6135 79.97 43.9449 79.9968 44.2885C80.0281 44.6809 79.8365 45.0894 79.4204 45.286Z" fill="#8BC3DE"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="80" height="80" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

93
index.html
View File

@ -5,10 +5,97 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="assets/css/styles.css" rel="stylesheet" /> <link href="assets/css/styles.css" rel="stylesheet" />
<title>DApp Connect</title> <title>DApp Connect</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=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
</head> </head>
<body> <body class="text-rectangle97">
<div class="container mx-auto py-12"> <div class="container mx-auto">
<h1 class="text-4xl font-bold text-gray-900">Initial project</h1>
<!-- HERO -->
<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">
<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>
<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>
</div>
</section>
<!-- Grid section -->
<section class="flex flex-col items-center mb-18 md:mb-20 lg:mb-32">
<h2 class="font-bold text-sm leading-6 mb-18">The future of Communication</h2>
<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">
<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>
<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>
</div>
<div class="flex flex-col items-center">
<img src="./assets/images/photo2.svg" alt="Decentralized Messaging">
<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>
</div>
<div class="flex flex-col items-center">
<img src="./assets/images/photo3.svg" alt="dApp Ready">
<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>
</div>
</div>
</section>
<!-- section code -->
<section 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">
<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>
<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>
</div>
<div class="bg-rectangle97 p-4 md:px-8 lg:max-w-code lg:w-full">
<pre><code class="text-rectangle102 text-sm font-special">
{
<span class="text-rectangle99">"AdvertiseAddr"</span>: "YOUR_PUBLIC_IP",
<span class="text-rectangle99">"ListenAddr"</span>: "0.0.0.0:30303",
<span class="text-rectangle99">"HTTPEnabled"</span>: true,
<span class="text-rectangle99">"HTTPHost"</span>: "127.0.0.1",
<span class="text-rectangle99">"HTTPPort"</span>: 8545,
<span class="text-rectangle99">"APIModules"</span>: <br> "eth,net,web3,admin,mailserver",
<span class="text-rectangle99">"RegisterTopics"</span>: ["whispermail"],
<span class="text-rectangle99">"WakuConfig"</span>: {
<span class="text-rectangle99">"Enabled"</span>: true,
}
</code></pre>
</div>
</section>
<!-- Use Cases -->
<section class="border-b border-grey pb-10 mb-10 md:pb-20 md:mb-20 lg:flex lg:justify-between lg:px-28 lg:pb-25 lg:mb-25">
<div class="mb-11 md:mb-5 lg:max-w-xs lg:mb-0 lg:mr-15">
<h2 class="font-bold text-sm leading-6 whitespace-nowrap mb-4">Use Cases</h2>
<p class="text-sm leading-6 italic opacity-75 mb-7">Anything that can be done off-chain can be done with DappConnect. Here are just a few examples.</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 inspired, view more use cases</a>
</div>
<div class="grid gap-4 w-full sm:grid-cols-2 md:gap-x-6">
<div class="flex flex-col items-end justify-end bg-green pt-10 px-4 pb-5 md:h-58 md:p-10">
<h3 class="font-bold text-sm leading-6 whitespace-nowrap mb-5 md:mb-7">Decentralized Chat</h3>
<a class="text-black text-xs font-bold italic bg-link-arrow-black bg-left bg-no-repeat pl-3 hover:underline" href="">View the guide</a>
</div>
<div class="flex flex-col items-end justify-end bg-rectangle99 pt-10 px-4 pb-5 md:h-58 md:p-10">
<h3 class="font-bold text-sm leading-6 whitespace-nowrap mb-5 md:mb-7">Gasless Polling</h3>
<a class="text-black text-xs font-bold italic bg-link-arrow-black bg-left bg-no-repeat pl-3 hover:underline" href="">View the guide</a>
</div>
<div class="flex flex-col items-end justify-end bg-rectangle96 pt-10 px-4 pb-5 md:h-58 md:p-10">
<h3 class="font-bold text-sm text-rectangle99 leading-6 whitespace-nowrap mb-5 md:mb-7">dApp to Wallet Notifications</h3>
<a class="text-black text-xs text-rectangle99 font-bold italic bg-link-arrow-green bg-left bg-no-repeat pl-3 hover:underline" href="">View the guide</a>
</div>
<div class="flex flex-col items-end justify-end bg-rectangle98 pt-10 px-4 pb-5 md:h-58 md:p-10">
<h3 class="font-bold text-sm leading-6 whitespace-nowrap mb-5 md:mb-7">Layer 2 Communication</h3>
<a class="text-black text-xs font-bold italic bg-link-arrow-black bg-left bg-no-repeat pl-3 hover:underline" href="">View the guide</a>
</div>
</div>
</section>
</div> </div>
</body> </body>
</html> </html>

5
src/styles.css
View File

@ -1,8 +1,9 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
body { @font-face {
@apply bg-white text-gray-700 font-sans; font-family: 'Helvetica Nueu';
src: local('Helvetica Nueu'), url("./assets/fonts/HelveticaNeue.ttc");
} }
@tailwind utilities; @tailwind utilities;

66
tailwind.config.js
View File

@ -2,7 +2,71 @@ module.exports = {
purge: ["./src/**/*.css", "./**/*.html"], purge: ["./src/**/*.css", "./**/*.html"],
darkMode: false, darkMode: false,
theme: { theme: {
extend: {}, colors: {
rectangle96: '#1746CA',
rectangle97: '#132644',
rectangle98: '#8BC3DE',
rectangle99: '#E1FF67',
rectangle101: '#242424',
rectangle102: '#fff',
blue: '#3A71F9',
grey: '#D5D5D5',
green: '#60D086',
},
container: {
padding: {
DEFAULT: '1.5rem',
md: '2rem',
},
},
fontFamily: {
'body': ['"Helvetica"'],
'special': ['"Open Sans"']
},
screens: {
'none': '100%',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1340px',
'xxl': '1404px',
'xxxl': '1700px'
},
extend: {
backgroundImage: theme => ({
'link-arrow-black': "url('../images/arrow/arrow-black.svg')",
'link-arrow-blue': "url('../images/arrow/arrow-blue.svg')",
'link-arrow-green': "url('../images/arrow/arrow-green.svg')",
}),
fontFamily: {
'sans': 'Helvetica'
},
fontSize: {
title: ['32px', '38px'],
'3.5xl': ['40px', '48px'],
},
gap: theme => ({
'22': '5.5rem',
}),
height: theme => ({
'58': '14.5rem',
}),
maxWidth: theme => ({
'31': '31rem',
'code': '38.375rem'
}),
padding: theme => ({
'25': '6.25rem',
'26': '6.5rem',
'35': '8.75rem',
}),
margin: theme => ({
'15': '3.75rem',
'18': '4.5rem',
'25': '6.25rem',
'26': '6.5rem',
}),
},
}, },
variants: { variants: {
extend: {}, extend: {},