143820f859
- Richer color palette with more chroma and warmer tones - Subtle paper texture background - Stronger shadow scale (sm/md/lg/xl) - Hero: larger typography, decorative ring, enhanced choreography - Trust: star rating row, decorative background rings, bigger scale - Services: card backgrounds with lift-on-hover shadows - Reviews: stronger hover lift, thicker borders - Team: image border, stronger avatar hover effects - SalonPromise: decorative ring, hover states, fixed grid alignment - SiteHeader: frosted glass backdrop-filter, stronger brand mark - FinalCta: decorative ring, stronger radial gradients
90 lines
2.2 KiB
Plaintext
90 lines
2.2 KiB
Plaintext
---
|
|
import { siteContent } from "@/content/site-content"
|
|
---
|
|
|
|
<section id="leistungen" class="section-v2 services-v2" aria-labelledby="services-title">
|
|
<div class="section-heading-v2">
|
|
<p class="eyebrow-v2">Leistungen</p>
|
|
<h2 id="services-title">Alles, was ein guter Salonbesuch braucht.</h2>
|
|
<p>Fokus auf das Wesentliche: Ihr Look, Ihr Typ, Ihr Termin. Details und Wünsche besprechen wir am besten kurz am Telefon.</p>
|
|
</div>
|
|
|
|
<div class="services-v2__grid">
|
|
{
|
|
siteContent.services.map((service, index) => (
|
|
<article class="services-v2__card" style={index % 2 === 1 ? "margin-top: 3.5rem;" : undefined}>
|
|
<span class="service-index-v2">{String(index + 1).padStart(2, "0")}</span>
|
|
<h3>{service.title}</h3>
|
|
<p>{service.text}</p>
|
|
</article>
|
|
))
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.services-v2 {
|
|
background: var(--v2-bg);
|
|
}
|
|
|
|
.services-v2__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: clamp(2.5rem, 5vw, 5rem);
|
|
margin-top: clamp(3.5rem, 6vw, 6rem);
|
|
}
|
|
|
|
.services-v2__card {
|
|
display: grid;
|
|
gap: 0.9rem;
|
|
padding: clamp(2rem, 3.5vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.5rem);
|
|
background: var(--v2-surface);
|
|
border: 1.5px solid var(--v2-hairline);
|
|
border-radius: var(--v2-radius);
|
|
transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart);
|
|
}
|
|
|
|
.services-v2__card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.services-v2__card:nth-child(even) {
|
|
margin-top: 5rem;
|
|
}
|
|
|
|
.service-index-v2 {
|
|
color: var(--v2-primary);
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(3.5rem, 7vw, 7rem);
|
|
line-height: 0.82;
|
|
display: block;
|
|
margin-bottom: 0.75rem;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.services-v2__card h3 {
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(1.6rem, 2.8vw, 2.4rem);
|
|
line-height: 1.05;
|
|
margin: 0;
|
|
}
|
|
|
|
.services-v2__card p {
|
|
color: var(--v2-muted);
|
|
line-height: 1.65;
|
|
margin: 0;
|
|
max-width: 36ch;
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.services-v2__grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.services-v2__card:nth-child(even) {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
</style>
|