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

Add instructions to run locally and fix file path to locally (#7)

Browse Source 
Co-authored-by: Pawel <Pawel@Tests-MacBook-Air.local>
This commit is contained in:
pawelEth 2021-10-13 06:34:14 +02:00 committed by GitHub
parent 2aa5a94915
commit 26e98e0195
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 150 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
README.md
View File

@ -1,65 +1,27 @@
# Tailwind CSS Boilerplate
## How to run the project
Tailwind CSS boilerplate for HTML projects. Bare-bones HTML starter template with Tailwind CSS, PostCSS, Gulp, Browsersync &amp; Imagemin.
The main purpose of this boilerplate is to simplify the configuration of Tailwind CSS for beginners.
## How to use this Tailwind CSS Boilerplate
1. Clone the repository:
1. Install the dependencies:
```bash
git clone git@github.com:salttechno/tailwindcss-boilerplate.git <YOUR_PROJECT_NAME>
cd <YOUR_PROJECT_NAME>
```
Or else simply download boilerplate's zip file from [this link](https://github.com/salttechno/tailwindcss-boilerplate).
2. Install the dependencies:
```bash
# if you are using npm
# npm
npm install
# OR if you are using Yarn
yarn
```
3. Start the development server:
2. Start the development server:
```bash
# if you are using npm
npm run dev
# OR if you are using Yarn
yarn run dev
# gulp
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).
4. Open `./index.html` in your editor (VS Code recommended) and start editing!
4. Open `./index.html` in your editor and start editing!
## Optimizing for production
Tailwind CSS output needs to be optimized for the production use. The development version for the CSS file is almost 4MB which is not good for production websites. [Read this for more details](https://tailwindcss.com/docs/optimizing-for-production). This boilerplate **helps you generate the production version** of your CSS file easily & quickly.
We have configured `purge` option for PostCSS & Tailwind CSS. To build optimized version of your custom CSS, simply run:
## For production
```bash
# if you are using npm
npm run build
# gulp
gulp build
# OR if you are using Yarn
yarn run build
```
For optimizing your images, simply run:
```bash
# if you are using npm
npm run build-images
# OR if you are using Yarn
yarn run build-images
```
```

32
gulpfile.js
View File

@ -1,19 +1,21 @@
const { watch, series, src, dest } = require("gulp");
var browserSync = require("browser-sync").create();
const concat = require('gulp-concat');
var postcss = require("gulp-postcss");
const imagemin = require("gulp-imagemin");
const uglify = require('gulp-uglify-es').default;
function cssTask(cb) {
return src("./src/*.css")
return src("./src/css/*.css")
.pipe(postcss())
.pipe(dest("./dist/css"))
.pipe(concat('style.min.css'))
.pipe(dest("./src/css"))
.pipe(browserSync.stream());
cb();
}
function scriptsTask(cb) {
return src('./src/*.js')
return src('./src/js/*.js')
.pipe(uglify())
.pipe(dest('./dist/js'))
.pipe(browserSync.stream());
@ -22,14 +24,14 @@ function scriptsTask(cb) {
// Task for minifying images
function imageminTask(cb) {
return src("./assets/images/**/*")
return src("./src/assets/images/**/*")
.pipe(imagemin())
.pipe(dest("./dist/assets/images"));
cb();
}
function htmlBuild(cb) {
return src("./*.html")
return src("./src/*.html")
.pipe(dest("./dist"))
cb();
}
@ -37,7 +39,7 @@ function htmlBuild(cb) {
function browsersyncServe(cb) {
browserSync.init({
server: {
baseDir: "./",
baseDir: "src/",
},
});
cb();
@ -50,12 +52,22 @@ function browsersyncReload(cb) {
// Watch Files & Reload browser after tasks
function watchTask() {
watch("./**/*.html", browsersyncReload);
watch(["./src/*.css"], series(cssTask, browsersyncReload));
watch(["./src/*.js"], series(scriptsTask, browsersyncReload));
watch("./src/**/*.html", browsersyncReload);
watch(["./src/css/*.css"], series(cssTask, browsersyncReload));
watch(["./src/js/*.js"], series(scriptsTask, browsersyncReload));
}
exports.build = series(cssTask, scriptsTask, imageminTask, htmlBuild);
function build() {
return src([
'src/css/style.min.css',
'src/assets/images/**/*',
'src/js/main.js',
'src/**/*.html ',
], {base: 'src'})
.pipe(dest('dist'))
}
exports.build = series(build);
exports.default = series(cssTask, scriptsTask, htmlBuild, browsersyncServe, watchTask);
exports.css = cssTask;
exports.images = imageminTask;

46
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "dapp-connect",
"version": "1.0.0",
"dependencies": {
"gulp-concat": "^2.6.1",
"gulp-uglify-es": "^3.0.0"
},
"devDependencies": {
@ -1880,6 +1881,14 @@
"typedarray": "^0.0.6"
}
},
"node_modules/concat-with-sourcemaps": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
"integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
"dependencies": {
"source-map": "^0.6.1"
}
},
"node_modules/config-chain": {
"version": "1.1.12",
"resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
@ -4612,6 +4621,19 @@
"object.assign": "^4.1.0"
}
},
"node_modules/gulp-concat": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/gulp-concat/-/gulp-concat-2.6.1.tgz",
"integrity": "sha1-Yz0WyV2IUEYorQJmVmPO5aR5M1M=",
"dependencies": {
"concat-with-sourcemaps": "^1.0.0",
"through2": "^2.0.0",
"vinyl": "^2.0.0"
},
"engines": {
"node": ">= 0.10"
}
},
"node_modules/gulp-imagemin": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/gulp-imagemin/-/gulp-imagemin-7.1.0.tgz",
@ -9666,7 +9688,6 @@
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
"dev": true,
"dependencies": {
"readable-stream": "~2.3.6",
"xtend": "~4.0.1"
@ -10336,7 +10357,6 @@
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
"dev": true,
"engines": {
"node": ">=0.4"
}
@ -11898,6 +11918,14 @@
"typedarray": "^0.0.6"
}
},
"concat-with-sourcemaps": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
"integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
"requires": {
"source-map": "^0.6.1"
}
},
"config-chain": {
"version": "1.1.12",
"resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
@ -14141,6 +14169,16 @@
}
}
},
"gulp-concat": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/gulp-concat/-/gulp-concat-2.6.1.tgz",
"integrity": "sha1-Yz0WyV2IUEYorQJmVmPO5aR5M1M=",
"requires": {
"concat-with-sourcemaps": "^1.0.0",
"through2": "^2.0.0",
"vinyl": "^2.0.0"
}
},
"gulp-imagemin": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/gulp-imagemin/-/gulp-imagemin-7.1.0.tgz",
@ -18109,7 +18147,6 @@
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
"dev": true,
"requires": {
"readable-stream": "~2.3.6",
"xtend": "~4.0.1"
@ -18647,8 +18684,7 @@
"xtend": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
"dev": true
"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
},
"y18n": {
"version": "4.0.1",

3
package.json
View File

@ -2,7 +2,7 @@
"name": "dapp-connect",
"version": "1.0.0",
"description": "DApp Connect - landing page",
"main": "index.html",
"main": "src/index.html",
"scripts": {
"dev": "gulp",
"build": "NODE_ENV=production gulp build",
@ -26,6 +26,7 @@
"tailwindcss": "^2.0.3"
},
"dependencies": {
"gulp-concat": "^2.6.1",
"gulp-uglify-es": "^3.0.0"
}
}

