feat: Update landing pages and SEO content for Bisaya and Falukant
- Enhanced the Bisaya learning landing page with new content and improved layout. - Added FAQ section to the Bisaya learning page addressing common questions. - Updated SEO metadata for Bisaya learning and Falukant pages to improve search visibility. - Revised descriptions and titles in multiple languages for consistency and clarity. - Improved styling and structure of the Falukant landing page, emphasizing gameplay features and user engagement.
This commit is contained in:
Torsten Schulz (local)
@@ -12,7 +12,7 @@
|
||||
"jsonLdDescription": "Online community nga adunay forum, chat, beginner bokabularyo (Bisaya/Aleman), Falukant ug minigames sa browser—walay installation."
|
||||
},
|
||||
"falukant": {
|
||||
"title": "Falukant - Libre nga medieval browser game (ekonomiya ug politika)",
|
||||
"title": "Falukant - Medieval browser game (ekonomiya ug politika)",
|
||||
"description": "Falukant: medieval nga browser builder game nga adunay komersyo, produksyon, politika, pamilya ug pag-uswag sa karakter—ekonomiya sim online sa YourPart nga walay install.",
|
||||
"keywords": "Falukant, browser game, builder, medieval, ekonomiya, ekonomiya sim, politika, libre, walay download, YourPart",
|
||||
"jsonLdDescription": "Medieval nga browser builder game nga adunay komersyo, politika, pamilya ug pag-uswag sa karakter.",
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
"jsonLdDescription": "Online-Community mit Forum, Chat, Vokabeltrainer (Anfängerkurse Bisaya/Deutsch), Falukant und Minispielen – ohne Installation."
|
||||
},
|
||||
"falukant": {
|
||||
"title": "Falukant - Kostenloses Mittelalter-Browsergame (Wirtschaft & Politik)",
|
||||
"description": "Falukant: mittelalterliches Browser-Aufbauspiel mit Handel, Produktion, Politik, Familie und Charakterentwicklung – Wirtschaftssimulation online spielen ohne Installation auf YourPart.",
|
||||
"title": "Falukant – Mittelalter-Browsergame für Wirtschaft & Politik | YourPart",
|
||||
"description": "Falukant ist ein mittelalterliches Browser-Aufbauspiel mit Handel, Produktion, Familie, Politik und Charakterentwicklung – direkt auf YourPart im Browser.",
|
||||
"keywords": "Falukant, Browsergame, Aufbauspiel, Mittelalterspiel, Wirtschaftsspiel, Wirtschaftssimulation, Politikspiel, kostenlos, ohne Download, YourPart",
|
||||
"jsonLdDescription": "Mittelalterliches Browser-Aufbauspiel mit Handel, Politik, Familie und Charakterentwicklung.",
|
||||
"jsonLdName": "Falukant"
|
||||
@@ -33,8 +33,8 @@
|
||||
"jsonLdName": "YourPart Vokabeltrainer"
|
||||
},
|
||||
"bisayaLearning": {
|
||||
"title": "Bisaya lernen online - Cebuano fuer Anfaenger | YourPart",
|
||||
"description": "Bisaya online lernen fuer deutschsprachige Anfaenger: Vokabeln, Satzmuster und Alltagssaetze fuer Familie, Reisen, Gesundheit und Gespraeche direkt im Browser ueben.",
|
||||
"title": "Bisaya lernen online: Cebuano für Anfänger | YourPart",
|
||||
"description": "Bisaya online lernen für deutschsprachige Anfänger: Vokabeln, Satzmuster und Alltagssätze für Familie, Reisen, Gesundheit und Gespräche im Browser üben.",
|
||||
"keywords": "Bisaya lernen, Cebuano lernen, Visaya lernen, Bisaya Vokabeln, Cebuano Anfaenger, Philippinen Sprache lernen, Bisaya Deutsch, Vokabeltrainer",
|
||||
"jsonLdDescription": "Online-Kurs fuer deutschsprachige Anfaenger, die Bisaya/Cebuano mit Alltagssaetzen und Vokabeltraining lernen wollen.",
|
||||
"jsonLdName": "Bisaya lernen fuer deutschsprachige Anfaenger"
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
"jsonLdDescription": "Online community with forums, chat, beginner vocabulary courses (Bisaya/German), Falukant and browser minigames—no install required."
|
||||
},
|
||||
"falukant": {
|
||||
"title": "Falukant - Free medieval browser game (economy & politics)",
|
||||
"title": "Falukant - Medieval browser game (economy & politics)",
|
||||
"description": "Falukant: medieval browser builder game with trade, production, politics, family and character progression—play this economy sim online with no install on YourPart.",
|
||||
"keywords": "Falukant, browser game, builder game, medieval game, economy game, economy sim, politics game, free, no download, YourPart",
|
||||
"jsonLdDescription": "Medieval browser builder game with trade, politics, family and character progression.",
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
"jsonLdDescription": "Comunidad online con foro, chat, cursos de vocabulario para principiantes (bisaya/alemán), Falukant y minijuegos—sin instalación."
|
||||
},
|
||||
"falukant": {
|
||||
"title": "Falukant - Juego medieval gratis en el navegador (economía y política)",
|
||||
"title": "Falukant - Juego medieval en el navegador (economía y política)",
|
||||
"description": "Falukant: juego de construcción medieval con comercio, producción, política, familia y progresión—simulación económica online sin instalación en YourPart.",
|
||||
"keywords": "Falukant, juego navegador, construcción, medieval, economía, simulación económica, política, gratis, sin descarga, YourPart",
|
||||
"jsonLdDescription": "Juego de construcción medieval en el navegador con comercio, política, familia y progresión.",
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
"jsonLdDescription": "Communauté en ligne avec forum, chat, cours de vocabulaire débutants (bisaya/allemand), Falukant et mini-jeux—sans installation."
|
||||
},
|
||||
"falukant": {
|
||||
"title": "Falukant - Jeu médiéval gratuit dans le navigateur (économie et politique)",
|
||||
"title": "Falukant - Jeu médiéval dans le navigateur (économie et politique)",
|
||||
"description": "Falukant : jeu de construction médiéval avec commerce, production, politique, famille et progression—simulation économique en ligne sans installation sur YourPart.",
|
||||
"keywords": "Falukant, jeu navigateur, construction, médiéval, économie, simulation économique, politique, gratuit, sans téléchargement, YourPart",
|
||||
"jsonLdDescription": "Jeu de construction par navigateur médiéval avec développement du commerce, de la politique, de la famille et du personnage.",
|
||||
|
||||
@@ -188,6 +188,36 @@ export function buildRouteJsonLd(route, t, uiLocale) {
|
||||
name: DEFAULT_SITE_NAME,
|
||||
},
|
||||
},
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
mainEntity: [
|
||||
{
|
||||
'@type': 'Question',
|
||||
name: 'Was für ein Spiel ist Falukant?',
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: 'Falukant ist ein mittelalterliches Browser-Aufbauspiel mit Wirtschaft, Familie, Charakterentwicklung und gesellschaftlichen Entscheidungen.',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Question',
|
||||
name: 'Kann ich Falukant ohne Installation spielen?',
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: 'Ja. Falukant gehört zu YourPart und wird im Browser genutzt; eine separate Spielinstallation ist nicht nötig.',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Question',
|
||||
name: 'Was mache ich am Anfang in Falukant?',
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: 'Nach der Anmeldung legst du eine Figur an. Danach kannst du dich mit deinem Besitz, wirtschaftlichen Entscheidungen und dem Leben deiner Familie beschäftigen.',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@@ -234,6 +264,36 @@ export function buildRouteJsonLd(route, t, uiLocale) {
|
||||
sameAs: buildAbsoluteUrl('/'),
|
||||
},
|
||||
},
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'FAQPage',
|
||||
mainEntity: [
|
||||
{
|
||||
'@type': 'Question',
|
||||
name: 'Ist Bisaya dasselbe wie Cebuano?',
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: 'Die Begriffe werden im Alltag oft ähnlich verwendet. Der YourPart-Kurs richtet sich an deutschsprachige Anfänger, die Cebuano/Bisaya für praktische Situationen lernen möchten.',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Question',
|
||||
name: 'Für wen ist der Bisaya-Kurs geeignet?',
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: 'Der Einstieg ist für deutschsprachige Lernende gedacht, die Grundwortschatz und einfache Satzmuster für Alltag, Familie oder Reisen aufbauen möchten.',
|
||||
},
|
||||
},
|
||||
{
|
||||
'@type': 'Question',
|
||||
name: 'Brauche ich eine App, um Bisaya zu lernen?',
|
||||
acceptedAnswer: {
|
||||
'@type': 'Answer',
|
||||
text: 'Nein. Das Sprachlernmodul von YourPart wird im Browser genutzt. Für Kurse und persönlichen Lernfortschritt meldest du dich an.',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
187
frontend/src/views/public/BisayaLearningLandingView.vue
Executable file → Normal file
187
frontend/src/views/public/BisayaLearningLandingView.vue
Executable file → Normal file
@@ -1,179 +1,44 @@
|
||||
<template>
|
||||
<main class="seo-landing">
|
||||
<section class="intro">
|
||||
<div class="intro__copy">
|
||||
<p class="eyebrow">Bisaya online lernen</p>
|
||||
<h1>Bisaya lernen fuer Alltag, Familie und Reisen</h1>
|
||||
<p class="lead">
|
||||
Der YourPart-Vokabeltrainer fuehrt deutschsprachige Anfaenger durch kurze Bisaya-Lektionen mit Wortschatz,
|
||||
Satzmustern und Uebungen fuer echte Alltagssituationen.
|
||||
</p>
|
||||
<main class="learning-landing">
|
||||
<section class="hero" aria-labelledby="bisaya-title">
|
||||
<div class="hero__copy">
|
||||
<p class="eyebrow">Cebuano / Bisaya für deutschsprachige Anfänger</p>
|
||||
<h1 id="bisaya-title">Bisaya lernen: Praktisches Cebuano für Alltag, Familie und Reisen</h1>
|
||||
<p class="lead">Lerne Bisaya mit kurzen Lektionen, alltagstauglichen Wörtern und wiederholbaren Satzmustern. Der Sprachlernmodul von YourPart ist für den Einstieg vom Deutschen ins Cebuano/Bisaya gedacht.</p>
|
||||
<div class="actions">
|
||||
<router-link class="cta" to="/vokabeltrainer">Zum Vokabeltrainer</router-link>
|
||||
<router-link class="text-link" to="/deutsch-fuer-bisaya">Deutsch fuer Bisaya-Sprecher</router-link>
|
||||
<router-link class="button button--primary" to="/socialnetwork/vocab">Zum Sprachlernmodul</router-link>
|
||||
<router-link class="button button--secondary" to="/deutsch-fuer-bisaya">Deutsch für Bisaya-Sprecher</router-link>
|
||||
</div>
|
||||
<p class="access-note">Für Kurse und deinen Lernfortschritt meldest du dich bei YourPart an.</p>
|
||||
</div>
|
||||
<img class="intro__image" src="/images/mascot/mascot_female.png" alt="YourPart Sprachtrainer" />
|
||||
<div class="hero__visual"><div class="word-card word-card--one"><span>kumusta</span><strong>Hallo</strong></div><img src="/images/mascot/mascot_female.png" alt="YourPart-Maskottchen begleitet das Bisaya-Lernen" /><div class="word-card word-card--two"><span>salamat</span><strong>Danke</strong></div></div>
|
||||
</section>
|
||||
|
||||
<section class="content-band">
|
||||
<div class="content-grid">
|
||||
<article>
|
||||
<h2>Was du uebst</h2>
|
||||
<p>
|
||||
Begruessung, Familie, Essen, Wege, Preise, Gesundheit, Besuch und einfache Gespraeche. Der Kurs setzt auf
|
||||
haeufige Saetze wie <strong>Naa ko sa balay</strong>, kurze Fragen und wiederholbare Muster.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Fuer wen es passt</h2>
|
||||
<p>
|
||||
Fuer deutschsprachige Lernende, die Cebuano/Bisaya im Alltag verstehen und erste eigene Saetze bilden
|
||||
wollen. Der Kurs ist bewusst fuer Anfaenger aufgebaut.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Ehrliche Einordnung</h2>
|
||||
<p>
|
||||
Der Trainer ersetzt keinen Unterricht mit Muttersprachlern. Er hilft beim Einstieg, beim Wiederholen und
|
||||
beim Aufbau von sicherem Grundwortschatz bis in vertraute A1-/fruehe A2-Situationen.
|
||||
</p>
|
||||
</article>
|
||||
<section class="section" aria-labelledby="learn-title">
|
||||
<div class="section__heading"><p class="section-label">Klein anfangen, weiterkommen</p><h2 id="learn-title">Was du im Bisaya-Sprachlernmodul übst</h2></div>
|
||||
<div class="benefits">
|
||||
<article><span class="benefit-number">01</span><h3>Wörter mit Bezug zum Alltag</h3><p>Begrüßung, Familie, Essen, Wege, Preise und Gesundheit geben dir einen praktischen Grundwortschatz für Gespräche.</p></article>
|
||||
<article><span class="benefit-number">02</span><h3>Kurze Sätze verstehen</h3><p>Lerne typische Muster und einfache Fragen, damit aus einzelnen Bisaya-Vokabeln erste eigene Sätze werden.</p></article>
|
||||
<article><span class="benefit-number">03</span><h3>Wiederholen im eigenen Tempo</h3><p>Gehe Lektionen und Vokabeln erneut durch, wenn du sie festigen möchtest – direkt im Browser und mit deinem Lernstand.</p></article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="keyword-section">
|
||||
<h2>Bisaya oder Cebuano?</h2>
|
||||
<p>
|
||||
Viele suchen nach Cebuano lernen, Bisaya lernen oder Visaya lernen. Auf YourPart verwenden wir Bisaya fuer die
|
||||
Alltagssprache, die viele Menschen auf den Philippinen sprechen. Die Lektionen bleiben praktisch: kurze Saetze,
|
||||
klare Bedeutungen und Uebungen direkt im Browser.
|
||||
</p>
|
||||
<section class="explainer section" aria-labelledby="cebuano-title">
|
||||
<div class="explainer__copy"><p class="section-label">Bisaya oder Cebuano?</p><h2 id="cebuano-title">Die Sprache für echte Begegnungen auf den Philippinen</h2><p>Wer nach <strong>Cebuano lernen</strong>, <strong>Bisaya lernen</strong> oder <strong>Visaya lernen</strong> sucht, meint häufig dieselbe Sprachregion. Auf YourPart ist der Kurs auf Bisaya/Cebuano für deutschsprachige Anfänger ausgerichtet.</p><p>Im Mittelpunkt stehen keine abstrakten Wortlisten, sondern Situationen, in denen du die Sprache gebrauchen kannst: jemanden begrüßen, von der Familie erzählen, unterwegs nachfragen oder einfache Gespräche verstehen. Das Modul ist eine Hilfe zum Einstieg und regelmäßigen Wiederholen – kein Ersatz für Austausch mit Muttersprachlern.</p><router-link class="inline-link" to="/ratgeber/bisaya-grundlagen">Bisaya-Grundlagen im Ratgeber lesen <span aria-hidden="true">→</span></router-link></div>
|
||||
<aside class="phrase-board" aria-label="Beispiel für eine Bisaya-Lektion"><p class="phrase-board__label">Ein kleiner Einstieg</p><p class="phrase">Naa ko sa balay.</p><p class="translation">Ich bin zu Hause.</p><div class="phrase-board__line"></div><p class="phrase-board__hint">Wortschatz, Satzmuster und Wiederholung gehören im Kurs zusammen.</p></aside>
|
||||
</section>
|
||||
|
||||
<section class="start section" aria-labelledby="start-title"><div class="section__heading"><p class="section-label">In drei Schritten</p><h2 id="start-title">So startest du mit Bisaya</h2></div><ol class="steps"><li><span>1</span><div><h3>Bei YourPart anmelden</h3><p>Dein Konto speichert den Zugang zu den Kursen und deinen Lernfortschritt.</p></div></li><li><span>2</span><div><h3>Kurs auswählen</h3><p>Öffne den Vokabeltrainer und wähle den passenden Bisaya-/Cebuano-Kurs.</p></div></li><li><span>3</span><div><h3>Lernen und wiederholen</h3><p>Arbeite dich in kleinen Schritten durch Lektionen und übe Wörter erneut.</p></div></li></ol><router-link class="button button--primary" to="/socialnetwork/vocab">Bisaya-Kurs öffnen</router-link></section>
|
||||
|
||||
<section class="faq section" aria-labelledby="faq-title"><div class="section__heading"><p class="section-label">Kurz beantwortet</p><h2 id="faq-title">Häufige Fragen zum Bisaya-Lernen</h2></div><div class="faq__items"><details><summary>Ist Bisaya dasselbe wie Cebuano?</summary><p>Die Begriffe werden im Alltag oft ähnlich verwendet. Der YourPart-Kurs richtet sich an deutschsprachige Anfänger, die Cebuano/Bisaya für praktische Situationen lernen möchten.</p></details><details><summary>Für wen ist der Bisaya-Kurs geeignet?</summary><p>Der Einstieg ist für deutschsprachige Lernende gedacht, die Grundwortschatz und einfache Satzmuster für Alltag, Familie oder Reisen aufbauen möchten.</p></details><details><summary>Brauche ich eine App, um Bisaya zu lernen?</summary><p>Nein. Das Sprachlernmodul von YourPart wird im Browser genutzt. Für Kurse und persönlichen Lernfortschritt meldest du dich an.</p></details></div><nav class="context-links" aria-label="Weiterführende Sprachlernseiten"><router-link to="/vokabeltrainer">Vokabeltrainer im Überblick</router-link><router-link to="/deutsch-fuer-bisaya">Deutsch für Bisaya-Sprecher</router-link><router-link to="/ratgeber/vokabeltrainer-alltag">Vokabeln für den Alltag üben</router-link></nav></section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BisayaLearningLandingView'
|
||||
};
|
||||
export default { name: 'BisayaLearningLandingView' };
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.seo-landing {
|
||||
max-width: 1120px;
|
||||
margin: 0 auto;
|
||||
padding: 36px 20px 72px;
|
||||
color: #1f2f1d;
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.intro__copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 2.7rem;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.lead {
|
||||
max-width: 760px;
|
||||
margin: 18px 0 0;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.intro__image {
|
||||
width: 100%;
|
||||
max-height: 320px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.cta,
|
||||
.text-link {
|
||||
min-height: 42px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cta {
|
||||
padding: 0 18px;
|
||||
background: #244f2b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: #244f2b;
|
||||
}
|
||||
|
||||
.content-band,
|
||||
.keyword-section {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(31, 47, 29, 0.14);
|
||||
border-radius: 8px;
|
||||
background: #f7fbf2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.keyword-section {
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.intro,
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
|
||||
.intro__image {
|
||||
max-height: 240px;
|
||||
}
|
||||
}
|
||||
.learning-landing { --ink:#243b35; --green:#236249; --mint:#e7f2e7; --sun:#f4bd60; max-width:1180px; margin:0 auto; padding:34px 20px 80px; color:var(--ink); }.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.78fr); overflow:hidden; background:#f8f5ea; border:1px solid rgba(35,98,73,.15); border-radius:18px; }.hero__copy { padding:clamp(32px,6vw,70px); background:radial-gradient(circle at 8% 8%,rgba(244,189,96,.3),transparent 27%),#f8f5ea; }.eyebrow,.section-label { margin:0 0 12px; color:#39765c; font-weight:800; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; }h1,h2,h3,p { overflow-wrap:break-word; hyphens:auto; }h1 { margin:0; max-width:700px; font-size:clamp(2.15rem,4.4vw,4.1rem); line-height:1.04; letter-spacing:-.04em; }.lead { max-width:650px; margin:22px 0 0; font-size:1.1rem; line-height:1.7; }.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 17px; border-radius:7px; font-weight:800; text-decoration:none; text-align:center; transition:transform .18s ease,background .18s ease; }.button:hover { transform:translateY(-2px); }.button:focus-visible,.inline-link:focus-visible,.context-links a:focus-visible,summary:focus-visible { outline:3px solid #1e6fa8; outline-offset:3px; }.button--primary { background:var(--green); color:#fff; box-shadow:0 6px 0 #164330; }.button--primary:hover { background:#164d39; color:#fff; }.button--secondary { color:#225c45; border:1px solid rgba(35,98,73,.44); }.button--secondary:hover { color:#164330; background:#fffdf5; }.access-note { margin:18px 0 0; color:#4c6058; font-size:.9rem; }.hero__visual { position:relative; min-height:410px; display:flex; align-items:end; justify-content:center; overflow:hidden; background:linear-gradient(160deg,#b9dfc4,#78b785); }.hero__visual::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(115deg,rgba(255,255,255,.14) 0 1px,transparent 1px 25px); }.hero__visual img { position:relative; z-index:1; width:min(92%,360px); max-height:390px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 14px 14px rgba(17,65,44,.23)); }.word-card { position:absolute; z-index:2; padding:12px 16px; background:#fffdf6; box-shadow:0 10px 20px rgba(22,67,48,.18); }.word-card span { display:block; color:#39765c; font-weight:800; }.word-card strong { display:block; margin-top:3px; font-size:.88rem; }.word-card--one { top:19%; left:9%; transform:rotate(-4deg); }.word-card--two { right:8%; bottom:20%; transform:rotate(4deg); }.section { margin-top:72px; }.section__heading { max-width:780px; }.section__heading h2,.explainer h2 { margin:0; font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.12; letter-spacing:-.028em; }.benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }.benefits article { padding:28px; background:var(--mint); border-top:4px solid #7cb288; }.benefit-number { color:#39765c; font-weight:800; letter-spacing:.1em; }.benefits h3,.steps h3 { margin:18px 0 8px; font-size:1.14rem; }.benefits p,.explainer p,.steps p,.faq p { margin:0; line-height:1.68; }.explainer { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.55fr); gap:clamp(28px,7vw,90px); align-items:center; }.explainer__copy p:not(.section-label) { margin-top:16px; }.inline-link,.context-links a { display:inline-block; margin-top:20px; color:#236249; font-weight:800; text-decoration-thickness:2px; text-underline-offset:3px; }.phrase-board { padding:32px; background:#243b35; color:#fbf9ed; box-shadow:12px 12px 0 #f4bd60; }.phrase-board__label { margin:0; color:#a8d8b0; font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.phrase { margin:32px 0 6px; font-size:clamp(1.55rem,3vw,2.2rem); font-weight:800; }.translation { margin:0; color:#e1e8dc; }.phrase-board__line { width:52px; height:3px; margin:28px 0 16px; background:#f4bd60; }.phrase-board__hint { margin:0; color:#d5dfd4; line-height:1.6; }.start { padding:clamp(28px,5vw,52px); background:#f8f5ea; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:0; margin:32px 0; list-style:none; }.steps li { display:flex; gap:14px; }.steps span { display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; background:#f4bd60; border-radius:50%; font-weight:800; }.steps h3 { margin:3px 0 8px; }.faq__items { margin-top:26px; border-top:1px solid rgba(35,98,73,.2); }.faq details { padding:18px 0; border-bottom:1px solid rgba(35,98,73,.2); }.faq summary { cursor:pointer; font-weight:800; }.faq details p { max-width:800px; margin:12px 30px 0 0; }.context-links { display:flex; flex-wrap:wrap; gap:10px 26px; }
|
||||
@media (max-width:800px) { .hero,.explainer { grid-template-columns:1fr; }.hero__visual { min-height:280px; }.hero__visual img { max-height:275px; }.benefits,.steps { grid-template-columns:1fr; }.section { margin-top:52px; } }@media (max-width:480px) { .learning-landing { padding:20px 12px 52px; }.hero__copy { padding:30px 22px; }.hero__visual { min-height:235px; }.word-card { padding:9px 11px; }.section { margin-top:42px; }.benefits article,.phrase-board,.start { padding:24px; } }
|
||||
</style>
|
||||
|
||||
238
frontend/src/views/public/FalukantLandingView.vue
Executable file → Normal file
238
frontend/src/views/public/FalukantLandingView.vue
Executable file → Normal file
@@ -1,128 +1,122 @@
|
||||
<template>
|
||||
<section class="marketing-page">
|
||||
<div class="hero">
|
||||
<p class="eyebrow">Browser-Aufbauspiel</p>
|
||||
<h1>Falukant verbindet Wirtschaft, Politik und Charakterentwicklung in einer mittelalterlichen Spielwelt.</h1>
|
||||
<p class="lead">
|
||||
Baue Besitz auf, verwalte Zweigstellen, pflege Beziehungen und triff politische Entscheidungen in einem
|
||||
persistenten Browsergame innerhalb von YourPart.
|
||||
</p>
|
||||
<router-link class="cta" to="/">Jetzt entdecken</router-link>
|
||||
</div>
|
||||
<main class="falukant-landing">
|
||||
<section class="hero" aria-labelledby="falukant-title">
|
||||
<div class="hero__copy">
|
||||
<p class="eyebrow">Mittelalter · Wirtschaft · Entscheidungen</p>
|
||||
<h1 id="falukant-title">Falukant: Das Mittelalter-Browsergame für Wirtschaft, Familie und Politik</h1>
|
||||
<p class="lead">
|
||||
In Falukant führst du eine Figur durch eine lebendige mittelalterliche Spielwelt. Baue Besitz auf,
|
||||
entwickle Unternehmen und entscheide, welchen Platz deine Familie in Gesellschaft und Politik einnimmt.
|
||||
</p>
|
||||
<div class="hero__actions">
|
||||
<router-link class="button button--primary" to="/falukant/create">Figur erstellen und Falukant beginnen</router-link>
|
||||
<router-link class="button button--quiet" to="/ratgeber/falukant-wirtschaft">So funktioniert die Wirtschaft</router-link>
|
||||
</div>
|
||||
<p class="hero__note">Falukant läuft direkt im Browser. Zum Spielen meldest du dich bei YourPart an.</p>
|
||||
</div>
|
||||
<div class="hero__scene" aria-hidden="true">
|
||||
<img src="/images/falukant/map.png" alt="" />
|
||||
<div class="scene-card scene-card--family"><span>Dein Haus</span><strong>Familie & Status</strong></div>
|
||||
<div class="scene-card scene-card--trade"><span>Dein Betrieb</span><strong>Handel & Produktion</strong></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="grid">
|
||||
<article>
|
||||
<h2>Wirtschaft mit Tiefe</h2>
|
||||
<p>Produktion, Lager, Handel und Finanzen greifen ineinander und erzeugen eine langfristige Aufbauspiel-Dynamik.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Persönliche Entwicklung</h2>
|
||||
<p>Familie, Bildung, Gesundheit und gesellschaftlicher Status beeinflussen deinen Weg in Falukant.</p>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Politik und Unterwelt</h2>
|
||||
<p>Zwischen Kirche, Reputation, Adel und dunklen Netzwerken entstehen Entscheidungen mit spürbaren Folgen.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" aria-labelledby="loops-title">
|
||||
<div class="section__heading">
|
||||
<p class="section-label">Deine Entscheidungen zählen</p>
|
||||
<h2 id="loops-title">Drei Spielbereiche, die in Falukant zusammenwirken</h2>
|
||||
</div>
|
||||
<div class="feature-list">
|
||||
<article class="feature">
|
||||
<img src="/images/icons/falukant/workshop.png" alt="" />
|
||||
<h3>Wirtschaft aufbauen</h3>
|
||||
<p>Produktion, Lager, Handel und Finanzen gehören zusammen. Plane Zweigstellen und entwickle deinen Besitz Schritt für Schritt.</p>
|
||||
</article>
|
||||
<article class="feature">
|
||||
<img src="/images/icons/falukant/family.png" alt="" />
|
||||
<h3>Familie gestalten</h3>
|
||||
<p>Bildung, Gesundheit, Beziehungen und gesellschaftlicher Rang begleiten die Geschichte deiner Figur und ihrer Familie.</p>
|
||||
</article>
|
||||
<article class="feature">
|
||||
<img src="/images/icons/falukant/politics.png" alt="" />
|
||||
<h3>In der Gesellschaft handeln</h3>
|
||||
<p>Reputation, Adel, Kirche und Politik eröffnen Wege – und stellen dich vor Entscheidungen mit Folgen für deinen Status.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="story section" aria-labelledby="what-is-falukant">
|
||||
<div class="story__image">
|
||||
<img src="/images/falukant/houses.png" alt="Ansicht mittelalterlicher Häuser aus Falukant" />
|
||||
</div>
|
||||
<div class="story__copy">
|
||||
<p class="section-label">Mehr als eine einzelne Spielrunde</p>
|
||||
<h2 id="what-is-falukant">Was ist Falukant?</h2>
|
||||
<p>
|
||||
Falukant ist eine Browser-Wirtschaftssimulation im Mittelalter. Statt nur Gebäude anzuklicken,
|
||||
verbindest du wirtschaftliche Planung mit dem Leben deiner Figur: Arbeit, Familie, Bildung und Ansehen
|
||||
beeinflussen die nächsten Möglichkeiten.
|
||||
</p>
|
||||
<p>
|
||||
Wer ein Aufbauspiel mit Handel und langfristigen Entscheidungen sucht, findet hier einen ruhigen,
|
||||
fortlaufenden Spielraum. Der Einstieg beginnt mit einer eigenen Figur; danach entscheidest du selbst,
|
||||
ob zuerst ein Betrieb, das Familienleben oder dein gesellschaftlicher Aufstieg im Mittelpunkt steht.
|
||||
</p>
|
||||
<router-link class="inline-link" to="/ratgeber/falukant-politik-und-gesellschaft">Ratgeber zu Politik und Gesellschaft in Falukant <span aria-hidden="true">→</span></router-link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="start section" aria-labelledby="start-title">
|
||||
<div class="section__heading">
|
||||
<p class="section-label">Dein erster Zug</p>
|
||||
<h2 id="start-title">So startest du in Falukant</h2>
|
||||
</div>
|
||||
<ol class="steps">
|
||||
<li><span>01</span><div><h3>Bei YourPart anmelden</h3><p>Lege dein Konto an oder melde dich an, damit dein Spielstand zu dir gehört.</p></div></li>
|
||||
<li><span>02</span><div><h3>Eine Figur anlegen</h3><p>Wähle den Ausgangspunkt deiner Geschichte und beginne dein Leben in Falukant.</p></div></li>
|
||||
<li><span>03</span><div><h3>Den ersten Bereich ausbauen</h3><p>Erkunde Wirtschaft, Familie und gesellschaftliche Wege in deinem eigenen Tempo.</p></div></li>
|
||||
</ol>
|
||||
<router-link class="button button--primary" to="/falukant/create">Falukant starten</router-link>
|
||||
</section>
|
||||
|
||||
<section class="faq section" aria-labelledby="faq-title">
|
||||
<div class="section__heading"><p class="section-label">Kurz beantwortet</p><h2 id="faq-title">Häufige Fragen zu Falukant</h2></div>
|
||||
<div class="faq__items">
|
||||
<details><summary>Was für ein Spiel ist Falukant?</summary><p>Falukant ist ein mittelalterliches Browser-Aufbauspiel mit Wirtschaft, Familie, Charakterentwicklung und gesellschaftlichen Entscheidungen.</p></details>
|
||||
<details><summary>Kann ich Falukant ohne Installation spielen?</summary><p>Ja. Falukant gehört zu YourPart und wird im Browser genutzt; eine separate Spielinstallation ist nicht nötig.</p></details>
|
||||
<details><summary>Was mache ich am Anfang in Falukant?</summary><p>Nach der Anmeldung legst du eine Figur an. Danach kannst du dich mit deinem Besitz, wirtschaftlichen Entscheidungen und dem Leben deiner Familie beschäftigen.</p></details>
|
||||
</div>
|
||||
<nav class="context-links" aria-label="Weiterführende Falukant-Seiten">
|
||||
<router-link to="/ratgeber/falukant-familie-charakter">Familie und Charakter in Falukant</router-link>
|
||||
<router-link to="/minigames">Weitere Browser-Minispiele</router-link>
|
||||
</nav>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default { name: 'FalukantLandingView' };
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.marketing-page {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 20px 72px;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-width: 0;
|
||||
padding: 32px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #fffdf7;
|
||||
border: 1px solid rgba(154, 113, 54, 0.24);
|
||||
border-left: 4px solid #b18445;
|
||||
box-shadow: 0 16px 36px rgba(76, 61, 36, 0.08);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 12px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #80612f;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 4vw, 3.6rem);
|
||||
line-height: 1.08;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.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: var(--radius-md);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-accent);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cta:hover {
|
||||
background: var(--color-primary-hover);
|
||||
color: var(--color-text-on-accent);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 18px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.grid article {
|
||||
padding: 24px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #fffefa;
|
||||
border: 1px solid rgba(75, 91, 75, 0.16);
|
||||
}
|
||||
|
||||
.grid h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.grid p {
|
||||
margin: 0;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.marketing-page {
|
||||
padding: 24px 12px 44px;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.grid article {
|
||||
padding: 22px 18px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(1.58rem, 8.2vw, 2.15rem);
|
||||
line-height: 1.12;
|
||||
}
|
||||
}
|
||||
.falukant-landing { --ink:#20261b; --moss:#34482a; --gold:#d4a950; --paper:#faf7ed; max-width:1180px; margin:0 auto; padding:32px 20px 80px; color:var(--ink); }
|
||||
.hero { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr); overflow:hidden; background:var(--paper); border:1px solid rgba(90,72,34,.2); border-radius:18px; box-shadow:0 22px 48px rgba(45,37,17,.14); }
|
||||
.hero__copy { padding:clamp(32px,6vw,72px); background:radial-gradient(circle at 5% 4%,rgba(212,169,80,.24),transparent 30%),linear-gradient(135deg,#f9f4e6,#eee4c9); }
|
||||
.eyebrow,.section-label { margin:0 0 12px; color:#74561f; font-weight:800; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; }
|
||||
h1,h2,h3,p { overflow-wrap:break-word; hyphens:auto; }
|
||||
h1 { margin:0; max-width:720px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.15rem,4.5vw,4.25rem); line-height:1.02; letter-spacing:-.035em; }
|
||||
.lead { max-width:650px; margin:24px 0 0; font-size:1.1rem; line-height:1.7; }
|
||||
.hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
|
||||
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 17px; border-radius:6px; font-weight:800; text-align:center; text-decoration:none; transition:transform .18s ease,background .18s ease; }
|
||||
.button:hover { transform:translateY(-2px); }.button:focus-visible,.inline-link:focus-visible,.context-links a:focus-visible,summary:focus-visible { outline:3px solid #1e6fa8; outline-offset:3px; }
|
||||
.button--primary { background:var(--moss); color:#fff; box-shadow:0 7px 0 #20311a; }.button--primary:hover { color:#fff; background:#263c20; }.button--quiet { color:#3a462d; border:1px solid rgba(58,70,45,.45); }.button--quiet:hover { color:#1f2e19; background:rgba(255,255,255,.54); }
|
||||
.hero__note { margin:18px 0 0; font-size:.9rem; line-height:1.5; color:#5b563f; }
|
||||
.hero__scene { position:relative; min-height:410px; background:#26381f; overflow:hidden; }.hero__scene::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,31,17,.05),rgba(20,30,15,.68)); }.hero__scene>img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter:saturate(.8) contrast(1.05); }
|
||||
.scene-card { position:absolute; z-index:1; padding:12px 15px; color:#fffaf0; background:rgba(27,37,22,.87); border-left:3px solid var(--gold); box-shadow:0 8px 18px rgba(0,0,0,.24); }.scene-card span { display:block; margin-bottom:3px; color:#dfc98e; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }.scene-card strong { font-size:.95rem; }.scene-card--family { top:18%; left:8%; }.scene-card--trade { right:6%; bottom:16%; }
|
||||
.section { margin-top:72px; }.section__heading { max-width:760px; }.section__heading h2,.story h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.1; letter-spacing:-.025em; }.feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:28px; border:1px solid rgba(69,71,40,.17); background:rgba(69,71,40,.17); }.feature { padding:28px; background:#fffdf7; }.feature img { width:46px; height:46px; object-fit:contain; }.feature h3,.steps h3 { margin:18px 0 8px; font-size:1.15rem; }.feature p,.story p,.steps p,.faq p { margin:0; line-height:1.68; }
|
||||
.story { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1fr); align-items:center; gap:clamp(28px,6vw,80px); }.story__image { background:#364c2e; padding:12px; box-shadow:12px 12px 0 #d6b36a; }.story__image img { display:block; width:100%; min-height:260px; object-fit:cover; }.story__copy p:not(.section-label) { margin-top:16px; }.inline-link,.context-links a { display:inline-block; margin-top:20px; color:#435c2d; font-weight:800; text-decoration-thickness:2px; text-underline-offset:3px; }
|
||||
.start { padding:clamp(28px,5vw,52px); background:#26381f; color:#f8f3e4; }.start .section-label { color:#e2c47d; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:0; margin:32px 0; list-style:none; }.steps li { display:flex; gap:14px; }.steps span { flex:0 0 auto; color:#e2c47d; font-weight:800; letter-spacing:.08em; }.steps h3 { margin:0 0 8px; }.steps p { color:#e5e6dd; }.start .button--primary { background:#d4a950; color:#20261b; box-shadow:0 7px 0 #a87b2c; }.start .button--primary:hover { color:#20261b; background:#e1bb67; }
|
||||
.faq__items { margin-top:26px; border-top:1px solid rgba(69,71,40,.2); }.faq details { border-bottom:1px solid rgba(69,71,40,.2); padding:18px 0; }.faq summary { cursor:pointer; font-weight:800; }.faq details p { max-width:800px; margin:12px 30px 0 0; }.context-links { display:flex; flex-wrap:wrap; gap:10px 26px; }
|
||||
@media (max-width:800px) { .hero,.story { grid-template-columns:1fr; }.hero__scene { min-height:280px; }.feature-list,.steps { grid-template-columns:1fr; }.section { margin-top:52px; } }
|
||||
@media (max-width:480px) { .falukant-landing { padding:20px 12px 52px; }.hero__copy { padding:30px 22px; }.hero__scene { min-height:230px; }.scene-card { padding:9px 11px; }.section { margin-top:42px; }.feature { padding:22px; }.start { padding:28px 22px; } }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user