Merge pull request #26 from NunnaTech/develop

Feature and fixes from develop
NunnaTech · Feb 2, 2024 · a6b3dc5 · a6b3dc5
2 parents 15eea30 + 978cad7
commit a6b3dc5
Show file tree

Hide file tree

Showing 15 changed files with 383 additions and 204 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -0,0 +1,49 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bookworm",
+	"features": {
+		"ghcr.io/devcontainers-contrib/features/vue-cli:2": {}
+	},
+
+	// Share .ssh folder with devcontainer  
+	"remoteUser": "root",
+	"mounts": [
+		"source=${localEnv:HOME}/.ssh,target=/root/.ssh,type=bind,consistency=cached"
+	],
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Configure tool-specific properties.
+	"customizations": {
+		"vscode": {
+				"extensions": [
+					"christian-kohler.path-intellisense",
+					"naumovs.color-highlight",
+					"donjayamanne.githistory",
+					"formulahendry.auto-rename-tag",
+					"steoates.autoimport",
+					"gruntfuggly.todo-tree",
+					"sonarsource.sonarlint-vscode",
+					"eamodio.gitlens",
+					"kisstkondoros.vscode-gutter-preview",
+
+					"vue.volar",
+					"vue.vscode-typescript-vue-plugin",
+					"mgmcdermott.vscode-language-babel"
+				]
+		}
+	}
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,41 @@
+# https://github.com/actions/deploy-pages#usage
+name: Deploy to GitHub Pages
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - master
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: corepack enable
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+      # Pick your own package manager and build script
+      - run: npm install
+      - run: npx nuxt build --preset github_pages
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./.output/public
+  # Deployment job
+  deploy:
+    # Add a dependency to the build job
+    needs: build
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write      # to deploy to Pages
+      id-token: write   # to verify the deployment originates from an appropriate source
+    # Deploy to the github_pages environment
+    environment:
+      name: github_pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
diff --git a/app.vue b/app.vue
@@ -34,7 +34,14 @@ export default {
     ContactBlock,
     FooterBlock
   },
-
+  mounted() {
+    let lang = localStorage.getItem('lang');
+    if(!lang){
+      let lang = 'mx'
+      localStorage.setItem('lang', lang);
+    }
+    this.$i18n.setLocale(lang);
+  }
 }
 </script>
 

diff --git a/components/AboutBlock.vue b/components/AboutBlock.vue
@@ -1,19 +1,9 @@
 <template>
-  <div id="about" class="w-full h-full sm:h-screen flex items-center justify-center">
+  <div id="about" class="w-full flex items-center justify-center">
     <div class="py-5">
-      <h1 class="text-center text-accent font-bold text-4xl sm:text-6xl">
-        ¿Quiénes somos?
-      </h1>
-      <br>
-      <p class="text-justify sm:text-center">
-        Nuestro equipo de desarrolladores expertos se dedica a entender tus necesidades y transformarlas en soluciones
-        efectivas y atractivas. Ya sea una aplicación web, móvil o de escritorio, podemos diseñarla para que sea
-        intuitiva, innovadora y, sobre todo, eficaz.
-        <br>
-        <br>
-        Nuestro objetivo no es solo cumplir tus expectativas, sino superarlas. Trabajamos en estrecha colaboración
-        contigo para garantizar que tu visión se haga realidad con la mejor tecnología y diseño a tu disposición. Tu
-        éxito es nuestro éxito, y estamos comprometidos a poner nuestras habilidades y experiencia a trabajar para ti."
+      <h1 class="my-5 text-center text-accent font-bold text-4xl sm:text-6xl" v-t="'NavBar.0.label'"/>
+      <p :key="i" v-for="(p, i) in $tm(`${this.$options.name}`)" class="my-4 font-light text-justify sm:text-center">
+        {{ $rt(p) }}
       </p>
     </div>
   </div>

diff --git a/components/ContactBlock.vue b/components/ContactBlock.vue
@@ -1,74 +1,61 @@
 <template>
   <div
-    id="contact"
-    class="w-full h-full sm:h-screen sm:flex sm:items-center sm:justify-center"
+      id="contact"
+      class="sm:min-h-screen w-full sm:flex sm:items-center sm:justify-center"
   >
     <div class="py-5">
-      <h1 class="text-center text-accent font-bold text-4xl sm:text-6xl mb-2">
-        Contáctanos
-      </h1>
-      <p class="text-justify sm:text-center">
-        "¿Listo para llevar tu idea al siguiente nivel? ¡Nos encantaría
-        escucharte! Contáctanos hoy y descubre cómo podemos transformar tu
-        visión en una solución digital efectiva. Estamos aquí para ti."
-      </p>
-      <form @submit="handleSubmit">
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5 sm:gap-12 my-7">
+      <h1 class="my-5 text-center text-accent font-bold text-4xl sm:text-6xl" v-t="'NavBar.3.label'"/>
+      <p class="my-4 font-light text-justify sm:text-center" v-t="'Contact.description'"/>
+      <form class="my-4" @submit="handleSubmit">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5 sm:gap-12">
           <section>
             <input
