generated from JustScreaMy/ProjectTemplate
some finished components
This commit is contained in:
KUB0570
parent
5c649ae164
commit
499375a8e8
15 changed files with 569 additions and 117 deletions
|
|
@ -1,10 +1,68 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
</style>
|
||||||
55
services/frontend/components/Advantages.vue
Normal file
55
services/frontend/components/Advantages.vue
Normal file
|
|
@ -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>
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card>
|
|
||||||
<v-card-title>
|
|
||||||
<h1>Kontaktujte nás!</h1>
|
<h1>Kontaktujte nás!</h1>
|
||||||
</v-card-title>
|
<v-card>
|
||||||
<v-form v-model="valid" @submit="sendContact">
|
<v-form v-model="valid" @submit="sendContact">
|
||||||
<v-container>
|
<v-container>
|
||||||
<v-row>
|
<v-row>
|
||||||
|
|
@ -75,5 +73,13 @@ function sendContact() {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
</style>
|
||||||
|
|
@ -1,10 +1,84 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
</style>
|
||||||
|
|
@ -1,32 +1,75 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- <v-row>-->
|
<h1>Galerie</h1>
|
||||||
<!-- <template v-for="(image,imgIdx) in imageLayout" :key="imgIdx">-->
|
<v-row>
|
||||||
<!-- <v-col :cols="image.cols">-->
|
<v-col
|
||||||
<!-- <v-img-->
|
v-for="(photo, index) in photos"
|
||||||
<!-- :src="`https://picsum.photos/500/300?image=${image.cols * 20}`"-->
|
:key="index"
|
||||||
<!-- height="100%"-->
|
cols="4"
|
||||||
<!-- cover-->
|
style="padding: 0;"
|
||||||
<!-- ></v-img>-->
|
>
|
||||||
<!-- </v-col>-->
|
<v-img
|
||||||
|
:lazy-src="photo.src"
|
||||||
<!-- <v-col v-if="image.children" class="d-flex flex-column" cols="6">-->
|
:src="photo.src"
|
||||||
<!-- <v-row>-->
|
aspect-ratio="1"
|
||||||
<!-- <v-col v-for="(children,childIdx) in image.children" :key="childIdx" :cols="children.cols">-->
|
cover
|
||||||
<!-- <v-img-->
|
>
|
||||||
<!-- :src="`https://picsum.photos/500/300?image=${children.cols + childIdx}`"-->
|
<template v-slot:placeholder>
|
||||||
<!-- height="100%"-->
|
<v-row>
|
||||||
<!-- cover-->
|
<v-progress-circular
|
||||||
<!-- ></v-img>-->
|
color="grey-lighten-5"
|
||||||
<!-- </v-col>-->
|
indeterminate
|
||||||
<!-- </v-row>-->
|
></v-progress-circular>
|
||||||
<!-- </v-col>-->
|
</v-row>
|
||||||
<!-- </template>-->
|
</template>
|
||||||
<!-- </v-row>-->
|
</v-img>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
</style>
|
||||||
|
|
@ -1,10 +1,80 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
</style>
|
||||||
|
|
@ -1,9 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card>
|
|
||||||
<v-card-title>
|
|
||||||
<h1>Reference</h1>
|
<h1>Reference</h1>
|
||||||
</v-card-title>
|
|
||||||
<v-card-item>
|
|
||||||
<v-expansion-panels class="pa-4" variant="popout">
|
<v-expansion-panels class="pa-4" variant="popout">
|
||||||
<v-expansion-panel
|
<v-expansion-panel
|
||||||
v-for="(reference, id) in references"
|
v-for="(reference, id) in references"
|
||||||
|
|
@ -36,39 +32,44 @@
|
||||||
md="3"
|
md="3"
|
||||||
sm="5"
|
sm="5"
|
||||||
>
|
>
|
||||||
<strong v-html="reference.name" style="font-size: 20px"></strong>
|
<h2>{{ reference.name }}</h2>
|
||||||
<div>
|
<div class="subtitle">{{ reference.title }}</div>
|
||||||
<v-rating
|
|
||||||
readonly
|
|
||||||
:length="5"
|
|
||||||
:size="20"
|
|
||||||
:model-value="5"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-expansion-panel-title>
|
</v-expansion-panel-title>
|
||||||
|
|
||||||
<v-expansion-panel-text>
|
<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-text>
|
||||||
</v-expansion-panel>
|
</v-expansion-panel>
|
||||||
</v-expansion-panels>
|
</v-expansion-panels>
|
||||||
</v-card-item>
|
|
||||||
</v-card>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
const references = [
|
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",
|
name: "Pepík",
|
||||||
desc: "Dlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisek"
|
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",
|
name: "Franta",
|
||||||
desc: "Dlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisek"
|
desc: "Dlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisekDlouhý popisek"
|
||||||
},
|
},
|
||||||
|
|
@ -77,5 +78,26 @@ const references = [
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,71 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card>
|
|
||||||
<v-card-title>
|
|
||||||
<h1>Naši trenéři a lektoři</h1>
|
<h1>Naši trenéři a lektoři</h1>
|
||||||
</v-card-title>
|
<v-row style="margin-bottom: 2rem;">
|
||||||
<v-row>
|
<v-col class="text-center" cols="12" md="3" v-for="lector in lectors" :key="lector.id">
|
||||||
<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
|
|
||||||
>
|
|
||||||
<v-avatar
|
<v-avatar
|
||||||
color="grey"
|
color="none"
|
||||||
rounded="0"
|
rounded="1"
|
||||||
size="150"
|
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-avatar>
|
||||||
<v-list-item
|
<h2>{{lector.name}}</h2>
|
||||||
class="text-white"
|
<div class="subtitle">{{ lector.desc }}</div>
|
||||||
:subtitle="lector.desc"
|
|
||||||
:title="lector.name"
|
|
||||||
></v-list-item>
|
|
||||||
</v-img>
|
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-card>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const lectors = [
|
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: 1,
|
||||||
{id: 3, name: "Ondřej Gilar", desc: "Trenér - latinskoamerické tance a Pro-AM"},
|
name: "Ondřej Gilar",
|
||||||
{id: 4, name: "Leona Hruštincová", desc: "Lektorka - tance pro děti"},
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
</style>
|
||||||
|
|
@ -8,42 +8,42 @@
|
||||||
cols="12"
|
cols="12"
|
||||||
md="4"
|
md="4"
|
||||||
>
|
>
|
||||||
<strong>Kontakt</strong>
|
<h4>Kontakt</h4>
|
||||||
<v-divider />
|
<v-divider :thickness="3" />
|
||||||
<v-row><v-col>Tomáš Ožana</v-col></v-row>
|
<div class="footer-text">Tomáš Ožana</div>
|
||||||
<v-row><v-col>Zimmlerova 2893/47, Ostrava</v-col></v-row>
|
<div class="footer-text">Zimmlerova 2893/47, Ostrava</div>
|
||||||
<v-row><v-col>tanecniklub-ostrava@email.cz</v-col></v-row>
|
<div class="footer-text">tanecniklub-ostrava@email.cz</div>
|
||||||
<v-row><v-col>+420774908180</v-col></v-row>
|
<div class="footer-text">+420774908180</div>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col
|
<v-col
|
||||||
cols="12"
|
cols="12"
|
||||||
md="4"
|
md="4"
|
||||||
>
|
>
|
||||||
<strong>Tréningové hodiny</strong>
|
<h4>Tréningové hodiny</h4>
|
||||||
<v-divider />
|
<v-divider :thickness="3" />
|
||||||
<v-row><v-col>Pondělí:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
|
<div class="footer-text">Pondělí: <span class="timespan">16:30 - 18:30 (VS)</span></div>
|
||||||
<v-row><v-col>Úterý:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
|
<div class="footer-text">Úterý: <span class="timespan">16:30 - 18:30 (VS)</span></div>
|
||||||
<v-row><v-col>Středa:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
|
<div class="footer-text">Středa: <span class="timespan">16:30 - 18:30 (VS)</span></div>
|
||||||
<v-row><v-col>Čtvrtek:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
|
<div class="footer-text">Čtvrtek: <span class="timespan">16:30 - 18:30 (VS)</span></div>
|
||||||
<v-row><v-col>Pátek:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
|
<div class="footer-text">Pátek: <span class="timespan">16:30 - 18:30 (VS)</span></div>
|
||||||
<v-row><v-col>Sobota:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
|
<div class="footer-text">Sobota: <span class="timespan">16:30 - 18:30 (VS)</span></div>
|
||||||
<v-row><v-col>Neděle:</v-col><v-col>16:30 - 18:30 (VS)</v-col></v-row>
|
<div class="footer-text">Neděle: <span class="timespan">16:30 - 18:30 (VS)</span></div>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col
|
<v-col
|
||||||
cols="12"
|
cols="12"
|
||||||
md="4"
|
md="4"
|
||||||
>
|
>
|
||||||
<strong>Sociální sítě</strong>
|
<h4>Sociální sítě</h4>
|
||||||
<v-divider />
|
<v-divider :thickness="3" />
|
||||||
<!-- https://pictogrammers.com/library/mdi/icon/youtube/-->
|
<!-- https://pictogrammers.com/library/mdi/icon/youtube/-->
|
||||||
<span class="mdi mdi-facebook" style="font-size: 60px"></span>
|
<span class="mdi mdi-facebook" style="font-size: 60px"></span>
|
||||||
<span class="mdi mdi-instagram" 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>
|
<span class="mdi mdi-youtube" style="font-size: 60px"></span>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
<v-divider />
|
<v-divider :thickness="3" style="margin-top: 60px" />
|
||||||
<v-row>
|
<v-row>
|
||||||
<v-col
|
<v-col
|
||||||
style="text-align: left"
|
style="text-align: left"
|
||||||
|
|
@ -64,5 +64,28 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<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>
|
</style>
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
class="d-flex d-sm-none"
|
class="d-flex d-sm-none"
|
||||||
/>
|
/>
|
||||||
<span class="mdi mdi-dance-ballroom" style="font-size: 60px"></span>
|
<span class="mdi mdi-dance-ballroom" style="font-size: 60px"></span>
|
||||||
Taneční klub ostrava
|
Taneční klub Ostrava
|
||||||
<v-tabs
|
<v-tabs
|
||||||
v-model="tab"
|
v-model="tab"
|
||||||
align-with-title
|
align-with-title
|
||||||
|
|
|
||||||
|
|
@ -9,10 +9,3 @@
|
||||||
</v-app>
|
</v-app>
|
||||||
</v-layout>
|
</v-layout>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
10
services/frontend/pages/galerie.vue
Normal file
10
services/frontend/pages/galerie.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<template>
|
||||||
|
<gallery/>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -4,17 +4,19 @@
|
||||||
style="margin-top: -80px"
|
style="margin-top: -80px"
|
||||||
>
|
>
|
||||||
<div class="d-flex flex-column fill-height justify-center align-center text-white">
|
<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
|
Taneční klub Ostrava
|
||||||
</h1>
|
</h1>
|
||||||
<h4 class="subheading">
|
<h2 class="subheading">
|
||||||
Naučíme Vás tančit!
|
Naučíme Vás tančit!
|
||||||
</h4>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
</v-parallax>
|
</v-parallax>
|
||||||
|
<news />
|
||||||
|
<advantages/>
|
||||||
|
<courses />
|
||||||
|
<about />
|
||||||
<trainers/>
|
<trainers/>
|
||||||
<v-divider />
|
|
||||||
<references/>
|
<references/>
|
||||||
<v-divider />
|
|
||||||
<contact-us/>
|
<contact-us/>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -1,11 +1,10 @@
|
||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
70
services/frontend/pages/treneri.vue
Normal file
70
services/frontend/pages/treneri.vue
Normal file
|
|
@ -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>
|
||||||
Loading…
Reference in a new issue