From 499375a8e8108a7115b8a987fb940a78011fa368 Mon Sep 17 00:00:00 2001
From: KUB0570 <nikola.kubeczkova.st@vsb.cz>
Date: Sun, 9 Feb 2025 22:09:39 +0100
Subject: [PATCH] some finished components

---
 services/frontend/components/About.vue       | 60 ++++++++++++-
 services/frontend/components/Advantages.vue  | 55 ++++++++++++
 services/frontend/components/ContactUs.vue   | 14 ++-
 services/frontend/components/Courses.vue     | 76 +++++++++++++++-
 services/frontend/components/Gallery.vue     | 91 ++++++++++++++------
 services/frontend/components/News.vue        | 74 +++++++++++++++-
 services/frontend/components/References.vue  | 64 +++++++++-----
 services/frontend/components/Trainers.vue    | 83 ++++++++++++------
 services/frontend/components/menu/Footer.vue | 59 +++++++++----
 services/frontend/components/menu/Header.vue |  2 +-
 services/frontend/layouts/default.vue        |  9 +-
 services/frontend/pages/galerie.vue          | 10 +++
 services/frontend/pages/index.vue            | 12 +--
 services/frontend/pages/kurzy.vue            |  7 +-
 services/frontend/pages/treneri.vue          | 70 +++++++++++++++
 15 files changed, 569 insertions(+), 117 deletions(-)
 create mode 100644 services/frontend/components/Advantages.vue
 create mode 100644 services/frontend/pages/galerie.vue
 create mode 100644 services/frontend/pages/treneri.vue

diff --git a/services/frontend/components/About.vue b/services/frontend/components/About.vue
index ec4a1b4..b8cffd3 100644
--- a/services/frontend/components/About.vue
+++ b/services/frontend/components/About.vue
@@ -1,10 +1,68 @@
 <template>
-
+  <v-parallax
+    src="https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"
+    style="max-height: 580px"
+  >
+        <v-container fluid fill-height>
+    <v-row align="center" justify="center">
+      <v-col
+        cols="12"
+        md="4"
+      />
+      <v-col
+        cols="12"
+        md="8"
+        style="color: white; padding: 50px"
+      >
+        <v-card
+          class="overflow-y-auto"
+          max-height="460"
+          style="background-color: transparent"
+        >
+          <h1>Vítejte v tanečním klubu!</h1>
+          <h4>Tanec je vášeň!</h4>
+          <div class="subtitle">
+            Sportovní taneční klub jsme založili v roce 2016 s absolventy středoškolských tanečních kurzů taneční školy Bolero Ostrava.
+            Společně jsme se zaměřili na profesionální stránku tance, našli jsme pár aktivních tanečníků se kterými jsme začali pravidelně trénovat pohyb, krokové variace a techniku jednotlivých tanců.
+            Po roce tréninků se dostavily i první výsledky a dnes již tito mladí tanečníci skvěle reprezentují klub na celé řadě tanečních soutěží.
+            <br><br>
+            O rok později v roce 2017 jsme založili také společenský taneční klub pro dospělé, kteří by se rádi také tanci věnovali.
+            Příjemná atmosféra, zábava, ale i chuť se učit novým věcem, to jsou tři slova, které by mohly charakterizovat atmosféru v tanečních lekcích.
+            Taneční klub, ať už sportovní tak i společenský vítá všechny milovníky tance, kteří chtějí poodhalit tajemství ladných tanečních pohybů, sdílet nezaměnitelnou atmosféru a dovědět se více o taneční technice.
+            Našim přáním je, abyste na tanečním parketu jednoduše zářili.
+          </div>
+        </v-card>
+      </v-col>
+    </v-row>
+        </v-container>
+  </v-parallax>
 </template>
 <script setup lang="ts">
 
 </script>
 
 <style scoped>
+h1 {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 3rem;
+  color: #ddd; /* reverse Dark gray */
+  text-align: center;
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.1); /* Subtle shadow */
+}
 
