JudoWeb/GUI/src/routes/Home.vue

<script setup lang="ts">
import CarouselItemWithTitle from '@/components/CarouselItemWithTitle.vue';
import HomeEntrie from '@/components/HomeEntrie.vue';
import HomeEntrieWithImagePreset from '@/components/HomeEntrieWithImagePreset.vue';
import ResponsiveTabsOrList from '@/components/ResponsiveTabsOrList.vue';

const tabItems = [
  { value: '1', label: 'Nikolausturnier' },
  { value: '2', label: 'Wettkämpfe' },
  { value: '3', label: 'Kinoabende' },
];
</script>

<template>
  <v-container fluid>
    <v-img class="rounded-lg" height="40vh" src="/static/images/startPage.png" cover />
    <main>
      <v-container
        id="main"
        :style="{
          maxWidth: $vuetify.display.smAndDown ? '100vw' : '70vw',
        }"
        fluid
      >
        <home-entrie title="Herzlich Willkommen!">
          <template #text>
            <b>Schön, dass du den Weg zu uns gefunden hast!</b> Egal, ob du schon lange dabei bist
            oder das erste Mal von Judo hörst – wir freuen uns, dich bald (wieder) in unserem
            <b>Judozentrum</b>
            (Dojo) begrüßen zu dürfen.
          </template>
        </home-entrie>
        <home-entrie
          title="Was ist Judo?"
          extra-beside-text
          :extra-width-percent="50"
          title-in-split-right
        >
          <template #text>
            Judo ist eine Sportart, welche den ganzen Körper fordert, fördert und beansprucht. Es
            werden also <b>sämtliche Muskelgruppen, sowie das Köpfchen bei uns trainiert. </b>
            <b>Judo bedeutet übersetzt “der sanfte Weg”.</b> Daraus lässt sich ja schon erahnen,
            dass Judo eine Kampfsportart ist bei der das "Schlagen" oder "Treten" des Gegners
            verboten ist. Beim Judo beschränkt man sich rein auf das <b>Werfen</b>,
            <b>fixieren am Boden</b>, <b>Hebeln</b> und <b>Hebeln</b> (nur für die älteren) des
            Partners/Gegners.
          </template>

          <template #extra>
            <v-carousel
              show-arrows="hover"
              hide-delimiter-background
              class="rounded-lg"
              cycle
              interval="8000"
            >
              <carousel-item-with-title text="Werfen" image="/static/images/whatsJudo/throw.jpg" />
              <carousel-item-with-title
                text="fixieren am Boden"
                image="/static/images/whatsJudo/hold.jpg"
              />
              <carousel-item-with-title
                text="Trainieren sämtlicher Muskelgruppen"
                image="/static/images/whatsJudo/stabil.jpg"
              />
            </v-carousel>
          </template>
        </home-entrie>
        <home-entrie
          title="Unsere Werte beim Judo"
          extra-beside-text
          :extra-width-percent="50"
          title-in-split-right
        >
          <template #text>
            Zu dem Spielen beim Judo die Werte wie <b>Respekt</b>, <b>Disziplin</b> und
            <b>Selbstbehauptung</b> eine große Rolle und so werden auch diese Werte bei uns
            gefördert.
          </template>
          <template #extra>
            <v-timeline align="start" side="end">
              <v-timeline-item dot-color="blue">
                <h6 class="text-h6">Respekt</h6>
              </v-timeline-item>
              <v-timeline-item dot-color="green">
                <h6 class="text-h6">Selbstbehauptung</h6>
              </v-timeline-item>
              <v-timeline-item dot-color="orange">
                <h6 class="text-h6">Disziplin</h6>
              </v-timeline-item>
            </v-timeline>
          </template>
        </home-entrie>

        <home-entrie title="Und sonst so?"></home-entrie>

        <responsive-tabs-or-list :items="tabItems">
          <template #1>
            <home-entrie-with-image-preset
              title="Nikolausturnier"
              image="/static/images/nikolausturnier/total.png"
            >
              <template #text>
                Ein Highlight im Jahreskalender ist unser alljährliches Nikolausturnier, bei dem
                Judoka aller Altersgruppen zusammenkommen, um ihre Fähigkeiten zu messen und
                gemeinsam Spaß zu haben.
              </template>
            </home-entrie-with-image-preset>
          </template>

          <template #2>
            <home-entrie-with-image-preset
              title="Wettkämpfe"
              image="/static/images/wettkampf/total.jpg"
            >
              <template #text>
                Für diejenigen, die sich gerne messen wollen, bieten wir die Teilnahme an
                Wettkämpfen auf verschiedenen Ebenen an – von lokalen Turnieren bis hin zu
                nationalen Meisterschaften.
              </template>
            </home-entrie-with-image-preset>
          </template>

          <template #3>
            <home-entrie-with-image-preset
              title="Kinoabende"
              image="/static/images/kinoabend/total.jpg"
            >
              <template #text>
                Bei unseren Kinoabenden schauen wir in lockerer Runde ausgewählte Filme — nicht nur
                judo‑bezogene, sondern auch beliebte Klassiker und aktuelle Hits. Gemeinsam
                entspannen, Snacks teilen und über Filme und Sport plaudern.
              </template>
            </home-entrie-with-image-preset>
          </template>
        </responsive-tabs-or-list>
      </v-container>
    </main>
  </v-container>
</template>

<style scoped></style>