98 lines
4.6 KiB
Plaintext
98 lines
4.6 KiB
Plaintext
---
|
|
import Base from '../layouts/Base.astro';
|
|
import Pic from '../components/Pic.astro';
|
|
import Hours from '../components/Hours.astro';
|
|
import Icon from '../components/Icon.astro';
|
|
import Rating from '../components/Rating.astro';
|
|
import { salon } from '../data/site';
|
|
import salonInnen3 from '../assets/img/salon-innen-3.jpg';
|
|
---
|
|
<Base
|
|
title="Kontakt und Anfahrt"
|
|
description="Friseur-Team VK, Kastanienallee 1, 21255 Tostedt. Telefon 04182 2889535, WhatsApp und E-Mail. Öffnungszeiten Dienstag bis Samstag, Route planen."
|
|
crumbs={[{ name: 'Kontakt', href: '/kontakt' }]}
|
|
bar="kontakt"
|
|
>
|
|
<section class="kt">
|
|
<div class="wrap kt__grid">
|
|
<div class="kt__txt">
|
|
<p class="label">Kontakt und Anfahrt</p>
|
|
<h1>So erreichen <em>Sie uns.</em></h1>
|
|
<ul class="kt__ways">
|
|
<li>
|
|
<a href={salon.phoneHref} class="way">
|
|
<Icon name="phone" /><span><span class="way__k">Telefon</span><span class="way__v">{salon.phoneDisplay}</span></span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href={salon.whatsappHref} rel="noopener" class="way">
|
|
<Icon name="whatsapp" /><span><span class="way__k">WhatsApp</span><span class="way__v">Nachricht schreiben</span></span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href={`mailto:${salon.email}`} class="way">
|
|
<Icon name="mail" /><span><span class="way__k">E-Mail</span><span class="way__v">{salon.email}</span></span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/anfrage" class="way">
|
|
<Icon name="arrow" /><span><span class="way__k">Für Braut, Farbe, Verlängerung</span><span class="way__v">Anfrage stellen</span></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<p class="small leise">Termine vergeben wir am Telefon. Wenn wir gerade alle Hände voll zu tun haben, klappt das nicht immer beim ersten Klingeln. Dann schreiben Sie uns gern per WhatsApp.</p>
|
|
</div>
|
|
<div class="kt__info">
|
|
<div class="kt__block">
|
|
<h2 class="label">Adresse</h2>
|
|
<address class="kt__addr">{salon.legalName}<br />{salon.street}<br />{salon.zip} {salon.city}</address>
|
|
<div class="btn-row">
|
|
<a class="btn btn--ghost" href={salon.routeUrl} rel="noopener"><Icon name="pin" />Google Maps</a>
|
|
<a class="btn btn--ghost" href={salon.appleMapsUrl} rel="noopener"><Icon name="pin" />Apple Karten</a>
|
|
</div>
|
|
<p class="small leise">Die Knöpfe öffnen die Route in Ihrer Karten-App. Eine eingebettete Karte gibt es hier bewusst nicht, damit keine Daten an Dritte gehen.</p>
|
|
</div>
|
|
<div class="kt__block">
|
|
<h2 class="label">Öffnungszeiten</h2>
|
|
<Hours />
|
|
<p class="small leise">Stand März 2026, wird vor dem Livegang bestätigt.</p>
|
|
</div>
|
|
<div class="kt__block">
|
|
<h2 class="label">Bewertungen</h2>
|
|
<Rating />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section--tight">
|
|
<div class="wrap">
|
|
<figure class="kt__img">
|
|
<div class="frame ratio-169">
|
|
<Pic src={salonInnen3} alt="Blick durch den Salon mit Bedienplätzen und dem Aufsteller mit dem Salon-Logo" sizes="(min-width: 84rem) 80rem, 100vw" />
|
|
</div>
|
|
<figcaption>Der Salon von innen</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
</Base>
|
|
|
|
<style>
|
|
.kt { padding-block: var(--s-7) var(--s-8); }
|
|
.kt__grid { display: grid; gap: var(--s-8); }
|
|
.kt__txt { display: grid; gap: var(--s-6); align-content: start; }
|
|
.kt__ways { list-style: none; padding: 0; border-top: 1.5px solid var(--c-anthrazit); }
|
|
.kt__ways li { border-bottom: var(--hair); }
|
|
.way { display: flex; gap: var(--s-4); align-items: center; min-height: 4.5rem; padding-block: var(--s-3); color: var(--c-anthrazit); text-decoration: none; }
|
|
.way > :global(svg) { width: 1.5rem; height: 1.5rem; color: var(--c-petrol); flex: none; }
|
|
.way > span { display: grid; }
|
|
.way__k { font-size: var(--fs-small); color: var(--c-text-leise); }
|
|
.way__v { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.25; overflow-wrap: anywhere; }
|
|
.way:hover .way__v { color: var(--c-petrol); }
|
|
.kt__info { display: grid; gap: var(--s-7); align-content: start; }
|
|
.kt__block { display: grid; gap: var(--s-4); justify-items: start; }
|
|
.kt__addr { font-style: normal; font-size: var(--fs-lead); line-height: 1.5; }
|
|
.kt__img { margin: 0; }
|
|
@media (min-width: 60rem) { .kt__grid { grid-template-columns: 1.2fr 1fr; gap: var(--s-9); } .kt__info { padding-top: var(--s-6); } }
|
|
</style>
|