252 changed files with 51186 additions and 96560 deletions
@ -1,5 +0,0 @@ |
|||
{ |
|||
"presets": [ |
|||
"@babel/preset-env" |
|||
] |
|||
} |
|||
@ -1,3 +1,23 @@ |
|||
node_modules |
|||
dist |
|||
build |
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. |
|||
|
|||
# dependencies |
|||
/node_modules |
|||
/.pnp |
|||
.pnp.js |
|||
|
|||
# testing |
|||
/coverage |
|||
|
|||
# production |
|||
/build |
|||
|
|||
# misc |
|||
.DS_Store |
|||
.env.local |
|||
.env.development.local |
|||
.env.test.local |
|||
.env.production.local |
|||
|
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
|
|||
@ -1,21 +0,0 @@ |
|||
MIT License |
|||
|
|||
Copyright (c) 2018 cssninjaStudio |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy |
|||
of this software and associated documentation files (the "Software"), to deal |
|||
in the Software without restriction, including without limitation the rights |
|||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|||
copies of the Software, and to permit persons to whom the Software is |
|||
furnished to do so, subject to the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be included in all |
|||
copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|||
SOFTWARE. |
|||
@ -1,26 +0,0 @@ |
|||
module.exports = { |
|||
config: { |
|||
port: 9050 |
|||
}, |
|||
paths: { |
|||
root: "./", |
|||
src: { |
|||
base: "./src", |
|||
css: "./src/css", |
|||
js: "./src/js", |
|||
img: "./src/img" |
|||
}, |
|||
dist: { |
|||
base: "./dist", |
|||
css: "./dist/css", |
|||
js: "./dist/js", |
|||
img: "./dist/img" |
|||
}, |
|||
build: { |
|||
base: "./build", |
|||
css: "./build/css", |
|||
js: "./build/js", |
|||
img: "./build/img" |
|||
} |
|||
} |
|||
} |
|||
@ -1,2 +0,0 @@ |
|||
[1129/113133.419:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) |
|||
[1220/235610.433:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 495 B |
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 160 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 694 B |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 338 B |
|
Before Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 632 B |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 816 B |
|
Before Width: | Height: | Size: 7.7 KiB |
@ -1,798 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
|||
<title>Fresh</title> |
|||
|
|||
<link rel="icon" type="image/png" href="img/favicon.png" /> |
|||
<link rel="preconnect" href="https://fonts.gstatic.com"> |
|||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> |
|||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet"> |
|||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
|||
|
|||
<link rel="stylesheet" href="css/app.css"> |
|||
<link rel="stylesheet" type="text/css" href="css/main.css"> |
|||
</head> |
|||
|
|||
<body> |
|||
|
|||
<div id="pageloader" class="pageloader"></div> |
|||
<div id="infraloader" class="infraloader is-active"></div> |
|||
<section class="hero is-fullheight is-default is-bold"> |
|||
|
|||
<nav x-data="initNavbar()" class="navbar is-fresh is-transparent no-shadow" role="navigation" |
|||
aria-label="main navigation"> |
|||
<div class="container"> |
|||
<div class="navbar-brand"> |
|||
<a class="navbar-item" href="https://cssninja.io"> |
|||
<img src="img/logo/fresh-alt.svg" alt="" width="112" height="28"> |
|||
</a> |
|||
|
|||
<a @click="openSidebar()" class="navbar-item is-hidden-desktop is-hidden-tablet"> |
|||
<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;" :class="{ |
|||
'open': $store.app.isSiderbarOpen, |
|||
'': !$store.app.isSiderbarOpen |
|||
}"> |
|||
<svg width="1000px" height="1000px"> |
|||
<path class="path1" |
|||
d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path> |
|||
<path class="path2" d="M 300 500 L 700 500"></path> |
|||
<path class="path3" |
|||
d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path> |
|||
</svg> |
|||
<button id="menu-icon-trigger" class="menu-icon-trigger"></button> |
|||
</div> |
|||
</a> |
|||
|
|||
<div class="navbar-burger" @click="openMobileMenu()"> |
|||
<span class="menu-toggle"> |
|||
<span class="icon-box-toggle" :class="{ |
|||
'active': mobileOpen, |
|||
'': !mobileOpen |
|||
}"> |
|||
<span class="rotate"> |
|||
<i class="icon-line-top"></i> |
|||
<i class="icon-line-center"></i> |
|||
<i class="icon-line-bottom"></i> |
|||
</span> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div id="navbar-menu" class="navbar-menu is-static" :class="{ |
|||
'is-active': mobileOpen, |
|||
'': !mobileOpen |
|||
}"> |
|||
|
|||
<div class="navbar-start"> |
|||
<a @click="openSidebar()" class="navbar-item is-hidden-mobile"> |
|||
<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;" :class="{ |
|||
'open': $store.app.isSiderbarOpen, |
|||
'': !$store.app.isSiderbarOpen |
|||
}"> |
|||
<svg width="1000px" height="1000px"> |
|||
<path class="path1" |
|||
d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"> |
|||
</path> |
|||
<path class="path2" d="M 300 500 L 700 500"></path> |
|||
<path class="path3" |
|||
d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"> |
|||
</path> |
|||
</svg> |
|||
<button id="menu-icon-trigger" class="menu-icon-trigger"></button> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="navbar-end"> |
|||
<a href="#" class="navbar-item is-secondary"> |
|||
Features |
|||
</a> |
|||
<a href="#" class="navbar-item is-secondary"> |
|||
Pricing |
|||
</a> |
|||
<a href="#" class="navbar-item is-secondary modal-trigger" data-modal="auth-modal"> |
|||
Log in |
|||
</a> |
|||
<a class="navbar-item"> |
|||
<span class="button signup-button rounded secondary-btn raised"> |
|||
Sign up |
|||
</span> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
<nav x-data="initNavbar()" x-on:scroll.window="scroll()" id="navbar-clone" class="navbar is-fresh is-transparent" role="navigation" aria-label="main navigation" :class="{ |
|||
'is-active': scrolled, |
|||
'': !scrolled |
|||
}"> |
|||
<div class="container"> |
|||
<div class="navbar-brand"> |
|||
<a class="navbar-item" href="https://cssninja.io"> |
|||
<img src="img/logo/fresh-alt.svg" alt="" width="112" height="28"> |
|||
</a> |
|||
|
|||
<a @click="openSidebar()" class="navbar-item is-hidden-desktop is-hidden-tablet"> |
|||
<div id="menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;" :class="{ |
|||
'open': $store.app.isSiderbarOpen, |
|||
'': !$store.app.isSiderbarOpen |
|||
}"> |
|||
<svg width="1000px" height="1000px"> |
|||
<path class="path1" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path> |
|||
<path class="path2" d="M 300 500 L 700 500"></path> |
|||
<path class="path3" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path> |
|||
</svg> |
|||
<button id="menu-icon-trigger" class="menu-icon-trigger"></button> |
|||
</div> |
|||
</a> |
|||
|
|||
<div class="navbar-burger" @click="openMobileMenu()"> |
|||
<span class="menu-toggle"> |
|||
<span class="icon-box-toggle" :class="{ |
|||
'active': mobileOpen, |
|||
'': !mobileOpen |
|||
}"> |
|||
<span class="rotate"> |
|||
<i class="icon-line-top"></i> |
|||
<i class="icon-line-center"></i> |
|||
<i class="icon-line-bottom"></i> |
|||
</span> |
|||
</span> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div id="cloned-navbar-menu" class="navbar-menu is-fixed" :class="{ |
|||
'is-active': mobileOpen, |
|||
'': !mobileOpen |
|||
}"> |
|||
|
|||
<div class="navbar-start"> |
|||
<a @click="openSidebar()" class="navbar-item is-hidden-mobile"> |
|||
<div id="cloned-menu-icon-wrapper" class="menu-icon-wrapper" style="visibility: visible;" :class="{ |
|||
'open': $store.app.isSiderbarOpen, |
|||
'': !$store.app.isSiderbarOpen |
|||
}"> |
|||
<svg width="1000px" height="1000px"> |
|||
<path class="path1" d="M 300 400 L 700 400 C 900 400 900 750 600 850 A 400 400 0 0 1 200 200 L 800 800"></path> |
|||
<path class="path2" d="M 300 500 L 700 500"></path> |
|||
<path class="path3" d="M 700 600 L 300 600 C 100 600 100 200 400 150 A 400 380 0 1 1 200 800 L 800 200"></path> |
|||
</svg> |
|||
<button id="cloned-menu-icon-trigger" class="menu-icon-trigger"></button> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="navbar-end"> |
|||
<a href="#" class="navbar-item is-secondary"> |
|||
Features |
|||
</a> |
|||
<a href="#" class="navbar-item is-secondary"> |
|||
Pricing |
|||
</a> |
|||
<a href="#" class="navbar-item is-secondary modal-trigger" data-modal="auth-modal"> |
|||
Log in |
|||
</a> |
|||
<a class="navbar-item"> |
|||
<span class="button signup-button rounded secondary-btn raised"> |
|||
Sign up |
|||
</span> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
<div class="hero-body"> |
|||
<div class="container"> |
|||
<div class="columns is-vcentered"> |
|||
<div class="column is-5 is-offset-1 landing-caption"> |
|||
<h1 class="title is-1 is-bold is-spaced"> |
|||
Manage, Deploy. |
|||
</h1> |
|||
<h2 class="subtitle is-5 is-muted">Lorem ipsum sit dolor amet is a dummy text used by typography industry </h2> |
|||
<div class="button-wrap"> |
|||
<a class="button cta is-rounded primary-btn raised"> |
|||
Get Started |
|||
</a> |
|||
<a class="button cta is-rounded"> |
|||
Discover |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="column is-5"> |
|||
<figure class="image is-4by3"> |
|||
<img src="img/illustrations/worker.svg" alt="Description"> |
|||
</figure> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="hero-foot mb-20"> |
|||
<div class="container"> |
|||
<div class="tabs is-centered"> |
|||
<ul> |
|||
<li><a><img class="partner-logo" src="img/logo/clients/systek.svg"></a></li> |
|||
<li><a><img class="partner-logo" src="img/logo/clients/tribe.svg"></a></li> |
|||
<li><a><img class="partner-logo" src="img/logo/clients/kromo.svg"></a></li> |
|||
<li><a><img class="partner-logo" src="img/logo/clients/infinite.svg"></a></li> |
|||
<li><a><img class="partner-logo" src="img/logo/clients/gutwork.svg"></a></li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<section class="section section-feature-grey is-medium"> |
|||
<div class="container"> |
|||
<div class="title-wrapper has-text-centered"> |
|||
<h2 class="title is-2">Great Power Comes </h2> |
|||
<h3 class="subtitle is-5 is-muted">With great Responsability</h3> |
|||
<div class="divider is-centered"></div> |
|||
</div> |
|||
|
|||
<div class="content-wrapper"> |
|||
<div class="columns"> |
|||
<div class="column is-one-third"> |
|||
<div class="feature-card is-bordered has-text-centered is-feature-reveal"> |
|||
<div class="card-title"> |
|||
<h4>App builder</h4> |
|||
</div> |
|||
<div class="card-icon"> |
|||
<img src="img/icons/web.svg"> |
|||
</div> |
|||
<div class="card-text"> |
|||
<p>This is some cool explanatory text that is on two rows</p> |
|||
</div> |
|||
<div class="card-action"> |
|||
<a href="#" class="button btn-align-md primary-btn raised">Free Trial</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="feature-card is-bordered has-text-centered is-feature-reveal"> |
|||
<div class="card-title"> |
|||
<h4>Cloud integration</h4> |
|||
</div> |
|||
<div class="card-icon"> |
|||
<img src="img/icons/rocket.svg"> |
|||
</div> |
|||
<div class="card-text"> |
|||
<p>This is some explanatory text that is on two rows</p> |
|||
</div> |
|||
<div class="card-action"> |
|||
<a href="#" class="button btn-align-md primary-btn raised">Get Started</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="feature-card is-bordered has-text-centered is-feature-reveal"> |
|||
<div class="card-title"> |
|||
<h4>Addons & Plugins</h4> |
|||
</div> |
|||
<div class="card-icon"> |
|||
<img src="img/icons/light-bulb.svg"> |
|||
</div> |
|||
<div class="card-text"> |
|||
<p>This is some explanatory text that is on two rows</p> |
|||
</div> |
|||
<div class="card-action"> |
|||
<a href="#" class="button btn-align-md primary-btn raised">Get Started</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<section class="section is-medium"> |
|||
<div class="container"> |
|||
<div class="title-wrapper has-text-centered"> |
|||
<h2 class="title is-2">Awesome Features</h2> |
|||
<h3 class="subtitle is-5 is-muted">To make you super happy</h3> |
|||
<div class="divider is-centered"></div> |
|||
</div> |
|||
|
|||
<div class="columns is-vcentered side-feature mt-60"> |
|||
<div class="column is-4 is-offset-2"> |
|||
<h3 class="title is-3 mb-10 is-title-reveal">Connect with people</h3> |
|||
<p class="subtitle is-5 is-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.</p> |
|||
</div> |
|||
<div class="column is-5"> |
|||
<img src="img/illustrations/features/feature-1.png" alt=""> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="columns is-vcentered side-feature mt-60"> |
|||
<div class="column is-5 is-offset-1"> |
|||
<img src="img/illustrations/features/feature-2.png" alt=""> |
|||
</div> |
|||
<div class="column is-4 is-offset-1"> |
|||
<h3 class="title is-3 mb-10 is-title-reveal">Collaborate easily</h3> |
|||
<p class="subtitle is-5 is-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<section class="section section-feature-grey is-medium"> |
|||
<div class="container"> |
|||
|
|||
<div class="columns is-vcentered app-side"> |
|||
<div class="column is-5 is-offset-1"> |
|||
<h3 class="title is-3 is-spaced is-title-reveal">An intuitive app</h3> |
|||
<p class="subtitle is-5 is-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum audissem Antiochum, Brute, ut solebam, cum M. Quae diligentissime contra Aristonem dicuntur a Chryippo.</p> |
|||
</div> |
|||
<div class="column is-10"> |
|||
<div class="has-text-centered"> |
|||
<img class="pushed-image" src="img/illustrations/mockups/app-mockup.png"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<section class="section is-medium"> |
|||
<div class="container"> |
|||
<div class="title-wrapper has-text-centered"> |
|||
<h2 class="title is-2">Wait, there's more</h2> |
|||
<h3 class="subtitle is-5 is-muted">To make you super happy</h3> |
|||
<div class="divider is-centered"></div> |
|||
</div> |
|||
|
|||
<div class="content-wrapper"> |
|||
<div class="columns is-multiline icon-list"> |
|||
<div class="column is-3"> |
|||
<div class="feature-icon has-text-centered"> |
|||
<div class="icon-wrap is-icon-reveal"> |
|||
<ion-icon name="logo-github" size="large"></ion-icon> |
|||
</div> |
|||
<h4>Github</h4> |
|||
<p>Some feature text</p> |
|||
</div> |
|||
</div> |
|||
<div class="column is-3"> |
|||
<div class="feature-icon has-text-centered"> |
|||
<div class="icon-wrap is-icon-reveal"> |
|||
<ion-icon name="logo-bitbucket" size="large"></ion-icon> |
|||
</div> |
|||
<h4>Bitbucket</h4> |
|||
<p>Some feature text</p> |
|||
</div> |
|||
</div> |
|||
<div class="column is-3"> |
|||
<div class="feature-icon has-text-centered"> |
|||
<div class="icon-wrap is-icon-reveal"> |
|||
<ion-icon name="logo-slack" size="large"></ion-icon> |
|||
</div> |
|||
<h4>Slack</h4> |
|||
<p>Some feature text</p> |
|||
</div> |
|||
</div> |
|||
<div class="column is-3"> |
|||
<div class="feature-icon has-text-centered"> |
|||
<div class="icon-wrap is-icon-reveal"> |
|||
<ion-icon name="logo-npm" size="large"></ion-icon> |
|||
</div> |
|||
<h4>Npm</h4> |
|||
<p>Some feature text</p> |
|||
</div> |
|||
</div> |
|||
<div class="column is-3"> |
|||
<div class="feature-icon has-text-centered"> |
|||
<div class="icon-wrap is-icon-reveal"> |
|||
<ion-icon name="logo-javascript" size="large"></ion-icon> |
|||
</div> |
|||
<h4>Javascript</h4> |
|||
<p>Some feature text</p> |
|||
</div> |
|||
</div> |
|||
<div class="column is-3"> |
|||
<div class="feature-icon has-text-centered"> |
|||
<div class="icon-wrap is-icon-reveal"> |
|||
<ion-icon name="logo-nodejs" size="large"></ion-icon> |
|||
</div> |
|||
<h4>Nodejs</h4> |
|||
<p>Some feature text</p> |
|||
</div> |
|||
</div> |
|||
<div class="column is-3"> |
|||
<div class="feature-icon has-text-centered"> |
|||
<div class="icon-wrap is-icon-reveal"> |
|||
<ion-icon name="logo-angular" size="large"></ion-icon> |
|||
</div> |
|||
<h4>Angular</h4> |
|||
<p>Some feature text</p> |
|||
</div> |
|||
</div> |
|||
<div class="column is-3"> |
|||
<div class="feature-icon has-text-centered"> |
|||
<div class="icon-wrap is-icon-reveal"> |
|||
<ion-icon name="logo-google" size="large"></ion-icon> |
|||
</div> |
|||
<h4>Google</h4> |
|||
<p>Some feature text</p> |
|||
</div> |
|||
</div> |
|||
<div class="column is-3"> |
|||
<div class="feature-icon has-text-centered"> |
|||
<div class="icon-wrap is-icon-reveal"> |
|||
<ion-icon name="logo-python" size="large"></ion-icon> |
|||
</div> |
|||
<h4>Python</h4> |
|||
<p>Some feature text</p> |
|||
</div> |
|||
</div> |
|||
<div class="column is-3"> |
|||
<div class="feature-icon has-text-centered"> |
|||
<div class="icon-wrap is-icon-reveal"> |
|||
<ion-icon name="logo-wordpress" size="large"></ion-icon> |
|||
</div> |
|||
<h4>WordPress</h4> |
|||
<p>Some feature text</p> |
|||
</div> |
|||
</div> |
|||
<div class="column is-3"> |
|||
<div class="feature-icon has-text-centered"> |
|||
<div class="icon-wrap is-icon-reveal"> |
|||
<ion-icon name="logo-android" size="large"></ion-icon> |
|||
</div> |
|||
<h4>Android</h4> |
|||
<p>Some feature text</p> |
|||
</div> |
|||
</div> |
|||
<div class="column is-3"> |
|||
<div class="feature-icon has-text-centered"> |
|||
<div class="icon-wrap is-icon-reveal"> |
|||
<ion-icon name="logo-apple" size="large"></ion-icon> |
|||
</div> |
|||
<h4>Apple</h4> |
|||
<p>Some feature text</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<section class="section is-medium has-background-image" data-background="https://source.unsplash.com/g30P1zcOzXo/1600x900" data-color="#4FC1EA" data-color-opacity=".6"> |
|||
<div class="overlay"></div> |
|||
<div class="container"> |
|||
|
|||
<div class="title-wrapper has-text-centered"> |
|||
<h2 class="title is-2 light-text is-spaced">Our clients love us</h2> |
|||
<h3 class="subtitle is-5 light-text">Look at what they say about us</h3> |
|||
</div> |
|||
|
|||
<div class="content-wrapper"> |
|||
<div class="columns is-vcentered"> |
|||
<div class="column is-4"> |
|||
<figure class="testimonial"> |
|||
<blockquote> |
|||
Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at. |
|||
</blockquote> |
|||
<div class="author"> |
|||
<img src="img/illustrations/faces/1.png" alt=""/> |
|||
<h5>Irma Walters</h5><span>Accountant</span> |
|||
</div> |
|||
</figure> |
|||
</div> |
|||
<div class="column is-4"> |
|||
<figure class="testimonial"> |
|||
<blockquote> |
|||
Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at. |
|||
</blockquote> |
|||
<div class="author"> |
|||
<img src="img/illustrations/faces/2.png" alt=""/> |
|||
<h5>John Bradley</h5><span>Financial Analyst</span> |
|||
</div> |
|||
</figure> |
|||
</div> |
|||
<div class="column is-4"> |
|||
<figure class="testimonial"> |
|||
<blockquote> |
|||
Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at. |
|||
</blockquote> |
|||
<div class="author"> |
|||
<img src="img/illustrations/faces/3.png" alt=""/> |
|||
<h5>Gary Blackman</h5><span>HR Manager</span> |
|||
</div> |
|||
</figure> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<section class="section is-medium"> |
|||
<div class="container"> |
|||
<div class="title-wrapper has-text-centered"> |
|||
<h2 class="title is-2">Get Started</h2> |
|||
<h3 class="subtitle is-5 is-muted">Choose one of our plans</h3> |
|||
<div class="divider is-centered"></div> |
|||
</div> |
|||
|
|||
<div class="pricing-wrap"> |
|||
<div class="feature-card is-pricing has-text-centered"> |
|||
<h3 class="plan-name">Starter</h3> |
|||
<img src="img/illustrations/pricing/1.svg" alt=""/> |
|||
<div class="price"> |
|||
0 |
|||
</div> |
|||
<p>Sign up, get some awesome features and get started now</p> |
|||
<a class="button is-fullwidth is-bold">Get Started</a> |
|||
</div> |
|||
<div class="feature-card is-pricing has-text-centered"> |
|||
<h3 class="plan-name">Pro</h3> |
|||
<img src="img/illustrations/pricing/2.svg" alt=""/> |
|||
<div class="price"> |
|||
15 |
|||
</div> |
|||
<p>Sign up, get some awesome features and get started now</p> |
|||
<a class="button is-fullwidth primary-btn raised is-bold">Get Started</a> |
|||
</div> |
|||
<div class="feature-card is-pricing has-text-centered"> |
|||
<h3 class="plan-name">Business</h3> |
|||
<img src="img/illustrations/pricing/3.svg" alt=""/> |
|||
<div class="price"> |
|||
30 |
|||
</div> |
|||
<p>Sign up, get some awesome features and get started now</p> |
|||
<a class="button is-fullwidth is-bold">Get Started</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<section class="section section-light-grey is-medium"> |
|||
<div class="container"> |
|||
<div class="title-wrapper has-text-centered"> |
|||
<h2 class="title is-2 is-spaced">Drop us a line or two </h2> |
|||
<h3 class="subtitle is-5 is-muted">We'd love to hear from You</h3> |
|||
<div class="divider is-centered"></div> |
|||
</div> |
|||
|
|||
<div class="content-wrapper"> |
|||
<div class="columns"> |
|||
<div class="column is-6 is-offset-3"> |
|||
<form> |
|||
<div class="columns is-multiline"> |
|||
<div class="column is-6"> |
|||
<input class="input is-medium" type="text" placeholder="First Name *"> |
|||
</div> |
|||
<div class="column is-6"> |
|||
<input class="input is-medium" type="text" placeholder="Last Name *"> |
|||
</div> |
|||
<div class="column is-6"> |
|||
<input class="input is-medium" type="text" placeholder="Email *"> |
|||
</div> |
|||
<div class="column is-6"> |
|||
<input class="input is-medium" type="email" placeholder="Company"> |
|||
</div> |
|||
<div class="column is-12"> |
|||
<textarea class="textarea" rows="6" placeholder=""></textarea> |
|||
</div> |
|||
<div class="column is-12"> |
|||
<div class="form-footer has-text-right mt-10"> |
|||
<button class="button cta is-large primary-btn form-button raised is-clear">Send Message</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
|
|||
|
|||
|
|||
<div id="auth-modal" class="modal"> |
|||
<div class="modal-background"></div> |
|||
<div class="modal-content"> |
|||
<div class="flex-card auth-card"> |
|||
<div class="tabs-wrapper"> |
|||
<div class="tabs"> |
|||
<ul> |
|||
<li class="is-active" data-tab="login-tab"><a>Login</a></li> |
|||
<li data-tab="register-tab"><a>Register</a></li> |
|||
</ul> |
|||
</div> |
|||
<div id="login-tab" class="tab-content is-active"> |
|||
<div class="field"> |
|||
<label>Username</label> |
|||
<div class="control"> |
|||
<input type="text" class="input is-medium" placeholder="Enter username"> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Password</label> |
|||
<div class="control"> |
|||
<input type="password" class="input is-medium" placeholder="Enter password"> |
|||
</div> |
|||
</div> |
|||
|
|||
<a class="button is-fullwidth secondary-btn is-rounded raised">Log in</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<button class="modal-close is-large" aria-label="close"></button> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
<footer class="footer footer-dark"> |
|||
<div class="container"> |
|||
<div class="columns"> |
|||
<div class="column"> |
|||
<div class="footer-logo"> |
|||
<img src="img/logo/fresh-white-alt.svg"> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="footer-column"> |
|||
<div class="footer-header"> |
|||
<h3>Product</h3> |
|||
</div> |
|||
<ul class="link-list"> |
|||
<li><a href="#">Discover features</a></li> |
|||
<li><a href="#">Why choose our Product ?</a></li> |
|||
<li><a href="#">Compare features</a></li> |
|||
<li><a href="#">Our Roadmap</a></li> |
|||
<li><a href="#">Request features</a></li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="footer-column"> |
|||
<div class="footer-header"> |
|||
<h3>Docs</h3> |
|||
</div> |
|||
<ul class="link-list"> |
|||
<li><a href="#">Get Started</a></li> |
|||
<li><a href="#">User guides</a></li> |
|||
<li><a href="#">Admin guide</a></li> |
|||
<li><a href="#">Developers</a></li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="footer-column"> |
|||
<div class="footer-header"> |
|||
<h3>Blogroll</h3> |
|||
</div> |
|||
<ul class="link-list"> |
|||
<li><a href="#">Latest News</a></li> |
|||
<li><a href="#">Tech articles</a></li> |
|||
<li><a href="#">Video Blog</a></li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="footer-column"> |
|||
<div class="footer-header"> |
|||
<h3>Follow Us</h3> |
|||
<nav class="level is-mobile"> |
|||
<div class="level-left"> |
|||
<a class="level-item" href="https://github.com/#"> |
|||
<span class="icon"> |
|||
<ion-icon name="logo-github" size="large"></ion-icon> |
|||
</span> |
|||
</a> |
|||
<a class="level-item" href="https://facebook.com/#"> |
|||
<span class="icon"> |
|||
<ion-icon name="logo-facebook" size="large"></ion-icon> |
|||
</span> |
|||
</a> |
|||
<a class="level-item" href="https://google.com/#"> |
|||
<span class="icon"> |
|||
<ion-icon name="logo-google" size="large"></ion-icon> |
|||
</span> |
|||
</a> |
|||
<a class="level-item" href="https://linkedin.com/#"> |
|||
<span class="icon"> |
|||
<ion-icon name="logo-linkedin" size="large"></ion-icon> |
|||
</span> |
|||
</a> |
|||
</div> |
|||
</nav> |
|||
|
|||
<a href="https://bulma.io" target="_blank"> |
|||
<img src="img/logo/made-with-bulma.png" alt="Made with Bulma" width="128" height="24"> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</footer> |
|||
<!-- Back To Top Button --> |
|||
<div x-data="initBackToTop()" x-on:scroll.window="scroll($event)" @click="goTop($event)" id="backtotop"><a href="javascript:" :class="{ |
|||
'visible': scrolled, |
|||
'': !scrolled |
|||
}"></a></div> <div x-data="initSidebar()" class="sidebar" :class="{ |
|||
'is-active': $store.app.isSiderbarOpen, |
|||
'': !$store.app.isSiderbarOpen |
|||
}"> |
|||
<div class="sidebar-header"> |
|||
<img src="img/logo/fresh-square.svg"> |
|||
<a @click="closeSidebar()" class="sidebar-close" href="javascript:void(0);"><i data-feather="x"></i></a> |
|||
</div> |
|||
<div class="inner"> |
|||
<ul class="sidebar-menu"> |
|||
<li><span class="nav-section-title"></span></li> |
|||
<li @click="openSidebarMenu($event)" data-menu="sidebar-menu-1" class="have-children" :class="{ |
|||
'active': openedMenu === 'sidebar-menu-1', |
|||
'': openedMenu != 'sidebar-menu-1' |
|||
}"> |
|||
<a href="#"> |
|||
<span class="material-icons">apps</span> |
|||
<span>Apps</span> |
|||
</a> |
|||
<ul x-show.transition="openedMenu === 'sidebar-menu-1'"> |
|||
<li><a href="#">Dashboard</a></li> |
|||
<li><a href="#">Account</a></li> |
|||
<li><a href="#">Documents</a></li> |
|||
</ul> |
|||
</li> |
|||
<li @click="openSidebarMenu($event)" data-menu="sidebar-menu-2" class="have-children" :class="{ |
|||
'active': openedMenu === 'sidebar-menu-2', |
|||
'': openedMenu != 'sidebar-menu-2' |
|||
}"> |
|||
<a href="#"> |
|||
<span class="material-icons">duo</span> |
|||
<span>Messages</span> |
|||
</a> |
|||
<ul x-show.transition="openedMenu === 'sidebar-menu-2'"> |
|||
<li><a href="#">Inbox</a></li> |
|||
<li><a href="#">Compose</a></li> |
|||
<li><a href="#">Video</a></li> |
|||
</ul> |
|||
</li> |
|||
<li @click="openSidebarMenu($event)" data-menu="sidebar-menu-3" class="have-children" :class="{ |
|||
'active': openedMenu === 'sidebar-menu-3', |
|||
'': openedMenu != 'sidebar-menu-3' |
|||
}"> |
|||
<a href="#"> |
|||
<span class="material-icons">insert_photo</span> |
|||
<span>Media</span> |
|||
</a> |
|||
<ul x-show.transition="openedMenu === 'sidebar-menu-3'"> |
|||
<li><a href="#">Library</a></li> |
|||
<li><a href="#">Upload</a></li> |
|||
</ul> |
|||
</li> |
|||
<li @click="openSidebarMenu($event)" data-menu="sidebar-menu-4" class="have-children" :class="{ |
|||
'active': openedMenu === 'sidebar-menu-4', |
|||
'': openedMenu != 'sidebar-menu-4' |
|||
}"> |
|||
<a href="#"> |
|||
<span class="material-icons">policy</span> |
|||
<span>Settings</span> |
|||
</a> |
|||
<ul x-show.transition="openedMenu === 'sidebar-menu-4'"> |
|||
<li><a href="#">User settings</a></li> |
|||
<li><a href="#">App settings</a></li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script> |
|||
<script src="js/bundle.js"></script> |
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
File diff suppressed because one or more lines are too long
@ -1,186 +0,0 @@ |
|||
const { src, dest, task, watch, series, parallel } = require('gulp'); |
|||
const del = require('del'); |
|||
const options = require("./config"); |
|||
const browserSync = require('browser-sync').create(); |
|||
|
|||
const sass = require('gulp-sass'); |
|||
const bourbon = require('node-bourbon').includePaths; |
|||
const postcss = require('gulp-postcss'); |
|||
const concat = require('gulp-concat'); |
|||
const uglify = require('gulp-uglify'); |
|||
const imagemin = require('gulp-imagemin'); |
|||
const cleanCSS = require('gulp-clean-css'); |
|||
const purgecss = require('gulp-purgecss'); |
|||
const sourcemaps = require('gulp-sourcemaps'); |
|||
const autoprefixer = require('gulp-autoprefixer'); |
|||
const panini = require('panini'); |
|||
|
|||
const browserify = require("browserify"); |
|||
const babelify = require("babelify"); |
|||
const source = require("vinyl-source-stream"); |
|||
const nodepath = 'node_modules/'; |
|||
|
|||
sass.compiler = require('sass'); |
|||
|
|||
//Note : Webp still not supported in major browsers including forefox
|
|||
//const webp = require('gulp-webp'); //For converting images to WebP format
|
|||
//const replace = require('gulp-replace'); //For Replacing img formats to webp in html
|
|||
const logSymbols = require('log-symbols'); //For Symbolic Console logs :) :P
|
|||
|
|||
//Load Previews on Browser on dev
|
|||
function livePreview(done) { |
|||
browserSync.init({ |
|||
server: { |
|||
baseDir: options.paths.dist.base |
|||
}, |
|||
port: options.config.port || 5000 |
|||
}); |
|||
done(); |
|||
} |
|||
|
|||
//Copy latest installed Bulma
|
|||
function setupBulma() { |
|||
console.log("\n\t" + logSymbols.info, "Installing Bulma Files..\n"); |
|||
return src([nodepath + 'bulma/*.sass', nodepath + 'bulma/**/*.sass']) |
|||
.pipe(dest('src/sass/')); |
|||
} |
|||
|
|||
//Compile Sass code
|
|||
function compileSASS() { |
|||
console.log("\n\t" + logSymbols.info, "Compiling Bulma Sass..\n"); |
|||
return src(['src/sass/bulma.sass']) |
|||
.pipe(sass({ |
|||
outputStyle: 'compressed', |
|||
sourceComments: 'map', |
|||
sourceMap: 'sass', |
|||
includePaths: bourbon |
|||
}).on('error', sass.logError)) |
|||
.pipe(autoprefixer('last 2 versions')) |
|||
.pipe(dest('dist/assets/css')) |
|||
.pipe(browserSync.stream()); |
|||
} |
|||
|
|||
//Compile Scss code
|
|||
function compileSCSS() { |
|||
console.log("\n\t" + logSymbols.info, "Compiling App SCSS..\n"); |
|||
return src(['src/scss/main.scss']) |
|||
.pipe(sass({ |
|||
outputStyle: 'compressed', |
|||
sourceComments: 'map', |
|||
sourceMap: 'scss', |
|||
includePaths: bourbon |
|||
}).on('error', sass.logError)) |
|||
.pipe(autoprefixer('last 2 versions')) |
|||
.pipe(dest('dist/css')) |
|||
.pipe(browserSync.stream()); |
|||
} |
|||
|
|||
//Compile HTML partials with Panini
|
|||
function compileHTML() { |
|||
console.log("\n\t" + logSymbols.info, "Compiling HTML..\n"); |
|||
panini.refresh(); |
|||
return src('src/pages/**/*.html') |
|||
.pipe(panini({ |
|||
root: 'src/pages/', |
|||
layouts: 'src/layouts/', |
|||
partials: 'src/partials/', |
|||
helpers: 'src/helpers/', |
|||
data: 'src/data/' |
|||
})) |
|||
.pipe(dest('dist')) |
|||
.pipe(browserSync.stream()); |
|||
} |
|||
|
|||
//Concat CSS Plugins
|
|||
function concatCssPlugins() { |
|||
console.log("\n\t" + logSymbols.info, "Compiling Plugin styles..\n"); |
|||
return src([ |
|||
nodepath + 'simplebar/dist/simplebar.min.css', |
|||
nodepath + 'plyr/dist/plyr.css', |
|||
nodepath + 'codemirror/lib/codemirror.css', |
|||
nodepath + 'codemirror/theme/shadowfox.css', |
|||
'src/assets/vendor/css/*', |
|||
]) |
|||
.pipe(sourcemaps.init()) |
|||
.pipe(concat('app.css')) |
|||
.pipe(sourcemaps.write('./')) |
|||
.pipe(dest('dist/css')) |
|||
.pipe(browserSync.stream()); |
|||
} |
|||
|
|||
//Reset Panini Cache
|
|||
function resetPages(done) { |
|||
console.log("\n\t" + logSymbols.info, "Clearing Panini Cache..\n"); |
|||
panini.refresh(); |
|||
done(); |
|||
} |
|||
|
|||
//Triggers Browser reload
|
|||
function previewReload(done) { |
|||
console.log("\n\t" + logSymbols.info, "Reloading Browser Preview.\n"); |
|||
browserSync.reload(); |
|||
done(); |
|||
} |
|||
|
|||
//Development Tasks
|
|||
function devHTML() { |
|||
return src(`${options.paths.src.base}/**/*.html`).pipe(dest(options.paths.dist.base)); |
|||
} |
|||
|
|||
//Optimize images
|
|||
function devImages() { |
|||
return src(`${options.paths.src.img}/**/*`).pipe(dest(options.paths.dist.img)); |
|||
} |
|||
|
|||
// Let's write our task in a function to keep things clean
|
|||
function javascriptBuild() { |
|||
// Start by calling browserify with our entry pointing to our main javascript file
|
|||
return ( |
|||
browserify({ |
|||
entries: [`${options.paths.src.js}/main.js`], |
|||
// Pass babelify as a transform and set its preset to @babel/preset-env
|
|||
transform: [babelify.configure({ presets: ["@babel/preset-env"] })] |
|||
}) |
|||
// Bundle it all up!
|
|||
.bundle() |
|||
// Source the bundle
|
|||
.pipe(source("bundle.js")) |
|||
// Then write the resulting files to a folder
|
|||
.pipe(dest(`dist/js`)) |
|||
); |
|||
} |
|||
|
|||
//Copy data files
|
|||
function copyData() { |
|||
console.log("\n\t" + logSymbols.info, "Copying data files..\n"); |
|||
return src([ |
|||
'src/data/**/*', |
|||
]) |
|||
.pipe(dest('dist/data')) |
|||
.pipe(browserSync.stream()); |
|||
} |
|||
|
|||
function watchFiles() { |
|||
//watch('src/**/*.html', compileHTML);
|
|||
watch(`${options.paths.src.base}/**/*.html`, series(compileHTML, previewReload)); |
|||
watch(['src/scss/**/*', 'src/scss/*'], compileSCSS); |
|||
watch(`${options.paths.src.js}/**/*.js`, series(javascriptBuild, previewReload)); |
|||
watch(`${options.paths.src.img}/**/*`, series(devImages, previewReload)); |
|||
console.log("\n\t" + logSymbols.info, "Watching for Changes..\n"); |
|||
} |
|||
|
|||
function devClean() { |
|||
console.log("\n\t" + logSymbols.info, "Cleaning dist folder for fresh start.\n"); |
|||
return del([options.paths.dist.base]); |
|||
} |
|||
|
|||
|
|||
exports.setup = series(setupBulma); |
|||
|
|||
exports.default = series( |
|||
devClean, // Clean Dist Folder
|
|||
resetPages, |
|||
parallel(concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML), |
|||
livePreview, // Live Preview Build
|
|||
watchFiles // Watch for Live Changes
|
|||
); |
|||
@ -1,23 +0,0 @@ |
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. |
|||
|
|||
# dependencies |
|||
/node_modules |
|||
/.pnp |
|||
.pnp.js |
|||
|
|||
# testing |
|||
/coverage |
|||
|
|||
# production |
|||
/build |
|||
|
|||
# misc |
|||
.DS_Store |
|||
.env.local |
|||
.env.development.local |
|||
.env.test.local |
|||
.env.production.local |
|||
|
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
File diff suppressed because it is too large
@ -1,46 +0,0 @@ |
|||
{ |
|||
"name": "langingpage", |
|||
"version": "0.1.0", |
|||
"private": true, |
|||
"dependencies": { |
|||
"@fortawesome/fontawesome-svg-core": "^1.2.36", |
|||
"@fortawesome/free-solid-svg-icons": "^5.15.4", |
|||
"@fortawesome/react-fontawesome": "^0.1.16", |
|||
"@testing-library/jest-dom": "^5.11.4", |
|||
"@testing-library/react": "^11.1.0", |
|||
"@testing-library/user-event": "^12.1.10", |
|||
"font-awesome": "^4.7.0", |
|||
"mdbreact": "^5.1.0", |
|||
"react": "^17.0.2", |
|||
"react-dom": "^17.0.2", |
|||
"react-fontawesome": "^1.7.1", |
|||
"react-recaptcha-google": "^1.1.1", |
|||
"react-scripts": "4.0.3", |
|||
"react-select": "^5.2.1", |
|||
"web-vitals": "^1.0.1" |
|||
}, |
|||
"scripts": { |
|||
"start": "react-scripts start", |
|||
"build": "react-scripts build", |
|||
"test": "react-scripts test", |
|||
"eject": "react-scripts eject" |
|||
}, |
|||
"eslintConfig": { |
|||
"extends": [ |
|||
"react-app", |
|||
"react-app/jest" |
|||
] |
|||
}, |
|||
"browserslist": { |
|||
"production": [ |
|||
">0.2%", |
|||
"not dead", |
|||
"not op_mini all" |
|||
], |
|||
"development": [ |
|||
"last 1 chrome version", |
|||
"last 1 firefox version", |
|||
"last 1 safari version" |
|||
] |
|||
} |
|||
} |
|||
@ -1,27 +0,0 @@ |
|||
import React, { useState } from "react"; |
|||
import { useParams, useHistory } from "react-router-dom"; |
|||
|
|||
const Thanks = () => { |
|||
|
|||
|
|||
const history = useHistory(); |
|||
const { name } = useParams(); |
|||
|
|||
console.log(history); |
|||
|
|||
|
|||
|
|||
<React.Fragment> |
|||
<div className= "thanks"> |
|||
<p> Thanks <strong>{name}!!</strong></p> |
|||
<p>You Joined <strong>{history.location.state}</strong></p> |
|||
|
|||
<hr/> |
|||
<p><strong>Disclaimer:</strong> asdasdkasldfj asdfkl asd fasdfkasdfj asdlkfajlsdfjklasdfj asdklfaskldfjalsdf kla sdfklasdkf jasdklfasjdflas klasdfja askldf j </p> |
|||
|
|||
</div> |
|||
|
|||
</React.Fragment> |
|||
} |
|||
|
|||
export default Thanks; |
|||
@ -1,13 +0,0 @@ |
|||
body { |
|||
margin: 0; |
|||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', |
|||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', |
|||
sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
code { |
|||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', |
|||
monospace; |
|||
} |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -1,76 +1,47 @@ |
|||
{ |
|||
"name": "Librography-Beta-Lanfing-Page", |
|||
"version": "4.0.1", |
|||
"description": "Librography Beta landing page", |
|||
"main": "gulpfile.js", |
|||
"name": "langingpage", |
|||
"version": "0.1.0", |
|||
"private": true, |
|||
"dependencies": { |
|||
"@ryangjchandler/spruce": "^2.4.0", |
|||
"alpinejs": "^2.8.0", |
|||
"bulma": "^0.9.1", |
|||
"js-datepicker": "^5.16.0", |
|||
"notyf": "^3.9.0", |
|||
"codemirror": "^5.58.3", |
|||
"feather-icons": "^4.24.0", |
|||
"ionicons": "^5.2.3", |
|||
"plyr": "^3.5.6", |
|||
"postcss": "^8.1.6", |
|||
"simplebar": "^5.2.1" |
|||
}, |
|||
"devDependencies": { |
|||
"@babel/cli": "^7.12.1", |
|||
"@babel/core": "^7.12.3", |
|||
"@babel/polyfill": "^7.12.1", |
|||
"@babel/preset-env": "^7.12.1", |
|||
"@babel/register": "^7.12.1", |
|||
"autoprefixer": "^10.0.1", |
|||
"babelify": "^10.0.0", |
|||
"browser-sync": "^2.26.13", |
|||
"browserify": "^17.0.0", |
|||
"del": "^6.0.0", |
|||
"gulp": "^4.0.2", |
|||
"gulp-autoprefixer": "^7.0.1", |
|||
"gulp-clean-css": "^4.3.0", |
|||
"gulp-concat": "^2.6.1", |
|||
"gulp-imagemin": "^7.1.0", |
|||
"gulp-postcss": "^9.0.0", |
|||
"gulp-purgecss": "^3.0.0", |
|||
"gulp-replace": "^1.0.0", |
|||
"gulp-sass": "^4.1.0", |
|||
"gulp-sourcemaps": "^2.6.1", |
|||
"gulp-uglify": "^3.0.2", |
|||
"gulp-webp": "^4.0.1", |
|||
"ini": "1.3.6", |
|||
"log-symbols": "^4.0.0", |
|||
"node-bourbon": "^4.2.8", |
|||
"npm-force-resolutions": "0.0.3", |
|||
"panini": "^1.7.1", |
|||
"sass": "^1.30.0", |
|||
"vinyl-source-stream": "^2.0.0" |
|||
}, |
|||
"resolutions": { |
|||
"ini": "1.3.6" |
|||
"@fortawesome/fontawesome-svg-core": "^1.2.36", |
|||
"@fortawesome/free-solid-svg-icons": "^5.15.4", |
|||
"@fortawesome/react-fontawesome": "^0.1.16", |
|||
"@testing-library/jest-dom": "^5.11.4", |
|||
"@testing-library/react": "^11.1.0", |
|||
"@testing-library/user-event": "^12.1.10", |
|||
"font-awesome": "^4.7.0", |
|||
"mdbreact": "^5.1.0", |
|||
"node-sass": "^4.14.1", |
|||
"react": "^17.0.2", |
|||
"react-dom": "^17.0.2", |
|||
"react-fontawesome": "^1.7.1", |
|||
"react-recaptcha-google": "^1.1.1", |
|||
"react-scripts": "4.0.3", |
|||
"react-select": "^5.2.1", |
|||
"web-vitals": "^1.0.1" |
|||
}, |
|||
"scripts": { |
|||
"dev": "gulp", |
|||
"build": "gulp prod", |
|||
"prod": "gulp prod", |
|||
"preinstall": "npx npm-force-resolutions" |
|||
}, |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git+https://github.com/" |
|||
"start": "react-scripts start", |
|||
"build": "react-scripts build", |
|||
"test": "react-scripts test", |
|||
"eject": "react-scripts eject" |
|||
}, |
|||
"keywords": [ |
|||
"gulp", |
|||
"gulp4", |
|||
"bulma", |
|||
"bulmacss", |
|||
"sass" |
|||
], |
|||
"author": "Css Ninja", |
|||
"license": "Commercial", |
|||
"bugs": { |
|||
"url": "https://github.com/" |
|||
"eslintConfig": { |
|||
"extends": [ |
|||
"react-app", |
|||
"react-app/jest" |
|||
] |
|||
}, |
|||
"homepage": "https://github.com/" |
|||
"browserslist": { |
|||
"production": [ |
|||
">0.2%", |
|||
"not dead", |
|||
"not op_mini all" |
|||
], |
|||
"development": [ |
|||
"last 1 chrome version", |
|||
"last 1 firefox version", |
|||
"last 1 safari version" |
|||
] |
|||
} |
|||
} |
|||
|
|||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
@ -0,0 +1 @@ |
|||
|
|||
@ -0,0 +1,306 @@ |
|||
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Yuji+Boku&display=swap'); |
|||
|
|||
|
|||
.container { |
|||
width: 80%; |
|||
margin: 5px auto; |
|||
|
|||
} |
|||
|
|||
nav { |
|||
display: flex; |
|||
align-items: center; |
|||
width:100%; |
|||
padding-top: 10px; |
|||
margin: 0 auto; |
|||
justify-content: space-between; |
|||
color: white; |
|||
|
|||
} |
|||
|
|||
nav ul { |
|||
list-style: none; |
|||
padding: 0px; |
|||
margin: 10px 0px; |
|||
} |
|||
|
|||
nav ul li a { |
|||
text-decoration: none; |
|||
color: white; |
|||
} |
|||
|
|||
nav ul li { |
|||
display: inline-block; |
|||
margin-left: 10px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
nav ul:first-of-type li:first-of-type{ |
|||
font-weight: bold; |
|||
font-size: 1.1rem; |
|||
} |
|||
|
|||
/* ###### HEADER ###### */ |
|||
|
|||
header { |
|||
position: relative; |
|||
font-family: Lato; |
|||
margin-left: 30px; |
|||
} |
|||
|
|||
header div { |
|||
padding-top: 150px; |
|||
|
|||
} |
|||
|
|||
header div h1 { |
|||
font-size:75px; |
|||
} |
|||
|
|||
header div p { |
|||
width: 550px; |
|||
font-size: 28px; |
|||
line-height: 28px; |
|||
} |
|||
|
|||
header img { |
|||
position:absolute; |
|||
z-index: -1; |
|||
width:1630px; |
|||
right: -50%; |
|||
top: -20px; |
|||
} |
|||
|
|||
header div a { |
|||
padding: 20px; |
|||
display: block; |
|||
margin-top: 70px; |
|||
width: 170px; |
|||
border-radius: 40px; |
|||
color: white; |
|||
font-size: 20px; |
|||
text-align: center; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
|
|||
header div a, .newsletter input[type="submit"] { |
|||
border: 1px solid rgb(49, 99, 95); |
|||
color:rgb(255, 254, 254); |
|||
background: rgb(2, 36, 109); |
|||
} |
|||
|
|||
header div a, .newsletter input[type="submit"]:hover { |
|||
|
|||
color:rgb(255, 254, 254); |
|||
background: rgb(53, 94, 182); |
|||
} |
|||
|
|||
main { |
|||
padding-top: 100px; |
|||
} |
|||
|
|||
h2 { |
|||
font-size: 45px; |
|||
margin-bottom: 120px; |
|||
text-align: center; |
|||
} |
|||
|
|||
h3 { |
|||
font-size:30px; |
|||
color: rgb(196, 196, 197); |
|||
} |
|||
|
|||
.services { |
|||
margin-left: 30px; |
|||
margin-top: 300px; |
|||
} |
|||
|
|||
.service-container { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin: 40px 0px 180px 0px; |
|||
position: relative; |
|||
} |
|||
|
|||
.service-card { |
|||
width: 480px; |
|||
height: 400px; |
|||
background: #222; |
|||
display: inline-block; |
|||
border: 4px solid rgb(207, 207, 207); |
|||
border-radius: 10px; |
|||
-webkit-box-shadow: 0px 0px 53px rgba(0, 0, 0, 0.75); |
|||
-moz-box-shadow: 0pc 0px 53px -19px rgba(0, 0, 0, 0.75); |
|||
box-shadow: 0px 0px 52px -19px rgba(0, 0, 0, 0.75); |
|||
} |
|||
|
|||
.service-description{ |
|||
width: 48%; |
|||
} |
|||
|
|||
.newsletter { |
|||
width: 80%; |
|||
margin: 0 auto; |
|||
text-align: center; |
|||
} |
|||
|
|||
.newsletter * { |
|||
padding: 20px; |
|||
border-radius: 40px; |
|||
border: none; |
|||
margin: 0px; |
|||
background: none; |
|||
font-size: 20px; |
|||
} |
|||
|
|||
|
|||
.newsletter input[type="email"] { |
|||
width: 60%; |
|||
display: inline-block; |
|||
border: 1px solid rgb(31, 18, 214); |
|||
margin-right: 20px; |
|||
background-color: rgb(238, 238, 238); |
|||
} |
|||
|
|||
.newsletter input[type="submit"] { |
|||
width: 170px; |
|||
color: rgb(53, 53, 138); |
|||
cursor: pointer; |
|||
color: aliceblue; |
|||
} |
|||
|
|||
.thanks { |
|||
font-size: 30px; |
|||
width: 70%; |
|||
margin: 120px auto; |
|||
text-align: center; |
|||
|
|||
} |
|||
|
|||
@media screen and (max-width: 1600px) { |
|||
header img { |
|||
width: 1230px; |
|||
right: -50%; |
|||
top: -28px |
|||
} |
|||
} |
|||
|
|||
@media screen and (max-width: 1380px) { |
|||
header img { |
|||
right: -60px; |
|||
top: -20px; |
|||
} |
|||
|
|||
header div { |
|||
padding-top: 100px; |
|||
} |
|||
|
|||
header div h1 { |
|||
font-size: 55px |
|||
} |
|||
|
|||
header div p { |
|||
width: 400px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.service-one, .service-two, .service-three, .service-four { |
|||
background-size: 120% !important; |
|||
|
|||
} |
|||
|
|||
.service-one { |
|||
background: url("../images/lib1.jpg")center; |
|||
} |
|||
|
|||
.service-two { |
|||
background: url("../images/lib2.jpg")center; |
|||
} |
|||
|
|||
.contact input[type="submit"] { |
|||
width: 40%; |
|||
} |
|||
|
|||
@media screen and (max-width: 1150px) { |
|||
header img { |
|||
width: 900px; |
|||
right: -50%; |
|||
top: 320px; |
|||
} |
|||
|
|||
header div h1 { |
|||
font-size: 55px; |
|||
} |
|||
|
|||
header div p { |
|||
width: 400px |
|||
} |
|||
|
|||
.service-container { |
|||
display: block; |
|||
} |
|||
|
|||
.service-card { |
|||
width: 100%; |
|||
height: 400px; |
|||
} |
|||
|
|||
.service-description { |
|||
background-size: 120% !important; |
|||
} |
|||
|
|||
.contact input[type="submit"] { |
|||
width: 40%; |
|||
} |
|||
} |
|||
|
|||
@media screen and (max-width: 950px) { |
|||
header img { |
|||
width: 730px; |
|||
right: -50%; |
|||
top: 520px; |
|||
} |
|||
|
|||
.newsletter input[type="email"] { |
|||
width: 100%; |
|||
margin-right: 0px; |
|||
} |
|||
|
|||
.newsletter input[type="submit"] { |
|||
margin-top: 40px; |
|||
} |
|||
|
|||
/* header div h1 { |
|||
font-size: 55px; |
|||
} |
|||
|
|||
header div p { |
|||
width: 400px |
|||
} |
|||
|
|||
.service-container { |
|||
display: block; |
|||
} |
|||
|
|||
.service-card { |
|||
width: 100%; |
|||
height: 400px; |
|||
} |
|||
|
|||
.service-description { |
|||
background-size: 120% !important; |
|||
} */ |
|||
|
|||
.contact { |
|||
width: 90%; |
|||
} |
|||
|
|||
.contact input[type="submit"] { |
|||
width: 100%; |
|||
margin: 40px 0px; |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
.thanks { |
|||
font-size: 30px; |
|||
width: 70%; |
|||
margin: 120px auto; |
|||
text-align: center; |
|||
|
|||
} |
|||
|
|||
@media screen and (max-width: 1600px) { |
|||
header img { |
|||
width: 1230px; |
|||
right: -50%; |
|||
top: -28px |
|||
} |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Yuji+Boku&display=swap'); |
|||
|
|||
html{ |
|||
background: linear-gradient(300deg,#1a4974,#0b3965,#1b63a9); |
|||
background-size: 180% 180%; |
|||
animation: gradient-animation 15s ease infinite; |
|||
} |
|||
|
|||
body { |
|||
margin:0; |
|||
|
|||
padding: 0px; |
|||
font-family: Lato; |
|||
-webkit-font-smoothing: antialised; |
|||
-moz-osx-font-smoothing:greyscale; |
|||
overflow-x: hidden; |
|||
/*padding-bottom: 320px;*/ |
|||
/*backgroung-image: url("./Group_3.svg"); |
|||
/*background-position: bottom; |
|||
background-repeat: no-repeat;*/ |
|||
color: white; |
|||
} |
|||
|
|||
body *{ |
|||
transition: all 500ms ease-in-out; |
|||
} |
|||
|
|||
.container { |
|||
width: 80%; |
|||
margin: 0 auto; |
|||
|
|||
} |
|||
|
|||
@keyframes gradient-animation { |
|||
0% { |
|||
background-position: 0% 50%; |
|||
} |
|||
50% { |
|||
background-position: 100% 50%; |
|||
} |
|||
100% { |
|||
background-position: 0% 50%; |
|||
} |
|||
} |
|||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 176 KiB |
|
After Width: | Height: | Size: 154 KiB |
Binary file not shown.
@ -0,0 +1,33 @@ |
|||
import React, { useState } from "react"; |
|||
import { useHistory } from "react-router-dom"; |
|||
|
|||
|
|||
const Contact = () => { |
|||
|
|||
|
|||
const history = useHistory(); |
|||
const goBack = () => { |
|||
history.push(); |
|||
} |
|||
|
|||
const [title, setTitle] = useState(""); |
|||
const [ content, setContent] = useState(""); |
|||
const[contactEmail, setContactEmail] = useStates(""); |
|||
|
|||
|
|||
return( |
|||
<React.Fragment> |
|||
<button className="back" onClick={goback}> ← Go Back</button> |
|||
<form className="contact" onSubmit={sendEmail}> |
|||
<h2> Envie uma mensagem para ajudar-nos a construir o melhor software gerenciador de Bibliotecas</h2> |
|||
|
|||
<label htmlFor="title"> Message Title: </label> |
|||
<input type="text" name="title" onChange={(e) => setTitle(e.target.value) } /> |
|||
|
|||
</form> |
|||
</React.Fragment> |
|||
) |
|||
|
|||
|
|||
|
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
import React, { useState } from "react"; |
|||
import { useParams, useHistory } from "react-router-dom"; |
|||
|
|||
const Thanks = () => { |
|||
|
|||
const history = useHistory(); |
|||
const { name } = useParams(); |
|||
|
|||
console.log(history); |
|||
|
|||
return( |
|||
<React.Fragment> |
|||
<div className="thanks"> |
|||
<p> Thanks <strong>{name}!!</strong></p> |
|||
<p>You Joined <strong>{history.location.state}</strong></p> |
|||
<hr /> |
|||
<p><strong>Disclaimer:</strong> asdasdkasldfj asdfkl asd fasdfkasdfj asdlkfajlsdfjklasdfj asdklfaskldfjalsdf kla sdfklasdkf jasdklfasjdflas klasdfja askldf j </p> |
|||
</div> |
|||
</React.Fragment> |
|||
) |
|||
} |
|||
|
|||
export default Thanks; |
|||
|
Before Width: | Height: | Size: 495 B |
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue