Redesign auf Basis Claude-Design + Landingpages (HV/Balayage/Braut/Treuekarte) + echtes Logo
This commit is contained in:
Generated
-5486
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
@@ -0,0 +1,111 @@
|
||||
---
|
||||
import "../styles/site.css";
|
||||
const { title = "Friseur-Team VK · Veronika Sprangel · Friseur in Tostedt", description = "Friseur-Team VK in Tostedt – Schnitt, Farbe, Balayage, Barbershop, Braut & Haarverlängerung. Meisterbetrieb seit 2017, 8-köpfiges Team." } = Astro.props;
|
||||
const tel = "+4941822889535";
|
||||
const telDisplay = "04182 / 28 89 535";
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<link rel="icon" href="/img/logo.png" />
|
||||
<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=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="topbar">
|
||||
<div class="inner">
|
||||
<span><span class="dot"></span>Willkommen bei Friseur-Team VK · Ihr Friseur im Herzen von Tostedt</span>
|
||||
<span class="right">
|
||||
<a href={`tel:${tel}`}>{telDisplay}</a>
|
||||
<span class="muted">Di–Sa · Termine nach Vereinbarung</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<header class="header">
|
||||
<div class="inner">
|
||||
<a href="/" class="brand" aria-label="Friseur-Team VK Startseite">
|
||||
<img src="/img/logo.png" alt="Friseur-Team VK Tostedt" height="46" style="height:46px;width:auto" />
|
||||
</a>
|
||||
<nav class="nav">
|
||||
<a href="/#leistungen">Leistungen</a>
|
||||
<a href="/haarverlaengerung">Haarverlängerung</a>
|
||||
<a href="/braut">Braut</a>
|
||||
<a href="/treuekarte">Treuekarte</a>
|
||||
<a href="/#kontakt">Kontakt</a>
|
||||
</nav>
|
||||
<div class="header-cta">
|
||||
<a href={`tel:${tel}`} class="tel">{telDisplay}</a>
|
||||
<a href="/#buchen" class="btn btn-dark btn-sm">Termin buchen</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container" style="padding-top:clamp(48px,7vw,80px);padding-bottom:clamp(48px,7vw,80px)">
|
||||
<div class="grid">
|
||||
<div>
|
||||
<span style="display:inline-flex;background:#fff;border-radius:12px;padding:10px 14px">
|
||||
<img src="/img/logo.png" alt="Friseur-Team VK" height="40" style="height:40px;width:auto" />
|
||||
</span>
|
||||
<p class="lead">Ihr Meisterbetrieb für schöne Haare in Tostedt – mit Zeit, Handwerk und einem guten Gefühl. Inhaberin: Veronika Sprangel.</p>
|
||||
<a class="wa" href={`https://wa.me/${tel.replace('+','')}`} target="_blank" rel="noopener">💬 WhatsApp</a>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Salon</h4>
|
||||
<div class="col">
|
||||
<a href="/#leistungen">Leistungen</a>
|
||||
<a href="/haarverlaengerung">Haarverlängerung</a>
|
||||
<a href="/braut">Braut & Event</a>
|
||||
<a href="/treuekarte">Treuekarte</a>
|
||||
<a href="/#galerie">Galerie</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Kontakt</h4>
|
||||
<div class="col">
|
||||
<a href={`tel:${tel}`}>{telDisplay}</a>
|
||||
<a href="mailto:info@friseur-team-vk.de">info@friseur-team-vk.de</a>
|
||||
<span>Kastanienallee 1</span>
|
||||
<span>21255 Tostedt</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Öffnungszeiten</h4>
|
||||
<div class="col">
|
||||
<span class="hours-row closed"><span>Montag</span><span>geschlossen</span></span>
|
||||
<span class="hours-row"><span>Di · Do</span><span>9–18 Uhr</span></span>
|
||||
<span class="hours-row"><span>Mi · Fr</span><span>9–20 Uhr</span></span>
|
||||
<span class="hours-row"><span>Samstag</span><span>9–14 Uhr</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span>© 2026 Friseur-Team VK · Veronika Sprangel · Tostedt</span>
|
||||
<div style="display:flex;align-items:center;gap:22px">
|
||||
<a href="#">Impressum</a><a href="#">Datenschutz</a>
|
||||
<span style="color:#74758a">Demo · Heidrich Digital</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="toast" id="toast">Aktion – im Live-System aktiv ✨</div>
|
||||
<script is:inline>
|
||||
const io=new IntersectionObserver((es)=>{es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.1});
|
||||
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
|
||||
window.__toast=(m)=>{const t=document.getElementById('toast');if(!t)return;if(m)t.textContent=m;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2600)};
|
||||
document.querySelectorAll('[data-wallet]').forEach(b=>b.addEventListener('click',()=>window.__toast('Zu Apple/Google Wallet hinzufügen – im Live-System aktiv ✨')));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
import Base from "../layouts/Base.astro";
|
||||
---
|
||||
<Base title="Balayage & Farbe in Tostedt · Friseur-Team VK" description="Balayage, Foliensträhnen und Coloration bei Friseur-Team VK Tostedt – natürliche Farbverläufe mit Redken & Paul Mitchell. Jetzt Farbtermin anfragen.">
|
||||
|
||||
<section class="lp-hero">
|
||||
<div class="container grid">
|
||||
<div>
|
||||
<span class="eyebrow"><span class="ln"></span>Farbe & Balayage</span>
|
||||
<h1>Farbe, die wie Sonne im Haar aussieht.</h1>
|
||||
<p class="lead">Weiche Verläufe, feine Strähnen, lebendiger Glanz. Wir mischen Ihre Farbe individuell – schonend, hochwertig und so natürlich, dass der Ansatz mitwächst statt aufzufallen.</p>
|
||||
<div class="pill-row">
|
||||
<span class="pill">✓ Redken & Paul Mitchell</span>
|
||||
<span class="pill">✓ Schonende Technik</span>
|
||||
<span class="pill">✓ Individuell gemischt</span>
|
||||
</div>
|
||||
<div class="actions" style="margin-top:28px;display:flex;gap:14px;flex-wrap:wrap">
|
||||
<a href="/#buchen" class="btn btn-dark">Farbtermin anfragen</a>
|
||||
<a href="/#galerie" class="btn btn-outline">Ergebnisse ansehen</a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/img/g3.webp" alt="Balayage bei Friseur-Team VK" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="head-center reveal">
|
||||
<span class="eyebrow center"><span class="ln"></span>Unsere Farbleistungen<span class="ln"></span></span>
|
||||
<h2>Für jeden Typ der richtige Ton</h2>
|
||||
</div>
|
||||
<div class="feature-grid">
|
||||
<div class="fcard reveal"><div class="ic">🌿</div><h3>Balayage</h3><p>Frei Hand gemalte Highlights für natürliche Tiefe – pflegeleicht, weil der Ansatz weich herauswächst.</p></div>
|
||||
<div class="fcard reveal"><div class="ic">✨</div><h3>Foliensträhnen</h3><p>Präzise Aufhellung für mehr Kontrast und Leuchtkraft – klassisch oder modern abgestuft.</p></div>
|
||||
<div class="fcard reveal"><div class="ic">💧</div><h3>Glossing & Pflege</h3><p>Farbauffrischung und Glanz-Veredelung – für gesunde, spiegelnde Haaroberfläche.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section bg-soft">
|
||||
<div class="container">
|
||||
<div class="banner reveal">
|
||||
<div>
|
||||
<span class="eyebrow"><span class="ln"></span>Vorher / Nachher</span>
|
||||
<h3>Sehen Sie Ergebnisse, bevor Sie kommen.</h3>
|
||||
<p style="margin-top:10px;color:var(--body)">Auf Instagram zeigen wir laufend echte Vorher/Nachher-Transformationen – als Reel im Hochformat.</p>
|
||||
</div>
|
||||
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener" class="btn btn-dark">@friseur.team_vk</a>
|
||||
</div>
|
||||
<div class="gal reveal" style="margin-top:32px">
|
||||
<a href="/#galerie"><img src="/img/g1.webp" alt="Farbergebnis" loading="lazy" /></a>
|
||||
<a href="/#galerie"><img src="/img/g3.webp" alt="Farbergebnis" loading="lazy" /></a>
|
||||
<a href="/#galerie"><img src="/img/g4.webp" alt="Farbergebnis" loading="lazy" /></a>
|
||||
<a href="/#galerie"><img src="/img/hv.jpg" alt="Farbergebnis" loading="lazy" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</Base>
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
import Base from "../layouts/Base.astro";
|
||||
---
|
||||
<Base title="Brautstyling & Hochsteckfrisuren in Tostedt · Friseur-Team VK" description="Brautstyling mit Probetermin bei Friseur-Team VK Tostedt – entspannt zum perfekten Look für Ihren großen Tag. Jetzt Termin sichern.">
|
||||
|
||||
<section class="lp-hero">
|
||||
<div class="container grid">
|
||||
<div>
|
||||
<span class="eyebrow"><span class="ln"></span>Braut & Event</span>
|
||||
<h1>Ihr schönster Tag beginnt mit dem perfekten Look.</h1>
|
||||
<p class="lead">Vom Probetermin bis zum großen Moment: Wir planen Ihr Brautstyling in Ruhe, stimmen jedes Detail ab und sorgen dafür, dass am Hochzeitstag alles sitzt – ohne Stress.</p>
|
||||
<div class="pill-row">
|
||||
<span class="pill">✓ Probetermin inklusive</span>
|
||||
<span class="pill">✓ Hochsteckfrisuren</span>
|
||||
<span class="pill">✓ Termin früh sichern</span>
|
||||
</div>
|
||||
<div class="actions" style="margin-top:28px;display:flex;gap:14px;flex-wrap:wrap">
|
||||
<a href="#anfrage" class="btn btn-dark">Brauttermin sichern</a>
|
||||
<a href="https://wa.me/4941822889535" target="_blank" rel="noopener" class="btn btn-outline">Per WhatsApp fragen</a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/img/g6.webp" alt="Brautstyling bei Friseur-Team VK" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="head-center reveal">
|
||||
<span class="eyebrow center"><span class="ln"></span>So planen wir<span class="ln"></span></span>
|
||||
<h2>Entspannt zum großen Tag</h2>
|
||||
</div>
|
||||
<div class="feature-grid">
|
||||
<div class="fcard reveal"><div class="ic">📅</div><h3>1 · Probetermin</h3><p>Wir testen Frisur und Styling in Ruhe – mit Zeit für Wünsche, Accessoires und Anpassungen.</p></div>
|
||||
<div class="fcard reveal"><div class="ic">💍</div><h3>2 · Der große Tag</h3><p>Pünktlich, entspannt und perfekt vorbereitet – auf Wunsch auch früh morgens vor der Trauung.</p></div>
|
||||
<div class="fcard reveal"><div class="ic">📸</div><h3>3 · Perfekt auf Fotos</h3><p>Wir stylen so, dass es den ganzen Tag und auf jedem Foto hält.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section bg-soft">
|
||||
<div class="container">
|
||||
<div class="banner reveal">
|
||||
<div>
|
||||
<span class="eyebrow"><span class="ln"></span>Frühzeitig sichern</span>
|
||||
<h3 id="anfrage">Hochzeitstermine sind begehrt – sichern Sie Ihren früh.</h3>
|
||||
<p style="margin-top:10px;color:var(--body)">Brauttermine reservieren wir verbindlich mit einer kleinen Anzahlung. Das hält Ihren Wunschtermin frei und gibt beiden Seiten Planungssicherheit.</p>
|
||||
</div>
|
||||
<a href="/#buchen" class="btn btn-dark">Termin anfragen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</Base>
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
import Base from "../layouts/Base.astro";
|
||||
---
|
||||
<Base title="Haarverlängerung & Haarverdichtung in Tostedt · Friseur-Team VK" description="Premium-Haarverlängerung und Haarverdichtung bei Friseur-Team VK Tostedt – ausführliche Beratung, Echthaar, natürliches Ergebnis. Jetzt Beratungstermin sichern.">
|
||||
|
||||
<section class="lp-hero">
|
||||
<div class="container grid">
|
||||
<div>
|
||||
<span class="eyebrow"><span class="ln"></span>Spezialität des Hauses</span>
|
||||
<h1>Mehr Länge. Mehr Fülle. Natürlich schön.</h1>
|
||||
<p class="lead">Haarverlängerung und Haarverdichtung sind unser Steckenpferd. Mit hochwertigem Echthaar, ehrlicher Beratung und viel Erfahrung holen wir das Beste aus Ihrem Haar – so, dass niemand es sieht und jeder es bemerkt.</p>
|
||||
<div class="pill-row">
|
||||
<span class="pill">✓ Ausführliche Beratung</span>
|
||||
<span class="pill">✓ Echthaar-Qualität</span>
|
||||
<span class="pill">✓ Natürliches Ergebnis</span>
|
||||
</div>
|
||||
<div class="actions" style="margin-top:28px;display:flex;gap:14px;flex-wrap:wrap">
|
||||
<a href="#beratung" class="btn btn-dark">Beratungstermin sichern</a>
|
||||
<a href="/#galerie" class="btn btn-outline">Ergebnisse ansehen</a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/img/hv.jpg" alt="Haarverlängerung bei Friseur-Team VK" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="head-center reveal">
|
||||
<span class="eyebrow center"><span class="ln"></span>So läuft's<span class="ln"></span></span>
|
||||
<h2>Ehrlich beraten, sorgfältig umgesetzt</h2>
|
||||
</div>
|
||||
<div class="feature-grid">
|
||||
<div class="fcard reveal"><div class="ic">💬</div><h3>1 · Beratung</h3><p>Wir schauen uns Ihr Haar an, klären Wünsche, Methode, Pflege und Budget – unverbindlich und transparent.</p></div>
|
||||
<div class="fcard reveal"><div class="ic">💇♀️</div><h3>2 · Anwendung</h3><p>Schonende Anbringung mit Echthaar, abgestimmt auf Farbe und Struktur – für ein Ergebnis, das sich echt anfühlt.</p></div>
|
||||
<div class="fcard reveal"><div class="ic">✨</div><h3>3 · Pflege</h3><p>Sie bekommen einen klaren Pflegeplan und Folgetermine – damit das Ergebnis lange schön bleibt.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section bg-soft">
|
||||
<div class="container">
|
||||
<div class="banner reveal">
|
||||
<div>
|
||||
<span class="eyebrow"><span class="ln"></span>Beratung sichern</span>
|
||||
<h3 id="beratung">Kostenlose Erstberatung – mit verbindlichem Termin per WhatsApp.</h3>
|
||||
<p style="margin-top:10px;color:var(--body)">Für aufwendige Termine sichern wir den Platz mit einer kleinen Anzahlung – das reduziert Ausfälle und hält den Kalender frei für ernsthafte Anfragen.</p>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<a href="/#buchen" class="btn btn-dark">Termin anfragen</a>
|
||||
<a href="https://wa.me/4941822889535" target="_blank" rel="noopener" class="btn btn-outline">Per WhatsApp fragen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="reels-head reveal" style="margin-top:0">
|
||||
<h3>Vorher / Nachher · 9:16</h3>
|
||||
<span>Echte Ergebnisse als Reel – ideal für Instagram.</span>
|
||||
</div>
|
||||
<div class="reels reveal">
|
||||
<figure class="reel"><img src="/img/hv.jpg" alt="Reel" loading="lazy" /><span class="lab">Verlängerung</span></figure>
|
||||
<figure class="reel"><img src="/img/g1.webp" alt="Reel" loading="lazy" /><span class="lab">Vorher / Nachher</span></figure>
|
||||
<figure class="reel"><img src="/img/g3.webp" alt="Reel" loading="lazy" /><span class="lab">Farbe & Glanz</span></figure>
|
||||
<figure class="reel"><img src="/img/g4.webp" alt="Reel" loading="lazy" /><span class="lab">Im Salon</span></figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</Base>
|
||||
+207
-345
@@ -1,221 +1,162 @@
|
||||
---
|
||||
import "../styles/global.css";
|
||||
|
||||
import Base from "../layouts/Base.astro";
|
||||
const scissors = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><line x1="20" y1="4" x2="8.12" y2="15.88"></line><line x1="14.47" y1="14.48" x2="20" y2="20"></line><line x1="8.12" y1="8.12" x2="12" y2="12"></line></svg>`;
|
||||
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" },
|
||||
{ img: "/img/g4.webp", h: "Damen – Schnitt & Föhnen", p: "Waschen, individueller Schnitt und Styling – abgestimmt auf Haarstruktur und Typ.", price: "ab 42 €", href: "#buchen" },
|
||||
{ img: "/img/g5.webp", h: "Herren & Barbershop", p: "Präziser Schnitt, saubere Übergänge, Bartpflege und klassische Rasur.", price: "ab 24 €", href: "#buchen" },
|
||||
{ img: "/img/g1.webp", h: "Coloration & Strähnen", p: "Glanzvolle Farben und feine Strähnen – schonend mit Redken & Paul Mitchell.", price: "ab 59 €", href: "#buchen" },
|
||||
{ img: "/img/g3.webp", h: "Balayage & Highlights", p: "Natürliche Farbverläufe und sonnige Akzente für mehr Tiefe und Dimension.", price: "ab 89 €", href: "/balayage" },
|
||||
{ img: "/img/hv.jpg", h: "Haarverlängerung & -verdichtung", p: "Unsere Spezialität: mehr Länge und Fülle, natürlich schön – mit ausführlicher Beratung.", price: "auf Anfrage", href: "/haarverlaengerung", feature: true },
|
||||
{ img: "/img/g6.webp", h: "Braut & Hochsteckfrisuren", p: "Festliche Stylings für Hochzeit und besondere Anlässe – inkl. Probetermin.", price: "ab 95 €", href: "/braut" },
|
||||
];
|
||||
---
|
||||
<Base>
|
||||
|
||||
<!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 & 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">
|
||||
<!-- HERO -->
|
||||
<section class="hero" id="top">
|
||||
<div class="container grid">
|
||||
<div>
|
||||
<div class="ico">💆♀️</div>
|
||||
<h3>Haarverlängerung & 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>
|
||||
<span class="eyebrow"><span class="ln"></span>Ihr Friseur in Tostedt</span>
|
||||
<h1>Zeit für schöne Haare.</h1>
|
||||
<p class="lead">Persönliche Beratung, präzise Schnitte und moderne Farbtechniken – mitten in Tostedt. Unser 8-köpfiges Meisterteam nimmt sich Zeit für Sie, Ihren Typ und Ihren Alltag.</p>
|
||||
<div class="actions">
|
||||
<a href="#buchen" class="btn btn-dark">Termin buchen</a>
|
||||
<a href="#leistungen" class="btn btn-outline">Unsere Leistungen</a>
|
||||
</div>
|
||||
<span class="tag">Spezialität des Hauses →</span>
|
||||
<div class="stats">
|
||||
<span>Meisterbetrieb seit 2017</span>
|
||||
<span class="sep"></span>
|
||||
<span>Redken & Paul Mitchell</span>
|
||||
<span class="sep"></span>
|
||||
<span>Damen · Herren · Kinder</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-media">
|
||||
<img src="/img/hero.webp" alt="Friseur-Team VK Salon in Tostedt" fetchpriority="high" />
|
||||
<div class="float-card">
|
||||
<span class="ic" set:html={scissors}></span>
|
||||
<span style="line-height:1.2"><span style="display:block;font-weight:700;color:var(--ink);font-size:15px">Größtes Team in Tostedt</span><span style="font-size:13px;color:var(--muted)">8 Profis · seit 2017</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- INFO STRIP -->
|
||||
<section class="infostrip">
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col"><h4>Kontakt</h4><p>04182 / 28 89 535<br>info@friseur-team-vk.de</p></div>
|
||||
<div class="col"><h4>Öffnungszeiten</h4><p>Di–Sa geöffnet<br>Mi & Fr bis 20 Uhr · Mo geschlossen</p></div>
|
||||
<div class="col"><h4>Standort</h4><p>Kastanienallee 1<br>21255 Tostedt</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section id="ueber" class="section">
|
||||
<div class="container split reveal">
|
||||
<img class="media" src="/img/salon.webp" alt="Im Salon von Friseur-Team VK" />
|
||||
<div>
|
||||
<span class="eyebrow"><span class="ln"></span>Warum Friseur-Team VK?</span>
|
||||
<h2>Mehr als ein Friseursalon – ein Ort zum Wohlfühlen</h2>
|
||||
<p class="bodytext">Bei uns stehen Sie im Mittelpunkt. In heller, ruhiger Atmosphäre beraten wir Sie ehrlich, hören zu und finden gemeinsam Schnitt und Farbe, die wirklich zu Ihnen passen. Unser eingespieltes Team aus acht Profis bildet sich regelmäßig weiter – für Handwerk, das man sieht und fühlt.</p>
|
||||
<div class="checks">
|
||||
<div class="check"><span class="tick">✓</span>Persönliche Typberatung</div>
|
||||
<div class="check"><span class="tick">✓</span>Redken & Paul Mitchell</div>
|
||||
<div class="check"><span class="tick">✓</span>Experten für Haarverlängerung</div>
|
||||
<div class="check"><span class="tick">✓</span>Damen · Herren · Kinder</div>
|
||||
</div>
|
||||
<a href="#leistungen" class="btn btn-dark" style="margin-top:34px">Unsere Leistungen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SERVICES -->
|
||||
<section id="leistungen" class="section bg-soft">
|
||||
<div class="container">
|
||||
<div class="head-center reveal">
|
||||
<span class="eyebrow center"><span class="ln"></span>Unsere Leistungen<span class="ln"></span></span>
|
||||
<h2>Alles rund um Ihr Haar</h2>
|
||||
<p>Vom klassischen Schnitt bis zur aufwendigen Farbe – alles aus einer Hand, mit Sorgfalt und Zeit.</p>
|
||||
</div>
|
||||
<div class="svc-grid">
|
||||
{services.map((s) => (
|
||||
<div class="card-svc reveal">
|
||||
<div class="ico">{s.ico}</div>
|
||||
<a href={s.href} class="scard reveal" style={s.feature ? "border-color:var(--accent)" : ""}>
|
||||
<div class="imgwrap">
|
||||
<img src={s.img} alt={s.h} loading="lazy" />
|
||||
<span class="badge" set:html={scissors}></span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<h3>{s.h}</h3>
|
||||
<p>{s.p}</p>
|
||||
<span class="tag">{s.tag}</span>
|
||||
<div class="row">
|
||||
<span class="price">{s.price}</span>
|
||||
<span class="more">{s.feature || s.href.startsWith("/") ? "Mehr erfahren →" : "Termin →"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<p style="text-align:center;margin-top:26px"><span class="demo-flag">Demo-Richtwerte</span> echte Preise tragen wir gemeinsam ein.</p>
|
||||
<div class="center-actions">
|
||||
<a href="#buchen" class="btn btn-dark">Termin buchen</a>
|
||||
<a href="/treuekarte" class="btn btn-outline">Digitale Treuekarte ansehen</a>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
<!-- DARK CTA BAND -->
|
||||
<section class="cta-band">
|
||||
<div class="container inner">
|
||||
<div>
|
||||
<span class="eyebrow">Bereit für einen frischen Look?</span>
|
||||
<h2>Vereinbaren Sie jetzt Ihren Termin bei Friseur-Team VK.</h2>
|
||||
</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="reels-head reveal">
|
||||
<h3>Reels & Motion · 9:16</h3>
|
||||
<span>Hochformat-Content fürs Handy – direkt für Instagram & 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 style="display:flex;flex-wrap:wrap;gap:14px;align-items:center">
|
||||
<a href="#buchen" class="btn btn-light">Termin buchen</a>
|
||||
<a href="tel:+4941822889535" class="btn btn-outline" style="border-color:rgba(255,255,255,.35);color:#fff">04182 / 28 89 535</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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">
|
||||
<!-- TREUEKARTE TEASER -->
|
||||
<section class="section" id="treue">
|
||||
<div class="container wallet-grid">
|
||||
<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>
|
||||
<span class="eyebrow"><span class="ln"></span>Treuekarte – digital</span>
|
||||
<h2 style="margin:16px 0 0;font-size:clamp(28px,3.4vw,42px)">Die Stempelkarte, die man nie vergisst.</h2>
|
||||
<p class="bodytext">Die Papier-Stempelkarte – jetzt direkt im Handy. Ein Klick, und die Karte liegt in Apple Wallet oder Google Wallet. Beim Bezahlen einfach zeigen, wir stempeln digital. Optional mit Push, sobald die Karte voll ist.</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>
|
||||
<button class="wbtn" data-wallet> Apple Wallet</button>
|
||||
<button class="wbtn g" data-wallet>Google Wallet</button>
|
||||
<a href="/treuekarte" class="btn btn-outline btn-sm">So funktioniert's →</a>
|
||||
</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="ptop"><span class="pbrand">Friseur-Team VK<span class="s">Tostedt</span></span><span class="chip">Treuekarte</span></div>
|
||||
<span class="plabel">Ihre Stempel</span>
|
||||
<div class="preward">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 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 class="pfoot"><span>7 / 10 Stempel</span><span>Kastanienallee 1</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
<!-- BUCHEN -->
|
||||
<section class="section bg-dark" id="buchen">
|
||||
<div class="container">
|
||||
<div class="head-center reveal">
|
||||
<span class="eyebrow center" style="color:var(--accent-2)"><span class="ln"></span>Online buchen<span class="ln"></span></span>
|
||||
<h2 style="color:#fff">Termin buchen – rund um die Uhr</h2>
|
||||
<p style="color:rgba(255,255,255,.7)">In drei Schritten zur Anfrage. Sie landet direkt im Salon – bestätigt wird 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="booker reveal" style="margin-top:42px">
|
||||
<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">
|
||||
@@ -225,194 +166,115 @@ const hours = [
|
||||
<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>
|
||||
<p style="color:rgba(255,255,255,.6);font-size:.85rem;margin-bottom:1rem">Freie Zeiten · Mittwoch (bis 20 Uhr)</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 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:30">18:30</div><div class="slot" data-pick="time" data-val="19:15">19:15</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step" data-step="2">
|
||||
<div class="confirm-box">
|
||||
<div class="step confirm" data-step="2" style="text-align:center">
|
||||
<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>
|
||||
<p style="color:rgba(255,255,255,.7)">Ihre Anfrage <b style="color:var(--accent-2)" id="sumLine">…</b> geht an den Salon. Sie erhalten 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>
|
||||
<button class="btn btn-outline btn-sm" id="backBtn" style="color:#fff;border-color:rgba(255,255,255,.3);display:none">Zurück</button>
|
||||
<button class="btn btn-accent btn-sm" id="nextBtn">Weiter</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="note-line">Demo-Ablauf · echte Buchung später self-hosted (Cal.com) + WhatsApp-Bestätigung</p>
|
||||
<p class="note-line">Demo-Ablauf · echte Buchung self-hosted (Cal.com) + WhatsApp-Bestätigung</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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>
|
||||
<!-- STANDORT -->
|
||||
<section id="standort" class="section">
|
||||
<div class="container split rev reveal">
|
||||
<div>
|
||||
<span class="eyebrow"><span class="ln"></span>Standort</span>
|
||||
<h2 id="kontakt">Besuchen Sie uns in Tostedt</h2>
|
||||
<p class="bodytext">Mitten im Ort, gut erreichbar und mit Parkplätzen in der Nähe. Rufen Sie an oder schreiben Sie uns – wir finden den passenden Termin für Sie.</p>
|
||||
<div class="checks" style="grid-template-columns:1fr 1fr">
|
||||
<div><h4 class="eyebrow-label">Adresse</h4><p style="margin-top:8px;color:var(--text)">Kastanienallee 1<br>21255 Tostedt</p></div>
|
||||
<div><h4 class="eyebrow-label">Kontakt</h4><p style="margin-top:8px;color:var(--text)">04182 / 28 89 535<br>info@friseur-team-vk.de</p></div>
|
||||
<div><h4 class="eyebrow-label">Öffnungszeiten</h4><p style="margin-top:8px;color:var(--text)">Di · Do 9–18 · Mi · Fr 9–20<br>Sa 9–14 Uhr</p></div>
|
||||
<div><h4 class="eyebrow-label">Ruhetag</h4><p style="margin-top:8px;color:var(--text)">Montag</p></div>
|
||||
</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 style="margin-top:34px;display:flex;flex-wrap:wrap;gap:14px">
|
||||
<a href="tel:+4941822889535" class="btn btn-dark">Jetzt anrufen</a>
|
||||
<a href="https://maps.google.com/?q=Kastanienallee+1+21255+Tostedt" target="_blank" rel="noopener" class="btn btn-outline">Route planen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<img class="media" src="/img/g2.webp" alt="Friseur-Team VK Tostedt" />
|
||||
</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>
|
||||
<!-- GALERIE + REELS -->
|
||||
<section id="galerie" class="section bg-soft">
|
||||
<div class="container">
|
||||
<div class="head-center reveal">
|
||||
<span class="eyebrow center"><span class="ln"></span>Galerie<span class="ln"></span></span>
|
||||
<h2>Eindrücke & Ergebnisse</h2>
|
||||
<p>Ein Blick in Salon und Handwerk. Bald hier: Ihr eigenes Foto- & Video-Shooting.</p>
|
||||
</div>
|
||||
<div class="price-grid reveal">
|
||||
<div class="price-col">
|
||||
<h3>✂️ Schnitt & 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 & Föhnen</span><span class="val">ab 20 €</span></div>
|
||||
<div class="gal reveal">
|
||||
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g1.webp" alt="Eindruck" loading="lazy" /></a>
|
||||
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g3.webp" alt="Eindruck" loading="lazy" /></a>
|
||||
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/salon.webp" alt="Eindruck" loading="lazy" /></a>
|
||||
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g4.webp" alt="Eindruck" loading="lazy" /></a>
|
||||
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g6.webp" alt="Eindruck" loading="lazy" /></a>
|
||||
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/g5.webp" alt="Eindruck" loading="lazy" /></a>
|
||||
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/hv.jpg" alt="Eindruck" loading="lazy" /></a>
|
||||
<a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener"><img src="/img/hero.webp" alt="Eindruck" loading="lazy" /></a>
|
||||
</div>
|
||||
<div class="price-col">
|
||||
<h3>🎨 Farbe & 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> 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 class="reels-head reveal">
|
||||
<h3>Reels & Motion · 9:16</h3>
|
||||
<span>Hochformat-Content fürs Handy – direkt für Instagram & TikTok.</span>
|
||||
</div>
|
||||
<div class="reels reveal">
|
||||
<figure class="reel"><img src="/img/g1.webp" alt="Reel" loading="lazy" /><span class="lab">Vorher / Nachher</span></figure>
|
||||
<figure class="reel"><img src="/img/hero.webp" alt="Reel" loading="lazy" /><span class="lab">Salon-Tour</span></figure>
|
||||
<figure class="reel"><img src="/img/g3.webp" alt="Reel" loading="lazy" /><span class="lab">Styling-Clip</span></figure>
|
||||
<figure class="reel"><img src="/img/g2.webp" alt="Reel" loading="lazy" /><span class="lab">Behind the Scenes</span></figure>
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:28px"><span class="demo-flag">Demo · hier laufen später echte 9:16-Clips</span><div style="margin-top:14px"><a href="https://www.instagram.com/friseur.team_vk/" target="_blank" rel="noopener" class="btn btn-dark">@friseur.team_vk folgen</a></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="head-center reveal">
|
||||
<span class="eyebrow center"><span class="ln"></span>FAQ<span class="ln"></span></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>Muss ich vorher anrufen?</summary><div class="ans">Nein. Sie können rund um die Uhr online anfragen – auch abends und am Wochenende. Telefonisch erreichen Sie 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>Macht ihr auch Haarverlängerungen?</summary><div class="ans">Ja, das ist eine unserer Spezialitäten – Haarverlängerung und Haarverdichtung mit ausführlicher Beratung. <a href="/haarverlaengerung" style="color:var(--accent);font-weight:600">Mehr erfahren →</a></div></details>
|
||||
<details><summary>Bekomme ich eine Erinnerung an meinen Termin?</summary><div class="ans">Ja. Vor dem Termin erhalten Sie eine Erinnerung – künftig per WhatsApp mit der Möglichkeit, direkt zu bestätigen oder abzusagen.</div></details>
|
||||
<details><summary>Wie funktioniert die digitale Treuekarte?</summary><div class="ans">Sie fügen die Karte einmal zu Apple oder Google Wallet hinzu. Bei jedem Besuch stempeln wir digital – der zehnte Schnitt bringt eine Pflege gratis. <a href="/treuekarte" style="color:var(--accent);font-weight:600">So funktioniert's →</a></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>
|
||||
</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(); } });
|
||||
<script is:inline>
|
||||
let step=0;const picks={svc:null,time:null};
|
||||
const steps=document.querySelectorAll('.step'),dots=document.querySelectorAll('.step-dot');
|
||||
const nextBtn=document.getElementById('nextBtn'),backBtn=document.getElementById('backBtn');
|
||||
const sumSvc=document.getElementById('sumSvc'),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){document.getElementById('sumLine').textContent=`${picks.svc||'Termin'} · Mi ${picks.time||''}`}}
|
||||
document.querySelectorAll('[data-pick]').forEach(el=>el.addEventListener('click',()=>{const t=el.dataset.pick;el.parentElement.querySelectorAll('[data-pick]').forEach(x=>x.classList.remove('sel'));el.classList.add('sel');picks[t]=el.dataset.val;if(t==='svc')sumSvc.textContent=picks.svc;if(t==='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){window.__toast('Anfrage gesendet – Demo ✨');return}step++;render()});
|
||||
backBtn.addEventListener('click',()=>{if(step>0){step--;render()}});
|
||||
render();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</script>
|
||||
</Base>
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
import Base from "../layouts/Base.astro";
|
||||
---
|
||||
<Base title="Digitale Treuekarte · Apple & Google Wallet · Friseur-Team VK" description="Die Stempelkarte von Friseur-Team VK – digital in Apple Wallet & Google Wallet. Jeder 10. Schnitt eine Pflege gratis. Nie wieder Karte vergessen.">
|
||||
|
||||
<section class="lp-hero">
|
||||
<div class="container grid">
|
||||
<div>
|
||||
<span class="eyebrow"><span class="ln"></span>Treuekarte – digital</span>
|
||||
<h1>Die Stempelkarte, die man nie vergisst.</h1>
|
||||
<p class="lead">Ihre Papier-Stempelkarte – jetzt direkt im Handy. Einmal hinzufügen, beim Bezahlen zeigen, wir stempeln digital. Der zehnte Schnitt bringt eine Pflege gratis.</p>
|
||||
<div class="wallet-btns">
|
||||
<button class="wbtn" data-wallet> Zu Apple Wallet</button>
|
||||
<button class="wbtn g" data-wallet>Zu Google Wallet</button>
|
||||
</div>
|
||||
<p style="margin-top:14px"><span class="demo-flag">Demo</span> im Live-System fügt ein Tap die echte Wallet-Karte hinzu.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="pass">
|
||||
<div class="ptop"><span class="pbrand">Friseur-Team VK<span class="s">Tostedt</span></span><span class="chip">Treuekarte</span></div>
|
||||
<span class="plabel">Ihre Stempel</span>
|
||||
<div class="preward">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="pfoot"><span>7 / 10 Stempel</span><span>Kastanienallee 1</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="head-center reveal">
|
||||
<span class="eyebrow center"><span class="ln"></span>So funktioniert's<span class="ln"></span></span>
|
||||
<h2>In drei Schritten zur digitalen Karte</h2>
|
||||
</div>
|
||||
<div class="how">
|
||||
<div class="step reveal"><div class="n">1</div><h4>Hinzufügen</h4><p>Gast scannt einen QR-Code im Salon oder tippt auf der Website – die Karte landet in Apple oder Google Wallet.</p></div>
|
||||
<div class="step reveal"><div class="n">2</div><h4>Stempeln</h4><p>Nach jedem Besuch stempeln wir digital. Der Stand aktualisiert sich automatisch auf dem Handy des Gasts.</p></div>
|
||||
<div class="step reveal"><div class="n">3</div><h4>Belohnen</h4><p>Ist die Karte voll, gibt's die Prämie – und optional eine Push-Nachricht „Ihre Karte ist voll".</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section bg-soft">
|
||||
<div class="container">
|
||||
<div class="head-center reveal">
|
||||
<span class="eyebrow center"><span class="ln"></span>Vernetzt & self-hosted<span class="ln"></span></span>
|
||||
<h2>Karte, Website und Salon – ein System</h2>
|
||||
<p>Alles läuft auf eigener Infrastruktur, DSGVO-konform. Kein teurer Drittanbieter pro Karte.</p>
|
||||
</div>
|
||||
<div class="how">
|
||||
<div class="step reveal"><div class="n">🌐</div><h4>Website</h4><p>„Zur Wallet hinzufügen"-Button + QR-Code im Salon erzeugen die Karte für jeden Gast.</p></div>
|
||||
<div class="step reveal"><div class="n">🔄</div><h4>Pass-Server</h4><p>Ein kleiner Dienst auf eurem Hetzner-Server erstellt und aktualisiert die Pässe (Apple PassKit + Google Wallet) und schickt Push bei neuem Stempel.</p></div>
|
||||
<div class="step reveal"><div class="n">💇♀️</div><h4>Salon-Ansicht</h4><p>Veronika stempelt mit einem Tap (Tablet/Handy) – verknüpft mit der Kundenkartei. Optional an die Buchung gekoppelt.</p></div>
|
||||
</div>
|
||||
<p style="text-align:center;margin-top:28px;color:var(--body);max-width:60ch;margin-left:auto;margin-right:auto">Eine echte Apple-Wallet-Karte wird mit einem Apple-Developer-Zertifikat signiert (einmalige Einrichtung). Danach läuft alles automatisch auf eurer Infrastruktur.</p>
|
||||
<div style="text-align:center;margin-top:24px"><a href="/#buchen" class="btn btn-dark">Klingt gut? Termin buchen</a></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</Base>
|
||||
@@ -0,0 +1,232 @@
|
||||
:root{
|
||||
--ink:#14142a; --ink-2:#2a2a48; --body:#5c5d6e; --muted:#8a8b99; --text:#3b3c4a;
|
||||
--accent:#a6826a; --accent-2:#cf9a73; --bg:#f5f5f7; --white:#fff;
|
||||
--line:#ededf1; --line-2:#ececf1; --footer:#0f0f20;
|
||||
--maxw:1180px; --radius:24px; --radius-img:26px; --pill:40px;
|
||||
--shadow-card:0 22px 50px rgba(20,20,42,.10);
|
||||
--shadow-float:0 18px 50px rgba(20,20,42,.16);
|
||||
--sans:"DM Sans",system-ui,-apple-system,sans-serif;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
html{scroll-behavior:smooth;scroll-padding-top:120px}
|
||||
body{margin:0;background:var(--white);color:var(--body);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6}
|
||||
h1,h2,h3,h4{font-family:var(--sans);color:var(--ink);margin:0;letter-spacing:-0.02em;line-height:1.08;font-weight:700}
|
||||
p{margin:0}
|
||||
a{color:inherit;text-decoration:none}
|
||||
img{display:block;max-width:100%}
|
||||
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
|
||||
.section{padding:clamp(56px,9vw,112px) 0}
|
||||
.bg-soft{background:var(--bg)}
|
||||
.bg-dark{background:var(--ink);color:#fff}
|
||||
|
||||
/* eyebrow */
|
||||
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
|
||||
.eyebrow .ln{width:26px;height:1px;background:var(--accent-2);display:inline-block}
|
||||
.eyebrow.center{justify-content:center}
|
||||
|
||||
/* buttons */
|
||||
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:54px;padding:0 30px;border-radius:var(--pill);font-weight:600;font-size:16px;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;white-space:nowrap}
|
||||
.btn-dark{background:var(--ink);color:#fff}
|
||||
.btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}
|
||||
.btn-outline{background:transparent;border-color:#c9cad3;color:var(--ink)}
|
||||
.btn-outline:hover{border-color:var(--ink)}
|
||||
.btn-light{background:#fff;color:var(--ink);font-weight:700}
|
||||
.btn-light:hover{background:#f0e7df}
|
||||
.btn-accent{background:var(--accent);color:#fff}
|
||||
.btn-accent:hover{background:var(--accent-2);transform:translateY(-2px)}
|
||||
.btn-sm{height:46px;padding:0 22px;font-size:15px}
|
||||
|
||||
/* topbar */
|
||||
.topbar{background:var(--ink);color:#cfd0db;font-size:13.5px}
|
||||
.topbar .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 24px;max-width:var(--maxw);margin:0 auto}
|
||||
.topbar a{color:#fff;font-weight:500}
|
||||
.topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-2);display:inline-block;margin-right:8px}
|
||||
.topbar .right{display:flex;align-items:center;gap:22px}
|
||||
.topbar .muted{color:#8587a0}
|
||||
|
||||
/* header */
|
||||
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
|
||||
.header .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;max-width:var(--maxw);margin:0 auto}
|
||||
.brand{display:flex;align-items:center;gap:12px}
|
||||
.brand .mark{width:42px;height:42px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
|
||||
.brand .name{font-weight:700;font-size:18px;color:var(--ink);line-height:1.05}
|
||||
.brand .sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600}
|
||||
.nav{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500;color:var(--text)}
|
||||
.nav a:hover{color:var(--ink)}
|
||||
.header-cta{display:flex;align-items:center;gap:18px}
|
||||
.header-cta .tel{font-weight:600;color:var(--ink);font-size:15px}
|
||||
|
||||
/* hero */
|
||||
.hero{background:var(--bg)}
|
||||
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;padding:clamp(48px,7vw,92px) 0}
|
||||
.hero h1{margin:22px 0 0;font-size:clamp(40px,5.2vw,66px)}
|
||||
.hero .lead{margin:24px 0 0;font-size:18px;line-height:1.65;max-width:50ch}
|
||||
.hero .actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}
|
||||
.hero .stats{margin-top:34px;display:flex;align-items:center;gap:20px;color:var(--muted);font-size:14px;flex-wrap:wrap}
|
||||
.hero .stats .sep{width:1px;height:18px;background:#dcdce2}
|
||||
.hero-media{position:relative}
|
||||
.hero-media>img{width:100%;height:clamp(360px,46vw,540px);object-fit:cover;border-radius:28px}
|
||||
.float-card{position:absolute;left:-18px;bottom:26px;background:#fff;border-radius:18px;padding:16px 20px;box-shadow:var(--shadow-float);display:flex;align-items:center;gap:14px}
|
||||
.float-card .ic{width:44px;height:44px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
|
||||
|
||||
/* info strip */
|
||||
.infostrip{background:#fff;border-bottom:1px solid var(--line)}
|
||||
.infostrip .grid{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
|
||||
.infostrip .col{padding:42px 20px;border-right:1px solid var(--line)}
|
||||
.infostrip .col:last-child{border-right:none}
|
||||
.infostrip h4,.eyebrow-label{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0}
|
||||
.infostrip p{margin-top:12px;font-size:16px;line-height:1.7;color:var(--text)}
|
||||
|
||||
/* about / split */
|
||||
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,80px);align-items:center}
|
||||
.split.rev{grid-template-columns:1.05fr .95fr}
|
||||
.split img.media{width:100%;height:clamp(380px,40vw,560px);object-fit:cover;border-radius:var(--radius-img)}
|
||||
.split h2{margin:20px 0 0;font-size:clamp(30px,3.6vw,46px);max-width:18ch}
|
||||
.split p.bodytext{margin:22px 0 0;font-size:17px;line-height:1.7;max-width:60ch}
|
||||
.checks{margin:30px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;max-width:520px}
|
||||
.check{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--text)}
|
||||
.check .tick{color:var(--accent);font-weight:700;margin-top:1px}
|
||||
|
||||
/* section head center */
|
||||
.head-center{text-align:center;max-width:660px;margin:0 auto}
|
||||
.head-center h2{margin:18px 0 0;font-size:clamp(30px,3.8vw,48px)}
|
||||
.head-center p{margin:18px 0 0;font-size:17px;line-height:1.7;color:var(--body)}
|
||||
|
||||
/* services */
|
||||
.svc-grid{margin-top:54px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
|
||||
.scard{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;transition:transform .25s,box-shadow .25s}
|
||||
.scard:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
|
||||
.scard .imgwrap{position:relative}
|
||||
.scard .imgwrap img{width:100%;height:218px;object-fit:cover}
|
||||
.scard .badge{position:absolute;left:20px;bottom:-22px;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 8px 22px rgba(20,20,42,.14);display:flex;align-items:center;justify-content:center;color:var(--ink)}
|
||||
.scard .body{padding:34px 26px 28px}
|
||||
.scard h3{font-size:21px}
|
||||
.scard .body p{margin:12px 0 0;font-size:15px;line-height:1.65;color:#6b6c7a}
|
||||
.scard .row{margin-top:22px;display:flex;align-items:center;justify-content:space-between}
|
||||
.scard .price{font-weight:700;color:var(--ink);font-size:16px}
|
||||
.scard .more{font-weight:600;color:var(--accent);font-size:15px}
|
||||
.center-actions{margin-top:46px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
|
||||
|
||||
/* dark CTA band */
|
||||
.cta-band{background:var(--ink);color:#fff}
|
||||
.cta-band .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px;padding:clamp(52px,7vw,84px) 0}
|
||||
.cta-band h2{margin:14px 0 0;color:#fff;font-size:clamp(28px,3.4vw,42px);max-width:18ch}
|
||||
.cta-band .eyebrow{color:var(--accent-2)}
|
||||
|
||||
/* gallery */
|
||||
.gal{margin-top:42px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
|
||||
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;transition:transform .5s}
|
||||
.gal a:hover img{transform:scale(1.05)}
|
||||
.reels-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:46px 0 18px}
|
||||
.reels-head h3{font-size:22px}
|
||||
.reels-head span{font-size:15px;color:var(--body)}
|
||||
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
|
||||
.reel{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
|
||||
.reel img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
|
||||
.reel:hover img{transform:scale(1.06)}
|
||||
.reel::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.5rem;background:linear-gradient(180deg,rgba(20,20,42,.05),rgba(20,20,42,.45));text-shadow:0 2px 12px rgba(0,0,0,.4)}
|
||||
.reel .lab{position:absolute;left:10px;bottom:10px;z-index:2;font-size:.7rem;font-weight:600;color:#fff;background:rgba(20,20,42,.55);padding:3px 9px;border-radius:20px}
|
||||
|
||||
/* wallet / treuekarte */
|
||||
.wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,72px);align-items:center}
|
||||
.pass{background:linear-gradient(155deg,#14142a,#2a2a48);color:#fff;border-radius:24px;padding:24px;box-shadow:0 30px 60px -24px rgba(20,20,42,.6);max-width:360px;margin:0 auto;width:100%}
|
||||
.pass .ptop{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
|
||||
.pass .pbrand{font-weight:700;font-size:18px}
|
||||
.pass .pbrand .s{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2);display:block;font-weight:600}
|
||||
.pass .chip{font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.12);padding:5px 11px;border-radius:20px}
|
||||
.pass .plabel{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55)}
|
||||
.pass .preward{font-size:20px;font-weight:700;color:#fff;margin:4px 0 18px}
|
||||
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
|
||||
.stamp{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:1.05rem;border:1.5px dashed rgba(255,255,255,.25);color:rgba(255,255,255,.3)}
|
||||
.stamp.on{background:var(--accent);border-style:solid;border-color:var(--accent);color:#fff}
|
||||
.pass .pfoot{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
|
||||
.wallet-btns{display:flex;gap:.8rem;margin-top:24px;flex-wrap:wrap}
|
||||
.wbtn{display:inline-flex;align-items:center;gap:.5rem;background:#000;color:#fff;padding:.8rem 1.2rem;border-radius:12px;font-size:.9rem;font-weight:600;cursor:pointer;border:none;transition:transform .2s}
|
||||
.wbtn:hover{transform:translateY(-2px)}
|
||||
.wbtn.g{background:#fff;color:#14142a;border:1px solid var(--line)}
|
||||
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
|
||||
.how .step{background:#fff;border:1px solid var(--line-2);border-radius:18px;padding:24px}
|
||||
.how .n{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;margin-bottom:14px}
|
||||
.how h4{font-size:17px;color:var(--ink)}
|
||||
.how p{margin-top:8px;font-size:14.5px;color:#6b6c7a;line-height:1.6}
|
||||
|
||||
/* booking */
|
||||
.booker{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:clamp(24px,4vw,40px);max-width:720px;margin:0 auto}
|
||||
.steps-nav{display:flex;gap:.5rem;margin-bottom:2rem}
|
||||
.step-dot{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.12);transition:background .3s}
|
||||
.step-dot.active{background:var(--accent-2)}
|
||||
.step{display:none}.step.active{display:block;animation:fade .4s ease}
|
||||
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
||||
.step h3{color:#fff;font-size:1.3rem;margin-bottom:1.2rem}
|
||||
.opt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
|
||||
.opt{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1rem 1.2rem;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center}
|
||||
.opt:hover,.opt.sel{border-color:var(--accent-2);background:rgba(207,154,115,.15)}
|
||||
.opt .o-name{font-weight:600;color:#fff}
|
||||
.opt .o-meta{font-size:.8rem;color:rgba(255,255,255,.6)}
|
||||
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
|
||||
.slot{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.7rem;text-align:center;cursor:pointer;font-size:.9rem;color:#fff;transition:all .2s}
|
||||
.slot:hover,.slot.sel{border-color:var(--accent-2);background:rgba(207,154,115,.15)}
|
||||
.book-foot{display:flex;justify-content:space-between;margin-top:2rem;align-items:center;flex-wrap:wrap;gap:1rem}
|
||||
.book-summary{font-size:.88rem;color:rgba(255,255,255,.7)}
|
||||
.book-summary b{color:var(--accent-2)}
|
||||
.confirm .ok{width:64px;height:64px;border-radius:50%;background:var(--accent);display:grid;place-items:center;margin:0 auto 1.2rem;font-size:1.8rem}
|
||||
.note-line{font-size:.8rem;color:rgba(255,255,255,.5);margin-top:1.2rem;text-align:center}
|
||||
|
||||
/* faq */
|
||||
.faq{max-width:800px;margin:42px auto 0}
|
||||
.faq details{background:#fff;border:1px solid var(--line-2);border-radius:14px;margin-bottom:.8rem;padding:0 1.4rem}
|
||||
.faq summary{cursor:pointer;padding:1.2rem 0;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
|
||||
.faq summary::-webkit-details-marker{display:none}
|
||||
.faq summary::after{content:"+";font-size:1.4rem;color:var(--accent);transition:transform .2s}
|
||||
.faq details[open] summary::after{transform:rotate(45deg)}
|
||||
.faq .ans{padding:0 0 1.3rem;color:var(--body);font-size:15px;line-height:1.7}
|
||||
|
||||
/* footer */
|
||||
.footer{background:var(--footer);color:#a9aabb}
|
||||
.footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px}
|
||||
.footer h4{color:#fff;font-size:14px;font-weight:600;letter-spacing:.04em}
|
||||
.footer .col{display:flex;flex-direction:column;gap:11px;font-size:14.5px;margin-top:16px}
|
||||
.footer .col a:hover{color:#fff}
|
||||
.footer .lead{margin:18px 0 0;font-size:14.5px;line-height:1.7;max-width:34ch}
|
||||
.footer .bottom{margin-top:48px;padding-top:26px;border-top:1px solid rgba(255,255,255,.10);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;font-size:13.5px}
|
||||
.hours-row{display:flex;justify-content:space-between;gap:14px}
|
||||
.hours-row.closed{color:#74758a}
|
||||
.wa{display:inline-flex;align-items:center;gap:.5rem;background:#25d366;color:#fff !important;padding:.7rem 1.1rem;border-radius:var(--pill);font-weight:600;font-size:14px;margin-top:4px;width:max-content}
|
||||
|
||||
/* lp hero */
|
||||
.lp-hero{background:var(--bg)}
|
||||
.lp-hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;padding:clamp(44px,6vw,84px) 0}
|
||||
.lp-hero h1{margin:20px 0 0;font-size:clamp(34px,4.6vw,56px)}
|
||||
.lp-hero .lead{margin:22px 0 0;font-size:18px;line-height:1.65;max-width:52ch}
|
||||
.lp-hero img{width:100%;height:clamp(340px,42vw,500px);object-fit:cover;border-radius:28px}
|
||||
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
|
||||
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--pill);padding:9px 16px;font-size:14px;font-weight:600;color:var(--ink)}
|
||||
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
|
||||
.fcard{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);padding:30px 26px}
|
||||
.fcard .ic{width:48px;height:48px;border-radius:14px;background:#f3ece6;display:grid;place-items:center;font-size:1.4rem;margin-bottom:16px}
|
||||
.fcard h3{font-size:19px}
|
||||
.fcard p{margin-top:10px;font-size:14.5px;color:#6b6c7a;line-height:1.6}
|
||||
.banner{background:#f3ece6;border:1px solid #e7d8cb;border-radius:var(--radius);padding:clamp(24px,4vw,40px);display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:space-between}
|
||||
.banner h3{font-size:clamp(22px,2.6vw,30px);max-width:22ch}
|
||||
.demo-flag{display:inline-block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;background:#f3ece6;color:var(--accent);padding:3px 10px;border-radius:20px;font-weight:700}
|
||||
|
||||
/* reveal */
|
||||
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
|
||||
.reveal.in{opacity:1;transform:none}
|
||||
/* toast */
|
||||
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(160%);background:var(--ink);color:#fff;padding:.9rem 1.4rem;border-radius:var(--pill);box-shadow:var(--shadow-float);z-index:200;transition:transform .4s;font-size:.9rem}
|
||||
.toast.show{transform:translateX(-50%) translateY(0)}
|
||||
|
||||
@media(max-width:900px){
|
||||
.nav{display:none}
|
||||
.hero .grid,.split,.split.rev,.wallet-grid,.lp-hero .grid{grid-template-columns:1fr}
|
||||
.infostrip .grid{grid-template-columns:1fr}
|
||||
.infostrip .col{border-right:none;border-bottom:1px solid var(--line)}
|
||||
.checks{grid-template-columns:1fr}
|
||||
.gal,.reels{grid-template-columns:repeat(2,1fr)}
|
||||
.how,.feature-grid{grid-template-columns:1fr}
|
||||
.footer .grid{grid-template-columns:1fr 1fr}
|
||||
.float-card{left:12px;right:12px;bottom:12px}
|
||||
.opt-grid,.slots{grid-template-columns:1fr 1fr}
|
||||
.header-cta .tel{display:none}
|
||||
}
|
||||
Reference in New Issue
Block a user