about page

src/components/Employee.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="employee-box">
+    <img :src="getImage(image)" class="image">
+    <h3 class="name">{{ name }}</h3>
+    <h4 class="role">{{ role }}</h4>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    image: String,
+    name: String,
+    role: String,
+  },
+  methods: {
+    getImage(image) {
+        return new URL(`/src/assets/images/${image}`, import.meta.url).href;
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .employee-box {
+    text-align: center;
+  }
+
+  .name {
+    margin: 36px 0 0;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 28px;
+  }
+
+  .role {
+    margin: 28px 0 0;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 23.44px;
+  }
+</style>

src/components/Footer.vue

@@ -5,11 +5,11 @@
     <img class="logo" src="@images/logo-kreis_3.png">
     <div class="contact-info">
         <h5>{{ $t('footer.contact')}}</h5>
-        <p>Si está interesado o tiene alguna pregunta, ¡contáctenos!</p>
+        <p>{{ $t('footer.message')}}</p>
         <p class="emails">
-          <a href="mailto:info@Tayronafoods.com" class="email"><i class="email-icon"></i>info@Tayronafoods.com</a>
+          <a href="mailto:info@tayronafoods.com" class="email"><i class="email-icon"></i>info@tayronafoods.com</a>
-          <a href="mailto:info@Tayronafoods.com" class="email"><i class="email-icon"></i>info@Tayronafoods.com</a>
+          <a href="mailto:alejandro@tayronafoods.com" class="email"><i class="email-icon"></i>alejandro@tayronafoods.com</a>
-          <a href="mailto:info@Tayronafoods.com" class="email"><i class="email-icon"></i>info@Tayronafoods.com</a>
+          <a href="mailto:jose@tayronafoods.com" class="email"><i class="email-icon"></i>jose@tayronafoods.com</a>
         </p>
         <p class="phone"><i class="phone-icon"></i>+49(0)176 321 368 59</p>
         <p class="phone"><i class="phone-icon"></i>+49(0)152 549 389 62</p>
@@ -20,9 +20,9 @@
           <a href="#"><i class="twitter-icon"></i></a>
         </p>
         <p class="links">
-          <a href="#">Impressum</a>
+          <a href="https://tayronafoods.com/impressum">{{ $t('footer.impressum')}}</a>
-          <a href="#">Datenschutz</a>
+          <a href="https://tayronafoods.com/datenschutz">{{ $t('footer.dataprotection')}}</a>
-          <a href="#">AGB</a>
+          <a href="https://tayronafoods.com/agb">{{ $t('footer.agb')}}</a>
         </p>
     </div>
   </footer>

src/components/HelloWorld.vue

@@ -1,40 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/views/about/About.vue

@@ -1,7 +1,60 @@
 <script setup>
   import MenuVue from "../../components/Menu.vue";
+  import Employee from "../../components/Employee.vue";
 </script>
 
 <template>
   <MenuVue type="about" :title="$t('about.title')"></MenuVue>
+  <section class="about-section">
+    <h2>Tayrona Foods</h2>
+    <p>Somos un equipo de colombianos amantes del café, cuyo sueño es a través de experiencias excepcionales compartir con el mundo las maravillas de este producto, sus únicos e inolvidables aromas, la amplia diversidad de sus matices y sobre todo su capacidad de cautivar los sentidos.</p>
+    <p>Hemos crecido entre los deliciosos sabores de la comida callejera y las pintorescas plantaciones de café de Colombia, esto sumado a nuestra formación en la ingeniería agrícola, la administración de empresas y los negocios internacionales, así como la vida en los Estados Unidos, España y Alemania nos han aportado una variedad de ideas y nuevas experiencias para llevar la cultura del café al mundo y de la mano apoyar a los campesinos de nuestro país.</p>
+    <h2>Nuestra Historia</h2>
+    <p>Con más de 10 años de experiencia hemos logrado desarrollar una profunda comprensión de las características que hacen del café y de los alimentos latinoamericanos y españoles para potenciar su calidad y sabor. Desde la selección de materias primas hasta el procesamiento más cuidadoso y de calidad, sabemos exactamente lo que es importante para ofrecer productos excepcionales y llevar a nuestros clientes a un viaje culinario con sabores auténticos e inigualables.</p>
+    <h4>Y por supuesto: ¡Nos gusta aprovechar cada oportunidad para visitar nuestro antiguo hogar!</h4>
+    <div class="employees">
+      <Employee class="employee" image="foto_alejo.png" name="Alejandro Valderrama" role="Managing Partner" />
+      <Employee class="employee" image="foto_jose.png" name="José Lacouture" role="Managing Partner" />
+    </div>
+  </section>
 </template>
+
+<style lang="scss" scoped>
+  .about-section {
+    background-color: #000;
+    color: #fff;
+    padding: 0 72px 72px;
+  }
+
+  h2 {
+    font-size: 52px;
+    font-weight: 500;
+    line-height: 70px;
+    text-align: center;
+    padding: 72px 0;
+  }
+
+  h4 {
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 70px;
+    text-align: center;
+    padding: 72px 264px;
+  }
+
+  p {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 40px;
+    text-align: justify;
+  }
+
+  .employees {
+    display: flex;
+    justify-content: center;
+
+    .employee {
+      margin: 0 150px;
+    }
+  }
+</style>