From 19210e1cc1df99163a833a7bef4eb6326f22fc5d Mon Sep 17 00:00:00 2001
From: Nikola Kubeczkova <nikola.kubeczkova@olc.cz>
Date: Fri, 4 Apr 2025 11:12:36 +0200
Subject: [PATCH] responsibility

---
 TODO                                          |   1 +
 services/frontend/assets/css/main.css         | 197 ++++++++++++++++--
 services/frontend/components/Advantages.vue   |   8 +-
 services/frontend/components/ContactUs.vue    |  82 +-------
 services/frontend/components/Courses.vue      |  77 +++++--
 services/frontend/components/History.vue      |   2 +-
 services/frontend/components/Trainers.vue     |  68 +++---
 .../components/dialog/ContactForm.vue         |  84 ++++++++
 services/frontend/components/menu/Header.vue  |  56 +++--
 services/frontend/plugins/vuetify.ts          |   2 +-
 10 files changed, 408 insertions(+), 169 deletions(-)
 create mode 100644 services/frontend/components/dialog/ContactForm.vue

diff --git a/TODO b/TODO
index 19c5179..d29b001 100644
--- a/TODO
+++ b/TODO
@@ -4,6 +4,7 @@ Nastylovat:
 
 Frontend:
 - přidat v galerii zvětsovač na obrázky
+- notyfi
 
 Naplánovat:
 - kurzy + cena: vyskakovací okno na rezervaci s jménem lekce? jak to vyřešit s kalendářem? (stránka /rezervace)
