cambios

src/assets/images/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9467 6.2533H7.79335H4.05335C3.41335 6.2533 3.09335 7.02663 3.54668 7.47996L7.00002 10.9333C7.55335 11.4866 8.45335 11.4866 9.00668 10.9333L10.32 9.61996L12.46 7.47996C12.9067 7.02663 12.5867 6.2533 11.9467 6.2533Z" fill="white"/>
+</svg>

src/assets/images/global.svg

@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 18.3334C14.6024 18.3334 18.3334 14.6024 18.3334 10C18.3334 5.39765 14.6024 1.66669 10 1.66669C5.39765 1.66669 1.66669 5.39765 1.66669 10C1.66669 14.6024 5.39765 18.3334 10 18.3334Z" stroke="#F2F2F2" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.66667 2.5H7.5C5.875 7.36667 5.875 12.6333 7.5 17.5H6.66667" stroke="#F2F2F2" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 2.5C14.125 7.36667 14.125 12.6333 12.5 17.5" stroke="#F2F2F2" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.5 13.3333V12.5C7.36667 14.125 12.6333 14.125 17.5 12.5V13.3333" stroke="#F2F2F2" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.5 7.5C7.36667 5.875 12.6333 5.875 17.5 7.5" stroke="#F2F2F2" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/Footer.vue

@@ -2,7 +2,7 @@
 
 <template>
   <footer>
-    <img class="logo" src="@images/logo-kreis_3.png">
+    <!-- <img class="logo" src="@images/logo-kreis_3.png"> -->
     <div class="contact-info">
         <h5>{{ $t('footer.contact')}}</h5>
         <p>{{ $t('footer.message')}}</p>
@@ -20,9 +20,12 @@
           <a href="#"><i class="twitter-icon"></i></a>
         </p>
         <p class="links">
-          <a href="https://tayronafoods.com/impressum">{{ $t('footer.impressum')}}</a>
+          <router-link class="link" to="/impressum">{{ $t('footer.impressum')}}</router-link>
+          <router-link class="link" to="/dataprotection">{{ $t('footer.dataprotection') }}</router-link>
+          <router-link class="link" to="/agb">{{ $t('footer.agb') }}</router-link>
+          <!-- <a href="https://tayronafoods.com/impressum">{{ $t('footer.impressum')}}</a>
           <a href="https://tayronafoods.com/datenschutz">{{ $t('footer.dataprotection')}}</a>
-          <a href="https://tayronafoods.com/agb">{{ $t('footer.agb')}}</a>
+          <a href="https://tayronafoods.com/agb">{{ $t('footer.agb')}}</a> -->
         </p>
     </div>
   </footer>

src/components/LocaleSelector.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="locale-selector">
+      <a href="#" @click="toggle">
+        <img class="globe-image" src="@images/global.svg" alt="">
+        <span>{{ selectedLocale }}</span>
+        <img src="@images/arrow-down.svg" alt="">
+      </a>
+      <div class="options" v-if="active">
+        <div class="item" v-for="(value, key) in locales" :key="key" @click="changeLocale(key)">{{ value }}</div>
+      </div>
+    </div>
+</template>
+
+<script>
+const locales = {
+  de: 'Deutsche',
+  en: 'English',
+  es: 'Español'
+}
+export default {
+  data() {
+    return {
+      active: false,
+      locales,
+    }
+  },
+  computed: {
+    selectedLocale() {
+      return this.locales[this.$i18n.locale];
+    }
+  },
+  methods: {
+    toggle() {
+      this.active = !this.active;
+    },
+    changeLocale(locale) {
+      this.$i18n.locale = locale;
+      this.active = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .locale-selector {
+    display: inline;
+    position: relative;
+
+    .globe-image{
+      height: 14px;
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      color: #fff;
+      text-decoration: none;
+    }
+
+    img {
+      margin-right: 5px;
+
+      &:last-child {
+        margin-right: 0;
+        margin-left: 5px;
+      }
+    }
+    .options {
+      padding: 8px;
+      display: inline-block;
+      width: 100px;
+      position: absolute;
+      right: 0;
+      top: 24px;
+      background: white;
+      border-radius: 10px;
+      color: black;
+    }
+    .item {
+      cursor: pointer;
+      margin: 8px 0 0;
+    }
+  }
+</style>

src/components/Menu.vue

@@ -1,9 +1,12 @@
 <script>
+import LocaleSelector from './LocaleSelector.vue';
+
 export default {
     props: {
         type: String,
         title: String,
-  }
+    },
+    components: { LocaleSelector }
 }
 </script>
 
@@ -16,8 +19,11 @@ export default {
           <router-link class="link" to="/">{{ $t('menu.home')}}</router-link>
           <router-link class="link" to="/about">{{ $t('menu.about') }}</router-link>
           <router-link class="link" to="/products">{{ $t('menu.products') }}</router-link>
+          <router-link class="link" to="/social">{{ $t('menu.social') }}</router-link>
+          <router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link>
           <!-- <router-link class="link" to="/social">{{ $t('menu.social') }}</router-link>
           <router-link class="link" to="/contact">{{ $t('menu.contact') }}</router-link> -->
+          <LocaleSelector class="link"></LocaleSelector>
         </div>
       </nav>
       <h1 class="title" v-if="title">{{ title }}</h1>
@@ -51,8 +57,8 @@ export default {
      grid-template-columns: auto auto;
 
       .logo {
-        height: 117px;
+        height: 72px;
-        width: 118px;;
+        width: 72px;;
       }
 
       .links {
@@ -90,5 +96,17 @@ export default {
     &.products {
       background-image: url('@images/products.png');
     }
+    
+    &.social {
+      background-image: url('@images/kids.png');
+    }
+
+    &.contact {
+      background-color: #000;
+      height: 180px;
+      .overlay {
+        background: transparent;
+      }
+    }
   }
 </style>

src/components/ProductFlipCard.vue

@@ -213,6 +213,9 @@ h3 {
       display: grid;
       grid-template-rows: 35% 65%;
 
+      h3.title {
+        text-transform: uppercase;
+      }
 
       .strain {
         text-align: center;

src/i18n/en.js

@@ -5,5 +5,12 @@ export default {
     impressum: 'Impressum',
     dataprotection: 'Data protection',
     agb: 'AGB'
-  }
+  },
+  menu: {
+    home: 'Home',
+    about: 'About',
+    products: 'Products',
+    social: 'Social',
+    contact: 'Contact'
+  },
 }

src/i18n/i18n.js

@@ -5,7 +5,7 @@ import de from "./de";
 
 const i18n = createI18n({
   locale: 'es',
-  fallbackLocale: 'en',
+  fallbackLocale: 'es',
   messages: {
     es,
     en,

src/router/router.js

@@ -3,22 +3,56 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import HomeView from '../views/home/Home.vue';
 import AboutView from '../views/about/About.vue';
 import ProductsView from '../views/products/Products.vue';
+import SocialView from '../views/social/Social.vue';
+import ContactView from '../views/contact/Contact.vue';
+import ImpressumView from '../views/impressum/Impressum.vue';
+import DataProtectionView from '../views/dataprotection/DataProtection.vue';
+import AgbView from '../views/agb/Agb.vue';
 
 const router = createRouter({
   history: createWebHashHistory(),
-  routes: [{
+  routes: [
+    {
       path: '/',
       name: 'home',
       component: HomeView,
-  }, {
+    },
+    {
       path: '/about',
       name: 'about',
       component: AboutView,
-  }, {
+    },
+    {
       path: '/products',
       name: 'products',
       component: ProductsView,
-  }]
+    },
+    {
+      path: '/social',
+      name: 'social',
+      component: SocialView,
+    },
+    {
+      path: '/contact',
+      name: 'contact',
+      component: ContactView,
+    },
+    {
+      path: '/impressum',
+      name: 'impressum',
+      component: ImpressumView,
+    },
+    {
+      path: '/dataprotection',
+      name: 'dataprotection',
+      component: DataProtectionView,
+    },
+    {
+      path: '/agb',
+      name: 'agb',
+      component: AgbView,
+    },
+  ]
 });
 
 export default router;

src/style.css

@@ -38,9 +38,10 @@ body {
   margin: 0;
   padding: 0;
   font-family: 'Roboto', sans-serif;
+  background-color: #121212
 }
 
 .main-container {
   width: 1366px;
-  margin: 0 auto;
+  margin: 0 auto;;
 }

src/views/agb/Agb.vue

@@ -0,0 +1,94 @@
+<template>
+  <MenuVue type="contact" />
+  <div class="contact-section">
+    <div class="left">
+      <h1>Allgemeine Geschäftsbedingungen (AGB)</h1>
+
+     
+        Willkommen auf unserer Website! Bitte lesen Sie die folgenden
+        Allgemeinen Geschäftsbedingungen sorgfältig durch, da diese die
+        rechtlichen Bedingungen für die Nutzung unserer Website und den
+        Abschluss von Geschäften mit uns festlegen.<br /><br />Geltungsbereich<br />Diese
+        AGB gelten für sämtliche Geschäftsbeziehungen zwischen Ihnen als Nutzer
+        unserer Website und uns als Anbieter. Durch die Nutzung unserer Website
+        erklären Sie sich mit diesen AGB einverstanden.<br /><br />Informationen
+        und Bestellung<br />Auf unserer Website präsentieren wir Ihnen unser
+        Produktangebot. Die dargestellten Informationen dienen lediglich zu
+        Informationszwecken und stellen kein verbindliches Angebot dar. Um eine
+        Bestellung aufzugeben, kontaktieren Sie uns bitte telefonisch oder per
+        E-Mail. Dabei werden wir die Details der Bestellung gemeinsam
+        besprechen.<br /><br />Preise und Zahlungsbedingungen<br />Die Preise
+        für unsere Produkte werden nicht auf der Website angegeben. Die genauen
+        Preise sowie die Zahlungsmodalitäten werden individuell mit Ihnen
+        besprochen, wenn Sie Ihre Bestellung aufgeben.<br /><br />Lieferung<br />Die
+        Lieferung der bestellten Ware erfolgt nach Absprache. Wir werden die
+        Lieferzeit und die Versandmethode gemeinsam mit Ihnen festlegen.<br /><br />Widerrufsrecht<br />Da
+        wir aktuell keine Waren direkt über die Website verkaufen, gilt kein
+        gesetzliches Widerrufsrecht. Bitte kontaktieren Sie uns jedoch umgehend,
+        falls Sie eine Bestellung stornieren oder ändern möchten.<br /><br />Gewährleistung
+        und Haftung<br />Wir gewährleisten, dass unsere Produkte und
+        Dienstleistungen den vereinbarten Qualitätsstandards entsprechen. Sollte
+        ein Produkt Mängel aufweisen oder nicht den erwarteten Anforderungen
+        entsprechen, werden wir nach unserem Ermessen entweder das Produkt
+        reparieren, ersetzen oder eine Rückerstattung vornehmen. Diese
+        Gewährleistung gilt für einen angemessenen Zeitraum ab dem Zeitpunkt der
+        Lieferung oder Erbringung der Dienstleistung. Bitte beachten Sie, dass
+        diese Gewährleistung nur für direkte Käufe über unsere Website oder
+        andere offizielle Verkaufskanäle (E-Mail, Telefon) gilt. Ausgeschlossen
+        von der Gewährleistung sind Schäden oder Mängel, die durch unsachgemäße
+        Verwendung, Fahrlässigkeit oder Änderungen an den Produkten seitens des
+        Kunden verursacht wurden. Für weitere Informationen zur Gewährleistung
+        und zur Abwicklung von Gewährleistungsansprüchen kontaktieren Sie bitte
+        unseren Kundenservice.<br /><br />Geistiges Eigentum<br />Alle Rechte an
+        Inhalten, Texten, Bildern, Marken und Logos auf unserer Website liegen
+        bei uns oder unseren Partnern. Eine Nutzung, Vervielfältigung oder
+        Verbreitung ohne unsere ausdrückliche Zustimmung ist nicht gestattet.<br /><br />Datenschutz<br />Wir
+        behandeln Ihre persönlichen Daten gemäß den geltenden
+        Datenschutzbestimmungen. Informationen zur Erhebung und Verwendung Ihrer
+        Daten finden Sie in unserer Datenschutzerklärung.<br /><br />Schlussbestimmungen<br />Diese
+        AGB unterliegen dem deutschen Recht. Sollten einzelne Bestimmungen
+        dieser AGB unwirksam sein oder werden, berührt dies die Gültigkeit der
+        übrigen Bestimmungen nicht. Gerichtsstand für alle Streitigkeiten im
+        Zusammenhang mit diesen AGB ist unser Sitz.<br /><br />Bitte nehmen Sie
+        sich die Zeit, unsere AGB sorgfältig zu lesen. Bei Fragen oder
+        Unklarheiten stehen wir Ihnen gerne zur Verfügung.
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuVue from "../../components/Menu.vue";
+
+export default {
+  components: { MenuVue },
+};
+</script>
+
+<style lang="scss" scoped>
+.contact-section {
+  min-height: 100px;
+  background-color: #fff;
+
+  .left {
+    padding: 72px 80px;
+  }
+
+  h1 {
+    font-weight: 400;
+    font-size: 64px;
+    line-height: 75px;
+  }
+
+  h3 {
+    margin-top: 54px;
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 38px;
+  }
+  p {
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+  }
+}
+</style>

src/views/contact/Contact.vue

@@ -0,0 +1,59 @@
+<template>
+  
+  <MenuVue type="contact" />
+  <div class="contact-section">
+    <div class="left">
+      <h1>Contacto</h1>
+      <p>Si está interesado o tiene alguna pregunta, ¡contáctenos!</p>
+      <h3>Correo  Electronico</h3>
+      <p>info@tayronafoods.com</p>
+      <p>alejandro@tayronafoods.com</p>
+      <p>jose@tayronafoods.com</p>
+      <h3>Teléfonos</h3>
+      <p>+49(0)176 321 368 59</p>
+      <p>+49(0)152 549 389 62</p>
+      <h3>Redes Sociales</h3>
+      <p>Instagram</p>
+    </div>
+    <div class="right"></div>
+  </div>
+</template>
+
+<script>
+import MenuVue from '../../components/Menu.vue';
+
+export default {
+    components: { MenuVue }
+}
+</script>
+
+<style lang="scss" scoped>
+  .contact-section {
+    min-height: 100px;
+    background-color: #fff;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    .left {
+      padding: 72px 80px;
+    }
+
+    h1 {
+      font-weight: 400;
+      font-size: 64px;
+      line-height: 75px;
+    }
+
+    h3 {
+      margin-top: 54px;
+      font-weight: 400;
+      font-size: 32px;
+      line-height: 38px;
+    }
+    p {
+      font-weight: 400;
+      font-size: 20px;
+      line-height: 24px;
+    }
+  }
+</style>

src/views/dataprotection/DataProtection.vue

@@ -0,0 +1,85 @@
+<template>
+  <MenuVue type="contact" />
+  <div class="contact-section">
+    <div class="left">
+      <h1>Datenschutz</h1>
+        Datenschutzerklärung<br />Wir nehmen den Schutz Ihrer persönlichen Daten
+        ernst und behandeln diese vertraulich und gemäß den gesetzlichen
+        Bestimmungen zum Datenschutz. Diese Datenschutzerklärung informiert Sie
+        über die Art, den Umfang und den Zweck der Erhebung und Verwendung Ihrer
+        personenbezogenen Daten auf unserer Website.<br />
+        <br />1. Erhebung und Verwendung von personenbezogenen Daten <br />Beim
+        Besuch unserer Website werden bestimmte Informationen automatisch durch
+        Ihren Browser an unseren Server übermittelt und temporär in Logfiles
+        gespeichert. Bei der Nutzung dieser allgemeinen Daten und Informationen
+        ziehen wir keine Rückschlüsse auf die betroffene Person. Diese
+        Informationen werden vielmehr benötigt, um die Inhalte unserer
+        Internetseite korrekt auszuliefern.<br />
+        <br />2. Weitergabe von Daten <br />Ihre personenbezogenen Daten werden
+        grundsätzlich nicht an Dritte weitergegeben, es sei denn, Sie haben
+        ausdrücklich Ihre Einwilligung dazu erteilt oder es besteht eine
+        rechtliche Verpflichtung zur Weitergabe.<br />
+        <br />3. Datensicherheit <br />Wir treffen geeignete technische und
+        organisatorische Maßnahmen, um Ihre Daten vor Verlust, Manipulation oder
+        unberechtigtem Zugriff zu schützen. Unsere Sicherheitsmaßnahmen werden
+        regelmäßig überprüft und an den technologischen Fortschritt
+        angepasst.<br />
+        <br />4. Cookies <br />Wir verwenden auf unserer Website Cookies.
+        Cookies sind kleine Textdateien, die auf Ihrem Endgerät gespeichert
+        werden und bestimmte Informationen enthalten. Sie dienen dazu, die
+        Benutzerfreundlichkeit und das Funktionieren unserer Website zu
+        verbessern. Sie haben jedoch die Möglichkeit, Cookies abzulehnen oder
+        vor dem Speichern eine Benachrichtigung anzuzeigen, indem Sie die
+        Einstellungen in Ihrem Browser entsprechend anpassen.<br />
+        <br />5. Ihre Rechte <br />Sie haben das Recht, Auskunft über die von
+        uns verarbeiteten personenbezogenen Daten zu erhalten sowie deren
+        Berichtigung, Löschung oder Einschränkung der Verarbeitung zu verlangen.
+        Zudem können Sie der Verarbeitung Ihrer Daten widersprechen und haben
+        das Recht auf Datenübertragbarkeit. Bitte nehmen Sie dazu Kontakt mit
+        uns auf.<br />
+        <br />6. Kontakt <br />Für Fragen oder Anliegen zum Datenschutz können
+        Sie sich jederzeit an uns wenden. Die Kontaktdaten finden Sie im
+        Impressum unserer Website. Bitte beachten Sie, dass sich
+        Datenschutzbestimmungen und Maßnahmen zum Datenschutz ändern können. Es
+        empfiehlt sich daher, diese Datenschutzerklärung regelmäßig zu
+        überprüfen und auf dem neuesten Stand zu bleiben.
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuVue from "../../components/Menu.vue";
+
+export default {
+  components: { MenuVue },
+};
+</script>
+
+<style lang="scss" scoped>
+.contact-section {
+  min-height: 100px;
+  background-color: #fff;
+
+  .left {
+    padding: 72px 80px;
+  }
+
+  h1 {
+    font-weight: 400;
+    font-size: 64px;
+    line-height: 75px;
+  }
+
+  h3 {
+    margin-top: 54px;
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 38px;
+  }
+  p {
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 24px;
+  }
+}
+</style>

src/views/impressum/Impressum.vue

@@ -0,0 +1,56 @@
+<template>
+  
+  <MenuVue type="contact" />
+  <div class="contact-section">
+    <div class="left">
+      <h1>Impressum</h1>
+      <p>Tayrona Foods GbR</p>
+      <p>Marienthaler Straße 80d,</p>
+      <p>20535 Hamburg</p>
+      <p>+49(0)176 32136859</p>
+      <p>info@tayronafoods.com</p>
+      <p>www.tayronafoods.com</p>
+      <p>Geschäftsführer: Jose Alejandro Valderrama Hernandez & Jose Gregorio Lacouture Quintero</p>
+      <p>einzelvertretungsberechtigt; mit der Befugnis, im Namen der Gesellschaft mit sich im eigenen Namen oder als Vertreter eines Dritten Rechtsgeschäfte abzuschließen.</p>
+      <p>Steuernummer: 46/662/03432</p>
+      <p>Kontakt: info@tayronafoods.com</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuVue from '../../components/Menu.vue';
+
+export default {
+    components: { MenuVue }
+}
+</script>
+
+<style lang="scss" scoped>
+  .contact-section {
+    min-height: 100px;
+    background-color: #fff;
+
+    .left {
+      padding: 72px 80px;
+    }
+
+    h1 {
+      font-weight: 400;
+      font-size: 64px;
+      line-height: 75px;
+    }
+
+    h3 {
+      margin-top: 54px;
+      font-weight: 400;
+      font-size: 32px;
+      line-height: 38px;
+    }
+    p {
+      font-weight: 400;
+      font-size: 20px;
+      line-height: 24px;
+    }
+  }
+</style>

src/views/social/Social.vue

@@ -0,0 +1,47 @@
+<template>
+  <MenuVue type="social" />
+  <section class="social-section content">
+    <h2>Tayrona Foods</h2>
+    <p>Creemos en el poder del café para conectar a la gente, enriquecer las culturas y hacer cambios positivos. Por esta razón tenemos un programa especial, por cada bolsa de café que compres estarás contribuyendo con  céntimos de euro para una escuela primaria en Colombia.</p>
+    <p>Nos gustaría que futuras generaciones tengan una mejor educación que les permita hacer sus sueños una realidad, por eso trabajamos en estrecha colaboración con los productores locales de café para obtener granos de alta calidad directamente de la región de cultivo. Cada taza de café que disfrutas con nosotros es, por lo tanto, una pequeña contribución al desarrollo sostenible y   a la apreciación de nuestra maravillosa patria.</p>
+  </section>
+  <section class="social-bottom">
+    <div class="left">
+      <p>Forma parte de nuestra revolución del café y descubre una nueva dimensión de sabores.</p>
+      <p>Sumérgete en el mundo de Tayrona Foods, donde el café no solo es una pasión, sino también una fuente de cambio y apoyo para quienes más lo necesitan.</p>
+    </div>
+    <div class="right">
+      <img src="@images/kid-coffee.png">
+    </div>
+  </section>
+</template>
+
+<script>
+import MenuVue from '../../components/Menu.vue';
+
+export default {
+    components: { MenuVue }
+}
+</script>
+
+<style lang="scss" scoped>
+  .social-bottom {
+    padding: 40px 98px;
+    background-image: url('@images/bg_1.png');
+    background-position: top left;
+    background-size: contain;
+    height: 600px;
+    display: grid;;
+    grid-template-columns: 1fr 1fr;
+    .left {
+      padding: 52px 32px 0 0
+    }
+    p {
+      font-weight: 500;
+      color: #603809;
+      font-size: 32px;
+      line-height: 50px;
+
+    }
+  }
+</style>