Verbesserung der Benutzeroberfläche und Inhalte für den Single Chat

client/src/components/LoginForm.vue

@@ -2,9 +2,9 @@
   <div class="landing-login">
     <section class="landing-login-intro">
       <p class="landing-login-eyebrow">YpChat</p>
-      <h2>Direkt in den Chat</h2>
+      <h2>Singles kennenlernen, privat chatten</h2>
       <p class="landing-login-copy">
-        Kompakt, schnell und ohne Umwege. Erstelle dein Profil und starte sofort eine Unterhaltung.
+        Starte kostenlos mit einem Nicknamen. Alter, Geschlecht und Land genügen, damit du passende Kontakte finden und direkt schreiben kannst.
       </p>
       <div class="landing-login-features">
         <span>Weltweiter Chat</span>
@@ -63,6 +63,30 @@
         </div>
       </form>
     </section>
+
+    <section class="landing-login-guide" aria-label="Informationen zu YpChat">
+      <h2>So funktioniert der Single Chat</h2>
+      <div class="landing-login-guide-grid">
+        <article>
+          <h3>Kurz Profil anlegen</h3>
+          <p>Wähle einen Nicknamen und gib die nötigen Basisangaben an. Eine lange Registrierung ist nicht nötig.</p>
+        </article>
+        <article>
+          <h3>Neue Kontakte finden</h3>
+          <p>Suche nach Singles und beginne private Gespräche. Bilder kannst du direkt im Chat austauschen.</p>
+        </article>
+        <article>
+          <h3>Sicher chatten</h3>
+          <p>Nutze einen Nicknamen, teile keine sensiblen Daten und blockiere oder melde Kontakte bei Bedarf.</p>
+        </article>
+      </div>
+      <p class="landing-login-guide-links">
+        <router-link to="/single-chat-ohne-anmeldung">Chat ohne Anmeldung</router-link>
+        <router-link to="/single-treff-chat">Singles kennenlernen</router-link>
+        <router-link to="/ratgeber/erste-nachricht">Tipps für die erste Nachricht</router-link>
+        <router-link to="/sicherheit">Sicher chatten</router-link>
+      </p>
+    </section>
   </div>
 </template>
 
