Matthias Meister
865440dffb
- Revise headings and descriptions in Contact, FinalCta, and Services sections for improved engagement. - Introduce pricing information for services to enhance transparency. - Update site content to reflect a more inviting tone and better align with customer experience.
71 lines
1.9 KiB
Plaintext
71 lines
1.9 KiB
Plaintext
---
|
|
import { siteContent } from "@/content/site-content"
|
|
---
|
|
|
|
<section class="final-cta-v2" aria-labelledby="final-cta-title">
|
|
<div class="final-cta-v2__deco" aria-hidden="true"></div>
|
|
<p class="eyebrow-v2">Bereit für den nächsten Schnitt?</p>
|
|
<h2 id="final-cta-title">Kurz anrufen, Termin sichern, sich wohlfühlen.</h2>
|
|
<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: 2rem;
|
|
justify-items: start;
|
|
background: var(--v2-surface-dark);
|
|
color: var(--v2-hero-ink);
|
|
padding: clamp(6rem, 12vw, 11rem) clamp(1rem, 5vw, 5rem);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.final-cta-v2__deco {
|
|
position: absolute;
|
|
top: -40%;
|
|
right: -20%;
|
|
width: 60vw;
|
|
height: 60vw;
|
|
border: 2px solid color-mix(in oklch, var(--v2-accent) 15%, transparent);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.final-cta-v2::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 60% 50% at 80% 120%, color-mix(in oklch, var(--v2-primary) 40%, transparent) 0%, transparent 70%),
|
|
radial-gradient(ellipse 40% 30% at 20% -10%, color-mix(in oklch, var(--v2-accent) 12%, transparent) 0%, transparent 60%);
|
|
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);
|
|
font-size: clamp(3rem, 7vw, 7rem);
|
|
line-height: 0.92;
|
|
}
|
|
|
|
.final-cta-v2__actions {
|
|
border-top: 2px solid color-mix(in oklch, var(--v2-hero-ink) 22%, transparent);
|
|
padding-top: 2rem;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
</style>
|