103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<template>
|
|
<section class="marketing-page">
|
|
<div class="hero">
|
|
<p class="eyebrow">Sprachen online lernen</p>
|
|
<h1>Der Vokabeltrainer auf YourPart kombiniert Lernen, Kurse und Übungen in einer Plattform.</h1>
|
|
<p class="lead">
|
|
Arbeite mit interaktiven Lektionen, erweitere deinen Wortschatz und nutze strukturierte Inhalte für 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 Übungen 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 größere 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: var(--radius-lg);
|
|
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: var(--radius-lg);
|
|
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>
|