diff --git a/services/frontend/assets/css/main.css b/services/frontend/assets/css/main.css
index 87b6c72..3b41625 100644
--- a/services/frontend/assets/css/main.css
+++ b/services/frontend/assets/css/main.css
@@ -20,7 +20,7 @@ h2 {
   font-size: 1.5rem;
   color: #CF3476;
   text-align: center;
-  margin-bottom: 0.5rem;
+  margin-bottom: 2rem;
 }
 
 h3 {
@@ -46,6 +46,17 @@ h5 {
   margin-top: 1rem;
 }
 
+@media (max-width: 600px) {
+  h1 {
+    font-size: 2rem; /* Smaller size for mobile */
+    margin-top: 1.5rem;
+  }
+
+  h2 {
+    font-size: 1.2rem; /* Slightly smaller h2 for mobile */
+  }
+}
+
 .sheet__box {
   min-width: 25rem;
   margin-left: calc(20% - 2.5rem);
@@ -95,12 +106,33 @@ h5 {
   font-weight: bold;
 }
 
+.contact__dialog__title {
+  font-family: 'Futura', sans-serif;
+  font-size: 2rem;
+  color: #333;
+  margin-bottom: 1rem;
+  font-weight: bold;
+}
+
 .contact__button {
   width: 100%;
   color: #ffffff;
   background-color: #CF3476;
 }
 
+@media (max-width: 600px) {
+  .v-dialog > .v-card {
+    border-radius: 0 !important;
+    height: 100vh;
+    padding: 1rem;
+  }
+
+  .contact__dialog__title {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+}
+
 .articles {
   margin-left: calc(20% - 2.5rem);
   margin-right: calc(20% - 2.5rem);
@@ -170,35 +202,70 @@ h5 {
 }
 
 .pricing {
-  margin-left: calc(20% - 2.5rem);
-  margin-right: calc(20% - 2.5rem);
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1500px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
 }
 
 .pricing-box {
-  padding: 1rem;
+  padding: 1.5rem;
   text-align: center;
-  min-width: 25rem;
+  min-width: 18rem;
   border-radius: 1rem;
-  height: 230px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  height: 100%;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .pricing-box:hover {
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
+}
+
+.pricing-content {
+  flex-grow: 1;
+}
+
+.pricing-title {
+  min-height: 3rem;
+}
+
+.pricing-desc {
+  min-height: 3rem;
 }
 
 .pricing__price {
   font-family: 'Futura', sans-serif;
-  font-size: 3.5rem;
+  font-size: 3rem;
+  font-weight: bold;
   color: #CF3476;
-  text-align: center;
+  margin-top: 0.5rem;
 }
 
 .pricing__subtitle {
   font-family: 'Futura', sans-serif;
   font-size: 1rem;
-  color: #333;
-  text-align: center;
+  color: #555;
+  margin-bottom: 0.5rem;
+}
+
+@media (max-width: 600px) {
+  .pricing-box {
+    min-width: 100%;
+  }
+
+  .pricing-title,
+  .pricing-desc {
+    min-height: unset; /* Removes forced height to prevent breakage */
+  }
 }
 
 .trainers__parallax {
@@ -207,12 +274,45 @@ h5 {
 }
 
 .trainers {
-  min-width: 25rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1500px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
   background: transparent;
   box-shadow: none;
   height: 100%;
-  margin-left: calc(20% - 2.5rem);
-  margin-right: calc(20% - 2.5rem);
+  text-align: center;
+  padding: 2rem;
+}
+
+.trainer-avatar {
+  width: 150px;
+  height: 150px;
+  margin: 20px auto;
+  border-radius: 50%;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+/* Mobile Styles */
+@media (max-width: 600px) {
+  .trainers__parallax {
+    max-height: 30rem;
+  }
+
+  .trainers {
+    max-width: 100%;
+    padding: 1rem;
+  }
+
+  .trainer-avatar {
+    width: 120px;
+    height: 120px;
+  }
 }
 
 .advantage {
@@ -227,6 +327,7 @@ h5 {
 
 .advantage__title {
   font-family: 'Futura', sans-serif;
+  padding: 0.5rem 0;
   color: #CF3476;
   font-size: 1.5rem;
   font-weight: bold;
@@ -235,17 +336,37 @@ h5 {
 
 .advantage__text {
   font-family: 'Futura', sans-serif;
+  padding-bottom: 1rem;
   font-size: 1rem;
   color: #333;
 }
 
+@media (max-width: 600px) {
+  .advantage {
+    min-width: 100%;
+    margin: 0.5rem auto;
+    padding: 0.5rem;
+    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+
+  .advantage__title {
+    font-size: 1.3rem;
+  }
+
+  .advantage__text {
+    font-size: 1rem;
+    padding: 0 1.5rem;
+  }
+}
+
 .about {
-  min-width: 25rem;
   background: transparent;
   box-shadow: none;
   height: 100%;
-  margin-left: calc(20% - 2.5rem);
-  margin-right: calc(20% - 2.5rem);
+  max-width: 80%;
+  margin: 0 auto;
+  text-align: center;
+  padding: 2rem;
 }
 
 .about__parallax {
@@ -253,10 +374,23 @@ h5 {
   margin-top: 2rem;
 }
 
+.history__parallax {
+  max-height: 34rem;
+  margin-top: 2rem;
+}
+
+@media (max-width: 600px) {
+  .history__parallax {
+    max-height: 45rem;
+  }
+}
+
 .about__title {
   font-family: 'Futura', sans-serif;
   font-size: 3rem;
   text-align: center;
+  width: 100%;
+  display: block;
   color: #fff;
   margin-top: 1rem;
   font-weight: bold;
@@ -265,8 +399,10 @@ h5 {
 .about__subtitle {
   font-family: 'Futura', sans-serif;
   color: #FF3D8C;
-  font-size: 1.5rem;
+  font-size: 1.3rem;
   text-align: center;
+  width: 100%;
+  display: block;
   margin-bottom: 0.5rem;
   font-weight: bold;
 }
@@ -274,8 +410,29 @@ h5 {
 .about__text {
   font-family: 'Futura', sans-serif;
   color: #ddd;
-  font-size: 1.2rem;
+  font-size: 1rem;
   text-align: center;
+  padding: 0 1rem;
+}
+
+@media (max-width: 600px) {
+  .about {
+    max-width: 100%;
+    padding: 1rem;
+  }
+
+  .about__title {
+    font-size: 1.5rem;
+  }
+
+  .about__subtitle {
+    font-size: 1rem;
+  }
+
+  .about__text {
+    font-size: 1rem;
+    padding: 0 10px;
+  }
 }
 
 .footer {
diff --git a/services/frontend/components/Advantages.vue b/services/frontend/components/Advantages.vue
index da5fd26..4a978fb 100644
--- a/services/frontend/components/Advantages.vue
+++ b/services/frontend/components/Advantages.vue
@@ -6,16 +6,18 @@
     :key="advantage.id"
     class="advantage"
   >
-    <v-row>
-      <v-col cols="12" md="1">
+    <v-row align="center" class="pa-2">
+      <v-col cols="auto">
         <small-icon :icon="advantage.icon" />
       </v-col>
+
       <v-col>
         <v-card-title class="advantage__title">
-          {{advantage.title}}
+          {{ advantage.title }}
         </v-card-title>
       </v-col>
     </v-row>
+
     <v-card-text class="advantage__text">
       {{ advantage.subtitle }}
     </v-card-text>
diff --git a/services/frontend/components/ContactUs.vue b/services/frontend/components/ContactUs.vue
index 4e2409c..b00c6e4 100644
--- a/services/frontend/components/ContactUs.vue
+++ b/services/frontend/components/ContactUs.vue
@@ -1,87 +1,9 @@
 <template>
   <v-card class="contact">
-    <v-form v-model="valid">
-      <v-container>
-        <v-card-title class="contact__title">Kontaktujte nás!</v-card-title>
-        <v-row>
-          <v-col
-            cols="12"
-            md="4"
-          >
-            <v-text-field
-              v-model="fullName"
-              label="Jméno"
-              variant="underlined"
-            ></v-text-field>
-          </v-col>
-
-          <v-col
-            cols="12"
-            md="4"
-          >
-            <v-text-field
-              v-model="email"
-              label="Emailová adresa"
-              variant="underlined"
-            ></v-text-field>
-          </v-col>
-
-          <v-col
-            cols="12"
-            md="4"
-          >
-            <v-text-field
-              v-model="phone"
-              label="Telefonní číslo"
-              variant="underlined"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-textarea
-              v-model="textField"
-              label="Váš dotaz *"
-              variant="underlined"
-            />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-btn
-              class="contact__button"
-              type="submit"
-              @click.prevent="sendContact"
-            >
-              Poslat
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-form>
+    <v-card-title class="contact__title">Kontaktujte nás!</v-card-title>
+    <dialog-contact-form />
   </v-card>
 </template>
 <script setup lang="ts">
-import './assets/css/main.css'
-import {useAPI} from "~/composables/useAPI";
-
-const valid = ref<boolean>(false);
-
-const fullName = ref<string>("");
-const email = ref<string>("");
-const phone = ref<string>("");
-const textField = ref<string>("");
-
-async function sendContact() {
-  const { data, error } = await useAPI('create-contact/', {
-    method: "POST",
-    body: {
-      name: fullName.value,
-      email: email.value,
-      phone_number: phone.value,
-      content: textField.value,
-    }
-  });
-}
 
 </script>
\ No newline at end of file
diff --git a/services/frontend/components/Courses.vue b/services/frontend/components/Courses.vue
index 3ec11ad..bcfcd0d 100644
--- a/services/frontend/components/Courses.vue
+++ b/services/frontend/components/Courses.vue
@@ -2,24 +2,62 @@
   <h1 id="courses">Kurzy</h1>
   <h2>Vyberte, co Vám nejlépe vyhovuje</h2>
 
-  <v-row class="pricing">
-    <v-col
-        cols="12"
-        md="4"
-        v-for="(course, index) in courses"
-        :key="index"
-    >
-      <v-card class="pricing-box">
-        <h3>{{ course.name }}</h3>
-        <v-card-subtitle><div class="pricing__subtitle">{{ course.time }}</div></v-card-subtitle>
-        <v-card-title><div class="pricing__price">{{ course.price }}</div></v-card-title>
-        <v-card-text v-if="course.desc"><div class="pricing__subtitle">{{ course.desc }}</div></v-card-text>
-        <v-btn class="show_more">
-          Kontaktujte nás
-        </v-btn>
-      </v-card>
-    </v-col>
-  </v-row>
+<v-row class="pricing">
+  <v-col
+      cols="12"
+      sm="6"
+      md="4"
+      lg="3"
+      v-for="(course, index) in courses"
+      :key="index"
+  >
+    <v-card class="pricing-box" @click="openDialog = true; chosenCourse = course">
+      <div class="pricing-content">
+        <h3 class="pricing-title">{{ course.name }}</h3>
+        <v-card-subtitle>
+          <div class="pricing__subtitle">{{ course.time }}</div>
+        </v-card-subtitle>
+        <v-card-title>
+          <div class="pricing__price">{{ course.price }}</div>
+        </v-card-title>
+        <v-card-text v-if="course.desc">
+          <div class="pricing__subtitle pricing-desc">{{ course.desc }}</div>
+        </v-card-text>
+      </div>
+      <v-btn class="show_more">
+        Kontaktujte nás
+      </v-btn>
+    </v-card>
+  </v-col>
+</v-row>
+<template>
+  <v-dialog
+    v-model="openDialog"
+    :fullscreen="$vuetify.display.smAndDown"
+    scrollable
+    transition="dialog-bottom-transition"
+  >
+    <v-card class="contact pa-4">
+      <v-card-title class="contact__dialog__title d-flex align-center">
+        <span class="flex-grow-1 text-center" style="margin-left: 40px;">{{ chosenCourse.name }}</span>
+        <v-btn icon="mdi-close" variant="text" @click="openDialog = false"></v-btn>
+      </v-card-title>
+
+      <v-card-text v-if="chosenCourse.desc" class="text-center">
+        <div class="pricing__subtitle text-body-1">{{ chosenCourse.desc }}</div>
+      </v-card-text>
+
+      <v-divider class="my-4"></v-divider>
+
+      <v-card-title class="contact__dialog__title text-center">
+        Kontaktujte nás!
+      </v-card-title>
+
+      <dialog-contact-form class="mt-2" />
+    </v-card>
+  </v-dialog>
+</template>
+
 <!--  <v-btn to="/kurzy" class="show_more">-->
 <!--    <v-icon icon="mdi-chevron-down"/>Více informací<v-icon icon="mdi-chevron-down"/>-->
 <!--  </v-btn>-->
@@ -27,7 +65,7 @@
 <script setup lang="ts">
 import './assets/css/main.css'
 
-// TODO: vyskakovací okno s kontaktním formulářem po rozkliku :)
+const openDialog = ref<boolean>(false);
 
 const courses = [
   {name: "Sportovní taneční klub", time: "", price: "", desc: "Připojte se k našemu tanečnímu klubu a rozvíjejte své taneční dovednosti v přátelském prostředí. Nabízíme různé styly tance pro všechny úrovně."},
@@ -38,4 +76,5 @@ const courses = [
   {name: "Pronájem sálu", time: "", price: "", desc: "Hledáte ideální prostor pro tanec nebo jinou aktivitu? Náš taneční sál je k dispozici k pronájmu pro Vaše akce."},
 ]
 
+const chosenCourse = ref(courses[0]);
 </script>
\ No newline at end of file
diff --git a/services/frontend/components/History.vue b/services/frontend/components/History.vue
index 5996f78..74ceb94 100644
--- a/services/frontend/components/History.vue
+++ b/services/frontend/components/History.vue
@@ -1,6 +1,6 @@
 <template>
   <v-parallax
-    class="about__parallax"
+    class="history__parallax"
     src="public/img/black-pink.jpg"
   >
     <v-container id="about">
diff --git a/services/frontend/components/Trainers.vue b/services/frontend/components/Trainers.vue
index b526daf..60dcd32 100644
--- a/services/frontend/components/Trainers.vue
+++ b/services/frontend/components/Trainers.vue
@@ -1,26 +1,36 @@
 <template>
-  <v-parallax
-    class="trainers__parallax"
-    src="public/img/black-pink.jpg"
-  >
+  <v-parallax class="trainers__parallax" src="public/img/black-pink.jpg">
     <v-container id="trainers">
-      <v-card class="trainers">
-        <v-card-title class="about__title">Naši trenéři a lektoři</v-card-title>
-        <v-card-subtitle class="about__subtitle">Seznamte se s námi!</v-card-subtitle>
-        <v-row>
-          <v-col class="text-center" cols="12" md="3" v-for="lector in lectors" :key="lector.id">
-              <v-avatar
-                color="none"
-                rounded="1"
-                size="150"
-                style="margin: 30px"
+      <v-card class="trainers pa-4">
+        <v-card-title class="about__title ">Naši trenéři a lektoři</v-card-title>
+        <v-card-subtitle class="about__subtitle ">Seznamte se s námi!</v-card-subtitle>
+
+        <v-carousel cycle interval="4000" hide-delimiters show-arrows="hover">
+          <v-carousel-item v-for="(group, index) in trainerGroups" :key="index">
+            <v-row justify="center">
+              <v-col
+                v-for="(lector, index) in group"
+                :key="index"
+                cols="12"
+                sm="6"
+                md="4"
+                lg="3"
+                class="text-center"
               >
-                <v-img :src="lector.img" cover></v-img>
-              </v-avatar>
-            <v-card-subtitle class="about__subtitle">{{lector.name}}</v-card-subtitle>
-            <v-card-text class="about__text">{{ lector.desc }}</v-card-text>
-          </v-col>
-        </v-row>
+                <v-avatar
+                  color="none"
+                  rounded="1"
+                  size="150"
+                  style="margin: 30px"
+                >
+                  <v-img :src="lector.img" cover></v-img>
+                </v-avatar>
+                <v-card-subtitle class="about__subtitle">{{ lector.name }}</v-card-subtitle>
+                <v-card-text class="about__text">{{ lector.desc }}</v-card-text>
+              </v-col>
+            </v-row>
+          </v-carousel-item>
+        </v-carousel>
       </v-card>
     </v-container>
   </v-parallax>
@@ -30,28 +40,38 @@ import './assets/css/main.css'
 
 const lectors = [
   {
-    id: 1,
     name: "Ondřej Gilar",
     img: "/trainers/img.png",
     desc: "Trenér - latinskoamerické tance a Pro-AM",
   },
   {
-    id: 2,
     name: "Leona Hruštincová",
     img: "/trainers/img.png",
     desc: "Lektorka - tance pro děti",
   },
   {
-    id: 1,
     name: "Ondřej Gilar",
     img: "/trainers/img.png",
     desc: "Trenér - latinskoamerické tance a Pro-AM",
   },
   {
-    id: 2,
+    name: "Leona Hruštincová",
+    img: "/trainers/img.png",
+    desc: "Lektorka - tance pro děti",
+  },
+  {
     name: "Leona Hruštincová",
     img: "/trainers/img.png",
     desc: "Lektorka - tance pro děti",
   },
 ]
+
+const trainerGroups = computed(() => {
+  const groups: typeof lectors[] = [];
+  const perSlide = window.innerWidth >= 1280 ? 4 : window.innerWidth >= 600 ? 2 : 1;
+  for (let i = 0; i < lectors.length; i += perSlide) {
+    groups.push(lectors.slice(i, i + perSlide));
+  }
+  return groups;
+});
 </script>
\ No newline at end of file
diff --git a/services/frontend/components/dialog/ContactForm.vue b/services/frontend/components/dialog/ContactForm.vue
new file mode 100644
index 0000000..7be3370
--- /dev/null
+++ b/services/frontend/components/dialog/ContactForm.vue
@@ -0,0 +1,84 @@
+<template>
+  <v-form v-model="valid">
+      <v-container>
+        <v-row>
+          <v-col
+            cols="12"
+            md="4"
+          >
+            <v-text-field
+              v-model="fullName"
+              label="Jméno"
+              variant="underlined"
+            ></v-text-field>
+          </v-col>
+
+          <v-col
+            cols="12"
+            md="4"
+          >
+            <v-text-field
+              v-model="email"
+              label="Emailová adresa"
+              variant="underlined"
+            ></v-text-field>
+          </v-col>
+
+          <v-col
+            cols="12"
+            md="4"
+          >
+            <v-text-field
+              v-model="phone"
+              label="Telefonní číslo"
+              variant="underlined"
+            ></v-text-field>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <v-textarea
+              v-model="textField"
+              label="Váš dotaz"
+              variant="underlined"
+            />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <v-btn
+              class="contact__button"
+              type="submit"
+              @click.prevent="sendContact"
+            >
+              Poslat
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-form>
+</template>
+<script setup lang="ts">
+import './assets/css/main.css'
+import {useAPI} from "~/composables/useAPI";
+
+const valid = ref<boolean>(false);
+
+const fullName = ref<string>("");
+const email = ref<string>("");
+const phone = ref<string>("");
+const textField = ref<string>("");
+
+async function sendContact() {
+  const { data, error } = await useAPI('create-contact/', {
+    method: "POST",
+    body: {
+      name: fullName.value,
+      email: email.value,
+      phone_number: phone.value,
+      content: textField.value,
+    }
+  });
+}
+
+</script>
\ No newline at end of file
diff --git a/services/frontend/components/menu/Header.vue b/services/frontend/components/menu/Header.vue
index b48a3fa..0291c3e 100644
--- a/services/frontend/components/menu/Header.vue
+++ b/services/frontend/components/menu/Header.vue
@@ -3,23 +3,39 @@
     <v-layout>
       <v-app-bar style="position: fixed">
         <v-app-bar-nav-icon
-            @click="drawer = !drawer"
-            class="d-flex d-sm-none"
+          @click="drawer = !drawer"
+          class="d-flex d-sm-none"
         />
         <div>
           <a href="/"><v-img class="app__logo" src="/logo.png" /></a>
         </div>
         <v-app-bar-title class="app__title">Taneční klub Ostrava</v-app-bar-title>
 
-        <v-tabs
-          v-for="(tab, index) in tabs" :key="index"
-          v-model="currentTab"
-          align-with-title
-          class="d-none d-sm-flex app__tab"
-        >
-          <v-tab v-if="tab.ref" :text="tab.name" :value="tab.name" @click="useGoTo(tab.ref)"></v-tab>
-          <v-tab v-if="tab.href" :text="tab.name" :value="tab.name" :href="tab.href"></v-tab>
+        <v-tabs v-model="currentTab" class="d-none d-sm-flex app__tab">
+          <div
+            v-for="(tab, index) in tabs"
+            :key="index"
+          >
+            <v-tab
+              v-if="tab.ref"
+              :text="tab.name"
+              :value="tab.name"
+              @click="useGoTo(tab.ref)"
+            >
+              {{ tab.name }}
+            </v-tab>
+            <v-tab
+              v-if="tab.href"
+              :text="tab.name"
+              :value="tab.name"
+              :href="tab.href"
+            >
+              {{ tab.name }}
+            </v-tab>
+          </div>
         </v-tabs>
+
+
 <!--        <v-col-->
 <!--          class="text-right"-->
 <!--          @click="toggleTheme"-->
@@ -29,7 +45,6 @@
       </v-app-bar>
 
       <v-fab
-        :key="currentTab.ref"
         class="ms-4 mb-4"
       ></v-fab>
 
@@ -39,10 +54,7 @@
         fixed
         left
       >
-        <v-list
-          nav
-          dense
-        >
+        <v-list nav dense>
           <v-list-item v-for="(tab, index) in tabs" :key="index">
             <v-list-item-title @click="useGoTo(tab.ref)">{{ tab.name }}</v-list-item-title>
           </v-list-item>
@@ -54,9 +66,10 @@
 
 <script setup lang="ts">
 import { useGoTo } from "~/composables/useGoTo";
+import {useRoute} from "#vue-router";
 const route = useRoute();
 
-const currentTab = ref({name: 'O nás', ref: "#about", href: "o-nas"});
+const currentTab = ref({ name: 'O nás', ref: "#about", href: "o-nas" });
 const drawer = ref(null)
 
 const homeTabs = [
@@ -69,15 +82,15 @@ const homeTabs = [
 ];
 
 const otherTabs = [
-  { name: "O nás", ref: "", href: "/#about" },
-  { name: "Trenéři", ref: "", href: "/trenery" },
-  { name: "Kurzy", ref: "", href: "/kurzy" },
+  { name: "O nás", ref: "", href: "/" },
+  { name: "Trenéři", ref: "", href: "/" },
+  { name: "Kurzy", ref: "", href: "/" },
   { name: "Galerie", ref: "", href: "/galerie" },
-  { name: "Aktuality", ref: "", href: "/aktuality" },
+  { name: "Aktuality", ref: "", href: "/" },
   { name: "Kontakty", ref: "", href: "/kontakty" },
 ];
 
-const tabs = computed(() => (route.path === "/" ? homeTabs : otherTabs))
+const tabs = computed(() => (route.path === "/" ? homeTabs : otherTabs));
 // import { useTheme } from 'vuetify'
 //
 // const theme = useTheme()
@@ -86,4 +99,5 @@ const tabs = computed(() => (route.path === "/" ? homeTabs : otherTabs))
 //   theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
 // }
 
+
 </script>
\ No newline at end of file
diff --git a/services/frontend/plugins/vuetify.ts b/services/frontend/plugins/vuetify.ts
index 2e2469d..2151983 100644
--- a/services/frontend/plugins/vuetify.ts
+++ b/services/frontend/plugins/vuetify.ts
@@ -49,7 +49,7 @@ export default defineNuxtPlugin((app) => {
     defaults: {
       SmallIcon: {
         color: 'color',
-        style: [{ 'margin-left': '20px', 'margin-top': '15px', 'font-size': '30px'}]
+        style: [{ 'margin-left': '20px', 'font-size': '30px'}]
       },
       BigIcon: {
         color: 'color',