0
assets/fonts/HelveticaNeue.ttc → src/assets/fonts/HelveticaNeue.ttc
View File

0
assets/images/arrow/arrow-black.svg → src/assets/images/arrow/arrow-black.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 152 B

After

Width:  |  Height:  |  Size: 152 B

0
assets/images/arrow/arrow-blue.svg → src/assets/images/arrow/arrow-blue.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 152 B

After

Width:  |  Height:  |  Size: 152 B

0
assets/images/arrow/arrow-green.svg → src/assets/images/arrow/arrow-green.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 152 B

After

Width:  |  Height:  |  Size: 152 B

0
assets/images/favicon/apple-touch-icon.png → src/assets/images/favicon/apple-touch-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

0
assets/images/favicon/favicon-16x16.png → src/assets/images/favicon/favicon-16x16.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 849 B

After

Width:  |  Height:  |  Size: 849 B

0
assets/images/favicon/favicon-32x32.png → src/assets/images/favicon/favicon-32x32.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
assets/images/favicon/safari-pinned-tab.svg → src/assets/images/favicon/safari-pinned-tab.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

0
assets/images/favicon/site.webmanifest → src/assets/images/favicon/site.webmanifest
View File

0
assets/images/photo1.svg → src/assets/images/photo1.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

0
assets/images/photo2.svg → src/assets/images/photo2.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