-              type="text"
-              placeholder="Nombre Completo"
-              class="input input-bordered bg-neutral w-full text-xl"
-              v-model="formData.name"
-              @blur="errors.name = ''"
+                type="text"
+                :placeholder="$t('Contact.form.name')"
+                class="input input-bordered bg-neutral w-full text-xl"
+                v-model="formData.name"
+                @blur="errors.name = ''"
             />
-            <span class="ml-4 text-red-500 text-xl font-bold">{{
-              errors.name
-            }}</span>
+            <span class="ml-4 text-red-500 text-xl font-bold">{{errors.name}}</span>
           </section>
           <section>
             <input
-              type="email"
-              placeholder="Correo Electrónico"
-              class="input input-bordered bg-neutral w-full text-xl"
-              v-model="formData.email"
-              @blur="errors.email = ''"
+                type="email"
+                :placeholder="$t('Contact.form.email')"
+                class="input input-bordered bg-neutral w-full text-xl"
+                v-model="formData.email"
+                @blur="errors.email = ''"
             />
-            <span class="ml-4 text-red-500 text-xl font-bold">{{
-              errors.email
-            }}</span>
+            <span class="ml-4 text-red-500 text-xl font-bold">{{errors.email}}</span>
           </section>
           <section class="sm:col-span-2">
             <div class="flex flex-col">
               <textarea
-                class="text-xl textarea textarea-bordered bg-neutral w-full"
-                placeholder="Mensaje"
-                rows="5"
-                v-model="formData.message"
-                @blur="errors.message = ''"
-              ></textarea>
-              <span class="ml-4 text-red-500 text-xl font-bold">{{
-                errors.message
-              }}</span>
+                  class="text-xl textarea textarea-bordered bg-neutral w-full"
+                  :placeholder="$t('Contact.form.message')"
+                  rows="5"
+                  v-model="formData.message"
+                  @blur="errors.message = ''"
+              />
+              <span class="ml-4 text-red-500 text-xl font-bold">{{errors.message}}</span>
             </div>
           </section>
         </div>
         <div class="flex justify-center">
-          <button type="submit" class="w-full sm:w-auto btn btn-accent btn-lg" title="Enviar" role="button" aria-label="Enviar" aria-labelledby="Enviar">Enviar</button>
+          <button type="submit" class="w-full my-4 sm:w-auto btn btn-accent btn-lg" role="button" aria-label="Enviar"
+                  aria-labelledby="Enviar" v-t="'Contact.form.send'"/>
         </div>
       </form>
       <div
-        v-if="showSuccessMessage"
-        class="text-green-500 text-xl font-bold mt-7"
-      >
-        ¡El formulario se envió correctamente!
-      </div>
+          v-if="showSuccessMessage"
+          class="text-green-500 text-xl font-bold mt-7" v-t="'Contact.form.success'"/>
     </div>
   </div>
 </template>
 
 <script>