+h4 {
+  font-family: 'Playfair Display', serif;
+  font-size: 1.5rem;
+  color: #aaa; /* Light gray */
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+.subtitle {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 1.2rem;
+  text-align: center;
+  color: #ddd; /* Dark gray */
+}
 </style>
\ No newline at end of file
diff --git a/services/frontend/components/Advantages.vue b/services/frontend/components/Advantages.vue
new file mode 100644
index 0000000..50d0ed4
--- /dev/null
+++ b/services/frontend/components/Advantages.vue
@@ -0,0 +1,55 @@
+<template>
+  <h1>Co dostanete s tanečním klubem</h1>
+  <h4>Výhody tanečníka</h4>
+  <v-card
+    v-for="advantage in advantages"
+    :key="advantage.id"
+    :prepend-icon="advantage.icon"
+    class="advantage-box"
+    :title="advantage.title"
+  >
+    <v-card-text style="color: #666">{{ advantage.subtitle }}</v-card-text>
+  </v-card>
+</template>
+<script setup lang="ts">
+
+const advantages = [
+  {id: 1, icon: "mdi mdi-heart", title: "Zdravé tělo a mysl",
+    subtitle: "Seznamíte se s charaktery jednotlivých tanců, správným pohybem a jeho provedením, zrelaxujete se a zapomenete na každodenní starosti."},
+  {id: 2, icon: "mdi mdi-music", title: "Skvělá hudba a kostýmy",
+    subtitle: "Zažijete krásné chvíle v rytmu latinskoamerických a standardních tanců a pokud Vás tanec opravdu veme za srdce můžete se zůčastnit také tanečních vystoupení a tanečních soutěží."},
+  {id: 3, icon: "mdi mdi-account-group", title: "Krealitvní a zábavní lidé",
+    subtitle: "Příjemná společnost a tým lidí, ce kterém se také můžete spolehnout na individuální přístup lektorů, kteří tu vždy budou právě pro Vás."},
+]
+
+</script>
+
+<style scoped>
+h1 {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 3rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+}
+
+h4 {
+  font-family: 'Playfair Display', serif;
+  font-size: 1.5rem;
+  color: #666; /* Light gray */
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+.advantage-box {
+  min-width: 400px;
+  border-radius: 15px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  margin-top: 20px;
+  margin-left: calc(20% - 40px); /* Subtract half of min-width from left margin */
+  margin-right: calc(20% - 40px); /* Subtract half of min-width from right margin */
+}
+
+</style>
\ No newline at end of file
diff --git a/services/frontend/components/ContactUs.vue b/services/frontend/components/ContactUs.vue
index 78662f1..8fff377 100644
--- a/services/frontend/components/ContactUs.vue
+++ b/services/frontend/components/ContactUs.vue
@@ -1,8 +1,6 @@
 <template>
+  <h1>Kontaktujte nás!</h1>
   <v-card>
-      <v-card-title>
-        <h1>Kontaktujte nás!</h1>
-      </v-card-title>
   <v-form v-model="valid" @submit="sendContact">
     <v-container>
       <v-row>
@@ -75,5 +73,13 @@ function sendContact() {
 </script>
 
 <style scoped>
-
+h1 {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 3rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+}
 </style>
\ No newline at end of file
diff --git a/services/frontend/components/Courses.vue b/services/frontend/components/Courses.vue
index ec4a1b4..6a5492b 100644
--- a/services/frontend/components/Courses.vue
+++ b/services/frontend/components/Courses.vue
@@ -1,10 +1,84 @@
 <template>
-
+  <h1>Kurzy - cena</h1>
+  <h4>Vyberte, co Vám nejlépe vyhovuje</h4>
+  <v-row>
+    <v-col
+        cols="12"
+        md="4"
+        v-for="course in courses"
+        :key="course.id"
+    >
+      <v-card
+        class="pricing-box"
+      >
+        <h2>{{ course.name }}</h2>
+        <v-card-subtitle><div class="subtitle">{{ course.time }}</div></v-card-subtitle>
+        <v-card-title><div class="price">{{ course.price }}</div></v-card-title>
+        <v-card-subtitle v-if="course.desc"><div class="subtitle">{{ course.desc }}</div></v-card-subtitle>
+      </v-card>
+    </v-col>
+  </v-row>
 </template>
 <script setup lang="ts">
 
+const courses = [
+  {id: 1, name: "Sportovní taneční klub", time: "24 hodin/měsíc", price: "600 Kč", desc: false},
+  {id: 2, name: "Individuální lekce", time: "60min / taneční pár", price: "500 Kč", desc: "Pro veřejnost"},
+  {id: 3, name: "Volný trénink s lektorem", time: "60min / taneční pár", price: "100 Kč", desc: "Pro členy tanečního klubu"},
+]
+
 </script>
 
 <style scoped>
+h1 {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 3rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+}
 
+h2 {
+  font-family: 'Playfair Display', serif;
+  font-size: 1.7rem;
+  color: #666; /* Light gray */
+}
+
+h4 {
+  font-family: 'Playfair Display', serif;
+  font-size: 1.5rem;
+  color: #666; /* Light gray */
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+
+.pricing-box {
+  padding: 20px;
+  text-align: center;
+  min-width: 80%;
+  border-radius: 15px;
+  height: 230px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  margin: 50px
+}
+
+.pricing-box:not(:last-child) {
+  margin: 20px;
+}
+
+.price {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 3.5rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+}
+
+.subtitle {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 1rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+}
 </style>
\ No newline at end of file
diff --git a/services/frontend/components/Gallery.vue b/services/frontend/components/Gallery.vue
index fe70c2c..24a56e7 100644
--- a/services/frontend/components/Gallery.vue
+++ b/services/frontend/components/Gallery.vue
@@ -1,32 +1,75 @@
 <template>
-<!--  <v-row>-->
-<!--    <template v-for="(image,imgIdx) in imageLayout" :key="imgIdx">-->
-<!--      <v-col :cols="image.cols">-->
-<!--        <v-img-->
-<!--          :src="`https://picsum.photos/500/300?image=${image.cols * 20}`"-->
-<!--          height="100%"-->
-<!--          cover-->
-<!--        ></v-img>-->
-<!--      </v-col>-->
-
-<!--      <v-col v-if="image.children" class="d-flex flex-column" cols="6">-->
-<!--        <v-row>-->
-<!--          <v-col v-for="(children,childIdx) in image.children" :key="childIdx" :cols="children.cols">-->
-<!--            <v-img-->
-<!--              :src="`https://picsum.photos/500/300?image=${children.cols + childIdx}`"-->
-<!--              height="100%"-->
-<!--              cover-->
-<!--            ></v-img>-->
-<!--          </v-col>-->
-<!--        </v-row>-->
-<!--      </v-col>-->
-<!--    </template>-->
-<!--  </v-row>-->
+  <h1>Galerie</h1>
+  <v-row>
+    <v-col
+      v-for="(photo, index) in photos"
+      :key="index"
+      cols="4"
+      style="padding: 0;"
+    >
+      <v-img
+        :lazy-src="photo.src"
+        :src="photo.src"
+        aspect-ratio="1"
+        cover
+      >
+        <template v-slot:placeholder>
+          <v-row>
+            <v-progress-circular
+              color="grey-lighten-5"
+              indeterminate
+            ></v-progress-circular>
+          </v-row>
+        </template>
+      </v-img>
+    </v-col>
+  </v-row>
 </template>
 <script setup lang="ts">
 
+const photos = [
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+  {src: "https://www.danceus.org/parse/files/Bjy5anNVI0Q81M8bmrwIiuU20x4kepQTxzDBfqpR/70d831b8f51edc1f6e1a4320d52f164b_latin-dance.jpg"},
+  {src: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460"},
+  {src: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"},
+  {src: "https://danceostrava.cz/wp-content/uploads/2021/10/IMG_5203-scaled.jpg"},
+  {src: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"},
+]
+
 </script>
 
 <style scoped>
-
+h1 {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 3rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+  margin-bottom: 1rem;
+  margin-top: -2rem;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+}
 </style>
\ No newline at end of file
diff --git a/services/frontend/components/News.vue b/services/frontend/components/News.vue
index ec4a1b4..51eb6a8 100644
--- a/services/frontend/components/News.vue
+++ b/services/frontend/components/News.vue
@@ -1,10 +1,80 @@
 <template>
-
+  <h1>Články</h1>
+  <v-card>
+    <v-row>
+    <v-col
+      v-for="(article, index) in articles"
+      :key="index"
+      cols="12"
+      md="6"
+    >
+      <v-row>
+        <v-col
+          cols="12"
+          md="4"
+        >
+          <v-img
+            :lazy-src="article.src"
+            :src="article.src"
+            aspect-ratio="1"
+            cover
+          >
+            <template v-slot:placeholder>
+              <v-row>
+                <v-progress-circular
+                  color="grey-lighten-5"
+                  indeterminate
+                ></v-progress-circular>
+              </v-row>
+            </template>
+          </v-img>
+        </v-col>
+        <v-col
+          cols="12"
+          md="8"
+        >
+            <v-row><v-card-title><h2>{{ article.title }}</h2></v-card-title></v-row>
+            <v-row><v-card-subtitle><h4>{{ article.autor }}, ({{ article.date}})</h4></v-card-subtitle></v-row>
+            <v-row><v-card-text><div class="subtitle">{{ article.desc }}</div></v-card-text></v-row>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+  </v-card>
 </template>
 <script setup lang="ts">
-
+const articles = [
+  {
+    autor: "Bebloid Obecný",
+    date: "2. 2. 2025",
+    title: "David potrolil soutěž",
+    src: "https://melbourneentertainmentco.com.au/wp-content/uploads/2020/04/Juan-and-Jess-600x600-profile.jpg",
+    desc: "V neděli 2. 2. David potrolil sambu, kde místo tančení lítal jako zmatená včelka. Terka, ačkoliv před soutěží velice zmatkovala a sebepoškozovala se, tak na parketě předvedla výborné představení. Na další trolení se můžeme všichni těšit do Brna na konci tohoto měsíce. "
+  },
+]
 </script>
 
 <style scoped>
+h1 {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 3rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
 
+h2 {
+  font-family: 'Playfair Display', serif;
+  text-align: center;
+  font-size: 1.7rem;
+  color: #666; /* Light gray */
+}
+
+.subtitle {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 1rem;
+  color: #333; /* Dark gray */
+}
 </style>
\ No newline at end of file
diff --git a/services/frontend/components/References.vue b/services/frontend/components/References.vue
index e4b191f..2bdc429 100644
--- a/services/frontend/components/References.vue
+++ b/services/frontend/components/References.vue
@@ -1,9 +1,5 @@
 <template>
-  <v-card>
-    <v-card-title>
-      <h1>Reference</h1>
-    </v-card-title>
-    <v-card-item>
+  <h1>Reference</h1>
       <v-expansion-panels class="pa-4" variant="popout">
     <v-expansion-panel
       v-for="(reference, id) in references"
@@ -36,39 +32,44 @@
             md="3"
             sm="5"
           >
-            <strong v-html="reference.name" style="font-size: 20px"></strong>
-            <div>
-            <v-rating
-              readonly
-              :length="5"
-              :size="20"
-              :model-value="5"
-             />
-            </div>
+            <h2>{{ reference.name }}</h2>
+            <div class="subtitle">{{ reference.title }}</div>
           </v-col>
         </v-row>
       </v-expansion-panel-title>
 
       <v-expansion-panel-text>
-        <v-card-text v-text="reference.desc"></v-card-text>
+        <div class="subtitle">{{ reference.desc }}</div>
       </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
-    </v-card-item>
-  </v-card>
 </template>
 <script setup lang="ts">
 
 const references = [
-  {id: 1, avatar: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460", name: "Alenka", desc: "Dlouhý popisek"},
   {
-    id: 2, avatar: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460",
+    id: 1,
+    avatar: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460",
+    title: "Členka tanečního klubu",
+    name: "Alenka",
+    desc: "Dlouhý popisek"},
+  {
+    id: 2,
+    avatar: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460",
+    title: "Členka tanečního klubu",
     name: "Pepík",
     desc: "Dlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisek"
   },
-  {id: 3, avatar: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460", name: "Davídek", desc: "Dlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekisek"},
   {
-    id: 4, avatar: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460",
+    id: 3,
+    avatar: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460",
+    title: "Občasný zájemce individuálního cvičení",
+    name: "Davídek",
+    desc: "Dlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekisek"},
+  {
+    id: 4,
+    avatar: "https://avatars0.githubusercontent.com/u/9064066?v=4&s=460",
+    title: "Trenér",
     name: "Franta",
     desc: "Dlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisek"
   },
@@ -77,5 +78,26 @@ const references = [
 </script>
 
 <style scoped>
+h1 {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 3rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+}
+
+h2 {
+  font-family: 'Playfair Display', serif;
+  font-size: 1.7rem;
+  color: #666; /* Light gray */
+}
+
+.subtitle {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 1rem;
+  color: #333; /* Dark gray */
+}
 
 </style>
diff --git a/services/frontend/components/Trainers.vue b/services/frontend/components/Trainers.vue
index 2a82a95..674fb87 100644
--- a/services/frontend/components/Trainers.vue
+++ b/services/frontend/components/Trainers.vue
@@ -1,44 +1,71 @@
 <template>
-  <v-card>
-    <v-card-title>
-      <h1>Naši trenéři a lektoři</h1>
-    </v-card-title>
-    <v-row>
-      <v-col v-for="lector in lectors" :key="lector.id" cols="12" md="6" lg="4">
-        <v-img
-          src="https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg"
-          max-height="250"
-          max-width="700"
-          min-width="500"
-          width="50%"
-          cover
-        >
+  <h1>Naši trenéři a lektoři</h1>
+    <v-row style="margin-bottom: 2rem;">
+      <v-col class="text-center" cols="12" md="3" v-for="lector in lectors" :key="lector.id">
           <v-avatar
-            color="grey"
-            rounded="0"
+            color="none"
+            rounded="1"
             size="150"
+            style="margin: 30px"
           >
-            <v-img src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg" cover></v-img>
+            <v-img :src="lector.img" cover></v-img>
           </v-avatar>
-          <v-list-item
-            class="text-white"
-            :subtitle="lector.desc"
-            :title="lector.name"
-          ></v-list-item>
-        </v-img>
+        <h2>{{lector.name}}</h2>
+        <div class="subtitle">{{ lector.desc }}</div>
       </v-col>
     </v-row>
-  </v-card>
 </template>
 <script setup lang="ts">
 const lectors = [
-  {id: 1, name: "Ondřej Gilar", desc: "Trenér - latinskoamerické tance a Pro-AM"},
-  {id: 2, name: "Leona Hruštincová", desc: "Lektorka - tance pro děti"},
-  {id: 3, name: "Ondřej Gilar", desc: "Trenér - latinskoamerické tance a Pro-AM"},
-  {id: 4, name: "Leona Hruštincová", desc: "Lektorka - tance pro děti"},
+  {
+    id: 1,
+    name: "Ondřej Gilar",
+    img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg",
+    desc: "Trenér - latinskoamerické tance a Pro-AM",
+  },
+  {
+    id: 2,
+    name: "Leona Hruštincová",
+    img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg",
+    desc: "Lektorka - tance pro děti",
+  },
+  {
+    id: 1,
+    name: "Ondřej Gilar",
+    img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg",
+    desc: "Trenér - latinskoamerické tance a Pro-AM",
+  },
+  {
+    id: 2,
+    name: "Leona Hruštincová",
+    img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg",
+    desc: "Lektorka - tance pro děti",
+  },
 ]
 </script>
 
 <style scoped>
+h1 {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 3rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
 
+h2 {
+  font-family: 'Playfair Display', serif;
+  text-align: center;
+  font-size: 1.7rem;
+  color: #666; /* Light gray */
+}
+
+.subtitle {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 1rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+}
 </style>
\ No newline at end of file
diff --git a/services/frontend/components/menu/Footer.vue b/services/frontend/components/menu/Footer.vue
index cf2fd72..8fca1c1 100644
--- a/services/frontend/components/menu/Footer.vue
+++ b/services/frontend/components/menu/Footer.vue
@@ -8,42 +8,42 @@
           cols="12"
           md="4"
         >
-          <strong>Kontakt</strong>
-          <v-divider />
-          <v-row><v-col>Tomáš Ožana</v-col></v-row>
-          <v-row><v-col>Zimmlerova 2893/47, Ostrava</v-col></v-row>
-          <v-row><v-col>tanecniklub-ostrava@email.cz</v-col></v-row>
-          <v-row><v-col>+420774908180</v-col></v-row>
+          <h4>Kontakt</h4>
+          <v-divider :thickness="3" />
+          <div class="footer-text">Tomáš Ožana</div>
+          <div class="footer-text">Zimmlerova 2893/47, Ostrava</div>
+          <div class="footer-text">tanecniklub-ostrava@email.cz</div>
+          <div class="footer-text">+420774908180</div>
         </v-col>
 
         <v-col
           cols="12"
           md="4"
         >
-          <strong>Tréningové hodiny</strong>
-          <v-divider />
-          <v-row><v-col>Pondělí:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
-          <v-row><v-col>Úterý:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
-          <v-row><v-col>Středa:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
-          <v-row><v-col>Čtvrtek:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
-          <v-row><v-col>Pátek:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
-          <v-row><v-col>Sobota:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
-          <v-row><v-col>Neděle:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
+          <h4>Tréningové hodiny</h4>
+          <v-divider :thickness="3" />
+          <div class="footer-text">Pondělí: <span class="timespan">16:30 - 18:30 (VS)</span></div>
+          <div class="footer-text">Úterý: <span class="timespan">16:30 - 18:30 (VS)</span></div>
+          <div class="footer-text">Středa: <span class="timespan">16:30 - 18:30 (VS)</span></div>
+          <div class="footer-text">Čtvrtek: <span class="timespan">16:30 - 18:30 (VS)</span></div>
+          <div class="footer-text">Pátek: <span class="timespan">16:30 - 18:30 (VS)</span></div>
+          <div class="footer-text">Sobota: <span class="timespan">16:30 - 18:30 (VS)</span></div>
+          <div class="footer-text">Neděle: <span class="timespan">16:30 - 18:30 (VS)</span></div>
         </v-col>
 
         <v-col
           cols="12"
           md="4"
         >
-          <strong>Sociální sítě</strong>
-          <v-divider />
+          <h4>Sociální sítě</h4>
+          <v-divider :thickness="3" />
 <!--          https://pictogrammers.com/library/mdi/icon/youtube/-->
           <span class="mdi mdi-facebook" style="font-size: 60px"></span>
           <span class="mdi mdi-instagram" style="font-size: 60px"></span>
           <span class="mdi mdi-youtube" style="font-size: 60px"></span>
         </v-col>
       </v-row>
-      <v-divider />
+      <v-divider :thickness="3" style="margin-top: 60px" />
       <v-row>
         <v-col
           style="text-align: left"
@@ -64,5 +64,28 @@
 </script>
 
 <style scoped>
+h4 {
+  font-family: 'Playfair Display', serif;
+  font-size: 1.5rem;
+  color: #aaa; /* Light gray */
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
 
+h5 {
+  font-family: 'Playfair Display', serif;
+  font-size: 1rem;
+  color: #aaa; /* Light gray */
+  margin-top: 1rem;
+}
+
+.footer-text {
+  font-family: 'Playfair Display', serif;
+  font-size: 1rem;
+  color: #aaa; /* Light gray */
+}
+
+.timespan {
+  float: right; /* Aligns the timespan to the right */
+}
 </style>
\ No newline at end of file
diff --git a/services/frontend/components/menu/Header.vue b/services/frontend/components/menu/Header.vue
index a0bf54a..ddfe5e1 100644
--- a/services/frontend/components/menu/Header.vue
+++ b/services/frontend/components/menu/Header.vue
@@ -5,7 +5,7 @@
          class="d-flex d-sm-none"
      />
       <span class="mdi mdi-dance-ballroom" style="font-size: 60px"></span>
-      Taneční klub ostrava
+      Taneční klub Ostrava
           <v-tabs
             v-model="tab"
             align-with-title
diff --git a/services/frontend/layouts/default.vue b/services/frontend/layouts/default.vue
index 3919004..ce0aada 100644
--- a/services/frontend/layouts/default.vue
+++ b/services/frontend/layouts/default.vue
@@ -8,11 +8,4 @@
       <menu-footer/>
     </v-app>
   </v-layout>
-</template>
-<script setup lang="ts">
-
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/services/frontend/pages/galerie.vue b/services/frontend/pages/galerie.vue
new file mode 100644
index 0000000..a1a0736
--- /dev/null
+++ b/services/frontend/pages/galerie.vue
@@ -0,0 +1,10 @@
+<template>
+  <gallery/>
+</template>
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/services/frontend/pages/index.vue b/services/frontend/pages/index.vue
index 41c7a5b..9cdf637 100644
--- a/services/frontend/pages/index.vue
+++ b/services/frontend/pages/index.vue
@@ -4,17 +4,19 @@
     style="margin-top: -80px"
   >
     <div class="d-flex flex-column fill-height justify-center align-center text-white">
-      <h1 class="text-h4 font-weight-thin mb-4">
+      <h1 class="text-h3 font-weight-thin mb-4">
         Taneční klub Ostrava
       </h1>
-      <h4 class="subheading">
+      <h2 class="subheading">
         Naučíme Vás tančit!
-      </h4>
+      </h2>
     </div>
   </v-parallax>
+  <news />
+  <advantages/>
+  <courses />
+  <about />
   <trainers/>
-  <v-divider />
   <references/>
-  <v-divider />
   <contact-us/>
 </template>
\ No newline at end of file
diff --git a/services/frontend/pages/kurzy.vue b/services/frontend/pages/kurzy.vue
index 96c0baf..ec4a1b4 100644
--- a/services/frontend/pages/kurzy.vue
+++ b/services/frontend/pages/kurzy.vue
@@ -1,11 +1,10 @@
+<template>
+
+</template>
 <script setup lang="ts">
 
 </script>
 
-<template>
-
-</template>
-
 <style scoped>
 
 </style>
\ No newline at end of file
diff --git a/services/frontend/pages/treneri.vue b/services/frontend/pages/treneri.vue
new file mode 100644
index 0000000..8ec9bc7
--- /dev/null
+++ b/services/frontend/pages/treneri.vue
@@ -0,0 +1,70 @@
+<template>
+  <h1>Naši trenéři a lektoři</h1>
+  <v-card>
+    <v-row v-for="(lector, index) in lectors" :key="index">
+      <v-col
+      style="padding: 0;" >
+        <v-img
+          :src="lector.background"
+          cover
+        >
+          <v-col style="text-align: center" cols="12" md="4">
+            <v-avatar
+              color="grey"
+              rounded="1"
+              size="300"
+              style="margin: 30px"
+            >
+              <v-img :src="lector.img" cover></v-img>
+            </v-avatar>
+            <h2>{{lector.name}}</h2>
+            <div class="subtitle">{{ lector.desc }}</div>
+            <v-divider :thickness="3" />
+            <h4>{{lector.story}}</h4>
+          </v-col>
+        </v-img>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+<script setup lang="ts">
+const lectors = [
+  {
+    name: "Ondřej Gilar",
+    img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg",
+    desc: "Trenér - latinskoamerické tance a Pro-AM",
+    background: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg",
+    story: "Něco velice zajímavého sepsané dlouhým textem, který snad někdo přečte, protože je to určitě zajímavé. Nová koloběžka bylo vrhnuta do řeky hned vedle pískoviště na počítači.",
+  },
+  {
+    name: "Leona Hruštincová",
+    img: "https://cdn.vuetifyjs.com/images/profiles/marcus.jpg",
+    desc: "Lektorka - tance pro děti",
+    background: "https://cdn11.bigcommerce.com/s-07991/product_images/uploaded_images/latin-dance.jpg",
+    story: "Něco velice zajímavého sepsané dlouhým textem, který snad někdo přečte, protože je to určitě zajímavé. Nová koloběžka bylo vrhnuta do řeky hned vedle pískoviště na počítači.",
+  },
+]
+</script>
+
+<style scoped>
+h1 {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 3rem;
+  color: #333; /* Dark gray */
+  text-align: center;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+  margin-top: -2rem;
+}
+
+h2 {
+  font-family: 'Playfair Display', serif;
+  font-size: 2rem;
+  color: #666; /* Light gray */
+}
+
+.subtitle {
+  font-family: 'Playfair Display', serif; /* Or a similar elegant font */
+  font-size: 1.5rem;
+  color: #333; /* Dark gray */
+}
+</style>
\ No newline at end of file