Update SEO and meta tags in index.html, enhance robots.txt for better crawling control, and improve sitemap.xml priorities. Refactor blog routes to include SEO metadata and adjust blog view for canonical URLs. Implement blog URL generation in BlogListView and apply SEO dynamically in BlogView.

frontend/src/views/public/VocabLandingView.vue

@@ -0,0 +1,102 @@
+<template>
+  <section class="marketing-page">
+    <div class="hero">
+      <p class="eyebrow">Sprachen online lernen</p>
+      <h1>Der Vokabeltrainer auf YourPart kombiniert Lernen, Kurse und Uebungen in einer Plattform.</h1>
+      <p class="lead">
+        Arbeite mit interaktiven Lektionen, erweitere deinen Wortschatz und nutze strukturierte Inhalte fuer einen
+        motivierenden Lernfluss direkt im Browser.
+      </p>
+      <router-link class="cta" to="/">Kostenlos starten</router-link>
+    </div>
+
+    <div class="features">
+      <article>
+        <h2>Interaktive Kurse</h2>
+        <p>Kurse, Lektionen und Uebungen helfen beim systematischen Aufbau neuer Sprachkenntnisse.</p>
+      </article>
+      <article>
+        <h2>Praxisorientiert</h2>
+        <p>Wortschatz, Grammatik und Wiederholung werden auf eine alltagstaugliche Lernroutine ausgerichtet.</p>
+      </article>
+      <article>
+        <h2>Teil einer Community</h2>
+        <p>Der Sprachbereich ist in eine groessere Community-Plattform mit Blogs, Forum und Chat eingebettet.</p>
+      </article>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.marketing-page {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 48px 20px 72px;
+  color: #1f2f1d;
+}
+
+.hero {
+  padding: 32px;
+  border-radius: 20px;
+  background:
+    radial-gradient(circle at right top, rgba(255, 255, 255, 0.78), transparent 30%),
+    linear-gradient(135deg, #eef6c8 0%, #bddd74 45%, #6b9d34 100%);
+  box-shadow: 0 20px 60px rgba(60, 87, 28, 0.18);
+}
+
+.eyebrow {
+  margin: 0 0 12px;
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.hero h1 {
+  margin: 0;
+  font-size: clamp(2rem, 4vw, 3.5rem);
+  line-height: 1.08;
+}
+
+.lead {
+  max-width: 760px;
+  margin: 20px 0 0;
+  font-size: 1.1rem;
+  line-height: 1.65;
+}
+
+.cta {
+  display: inline-block;
+  margin-top: 24px;
+  padding: 12px 20px;
+  border-radius: 999px;
+  background: #1f2f1d;
+  color: #fff;
+  text-decoration: none;
+  font-weight: 700;
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 18px;
+  margin-top: 28px;
+}
+
+.features article {
+  padding: 24px;
+  border-radius: 18px;
+  background: #f7fbe9;
+  border: 1px solid rgba(31, 47, 29, 0.08);
+}
+
+.features h2 {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.features p {
+  margin: 0;
+  line-height: 1.65;
+}
+</style>