1 år sedan · 76492c75ad
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,22 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/LICENSE
+++ b/LICENSE
@@ -0,0 +1,21 @@
 
				+MIT License
			
 
				+
			
 
				+Copyright (c) 2020 Joabson
			
 
				+
			
 
				+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.
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,57 @@
 
				+# Vuetify Landing Page Template
			
 
				+
			
 
				+#### This is an example of a landing page built with vue and vuetify.
			
 
				+
			
 
				+
			
 
				+## 🚀 Project setup
			
 
				+
			
 
				+Use [git](https://git-scm.com/) to clone the project.
			
 
				+
			
 
				+```bash
			
 
				+git clone https://github.com/Joabsonlg/vuetify-landing-page.git
			
 
				+```
			
 
				+Enter the project.
			
 
				+```bash
			
 
				+cd vuetify-landing-page
			
 
				+```
			
 
				+Use [npm](https://www.npmjs.com/) to install dependencies.
			
 
				+```bash
			
 
				+npm i
			
 
				+```
			
 
				+
			
 
				+
			
 
				+## ☄️ Usage
			
 
				+
			
 
				+Compiles and hot-reloads for development
			
 
				+```bash
			
 
				+npm run serve
			
 
				+```
			
 
				+
			
 
				+Compiles and minifies for production
			
 
				+```bash
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+### 🛠️ Technologies
			
 
				+
			
 
				+The following tools were used in the construction of the project:
			
 
				+
			
 
				+- [Vue.js](https://vuejs.org/)
			
 
				+- [Vuetify.js](https://vuetifyjs.com/)
			
 
				+- [Firebase](https://firebase.google.com/)
			
 
				+
			
 
				+## ⚖️ Contributing
			
 
				+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
			
 
				+
			
 
				+Please make sure to update tests as appropriate.
			
 
				+
			
 
				+## 👷‍♂️ Author
			
 
				+<a href="https://github.com/Joabsonlg">
			
 
				+ <img style="border-radius: 50%;" src="https://avatars.githubusercontent.com/u/41306493?v=4" width="100px;" alt=""/>
			
 
				+ <br />
			
 
				+ <sub><b>Joabson Arley</b></sub></a> <a href="https://github.com/Joabsonlg" title="Github">🚀</a>
			
 
				+
			
 
				+[![Gmail Badge](https://img.shields.io/badge/-joabsonlg918@gmail.com-c14438?style=flat-square&logo=Gmail&logoColor=white&link=mailto:joabsonlg918@gmail.com)](mailto:joabsonlg918@gmail.com)
			
 
				+
			
 
				+## 🔑 License
			
 
				+[MIT](https://github.com/Joabsonlg/vuetify-landing-page/blob/master/LICENSE)
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,31 @@
 
				+{
			
 
				+    "name": "landingpage",
			
 
				+    "version": "0.1.0",
			
 
				+    "private": true,
			
 
				+    "scripts": {
			
 
				+        "serve": "vue-cli-service serve",
			
 
				+        "build": "vue-cli-service build"
			
 
				+    },
			
 
				+    "dependencies": {
			
 
				+        "core-js": "^3.8.2",
			
 
				+        "deepai": "^1.0.17",
			
 
				+        "firebase": "^7.24.0",
			
 
				+        "vue": "^2.6.12",
			
 
				+        "vue-youtube-embed": "^2.2.2",
			
 
				+        "vuetify": "^2.4.2"
			
 
				+    },
			
 
				+    "devDependencies": {
			
 
				+        "@vue/cli-plugin-babel": "~4.4.0",
			
 
				+        "@vue/cli-service": "~4.4.0",
			
 
				+        "sass": "~1.32.4",
			
 
				+        "sass-loader": "^8.0.0",
			
 
				+        "vue-cli-plugin-vuetify": "^2.0.9",
			
 
				+        "vue-template-compiler": "^2.6.12",
			
 
				+        "vuetify-loader": "^1.3.0"
			
 
				+    },
			
 
				+    "browserslist": [
			
 
				+        "> 1%",
			
 
				+        "last 2 versions",
			
 
				+        "not dead"
			
 
				+    ]
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <title>印界智程</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,98 @@
 
				+<template>
			
 
				+  <v-app>
			
 
				+    <navigation :color="color" :flat="flat" />
			
 
				+    <v-main class="pt-0">
			
 
				+      <home />
			
 
				+      <about />
			
 
				+      <download />
			
 
				+      <pricing />
			
 
				+      <contact />
			
 
				+    </v-main>
			
 
				+    <v-scale-transition>
			
 
				+      <v-btn
			
 
				+        fab
			
 
				+        v-show="fab"
			
 
				+        v-scroll="onScroll"
			
 
				+        dark
			
 
				+        fixed
			
 
				+        bottom
			
 
				+        right
			
 
				+        color="secondary"
			
 
				+        @click="toTop"
			
 
				+      >
			
 
				+        <v-icon>mdi-arrow-up</v-icon>
			
 
				+      </v-btn>
			
 
				+    </v-scale-transition>
			
 
				+    <foote />
			
 
				+  </v-app>
			
 
				+</template>
			
 
				+
			
 
				+<style scoped>
			
 
				+.v-main {
			
 
				+  background-image: url("~@/assets/img/bgMain.png");
			
 
				+  background-attachment: fixed;
			
 
				+  background-position: center;
			
 
				+  background-size: cover;
			
 
				+}
			
 
				+</style>
			
 
				+
			
 
				+<script>
			
 
				+import navigation from "./components/Navigation";
			
 
				+import foote from "./components/Footer";
			
 
				+import home from "./components/HomeSection";
			
 
				+import about from "./components/AboutSection";
			
 
				+import download from "./components/DownloadSection";
			
 
				+import pricing from "./components/PricingSection";
			
 
				+import contact from "./components/ContactSection";
			
 
				+
			
 
				+export default {
			
 
				+  name: "App",
			
 
				+
			
 
				+  components: {
			
 
				+    navigation,
			
 
				+    foote,
			
 
				+    home,
			
 
				+    about,
			
 
				+    download,
			
 
				+    pricing,
			
 
				+    contact,
			
 
				+  },
			
 
				+
			
 
				+  data: () => ({
			
 
				+    fab: null,
			
 
				+    color: "",
			
 
				+    flat: null,
			
 
				+  }),
			
 
				+
			
 
				+  created() {
			
 
				+    const top = window.pageYOffset || 0;
			
 
				+    if (top <= 60) {
			
 
				+      this.color = "transparent";
			
 
				+      this.flat = true;
			
 
				+    }
			
 
				+  },
			
 
				+
			
 
				+  watch: {
			
 
				+    fab(value) {
			
 
				+      if (value) {
			
 
				+        this.color = "secondary";
			
 
				+        this.flat = false;
			
 
				+      } else {
			
 
				+        this.color = "transparent";
			
 
				+        this.flat = true;
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+
			
 
				+  methods: {
			
 
				+    onScroll(e) {
			
 
				+      if (typeof window === "undefined") return;
			
 
				+      const top = window.pageYOffset || e.target.scrollTop || 0;
			
 
				+      this.fab = top > 60;
			
 
				+    },
			
 
				+    toTop() {
			
 
				+      this.$vuetify.goTo(0);
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
--- a/src/assets/img/aeroplane.svg
+++ b/src/assets/img/aeroplane.svg
@@ -0,0 +1,20 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" enable-background="new 0 0 64 64" viewBox="0 0 64 64"><path fill="#283e79" d="M63.508,36.111L38.316,21.904C38.141,7.998,36.072,1.21,32.002,1.21c-4.072,0-6.141,6.787-6.316,20.691L0.494,36.111
			
 
				+		c-0.381,0.214-0.57,0.657-0.465,1.08l1.326,5.296c0.109,0.438,0.502,0.734,0.939,0.734c0.057,0,0.113-0.005,0.172-0.015
			
 
				+		l23.779-4.238c0.26,3.517,0.594,6.933,1.002,10.025c0.137,1.048,0.277,2.007,0.416,2.899l-8.316,4.626
			
 
				+		c-0.342,0.192-0.537,0.572-0.49,0.964l0.537,4.454c0.035,0.278,0.188,0.529,0.42,0.686c0.162,0.11,0.352,0.167,0.543,0.167
			
 
				+		c0.084,0,0.168-0.011,0.25-0.032l9.096-2.415c0.938,2.184,1.773,2.189,2.299,2.189s1.359-0.005,2.297-2.188l9.094,2.414
			
 
				+		c0.082,0.021,0.166,0.032,0.248,0.032c0.191,0,0.383-0.057,0.545-0.167c0.232-0.157,0.385-0.407,0.418-0.685l0.545-4.454
			
 
				+		c0.049-0.392-0.145-0.773-0.49-0.965l-8.32-4.624c0.141-0.893,0.279-1.852,0.418-2.901c0.406-3.092,0.742-6.508,1-10.025
			
 
				+		l23.779,4.237c0.057,0.01,0.113,0.015,0.17,0.015c0.438,0,0.832-0.296,0.939-0.734l1.326-5.296
			
 
				+		C64.078,36.768,63.889,36.325,63.508,36.111z M3.016,41.138L2.09,37.437l23.582-13.3c0.006,4.139,0.16,8.559,0.438,12.886
			
 
				+		L3.016,41.138z M21.188,60.597l-0.326-2.699l7.146-3.975c0.35,1.928,0.703,3.426,1.047,4.586L21.188,60.597z M31.242,59.094
			
 
				+		c-0.006-0.054,0.004-0.106-0.01-0.161c-0.029-0.11-0.084-0.204-0.145-0.292c-0.475-1.458-0.949-3.637-1.389-6.332
			
 
				+		c-0.002-0.004-0.002-0.008-0.002-0.012c-1.166-7.129-2.09-17.86-2.09-28.424c0-19.229,3.363-20.723,4.395-20.723
			
 
				+		c1.029,0,4.393,1.494,4.393,20.723c0,10.557-0.922,21.281-2.086,28.411c-0.002,0.012-0.004,0.022-0.006,0.034
			
 
				+		c-0.439,2.682-0.912,4.854-1.383,6.309c-0.064,0.092-0.121,0.191-0.152,0.306c-0.014,0.057-0.004,0.112-0.01,0.168
			
 
				+		c-0.256,0.702-0.51,1.187-0.756,1.419C31.754,60.288,31.498,59.8,31.242,59.094z M43.145,57.897l-0.33,2.7l-7.867-2.088
			
 
				+		c0.346-1.16,0.697-2.658,1.049-4.585L43.145,57.897z M60.984,41.138l-23.092-4.114c0.279-4.327,0.434-8.747,0.439-12.885
			
 
				+		L61.91,37.437L60.984,41.138z"/><path fill="#283e79" d="M33.322,11.282c0.33,0.422,0.939,0.496,1.361,0.165c0.422-0.33,0.496-0.94,0.166-1.361C33.961,8.952,33,8.376,31.996,8.376
			
 
				+		c-0.002,0-0.006,0-0.008,0c-1.004,0.003-1.959,0.579-2.838,1.714c-0.328,0.423-0.25,1.032,0.174,1.36
			
 
				+		c0.178,0.137,0.385,0.203,0.594,0.203c0.289,0,0.576-0.129,0.768-0.376c0.479-0.619,0.943-0.961,1.309-0.962h0.002
			
 
				+		C32.363,10.316,32.834,10.659,33.322,11.282z"/></svg>
			
--- a/src/assets/img/airplane.svg
+++ b/src/assets/img/airplane.svg
@@ -0,0 +1,18 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" enable-background="new 0 0 64 64" viewBox="0 0 64 64"><path fill="#283e79" d="M61,25c0-3.309-2.691-6-6-6H38.921c-0.061-1.078-0.149-2.058-0.27-2.962c0.03-0.122,0.014-0.245-0.048-0.368
			
 
				+			C38.457,14.625,38.23,11,36.72,11H33V9h7c1.29,0,1.29-2,0-2H24c-1.29,0-1.29,2,0,2h7v2h-3.72c-0.935,0-1.113,1.11-1.307,1.81
			
 
				+			c-0.263,0.948-0.604,2.071-0.604,3.061c-0.131,0.95-0.227,1.984-0.291,3.13H9c-5.395,0-8.021,6.875-3.978,10.48
			
 
				+			C5.254,32.564,7.683,35,10.64,35h15.018c0.324,3.559,0.756,6.975,1.265,10H22.14c-4.183,0-4.178,8,0,8h6.638
			
 
				+			c0.476,1.412,1.348,4,3.223,4s2.747-2.588,3.223-4h6.638c4.177,0,4.183-8,0-8h-4.782c0.509-3.026,0.941-6.444,1.266-10H53.36
			
 
				+			c2.957,0,5.386-2.436,5.617-5.521C60.248,28.347,61,26.71,61,25z M28.001,13h7.998c0.184,0.604,0.342,1.272,0.473,2h-8.943
			
 
				+			C27.659,14.272,27.817,13.604,28.001,13z M27.244,17h9.512c0.067,0.624,0.122,1.288,0.164,2h-9.84
			
 
				+			C27.122,18.288,27.177,17.624,27.244,17z M10.64,33c-1.425,0-2.661-0.904-3.258-2.218C7.9,30.928,8.462,31,9,31h16.329
			
 
				+			c0.045,0.66,0.097,1.328,0.15,2H10.64z M21.587,50.714C20.907,49.992,20.581,47,22.14,47h5.971H31v4h-1.5h-7.36
			
 
				+			C21.901,51,21.712,50.85,21.587,50.714C21.22,50.324,21.712,50.85,21.587,50.714z M32,54.972
			
 
				+			c-0.146-0.111-0.562-0.534-1.108-1.972h2.217C32.562,54.438,32.146,54.86,32,54.972C31.854,54.86,32.146,54.86,32,54.972z M43,49
			
 
				+			c0,0.625-0.286,2-1.14,2H34.5H33v-4h2.89h5.971C42.398,47,43,47.855,43,49z M33,45v-3c0-1.29-2-1.29-2,0v3h-2.051
			
 
				+			c-0.562-3.268-1.031-7.029-1.369-10.95c0.027-0.108,0.017-0.219-0.031-0.329l-0.036-0.393l-0.006-0.069
			
 
				+			c-0.062-0.758-0.111-1.508-0.163-2.259h9.313c-0.052,0.749-0.102,1.499-0.162,2.247l-0.061,0.66c0,0.001,0.001,0.002,0,0.003
			
 
				+			v0.005c-0.339,3.966-0.814,7.777-1.383,11.085H33z M53.36,33h-14.84c0.054-0.669,0.105-1.337,0.15-2H55
			
 
				+			c0.54,0,1.097-0.075,1.618-0.218C56.021,32.096,54.785,33,53.36,33z M57.396,28.203C56.709,28.725,55.88,29,55,29H37.73H26.27H9
			
 
				+			c-2.284,0-4.146-1.996-3.991-4.273C5.149,22.657,6.928,21,9,21h17.03H37.97c0.008,0.001,0.015,0.001,0.02,0H55
			
 
				+			C58.759,21,60.403,25.939,57.396,28.203C56.709,28.725,58.401,27.446,57.396,28.203z"/><path fill="#283e79" d="M10 22c-3.868 0-3.868 6 0 6S13.868 22 10 22zM10 26c-1.289 0-1.289-2 0-2S11.289 26 10 26zM54 22c-3.868 0-3.868 6 0 6S57.868 22 54 22zM54 26c-1.289 0-1.289-2 0-2S55.289 26 54 26z"/></svg>
			
--- a/src/assets/img/bgDownload.jpg
+++ b/src/assets/img/bgDownload.jpg
--- a/src/assets/img/bgDrawer.jpg
+++ b/src/assets/img/bgDrawer.jpg
--- a/src/assets/img/bgHero.jpg
+++ b/src/assets/img/bgHero.jpg
--- a/src/assets/img/bgMain.png
+++ b/src/assets/img/bgMain.png
--- a/src/assets/img/bghero1.jpg
+++ b/src/assets/img/bghero1.jpg
--- a/src/assets/img/borderWaves.svg
+++ b/src/assets/img/borderWaves.svg
@@ -0,0 +1,27 @@
 
				+<svg class="wave" style="pointer-events: none" fill="white" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 75">
			
 
				+	<defs>
			
 
				+		<clipPath id="a">
			
 
				+			<rect class="a" width="1920" height="75" />
			
 
				+		</clipPath>
			
 
				+		<style>
			
 
				+			.a{fill:none;}
			
 
				+			.b{clip-path: url(#a);}
			
 
				+			.d {opacity: 0.5; isolation: isolate;}
			
 
				+		</style>
			
 
				+	</defs>
			
 
				+	<title>
			
 
				+		wave
			
 
				+	</title>
			
 
				+	<g class="b">
			
 
				+		<path class="c" d="M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48" />
			
 
				+	</g>
			
 
				+	<g class="b">
			
 
				+		<path class="d" d="M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10" />
			
 
				+	</g>
			
 
				+	<g class="b">
			
 
				+		<path class="d" d="M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24" />
			
 
				+	</g>
			
 
				+	<g class="b">
			
 
				+		<path class="d" d="M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150" />
			
 
				+	</g>
			
 
				+</svg>
			
--- a/src/assets/img/borderWavesBlue.svg
+++ b/src/assets/img/borderWavesBlue.svg
@@ -0,0 +1,27 @@
 
				+<svg class="wave" style="pointer-events: none" fill="#171B34" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 75">
			
 
				+	<defs>
			
 
				+		<clipPath id="a">
			
 
				+			<rect class="a" width="1920" height="75" />
			
 
				+		</clipPath>
			
 
				+		<style>
			
 
				+			.a{fill:none;}
			
 
				+			.b{clip-path: url(#a);}
			
 
				+			.d {opacity: 0.5; isolation: isolate;}
			
 
				+		</style>
			
 
				+	</defs>
			
 
				+	<title>
			
 
				+		wave
			
 
				+	</title>
			
 
				+	<g class="b">
			
 
				+		<path class="c" d="M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48" />
			
 
				+	</g>
			
 
				+	<g class="b">
			
 
				+		<path class="d" d="M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10" />
			
 
				+	</g>
			
 
				+	<g class="b">
			
 
				+		<path class="d" d="M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24" />
			
 
				+	</g>
			
 
				+	<g class="b">
			
 
				+		<path class="d" d="M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150" />
			
 
				+	</g>
			
 
				+</svg>
			
--- a/src/assets/img/icon1.png
+++ b/src/assets/img/icon1.png
--- a/src/assets/img/icon1.svg
+++ b/src/assets/img/icon1.svg
--- a/src/assets/img/icon2.png
+++ b/src/assets/img/icon2.png
--- a/src/assets/img/icon2.svg
+++ b/src/assets/img/icon2.svg
--- a/src/assets/img/icon3.png
+++ b/src/assets/img/icon3.png
--- a/src/assets/img/icon3.svg
+++ b/src/assets/img/icon3.svg
--- a/src/assets/img/ill1.svg
+++ b/src/assets/img/ill1.svg
--- a/src/assets/img/ill2.svg
+++ b/src/assets/img/ill2.svg
--- a/src/assets/img/logo.png
+++ b/src/assets/img/logo.png
--- a/src/assets/img/paperplane.svg
+++ b/src/assets/img/paperplane.svg
@@ -0,0 +1,5 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" enable-background="new 0 0 64 64" viewBox="0 0 64 64"><path fill="#283e79" d="M56.878,47.521l-24-44c-0.351-0.643-1.405-0.643-1.756,0l-24,44c-0.398,0.731,0.258,1.621,1.074,1.459l19.134-3.827
			
 
				+			l3.721,11.163c0.292,0.876,1.605,0.876,1.897,0l3.721-11.163l19.134,3.827C56.619,49.143,57.276,48.251,56.878,47.521z
			
 
				+			 M36.196,43.02c-0.495-0.099-0.986,0.186-1.145,0.664L33,49.838V42c0-1.29-2-1.29-2,0v7.838l-2.051-6.154
			
 
				+			c-0.158-0.473-0.657-0.762-1.145-0.664L9.903,46.6L32,6.088L54.097,46.6L36.196,43.02z"/><path fill="#283e79" d="M31.01,11.858l-4,28c-0.183,1.277,1.797,1.558,1.979,0.283L32,19.071l3.01,21.07c0.183,1.276,2.163,0.999,1.979-0.283
			
 
				+			l-4-28C32.831,10.746,31.169,10.746,31.01,11.858z"/></svg>
			
--- a/src/assets/img/wave2.svg
+++ b/src/assets/img/wave2.svg
@@ -0,0 +1,6 @@
 
				+<?xml version="1.0" encoding="utf-8"?>
			
 
				+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
			
 
				+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
			
 
				+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1920px" height="304px" viewBox="0 0 1920 304" enable-background="new 0 0 1920 304" xml:space="preserve">
			
 
				+	<path fill="#f6f6f6" d="M0,274c0,0,195.28-174,579.28-124s580.147-76.408,736-108C1463.28,12,1920,0,1920,0v304H0V274z" />
			
 
				+</svg>
			
--- a/src/components/AboutSection.vue
+++ b/src/components/AboutSection.vue
@@ -0,0 +1,125 @@
 
				+<template>
			
 
				+  <section id="about">
			
 
				+    <v-container fluid>
			
 
				+      <v-row align="center" justify="center">
			
 
				+        <v-col cols="10">
			
 
				+          <v-row align="center" justify="center">
			
 
				+            <v-col cols="12" md="7">
			
 
				+              <h1 class="font-weight-light display-2">印刷商城</h1>
			
 
				+              <h1 class="font-weight-light display-1 mb-3">
			
 
				+                Lorem ipsum dolor!
			
 
				+              </h1>
			
 
				+              <v-row>
			
 
				+                <v-col cols="12" class="d-flex align-center">
			
 
				+                  <v-img
			
 
				+                    src="@/assets/img/icon1.svg"
			
 
				+                    max-width="60px"
			
 
				+                    class="mr-4"
			
 
				+                  />
			
 
				+                  <p class="text-justify">
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                  </p>
			
 
				+                </v-col>
			
 
				+                <v-col cols="12" class="d-flex align-center">
			
 
				+                  <v-img
			
 
				+                    src="@/assets/img/icon2.svg"
			
 
				+                    max-width="60px"
			
 
				+                    class="mr-4"
			
 
				+                  />
			
 
				+                  <p class="text-justify">
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                  </p>
			
 
				+                </v-col>
			
 
				+                <v-col cols="12" class="d-flex align-center">
			
 
				+                  <v-img
			
 
				+                    src="@/assets/img/icon3.svg"
			
 
				+                    max-width="60px"
			
 
				+                    class="mr-4"
			
 
				+                  />
			
 
				+                  <p class="text-justify">
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                  </p>
			
 
				+                </v-col>
			
 
				+              </v-row>
			
 
				+            </v-col>
			
 
				+            <v-col cols="12" md="5" class="d-none d-md-flex">
			
 
				+              <v-img
			
 
				+                src="@/assets/img/ill1.svg"
			
 
				+                class="d-block ml-auto mr-auto"
			
 
				+                max-width="400px"
			
 
				+              />
			
 
				+            </v-col>
			
 
				+          </v-row>
			
 
				+
			
 
				+          <v-row align="center" justify="center">
			
 
				+            <v-col cols="12" md="7">
			
 
				+              <h1 class="font-weight-light display-2">印刷ERP</h1>
			
 
				+              <h1 class="font-weight-light display-1 mb-3">
			
 
				+                Lorem ipsum dolor!
			
 
				+              </h1>
			
 
				+              <v-row>
			
 
				+                <v-col cols="12" class="d-flex align-center">
			
 
				+                  <v-img
			
 
				+                      src="@/assets/img/icon1.svg"
			
 
				+                      max-width="60px"
			
 
				+                      class="mr-4"
			
 
				+                  />
			
 
				+                  <p class="text-justify">
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                  </p>
			
 
				+                </v-col>
			
 
				+                <v-col cols="12" class="d-flex align-center">
			
 
				+                  <v-img
			
 
				+                      src="@/assets/img/icon2.svg"
			
 
				+                      max-width="60px"
			
 
				+                      class="mr-4"
			
 
				+                  />
			
 
				+                  <p class="text-justify">
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                  </p>
			
 
				+                </v-col>
			
 
				+                <v-col cols="12" class="d-flex align-center">
			
 
				+                  <v-img
			
 
				+                      src="@/assets/img/icon3.svg"
			
 
				+                      max-width="60px"
			
 
				+                      class="mr-4"
			
 
				+                  />
			
 
				+                  <p class="text-justify">
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                    Lorem ipsum dolor sit amet consectetur, adipisicing elit.
			
 
				+                  </p>
			
 
				+                </v-col>
			
 
				+              </v-row>
			
 
				+            </v-col>
			
 
				+            <v-col cols="12" md="5" class="d-none d-md-flex">
			
 
				+              <v-img
			
 
				+                  src="@/assets/img/ill1.svg"
			
 
				+                  class="d-block ml-auto mr-auto"
			
 
				+                  max-width="400px"
			
 
				+              />
			
 
				+            </v-col>
			
 
				+          </v-row>
			
 
				+        </v-col>
			
 
				+      </v-row>
			
 
				+    </v-container>
			
 
				+  </section>
			
 
				+</template>
			
 
				+
			
 
				+<style scoped>
			
 
				+#about {
			
 
				+  background-color: #f4f7f5;
			
 
				+}
			
 
				+</style>
			
 
				+<script>
			
 
				+</script>
			
--- a/src/components/ContactSection.vue
+++ b/src/components/ContactSection.vue
@@ -0,0 +1,103 @@
 
				+<template>
			
 
				+  <section class="pb-8" id="contact">
			
 
				+    <v-container fluid>
			
 
				+      <v-row align="center" justify="center">
			
 
				+        <v-col cols="10">
			
 
				+          <v-row justify="center">
			
 
				+            <v-col cols="12" sm="5">
			
 
				+              <h1 class="font-weight-light display-1">联系我们</h1>
			
 
				+              <h3 class="font-weight-light mt-3">
			
 
				+                ddddd
			
 
				+              </h3>
			
 
				+              <h3 class="font-weight-light mt-3">
			
 
				+                dzzz
			
 
				+              </h3>
			
 
				+              <h3 class="font-weight-light mt-3">
			
 
				+                电话: 182
			
 
				+              </h3>
			
 
				+              <h3 class="font-weight-light">
			
 
				+                Email: jlutt@163.com
			
 
				+              </h3>
			
 
				+            </v-col>
			
 
				+            <v-col cols="12" sm="7">
			
 
				+
			
 
				+            </v-col>
			
 
				+          </v-row>
			
 
				+        </v-col>
			
 
				+      </v-row>
			
 
				+    </v-container>
			
 
				+    <div class="svg-border-waves text-white">
			
 
				+      <v-img src="~@/assets/img/borderWavesBlue.svg"/>
			
 
				+    </div>
			
 
				+<!--    <v-snackbar-->
			
 
				+<!--        v-model="snackbar.enabled"-->
			
 
				+<!--        timeout="3000"-->
			
 
				+<!--        right-->
			
 
				+<!--        top-->
			
 
				+<!--        :color="snackbar.color"-->
			
 
				+<!--    >-->
			
 
				+<!--      {{ snackbar.text }}-->
			
 
				+
			
 
				+<!--      <template v-slot:action="{ attrs }">-->
			
 
				+<!--        <v-btn-->
			
 
				+<!--            text-->
			
 
				+<!--            v-bind="attrs"-->
			
 
				+<!--            @click="snackbar.enabled = false"-->
			
 
				+<!--        >-->
			
 
				+<!--          Fechar-->
			
 
				+<!--        </v-btn>-->
			
 
				+<!--      </template>-->
			
 
				+<!--    </v-snackbar>-->
			
 
				+  </section>
			
 
				+</template>
			
 
				+
			
 
				+<style scoped>
			
 
				+#contact {
			
 
				+  background-color: #f4f7f5;
			
 
				+}
			
 
				+
			
 
				+.svg-border-waves .v-image {
			
 
				+  position: absolute;
			
 
				+  bottom: 0;
			
 
				+  left: 0;
			
 
				+  height: 3rem;
			
 
				+  width: 100%;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+</style>
			
 
				+
			
 
				+<script>
			
 
				+// import {db} from '@/main'
			
 
				+
			
 
				+export default {
			
 
				+  data: () => ({
			
 
				+    icons: ["fa-facebook", "fa-twitter", "fa-linkedin", "fa-instagram"],
			
 
				+    valid: true,
			
 
				+    name: "",
			
 
				+    nameRules: [
			
 
				+      (v) => !!v || "O campo nome é obrigatório",
			
 
				+      (v) => (v && v.length >= 6) || "O nome precisa ter mais de 6 caracteres",
			
 
				+    ],
			
 
				+    email: "",
			
 
				+    emailRules: [
			
 
				+      (v) => !!v || "O campo email é obrigatório",
			
 
				+      (v) => /.+@.+\..+/.test(v) || "O E-mail precisa ser válido",
			
 
				+    ],
			
 
				+    textArea: "",
			
 
				+    textAreaRules: [
			
 
				+      (v) => !!v || "O campo de texto é obrigatório",
			
 
				+      (v) => (v && v.length >= 10) || "Mínimo de 10 caracteres",
			
 
				+    ],
			
 
				+    lazy: false,
			
 
				+    snackbar: {
			
 
				+      enabled: false,
			
 
				+      text: '',
			
 
				+      color: ''
			
 
				+    }
			
 
				+  }),
			
 
				+  methods: {
			
 
				+
			
 
				+  }
			
 
				+};
			
 
				+</script>
			
--- a/src/components/DownloadSection.vue
+++ b/src/components/DownloadSection.vue
@@ -0,0 +1,45 @@
 
				+<template>
			
 
				+  <section id="download">
			
 
				+    <v-container fluid>
			
 
				+      <v-row align="center" justify="center">
			
 
				+        <v-col cols="10">
			
 
				+          <v-row align="center" justify="center">
			
 
				+            <v-col sm="4" class="hidden-xs-only">
			
 
				+              <v-img src="@/assets/img/ill2.svg" class="d-block ml-auto mr-auto" max-width="350px" />
			
 
				+            </v-col>
			
 
				+            <v-col cols="12" sm="8" class="white--text text-left">
			
 
				+              <h1 class="font-weight-light display-2 mb-2">Baixar Demonstração</h1>
			
 
				+              <h1 class="font-weight-light">
			
 
				+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste ex
			
 
				+                animi quod laboriosam vel blanditiis labore alias, aliquid,
			
 
				+                tempora repellendus non.
			
 
				+              </h1>
			
 
				+              <v-btn rounded outlined href="https://github.com/Joabsonlg/Landing-Page" target="_blank" large color="white" class="mt-4">
			
 
				+                <v-icon class="mr-2">
			
 
				+                  mdi-github
			
 
				+                </v-icon>
			
 
				+                Git Hub
			
 
				+              </v-btn>
			
 
				+            </v-col>
			
 
				+          </v-row>
			
 
				+        </v-col>
			
 
				+      </v-row>
			
 
				+    </v-container>
			
 
				+  </section>
			
 
				+</template>
			
 
				+
			
 
				+<style scoped>
			
 
				+#download {
			
 
				+  background-image: url("~@/assets/img/bgDownload.jpg");
			
 
				+  background-attachment: fixed;
			
 
				+  background-repeat: no-repeat;
			
 
				+  background-size: cover;
			
 
				+  background-position: center;
			
 
				+  height: 500px;
			
 
				+}
			
 
				+
			
 
				+#download .container,
			
 
				+#download .row {
			
 
				+  height: 100%;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -0,0 +1,60 @@
 
				+<template>
			
 
				+  <v-footer dark padless>
			
 
				+    <v-card flat tile class="secondary white--text text-center">
			
 
				+      <v-card-text>
			
 
				+        <v-btn
			
 
				+          v-for="(icon, i) in icons"
			
 
				+          :key="i"
			
 
				+          class="mx-4 white--text"
			
 
				+          :href="icon.link"
			
 
				+          target="_blank"
			
 
				+          icon
			
 
				+        >
			
 
				+          <v-icon size="24px">{{ icon.text }}</v-icon>
			
 
				+        </v-btn>
			
 
				+      </v-card-text>
			
 
				+
			
 
				+      <v-card-text class="white--text pt-0">
			
 
				+        Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
			
 
				+        Mauris cursus commodo interdum.
			
 
				+      </v-card-text>
			
 
				+
			
 
				+      <v-divider></v-divider>
			
 
				+
			
 
				+      <v-card-text class="white--text">
			
 
				+        {{ new Date().getFullYear() }} — <strong>Calango WEB</strong>
			
 
				+      </v-card-text>
			
 
				+    </v-card>
			
 
				+  </v-footer>
			
 
				+</template>
			
 
				+
			
 
				+<style scoped>
			
 
				+.v-card {
			
 
				+  width: 100%;
			
 
				+}
			
 
				+</style>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  data: () => ({
			
 
				+    icons: [
			
 
				+      {
			
 
				+        text: "mdi-facebook",
			
 
				+        link: "",
			
 
				+      },
			
 
				+      {
			
 
				+        text: "mdi-twitter",
			
 
				+        link: "",
			
 
				+      },
			
 
				+      {
			
 
				+        text: "mdi-linkedin",
			
 
				+        link: "",
			
 
				+      },
			
 
				+      {
			
 
				+        text: "mdi-instagram",
			
 
				+        link: "https://instagram.com/joabson_arley/",
			
 
				+      },
			
 
				+    ],
			
 
				+  }),
			
 
				+};
			
 
				+</script>
			
--- a/src/components/HomeSection.vue
+++ b/src/components/HomeSection.vue
@@ -0,0 +1,299 @@
 
				+<template>
			
 
				+  <section id="hero">
			
 
				+    <v-parallax dark src="@/assets/img/bgHero.jpg" height="750">
			
 
				+      <v-row align="center" justify="center">
			
 
				+        <v-col cols="10">
			
 
				+          <v-row align="center" justify="center">
			
 
				+            <v-col cols="12" md="6" xl="8">
			
 
				+              <h1 class="display-2 font-weight-bold mb-4">印界智程</h1>
			
 
				+              <h1 class="font-weight-light">
			
 
				+                Lorem ipsum dolor sit amet consectetur <br />
			
 
				+                adipisicing elit. Maiores porro voluptatibus <br />
			
 
				+                delectus nam optio harum!
			
 
				+              </h1>
			
 
				+              <v-btn
			
 
				+                rounded
			
 
				+                outlined
			
 
				+                large
			
 
				+                dark
			
 
				+                @click="$vuetify.goTo('#features')"
			
 
				+                class="mt-5"
			
 
				+              >
			
 
				+                Saiba mais
			
 
				+                <v-icon class="ml-2">mdi-arrow-down</v-icon>
			
 
				+              </v-btn>
			
 
				+              <div class="video d-flex align-center py-4">
			
 
				+                <a @click.stop="dialog = true" class="playBut">
			
 
				+                  <svg
			
 
				+                    version="1.1"
			
 
				+                    xmlns="http://www.w3.org/2000/svg"
			
 
				+                    xmlns:xlink="http://www.w3.org/1999/xlink"
			
 
				+                    xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
			
 
				+                    x="0px"
			
 
				+                    y="0px"
			
 
				+                    width="60px"
			
 
				+                    height="60px"
			
 
				+                    viewBox="0 0 213.7 213.7"
			
 
				+                    enable-background="new 0 0 213.7 213.7"
			
 
				+                    xml:space="preserve"
			
 
				+                  >
			
 
				+                    <polygon
			
 
				+                      class="triangle"
			
 
				+                      id="XMLID_18_"
			
 
				+                      fill="none"
			
 
				+                      stroke-width="7"
			
 
				+                      stroke-linecap="round"
			
 
				+                      stroke-linejoin="round"
			
 
				+                      stroke-miterlimit="10"
			
 
				+                      points="73.5,62.5 148.5,105.8 73.5,149.1 "
			
 
				+                    />
			
 
				+
			
 
				+                    <circle
			
 
				+                      class="circle"
			
 
				+                      id="XMLID_17_"
			
 
				+                      fill="none"
			
 
				+                      stroke-width="7"
			
 
				+                      stroke-linecap="round"
			
 
				+                      stroke-linejoin="round"
			
 
				+                      stroke-miterlimit="10"
			
 
				+                      cx="106.8"
			
 
				+                      cy="106.8"
			
 
				+                      r="103.3"
			
 
				+                    />
			
 
				+                  </svg>
			
 
				+                </a>
			
 
				+                <p class="subheading ml-2 mb-0">Assista o vídeo</p>
			
 
				+              </div>
			
 
				+            </v-col>
			
 
				+            <v-col cols="12" md="6" xl="4" class="hidden-sm-and-down"> </v-col>
			
 
				+          </v-row>
			
 
				+        </v-col>
			
 
				+      </v-row>
			
 
				+      <div class="svg-border-waves text-white">
			
 
				+        <v-img src="@/assets/img/borderWaves.svg" />
			
 
				+      </div>
			
 
				+    </v-parallax>
			
 
				+    <v-container fluid id="features" class="mt-2">
			
 
				+      <v-row align="center" justify="center">
			
 
				+        <v-col cols="10">
			
 
				+          <v-row align="center" justify="space-around">
			
 
				+            <!-- <v-col cols="12" class="text-center">
			
 
				+              <h1 class="font-weight-light display-2">Title</h1>
			
 
				+              <h1 class="font-weight-light">
			
 
				+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
			
 
				+              </h1>
			
 
				+            </v-col> -->
			
 
				+            <v-col
			
 
				+              cols="12"
			
 
				+              sm="4"
			
 
				+              class="text-center"
			
 
				+              v-for="(feature, i) in features"
			
 
				+              :key="i"
			
 
				+            >
			
 
				+              <v-hover v-slot:default="{ hover }">
			
 
				+                <v-card
			
 
				+                  class="card"
			
 
				+                  shaped
			
 
				+                  :elevation="hover ? 10 : 4"
			
 
				+                  :class="{ up: hover }"
			
 
				+                >
			
 
				+                  <v-img
			
 
				+                    :src="feature.img"
			
 
				+                    max-width="100px"
			
 
				+                    class="d-block ml-auto mr-auto"
			
 
				+                    :class="{ 'zoom-efect': hover }"
			
 
				+                  ></v-img>
			
 
				+                  <h1 class="font-weight-regular">{{ feature.title }}</h1>
			
 
				+                  <h4 class="font-weight-regular subtitle-1">
			
 
				+                    {{ feature.text }}
			
 
				+                  </h4>
			
 
				+                </v-card>
			
 
				+              </v-hover>
			
 
				+            </v-col>
			
 
				+          </v-row>
			
 
				+        </v-col>
			
 
				+      </v-row>
			
 
				+    </v-container>
			
 
				+    <v-dialog v-model="dialog" max-width="640px">
			
 
				+      <v-card>
			
 
				+        <youtube
			
 
				+          :video-id="videoId"
			
 
				+          @ready="ready"
			
 
				+          @playing="playing"
			
 
				+        ></youtube>
			
 
				+      </v-card>
			
 
				+    </v-dialog>
			
 
				+    <div class="svg-border-waves">
			
 
				+      <img src="~@/assets/img/wave2.svg" />
			
 
				+    </div>
			
 
				+  </section>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  data() {
			
 
				+    return {
			
 
				+      dialog: false,
			
 
				+      videoId: "i8IvvHJssWE",
			
 
				+      features: [
			
 
				+        {
			
 
				+          img: require("@/assets/img/icon2.png"),
			
 
				+          title: "在线商城",
			
 
				+          text: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
			
 
				+        },
			
 
				+        {
			
 
				+          img: require("@/assets/img/icon1.png"),
			
 
				+          title: "印刷ERP",
			
 
				+          text: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
			
 
				+        },
			
 
				+        // {
			
 
				+        //   img: require("@/assets/img/icon3.png"),
			
 
				+        //   title: "印刷工具",
			
 
				+        //   text: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
			
 
				+        // },
			
 
				+      ],
			
 
				+    };
			
 
				+  },
			
 
				+  watch: {
			
 
				+    dialog(value) {
			
 
				+      if (!value) {
			
 
				+        this.pause();
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+  methods: {
			
 
				+    ready(event) {
			
 
				+      this.player = event.target;
			
 
				+    },
			
 
				+    playing(event) {
			
 
				+      // The player is playing a video.
			
 
				+    },
			
 
				+    change() {
			
 
				+      // when you change the value, the player will also change.
			
 
				+      // If you would like to change `playerVars`, please change it before you change `videoId`.
			
 
				+      // If `playerVars.autoplay` is 1, `loadVideoById` will be called.
			
 
				+      // If `playerVars.autoplay` is 0, `cueVideoById` will be called.
			
 
				+      this.videoId = "another video id";
			
 
				+    },
			
 
				+    stop() {
			
 
				+      this.player.stopVideo();
			
 
				+    },
			
 
				+    pause() {
			
 
				+      this.player.pauseVideo();
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+.circle {
			
 
				+  stroke: white;
			
 
				+  stroke-dasharray: 650;
			
 
				+  stroke-dashoffset: 650;
			
 
				+  -webkit-transition: all 0.5s ease-in-out;
			
 
				+  opacity: 0.3;
			
 
				+}
			
 
				+
			
 
				+.playBut {
			
 
				+  /*  border: 1px solid red;*/
			
 
				+  display: inline-block;
			
 
				+  -webkit-transition: all 0.5s ease;
			
 
				+
			
 
				+  .triangle {
			
 
				+    -webkit-transition: all 0.7s ease-in-out;
			
 
				+    stroke-dasharray: 240;
			
 
				+    stroke-dashoffset: 480;
			
 
				+    stroke: white;
			
 
				+    transform: translateY(0);
			
 
				+  }
			
 
				+
			
 
				+  &:hover {
			
 
				+    .triangle {
			
 
				+      stroke-dashoffset: 0;
			
 
				+      opacity: 1;
			
 
				+      stroke: white;
			
 
				+      animation: nudge 0.7s ease-in-out;
			
 
				+
			
 
				+      @keyframes nudge {
			
 
				+        0% {
			
 
				+          transform: translateX(0);
			
 
				+        }
			
 
				+        30% {
			
 
				+          transform: translateX(-5px);
			
 
				+        }
			
 
				+        50% {
			
 
				+          transform: translateX(5px);
			
 
				+        }
			
 
				+        70% {
			
 
				+          transform: translateX(-2px);
			
 
				+        }
			
 
				+        100% {
			
 
				+          transform: translateX(0);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .circle {
			
 
				+      stroke-dashoffset: 0;
			
 
				+      opacity: 1;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
 
				+
			
 
				+<style>
			
 
				+.btn-play {
			
 
				+  transition: 0.2s;
			
 
				+}
			
 
				+
			
 
				+.svg-border-waves .v-image {
			
 
				+  position: absolute;
			
 
				+  bottom: 0;
			
 
				+  left: 0;
			
 
				+  height: 3rem;
			
 
				+  width: 100%;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+#hero {
			
 
				+  z-index: 0;
			
 
				+}
			
 
				+.svg-border-waves img {
			
 
				+  position: absolute;
			
 
				+  bottom: 0;
			
 
				+  left: 0;
			
 
				+  width: 100%;
			
 
				+  margin-bottom: -2px;
			
 
				+  z-index: -1;
			
 
				+}
			
 
				+
			
 
				+.card {
			
 
				+  min-height: 300px;
			
 
				+  padding: 10px;
			
 
				+  transition: 0.5s ease-out;
			
 
				+}
			
 
				+
			
 
				+.card .v-image {
			
 
				+  margin-bottom: 15px;
			
 
				+  transition: 0.75s;
			
 
				+}
			
 
				+
			
 
				+.card h1 {
			
 
				+  margin-bottom: 10px;
			
 
				+}
			
 
				+
			
 
				+.zoom-efect {
			
 
				+  transform: scale(1.1);
			
 
				+}
			
 
				+
			
 
				+.up {
			
 
				+  transform: translateY(-20px);
			
 
				+  transition: 0.5s ease-out;
			
 
				+}
			
 
				+</style>
			
 
				+
			
 
				+<style>
			
 
				+section {
			
 
				+  position: relative;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -0,0 +1,129 @@
 
				+<template>
			
 
				+  <div>
			
 
				+    <v-navigation-drawer
			
 
				+      v-model="drawer"
			
 
				+      app
			
 
				+      temporary
			
 
				+      dark
			
 
				+      src="@/assets/img/bgDrawer.jpg"
			
 
				+    >
			
 
				+      <v-list>
			
 
				+        <v-list-item>
			
 
				+          <v-list-item-avatar>
			
 
				+            <img src="@/assets/img/logo.png" alt="Logo" />
			
 
				+          </v-list-item-avatar>
			
 
				+          <v-list-item-content>
			
 
				+            <v-list-item-title class="title">Calango</v-list-item-title>
			
 
				+            <v-list-item-subtitle>WEB</v-list-item-subtitle>
			
 
				+          </v-list-item-content>
			
 
				+        </v-list-item>
			
 
				+      </v-list>
			
 
				+
			
 
				+      <v-divider />
			
 
				+
			
 
				+      <v-list dense>
			
 
				+        <v-list-item
			
 
				+          v-for="([icon, text, link], i) in items"
			
 
				+          :key="i"
			
 
				+          link
			
 
				+          @click="$vuetify.goTo(link)"
			
 
				+        >
			
 
				+          <v-list-item-icon class="justify-center">
			
 
				+            <v-icon>{{ icon }}</v-icon>
			
 
				+          </v-list-item-icon>
			
 
				+          <v-list-item-content>
			
 
				+            <v-list-item-title class="subtitile-1">{{
			
 
				+              text
			
 
				+            }}</v-list-item-title>
			
 
				+          </v-list-item-content>
			
 
				+        </v-list-item>
			
 
				+      </v-list>
			
 
				+    </v-navigation-drawer>
			
 
				+
			
 
				+    <v-app-bar
			
 
				+      app
			
 
				+      :color="color"
			
 
				+      :flat="flat"
			
 
				+      dark
			
 
				+      class="px-15"
			
 
				+      :class="{ expand: flat }"
			
 
				+    >
			
 
				+      <v-toolbar-title>
			
 
				+        <v-img src="@/assets/img/logo.png" max-width="50px" />
			
 
				+      </v-toolbar-title>
			
 
				+      <v-spacer />
			
 
				+      <v-app-bar-nav-icon
			
 
				+        @click.stop="drawer = !drawer"
			
 
				+        class="mr-4"
			
 
				+        v-if="isXs"
			
 
				+      />
			
 
				+      <div v-else>
			
 
				+        <v-btn text @click="$vuetify.goTo('#hero')">
			
 
				+          <span class="mr-2">产品</span>
			
 
				+        </v-btn>
			
 
				+        <v-btn text @click="$vuetify.goTo('#features')">
			
 
				+          <span class="mr-2">功能介绍</span>
			
 
				+        </v-btn>
			
 
				+        <v-btn text @click="$vuetify.goTo('#download')">
			
 
				+          <span class="mr-2">下载</span>
			
 
				+        </v-btn>
			
 
				+        <v-btn text @click="$vuetify.goTo('#pricing')">
			
 
				+          <span class="mr-2">价格</span>
			
 
				+        </v-btn>
			
 
				+        <v-btn rounded outlined text @click="$vuetify.goTo('#contact')">
			
 
				+          <span class="mr-2">联系我们</span>
			
 
				+        </v-btn>
			
 
				+      </div>
			
 
				+    </v-app-bar>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<style scoped>
			
 
				+.v-toolbar {
			
 
				+  transition: 0.6s;
			
 
				+}
			
 
				+
			
 
				+.expand {
			
 
				+  height: 80px !important;
			
 
				+  padding-top: 10px;
			
 
				+}
			
 
				+</style>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  data: () => ({
			
 
				+    drawer: null,
			
 
				+    isXs: false,
			
 
				+    items: [
			
 
				+      ["mdi-home-outline", "Home", "#hero"],
			
 
				+      ["mdi-information-outline", "Sobre", "#features"],
			
 
				+      ["mdi-download-box-outline", "Download", "#download"],
			
 
				+      ["mdi-currency-usd", "Preços", "#pricing"],
			
 
				+      ["mdi-email-outline", "Contatos", "#contact"],
			
 
				+    ],
			
 
				+  }),
			
 
				+  props: {
			
 
				+    color: String,
			
 
				+    flat: Boolean,
			
 
				+  },
			
 
				+  methods: {
			
 
				+    onResize() {
			
 
				+      this.isXs = window.innerWidth < 850;
			
 
				+    },
			
 
				+  },
			
 
				+
			
 
				+  watch: {
			
 
				+    isXs(value) {
			
 
				+      if (!value) {
			
 
				+        if (this.drawer) {
			
 
				+          this.drawer = false;
			
 
				+        }
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.onResize();
			
 
				+    window.addEventListener("resize", this.onResize, { passive: true });
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
--- a/src/components/PricingSection.vue
+++ b/src/components/PricingSection.vue
@@ -0,0 +1,354 @@
 
				+<template>
			
 
				+  <section id="pricing" class="pb-8">
			
 
				+    <v-container fluid>
			
 
				+      <v-row align="center" justify="center">
			
 
				+        <v-col cols="10">
			
 
				+          <v-card style="width: 100%">
			
 
				+            <h1 class="text-center pt-6 font-weight-light display-2">价格</h1>
			
 
				+            <v-divider class="my-6"></v-divider>
			
 
				+            <v-row class="text-center">
			
 
				+              <v-col class="col-12 col-sm-6 col-md-4">
			
 
				+                <div class="flex-center">
			
 
				+                  <v-card-text>
			
 
				+                    <div class="flex-center">
			
 
				+                      <div class="circle1">
			
 
				+                        <div class="circle2">
			
 
				+                          <v-img src="~@/assets/img/paperplane.svg"></v-img>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <div class="text--disabled text-uppercase text-h5 my-2">基础版</div>
			
 
				+                    <v-divider class="my-2"/>
			
 
				+                    <div class="text-uppercase blue--text">Domínios personalizados</div>
			
 
				+                    <v-divider class="my-2"/>
			
 
				+                    <div class="text-uppercase blue--text">Limite de 1000 acessos diários</div>
			
 
				+                    <v-divider class="my-2"/>
			
 
				+                    <div class="text-uppercase blue--text">Outras características...</div>
			
 
				+                    <v-divider class="my-2"/>
			
 
				+                    <div class="text-uppercase text-h4 mt-6 blue--text">R$ 20,00</div>
			
 
				+                    <v-btn
			
 
				+                        v-bind="size"
			
 
				+                        rounded
			
 
				+                        outlined
			
 
				+                        color="blue"
			
 
				+                        class="mt-6"
			
 
				+                    >
			
 
				+                      Comece Agora!
			
 
				+                    </v-btn>
			
 
				+                  </v-card-text>
			
 
				+                  <v-divider style="margin-right: -23px" vertical v-if="this.$vuetify.breakpoint.smAndUp"></v-divider>
			
 
				+                </div>
			
 
				+                <v-divider class="mx-4" v-if="!this.$vuetify.breakpoint.smAndUp"></v-divider>
			
 
				+              </v-col>
			
 
				+              <v-col class="col-12 col-sm-6 col-md-4">
			
 
				+                <div class="flex-center">
			
 
				+                  <v-card-text>
			
 
				+                    <div class="flex-center">
			
 
				+                      <div class="circle1">
			
 
				+                        <div class="circle2">
			
 
				+                          <v-img src="~@/assets/img/airplane.svg"/>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <div class="text--disabled text-uppercase text-h5 my-2">标准版</div>
			
 
				+                    <v-divider class="my-2"/>
			
 
				+                    <div class="text-uppercase blue--text">Domínios personalizados</div>
			
 
				+                    <v-divider class="my-2"/>
			
 
				+                    <div class="text-uppercase blue--text">Limite de 10000 acessos diários</div>
			
 
				+                    <v-divider class="my-2"/>
			
 
				+                    <div class="text-uppercase blue--text">Outras características...</div>
			
 
				+                    <v-divider class="my-2"/>
			
 
				+                    <div class="text-uppercase text-h4 mt-6 blue--text">R$ 100,00</div>
			
 
				+                    <v-btn
			
 
				+                        v-bind="size"
			
 
				+                        rounded
			
 
				+                        outlined
			
 
				+                        color="blue"
			
 
				+                        class="mt-6"
			
 
				+                    >
			
 
				+                      Comece Agora!
			
 
				+                    </v-btn>
			
 
				+                  </v-card-text>
			
 
				+                  <v-divider style="margin-right: -23px" vertical v-if="this.$vuetify.breakpoint.mdAndUp"></v-divider>
			
 
				+                </div>
			
 
				+                <v-divider class="mx-4" v-if="!this.$vuetify.breakpoint.smAndUp"></v-divider>
			
 
				+              </v-col>
			
 
				+              <v-col class="col-12 col-md-4">
			
 
				+                <v-divider v-if="this.$vuetify.breakpoint.smOnly" class="mx-4"></v-divider>
			
 
				+
			
 
				+                <div class="flex-center">
			
 
				+                  <v-card-text>
			
 
				+                    <div class="flex-center">
			
 
				+                      <div class="circle1">
			
 
				+                        <div class="circle2">
			
 
				+                          <v-img src="~@/assets/img/aeroplane.svg"/>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <div class="text--disabled text-uppercase text-h5 my-2">豪华版</div>
			
 
				+                    <v-divider class="my-2"/>
			
 
				+                    <div class="text-uppercase blue--text">Domínios personalizados</div>
			
 
				+                    <v-divider class="my-2"/>
			
 
				+                    <div class="text-uppercase blue--text">Acessos ilimitados</div>
			
 
				+                    <v-divider class="my-2"/>
			
 
				+                    <div class="text-uppercase blue--text">Outras características...</div>
			
 
				+                    <v-divider class="my-2"/>
			
 
				+                    <div class="text-uppercase text-h4 mt-6 blue--text">R$ 500,00</div>
			
 
				+                    <v-btn
			
 
				+                        v-bind="size"
			
 
				+                        rounded
			
 
				+                        outlined
			
 
				+                        color="blue"
			
 
				+                        class="mt-6"
			
 
				+                    >
			
 
				+                      Comece Agora!
			
 
				+                    </v-btn>
			
 
				+                  </v-card-text>
			
 
				+                </div>
			
 
				+              </v-col>
			
 
				+            </v-row>
			
 
				+          </v-card>
			
 
				+        </v-col>
			
 
				+      </v-row>
			
 
				+    </v-container>
			
 
				+    <div class="svg-border-rounded text-light">
			
 
				+      <!-- <svg
			
 
				+        xmlns="http://www.w3.org/2000/svg"
			
 
				+        viewBox="0 0 144.54 17.34"
			
 
				+        preserveAspectRatio="none"
			
 
				+        fill="currentColor"
			
 
				+      >
			
 
				+        <path
			
 
				+          d="M144.54,17.34H0V0H144.54ZM0,0S32.36,17.34,72.27,17.34,144.54,0,144.54,0"
			
 
				+        />
			
 
				+      </svg> -->
			
 
				+      <svg
			
 
				+          xmlns="http://www.w3.org/2000/svg"
			
 
				+          viewBox="0 0 1440 320"
			
 
				+          preserveAspectRatio="none"
			
 
				+          fill="currentColor"
			
 
				+      >
			
 
				+        <path
			
 
				+            d="M0,64L80,90.7C160,117,320,171,480,181.3C640,192,800,160,960,138.7C1120,117,1280,107,1360,101.3L1440,96L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"
			
 
				+        ></path>
			
 
				+      </svg>
			
 
				+    </div>
			
 
				+  </section>
			
 
				+</template>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+$main_color: #283e79;
			
 
				+
			
 
				+ul {
			
 
				+  font-size: 13px;
			
 
				+  line-height: 1.5em;
			
 
				+  margin: 5px 0 15px;
			
 
				+  padding: 0;
			
 
				+
			
 
				+  li {
			
 
				+    list-style: none;
			
 
				+    position: relative;
			
 
				+    padding: 0 0 0 20px;
			
 
				+  }
			
 
				+
			
 
				+  li {
			
 
				+    &::before {
			
 
				+      content: "";
			
 
				+      position: absolute;
			
 
				+      left: 0;
			
 
				+      top: 5px;
			
 
				+      width: 10px;
			
 
				+      height: 10px;
			
 
				+      background-color: $main_color;
			
 
				+      border-radius: 50%;
			
 
				+      -moz-border-radius: 50%;
			
 
				+      -webkit-eeborder-radius: 50%;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
 
				+
			
 
				+<style scoped>
			
 
				+.header {
			
 
				+  background-color: #283e79;
			
 
				+  color: white;
			
 
				+}
			
 
				+
			
 
				+.circle1 {
			
 
				+  border-radius: 50%;
			
 
				+  width: 150px;
			
 
				+  height: 150px;
			
 
				+  background-color: #f0f8ff;
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  justify-content: center;
			
 
				+}
			
 
				+
			
 
				+.circle2 {
			
 
				+  border-radius: 50%;
			
 
				+  width: 100px;
			
 
				+  height: 100px;
			
 
				+  background-color: #e0effc;
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  justify-content: center;
			
 
				+}
			
 
				+
			
 
				+.flex-center {
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  justify-content: center;
			
 
				+}
			
 
				+
			
 
				+.svg-border-rounded svg {
			
 
				+  position: absolute;
			
 
				+  bottom: 0;
			
 
				+  left: 0;
			
 
				+  width: 100%;
			
 
				+  color: #f4f7f5;
			
 
				+  z-index: -1;
			
 
				+}
			
 
				+
			
 
				+#pricing {
			
 
				+  z-index: 0;
			
 
				+}
			
 
				+
			
 
				+.content {
			
 
				+  z-index: 1;
			
 
				+}
			
 
				+
			
 
				+svg {
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+section {
			
 
				+  position: relative;
			
 
				+}
			
 
				+</style>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  data: () => ({
			
 
				+    planos: [
			
 
				+      {
			
 
				+        title: "Básico",
			
 
				+        price: "R$100,00",
			
 
				+        img: "f1.png",
			
 
				+        features: [
			
 
				+          {
			
 
				+            icon: {
			
 
				+              text: "mdi-check",
			
 
				+              color: "success",
			
 
				+            },
			
 
				+            text: "Feature 1",
			
 
				+          },
			
 
				+          {
			
 
				+            icon: {
			
 
				+              text: "mdi-check",
			
 
				+              color: "success",
			
 
				+            },
			
 
				+            text: "Feature 2",
			
 
				+          },
			
 
				+          {
			
 
				+            icon: {
			
 
				+              text: "mdi-cancel",
			
 
				+              color: "red",
			
 
				+            },
			
 
				+            text: "Feature 3",
			
 
				+          },
			
 
				+          {
			
 
				+            icon: {
			
 
				+              text: "mdi-cancel",
			
 
				+              color: "red",
			
 
				+            },
			
 
				+            text: "Feature 4",
			
 
				+          },
			
 
				+        ],
			
 
				+      },
			
 
				+      {
			
 
				+        title: "Padrão",
			
 
				+        price: "R$150,00",
			
 
				+        img: "f2.png",
			
 
				+        features: [
			
 
				+          {
			
 
				+            icon: {
			
 
				+              text: "mdi-check",
			
 
				+              color: "success",
			
 
				+            },
			
 
				+            text: "Feature 1",
			
 
				+            color: "success",
			
 
				+          },
			
 
				+          {
			
 
				+            icon: {
			
 
				+              text: "mdi-check",
			
 
				+              color: "success",
			
 
				+            },
			
 
				+            text: "Feature 2",
			
 
				+          },
			
 
				+          {
			
 
				+            icon: {
			
 
				+              text: "mdi-check",
			
 
				+              color: "success",
			
 
				+            },
			
 
				+            text: "Feature 3",
			
 
				+            color: "success",
			
 
				+          },
			
 
				+          {
			
 
				+            icon: {
			
 
				+              text: "mdi-cancel",
			
 
				+              color: "red",
			
 
				+            },
			
 
				+            text: "Feature 4",
			
 
				+          },
			
 
				+        ],
			
 
				+      },
			
 
				+      {
			
 
				+        title: "Premium",
			
 
				+        price: "R$250,00",
			
 
				+        img: "f3.png",
			
 
				+        features: [
			
 
				+          {
			
 
				+            icon: {
			
 
				+              text: "mdi-check",
			
 
				+              color: "success",
			
 
				+            },
			
 
				+            text: "Feature 1",
			
 
				+            color: "success",
			
 
				+          },
			
 
				+          {
			
 
				+            icon: {
			
 
				+              text: "mdi-check",
			
 
				+              color: "success",
			
 
				+            },
			
 
				+            text: "Feature 2",
			
 
				+          },
			
 
				+          {
			
 
				+            icon: {
			
 
				+              text: "mdi-check",
			
 
				+              color: "success",
			
 
				+            },
			
 
				+            text: "Feature 3",
			
 
				+            color: "success",
			
 
				+          },
			
 
				+          {
			
 
				+            icon: {
			
 
				+              text: "mdi-check",
			
 
				+              color: "success",
			
 
				+            },
			
 
				+            text: "Feature 4",
			
 
				+            color: "success",
			
 
				+          },
			
 
				+        ],
			
 
				+      },
			
 
				+    ],
			
 
				+  }),
			
 
				+  computed: {
			
 
				+    size() {
			
 
				+      const size = {md: "large", xl: "x-large"}[
			
 
				+          this.$vuetify.breakpoint.name
			
 
				+          ];
			
 
				+      return size ? {[size]: true} : {};
			
 
				+    }
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,20 @@
 
				+import Vue from 'vue'
			
 
				+import App from './App.vue'
			
 
				+import vuetify from './plugins/vuetify';
			
 
				+import VueYouTubeEmbed from 'vue-youtube-embed'
			
 
				+// import firebase from 'firebase/app'
			
 
				+// import 'firebase/firestore'
			
 
				+
			
 
				+Vue.use(VueYouTubeEmbed)
			
 
				+Vue.config.productionTip = false
			
 
				+
			
 
				+// firebase.initializeApp({
			
 
				+//  Configurações do seu app
			
 
				+// })
			
 
				+
			
 
				+// export const db = firebase.firestore()
			
 
				+
			
 
				+new Vue({
			
 
				+  vuetify,
			
 
				+  render: h => h(App)
			
 
				+}).$mount('#app')
			
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -0,0 +1,16 @@
 
				+import Vue from 'vue';
			
 
				+import Vuetify from 'vuetify/lib';
			
 
				+
			
 
				+Vue.use(Vuetify);
			
 
				+
			
 
				+export default new Vuetify({
			
 
				+    theme: {
			
 
				+        themes: {
			
 
				+            light: {
			
 
				+                primary: "#119DA4",
			
 
				+                secondary: "#171b34",
			
 
				+                accent: "3D87E4"
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+});
			
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  "transpileDependencies": [
			
 
				+    "vuetify"
			
 
				+  ]
			
 
				+}