99 lines
2.1 KiB
Vue
99 lines
2.1 KiB
Vue
<template>
|
|
<section class="marketing-page">
|
|
<div class="hero">
|
|
<p class="eyebrow">Browser-Minispiele</p>
|
|
<h1>Kurze Spielrunden, klare Ziele und direkte Action mit Match 3 und Taxi.</h1>
|
|
<p class="lead">
|
|
Die Minispiele auf YourPart liefern schnelle Abwechslung direkt im Browser und erweitern die Plattform um
|
|
spielbare Casual-Formate.
|
|
</p>
|
|
<router-link class="cta" to="/">Zur Startseite</router-link>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
<article>
|
|
<h2>Match 3</h2>
|
|
<p>Das klassische Puzzle-Prinzip mit Kampagnenstruktur für Spielerinnen und Spieler, die kurze Sessions lieben.</p>
|
|
</article>
|
|
<article>
|
|
<h2>Taxi</h2>
|
|
<p>Fahre Passagiere effizient ans Ziel und verbessere deine Kontrolle, Streckenwahl und Reaktionsfähigkeit.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.marketing-page {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 48px 20px 72px;
|
|
color: #17323a;
|
|
}
|
|
|
|
.hero {
|
|
padding: 32px;
|
|
border-radius: var(--radius-lg);
|
|
background:
|
|
radial-gradient(circle at top left, rgba(255, 255, 255, 0.7), transparent 35%),
|
|
linear-gradient(135deg, #d4f0e6 0%, #7dd0be 40%, #2e8b83 100%);
|
|
box-shadow: 0 20px 60px rgba(13, 84, 93, 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: #17323a;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 18px;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.cards article {
|
|
padding: 24px;
|
|
border-radius: var(--radius-lg);
|
|
background: #effaf6;
|
|
border: 1px solid rgba(23, 50, 58, 0.08);
|
|
}
|
|
|
|
.cards h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.cards p {
|
|
margin: 0;
|
|
line-height: 1.65;
|
|
}
|
|
</style>
|