0
assets/images/photo3.svg → src/assets/images/photo3.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

90
assets/css/styles.css → src/css/style.min.css vendored
View File

@ -604,7 +604,7 @@ video {
@font-face {
font-family: 'Helvetica Nueu';
src: local('Helvetica Nueu'), url("./assets/fonts/HelveticaNeue.ttc");
src: local('Helvetica Nueu'), url("../assets/fonts/HelveticaNeue.ttc");
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
@ -2044,15 +2044,15 @@ video {
}
.bg-link-arrow-black {
background-image: url('../images/arrow/arrow-black.svg');
background-image: url('../assets/images/arrow/arrow-black.svg');
}
.bg-link-arrow-blue {
background-image: url('../images/arrow/arrow-blue.svg');
background-image: url('../assets/images/arrow/arrow-blue.svg');
}
.bg-link-arrow-green {
background-image: url('../images/arrow/arrow-green.svg');
background-image: url('../assets/images/arrow/arrow-green.svg');
}
.from-rectangle96 {
@ -4583,6 +4583,10 @@ video {
height: 100vh;
}
.h-custom {
height: 22rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
@ -18519,7 +18523,7 @@ video {
}
.menu-item:hover ul {
display: block;
display: block
}
.menu-item:hover img {
@ -18535,9 +18539,9 @@ video {
}
#code br {
display: block;
content: "";
margin-top: 0;
display: block;
margin-top: 0px
}
@media (min-width: 100%) {
@ -20028,15 +20032,15 @@ video {
}
.none\:bg-link-arrow-black {
background-image: url('../images/arrow/arrow-black.svg');
background-image: url('../assets/images/arrow/arrow-black.svg');
}
.none\:bg-link-arrow-blue {
background-image: url('../images/arrow/arrow-blue.svg');
background-image: url('../assets/images/arrow/arrow-blue.svg');
}
.none\:bg-link-arrow-green {
background-image: url('../images/arrow/arrow-green.svg');
background-image: url('../assets/images/arrow/arrow-green.svg');
}
.none\:from-rectangle96 {
@ -22567,6 +22571,10 @@ video {
height: 100vh;
}
.none\:h-custom {
height: 22rem;
}
.none\:text-xs {
font-size: 0.75rem;
line-height: 1rem;
@ -37912,15 +37920,15 @@ video {
}
.sm\:bg-link-arrow-black {
background-image: url('../images/arrow/arrow-black.svg');
background-image: url('../assets/images/arrow/arrow-black.svg');
}
.sm\:bg-link-arrow-blue {
background-image: url('../images/arrow/arrow-blue.svg');
background-image: url('../assets/images/arrow/arrow-blue.svg');
}
.sm\:bg-link-arrow-green {
background-image: url('../images/arrow/arrow-green.svg');
background-image: url('../assets/images/arrow/arrow-green.svg');
}
.sm\:from-rectangle96 {
@ -40451,6 +40459,10 @@ video {
height: 100vh;
}
.sm\:h-custom {
height: 22rem;
}
.sm\:text-xs {
font-size: 0.75rem;
line-height: 1rem;
@ -55796,15 +55808,15 @@ video {
}
.md\:bg-link-arrow-black {
background-image: url('../images/arrow/arrow-black.svg');
background-image: url('../assets/images/arrow/arrow-black.svg');
}
.md\:bg-link-arrow-blue {
background-image: url('../images/arrow/arrow-blue.svg');
background-image: url('../assets/images/arrow/arrow-blue.svg');
}
.md\:bg-link-arrow-green {
background-image: url('../images/arrow/arrow-green.svg');
background-image: url('../assets/images/arrow/arrow-green.svg');
}
.md\:from-rectangle96 {
@ -58335,6 +58347,10 @@ video {
height: 100vh;
}
.md\:h-custom {
height: 22rem;
}
.md\:text-xs {
font-size: 0.75rem;
line-height: 1rem;
@ -73680,15 +73696,15 @@ video {
}
.lg\:bg-link-arrow-black {
background-image: url('../images/arrow/arrow-black.svg');
background-image: url('../assets/images/arrow/arrow-black.svg');
}
.lg\:bg-link-arrow-blue {
background-image: url('../images/arrow/arrow-blue.svg');
background-image: url('../assets/images/arrow/arrow-blue.svg');
}
.lg\:bg-link-arrow-green {
background-image: url('../images/arrow/arrow-green.svg');
background-image: url('../assets/images/arrow/arrow-green.svg');
}
.lg\:from-rectangle96 {
@ -76219,6 +76235,10 @@ video {
height: 100vh;
}
.lg\:h-custom {
height: 22rem;
}
.lg\:text-xs {
font-size: 0.75rem;
line-height: 1rem;
@ -91564,15 +91584,15 @@ video {
}
.xl\:bg-link-arrow-black {
background-image: url('../images/arrow/arrow-black.svg');
background-image: url('../assets/images/arrow/arrow-black.svg');
}
.xl\:bg-link-arrow-blue {
background-image: url('../images/arrow/arrow-blue.svg');
background-image: url('../assets/images/arrow/arrow-blue.svg');
}
.xl\:bg-link-arrow-green {
background-image: url('../images/arrow/arrow-green.svg');
background-image: url('../assets/images/arrow/arrow-green.svg');
}
.xl\:from-rectangle96 {
@ -94103,6 +94123,10 @@ video {
height: 100vh;
}
.xl\:h-custom {
height: 22rem;
}
.xl\:text-xs {
font-size: 0.75rem;
line-height: 1rem;
@ -109448,15 +109472,15 @@ video {
}
.xxl\:bg-link-arrow-black {
background-image: url('../images/arrow/arrow-black.svg');
background-image: url('../assets/images/arrow/arrow-black.svg');
}
.xxl\:bg-link-arrow-blue {
background-image: url('../images/arrow/arrow-blue.svg');
background-image: url('../assets/images/arrow/arrow-blue.svg');
}
.xxl\:bg-link-arrow-green {
background-image: url('../images/arrow/arrow-green.svg');
background-image: url('../assets/images/arrow/arrow-green.svg');
}
.xxl\:from-rectangle96 {
@ -111987,6 +112011,10 @@ video {
height: 100vh;
}
.xxl\:h-custom {
height: 22rem;
}
.xxl\:text-xs {
font-size: 0.75rem;
line-height: 1rem;
@ -127332,15 +127360,15 @@ video {
}
.xxxl\:bg-link-arrow-black {
background-image: url('../images/arrow/arrow-black.svg');
background-image: url('../assets/images/arrow/arrow-black.svg');
}
.xxxl\:bg-link-arrow-blue {
background-image: url('../images/arrow/arrow-blue.svg');
background-image: url('../assets/images/arrow/arrow-blue.svg');
}
.xxxl\:bg-link-arrow-green {
background-image: url('../images/arrow/arrow-green.svg');
background-image: url('../assets/images/arrow/arrow-green.svg');
}
.xxxl\:from-rectangle96 {
@ -129871,6 +129899,10 @@ video {
height: 100vh;
}
.xxxl\:h-custom {
height: 22rem;
}
.xxxl\:text-xs {
font-size: 0.75rem;
line-height: 1rem;
@ -143726,4 +143758,4 @@ video {
-webkit-animation: bounce 1s infinite;
animation: bounce 1s infinite;
}
}
}

2
src/styles.css → src/css/styles.css
View File

@ -3,7 +3,7 @@
@font-face {
font-family: 'Helvetica Nueu';
src: local('Helvetica Nueu'), url("./assets/fonts/HelveticaNeue.ttc");
src: local('Helvetica Nueu'), url("../assets/fonts/HelveticaNeue.ttc");
}
@tailwind utilities;

22
index.html → src/index.html
View File

@ -3,16 +3,16 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/styles.css" rel="stylesheet" />
<link href="./css/style.min.css" rel="stylesheet" />
<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">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="/./assets/images/favicon/site.webmanifest">
<link rel="mask-icon" href="./assets/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="/src/assets/images/favicon/site.webmanifest">
<link rel="mask-icon" href="assets/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
</head>
@ -34,7 +34,7 @@
<ul class="md:flex">
<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>
<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">
<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"><a class="font-special font-medium text-xs whitespace-nowrap hover:text-blue hover:underline" href="">Guides</a></li>
@ -47,7 +47,7 @@
</li>
<li class="items-center menu-item relative mb-8 cursor-pointer md:flex md:m-0 md:py-2">
<a class="font-special font-bold text-xs" href="">About us</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">
<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>
@ -100,17 +100,17 @@
<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">
<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">
<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">
<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>

0
src/main.js → src/js/main.js
View File