layout
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
<section id="features" class="border-t border-brand-border/70 bg-brand-primarySoft/20">
|
||||
<div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20 space-y-10">
|
||||
<section id="features" class="border-t border-brand-border/60 bg-brand-primarySoft/20 py-16 sm:py-20">
|
||||
<div class="px-4 sm:px-6 lg:px-8">
|
||||
<div class="section-shell space-y-10">
|
||||
<div class="max-w-3xl space-y-4">
|
||||
<p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="features_kicker">
|
||||
Free & Pro features
|
||||
</p>
|
||||
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-white" data-i18n="features_title">
|
||||
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-brand-text" data-i18n="features_title">
|
||||
Starte mit dem kostenlosen Schnelltest – wechsle in den Pro-Modus, wenn du mehr brauchst.
|
||||
</h2>
|
||||
<p class="text-sm sm:text-base text-brand-muted" data-i18n="features_intro">
|
||||
@@ -14,9 +15,9 @@
|
||||
|
||||
<div class="grid gap-6 md:grid-cols-2">
|
||||
<!-- Free -->
|
||||
<div class="rounded-xl2 border border-brand-border bg-brand-surface/90 shadow-soft p-6 space-y-4">
|
||||
<div class="card-frame card-frame--soft space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-heading text-xl font-semibold text-white" data-i18n="features_free_title">Free Quick Check</h3>
|
||||
<h3 class="font-heading text-xl font-semibold text-brand-text" data-i18n="features_free_title">Free Quick Check</h3>
|
||||
<span class="inline-flex items-center rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400" data-i18n="features_free_badge">
|
||||
Recommended for most users
|
||||
</span>
|
||||
@@ -42,9 +43,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Pro -->
|
||||
<div class="rounded-xl2 border border-brand-primary/60 bg-brand-surface shadow-soft p-6 space-y-4">
|
||||
<div class="card-frame card-frame--accent space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-heading text-xl font-semibold text-white" data-i18n="features_pro_title">Pro Mode</h3>
|
||||
<h3 class="font-heading text-xl font-semibold text-brand-text" data-i18n="features_pro_title">Pro Mode</h3>
|
||||
<span class="inline-flex items-center rounded-full bg-brand-primary/10 px-3 py-1 text-xs font-semibold text-brand-primary" data-i18n="features_pro_badge">
|
||||
For power users & teams
|
||||
</span>
|
||||
@@ -64,5 +65,6 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user