@@ -182,6 +206,56 @@ function handleSubmit() {
 </script>
 
 <style scoped>
+.landing-login-guide {
+  grid-column: 1 / -1;
+  border: 1px solid #d7dfd9;
+  border-radius: 12px;
+  background: #ffffff;
+  padding: 18px;
+}
+
+.landing-login-guide h2,
+.landing-login-guide h3 {
+  color: #18201b;
+}
+
+.landing-login-guide h2 {
+  margin: 0 0 12px;
+}
+
+.landing-login-guide h3 {
+  margin: 0 0 6px;
+  font-size: 17px;
+}
+
+.landing-login-guide p {
+  margin: 0;
+}
+
+.landing-login-guide-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.landing-login-guide-grid article {
+  border: 1px solid #d7dfd9;
+  border-radius: 10px;
+  padding: 14px;
+}
+
+.landing-login-guide-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  margin-top: 16px !important;
+}
+
+.landing-login-guide-links a {
+  color: #245c3a;
+  font-weight: 700;
+}
+
 .landing-login {
   width: 80%;
   max-width: 1400px;
@@ -366,5 +440,9 @@ function handleSubmit() {
   .landing-login-intro h2 {
     font-size: 24px;
   }
+
+  .landing-login-guide-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>

client/src/views/ChatView.vue

@@ -159,7 +159,7 @@
           <span class="app-brand-mark">Y</span>
           <div class="app-brand-copy">
             <span class="app-brand-eyebrow">YpChat</span>
-            <h1>Chat</h1>
+            <h1>Kostenloser Single Chat</h1>
           </div>
         </div>
         <HeaderAdBanner />

client/src/views/SeoLandingView.vue

@@ -39,14 +39,12 @@
       </section>
 
       <section class="support-section">
-        <h3>Passende Themen im Single Chat</h3>
+        <h3>Weitere Themen bei YPChat</h3>
         <p>
-          Viele Nutzer suchen nach einem kostenlosen Single Chat, einem Chat ohne lange Anmeldung oder einem Single Treff
-          fuer neue Kontakte. YpChat buendelt diese Einstiege auf einer Plattform: schnell starten, privat schreiben,
-          respektvoll bleiben.
+          Entdecke weitere Bereiche rund um den Chat-Einstieg, neue Kontakte und sichere Gespräche.
         </p>
         <ul>
-          <li><router-link to="/kostenloser-single-chat">Kostenloser Single Chat</router-link></li>
+          <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>

server/routes-seo.js

@@ -395,18 +395,10 @@ for (const locale of SEO_LOCALES) {
 }
 
 function buildSitemapXml() {
-  const currentDate = new Date().toISOString().split('T')[0];
-  const urls = Object.entries(seoData)
-    .map(([route, meta]) => {
-      const priority = route === '/' ? '1.0' : '0.8';
-      const changefreq = route === '/' ? 'daily' : 'weekly';
-      return `  <url>
+  const urls = Object.values(seoData)
+    .map((meta) => `  <url>
     <loc>${meta.ogUrl}</loc>
-    <lastmod>${currentDate}</lastmod>
-    <changefreq>${changefreq}</changefreq>
-    <priority>${priority}</priority>
-  </url>`;
-    })
+  </url>`)
     .join('\n');
 
   return `<?xml version="1.0" encoding="UTF-8"?>
@@ -461,6 +453,9 @@ function upsertJsonLd(html, schema) {
 
 function upsertHreflangLinks(html, route) {
   const cleaned = html.replace(/<link\s+rel="alternate"\s+hreflang="[^"]+"\s+href="[^"]*"\s*>\n?/g, '');
+  const isLocalizedHome = route === '/' || SEO_LOCALES.some((locale) => `/${locale.code}` === route);
+  if (!isLocalizedHome) return cleaned;
+
   const links = SEO_LOCALES.map(
     (locale) => `  <link rel="alternate" hreflang="${locale.code}" href="${SITE_URL}/${locale.code}">`
   );
@@ -503,6 +498,21 @@ function buildLocalizedLandingContent(route, __dirname) {
 </section>`;
 }
 
+function buildHomeSeoContent() {
+  return `<section lang="de" style="max-width:960px;margin:24px auto;padding:0 16px;font:400 16px/1.6 sans-serif;color:#344038;">
+  <p style="font:700 12px/1.2 sans-serif;color:#637067;text-transform:uppercase;margin:0 0 6px;">YPChat</p>
+  <h1 style="font:700 34px/1.15 sans-serif;color:#18201b;margin:0 0 12px;">Kostenloser Single Chat ohne Anmeldung</h1>
+  <p style="margin:0 0 18px;max-width:760px;">Bei YPChat kannst du kostenlos neue Singles kennenlernen, privat schreiben und direkt mit einem Nicknamen starten. Für den Einstieg wählst du Nickname, Alter, Geschlecht und Land – eine lange Registrierung ist nicht nötig.</p>
+  <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;">
+    <article style="border:1px solid #d7dfd9;border-radius:12px;padding:14px;background:#fff;"><h2 style="font:600 20px/1.25 sans-serif;color:#18201b;margin:0 0 8px;">Singles kennenlernen</h2><p style="margin:0;">Suche nach passenden Kontakten und beginne Gespräche in deinem Tempo.</p></article>
+    <article style="border:1px solid #d7dfd9;border-radius:12px;padding:14px;background:#fff;"><h2 style="font:600 20px/1.25 sans-serif;color:#18201b;margin:0 0 8px;">Privat und respektvoll chatten</h2><p style="margin:0;">Private Unterhaltungen, Bilder im Chat sowie Blockier- und Meldefunktionen geben dir Kontrolle über deine Kontakte.</p></article>
+    <article style="border:1px solid #d7dfd9;border-radius:12px;padding:14px;background:#fff;"><h2 style="font:600 20px/1.25 sans-serif;color:#18201b;margin:0 0 8px;">Ohne lange Anmeldung starten</h2><p style="margin:0;">Lege ein kurzes Profil an und öffne den Chat direkt im Browser.</p></article>
+  </div>
+  <section style="margin-top:24px;"><h2 style="font:600 24px/1.25 sans-serif;color:#18201b;margin:0 0 8px;">Häufige Fragen zum kostenlosen Single Chat</h2><h3 style="font:600 18px/1.3 sans-serif;color:#18201b;margin:16px 0 4px;">Ist der Einstieg kostenlos?</h3><p style="margin:0;">Ja. Du kannst dein Profil starten und den Chat kostenlos nutzen.</p><h3 style="font:600 18px/1.3 sans-serif;color:#18201b;margin:16px 0 4px;">Was brauche ich für den Start?</h3><p style="margin:0;">Ein Nickname sowie Alter, Geschlecht und Land genügen für den Einstieg.</p></section>
+  <nav aria-label="Weitere Themen" style="margin-top:22px;"><strong style="color:#18201b;">Mehr zu YPChat:</strong> <a href="/single-chat-ohne-anmeldung">Chat ohne Anmeldung</a> · <a href="/single-treff-chat">Singles kennenlernen im Single Treff Chat</a> · <a href="/ratgeber/erste-nachricht">Tipps für die erste Nachricht</a> · <a href="/sicherheit">Sicher und anonym chatten</a></nav>
+</section>`;
+}
+
 function buildSeoLandingContent(route) {
   const page = landingPages.find((entry) => entry.route === route);
   if (!page) return '';
@@ -519,7 +529,7 @@ function buildSeoLandingContent(route) {
   <h1 style="font:700 34px/1.15 sans-serif;color:#18201b;margin:0 0 12px;">${escapeHtml(page.heading)}</h1>
   <p style="font:400 16px/1.6 sans-serif;color:#344038;margin:0 0 18px;max-width:760px;">${escapeHtml(page.intro)}</p>
   <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;">${sectionMarkup}</div>
-  <p style="font:400 15px/1.6 sans-serif;color:#344038;margin:18px 0 0;">Weitere Einstiege: <a href="/kostenloser-single-chat">kostenloser Single Chat</a>, <a href="/single-chat-ohne-anmeldung">Single Chat ohne Anmeldung</a>, <a href="/single-treff-chat">Single Treff Chat</a>.</p>
+  <p style="font:400 15px/1.6 sans-serif;color:#344038;margin:18px 0 0;">Entdecke weitere Bereiche von YPChat: <a href="/">Chat starten</a>, <a href="/single-chat-ohne-anmeldung">Chat ohne Anmeldung</a>, <a href="/single-treff-chat">Single Treff Chat</a> und <a href="/ratgeber">Ratgeber für bessere Gespräche</a>.</p>
 </section>`;
 }
 
@@ -557,10 +567,7 @@ function generateHTML(route, meta, __dirname) {
   html = upsertHreflangLinks(html, route);
 
   if (route === '/') {
-    const deLanding = buildLocalizedLandingContent('/de', __dirname);
-    if (deLanding) {
-      html = html.replace('<div id="app"></div>', `<div id="app">${deLanding}</div>`);
-    }
+    html = html.replace('<div id="app"></div>', `<div id="app">${buildHomeSeoContent()}</div>`);
   }
 
   if (SEO_LOCALES.some((locale) => `/${locale.code}` === route)) {