Style start pages
This commit is contained in:
Christian Cueni
parent
3137e25aaf
commit
9eee55cbbf
|
|
@ -0,0 +1,16 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="border-t border-b-gray-300 bg-none sm:bg-[url('/static/icons/vbv_questionmark.svg')] sm:bg-[length:400px_auto] sm:bg-right sm:bg-no-repeat"
|
||||
>
|
||||
<div class="container-large flex flex-row pb-4 lg:pb-10">
|
||||
<div class="my-32">
|
||||
<h2 class="mb-3">{{ $t("Hast du Fragen?") }}</h2>
|
||||
<p class="non-italic">
|
||||
<slot></slot>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main class="bg-gray-200 lg:px-12 lg:py-12">
|
||||
<div class="container-medium">
|
||||
<h2 class="mb-8 text-blue-900">{{ $t("a.Überbetriebliche Kurse") }}</h2>
|
||||
<router-link
|
||||
class="btn-primary"
|
||||
:to="{ name: 'accountCreate', params: { courseType: 'uk' } }"
|
||||
>
|
||||
{{ $t("a.Jetzt mit Lehrgang starten") }}
|
||||
</router-link>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main class="bg-gray-200 lg:px-12 lg:py-12">
|
||||
<div class="container-medium">
|
||||
<router-link
|
||||
class="btn-primary"
|
||||
:to="{ name: 'accountCreate', params: { courseType: 'vv-de' } }"
|
||||
>
|
||||
VV in Deutsch
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="container-medium">
|
||||
<router-link
|
||||
class="btn-primary"
|
||||
:to="{ name: 'accountCreate', params: { courseType: 'vv-fr' } }"
|
||||
>
|
||||
VV in Französisch
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="container-medium">
|
||||
<router-link
|
||||
class="btn-primary"
|
||||
:to="{ name: 'accountCreate', params: { courseType: 'vv-it' } }"
|
||||
>
|
||||
VV in Italienisch
|
||||
</router-link>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { useTranslation } from "i18next-vue";
|
||||
|
||||
const { t } = useTranslation();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-gray-200">
|
||||
|
|
@ -15,8 +19,8 @@
|
|||
<li class="mb-16 flex items-center gap-x-8">
|
||||
<img
|
||||
class="hidden h-72 md:block"
|
||||
src="../assets/images/mood_vv.jpg"
|
||||
alt="Versicherungsvermittler"
|
||||
src="../../assets/images/mood_vv.jpg"
|
||||
:alt="t('a.Versicherungsvermittler/-in')"
|
||||
/>
|
||||
<div class="space-y-2">
|
||||
<h4 class="text-lg font-bold">
|
||||
|
|
@ -42,8 +46,8 @@
|
|||
</div>
|
||||
<img
|
||||
class="hidden h-72 md:block"
|
||||
src="../assets/images/mood_uk.jpg"
|
||||
alt="Versicherungsvermittler"
|
||||
src="../../assets/images/mood_uk.jpg"
|
||||
:alt="t('start.ukTitle')"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<script setup lang="ts">
|
||||
import StartPageFooter from "@/components/start/StartPageFooter.vue";
|
||||
import { useTranslation } from "i18next-vue";
|
||||
|
||||
const { t } = useTranslation();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-10 bg-gray-200 pb-4 lg:pb-10">
|
||||
<div class="container-large">
|
||||
<nav class="py-4">
|
||||
<router-link
|
||||
class="btn-text inline-flex items-center pl-0"
|
||||
:to="{ name: 'start' }"
|
||||
>
|
||||
<it-icon-arrow-left />
|
||||
<span>{{ $t("general.back") }}</span>
|
||||
</router-link>
|
||||
</nav>
|
||||
<h1 class="mb-4 lg:mb-8" data-cy="hf-title">
|
||||
{{ $t("a.Überbetriebliche Kurse") }}
|
||||
</h1>
|
||||
<p>{{ $t("start.ukDescription") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<main class="container-large pb-4 lg:pb-10">
|
||||
<div class="flex flex-row gap-10">
|
||||
<img
|
||||
class="hidden object-cover md:block md:h-[350px] md:w-[350px] lg:h-[500px] lg:w-[500px]"
|
||||
src="../../assets/images/mood_uk.jpg"
|
||||
:alt="t('start.ukTitle')"
|
||||
/>
|
||||
<div>
|
||||
<div class="mx-auto mb-8 mt-0 p-0 lg:mt-8 lg:p-4">
|
||||
<h2 class="mb-4 text-2xl font-semibold">
|
||||
So startest du mit diesem Lehrgang:
|
||||
</h2>
|
||||
<ol class="circle-numbered-list">
|
||||
<li>
|
||||
<span class="font-bold">{{ $t("a.Konto erstellen") }}:</span>
|
||||
{{ $t("a.Damit du myVBV nutzen kannst, brauchst du ein Konto.") }}
|
||||
</li>
|
||||
<li class="relative pl-8">
|
||||
<span class="font-bold">{{ $t("a.Profil ergänzen") }}:</span>
|
||||
{{
|
||||
$t("Füge dein Profilbild hinzu und ergänze die fehlenden Angaben.")
|
||||
}}
|
||||
</li>
|
||||
<li class="relative pl-8">
|
||||
<span class="font-bold">{{ $t("a.An Durchführung teilnehmen") }}:</span>
|
||||
{{
|
||||
$t("Sobald du einer Durchführung zugewiesen bist, ist alles bereit.")
|
||||
}}
|
||||
</li>
|
||||
</ol>
|
||||
<div class="mt-4 flex space-x-2">
|
||||
<p>{{ $t("Sprache wählen und Lehrgang starten") }}:</p>
|
||||
<div>
|
||||
<router-link
|
||||
class="btn-primary"
|
||||
:to="{ name: 'accountCreate', params: { courseType: 'uk' } }"
|
||||
>
|
||||
{{ $t("a.Jetzt mit Lehrgang starten") }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<StartPageFooter>
|
||||
{{ $t("uk.contact.title") }}
|
||||
<br />
|
||||
{{ $t("uk.contact.team") }}
|
||||
<br />
|
||||
{{ $t("uk.contact.address") }}
|
||||
<br />
|
||||
<a class="link" href="mailto:uek-support@vbv-afa.ch">uek-support@vbv-afa.ch</a>
|
||||
</StartPageFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<script setup lang="ts">
|
||||
import { useTranslation } from "i18next-vue";
|
||||
import StartPageFooter from "@/components/start/StartPageFooter.vue";
|
||||
|
||||
const { t } = useTranslation();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-10 bg-gray-200 pb-4 lg:pb-10">
|
||||
<div class="container-large">
|
||||
<nav class="py-4">
|
||||
<router-link
|
||||
class="btn-text inline-flex items-center pl-0"
|
||||
:to="{ name: 'start' }"
|
||||
>
|
||||
<it-icon-arrow-left />
|
||||
<span>{{ $t("general.back") }}</span>
|
||||
</router-link>
|
||||
</nav>
|
||||
<h1 class="mb-4 lg:mb-8" data-cy="hf-title">
|
||||
{{ $t("a.Versicherungsvermittler/-in") }}
|
||||
</h1>
|
||||
<p>{{ $t("start.vvDescription") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<main class="container-large pb-4 lg:pb-10">
|
||||
<div class="flex flex-row gap-10">
|
||||
<img
|
||||
class="hidden object-cover md:block md:h-[350px] md:w-[350px] lg:h-[500px] lg:w-[500px]"
|
||||
src="../../assets/images/mood_vv.jpg"
|
||||
:alt="t('a.Versicherungsvermittler/-in')"
|
||||
/>
|
||||
<div>
|
||||
<div class="mx-auto mb-8 mt-0 p-0 lg:mt-8 lg:p-4">
|
||||
<h2 class="mb-4 text-2xl font-semibold">
|
||||
So startest du mit diesem Lehrgang:
|
||||
</h2>
|
||||
<ol class="circle-numbered-list">
|
||||
<li>
|
||||
<span class="font-bold">{{ $t("a.Konto erstellen") }}:</span>
|
||||
{{ $t("a.Damit du myVBV nutzen kannst, brauchst du ein Konto.") }}
|
||||
</li>
|
||||
<li class="relative pl-8">
|
||||
<span class="font-bold">{{ $t("a.Profil ergänzen") }}:</span>
|
||||
{{
|
||||
$t("Füge dein Profilbild hinzu und ergänze die fehlenden Angaben.")
|
||||
}}
|
||||
</li>
|
||||
<li class="relative pl-8">
|
||||
<span class="font-bold">{{ $t("a.Lehrgang kaufen") }}:</span>
|
||||
{{
|
||||
$t(
|
||||
"Der Preis für den Lehrgang «Versicherungsvermittler-/in VBV» beträgt CHF 300 exkl. MWSt.. Mit dem Kauf erhältst du Zugang zum Lernpfad und den Lernmedien."
|
||||
)
|
||||
}}
|
||||
</li>
|
||||
</ol>
|
||||
<div class="mt-4">
|
||||
<p class="mb-2">{{ $t("Sprache wählen und Lehrgang starten") }}:</p>
|
||||
<div class="flex flex-col gap-4 md:flex-row">
|
||||
<router-link
|
||||
class="btn-primary"
|
||||
:to="{ name: 'accountCreate', params: { courseType: 'vv-de' } }"
|
||||
>
|
||||
{{ $t("a.Deutsch") }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="btn-primary"
|
||||
:to="{ name: 'accountCreate', params: { courseType: 'vv-fr' } }"
|
||||
>
|
||||
{{ $t("a.Franzosisch") }}
|
||||
</router-link>
|
||||
<router-link
|
||||
class="btn-primary"
|
||||
:to="{ name: 'accountCreate', params: { courseType: 'vv-it' } }"
|
||||
>
|
||||
{{ $t("a.Italienisch") }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<StartPageFooter>
|
||||
{{ $t("uk.contact.title") }}
|
||||
<br />
|
||||
{{ $t("vv.contact.team") }}
|
||||
<br />
|
||||
{{ $t("uk.contact.address") }}
|
||||
<br />
|
||||
<a class="link" href="mailto:vermittler@vbv-afa.ch">vermittler@vbv-afa.ch</a>
|
||||
</StartPageFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import GuestStartPage from "@/pages/GuestStartPage.vue";
|
||||
import LoginPage from "@/pages/LoginPage.vue";
|
||||
import UKStartPage from "@/pages/UKStartPage.vue";
|
||||
import VVStartPage from "@/pages/VVStartPage.vue";
|
||||
import DashboardPage from "@/pages/dashboard/DashboardPage.vue";
|
||||
import GuestStartPage from "@/pages/start/GuestStartPage.vue";
|
||||
import UKStartPage from "@/pages/start/UKStartPage.vue";
|
||||
import VVStartPage from "@/pages/start/VVStartPage.vue";
|
||||
import {
|
||||
handleCourseSessionAsQueryParam,
|
||||
handleCurrentCourseSession,
|
||||
|
|
@ -25,6 +25,7 @@ const router = createRouter({
|
|||
routes: [
|
||||
{
|
||||
path: "/start",
|
||||
name: "start",
|
||||
component: GuestStartPage,
|
||||
meta: {
|
||||
public: true,
|
||||
|
|
|
|||
|
|
@ -158,6 +158,27 @@ textarea {
|
|||
.btn-large-icon {
|
||||
@apply flex items-center px-6 py-3 text-xl font-bold;
|
||||
}
|
||||
|
||||
.circle-numbered-list {
|
||||
@apply my-8 list-outside list-decimal list-none pl-0;
|
||||
counter-reset: list-counter;
|
||||
}
|
||||
|
||||
.circle-numbered-list li {
|
||||
@apply relative mb-8 pl-10;
|
||||
counter-increment: list-counter;
|
||||
}
|
||||
|
||||
.circle-numbered-list li:last-of-type {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.circle-numbered-list li::before {
|
||||
content: counter(list-counter);
|
||||
@apply absolute left-0 flex h-6 w-6 items-center justify-center rounded-full border border-gray-500 text-sm;
|
||||
top: 1rem;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
|
|
|
|||
Loading…
Reference in New Issue