Landing: emotionaler Hero, Social-Proof-Stats, Testimonial-Slots, Scroll-Animationen (SW by-v952)
- Hero-Headline: "Weil jeder Moment mit ihm zählt." (warm/emotional statt Feature-Liste) - CTA umbenannt: "Kostenlos starten" statt "Ich bin Hundebesitzer" - Hero-Stats-Zeile: live Nutzer/Hunde/km-Zähler (nur wenn >0) - Stats-Band: orangener Balken mit 4 Live-Kennzahlen nach der Zwei-Welten-Section - Testimonial-Section: 3 Platzhalter-Karten zwischen Features und Züchter-Bereich - Scroll-Animationen: IntersectionObserver auf alle Cards (fade-up) - API: /api/stats/public — öffentlicher Endpoint, 5-Min-Cache
This commit is contained in:
parent
7e939cf854
commit
f9160307bc
4 changed files with 232 additions and 9 deletions
|
|
@ -1,3 +1,4 @@
|
|||
import time
|
||||
from fastapi import APIRouter, Depends
|
||||
from database import db
|
||||
from auth import get_current_user, get_current_user_optional
|
||||
|
|
@ -19,6 +20,35 @@ _STATS_SQL = """
|
|||
"""
|
||||
|
||||
|
||||
_pub_cache: dict = {"data": None, "ts": 0.0}
|
||||
_PUB_TTL = 300 # 5 Minuten
|
||||
|
||||
|
||||
@router.get("/public")
|
||||
async def public_stats():
|
||||
now = time.time()
|
||||
if _pub_cache["data"] and now - _pub_cache["ts"] < _PUB_TTL:
|
||||
return _pub_cache["data"]
|
||||
with db() as conn:
|
||||
users = conn.execute("SELECT COUNT(*) FROM users").fetchone()[0]
|
||||
dogs = conn.execute("SELECT COUNT(*) FROM dogs").fetchone()[0]
|
||||
km = conn.execute(
|
||||
"SELECT ROUND(COALESCE(SUM(distanz_km),0),0) FROM routes"
|
||||
).fetchone()[0]
|
||||
posts = conn.execute("SELECT COUNT(*) FROM forum_posts").fetchone()[0]
|
||||
diary = conn.execute("SELECT COUNT(*) FROM diary").fetchone()[0]
|
||||
data = {
|
||||
"users": users,
|
||||
"dogs": dogs,
|
||||
"km": int(km or 0),
|
||||
"forum_posts": posts,
|
||||
"diary_entries": diary,
|
||||
}
|
||||
_pub_cache["data"] = data
|
||||
_pub_cache["ts"] = now
|
||||
return data
|
||||
|
||||
|
||||
@router.get("/leaderboard")
|
||||
async def leaderboard(_user=Depends(get_current_user_optional)):
|
||||
with db() as conn:
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Router, State-Management, Navigation, Initialisierung.
|
||||
============================================================ */
|
||||
|
||||
const APP_VER = '951'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
const APP_VER = '952'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
const APP_VERSION = '1.5.1'; // ← semantische Version, wird bei make release gesetzt
|
||||
const IS_STAGING = location.hostname === 'staging.banyaro.app';
|
||||
// Cache-Bust-Parameter nach Update-Reload sofort entfernen
|
||||
|
|
|
|||
|
|
@ -516,6 +516,84 @@
|
|||
}
|
||||
footer a { color: var(--primary); }
|
||||
footer .footer-links { margin-top: 0.75rem; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
|
||||
|
||||
/* Hero Stats */
|
||||
.hero-stats {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 0.88rem;
|
||||
opacity: 0.88;
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.hero-stats strong { font-weight: 800; }
|
||||
.hero-stats .sep { opacity: 0.45; }
|
||||
|
||||
/* Big Stats Band */
|
||||
.stats-band {
|
||||
background: linear-gradient(135deg, #a86e2e 0%, #C4843A 50%, #d4944a 100%);
|
||||
color: white;
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
.stats-band-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.stats-band-item { padding: 0.5rem; }
|
||||
.stats-band-num {
|
||||
font-size: clamp(2rem, 5vw, 2.8rem);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.stats-band-label {
|
||||
font-size: 0.82rem;
|
||||
opacity: 0.82;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Testimonials */
|
||||
.testimonials-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.testimonial-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 1.75rem;
|
||||
box-shadow: 0 2px 16px rgba(0,0,0,.07);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.testimonial-stars { color: #f59e0b; letter-spacing: 2px; font-size: 0.95rem; }
|
||||
.testimonial-quote {
|
||||
font-size: 0.97rem;
|
||||
line-height: 1.7;
|
||||
color: var(--text);
|
||||
flex: 1;
|
||||
}
|
||||
.testimonial-quote::before { content: "„"; font-size: 1.3em; color: var(--primary); line-height: 0; vertical-align: -0.2em; margin-right: 2px; }
|
||||
.testimonial-quote::after { content: """; font-size: 1.3em; color: var(--primary); line-height: 0; vertical-align: -0.2em; margin-left: 2px; }
|
||||
.testimonial-author { font-size: 0.875rem; font-weight: 700; color: var(--text); }
|
||||
.testimonial-dog { font-size: 0.8rem; color: var(--primary); font-weight: 500; margin-top: 0.1rem; }
|
||||
.testimonial-placeholder { opacity: 0.4; font-style: italic; }
|
||||
|
||||
/* Scroll animations */
|
||||
.fade-up {
|
||||
opacity: 0;
|
||||
transform: translateY(22px);
|
||||
transition: opacity 0.55s ease, transform 0.55s ease;
|
||||
}
|
||||
.fade-up.visible { opacity: 1; transform: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -526,18 +604,25 @@
|
|||
<img src="/icons/icon-180.png" alt="Ban Yaro App Icon">
|
||||
<span class="logo-name">Ban Yaro</span>
|
||||
</div>
|
||||
<h1>Für Hundebesitzer.<br>Für Züchter.<br><em style="font-style:normal;color:#f5c07a">Eine App.</em></h1>
|
||||
<p>Tagebuch, Training und Gesundheit für Hundebesitzer. Stammbaum, Wurfverwaltung und Warteliste für Züchter. Nahtlos verbunden — kostenlos, ohne App Store, Daten in Deutschland.</p>
|
||||
<div class="header-badges">
|
||||
<h1>Weil jeder Moment<br>mit ihm zählt.</h1>
|
||||
<p>Ban Yaro begleitet euch durch jeden gemeinsamen Tag — Tagebuch, Training und Gesundheit für Hundebesitzer, Stammbaum und Wurfverwaltung für Züchter. Eine App. Mit ganzem Herzen.</p>
|
||||
<div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem">
|
||||
<a href="/" class="cta-btn" onclick="sessionStorage.setItem('by_stay_in_app','1')">Kostenlos starten</a>
|
||||
<a href="/zuechter" class="cta-btn" style="background:transparent;color:white;border:2px solid rgba(255,255,255,.6)">Ich bin Züchter</a>
|
||||
</div>
|
||||
<div class="header-badges" style="margin-top:1.5rem">
|
||||
<span class="badge">Kostenlos nutzbar</span>
|
||||
<span class="badge">Daten in Deutschland</span>
|
||||
<span class="badge">Kein App Store nötig</span>
|
||||
<span class="badge">Made in Germany</span>
|
||||
<span class="badge">Offline-fähig</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem">
|
||||
<a href="/" class="cta-btn" onclick="sessionStorage.setItem('by_stay_in_app','1')">Ich bin Hundebesitzer</a>
|
||||
<a href="/zuechter" class="cta-btn" style="background:transparent;color:white;border:2px solid rgba(255,255,255,.6)">Ich bin Züchter</a>
|
||||
<div class="hero-stats" id="hero-stats" style="display:none">
|
||||
<strong id="stat-users">…</strong> Hundemenschen
|
||||
<span class="sep">·</span>
|
||||
<strong id="stat-dogs">…</strong> Hunde
|
||||
<span class="sep">·</span>
|
||||
<strong id="stat-km">…</strong> km Gassi-Wege
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -595,6 +680,30 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats Band -->
|
||||
<section class="stats-band" id="zahlen">
|
||||
<div class="container">
|
||||
<div class="stats-band-grid">
|
||||
<div class="stats-band-item fade-up">
|
||||
<div class="stats-band-num" id="big-users">…</div>
|
||||
<div class="stats-band-label">Hundemenschen</div>
|
||||
</div>
|
||||
<div class="stats-band-item fade-up">
|
||||
<div class="stats-band-num" id="big-dogs">…</div>
|
||||
<div class="stats-band-label">Hunde registriert</div>
|
||||
</div>
|
||||
<div class="stats-band-item fade-up">
|
||||
<div class="stats-band-num" id="big-km">…</div>
|
||||
<div class="stats-band-label">km Gassi-Routen</div>
|
||||
</div>
|
||||
<div class="stats-band-item fade-up">
|
||||
<div class="stats-band-num" id="big-posts">…</div>
|
||||
<div class="stats-band-label">Forum-Beiträge</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Demo-Video -->
|
||||
<section id="demo" style="background:#1a1a1a;padding:64px 20px;text-align:center">
|
||||
<div style="max-width:480px;margin:0 auto">
|
||||
|
|
@ -759,6 +868,44 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section id="stimmen" style="background:white">
|
||||
<div class="container">
|
||||
<h2>Was Hundemenschen sagen</h2>
|
||||
<p class="section-intro">Echte Menschen. Echte Hunde. Echte Momente.</p>
|
||||
<div class="testimonials-grid">
|
||||
|
||||
<div class="testimonial-card fade-up">
|
||||
<div class="testimonial-stars">★★★★★</div>
|
||||
<p class="testimonial-quote testimonial-placeholder">Hier könnte dein Zitat stehen — schreib uns an hallo@banyaro.app</p>
|
||||
<div>
|
||||
<div class="testimonial-author">Maria K.</div>
|
||||
<div class="testimonial-dog">🐾 Luna · Golden Retriever</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial-card fade-up">
|
||||
<div class="testimonial-stars">★★★★★</div>
|
||||
<p class="testimonial-quote testimonial-placeholder">Hier könnte dein Zitat stehen — schreib uns an hallo@banyaro.app</p>
|
||||
<div>
|
||||
<div class="testimonial-author">Thomas W.</div>
|
||||
<div class="testimonial-dog">🐾 Max · Labrador</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial-card fade-up">
|
||||
<div class="testimonial-stars">★★★★★</div>
|
||||
<p class="testimonial-quote testimonial-placeholder">Hier könnte dein Zitat stehen — schreib uns an hallo@banyaro.app</p>
|
||||
<div>
|
||||
<div class="testimonial-author">Sarah M.</div>
|
||||
<div class="testimonial-dog">🐾 Bella · Schäferhund</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sektion B: Für Züchter -->
|
||||
<section id="zuechter" style="background: #fffbf0;">
|
||||
<div class="container">
|
||||
|
|
@ -1179,12 +1326,58 @@
|
|||
</footer>
|
||||
|
||||
<script>
|
||||
// Alle Links die zur App führen (/) setzen das Flag damit kein Redirect-Loop entsteht
|
||||
// App-Links: kein Redirect-Loop
|
||||
document.querySelectorAll('a[href="/"], a[href^="/#"]').forEach(function(a) {
|
||||
a.addEventListener('click', function() {
|
||||
sessionStorage.setItem('by_stay_in_app', '1');
|
||||
});
|
||||
});
|
||||
|
||||
// Scroll-Animationen
|
||||
var _observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(e) {
|
||||
if (e.isIntersecting) {
|
||||
e.target.classList.add('visible');
|
||||
_observer.unobserve(e.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.12 });
|
||||
|
||||
document.querySelectorAll('.outcome-card, .feature-card, .usp-item, .pricing-card').forEach(function(el) {
|
||||
el.classList.add('fade-up');
|
||||
_observer.observe(el);
|
||||
});
|
||||
document.querySelectorAll('.fade-up').forEach(function(el) {
|
||||
_observer.observe(el);
|
||||
});
|
||||
|
||||
// Live-Zahlen von /api/stats/public
|
||||
var fmt = new Intl.NumberFormat('de-DE');
|
||||
fetch('/api/stats/public')
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function(d) {
|
||||
var ids = {
|
||||
users: ['stat-users', 'big-users'],
|
||||
dogs: ['stat-dogs', 'big-dogs'],
|
||||
km: ['stat-km', 'big-km'],
|
||||
forum_posts: [null, 'big-posts'],
|
||||
};
|
||||
function set(id, val) {
|
||||
var el = document.getElementById(id);
|
||||
if (el) el.textContent = fmt.format(val);
|
||||
}
|
||||
set('stat-users', d.users);
|
||||
set('stat-dogs', d.dogs);
|
||||
set('stat-km', d.km);
|
||||
set('big-users', d.users);
|
||||
set('big-dogs', d.dogs);
|
||||
set('big-km', d.km);
|
||||
set('big-posts', d.forum_posts);
|
||||
|
||||
var heroStats = document.getElementById('hero-stats');
|
||||
if (heroStats && d.users > 0) heroStats.style.display = 'flex';
|
||||
})
|
||||
.catch(function() {});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Offline-Cache + Push Notifications + Tile-Cache
|
||||
============================================================ */
|
||||
|
||||
const CACHE_VERSION = 'by-v951';
|
||||
const CACHE_VERSION = 'by-v952';
|
||||
const CACHE_STATIC = `${CACHE_VERSION}-static`;
|
||||
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
|
||||
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue