till/vk-friseur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Galerie: 9:16 Reels/Motion-Sektion ergänzt

Browse Source
This commit is contained in:
Till Heidrich
2026-06-24 10:50:28 +00:00
parent 20b7fe53a0
commit 16109dcfc2
2 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.astro
+13 -2
View File
@@ -133,8 +133,19 @@ const hours = [
<figure><img src="/img/g4.webp" alt="Im Salon" loading="lazy" /></figure>
<figure><img src="/img/g5.webp" alt="Detail" loading="lazy" /></figure>
</div>
<div class="insta-cta reveal">
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener" class="btn btn-ghost">📸 Folgt uns @friseur.team_vk</a>
<div class="reels-head reveal">
<h3>Reels &amp; Motion · 9:16</h3>
<span>Hochformat-Content fürs Handy – direkt für Instagram &amp; TikTok.</span>
</div>
<div class="reels reveal">
<figure class="reel"><img src="/img/g1.webp" alt="Reel Coloration" loading="lazy" /><span class="rlabel">Vorher / Nachher</span></figure>
<figure class="reel"><img src="/img/hero.webp" alt="Reel Salon" loading="lazy" /><span class="rlabel">Salon-Tour</span></figure>
<figure class="reel"><img src="/img/g3.webp" alt="Reel Styling" loading="lazy" /><span class="rlabel">Styling-Clip</span></figure>
<figure class="reel"><img src="/img/g2.webp" alt="Reel Behind the scenes" loading="lazy" /><span class="rlabel">Behind the Scenes</span></figure>
</div>
<div class="insta-cta reveal" style="margin-top:1.6rem">
<span class="demo-flag">Demo · hier laufen später echte 9:16-Clips</span>
<div style="margin-top:1rem"><a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener" class="btn btn-ghost">📸 Folgt uns @friseur.team_vk</a></div>
</div>
</div>
</section>
src/styles/global.css
+12
View File
@@ -156,6 +156,18 @@ section { padding: clamp(72px, 10vw, 130px) 0; }
.gallery .tall { grid-row: span 2; }
.insta-cta { text-align: center; margin-top: 2rem; }
/* REELS 9:16 */
.reels-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 3rem 0 1.2rem; flex-wrap: wrap; }
.reels-head h3 { font-size: 1.5rem; }
.reels-head span { font-size: 0.9rem; color: var(--soft); }
.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.reel { aspect-ratio: 9/16; border-radius: var(--radius); overflow: hidden; position: relative; border: 1px solid var(--border); }
.reel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.reel:hover img { transform: scale(1.06); }
.reel::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.6rem; background: linear-gradient(180deg, rgba(26,26,26,.05), rgba(26,26,26,.45)); text-shadow: 0 2px 12px rgba(0,0,0,.4); transition: transform 0.3s; }
.reel:hover::after { transform: scale(1.15); }
.reel .rlabel { position: absolute; left: 10px; bottom: 10px; z-index: 2; font-size: 0.7rem; font-weight: 600; color: #fff; background: rgba(26,26,26,.55); backdrop-filter: blur(4px); padding: 3px 9px; border-radius: 20px; }
/* WALLET / STEMPELKARTE */
.wallet-sec { background: linear-gradient(160deg, var(--nude), var(--cream-2)); }
.wallet-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }