310 lines
15 KiB
Plaintext
310 lines
15 KiB
Plaintext
---
|
|
import Base from '../layouts/Base.astro';
|
|
import Pic from '../components/Pic.astro';
|
|
import Shot from '../components/Shot.astro';
|
|
import Icon from '../components/Icon.astro';
|
|
import Rating from '../components/Rating.astro';
|
|
import Reels from '../components/Reels.astro';
|
|
import Hours from '../components/Hours.astro';
|
|
import CtaBand from '../components/CtaBand.astro';
|
|
import LoyaltyCard from '../components/LoyaltyCard.astro';
|
|
import { salon, eur } from '../data/site';
|
|
import salonInnen1 from '../assets/img/salon-innen-1.jpg';
|
|
import salonInnen4 from '../assets/img/salon-innen-4.jpg';
|
|
import salonEmpfang from '../assets/img/salon-empfang.jpg';
|
|
import teamFoto from '../assets/img/team-gruppenfoto.jpg';
|
|
import greatLengths from '../assets/img/great-lengths.jpg';
|
|
|
|
const alltag = [
|
|
{ t: 'Damen', d: 'Schneiden, Föhnen, Hochsteckfrisuren, Dauerwelle', from: 45, href: '/leistungen-preise#preise-damen' },
|
|
{ t: 'Herren und Barbershop', d: 'Haarschnitt, Bart trimmen, Nassrasur', from: 26, href: '/leistungen-preise#preise-herren' },
|
|
{ t: 'Kinder', d: 'Haarschnitt bis 12 Jahre', from: 18, href: '/leistungen-preise#preise-kinder' },
|
|
{ t: 'Augenbrauen und Wimpern', d: 'Zupfen und Färben', from: 10, href: '/leistungen-preise#preise-augen' },
|
|
];
|
|
---
|
|
<Base
|
|
title="Friseur-Team VK · Friseur in Tostedt für Braut, Balayage und Great Lengths"
|
|
description="Meisterbetrieb in der Kastanienallee 1 in Tostedt, seit 2017. Schwerpunkte: Brautstyling, Balayage und Haarverlängerung mit Great Lengths. 4,9 Sterne bei 193 Google-Bewertungen."
|
|
>
|
|
<!-- Hero -->
|
|
<section class="hero">
|
|
<div class="wrap hero__grid">
|
|
<div class="hero__txt">
|
|
<p class="label">Friseur in Tostedt · Meisterbetrieb seit 2017</p>
|
|
<h1>Schön von außen, <em>glücklich von innen.</em></h1>
|
|
<p class="lead">Wir sind das Friseur-Team VK aus der Kastanienallee 1. Unsere Schwerpunkte sind Brautstyling, Balayage und Haarverlängerung mit Great Lengths. Für Schnitt und Farbe im Alltag sind wir genauso da.</p>
|
|
<div class="btn-row hero__btns">
|
|
<a class="btn" href="/anfrage">Anfrage stellen<Icon name="arrow" /></a>
|
|
<a class="btn btn--ghost" href={salon.phoneHref}><Icon name="phone" />{salon.phoneDisplay}</a>
|
|
</div>
|
|
<Rating />
|
|
</div>
|
|
<figure class="hero__media">
|
|
<div class="hero__panel" aria-hidden="true"></div>
|
|
<div class="frame arch hero__img">
|
|
<Pic src={salonInnen1} eager alt="Der helle Salon in der Kastanienallee mit Bedienplätzen und blauen Wandpaneelen" sizes="(min-width: 60rem) 42vw, 92vw" widths={[420, 640, 860, 1100, 1400]} />
|
|
</div>
|
|
<figcaption>Der Salon in der Kastanienallee 1</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Schwerpunkte -->
|
|
<section class="section focus" aria-labelledby="focus-h">
|
|
<div class="wrap">
|
|
<div class="head">
|
|
<p class="label">Schwerpunkte</p>
|
|
<h2 id="focus-h">Braut, Farbe, <em>Länge.</em></h2>
|
|
<p class="lead">Drei Leistungen, bei denen wir vor dem ersten Handgriff in Ruhe beraten.</p>
|
|
</div>
|
|
|
|
<ol class="focus__list">
|
|
<li class="frow reveal">
|
|
<div class="frow__media">
|
|
<Shot arch title="Braut-Hochsteckfrisur" detail="Detail Nacken, weiches Fensterlicht" ratio="4/5" />
|
|
</div>
|
|
<div class="frow__txt">
|
|
<span class="frow__n display" aria-hidden="true">01</span>
|
|
<h3>Brautservice</h3>
|
|
<p>Vom ersten Gespräch über den Probetermin bis zum Styling am Hochzeitstag, Frisur und Make-up aus einer Hand. Auf Wunsch kommen wir am großen Tag zu Ihnen.</p>
|
|
<p class="frow__price num">Probetermin ab {eur(75)}<sup>*</sup></p>
|
|
<a class="more" href="/brautservice"><span>Zum Brautservice</span><Icon name="arrow" /></a>
|
|
</div>
|
|
</li>
|
|
<li class="frow frow--alt reveal">
|
|
<div class="frow__media">
|
|
<Shot arch tone="petrol" title="Balayage, Ergebnis" detail="Rückenansicht, lange Wellen, Tageslicht" ratio="4/5" />
|
|
</div>
|
|
<div class="frow__txt">
|
|
<span class="frow__n display" aria-hidden="true">02</span>
|
|
<h3>Balayage und Farbe</h3>
|
|
<p>Balayage, Foliensträhnen, Coloration und Glossing. Wir planen die Farbe nach Ihrem Ausgangshaar und arbeiten mit Produkten von Redken und Paul Mitchell.</p>
|
|
<p class="frow__price num">Balayage ab {eur(140)}<sup>*</sup></p>
|
|
<a class="more" href="/balayage-farbe"><span>Zu Balayage und Farbe</span><Icon name="arrow" /></a>
|
|
</div>
|
|
</li>
|
|
<li class="frow reveal">
|
|
<div class="frow__media">
|
|
<div class="frame arch ratio-45">
|
|
<Pic src={greatLengths} alt="Great Lengths Schriftzug auf glänzendem, blondem Echthaar" sizes="(min-width: 60rem) 34vw, 88vw" widths={[400, 640, 900, 1080]} />
|
|
</div>
|
|
</div>
|
|
<div class="frow__txt">
|
|
<span class="frow__n display" aria-hidden="true">03</span>
|
|
<h3>Haarverlängerung und -verdichtung</h3>
|
|
<p>Mehr Länge oder mehr Fülle mit Great Lengths. Vor jeder Verlängerung steht ein Beratungstermin, in dem wir Haarstruktur, Farbton und Pflege besprechen.</p>
|
|
<p class="frow__price num">Verdichtung ab {eur(350)}<sup>*</sup></p>
|
|
<a class="more" href="/haarverlaengerung"><span>Zur Haarverlängerung</span><Icon name="arrow" /></a>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
<p class="small leise focus__foot">* Richtwerte. Preise werden mit dem Salon abgestimmt.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<Reels
|
|
title="Arbeiten in Bewegung"
|
|
items={[
|
|
{ title: 'Balayage vorher und nachher', detail: '15 Sekunden, Drehung im Tageslicht' },
|
|
{ title: 'Eine Brautfrisur entsteht', detail: 'Zeitraffer vom Probetermin' },
|
|
{ title: 'Great Lengths', detail: 'Ergebnis nach der Verdichtung' },
|
|
{ title: 'Herrenschnitt mit Fade', detail: 'Barbershop, Nahaufnahme' },
|
|
]}
|
|
/>
|
|
|
|
<!-- Über uns -->
|
|
<section class="section about" aria-labelledby="about-h">
|
|
<div class="wrap about__grid">
|
|
<figure class="about__img reveal">
|
|
<div class="frame ratio-32">
|
|
<Pic src={teamFoto} alt="Das Team des Friseur-Team VK in schwarzer Kleidung im Salon" sizes="(min-width: 60rem) 58vw, 100vw" />
|
|
</div>
|
|
<figcaption>Das Team im Salon in der Kastanienallee</figcaption>
|
|
</figure>
|
|
<div class="about__txt">
|
|
<p class="label">Über uns</p>
|
|
<h2 id="about-h">Ein Meisterbetrieb, <em>seit 2017.</em></h2>
|
|
<p>Veronika Sprangel ist Friseurmeisterin und hat den Salon im November 2017 eröffnet. Heute arbeiten wir zu acht: Friseurinnen und Friseure, ein Barber, ein Auszubildender und Dennis Sprangel, der sich um die Organisation kümmert.</p>
|
|
<p>Für Farbe und Pflege nutzen wir Redken und Paul Mitchell, für Haarverlängerungen Great Lengths.</p>
|
|
<a class="more" href="/team"><span>Das Team kennenlernen</span><Icon name="arrow" /></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Alltag -->
|
|
<section class="section section--nebel daily" aria-labelledby="daily-h">
|
|
<div class="wrap daily__grid">
|
|
<div>
|
|
<div class="head">
|
|
<p class="label">Für jeden Tag</p>
|
|
<h2 id="daily-h">Der Termin zwischendurch.</h2>
|
|
</div>
|
|
<ul class="daily__list">
|
|
{alltag.map((a) => (
|
|
<li>
|
|
<a href={a.href} class="daily__row">
|
|
<span class="daily__t">{a.t}</span>
|
|
<span class="daily__d">{a.d}</span>
|
|
<span class="daily__p num">ab {eur(a.from)}<sup>*</sup></span>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<a class="more" href="/leistungen-preise"><span>Alle Leistungen und Preise</span><Icon name="arrow" /></a>
|
|
</div>
|
|
<figure class="daily__img reveal">
|
|
<div class="frame arch ratio-34">
|
|
<Pic src={salonInnen4} alt="Bedienplätze vor großen Fenstern, an der Wand der grüne VK-Schriftzug" sizes="(min-width: 60rem) 36vw, 92vw" widths={[400, 640, 803]} />
|
|
</div>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Bewertungen -->
|
|
<section class="section rating" aria-labelledby="rating-h">
|
|
<div class="wrap">
|
|
<h2 id="rating-h" class="label">Google-Bewertungen</h2>
|
|
<div class="rating__body"><Rating variant="block" /></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Kundenkarte -->
|
|
<section class="section--tight card-teaser" aria-labelledby="card-h">
|
|
<div class="wrap card-teaser__grid">
|
|
<div class="card-teaser__visual reveal"><LoyaltyCard stamps={4} /></div>
|
|
<div class="card-teaser__txt">
|
|
<p class="label">Kundenkarte</p>
|
|
<h2 id="card-h">Ihre Stempelkarte, jetzt auch <em>im Handy.</em></h2>
|
|
<p>Für jeden Besuch gibt es einen Stempel, beim sechsten ein Pflege-Upgrade gratis. Die Karte liegt in Apple Wallet oder Google Wallet, als Web-Karte im Browser oder weiterhin gedruckt im Portemonnaie. Ihre bisherige Papierkarte gilt weiter, wir übertragen die Stempel.</p>
|
|
<a class="more" href="/kundenkarte"><span>So funktioniert die Kundenkarte</span><Icon name="arrow" /></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Besuch -->
|
|
<section class="section visit" aria-labelledby="visit-h">
|
|
<div class="wrap visit__grid">
|
|
<figure class="visit__img reveal">
|
|
<div class="frame ratio-32">
|
|
<Pic src={salonEmpfang} alt="Empfangstresen des Salons mit Produktregal und Eingangstür" sizes="(min-width: 60rem) 50vw, 100vw" />
|
|
</div>
|
|
</figure>
|
|
<div class="visit__txt">
|
|
<p class="label">Besuch</p>
|
|
<h2 id="visit-h">Kastanienallee 1, <em>Tostedt.</em></h2>
|
|
<address>
|
|
{salon.legalName}<br />{salon.street}<br />{salon.zip} {salon.city}
|
|
</address>
|
|
<Hours />
|
|
<div class="btn-row">
|
|
<a class="btn btn--ghost" href={salon.routeUrl} rel="noopener"><Icon name="pin" />Route planen</a>
|
|
<a class="btn btn--ghost" href={salon.whatsappHref} rel="noopener"><Icon name="whatsapp" />WhatsApp</a>
|
|
</div>
|
|
<p class="small leise">Öffnungszeiten werden vor dem Livegang mit dem Salon bestätigt.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<CtaBand />
|
|
</Base>
|
|
|
|
<style>
|
|
/* Hero */
|
|
.hero { padding-block: var(--s-6) var(--section); overflow: hidden; }
|
|
.hero__grid { display: grid; gap: var(--s-7); }
|
|
.hero__txt { display: grid; gap: var(--s-5); align-content: center; justify-items: start; }
|
|
.hero__txt h1 { font-size: var(--fs-h1); max-width: 11ch; }
|
|
.hero__txt h1 em { display: inline; }
|
|
.hero__btns { margin-top: var(--s-2); }
|
|
.hero__media { position: relative; margin: 0; padding: 0 0 var(--s-5) var(--s-5); }
|
|
.hero__panel { position: absolute; left: 0; bottom: var(--s-7); top: 22%; width: 52%; background: var(--c-petrol); }
|
|
.hero__img { position: relative; aspect-ratio: 4 / 5; }
|
|
.hero__img :global(img) { object-position: 38% 50%; }
|
|
.hero__media figcaption { position: relative; }
|
|
@media (min-width: 60rem) {
|
|
.hero { padding-top: var(--s-8); }
|
|
.hero__grid { grid-template-columns: 1.08fr 0.92fr; gap: var(--s-8); align-items: center; }
|
|
.hero__img { aspect-ratio: 5 / 6; }
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.hero__txt > * { animation: h-rise var(--t-slow) var(--ease-out) both; }
|
|
.hero__txt > h1 { animation-name: h-rise-t; animation-delay: 60ms; }
|
|
.hero__txt > :nth-child(3) { animation-delay: 140ms; }
|
|
.hero__txt > :nth-child(4) { animation-delay: 220ms; }
|
|
.hero__txt > :nth-child(5) { animation-delay: 300ms; }
|
|
.hero__panel { animation: h-grow 1.2s var(--ease-out) both 150ms; transform-origin: bottom; }
|
|
@keyframes h-rise { from { opacity: 0; transform: translateY(18px); } }
|
|
@keyframes h-rise-t { from { transform: translateY(16px); } }
|
|
@keyframes h-grow { from { transform: scaleY(0); } }
|
|
}
|
|
|
|
/* Schwerpunkte */
|
|
.focus { padding-top: 0; }
|
|
.focus__list { list-style: none; padding: 0; margin-top: var(--s-8); display: grid; gap: var(--s-9); }
|
|
.frow { display: grid; gap: var(--s-6); align-items: center; }
|
|
.frow__media { max-width: 30rem; width: 100%; }
|
|
.frow__txt { display: grid; gap: var(--s-3); justify-items: start; max-width: 34rem; }
|
|
.frow__n { font-size: var(--fs-h2); font-style: italic; color: var(--c-petrol); line-height: 1; }
|
|
.frow h3 { font-size: var(--fs-h2); line-height: 1.05; }
|
|
.frow__price { font-weight: 600; margin-top: var(--s-2); }
|
|
sup { font-size: 0.75em; color: var(--c-text-leise); margin-left: 1px; }
|
|
@media (min-width: 60rem) {
|
|
.frow { grid-template-columns: 5fr 6fr; gap: var(--s-9); }
|
|
.frow--alt .frow__media { order: 2; justify-self: end; }
|
|
.frow--alt { grid-template-columns: 6fr 5fr; }
|
|
.frow--alt .frow__txt { justify-self: end; }
|
|
}
|
|
.focus__foot { margin-top: var(--s-8); }
|
|
|
|
/* Über uns */
|
|
.about__grid { display: grid; gap: var(--s-6); }
|
|
.about__img { margin: 0; }
|
|
.about__txt { display: grid; gap: var(--s-4); justify-items: start; max-width: 32rem; }
|
|
.about__txt h2 { margin-bottom: var(--s-2); }
|
|
@media (min-width: 60rem) {
|
|
.about__grid { grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: end; }
|
|
.about__img { margin-left: calc(var(--gutter) * -1); }
|
|
}
|
|
|
|
/* Alltag */
|
|
.daily__grid { display: grid; gap: var(--s-7); }
|
|
.daily__list { list-style: none; padding: 0; margin-block: var(--s-6) var(--s-4); border-top: 1.5px solid var(--c-anthrazit); }
|
|
.daily__row {
|
|
display: grid; grid-template-columns: 1fr auto; gap: 0.15rem var(--s-4);
|
|
padding-block: var(--s-4); border-bottom: var(--hair);
|
|
color: inherit; text-decoration: none;
|
|
}
|
|
.daily__row:hover .daily__t { color: var(--c-petrol); }
|
|
.daily__t { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.25; transition: color var(--t-fast); }
|
|
.daily__d { grid-column: 1; color: var(--c-text-leise); font-size: var(--fs-small); }
|
|
.daily__p { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; white-space: nowrap; }
|
|
.daily__img { margin: 0; max-width: 26rem; }
|
|
@media (min-width: 60rem) {
|
|
.daily__grid { grid-template-columns: 1.3fr 1fr; gap: var(--s-9); align-items: center; }
|
|
.daily__img { justify-self: end; width: 100%; }
|
|
}
|
|
|
|
/* Bewertungen */
|
|
.rating__body { margin-top: var(--s-5); }
|
|
|
|
/* Kundenkarte */
|
|
.card-teaser { padding-block: var(--section); background: linear-gradient(180deg, var(--c-papier) 0, var(--c-papier) 30%, var(--c-petrol-hell) 30%); }
|
|
.card-teaser__grid { display: grid; gap: var(--s-7); align-items: center; }
|
|
.card-teaser__visual { display: grid; justify-items: center; }
|
|
.card-teaser__txt { display: grid; gap: var(--s-4); justify-items: start; max-width: 34rem; }
|
|
@media (min-width: 60rem) {
|
|
.card-teaser { background: linear-gradient(90deg, var(--c-petrol-hell) 0, var(--c-petrol-hell) 46%, var(--c-papier) 46%); }
|
|
.card-teaser__grid { grid-template-columns: 1fr 1.1fr; gap: var(--s-9); }
|
|
}
|
|
|
|
/* Besuch */
|
|
.visit__grid { display: grid; gap: var(--s-7); }
|
|
.visit__img { margin: 0; }
|
|
.visit__txt { display: grid; gap: var(--s-5); justify-items: start; }
|
|
.visit__txt address { font-style: normal; }
|
|
@media (min-width: 60rem) {
|
|
.visit__grid { grid-template-columns: 1.1fr 1fr; gap: var(--s-9); align-items: start; }
|
|
.visit__img { margin-left: calc(var(--gutter) * -1); }
|
|
}
|
|
</style>
|