Secciones

src/components/quasar-components/dropdown/DropdownItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-item clickable v-close-popup @click="onItemClick">
+  <q-item clickable v-close-popup @click="onItemClick(currentLang)">
     <q-item-section>
       <q-item-label>
         <slot></slot>
@@ -9,17 +9,27 @@
 </template>
 
 <script lang="ts">
+import { storeToRefs } from 'pinia';
+import { useLanguageStore } from 'src/stores/language';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
+  name: 'DropdownItem',
+  props: {
+    currentLang: {
+      type: String,
+      default: '',
+    },
+  },
   setup() {
+    const langStore = useLanguageStore();
+    const { lang } = storeToRefs(langStore);
+
     return {
-      onItemClick() {
+      onItemClick(currentLang: string) {
-        // console.log('Clicked on an Item')
+        lang.value = currentLang;
       },
     };
   },
 });
 </script>
-
-<style lang="scss" scoped></style>

src/components/sections/InfoSection.vue

@@ -12,9 +12,12 @@
           sin intermediarios.
         </p>
 
-        <RouterLink class="btn rounded outlined green-color pd-icon" to="/">
+        <a
+          href="#question-section"
+          class="btn rounded outlined green-color pd-icon"
+        >
           ¿Quieres saber más? <IconChatRoundedFill />
-        </RouterLink>
+        </a>
       </div>
     </div>
 

src/components/sections/QuestionSection.vue

@@ -1,9 +1,10 @@
 <template>
   <section
     class="question-container"
-    style="background-image: url('assets/question-bg.png')"
+    style="background-image: url('../../assets/question-bg.png')"
+    id="question-section"
   >
-    <container class="question-container-form" role="main">
+    <Container class="question-container-form">
       <header class="question-content">
         <LogoWhite />
 
@@ -25,72 +26,23 @@
           <h5 class="question-form-title">Pregunta a nuestro especialista</h5>
         </header>
 
-        <form class="question-form-body" @submit="handleSubmit" role="main">
+        <QuestionForm />
-          <q-input
-            bg-color="white"
-            v-model="text"
-            label="Nombre"
-            class="name"
-            standout
-          />
-          <q-input
-            bg-color="white"
-            v-model="text"
-            label="Apellidos"
-            class="nickname"
-            standout
-          />
-          <q-input
-            bg-color="white"
-            v-model="text"
-            type="email"
-            label="Email"
-            class="email"
-            standout
-          />
-          <q-input
-            bg-color="white"
-            v-model="text"
-            type="tel"
-            label="Teléfono"
-            class="telephone"
-            standout
-          />
-          <q-input
-            bg-color="white"
-            v-model="text"
-            label="Motivo de consulta"
-            class="consult"
-            standout
-          />
-          <q-input
-            bg-color="white"
-            v-model="text"
-            label="Mensaje"
-            class="message"
-            type="textarea"
-            autogrow
-            standout
-          />
-          <q-checkbox
-            v-model="checkbox"
-            label="*Acepto los términos y condiciones (Ver), y recibir respuesta comercial por parte de Verdnatura"
-          />
-        </form>
       </div>
-    </container>
+    </Container>
   </section>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+
 import IconQuestion from '../icons/IconQuestion.vue';
 import LogoWhite from '../logo/LogoWhite.vue';
 import Container from '../ui/Container.vue';
+import QuestionForm from '../ui/QuestionForm.vue';
 
 export default defineComponent({
   name: 'question-component',
-  components: { Container, LogoWhite, IconQuestion },
+  components: { Container, LogoWhite, IconQuestion, QuestionForm },
   setup() {
     const handleSubmit = () => {
       console.log('Foi submit');
@@ -188,32 +140,6 @@ p {
           }
         }
       }
-
-      & .question-form-body {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-
-        & .q-field {
-          &.name,
-          &.nickname,
-          &.email,
-          &.telephone {
-            flex: 1 0 min(100%, 218px);
-          }
-
-          &.consult,
-          &.message {
-            flex: 1 0 100%;
-          }
-          /* & .q-field__native {
-            color: $black !important;
-          } */
-        }
-      }
-      & .q-checkbox {
-        color: $white;
-      }
     }
 
     @media only screen and (max-width: $med-xmd) {

src/components/sections/ReasonsSection.vue

@@ -41,9 +41,12 @@
           </li>
         </ul>
 
-        <RouterLink class="btn rounded outlined white-color pd-icon" to="/">
+        <a
+          href="#question-section"
+          class="btn rounded outlined white-color pd-icon"
+        >
           ¿Tienes dudas? hablemos <IconChatRoundedFill />
-        </RouterLink>
+        </a>
       </div>
     </Container>