VK Friseur Demo-Website (Astro) – initial

This commit is contained in:
till committed 2026-06-24 10:39:10 +00:00
commit 20b7fe53a0
16 files changed
+6207

No files matched your search

+407
View File
@@ -0,0 +1,407 @@
---
import "../styles/global.css";
const services = [
{ ico: "✂️", h: "Damenhaarschnitt", p: "Beratung, Waschen, Schnitt & Styling – abgestimmt auf Haar und Typ.", tag: "Schnitt & Styling" },
{ ico: "🧔", h: "Herren & Barbershop", p: "Klassischer Schnitt, Bartpflege, Konturen und heiße Rasur.", tag: "Barbershop" },
{ ico: "🧒", h: "Kinder", p: "Geduldig, schnell und mit einem Lächeln – der erste Salonbesuch wird schön.", tag: "Familienfreundlich" },
{ ico: "🎨", h: "Balayage & Farbe", p: "Sanfte Übergänge, Foliensträhnen, Glossing – mit Redken & Paul Mitchell.", tag: "Coloration" },
{ ico: "💍", h: "Braut & Event", p: "Probetermin, Hochsteckfrisuren und Styling für euren großen Tag.", tag: "Hochzeitsservice" },
];
const team = [
{ n: "Veronika Sprangel", r: "Inhaberin & Friseurmeisterin", i: "VS" },
{ n: "Iris Winterstein", r: "Stylistin", i: "IW" },
{ n: "Christin Gottschlich", r: "Stylistin", i: "CG" },
{ n: "Marco Gollnast-Heise", r: "Barber & Stylist", i: "MG" },
{ n: "Tina Sahling", r: "Stylistin", i: "TS" },
{ n: "Ella Schizipin", r: "Stylistin", i: "ES" },
{ n: "Fabian Gidom", r: "Auszubildender", i: "FG" },
{ n: "Dennis Sprangel", r: "Organisation", i: "DS" },
];
const hours = [
{ d: "Montag", t: "Geschlossen", closed: true },
{ d: "Dienstag", t: "09:00 – 18:00" },
{ d: "Mittwoch", t: "09:00 – 20:00" },
{ d: "Donnerstag", t: "09:00 – 18:00" },
{ d: "Freitag", t: "09:00 – 20:00" },
{ d: "Samstag", t: "09:00 – 14:00" },
];
---
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Friseur-Team VK · Veronika Sprangel · Friseur in Tostedt</title>
<meta name="description" content="Friseur-Team VK in Tostedt – euer Salon für Schnitt, Farbe, Balayage, Barbershop, Braut & Haarverlängerung. Online Termin buchen, rund um die Uhr." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body>
<header class="nav" id="nav">
<div class="wrap nav-inner">
<a href="#top" class="logo">Friseur-Team <b>VK</b></a>
<nav class="nav-links">
<a href="#leistungen">Leistungen</a>
<a href="#team">Team</a>
<a href="#galerie">Galerie</a>
<a href="#preise">Preise</a>
<a href="#kontakt">Kontakt</a>
</nav>
<div class="nav-cta">
<a href="#buchen" class="btn btn-primary">Termin buchen</a>
</div>
</div>
</header>
<!-- HERO -->
<section class="hero" id="top">
<div class="hero-bg"><img src="/img/hero.webp" alt="Friseur-Team VK Salon in Tostedt" fetchpriority="high" /></div>
<div class="wrap hero-inner">
<span class="eyebrow">Friseur in Tostedt · seit 2017</span>
<h1>Mehr als ein Haarschnitt. <em>Euer Salon</em> in Tostedt.</h1>
<p class="lead">Großes Meisterteam, Premium-Produkte und ein helles Wohlfühl-Ambiente in der Kastanienallee. Von Balayage bis Braut – wir kümmern uns um euren Look.</p>
<div class="hero-actions">
<a href="#buchen" class="btn btn-accent">Termin buchen →</a>
<a href="#leistungen" class="btn btn-ghost" style="color:#fff;border-color:rgba(255,255,255,.4)">Leistungen ansehen</a>
</div>
<div class="hero-trust">
<span>● 8-köpfiges Meisterteam</span>
<span>● Redken &amp; Paul Mitchell</span>
<span>● Damen · Herren · Kinder</span>
</div>
</div>
</section>
<!-- TRUST STRIP -->
<div class="strip">
<div class="wrap strip-inner">
<div><span class="num">2017</span><span class="lbl">seit</span></div>
<div><span class="num">8</span><span class="lbl">Profis im Team</span></div>
<div><span class="num">2</span><span class="lbl">Premium-Marken</span></div>
<div><span class="num">24/7</span><span class="lbl">online buchbar</span></div>
</div>
</div>
<!-- LEISTUNGEN -->
<section id="leistungen">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Leistungen</span>
<h2>Alles rund um euer Haar – aus einer Hand.</h2>
<p>Vom schnellen Schnitt bis zum großen Auftritt. Unser Team berät euch ehrlich und findet den Look, der zu euch passt.</p>
</div>
<div class="bento">
<div class="card-svc feature reveal">
<div>
<div class="ico">💆‍♀️</div>
<h3>Haarverlängerung &amp; Haarverdichtung</h3>
<p>Unser Premium-Segment: mehr Länge, mehr Fülle, natürlich schön. Mit ausführlicher Beratung und hochwertigen Echthaar-Tressen.</p>
</div>
<span class="tag">Spezialität des Hauses →</span>
</div>
{services.map((s) => (
<div class="card-svc reveal">
<div class="ico">{s.ico}</div>
<h3>{s.h}</h3>
<p>{s.p}</p>
<span class="tag">{s.tag}</span>
</div>
))}
</div>
</div>
</section>
<!-- GALERIE -->
<section id="galerie" style="background:var(--cream-2)">
<div class="wrap">
<div class="sec-head center reveal">
<span class="eyebrow">Galerie</span>
<h2>Ergebnisse, die für sich sprechen.</h2>
<p>Ein Einblick in Salon und Handwerk. Bald hier: euer eigenes Foto-Shooting.</p>
</div>
<div class="gallery reveal">
<figure class="big"><img src="/img/salon.webp" alt="Salon-Ambiente" loading="lazy" /></figure>
<figure><img src="/img/g1.webp" alt="Coloration" loading="lazy" /></figure>
<figure class="tall"><img src="/img/g2.webp" alt="Styling" loading="lazy" /></figure>
<figure><img src="/img/g3.webp" alt="Schnitt" loading="lazy" /></figure>
<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>
</div>
</section>
<!-- TEAM -->
<section id="team">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Das Team</span>
<h2>8 Profis. Eine Leidenschaft.</h2>
<p>Das größte Friseurteam in Tostedt – von der Meisterin bis zum Azubi. <span class="demo-flag">Demo · echte Mitarbeiterfotos folgen</span></p>
</div>
<div class="team-grid">
{team.map((m) => (
<div class="member reveal">
<div class="avatar"><span class="ini">{m.i}</span><span class="ph">Foto folgt</span></div>
<div class="mname">{m.n}</div>
<div class="mrole">{m.r}</div>
</div>
))}
</div>
</div>
</section>
<!-- WALLET / STEMPELKARTE -->
<section class="wallet-sec" id="treue">
<div class="wrap wallet-layout">
<div class="reveal">
<span class="eyebrow">Treuekarte – digital</span>
<h2 style="font-size:clamp(2rem,4vw,3rem);margin:.8rem 0 1rem">Die Stempelkarte, die man nie vergisst.</h2>
<p style="color:var(--soft);margin-bottom:1rem">Eure Papier-Stempelkarte – jetzt direkt auf dem Handy. Ein Klick, und die Karte liegt in Apple Wallet oder Google Wallet. Kein Verlieren, kein Suchen. Beim Bezahlen einfach zeigen, wir stempeln digital.</p>
<p style="color:var(--soft)">Optional mit Push-Nachricht, sobald die Karte voll ist – ein sanfter Grund, wiederzukommen.</p>
<div class="wallet-btns">
<button class="wallet-btn" data-wallet> Zu Apple Wallet</button>
<button class="wallet-btn g" data-wallet>Zu Google Wallet</button>
</div>
</div>
<div class="reveal">
<div class="pass">
<div class="pass-top">
<span class="pass-brand">Friseur-Team <b>VK</b></span>
<span class="pass-chip">Treuekarte</span>
</div>
<span class="pass-label">Deine Stempel</span>
<div class="pass-reward">Jeder 10. Schnitt – Pflege gratis 🎁</div>
<div class="stamps">
<div class="stamp on">✂️</div><div class="stamp on">✂️</div><div class="stamp on">✂️</div><div class="stamp on">✂️</div><div class="stamp on">✂️</div>
<div class="stamp on">✂️</div><div class="stamp on">✂️</div><div class="stamp">✂️</div><div class="stamp">✂️</div><div class="stamp">🎁</div>
</div>
<div class="pass-foot"><span>7 / 10 Stempel</span><span>Kastanienallee 1, Tostedt</span></div>
</div>
</div>
</div>
</section>
<!-- BUCHEN -->
<section class="book-sec" id="buchen">
<div class="wrap">
<div class="sec-head center reveal">
<span class="eyebrow" style="color:var(--terracotta)">Online buchen</span>
<h2>Termin buchen – rund um die Uhr.</h2>
<p>In drei Schritten zum Wunschtermin. Eure Anfrage landet direkt bei euch im Salon – ihr bestätigt wie gewohnt, die Erinnerung läuft automatisch.</p>
</div>
<div class="booker reveal">
<div class="steps-nav">
<div class="step-dot active" data-dot="0"></div>
<div class="step-dot" data-dot="1"></div>
<div class="step-dot" data-dot="2"></div>
</div>
<div class="step active" data-step="0">
<h3>1 · Leistung wählen</h3>
<div class="opt-grid">
<div class="opt" data-pick="svc" data-val="Damenschnitt"><span class="o-name">Damenschnitt</span><span class="o-meta">ca. 60 Min</span></div>
<div class="opt" data-pick="svc" data-val="Herren / Barber"><span class="o-name">Herren / Barber</span><span class="o-meta">ca. 40 Min</span></div>
<div class="opt" data-pick="svc" data-val="Balayage & Farbe"><span class="o-name">Balayage &amp; Farbe</span><span class="o-meta">ca. 150 Min</span></div>
<div class="opt" data-pick="svc" data-val="Beratung Verlängerung"><span class="o-name">Beratung Verlängerung</span><span class="o-meta">ca. 30 Min</span></div>
</div>
</div>
<div class="step" data-step="1">
<h3>2 · Termin wählen</h3>
<p style="color:rgba(255,255,255,.6);font-size:.85rem;margin-bottom:1rem">Freie Zeiten · Mittwoch</p>
<div class="slots">
<div class="slot" data-pick="time" data-val="09:30">09:30</div>
<div class="slot" data-pick="time" data-val="11:00">11:00</div>
<div class="slot" data-pick="time" data-val="13:30">13:30</div>
<div class="slot" data-pick="time" data-val="15:00">15:00</div>
<div class="slot" data-pick="time" data-val="16:30">16:30</div>
<div class="slot" data-pick="time" data-val="17:15">17:15</div>
<div class="slot" data-pick="time" data-val="18:00">18:00</div>
<div class="slot" data-pick="time" data-val="19:00">19:00</div>
</div>
</div>
<div class="step" data-step="2">
<div class="confirm-box">
<div class="ok">✓</div>
<h3 style="text-align:center">Fast geschafft!</h3>
<p style="color:rgba(255,255,255,.7)">Eure Anfrage <b style="color:var(--terracotta)" id="sumLine">…</b> geht an den Salon. Ihr bekommt die Bestätigung per WhatsApp – und 24 h vorher eine Erinnerung zum Bestätigen oder Absagen.</p>
</div>
</div>
<div class="book-foot">
<div class="book-summary">Auswahl: <b id="sumSvc">–</b> · <b id="sumTime">–</b></div>
<div>
<button class="btn btn-ghost" id="backBtn" style="color:#fff;border-color:rgba(255,255,255,.3);display:none">Zurück</button>
<button class="btn btn-accent" id="nextBtn">Weiter</button>
</div>
</div>
<p class="note-line">Demo-Ablauf · echte Buchung später self-hosted (Cal.com) + WhatsApp-Bestätigung</p>
</div>
</div>
</section>
<!-- REVIEWS -->
<section id="bewertungen">
<div class="wrap">
<div class="sec-head center reveal">
<span class="eyebrow">Bewertungen</span>
<h2>Was unsere Gäste sagen.</h2>
<p><span class="demo-flag">Demo-Texte · später echte Google-Bewertungen</span></p>
</div>
<div class="reviews">
<div class="review reveal"><div class="stars">★★★★★</div><p>„Endlich ein Salon, in dem man sich wohlfühlt. Veronika und ihr Team beraten ehrlich – meine Balayage ist ein Traum."</p><div class="who">— Sandra K.</div></div>
<div class="review reveal"><div class="stars">★★★★★</div><p>„Mein Sohn war zum ersten Mal entspannt beim Friseur. Schnell, freundlich, total geduldig mit Kindern."</p><div class="who">— Markus T.</div></div>
<div class="review reveal"><div class="stars">★★★★★</div><p>„Brautstyling war perfekt. Probetermin, alles abgestimmt, am großen Tag hat alles gesessen. Danke!"</p><div class="who">— Lena & Tim</div></div>
</div>
</div>
</section>
<!-- PREISE -->
<section id="preise" style="background:var(--cream-2)">
<div class="wrap">
<div class="sec-head center reveal">
<span class="eyebrow">Preise</span>
<h2>Transparente Richtwerte.</h2>
<p>Damit ihr wisst, woran ihr seid. Der Endpreis hängt von Haarlänge und Aufwand ab – wir beraten euch vorab.</p>
</div>
<div class="price-grid reveal">
<div class="price-col">
<h3>✂️ Schnitt &amp; Styling</h3>
<div class="price-row"><span class="name">Damen – Waschen, Schnitt, Föhnen</span><span class="val">ab 42 €</span></div>
<div class="price-row"><span class="name">Herren – Schnitt</span><span class="val">ab 24 €</span></div>
<div class="price-row"><span class="name">Bart / Konturen</span><span class="val">ab 14 €</span></div>
<div class="price-row"><span class="name">Kinder (bis 12 J.)</span><span class="val">ab 18 €</span></div>
<div class="price-row"><span class="name">Waschen &amp; Föhnen</span><span class="val">ab 20 €</span></div>
</div>
<div class="price-col">
<h3>🎨 Farbe &amp; Spezial</h3>
<div class="price-row"><span class="name">Ansatzfarbe</span><span class="val">ab 48 €</span></div>
<div class="price-row"><span class="name">Foliensträhnen</span><span class="val">ab 75 €</span></div>
<div class="price-row"><span class="name">Balayage</span><span class="val">ab 120 €</span></div>
<div class="price-row"><span class="name">Brautstyling <small>inkl. Probetermin</small></span><span class="val">ab 95 €</span></div>
<div class="price-row"><span class="name">Haarverlängerung <small>nach Beratung</small></span><span class="val">auf Anfrage</span></div>
</div>
</div>
<p class="price-note"><span class="demo-flag">Demo-Richtwerte</span> &nbsp;Echte Preise tragen wir gemeinsam ein.</p>
</div>
</section>
<!-- FAQ -->
<section id="faq">
<div class="wrap">
<div class="sec-head center reveal">
<span class="eyebrow">FAQ</span>
<h2>Häufige Fragen.</h2>
</div>
<div class="faq reveal">
<details><summary>Muss ich vorher anrufen?</summary><div class="ans">Nein. Ihr könnt rund um die Uhr online anfragen – auch abends und am Wochenende. Telefonisch erreicht ihr uns natürlich weiterhin zu den Öffnungszeiten.</div></details>
<details><summary>Welche Produkte verwendet ihr?</summary><div class="ans">Wir arbeiten mit Redken und Paul Mitchell – hochwertige Marken für Schnitt, Pflege und Coloration.</div></details>
<details><summary>Macht ihr auch Haarverlängerungen?</summary><div class="ans">Ja, das ist eine unserer Spezialitäten. Wir bieten Haarverlängerung und Haarverdichtung mit ausführlicher Beratung an.</div></details>
<details><summary>Bekomme ich eine Erinnerung an meinen Termin?</summary><div class="ans">Ja. Vor dem Termin erhaltet ihr eine Erinnerung – künftig per WhatsApp mit der Möglichkeit, direkt zu bestätigen oder abzusagen.</div></details>
<details><summary>Seid ihr auch für Kinder geeignet?</summary><div class="ans">Absolut. Unser Team ist geduldig und familienfreundlich – der erste Friseurbesuch soll Spaß machen.</div></details>
<details><summary>Wo finde ich euch?</summary><div class="ans">Kastanienallee 1, 21255 Tostedt. Parkmöglichkeiten sind in der Nähe vorhanden.</div></details>
</div>
</div>
</section>
<!-- FOOTER / KONTAKT -->
<footer id="kontakt">
<div class="wrap">
<div class="foot-grid">
<div class="foot-col">
<div class="logo">Friseur-Team <span class="u">VK</span></div>
<p>Veronika Sprangel<br/>Kastanienallee 1<br/>21255 Tostedt</p>
<a href="tel:+4941822889535">+49 4182 2889535</a>
<a href="mailto:info@friseur-team-vk.de">info@friseur-team-vk.de</a>
<a class="wa-btn" href="https://wa.me/4941822889535" target="_blank" rel="noopener">💬 WhatsApp</a>
</div>
<div class="foot-col">
<h4>Öffnungszeiten</h4>
{hours.map((h) => (
<div class={"hours-row" + (h.closed ? " closed" : "")}><span>{h.d}</span><span>{h.t}</span></div>
))}
</div>
<div class="foot-col">
<h4>Folgt uns</h4>
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener">Instagram</a>
<a href="https://www.facebook.com/FriseurTeamVK" target="_blank" rel="noopener">Facebook</a>
<a href="https://search.google.com/local/writereview?placeid=ChIJoaTlnmahsUcRFbgiyxAG0Fs" target="_blank" rel="noopener">Google bewerten</a>
<a href="#buchen" class="btn btn-accent" style="margin-top:1rem">Termin buchen →</a>
</div>
</div>
<div class="foot-bottom">
<span>© 2026 Friseur-Team VK · Veronika Sprangel · Tostedt</span>
<span><a href="#">Impressum</a> · <a href="#">Datenschutz</a> · Demo-Entwurf von Heidrich Digital</span>
</div>
</div>
</footer>
<div class="toast" id="toast">In Apple/Google Wallet hinzufügen – im Live-System aktiv ✨</div>
<script is:inline>
// nav scroll
const nav = document.getElementById('nav');
const onScroll = () => nav.classList.toggle('scrolled', window.scrollY > 40);
onScroll(); window.addEventListener('scroll', onScroll, { passive: true });
// reveal
const io = new IntersectionObserver((es) => {
es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
}, { threshold: 0.12 });
document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
// wallet toast
const toast = document.getElementById('toast');
document.querySelectorAll('[data-wallet]').forEach((b) => b.addEventListener('click', () => {
toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2600);
}));
// booking
let step = 0; const picks = { svc: null, time: null };
const steps = document.querySelectorAll('.step');
const dots = document.querySelectorAll('.step-dot');
const nextBtn = document.getElementById('nextBtn');
const backBtn = document.getElementById('backBtn');
const sumSvc = document.getElementById('sumSvc');
const sumTime = document.getElementById('sumTime');
function render() {
steps.forEach((s, i) => s.classList.toggle('active', i === step));
dots.forEach((d, i) => d.classList.toggle('active', i <= step));
backBtn.style.display = step === 0 ? 'none' : 'inline-flex';
nextBtn.textContent = step === 2 ? 'Anfrage senden' : 'Weiter';
if (step === 2) {
const line = `${picks.svc || 'Termin'} · Mi ${picks.time || ''}`;
document.getElementById('sumLine').textContent = line;
}
}
document.querySelectorAll('[data-pick]').forEach((el) => el.addEventListener('click', () => {
const type = el.dataset.pick;
el.parentElement.querySelectorAll('[data-pick]').forEach((x) => x.classList.remove('sel'));
el.classList.add('sel');
picks[type] = el.dataset.val;
if (type === 'svc') sumSvc.textContent = picks.svc;
if (type === 'time') sumTime.textContent = picks.time;
}));
nextBtn.addEventListener('click', () => {
if (step === 0 && !picks.svc) { sumSvc.textContent = 'bitte wählen'; return; }
if (step === 1 && !picks.time) { sumTime.textContent = 'bitte wählen'; return; }
if (step === 2) { toast.textContent = 'Anfrage gesendet – Demo ✨'; toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2600); return; }
step++; render();
});
backBtn.addEventListener('click', () => { if (step > 0) { step--; render(); } });
render();
</script>
</body>
</html>