<template>
  <div class="q-pa-md">
    <q-card class="my-card q-mb-md" style="max-width: 600px">
      <q-parallax
        src="https://www.buga2019.de/we-bilder/2.Aktuelles/BUGA-Zwerg/zwerg-im-gras-buga-heilbronn-2019.jpg?m=1550501506"
        :height="200"
      />
      <q-card-section>
        <div class="text-h6">GeoCaching</div>
        <div class="text-body2">Willkommen</div>
        <q-expansion-item
          expand-separator
          rounded-borders
          class="bg-green-3 text-black shadow-2 full-width q-mt-md"
          label="Was ist GeoCaching?"
        >
          <q-card>
            <q-card-section>
              GeoCaching ist eine spielerische Führung, eine Schnitzeljagd, über die Bundesgartenschau.
              Es gibt mehrere Routen (Caches), von denen man wählen kann. Auf jedem Cache gibt es mehrere Stationen, bei denen Rätsel und Aufgaben gelöst werden müssen, um die nächste zu finden.
              Eine Station ist eine QR-Code, bei dessen einscannen das nächste Rätsel freigeschaltet wird.
              Findet ein Cacher alle Stationen eines Caches erhält er eine kleine Belohnung und sammelt Punkte für eine Rangliste.
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-card-section>
    </q-card>
    <q-card class="my-card" style="max-width: 600px">
      <q-parallax
        src="https://www.buga2019.de/we-bilder/1.Bundesgartenschau/171205_BUGA-2019_Sommerinsel_LOMA_430px.jpg?m=1550501561"
        :height="200"
      />

      <q-card-section>
        <div class="text-h6">Loslegen</div>
        <q-btn color="green-3" text-color="black" class="full-width q-mt-md" label="Zu den Caches" to="/Overview"/>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
  export default {
    data () {
      return {
      }
    }
  }
</script>
