Landing: 7 Unsplash-Fotos mit Fotografen-Credits eingebaut (SW by-v957)

- Eric Ward: emotionaler 50/50-Split nach Stats-Band
- Baptist Standaert: subtiles Hintergrundbild Demo-Section
- Alvan Nee / Nicholas Brownlow / Wade Austin Ellis / Tamas Pap: 4er-Foto-Strip vor Testimonials
- Chewy: Header-Bild Welpenkäufer-Section
- Alle Fotos mit © Name · Unsplash Credit-Overlay
This commit is contained in:
rene 2026-05-14 19:25:14 +02:00
parent e610613b58
commit 7867507e7d
11 changed files with 112 additions and 5 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '956'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '957'; // ← 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

View file

@ -596,6 +596,65 @@
.testimonial-dog { font-size: 0.8rem; color: var(--primary); font-weight: 500; margin-top: 0.1rem; }
.testimonial-placeholder { opacity: 0.4; font-style: italic; }
/* Foto-Sections */
.photo-credit {
position: absolute;
bottom: 7px; right: 9px;
font-size: 0.62rem;
color: rgba(255,255,255,0.8);
background: rgba(0,0,0,0.32);
padding: 2px 7px;
border-radius: 4px;
letter-spacing: 0.03em;
backdrop-filter: blur(3px);
pointer-events: none;
}
.photo-strip {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 3px;
}
@media (max-width: 640px) { .photo-strip { grid-template-columns: repeat(2,1fr); } }
.photo-strip-item {
position: relative;
aspect-ratio: 1;
overflow: hidden;
}
.photo-strip-item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.45s ease;
display: block;
}
.photo-strip-item:hover img { transform: scale(1.04); }
.moment-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
}
@media (max-width: 700px) {
.moment-split { grid-template-columns: 1fr; }
.moment-split .moment-photo { aspect-ratio: 4/3; min-height: unset; }
}
.moment-photo { position: relative; overflow: hidden; }
.moment-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.moment-text {
background: linear-gradient(135deg, #C4843A 0%, #d4944a 100%);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2rem,5vw,3.5rem);
gap: 1.5rem;
}
.moment-text blockquote {
font-size: clamp(1.3rem,2.5vw,1.9rem);
font-weight: 800;
line-height: 1.3;
margin: 0;
}
.moment-text p { font-size: 1rem; opacity: 0.88; margin: 0; line-height: 1.65; }
/* Scroll animations */
.fade-up {
opacity: 0;
@ -769,8 +828,28 @@
</div>
</section>
<!-- Emotionaler Split: Eric Ward -->
<section style="padding:0;overflow:hidden">
<div class="moment-split">
<div class="moment-photo">
<img src="/img/landing/eric-ward.jpg" alt="Hundebesitzer umarmt seinen Golden Retriever" loading="lazy">
<span class="photo-credit">© Eric Ward · Unsplash</span>
</div>
<div class="moment-text">
<blockquote>„Ich kann mir ein Leben ohne ihn nicht mehr vorstellen."</blockquote>
<p>Das sagen uns Tausende Hundemenschen täglich. Ban Yaro begleitet diese Liebe — mit Tagebuch, Gesundheit, Training und einer Gemeinschaft die genauso fühlt wie du.</p>
<a href="/" class="cta-btn" style="align-self:flex-start;background:white;color:#a86e2e;margin:0;box-shadow:0 4px 20px rgba(0,0,0,.15)"
onclick="sessionStorage.setItem('by_stay_in_app','1')">Kostenlos starten</a>
</div>
</div>
</section>
<!-- Demo-Video -->
<section id="demo" style="background:#1a1a1a;padding:64px 20px;text-align:center">
<section id="demo" style="position:relative;background:#1a1a1a;padding:64px 20px;text-align:center;overflow:hidden">
<img src="/img/landing/baptist-standaert.jpg" alt=""
loading="lazy" aria-hidden="true"
style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:0.15;filter:grayscale(50%)">
<span class="photo-credit" style="position:absolute;top:7px;right:9px">© Baptist Standaert · Unsplash</span>
<div style="max-width:480px;margin:0 auto">
<h2 style="color:white;font-size:clamp(1.3rem,3.5vw,1.8rem);font-weight:800;margin:0 0 12px">
Sieh selbst wie es sich anfühlt
@ -933,6 +1012,28 @@
</div>
</section>
<!-- Foto-Strip -->
<section style="padding:0;overflow:hidden">
<div class="photo-strip">
<div class="photo-strip-item">
<img src="/img/landing/alvan-nee.jpg" alt="Zwei Hunde laufen einen Waldweg entlang" loading="lazy">
<span class="photo-credit">© Alvan Nee · Unsplash</span>
</div>
<div class="photo-strip-item">
<img src="/img/landing/nicholas-brownlow.jpg" alt="Frau gibt ihrem Golden Retriever einen Kuss" loading="lazy">
<span class="photo-credit">© Nicholas Brownlow · Unsplash</span>
</div>
<div class="photo-strip-item">
<img src="/img/landing/wade-austin-ellis.jpg" alt="Frau mit Labrador auf der Wiese" loading="lazy">
<span class="photo-credit">© Wade Austin Ellis · Unsplash</span>
</div>
<div class="photo-strip-item">
<img src="/img/landing/tamas-pap.jpg" alt="Frau lacht während ihr Hund sie abschleckt" loading="lazy">
<span class="photo-credit">© Tamas Pap · Unsplash</span>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="stimmen" style="background:white">
<div class="container">
@ -1049,8 +1150,14 @@
<!-- Sektion C: Für Welpenkäufer -->
<section id="welpen" style="background: white;">
<div style="position:relative;height:280px;overflow:hidden">
<img src="/img/landing/chewy.jpg" alt="Pärchen mit Hund aus dem Tierheim" loading="lazy"
style="width:100%;height:100%;object-fit:cover;object-position:center 40%">
<div style="position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1),rgba(0,0,0,.55))"></div>
<span class="photo-credit">© Chewy · Unsplash</span>
</div>
<div class="container">
<h2>Den richtigen Welpen finden. Sicher.</h2>
<h2 style="margin-top:2.5rem">Den richtigen Welpen finden. Sicher.</h2>
<p class="section-intro">Verifizierte Züchter, transparente Gesundheitsdaten, direkter Kontakt. Kein Kleinanzeigen-Chaos.</p>
<div class="outcome-grid">

View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache
============================================================ */
const CACHE_VERSION = 'by-v956';
const CACHE_VERSION = 'by-v957';
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