101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
<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>
|
|
|
|
<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>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.marketing-page {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 48px 20px 72px;
|
|
color: #40261a;
|
|
}
|
|
|
|
.hero {
|
|
padding: 32px;
|
|
border-radius: var(--radius-lg);
|
|
background: linear-gradient(135deg, #f7e0bb 0%, #f6c27d 45%, #e8924d 100%);
|
|
box-shadow: 0 20px 60px rgba(106, 56, 20, 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.6rem);
|
|
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: #40261a;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.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: #fff7ef;
|
|
border: 1px solid rgba(64, 38, 26, 0.08);
|
|
}
|
|
|
|
.grid h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.grid p {
|
|
margin: 0;
|
|
line-height: 1.65;
|
|
}
|
|
</style>
|