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

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

58
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. 1. Install the dependencies:
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:
```bash ```bash
git clone git@github.com:salttechno/tailwindcss-boilerplate.git <YOUR_PROJECT_NAME> # npm
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 install npm install
# OR if you are using Yarn
yarn
``` ```
3. Start the development server: 2. Start the development server:
```bash ```bash
# if you are using npm # gulp
npm run dev gulp
# OR if you are using Yarn
yarn run dev
``` ```
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 ## 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:
```bash ```bash
# if you are using npm # gulp
npm run build 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"); const { watch, series, src, dest } = require("gulp");
var browserSync = require("browser-sync").create(); var browserSync = require("browser-sync").create();
const concat = require('gulp-concat');
var postcss = require("gulp-postcss"); var postcss = require("gulp-postcss");
const imagemin = require("gulp-imagemin"); const imagemin = require("gulp-imagemin");
const uglify = require('gulp-uglify-es').default; const uglify = require('gulp-uglify-es').default;
function cssTask(cb) { function cssTask(cb) {
return src("./src/*.css") return src("./src/css/*.css")
.pipe(postcss()) .pipe(postcss())
.pipe(dest("./dist/css")) .pipe(concat('style.min.css'))
.pipe(dest("./src/css"))
.pipe(browserSync.stream()); .pipe(browserSync.stream());
cb(); cb();
} }
function scriptsTask(cb) { function scriptsTask(cb) {
return src('./src/*.js') return src('./src/js/*.js')
.pipe(uglify()) .pipe(uglify())
.pipe(dest('./dist/js')) .pipe(dest('./dist/js'))
.pipe(browserSync.stream()); .pipe(browserSync.stream());
@ -22,14 +24,14 @@ function scriptsTask(cb) {
// Task for minifying images // Task for minifying images
function imageminTask(cb) { function imageminTask(cb) {
return src("./assets/images/**/*") return src("./src/assets/images/**/*")
.pipe(imagemin()) .pipe(imagemin())
.pipe(dest("./dist/assets/images")); .pipe(dest("./dist/assets/images"));
cb(); cb();
} }
function htmlBuild(cb) { function htmlBuild(cb) {
return src("./*.html") return src("./src/*.html")
.pipe(dest("./dist")) .pipe(dest("./dist"))
cb(); cb();
} }
@ -37,7 +39,7 @@ function htmlBuild(cb) {
function browsersyncServe(cb) { function browsersyncServe(cb) {
browserSync.init({ browserSync.init({
server: { server: {
baseDir: "./", baseDir: "src/",
}, },
}); });
cb(); cb();
@ -50,12 +52,22 @@ function browsersyncReload(cb) {
// Watch Files & Reload browser after tasks // Watch Files & Reload browser after tasks
function watchTask() { function watchTask() {
watch("./**/*.html", browsersyncReload); watch("./src/**/*.html", browsersyncReload);
watch(["./src/*.css"], series(cssTask, browsersyncReload)); watch(["./src/css/*.css"], series(cssTask, browsersyncReload));
watch(["./src/*.js"], series(scriptsTask, 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.default = series(cssTask, scriptsTask, htmlBuild, browsersyncServe, watchTask);
exports.css = cssTask; exports.css = cssTask;
exports.images = imageminTask; exports.images = imageminTask;

46
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "dapp-connect", "name": "dapp-connect",
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"gulp-concat": "^2.6.1",
"gulp-uglify-es": "^3.0.0" "gulp-uglify-es": "^3.0.0"
}, },
"devDependencies": { "devDependencies": {
@ -1880,6 +1881,14 @@
"typedarray": "^0.0.6" "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": { "node_modules/config-chain": {
"version": "1.1.12", "version": "1.1.12",
"resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz", "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
@ -4612,6 +4621,19 @@
"object.assign": "^4.1.0" "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": { "node_modules/gulp-imagemin": {
"version": "7.1.0", "version": "7.1.0",
"resolved": "https://registry.npmjs.org/gulp-imagemin/-/gulp-imagemin-7.1.0.tgz", "resolved": "https://registry.npmjs.org/gulp-imagemin/-/gulp-imagemin-7.1.0.tgz",
@ -9666,7 +9688,6 @@
"version": "2.0.5", "version": "2.0.5",
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
"dev": true,
"dependencies": { "dependencies": {
"readable-stream": "~2.3.6", "readable-stream": "~2.3.6",
"xtend": "~4.0.1" "xtend": "~4.0.1"
@ -10336,7 +10357,6 @@
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
"dev": true,
"engines": { "engines": {
"node": ">=0.4" "node": ">=0.4"
} }
@ -11898,6 +11918,14 @@
"typedarray": "^0.0.6" "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": { "config-chain": {
"version": "1.1.12", "version": "1.1.12",
"resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz", "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": { "gulp-imagemin": {
"version": "7.1.0", "version": "7.1.0",
"resolved": "https://registry.npmjs.org/gulp-imagemin/-/gulp-imagemin-7.1.0.tgz", "resolved": "https://registry.npmjs.org/gulp-imagemin/-/gulp-imagemin-7.1.0.tgz",
@ -18109,7 +18147,6 @@
"version": "2.0.5", "version": "2.0.5",
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==", "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
"dev": true,
"requires": { "requires": {
"readable-stream": "~2.3.6", "readable-stream": "~2.3.6",
"xtend": "~4.0.1" "xtend": "~4.0.1"
@ -18647,8 +18684,7 @@
"xtend": { "xtend": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
"dev": true
}, },
"y18n": { "y18n": {
"version": "4.0.1", "version": "4.0.1",

3
package.json
View File

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

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

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

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

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

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

@ -3,16 +3,16 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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> <title>DApp Connect</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 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="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="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="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="/./assets/images/favicon/site.webmanifest"> <link rel="manifest" href="/src/assets/images/favicon/site.webmanifest">
<link rel="mask-icon" href="./assets/images/favicon/safari-pinned-tab.svg" color="#5bbad5"> <link rel="mask-icon" href="assets/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
</head> </head>
@ -34,7 +34,7 @@
<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="">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="">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="">Guides</a></li>
@ -47,7 +47,7 @@
</li> </li>
<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="font-special font-bold text-xs" href="">About us</a> <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"> <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="">Careers</a></li>
@ -100,17 +100,17 @@
<h2 class="font-bold text-sm leading-6 mb-18">The future of Communication</h2> <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="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">Leveraging peer-to-peer messaging protocols and tools for strong end-to-end encryption, DappConnect is designed 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">Adopt DappConnect to protect your users from censorship and remove the need for 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>

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