diff --git a/src/components/sections/FinalCta.astro b/src/components/sections/FinalCta.astro index db9afc2..87667f1 100644 --- a/src/components/sections/FinalCta.astro +++ b/src/components/sections/FinalCta.astro @@ -3,6 +3,7 @@ import { siteContent } from "@/content/site-content" ---
+

Bereit für den nächsten Schnitt?

Kurz anrufen, Termin abstimmen, vorbeikommen.

@@ -15,21 +16,33 @@ import { siteContent } from "@/content/site-content" diff --git a/src/components/sections/Reviews.astro b/src/components/sections/Reviews.astro index 9172b88..93ecac6 100644 --- a/src/components/sections/Reviews.astro +++ b/src/components/sections/Reviews.astro @@ -4,8 +4,8 @@ import { siteContent } from "@/content/site-content" function renderStars(rating: number) { return Array.from({ length: 5 }, (_, i) => i < rating - ? '' - : '' + ? '' + : '' ).join("") } --- @@ -63,36 +63,36 @@ function renderStars(rating: number) { .reviews-v2__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: clamp(1.2rem, 2.5vw, 2rem); - margin-top: clamp(2.5rem, 5vw, 4rem); + gap: clamp(1.5rem, 2.8vw, 2.2rem); + margin-top: clamp(3rem, 6vw, 5rem); } .reviews-v2__card { display: grid; - gap: 1.25rem; - padding: clamp(1.5rem, 3vw, 2.25rem); + gap: 1.4rem; + padding: clamp(1.8rem, 3.5vw, 2.6rem); background: var(--v2-bg); - border: 1.5px solid var(--v2-hairline); + border: 2px solid var(--v2-hairline); border-radius: var(--v2-radius); - transition: transform 0.35s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart); + transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart); } .reviews-v2__card:hover { - transform: translateY(-4px); - box-shadow: 0 12px 40px oklch(0.13 0.035 35 / 8%); + transform: translateY(-6px); + box-shadow: var(--shadow-lg); } .reviews-v2__header { display: flex; align-items: center; - gap: 0.85rem; + gap: 0.9rem; } .reviews-v2__avatar { display: grid; place-items: center; - width: 2.5rem; - height: 2.5rem; + width: 2.75rem; + height: 2.75rem; border-radius: 999px; background: var(--v2-primary); color: var(--v2-hero-ink); @@ -104,7 +104,7 @@ function renderStars(rating: number) { .reviews-v2__meta { display: grid; - gap: 0.1rem; + gap: 0.15rem; flex: 1; } @@ -116,14 +116,14 @@ function renderStars(rating: number) { } .reviews-v2__date { - font-size: 0.78rem; + font-size: 0.76rem; color: var(--v2-muted); margin: 0; } .reviews-v2__stars { display: flex; - gap: 0.15rem; + gap: 0.2rem; color: var(--v2-accent); flex-shrink: 0; } @@ -131,7 +131,7 @@ function renderStars(rating: number) { .reviews-v2__text { position: relative; margin: 0; - padding-left: 1rem; + padding-left: 1.2rem; color: var(--v2-muted); font-size: 0.95rem; line-height: 1.65; @@ -139,33 +139,33 @@ function renderStars(rating: number) { .reviews-v2__quote { position: absolute; - left: -0.25rem; - top: -0.35rem; + left: -0.2rem; + top: -0.5rem; font-family: var(--font-heading); - font-size: 2.5rem; + font-size: 3rem; line-height: 1; color: var(--v2-primary); - opacity: 0.25; + opacity: 0.3; } .reviews-v2__footer { display: flex; justify-content: center; - margin-top: clamp(2rem, 4vw, 3rem); + margin-top: clamp(2.5rem, 5vw, 3.5rem); } .reviews-v2__link { display: inline-flex; align-items: center; gap: 0.5rem; - padding: 0.75rem 1.5rem; - border: 1.5px solid var(--v2-hairline); + padding: 0.85rem 1.8rem; + border: 2px solid var(--v2-hairline); border-radius: var(--v2-radius); color: var(--v2-fg); font-weight: 700; font-size: 0.95rem; text-decoration: none; - transition: background-color 180ms ease, border-color 180ms ease; + transition: background-color 180ms ease, border-color 180ms ease, transform 220ms var(--ease-out-quart); } .reviews-v2__link:hover, @@ -173,5 +173,6 @@ function renderStars(rating: number) { background: var(--v2-fg); border-color: var(--v2-fg); color: var(--v2-bg); + transform: translateY(-2px); } diff --git a/src/components/sections/SalonPromise.astro b/src/components/sections/SalonPromise.astro index de0ead5..fbfdefe 100644 --- a/src/components/sections/SalonPromise.astro +++ b/src/components/sections/SalonPromise.astro @@ -25,16 +25,31 @@ import { siteContent } from "@/content/site-content" .promise-v2 { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); - gap: clamp(3rem, 6vw, 6rem); + gap: clamp(3.5rem, 7vw, 7rem); background: var(--v2-surface-dark); color: var(--v2-hero-ink); position: relative; + overflow: hidden; + } + + .promise-v2::before { + content: ""; + position: absolute; + top: -20%; + right: -10%; + width: 50vw; + height: 50vw; + border: 2px solid color-mix(in oklch, var(--v2-accent) 12%, transparent); + border-radius: 50%; + pointer-events: none; } .promise-v2__intro { position: sticky; top: 6rem; align-self: start; + position: relative; + z-index: 2; } .promise-v2__intro .eyebrow-v2 { @@ -43,42 +58,53 @@ import { siteContent } from "@/content/site-content" .promise-v2__intro h2 { color: var(--v2-hero-ink); - margin-top: 1rem; + margin-top: 1.1rem; + font-size: clamp(2.8rem, 6.5vw, 6.5rem); + line-height: 0.95; } .promise-v2__grid { display: grid; gap: 0; - border-top: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 18%, transparent); + border-top: 2px solid color-mix(in oklch, var(--v2-hero-ink) 16%, transparent); + position: relative; + z-index: 2; } .promise-v2__card { display: grid; grid-template-columns: minmax(4rem, 0.2fr) minmax(0, 0.8fr); - column-gap: clamp(1.2rem, 3vw, 2.5rem); - border-bottom: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 18%, transparent); - padding: clamp(1.5rem, 2.5vw, 2.5rem) 0; + column-gap: clamp(1.4rem, 3.5vw, 2.8rem); + border-bottom: 2px solid color-mix(in oklch, var(--v2-hero-ink) 16%, transparent); + padding: clamp(1.8rem, 3vw, 2.8rem) 0; + transition: background-color 250ms ease; + } + + .promise-v2__card:hover { + background: color-mix(in oklch, var(--v2-hero-ink) 3%, transparent); } .index-label-v2 { color: var(--v2-accent); display: block; font-family: var(--font-heading); - font-size: clamp(2.5rem, 5vw, 5rem); - line-height: 0.85; - opacity: 0.95; + font-size: clamp(2.8rem, 5.5vw, 5.5rem); + line-height: 0.82; + opacity: 0.9; } .promise-v2__card h3 { + grid-column: 2; font-family: var(--font-heading); - font-size: clamp(1.4rem, 2.2vw, 2.2rem); + font-size: clamp(1.5rem, 2.4vw, 2.4rem); line-height: 1.05; - margin: 0 0 0.75rem; + margin: 0 0 0.85rem; color: var(--v2-hero-ink); } .promise-v2__card p { - color: color-mix(in oklch, var(--v2-hero-ink) 72%, transparent); + grid-column: 2; + color: color-mix(in oklch, var(--v2-hero-ink) 70%, transparent); line-height: 1.65; margin: 0; } diff --git a/src/components/sections/Services.astro b/src/components/sections/Services.astro index 9d8a5e6..9b33b24 100644 --- a/src/components/sections/Services.astro +++ b/src/components/sections/Services.astro @@ -12,7 +12,7 @@ import { siteContent } from "@/content/site-content"
{ siteContent.services.map((service, index) => ( -
+
{String(index + 1).padStart(2, "0")}

{service.title}

{service.text}

@@ -30,34 +30,43 @@ import { siteContent } from "@/content/site-content" .services-v2__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: clamp(2rem, 4vw, 4rem); - margin-top: clamp(3rem, 5vw, 5rem); + gap: clamp(2.5rem, 5vw, 5rem); + margin-top: clamp(3.5rem, 6vw, 6rem); } .services-v2__card { display: grid; - gap: 0.75rem; - padding-bottom: clamp(2rem, 3vw, 3rem); - border-bottom: 1.5px solid var(--v2-hairline); + 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: 4rem; + margin-top: 5rem; } .service-index-v2 { color: var(--v2-primary); font-family: var(--font-heading); - font-size: clamp(3rem, 6vw, 6rem); - line-height: 0.85; + font-size: clamp(3.5rem, 7vw, 7rem); + line-height: 0.82; display: block; - margin-bottom: 0.5rem; + margin-bottom: 0.75rem; + opacity: 0.85; } .services-v2__card h3 { font-family: var(--font-heading); - font-size: clamp(1.5rem, 2.5vw, 2.2rem); - line-height: 1.1; + font-size: clamp(1.6rem, 2.8vw, 2.4rem); + line-height: 1.05; margin: 0; } diff --git a/src/components/sections/SiteHeader.astro b/src/components/sections/SiteHeader.astro index d431329..f7efd83 100644 --- a/src/components/sections/SiteHeader.astro +++ b/src/components/sections/SiteHeader.astro @@ -19,13 +19,13 @@ const navItems = [ -