seo-improvements

client/src/views/PrivacyView.vue

@@ -14,8 +14,8 @@
     <main class="content-page">
       <h2>Datenschutzerklärung für Website und App</h2>
       <p>
-        Diese Datenschutzerklärung gilt für die Website und die Android-App von SingleChat beziehungsweise YPChat unter
-        der Domain <strong>www.ypchat.net</strong>.
+        Diese Datenschutzerklärung gilt für die Website und die Android-App von SingleChat unter
+        der Domain <strong>www.single-chat.net</strong>.
       </p>
 
       <h3>1. Verantwortlicher</h3>

client/src/views/SeoLandingView.vue

@@ -0,0 +1,177 @@
+<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">SingleChat</span>
+          <h1>{{ landing.heading }}</h1>
+        </div>
+      </router-link>
+      <HeaderAdBanner />
+    </header>
+
+    <main class="content-page">
+      <section class="landing-hero">
+        <p class="eyebrow">Single-Chat.net</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="SingleChat 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>Passende Themen im Single Chat</h3>
+        <p>
+          Viele Nutzer suchen nach einem kostenlosen Single Chat, einem Chat ohne lange Anmeldung oder einem Single Treff
+          fuer neue Kontakte. SingleChat buendelt diese Einstiege auf einer Plattform: schnell starten, privat schreiben,
+          respektvoll bleiben.
+        </p>
+        <ul>
+          <li><router-link to="/kostenloser-single-chat">Kostenloser Single Chat</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: 'SingleChat',
+  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>