UX/SEO: Landing 3-Zielgruppen-Redesign, PWA-Wording ohne 'installieren' (SW by-v729)

This commit is contained in:
rene 2026-05-06 17:11:26 +02:00
parent b675fbcd32
commit e4da75f246
6 changed files with 72 additions and 13 deletions

View file

@ -13,7 +13,7 @@
<meta property="og:type" content="website">
<meta property="og:title" content="Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz">
<meta property="og:description" content="Tagebuch, Giftköder-Alarm, KI-Training, Forum, Wurfbörse, Stammbaum, Inzucht-Check — alles in einer DSGVO-konformen App ohne App Store. Kostenlos.">
<meta property="og:url" content="https://banyaro.app/info">
<meta property="og:url" content="https://banyaro.app/">
<meta property="og:image" content="https://banyaro.app/icons/icon-512.png">
<meta property="og:locale" content="de_DE">
<meta property="og:site_name" content="Ban Yaro">
@ -377,6 +377,65 @@
.usp-item h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.2rem; }
.usp-item p { font-size: 0.85rem; color: var(--text-secondary); }
/* Outcome Cards */
.outcome-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
margin-top: 2rem;
}
.outcome-card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.outcome-card .oc-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
}
.outcome-card h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.5rem;
}
.outcome-card p {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
.section-cta-link {
display: inline-block;
margin-top: 1.75rem;
font-size: 0.9rem;
color: var(--text-muted);
cursor: pointer;
user-select: none;
}
.section-cta-link:hover { color: var(--primary); text-decoration: none; }
.collapsible-content { display: none; margin-top: 1.5rem; }
.collapsible-content.open { display: block; }
.section-cta-btn {
display: inline-block;
background: var(--primary);
color: white;
font-weight: 700;
font-size: 1rem;
padding: 0.75rem 2rem;
border-radius: 999px;
margin-top: 2rem;
box-shadow: 0 4px 16px rgba(196,132,58,.35);
transition: transform 0.15s, box-shadow 0.15s;
}
.section-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(196,132,58,.45);
text-decoration: none;
color: white;
}
/* Footer */
footer {
background: #1a1a1a;