176 lines
3.6 KiB
Vue
Executable File
176 lines
3.6 KiB
Vue
Executable File
<template>
|
|
<div class="chat-container">
|
|
<header class="header">
|
|
<router-link to="/" class="app-brand app-brand-link">
|
|
<span class="app-brand-mark">S</span>
|
|
<div class="app-brand-copy">
|
|
<span class="app-brand-eyebrow">YpChat</span>
|
|
<h1>{{ landing.heading }}</h1>
|
|
</div>
|
|
</router-link>
|
|
<HeaderAdBanner />
|
|
</header>
|
|
|
|
<main class="content-page">
|
|
<section class="landing-hero">
|
|
<p class="eyebrow">YPChat</p>
|
|
<h2>{{ landing.heading }}</h2>
|
|
<p>{{ landing.intro }}</p>
|
|
<div class="action-row">
|
|
<router-link
|
|
v-for="link in landing.links"
|
|
:key="link.to"
|
|
:to="link.to"
|
|
>
|
|
{{ link.label }}
|
|
</router-link>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="topic-grid" aria-label="YpChat Vorteile">
|
|
<article
|
|
v-for="section in landing.sections"
|
|
:key="section.title"
|
|
class="topic-card"
|
|
>
|
|
<h3>{{ section.title }}</h3>
|
|
<p>{{ section.text }}</p>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="support-section">
|
|
<h3>Weitere Themen bei YPChat</h3>
|
|
<p>
|
|
Entdecke weitere Bereiche rund um den Chat-Einstieg, neue Kontakte und sichere Gespräche.
|
|
</p>
|
|
<ul>
|
|
<li><router-link to="/">Chat starten</router-link></li>
|
|
<li><router-link to="/single-chat-ohne-anmeldung">Single Chat ohne Anmeldung</router-link></li>
|
|
<li><router-link to="/single-treff-chat">Single Treff Chat</router-link></li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
|
|
<ImprintContainer />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import HeaderAdBanner from '../components/HeaderAdBanner.vue';
|
|
import ImprintContainer from '../components/ImprintContainer.vue';
|
|
|
|
const route = useRoute();
|
|
const landing = computed(() => route.meta.landing || {
|
|
heading: 'YpChat',
|
|
intro: 'Kostenloser Single Chat fuer private Gespraeche und neue Kontakte.',
|
|
sections: [],
|
|
links: [{ to: '/', label: 'Chat starten' }]
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content-page {
|
|
max-width: 1020px;
|
|
margin: 0 auto;
|
|
padding: 20px 14px 36px;
|
|
line-height: 1.6;
|
|
color: #344038;
|
|
}
|
|
|
|
.landing-hero,
|
|
.support-section {
|
|
border: 1px solid #d7dfd9;
|
|
border-radius: 12px;
|
|
background: #ffffff;
|
|
padding: 18px;
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0 0 6px;
|
|
color: #637067;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.landing-hero h2 {
|
|
margin: 0 0 10px;
|
|
color: #18201b;
|
|
}
|
|
|
|
.landing-hero p {
|
|
max-width: 760px;
|
|
}
|
|
|
|
.action-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.action-row a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 38px;
|
|
padding: 0 14px;
|
|
border-radius: 8px;
|
|
background: #245c3a;
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.action-row a:not(:first-child) {
|
|
background: #edf4ef;
|
|
color: #245c3a;
|
|
border: 1px solid #bfd5c4;
|
|
}
|
|
|
|
.topic-grid {
|
|
margin: 16px 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.topic-card {
|
|
border: 1px solid #d7dfd9;
|
|
border-radius: 12px;
|
|
background: #ffffff;
|
|
padding: 14px;
|
|
}
|
|
|
|
.topic-card h3,
|
|
.support-section h3 {
|
|
margin: 0 0 8px;
|
|
color: #18201b;
|
|
}
|
|
|
|
.topic-card p,
|
|
.support-section p {
|
|
margin: 0;
|
|
}
|
|
|
|
.support-section ul {
|
|
margin: 12px 0 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.support-section a {
|
|
color: #245c3a;
|
|
}
|
|
|
|
.app-brand-link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.topic-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|