-import { API_FORM_URL } from "../constants.js";
+import {API_FORM_URL} from "../constants.js";
+
 export default {
   name: "ContactBlock",
   data() {
@@ -84,10 +71,10 @@ export default {
         message: "",
       },
       errorsMessage: {
-        name: "El nombre es requerido.",
-        email: "El correo electrónico es requerido.",
-        emailInvalid: "El correo electrónico no es válido.",
-        message: "El mensaje es requerido.",
+        name: this.$t('Contact.form.errorsMessages.name'),
+        email: this.$t('Contact.form.errorsMessages.email'),
+        emailInvalid: this.$t('Contact.form.errorsMessages.emailInvalid'),
+        message: this.$t('Contact.form.errorsMessages.message'),
       },
       isSubmitting: false,
       showSuccessMessage: false,
@@ -99,23 +86,22 @@ export default {
   },
   methods: {
     validateForm() {
+      this.errorsMessage.name = this.$t('Contact.form.errorsMessages.name');
+      this.errorsMessage.email = this.$t('Contact.form.errorsMessages.email');
+      this.errorsMessage.emailInvalid = this.$t('Contact.form.errorsMessages.emailInvalid');
+      this.errorsMessage.message = this.$t('Contact.form.errorsMessages.message');
       this.errors.name = !this.formData.name ? this.errorsMessage.name : "";
-      this.errors.email = !this.formData.email
-        ? this.errorsMessage.email
-        : !this.isValidEmail(this.formData.email)
-        ? this.errorsMessage.emailInvalid
-        : "";
+      this.errors.email = !this.formData.email ? this.errorsMessage.email: !this.isValidEmail(this.formData.email) ? this.errorsMessage.emailInvalid : "";
       this.errors.message = !this.formData.message
-        ? this.errorsMessage.message
-        : "";
+          ? this.errorsMessage.message
+          : "";
     },
     isValidEmail(email) {
       const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
       return emailRegex.test(email);
     },
 
     handleSubmit(event) {
-      console.log("Formulario handleSubmit");
       event.preventDefault();
       this.validateForm();
       if (!Object.values(this.errors).some((error) => error !== "")) {
@@ -138,18 +124,18 @@ export default {
           created_at: new Date(),
         }),
       })
-        .then((response) => response.json())
-        .then((data) => console.log(data))
-        .catch((error) => console.log(error))
-        .finally(() => {
-          this.isSubmitting = false;
-          this.showSuccessMessage = true;
-          this.formData = {
-            name: "",
-            email: "",
-            message: "",
-          };
-        });
+          .then((response) => response.json())
+          .then((data) => console.log(data))
+          .catch((error) => console.log(error))
+          .finally(() => {
+            this.isSubmitting = false;
+            this.showSuccessMessage = true;
+            this.formData = {
+              name: "",
+              email: "",
+              message: "",
+            };
+          });
       setTimeout(() => {
         this.showSuccessMessage = false;
       }, 5000);

diff --git a/components/FooterBlock.vue b/components/FooterBlock.vue
@@ -1,18 +1,7 @@
-<script>
-import {defineComponent} from 'vue'
-
-export default defineComponent({
-  name: "FooterBlock"
-})
-</script>
-
 <template>
   <footer class="footer footer-center rounded text-xl">
     <div class="grid sm:grid-flow-col gap-4">
-      <a href="#about" class="link link-hover" aria-labelledby="¿Quiénes somos?">¿Quiénes somos?</a>
-      <a href="#services" class="link link-hover" aria-labelledby="Servicios">Servicios</a>
-      <a href="#us" class="link link-hover" aria-labelledby="Nosotros">Nosotros</a>
-      <a href="#contact" class="link link-hover" aria-labelledby="Contacto">Contacto</a>
+      <a :key="i" v-for="({href, label}, i) in $tm('NavBar')" :href="$rt(href)" class="link link-hover" :aria-labelledby="$rt(label)">{{ $rt(label) }}</a>
     </div>
     <div>
       <div class="grid grid-flow-col gap-4">
@@ -21,12 +10,16 @@ export default defineComponent({
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg>
       </div>
     </div>
-    <div>
-      <p>Copyright © 2023 - All right reserved by Nunna</p>
+    <div class="mb-5">
+      <p>Copyright © {{ new Date().getFullYear() }} - All right reserved by Nunna</p>
     </div>
   </footer>
 </template>
 
-<style scoped>
+<script>
+import { defineComponent } from 'vue'
 
-</style>
+export default defineComponent({
+  name: "FooterBlock",
+})
+</script>
diff --git a/components/HomeBlock.vue b/components/HomeBlock.vue
@@ -1,21 +1,17 @@
-<template >
-  <div id="home" class="w-full h-full sm:h-screen sm:flex sm:items-center">
-    <div class="grid grid-cols-1 sm:grid-cols-2">
-      <div class="flex sm:items-center">
+<template>
+  <div id="home" class="sm:min-h-screen w-full sm:flex sm:items-center">
+    <div class="grid md:grid-cols-2 sm:grid-cols-1">
+      <div class="flex flex-col justify-center content-center sm:items-center">
         <div class="text-center sm:text-left py-5">
-          <h1 class="text-accent font-bold text-4xl sm:text-6xl">
-          Impulsando conexiones, creando soluciones.
-        </h1>
-        <h2 class="my-4 font-bold text-2xl sm:text-4xl">
-          Aplicaciones para todos, en todo lugar."
-        </h2>
-        <p>
-          En Nunna, no solo convertimos tus ideas en realidad, sino que las elevamos al siguiente nivel y así ofrecer servicios de calidad a tus clientes.
-        </p>
+          <h1 class="my-5 text-accent font-bold text-4xl sm:text-6xl" v-t="'Home.title'"/>
+          <h2 class="font-bold text-2xl sm:text-4xl" v-t="'Home.subtitle'"/>
+          <p class="my-4 font-light" v-t="'Home.description'"/>
         </div>
       </div>
-      <div>
-        <img class="rounded-3xl" src="https://images.unsplash.com/photo-1565106430482-8f6e74349ca1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Home image" height="auto" width="auto">
+      <div class="flex flex-col">
+        <img class="rounded-3xl"
+            src="https://images.unsplash.com/photo-1565106430482-8f6e74349ca1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
+            alt="Home image" height="auto" width="auto" />
       </div>
     </div>
   </div>