5cfcea9caf
- Revamp Contact, FinalCta, Hero, Hours, SalonPromise, Services, SiteHeader, Trust components to use a new v2 design system. - Enhance responsiveness and accessibility across sections. - Introduce new styles for better visual hierarchy and user experience. - Integrate review data into Trust section and update site content structure.
61 lines
1.4 KiB
Plaintext
61 lines
1.4 KiB
Plaintext
---
|
|
import { siteContent } from "@/content/site-content"
|
|
---
|
|
|
|
<section id="zeiten" class="section-v2 hours-v2" aria-labelledby="hours-title">
|
|
<div class="section-heading-v2">
|
|
<p class="eyebrow-v2">Öffnungszeiten</p>
|
|
<h2 id="hours-title">Planbar von Montag bis Samstag.</h2>
|
|
<p>Für Termine bitte kurz anrufen. So lässt sich direkt klären, wann genug Zeit für Beratung, Schnitt oder Farbe frei ist.</p>
|
|
</div>
|
|
|
|
<div class="hours-v2__panel">
|
|
{
|
|
siteContent.hours.map((entry) => (
|
|
<div class="hours-v2__row">
|
|
<span>{entry.day}</span>
|
|
<time>{entry.time}</time>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.hours-v2 {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
|
|
gap: clamp(3rem, 6vw, 6rem);
|
|
background: var(--v2-surface);
|
|
}
|
|
|
|
.hours-v2__panel {
|
|
border-top: 2px solid var(--v2-fg);
|
|
background: color-mix(in oklch, var(--v2-bg) 50%, transparent);
|
|
padding: 0 clamp(0.2rem, 1vw, 0.8rem);
|
|
}
|
|
|
|
.hours-v2__row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1.5rem;
|
|
border-bottom: 1.5px solid color-mix(in oklch, var(--v2-fg) 16%, transparent);
|
|
padding: 1.15rem 0;
|
|
}
|
|
|
|
.hours-v2__row span {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.hours-v2__row time {
|
|
color: var(--v2-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.hours-v2 {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|