Init

src/components/AboutSection.vue

@@ -67,3 +67,10 @@
   background-color: #f4f7f5;
 }
 </style>
+<script>
+export default {
+  data: () => ({
+    model: null,
+  }),
+}
+</script>

src/components/ContactSection.vue

@@ -5,7 +5,7 @@
         <v-col cols="10">
           <v-row justify="center">
             <v-col cols="12" sm="5">
-              <h1 class="font-weight-light display-1">Contate-nos</h1>
+              <h1 class="font-weight-light display-1">Contact Us</h1>
               <h3 class="font-weight-light mt-3">
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste
                 explicabo commodi quisquam asperiores dolore ad enim provident
@@ -15,7 +15,7 @@
                 Lorem ipsum dolor sit amet consectetur adipisicing.
               </h3>
               <h3 class="font-weight-light mt-3">
-                Telefone: +xx (xx) xxxxx-xxxx
+                Telephone: +xx (xx) xxxxx-xxxx
               </h3>
               <h3 class="font-weight-light">
                 Email: email@email.com
@@ -26,7 +26,7 @@
                 <v-text-field
                     v-model="name"
                     :rules="nameRules"
-                    label="Nome"
+                    label="Name"
                     required
                 ></v-text-field>
 
@@ -40,7 +40,7 @@
                 <v-textarea
                     v-model="textArea"
                     :rules="textAreaRules"
-                    label="Mensagem"
+                    label="Message"
                     required
                 />
 
@@ -53,7 +53,7 @@
                     class="mt-3"
                     @click="submit"
                 >
-                  Enviar
+                  Send
                 </v-btn>
               </v-form>
             </v-col>
@@ -111,18 +111,18 @@ export default {
     valid: true,
     name: "",
     nameRules: [
-      (v) => !!v || "O campo nome é obrigatório",
-      (v) => (v && v.length >= 6) || "O nome precisa ter mais de 6 caracteres",
+      (v) => !!v || "The name field is required",
+      (v) => (v && v.length >= 6) || "The name must be at least 6 characters long",
     ],
     email: "",
     emailRules: [
-      (v) => !!v || "O campo email é obrigatório",
-      (v) => /.+@.+\..+/.test(v) || "O E-mail precisa ser válido",
+      (v) => !!v || "Email field is required",
+      (v) => /.+@.+\..+/.test(v) || "Email must be valid",
     ],
     textArea: "",
     textAreaRules: [
-      (v) => !!v || "O campo de texto é obrigatório",
-      (v) => (v && v.length >= 10) || "Mínimo de 10 caracteres",
+      (v) => !!v || "Text fields are required",
+      (v) => (v && v.length >= 10) || "Minimum 10 characters",
     ],
     lazy: false,
     snackbar: {

src/components/HomeSection.vue

@@ -77,6 +77,17 @@
       <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-black text-center">Latest Product</h1>
+              <h1 class="font-weight-light text-center">High-quality products are your best choice</h1>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+
+      <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">
@@ -151,6 +162,21 @@ export default {
           title: "Código Aberto",
           text: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
         },
+        {
+          img: require("@/assets/img/icon2.png"),
+          title: "Design Limpo",
+          text: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+        },
+        {
+          img: require("@/assets/img/icon1.png"),
+          title: "Dados Seguros",
+          text: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+        },
+        {
+          img: require("@/assets/img/icon3.png"),
+          title: "Código Aberto",
+          text: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+        },
       ],
     };
   },

src/components/Navigation.vue

@@ -58,15 +58,15 @@
         v-if="isXs"
       />
       <div v-else>
-        <v-btn text @click="$vuetify.goTo('#hero')">
+        <v-btn text @click="$vuetify.goTo('#home')">
           <span class="mr-2">Home</span>
         </v-btn>
         <v-btn text @click="$vuetify.goTo('#features')">
-          <span class="mr-2">About Us</span>
-        </v-btn>
-        <v-btn text @click="$vuetify.goTo('#download')">
           <span class="mr-2">Products</span>
         </v-btn>
+        <v-btn text @click="$vuetify.goTo('#about')">
+          <span class="mr-2">About Us</span>
+        </v-btn>
         <v-btn text @click="$vuetify.goTo('#pricing')">
           <span class="mr-2">Blog</span>
         </v-btn>
@@ -95,7 +95,7 @@ export default {
     drawer: null,
     isXs: false,
     items: [
-      ["mdi-home-outline", "Home", "#hero"],
+      ["mdi-home-outline", "Home", "#home"],
       ["mdi-information-outline", "Sobre", "#features"],
       ["mdi-download-box-outline", "Download", "#download"],
       ["mdi-currency-usd", "Preços", "#pricing"],

src/components/PricingSection.vue

@@ -4,7 +4,7 @@
       <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">Planos</h1>
+            <h1 class="text-center pt-6 font-weight-light display-2">Blog</h1>
             <v-divider class="my-6"></v-divider>
             <v-row class="text-center">
               <v-col class="col-12 col-sm-6 col-md-4">
@@ -20,21 +20,6 @@
                     <div class="text--disabled text-uppercase text-h5 my-2">Básico</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>
@@ -53,21 +38,6 @@
                     <div class="text--disabled text-uppercase text-h5 my-2">Padrão</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>
@@ -88,21 +58,6 @@
                     <div class="text--disabled text-uppercase text-h5 my-2">Empresarial</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>