refactor: update sections for improved layout and styling

- 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.
This commit is contained in:
Matthias
2026-05-25 11:59:10 +02:00
parent 3eb46029e9
commit 5cfcea9caf
17 changed files with 1716 additions and 1535 deletions

View File

@@ -2,12 +2,54 @@
import { siteContent } from "@/content/site-content"
---
<section class="final-cta" aria-labelledby="final-cta-title">
<p class="eyebrow">Bereit für den nächsten Schnitt?</p>
<section class="final-cta-v2" aria-labelledby="final-cta-title">
<p class="eyebrow-v2">Bereit für den nächsten Schnitt?</p>
<h2 id="final-cta-title">Kurz anrufen, Termin abstimmen, vorbeikommen.</h2>
<div class="final-cta-actions">
<a class="button-link button-link--light" href={siteContent.cta.primary.href}>
<div class="final-cta-v2__actions">
<a class="button-link-v2 button-link-v2--light" href={siteContent.cta.primary.href}>
{siteContent.business.phone.display}
</a>
</div>
</section>
<style>
.final-cta-v2 {
display: grid;
gap: 1.75rem;
justify-items: start;
background: var(--v2-surface-dark);
color: var(--v2-hero-ink);
padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 5vw, 5rem);
position: relative;
overflow: hidden;
}
.final-cta-v2::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 80% 120%, color-mix(in oklch, var(--v2-primary) 35%, transparent) 0%, transparent 70%);
pointer-events: none;
}
.final-cta-v2 .eyebrow-v2 {
color: var(--v2-accent);
position: relative;
z-index: 2;
}
.final-cta-v2 h2 {
max-width: 14ch;
position: relative;
z-index: 2;
color: var(--v2-hero-ink);
}
.final-cta-v2__actions {
border-top: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 28%, transparent);
padding-top: 1.5rem;
position: relative;
z-index: 2;
}
</style>