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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user