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
@@ -2,32 +2,147 @@
|
|||||||
import { siteContent } from "@/content/site-content"
|
import { siteContent } from "@/content/site-content"
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="kontakt" class="section-shell contact-section" aria-labelledby="contact-title">
|
<section id="kontakt" class="section-v2 contact-v2" aria-labelledby="contact-title">
|
||||||
<div class="section-heading">
|
<div class="section-heading-v2">
|
||||||
<p class="eyebrow">Kontakt & Anfahrt</p>
|
<p class="eyebrow-v2">Kontakt & Anfahrt</p>
|
||||||
<h2 id="contact-title">Mitten in Crimmitschau.</h2>
|
<h2 id="contact-title">Mitten in Crimmitschau.</h2>
|
||||||
<p class="contact-note">Der schnellste Weg zum Termin bleibt ein kurzer Anruf im Salon.</p>
|
<p class="contact-note">Der schnellste Weg zum Termin: ein kurzer Anruf.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="contact-layout">
|
<div class="contact-v2__layout">
|
||||||
<address class="contact-address">
|
<div class="contact-v2__left">
|
||||||
|
<address class="contact-v2__address">
|
||||||
<span>{siteContent.business.name}</span>
|
<span>{siteContent.business.name}</span>
|
||||||
<span>{siteContent.business.address.street}</span>
|
<span>{siteContent.business.address.street}</span>
|
||||||
<span>{siteContent.business.address.postalCode} {siteContent.business.address.city}</span>
|
<span>{siteContent.business.address.postalCode} {siteContent.business.address.city}</span>
|
||||||
</address>
|
</address>
|
||||||
|
|
||||||
<div class="contact-actions contact-card">
|
<figure class="contact-image-v2">
|
||||||
<a class="contact-line" href={siteContent.business.phone.href}>
|
<img
|
||||||
<span>Telefon</span>
|
src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?auto=format&fit=crop&w=800&q=80"
|
||||||
|
alt="Friseur-Werkzeuge: Schere und Kamm auf einer Marmor-Arbeitsfläche"
|
||||||
|
width="800"
|
||||||
|
height="600"
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
|
<figcaption>Detail & Sorgfalt</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-v2__actions contact-v2__card">
|
||||||
|
<a class="contact-v2__line" href={siteContent.business.phone.href}>
|
||||||
|
<span class="contact-label-v2">Telefon</span>
|
||||||
<strong>{siteContent.business.phone.display}</strong>
|
<strong>{siteContent.business.phone.display}</strong>
|
||||||
</a>
|
</a>
|
||||||
<a class="contact-line" href={`mailto:${siteContent.business.email}`}>
|
<a class="contact-v2__line" href={`mailto:${siteContent.business.email}`}>
|
||||||
<span>E-Mail</span>
|
<span class="contact-label-v2">E-Mail</span>
|
||||||
<strong>{siteContent.business.email}</strong>
|
<strong>{siteContent.business.email}</strong>
|
||||||
</a>
|
</a>
|
||||||
<a class="button-link" href={siteContent.cta.secondary.href} target="_blank" rel="noreferrer">
|
<a class="button-link-v2" href={siteContent.cta.secondary.href} target="_blank" rel="noreferrer">
|
||||||
Route über Google Maps
|
Route über Google Maps
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.contact-v2__layout {
|
||||||
|
display: grid;
|
||||||
|
gap: clamp(3rem, 6vw, 6rem);
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||||
|
margin-top: clamp(2.5rem, 5vw, 4.5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-v2__left {
|
||||||
|
display: grid;
|
||||||
|
gap: clamp(2rem, 4vw, 3rem);
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-v2__address {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.35rem;
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: clamp(2.2rem, 4.5vw, 4.2rem);
|
||||||
|
font-style: normal;
|
||||||
|
line-height: 1.05;
|
||||||
|
color: var(--v2-fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-image-v2 {
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-image-v2 img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
filter: saturate(0.85) contrast(1.05);
|
||||||
|
transition: transform 0.9s var(--ease-out-quart);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-image-v2:hover img {
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-image-v2 figcaption {
|
||||||
|
color: var(--v2-muted);
|
||||||
|
font-size: 0.82rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-v2__actions {
|
||||||
|
display: grid;
|
||||||
|
gap: 0;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-v2__card {
|
||||||
|
border-top: 2px solid var(--v2-fg);
|
||||||
|
border-bottom: 1.5px solid var(--v2-hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-v2__line {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1.5px solid var(--v2-hairline);
|
||||||
|
color: inherit;
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: border-color 200ms ease, background-color 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-v2__line:hover,
|
||||||
|
.contact-v2__line:focus-visible {
|
||||||
|
background: color-mix(in oklch, var(--v2-surface) 45%, transparent);
|
||||||
|
border-color: var(--v2-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-label-v2 {
|
||||||
|
display: block;
|
||||||
|
color: var(--v2-muted);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-v2__line strong {
|
||||||
|
font-size: clamp(1.25rem, 2.2vw, 1.75rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-v2__actions > .button-link-v2 {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.contact-v2__layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
50
src/components/sections/EditorialImage.astro
Normal file
50
src/components/sections/EditorialImage.astro
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
---
|
||||||
|
|
||||||
|
<figure class="editorial-v2">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1562322140-8baeececf3df?auto=format&fit=crop&w=1600&q=80"
|
||||||
|
alt="Warm beleuchteter Salon-Innenraum mit Friseurstühlen und Spiegeln"
|
||||||
|
width="1600"
|
||||||
|
height="900"
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
|
<figcaption>Atmosphäre im Salon</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.editorial-v2 {
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: clamp(22rem, 55vw, 38rem);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editorial-v2 img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
display: block;
|
||||||
|
filter: saturate(0.85) contrast(1.05);
|
||||||
|
transition: transform 0.9s var(--ease-out-quart);
|
||||||
|
}
|
||||||
|
|
||||||
|
.editorial-v2:hover img {
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.editorial-v2 figcaption {
|
||||||
|
position: absolute;
|
||||||
|
right: clamp(1rem, 4vw, 3rem);
|
||||||
|
bottom: 1.25rem;
|
||||||
|
z-index: 2;
|
||||||
|
padding: 0.35rem 0.75rem;
|
||||||
|
background: oklch(0.1 0.02 28 / 55%);
|
||||||
|
color: oklch(0.95 0.01 84);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -2,12 +2,54 @@
|
|||||||
import { siteContent } from "@/content/site-content"
|
import { siteContent } from "@/content/site-content"
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="final-cta" aria-labelledby="final-cta-title">
|
<section class="final-cta-v2" aria-labelledby="final-cta-title">
|
||||||
<p class="eyebrow">Bereit für den nächsten Schnitt?</p>
|
<p class="eyebrow-v2">Bereit für den nächsten Schnitt?</p>
|
||||||
<h2 id="final-cta-title">Kurz anrufen, Termin abstimmen, vorbeikommen.</h2>
|
<h2 id="final-cta-title">Kurz anrufen, Termin abstimmen, vorbeikommen.</h2>
|
||||||
<div class="final-cta-actions">
|
<div class="final-cta-v2__actions">
|
||||||
<a class="button-link button-link--light" href={siteContent.cta.primary.href}>
|
<a class="button-link-v2 button-link-v2--light" href={siteContent.cta.primary.href}>
|
||||||
{siteContent.business.phone.display}
|
{siteContent.business.phone.display}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
||||||
|
|||||||
@@ -2,22 +2,24 @@
|
|||||||
import { siteContent } from "@/content/site-content"
|
import { siteContent } from "@/content/site-content"
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="top" class="hero-section" aria-labelledby="hero-title">
|
<section id="top" class="hero-v2" aria-labelledby="hero-title">
|
||||||
<div class="hero-copy">
|
<div class="hero-deco" aria-hidden="true">H</div>
|
||||||
<p class="eyebrow">{siteContent.hero.eyebrow}</p>
|
<div class="hero-v2__copy">
|
||||||
|
<p class="eyebrow-v2">{siteContent.hero.eyebrow}</p>
|
||||||
<h1 id="hero-title">{siteContent.hero.title}</h1>
|
<h1 id="hero-title">{siteContent.hero.title}</h1>
|
||||||
<p class="hero-intro">{siteContent.hero.intro}</p>
|
<p class="hero-v2__intro">{siteContent.hero.intro}</p>
|
||||||
|
|
||||||
<div class="hero-actions">
|
<div class="hero-v2__actions">
|
||||||
<a class="button-link" href={siteContent.cta.primary.href}>
|
<a class="button-link-v2" href={siteContent.cta.primary.href}>
|
||||||
{siteContent.cta.primary.label}
|
{siteContent.cta.primary.label}
|
||||||
</a>
|
</a>
|
||||||
<a class="button-link button-link--secondary" href={siteContent.cta.secondary.href} target="_blank" rel="noreferrer">
|
<a class="button-link-v2 button-link-v2--ghost" href={siteContent.cta.secondary.href} target="_blank" rel="noreferrer">
|
||||||
{siteContent.cta.secondary.label}
|
{siteContent.cta.secondary.label}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<dl class="salon-meta" aria-label="Saloninformationen">
|
<dl class="hero-v2__meta" aria-label="Saloninformationen">
|
||||||
<div>
|
<div>
|
||||||
<dt>Adresse</dt>
|
<dt>Adresse</dt>
|
||||||
<dd>{siteContent.business.address.display}</dd>
|
<dd>{siteContent.business.address.display}</dd>
|
||||||
@@ -31,12 +33,159 @@ import { siteContent } from "@/content/site-content"
|
|||||||
<dd>{siteContent.hours[0].time}</dd>
|
<dd>{siteContent.hours[0].time}</dd>
|
||||||
</div>
|
</div>
|
||||||
</dl>
|
</dl>
|
||||||
</div>
|
|
||||||
|
|
||||||
<figure class="hero-image">
|
|
||||||
<img src={siteContent.hero.image.src} alt={siteContent.hero.image.alt} width="1200" height="1500" loading="eager" decoding="async" />
|
|
||||||
<figcaption>
|
|
||||||
<a href={siteContent.hero.image.creditUrl} target="_blank" rel="noreferrer">{siteContent.hero.image.credit}</a>
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* ─── Hero: asymmetric, oversized ─── */
|
||||||
|
.hero-v2 {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
|
||||||
|
gap: clamp(2rem, 5vw, 5rem);
|
||||||
|
align-items: end;
|
||||||
|
min-height: 100svh;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: clamp(8rem, 16vw, 12rem) clamp(1rem, 5vw, 5rem) clamp(4rem, 8vw, 7rem);
|
||||||
|
background:
|
||||||
|
linear-gradient(170deg, color-mix(in oklch, var(--v2-surface-warm) 60%, transparent) 0%, transparent 55%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-deco {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: 55vw;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 0.8;
|
||||||
|
color: color-mix(in oklch, var(--v2-primary) 4%, transparent);
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__copy {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
max-width: 52rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__copy .eyebrow-v2 {
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__copy h1 {
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: clamp(3.8rem, 11vw, 10rem);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 0.88;
|
||||||
|
margin: 0 0 1.6rem;
|
||||||
|
max-width: 14ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__intro {
|
||||||
|
max-width: 38ch;
|
||||||
|
color: var(--v2-muted);
|
||||||
|
font-size: clamp(1.15rem, 2vw, 1.5rem);
|
||||||
|
line-height: 1.55;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__meta {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
display: grid;
|
||||||
|
gap: 0;
|
||||||
|
align-self: end;
|
||||||
|
margin: 0;
|
||||||
|
border-top: 1.5px solid var(--v2-hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__meta div {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.35rem;
|
||||||
|
padding: 1.1rem 0;
|
||||||
|
border-bottom: 1.5px solid var(--v2-hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__meta dt {
|
||||||
|
color: var(--v2-muted);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__meta dd {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Hero Load Choreography ─── */
|
||||||
|
.hero-deco {
|
||||||
|
opacity: 0;
|
||||||
|
animation: scale-in 1.2s var(--ease-out-expo) 0.15s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__copy .eyebrow-v2 {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-up 0.7s var(--ease-out-expo) 0.3s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__copy h1 {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-up 0.75s var(--ease-out-expo) 0.42s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__intro {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-up 0.7s var(--ease-out-expo) 0.54s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__actions {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-up 0.6s var(--ease-out-expo) 0.64s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__meta {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-up 0.7s var(--ease-out-expo) 0.8s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.hero-deco,
|
||||||
|
.hero-v2__copy .eyebrow-v2,
|
||||||
|
.hero-v2__copy h1,
|
||||||
|
.hero-v2__intro,
|
||||||
|
.hero-v2__actions,
|
||||||
|
.hero-v2__meta {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.hero-v2 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
min-height: 100svh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__copy h1 {
|
||||||
|
font-size: clamp(2.8rem, 12vw, 5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-v2__meta {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -2,17 +2,17 @@
|
|||||||
import { siteContent } from "@/content/site-content"
|
import { siteContent } from "@/content/site-content"
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="zeiten" class="section-shell hours-section cut-line" aria-labelledby="hours-title">
|
<section id="zeiten" class="section-v2 hours-v2" aria-labelledby="hours-title">
|
||||||
<div class="section-heading">
|
<div class="section-heading-v2">
|
||||||
<p class="eyebrow">Öffnungszeiten</p>
|
<p class="eyebrow-v2">Öffnungszeiten</p>
|
||||||
<h2 id="hours-title">Planbar von Montag bis Samstag.</h2>
|
<h2 id="hours-title">Planbar von Montag bis Samstag.</h2>
|
||||||
<p>Für Termine bitte kurz anrufen. So lässt sich direkt klären, wann genug Zeit für Beratung, Schnitt oder Farbe frei ist.</p>
|
<p>Für Termine bitte kurz anrufen. So lässt sich direkt klären, wann genug Zeit für Beratung, Schnitt oder Farbe frei ist.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hours-panel">
|
<div class="hours-v2__panel">
|
||||||
{
|
{
|
||||||
siteContent.hours.map((entry) => (
|
siteContent.hours.map((entry) => (
|
||||||
<div class="hours-row">
|
<div class="hours-v2__row">
|
||||||
<span>{entry.day}</span>
|
<span>{entry.day}</span>
|
||||||
<time>{entry.time}</time>
|
<time>{entry.time}</time>
|
||||||
</div>
|
</div>
|
||||||
@@ -20,3 +20,41 @@ import { siteContent } from "@/content/site-content"
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.hours-v2 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
|
||||||
|
gap: clamp(3rem, 6vw, 6rem);
|
||||||
|
background: var(--v2-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hours-v2__panel {
|
||||||
|
border-top: 2px solid var(--v2-fg);
|
||||||
|
background: color-mix(in oklch, var(--v2-bg) 50%, transparent);
|
||||||
|
padding: 0 clamp(0.2rem, 1vw, 0.8rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hours-v2__row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1.5rem;
|
||||||
|
border-bottom: 1.5px solid color-mix(in oklch, var(--v2-fg) 16%, transparent);
|
||||||
|
padding: 1.15rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hours-v2__row span {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hours-v2__row time {
|
||||||
|
color: var(--v2-muted);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.hours-v2 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
177
src/components/sections/Reviews.astro
Normal file
177
src/components/sections/Reviews.astro
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
---
|
||||||
|
import { siteContent } from "@/content/site-content"
|
||||||
|
|
||||||
|
function renderStars(rating: number) {
|
||||||
|
return Array.from({ length: 5 }, (_, i) =>
|
||||||
|
i < rating
|
||||||
|
? '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>'
|
||||||
|
: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" aria-hidden="true"><path d="M8 0.5l2.47 5.01L16 6.22l-4 3.9.94 5.5L8 12.88l-4.94 2.6.94-5.5-4-3.9 5.53-.71L8 .5z"/></svg>'
|
||||||
|
).join("")
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="bewertungen" class="section-v2 reviews-v2" aria-labelledby="reviews-title">
|
||||||
|
<div class="section-heading-v2 section-heading-v2--centered">
|
||||||
|
<p class="eyebrow-v2">Kundenstimmen</p>
|
||||||
|
<h2 id="reviews-title">Das sagen unsere Gäste.</h2>
|
||||||
|
<p>Echte Bewertungen von Google – ungefiltert und ehrlich.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="reviews-v2__grid">
|
||||||
|
{
|
||||||
|
siteContent.reviews.map((review) => (
|
||||||
|
<article class="reviews-v2__card">
|
||||||
|
<div class="reviews-v2__header">
|
||||||
|
<div class="reviews-v2__avatar">
|
||||||
|
<span>{review.author.split(" ").map(n => n[0]).join("").substring(0, 2)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="reviews-v2__meta">
|
||||||
|
<p class="reviews-v2__author">{review.author}</p>
|
||||||
|
<p class="reviews-v2__date">{review.date}</p>
|
||||||
|
</div>
|
||||||
|
<div class="reviews-v2__stars" set:html={renderStars(review.rating)} />
|
||||||
|
</div>
|
||||||
|
<blockquote class="reviews-v2__text">
|
||||||
|
<span class="reviews-v2__quote" aria-hidden="true">"</span>
|
||||||
|
{review.text}
|
||||||
|
</blockquote>
|
||||||
|
</article>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="reviews-v2__footer">
|
||||||
|
<a
|
||||||
|
class="reviews-v2__link"
|
||||||
|
href={siteContent.reviewSummary.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<span>Alle {siteContent.reviewSummary.count} auf Google ansehen</span>
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||||
|
<path d="M6 3l5 5-5 5"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.reviews-v2 {
|
||||||
|
background: var(--v2-surface-warm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__card {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.25rem;
|
||||||
|
padding: clamp(1.5rem, 3vw, 2.25rem);
|
||||||
|
background: var(--v2-bg);
|
||||||
|
border: 1.5px 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 12px 40px oklch(0.13 0.035 35 / 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__avatar {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--v2-primary);
|
||||||
|
color: var(--v2-hero-ink);
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__meta {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.1rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__author {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__date {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--v2-muted);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__stars {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.15rem;
|
||||||
|
color: var(--v2-accent);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__text {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 1rem;
|
||||||
|
color: var(--v2-muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__quote {
|
||||||
|
position: absolute;
|
||||||
|
left: -0.25rem;
|
||||||
|
top: -0.35rem;
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: 2.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--v2-primary);
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: clamp(2rem, 4vw, 3rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
border: 1.5px 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews-v2__link:hover,
|
||||||
|
.reviews-v2__link:focus-visible {
|
||||||
|
background: var(--v2-fg);
|
||||||
|
border-color: var(--v2-fg);
|
||||||
|
color: var(--v2-bg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -2,17 +2,17 @@
|
|||||||
import { siteContent } from "@/content/site-content"
|
import { siteContent } from "@/content/site-content"
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="section-shell promise-section cut-line" aria-labelledby="promise-title">
|
<section class="section-v2 promise-v2" aria-labelledby="promise-title">
|
||||||
<div class="promise-intro">
|
<div class="promise-v2__intro">
|
||||||
<p class="eyebrow">Salonversprechen</p>
|
<p class="eyebrow-v2">Salonversprechen</p>
|
||||||
<h2 id="promise-title">Haare dürfen leicht aussehen, auch wenn dahinter Präzision steckt.</h2>
|
<h2 id="promise-title">Haare dürfen leicht aussehen, auch wenn dahinter Präzision steckt.</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="promise-grid">
|
<div class="promise-v2__grid">
|
||||||
{
|
{
|
||||||
siteContent.promise.map((item, index) => (
|
siteContent.promise.map((item, index) => (
|
||||||
<article class="promise-card">
|
<article class="promise-v2__card">
|
||||||
<span class="index-label">{String(index + 1).padStart(2, "0")}</span>
|
<span class="index-label-v2">{String(index + 1).padStart(2, "0")}</span>
|
||||||
<h3>{item.title}</h3>
|
<h3>{item.title}</h3>
|
||||||
<p>{item.text}</p>
|
<p>{item.text}</p>
|
||||||
</article>
|
</article>
|
||||||
@@ -20,3 +20,76 @@ import { siteContent } from "@/content/site-content"
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.promise-v2 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
|
||||||
|
gap: clamp(3rem, 6vw, 6rem);
|
||||||
|
background: var(--v2-surface-dark);
|
||||||
|
color: var(--v2-hero-ink);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.promise-v2__intro {
|
||||||
|
position: sticky;
|
||||||
|
top: 6rem;
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.promise-v2__intro .eyebrow-v2 {
|
||||||
|
color: var(--v2-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.promise-v2__intro h2 {
|
||||||
|
color: var(--v2-hero-ink);
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.promise-v2__grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 0;
|
||||||
|
border-top: 1.5px solid color-mix(in oklch, var(--v2-hero-ink) 18%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.promise-v2__card h3 {
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: clamp(1.4rem, 2.2vw, 2.2rem);
|
||||||
|
line-height: 1.05;
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
color: var(--v2-hero-ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.promise-v2__card p {
|
||||||
|
color: color-mix(in oklch, var(--v2-hero-ink) 72%, transparent);
|
||||||
|
line-height: 1.65;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.promise-v2 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.promise-v2__intro {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -2,18 +2,18 @@
|
|||||||
import { siteContent } from "@/content/site-content"
|
import { siteContent } from "@/content/site-content"
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="leistungen" class="section-shell services-section" aria-labelledby="services-title">
|
<section id="leistungen" class="section-v2 services-v2" aria-labelledby="services-title">
|
||||||
<div class="section-heading">
|
<div class="section-heading-v2">
|
||||||
<p class="eyebrow">Leistungen</p>
|
<p class="eyebrow-v2">Leistungen</p>
|
||||||
<h2 id="services-title">Alles, was ein guter Salonbesuch braucht.</h2>
|
<h2 id="services-title">Alles, was ein guter Salonbesuch braucht.</h2>
|
||||||
<p>Die Auswahl bleibt bewusst klar. Details, Wünsche und Termine werden am besten direkt telefonisch besprochen.</p>
|
<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>
|
||||||
|
|
||||||
<div class="service-list">
|
<div class="services-v2__grid">
|
||||||
{
|
{
|
||||||
siteContent.services.map((service, index) => (
|
siteContent.services.map((service, index) => (
|
||||||
<article class="service-row">
|
<article class="services-v2__card" style={index % 2 === 1 ? "margin-top: 3rem;" : undefined}>
|
||||||
<span class="service-index">{String(index + 1).padStart(2, "0")}</span>
|
<span class="service-index-v2">{String(index + 1).padStart(2, "0")}</span>
|
||||||
<h3>{service.title}</h3>
|
<h3>{service.title}</h3>
|
||||||
<p>{service.text}</p>
|
<p>{service.text}</p>
|
||||||
</article>
|
</article>
|
||||||
@@ -21,3 +21,60 @@ import { siteContent } from "@/content/site-content"
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.services-v2 {
|
||||||
|
background: var(--v2-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-v2__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: clamp(2rem, 4vw, 4rem);
|
||||||
|
margin-top: clamp(3rem, 5vw, 5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-v2__card {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding-bottom: clamp(2rem, 3vw, 3rem);
|
||||||
|
border-bottom: 1.5px solid var(--v2-hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-v2__card:nth-child(even) {
|
||||||
|
margin-top: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-index-v2 {
|
||||||
|
color: var(--v2-primary);
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: clamp(3rem, 6vw, 6rem);
|
||||||
|
line-height: 0.85;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-v2__card h3 {
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
|
||||||
|
line-height: 1.1;
|
||||||
|
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>
|
||||||
|
|||||||
@@ -3,12 +3,14 @@ import { siteContent } from "@/content/site-content"
|
|||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ label: "Leistungen", href: "#leistungen" },
|
{ label: "Leistungen", href: "#leistungen" },
|
||||||
|
{ label: "Team", href: "#team" },
|
||||||
|
{ label: "Bewertungen", href: "#bewertungen" },
|
||||||
{ label: "Zeiten", href: "#zeiten" },
|
{ label: "Zeiten", href: "#zeiten" },
|
||||||
{ label: "Kontakt", href: "#kontakt" },
|
{ label: "Kontakt", href: "#kontakt" },
|
||||||
]
|
]
|
||||||
---
|
---
|
||||||
|
|
||||||
<header class="site-header">
|
<header class="site-header-v2">
|
||||||
<a class="brand-lockup" href="#top" aria-label="Haarscharf Startseite">
|
<a class="brand-lockup" href="#top" aria-label="Haarscharf Startseite">
|
||||||
<span class="brand-mark">H</span>
|
<span class="brand-mark">H</span>
|
||||||
<span>
|
<span>
|
||||||
@@ -18,16 +20,271 @@ const navItems = [
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
<nav aria-label="Hauptnavigation" class="hidden items-center gap-1 md:flex">
|
<nav aria-label="Hauptnavigation" class="hidden items-center gap-1 md:flex">
|
||||||
{
|
{navItems.map((item) => <a class="nav-link-v2" href={item.href}>{item.label}</a>)}
|
||||||
navItems.map((item) => (
|
|
||||||
<a class="nav-link" href={item.href}>
|
|
||||||
{item.label}
|
|
||||||
</a>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<a class="button-link button-link--compact" href={siteContent.cta.primary.href}>
|
<div class="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
class="mobile-nav-toggle md:hidden"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-controls="mobile-nav"
|
||||||
|
aria-label="Menü öffnen"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
|
||||||
|
<line x1="3" y1="5" x2="17" y2="5" />
|
||||||
|
<line x1="3" y1="10" x2="17" y2="10" />
|
||||||
|
<line x1="3" y1="15" x2="17" y2="15" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<a class="button-link-v2 button-link-v2--compact" href={siteContent.cta.primary.href}>
|
||||||
Anrufen
|
Anrufen
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div id="mobile-nav" class="mobile-nav" aria-label="Mobile Navigation" role="dialog" aria-modal="true">
|
||||||
|
<div class="mobile-nav-backdrop"></div>
|
||||||
|
<div class="mobile-nav-panel">
|
||||||
|
<button class="mobile-nav-close" aria-label="Menü schließen" type="button">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
|
||||||
|
<line x1="4" y1="4" x2="16" y2="16" />
|
||||||
|
<line x1="16" y1="4" x2="4" y2="16" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<ul class="mobile-nav-list">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<li><a class="mobile-nav-link" href={item.href}>{item.label}</a></li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<a class="mobile-nav-phone" href={siteContent.business.phone.href}>
|
||||||
|
<span class="contact-label">Telefon</span>
|
||||||
|
<strong>{siteContent.business.phone.display}</strong>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import "@/scripts/mobile-nav";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* ─── Header ─── */
|
||||||
|
.site-header-v2 {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 50;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr auto;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: clamp(0.8rem, 2vw, 1.25rem) clamp(1rem, 4vw, 3rem);
|
||||||
|
color: var(--v2-fg);
|
||||||
|
background: var(--v2-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header-v2 .brand-lockup {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
width: fit-content;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header-v2 .brand-mark {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 2.25rem;
|
||||||
|
height: 2.25rem;
|
||||||
|
border: 1.5px solid currentColor;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header-v2 .brand-descriptor {
|
||||||
|
display: block;
|
||||||
|
color: color-mix(in oklch, currentColor 65%, transparent);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link-v2 {
|
||||||
|
border-radius: 999px;
|
||||||
|
color: inherit;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.55rem 0.9rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background-color 180ms ease, color 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link-v2:hover,
|
||||||
|
.nav-link-v2:focus-visible {
|
||||||
|
background: color-mix(in oklch, currentColor 14%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Mobile Navigation ─── */
|
||||||
|
.mobile-nav-toggle {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border: 1.5px solid color-mix(in oklch, currentColor 30%, transparent);
|
||||||
|
border-radius: var(--v2-radius);
|
||||||
|
background: color-mix(in oklch, currentColor 10%, transparent);
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 180ms ease, border-color 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-toggle:hover,
|
||||||
|
.mobile-nav-toggle:focus-visible {
|
||||||
|
background: color-mix(in oklch, currentColor 18%, transparent);
|
||||||
|
border-color: color-mix(in oklch, currentColor 50%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 60;
|
||||||
|
pointer-events: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav.is-open {
|
||||||
|
pointer-events: auto;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-backdrop {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: oklch(0.1 0.02 28 / 60%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav.is-open .mobile-nav-backdrop {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-panel {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: min(22rem, 85vw);
|
||||||
|
background: var(--v2-bg);
|
||||||
|
color: var(--v2-fg);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
transform: translateX(100%);
|
||||||
|
transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
box-shadow: -8px 0 32px oklch(0.1 0.02 28 / 15%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav.is-open .mobile-nav-panel {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-close {
|
||||||
|
align-self: flex-end;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border: 1.5px solid var(--v2-hairline);
|
||||||
|
border-radius: var(--v2-radius);
|
||||||
|
background: transparent;
|
||||||
|
color: var(--v2-fg);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-close:hover,
|
||||||
|
.mobile-nav-close:focus-visible {
|
||||||
|
background: var(--v2-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-link {
|
||||||
|
display: block;
|
||||||
|
padding: 0.9rem 0.5rem;
|
||||||
|
border-radius: var(--v2-radius);
|
||||||
|
color: var(--v2-fg);
|
||||||
|
font-size: 1.35rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background-color 180ms ease;
|
||||||
|
min-height: 44px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-link:hover,
|
||||||
|
.mobile-nav-link:focus-visible {
|
||||||
|
background: var(--v2-surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-phone {
|
||||||
|
margin-top: auto;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.3rem;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: var(--v2-radius);
|
||||||
|
border: 1.5px solid var(--v2-hairline);
|
||||||
|
background: color-mix(in oklch, var(--v2-surface) 50%, transparent);
|
||||||
|
color: var(--v2-fg);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background-color 180ms ease, border-color 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-phone:hover,
|
||||||
|
.mobile-nav-phone:focus-visible {
|
||||||
|
background: var(--v2-surface);
|
||||||
|
border-color: var(--v2-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-phone strong {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile nav link stagger */
|
||||||
|
.mobile-nav.is-open .mobile-nav-list li {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-up 0.45s var(--ease-out-expo) forwards;
|
||||||
|
}
|
||||||
|
.mobile-nav.is-open .mobile-nav-list li:nth-child(1) { animation-delay: 0.08s; }
|
||||||
|
.mobile-nav.is-open .mobile-nav-list li:nth-child(2) { animation-delay: 0.14s; }
|
||||||
|
.mobile-nav.is-open .mobile-nav-list li:nth-child(3) { animation-delay: 0.20s; }
|
||||||
|
.mobile-nav.is-open .mobile-nav-list li:nth-child(4) { animation-delay: 0.26s; }
|
||||||
|
|
||||||
|
.mobile-nav.is-open .mobile-nav-phone {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fade-up 0.45s var(--ease-out-expo) 0.32s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.site-header-v2 {
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
138
src/components/sections/Team.astro
Normal file
138
src/components/sections/Team.astro
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
---
|
||||||
|
import { siteContent } from "@/content/site-content"
|
||||||
|
---
|
||||||
|
|
||||||
|
<section id="team" class="section-v2 team-v2" aria-labelledby="team-title">
|
||||||
|
<div class="section-heading-v2 section-heading-v2--centered">
|
||||||
|
<p class="eyebrow-v2">Unser Team</p>
|
||||||
|
<h2 id="team-title">Die Menschen hinter den Scheren.</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<figure class="team-image-v2">
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1711274093746-b588a17d2716?auto=format&fit=crop&w=1200&q=82"
|
||||||
|
alt="Eine Friseurin bei der Arbeit mit Schere"
|
||||||
|
width="1200"
|
||||||
|
height="600"
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
|
<figcaption>Handwerk mit Präzision</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<div class="team-v2__grid">
|
||||||
|
{
|
||||||
|
siteContent.team.map((member) => (
|
||||||
|
<article class="team-v2__card">
|
||||||
|
<div class="team-v2__avatar">
|
||||||
|
<span>{member.initials}</span>
|
||||||
|
</div>
|
||||||
|
<h3>{member.name}</h3>
|
||||||
|
<p class="team-v2__role">{member.role}</p>
|
||||||
|
<p>{member.bio}</p>
|
||||||
|
</article>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.team-v2 {
|
||||||
|
background: var(--v2-surface-warm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-image-v2 {
|
||||||
|
margin: clamp(2rem, 4vw, 3.5rem) auto 0;
|
||||||
|
max-width: 72rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-image-v2 img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 21 / 9;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
filter: saturate(0.85) contrast(1.05);
|
||||||
|
transition: transform 0.9s var(--ease-out-quart);
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-image-v2:hover img {
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-image-v2 figcaption {
|
||||||
|
position: absolute;
|
||||||
|
right: 1.25rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
color: oklch(0.95 0.01 84);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
text-shadow: 0 1px 4px oklch(0.1 0.02 28 / 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-v2__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||||
|
gap: 0;
|
||||||
|
margin-top: clamp(2rem, 4vw, 4rem);
|
||||||
|
border-top: 1.5px solid var(--v2-hairline);
|
||||||
|
border-left: 1.5px solid var(--v2-hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-v2__card {
|
||||||
|
display: grid;
|
||||||
|
justify-items: start;
|
||||||
|
gap: 0.625rem;
|
||||||
|
border-bottom: 1.5px solid var(--v2-hairline);
|
||||||
|
border-right: 1.5px solid var(--v2-hairline);
|
||||||
|
padding: clamp(2.2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
|
||||||
|
transition: background-color 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-v2__card:hover {
|
||||||
|
background: color-mix(in oklch, var(--v2-bg) 55%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-v2__avatar {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 5.5rem;
|
||||||
|
height: 5.5rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--v2-surface-dark);
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: 1.35rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--v2-hero-ink);
|
||||||
|
transition: transform 0.35s var(--ease-out-quart), box-shadow 0.35s var(--ease-out-quart);
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-v2__card:hover .team-v2__avatar {
|
||||||
|
transform: scale(1.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-v2__card h3 {
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: clamp(1.25rem, 2vw, 1.6rem);
|
||||||
|
line-height: 1.2;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-v2__role {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--v2-primary);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-v2__card > p:last-child {
|
||||||
|
color: var(--v2-muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.65;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -2,13 +2,61 @@
|
|||||||
import { siteContent } from "@/content/site-content"
|
import { siteContent } from "@/content/site-content"
|
||||||
---
|
---
|
||||||
|
|
||||||
<section class="trust-band" aria-labelledby="trust-title">
|
<section class="trust-v2" aria-labelledby="trust-title">
|
||||||
<div>
|
<div class="trust-v2__rating">
|
||||||
<p class="eyebrow">Lokales Vertrauen</p>
|
<p class="eyebrow-v2">Lokales Vertrauen</p>
|
||||||
<h2 id="trust-title">{siteContent.reviewSummary.rating}</h2>
|
<h2 id="trust-title">{siteContent.reviewSummary.rating}</h2>
|
||||||
</div>
|
</div>
|
||||||
<p class="trust-copy">
|
<p class="trust-v2__copy">
|
||||||
<strong>{siteContent.reviewSummary.count}</strong>
|
<strong>{siteContent.reviewSummary.count}</strong>
|
||||||
<span>{siteContent.reviewSummary.text}</span>
|
<span>{siteContent.reviewSummary.text}</span>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.trust-v2 {
|
||||||
|
display: grid;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2rem;
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||||
|
background: var(--v2-primary);
|
||||||
|
color: var(--v2-hero-ink);
|
||||||
|
padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-v2 .eyebrow-v2 {
|
||||||
|
color: var(--v2-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-v2 h2 {
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: clamp(6rem, 14vw, 13rem);
|
||||||
|
line-height: 0.85;
|
||||||
|
margin: 0.6rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-v2__copy {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.75rem;
|
||||||
|
font-size: clamp(1.15rem, 2vw, 1.5rem);
|
||||||
|
line-height: 1.55;
|
||||||
|
max-width: 38ch;
|
||||||
|
margin: 0;
|
||||||
|
color: color-mix(in oklch, var(--v2-hero-ink) 82%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-v2__copy strong {
|
||||||
|
color: var(--v2-hero-ink);
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.trust-v2 {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-v2 h2 {
|
||||||
|
font-size: clamp(4.5rem, 18vw, 8rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -52,7 +52,14 @@ export type SiteContent = {
|
|||||||
rating: string
|
rating: string
|
||||||
count: string
|
count: string
|
||||||
text: string
|
text: string
|
||||||
|
url: string
|
||||||
}
|
}
|
||||||
|
reviews: Array<{
|
||||||
|
author: string
|
||||||
|
rating: number
|
||||||
|
text: string
|
||||||
|
date: string
|
||||||
|
}>
|
||||||
team: Array<{
|
team: Array<{
|
||||||
name: string
|
name: string
|
||||||
role: string
|
role: string
|
||||||
@@ -147,7 +154,34 @@ export const siteContent = {
|
|||||||
rating: "4,8 / 5",
|
rating: "4,8 / 5",
|
||||||
count: "89 Google-Bewertungen",
|
count: "89 Google-Bewertungen",
|
||||||
text: "Kunden bewerten uns bei Google mit 4,8 von 5 Sternen – und regelmäßig in lokalen Branchenportalen.",
|
text: "Kunden bewerten uns bei Google mit 4,8 von 5 Sternen – und regelmäßig in lokalen Branchenportalen.",
|
||||||
|
url: "https://www.google.com/search?q=haarscharf+crimmitschau#reviews",
|
||||||
},
|
},
|
||||||
|
reviews: [
|
||||||
|
{
|
||||||
|
author: "Alexander Nönnig",
|
||||||
|
rating: 5,
|
||||||
|
text: "Ohne Termin trotzdem innerhalb von 5 Minuten dran gekommen. Es geht viel, wenn man nur will. Mit dem Ergebnis auch sehr zufrieden gewesen. Super, weiter so!",
|
||||||
|
date: "vor 3 Jahren",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
author: "Sven Müller",
|
||||||
|
rating: 5,
|
||||||
|
text: "Kam auch sofort ohne Termin dran und hat alles gepasst.",
|
||||||
|
date: "vor einem Jahr",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
author: "Steffen K.",
|
||||||
|
rating: 5,
|
||||||
|
text: "Die Besuche bei Haarscharf sind stets fantastisch! Das Team zeigte nicht nur ein herausragendes handwerkliches Können, sondern schafft auch immer eine warme und angenehme Atmosphäre.",
|
||||||
|
date: "vor 2 Jahren",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
author: "Leoni Preuss",
|
||||||
|
rating: 5,
|
||||||
|
text: "Ich habe für meinen Abiball eine wunderschöne, einzigartige, schnelle und preisgünstige Hochsteckfrisur bekommen und bin super zufrieden. Neben guter Laune sind auch die Ergebnisse top!",
|
||||||
|
date: "vor 3 Jahren",
|
||||||
|
},
|
||||||
|
],
|
||||||
team: [
|
team: [
|
||||||
{
|
{
|
||||||
name: "Claudia Schäfer",
|
name: "Claudia Schäfer",
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
36
src/scripts/mobile-nav.ts
Normal file
36
src/scripts/mobile-nav.ts
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
(function () {
|
||||||
|
const toggle = document.querySelector(".mobile-nav-toggle") as HTMLElement | null;
|
||||||
|
const nav = document.querySelector("#mobile-nav") as HTMLElement | null;
|
||||||
|
if (!toggle || !nav) return;
|
||||||
|
|
||||||
|
const closeBtn = nav.querySelector(".mobile-nav-close");
|
||||||
|
const backdrop = nav.querySelector(".mobile-nav-backdrop");
|
||||||
|
const links = nav.querySelectorAll("a");
|
||||||
|
|
||||||
|
function open() {
|
||||||
|
nav!.classList.add("is-open");
|
||||||
|
toggle!.setAttribute("aria-expanded", "true");
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
if (links.length) {
|
||||||
|
setTimeout(() => (links[0] as HTMLElement).focus(), 0);
|
||||||
|
}
|
||||||
|
document.addEventListener("keydown", onKeyDown);
|
||||||
|
}
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
nav!.classList.remove("is-open");
|
||||||
|
toggle!.setAttribute("aria-expanded", "false");
|
||||||
|
document.body.style.overflow = "";
|
||||||
|
document.removeEventListener("keydown", onKeyDown);
|
||||||
|
toggle!.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onKeyDown(e: KeyboardEvent) {
|
||||||
|
if (e.key === "Escape") close();
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle.addEventListener("click", open);
|
||||||
|
if (closeBtn) closeBtn.addEventListener("click", close);
|
||||||
|
if (backdrop) backdrop.addEventListener("click", close);
|
||||||
|
links.forEach((link) => link.addEventListener("click", close));
|
||||||
|
})();
|
||||||
41
src/scripts/scroll-reveal.ts
Normal file
41
src/scripts/scroll-reveal.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
(function () {
|
||||||
|
var revealSelectors = [
|
||||||
|
".promise-v2__intro",
|
||||||
|
".promise-v2__card",
|
||||||
|
".editorial-v2",
|
||||||
|
".section-heading-v2",
|
||||||
|
".services-v2__card",
|
||||||
|
".team-image-v2",
|
||||||
|
".team-v2__card",
|
||||||
|
".reviews-v2__card",
|
||||||
|
".reviews-v2__footer",
|
||||||
|
".hours-v2__row",
|
||||||
|
".trust-v2__rating",
|
||||||
|
".trust-v2__copy",
|
||||||
|
".contact-v2__left",
|
||||||
|
".contact-v2__actions",
|
||||||
|
".final-cta-v2",
|
||||||
|
];
|
||||||
|
|
||||||
|
var revealElements = document.querySelectorAll(revealSelectors.join(","));
|
||||||
|
if (!revealElements.length) return;
|
||||||
|
|
||||||
|
var observer = new IntersectionObserver(
|
||||||
|
function (entries) {
|
||||||
|
entries.forEach(function (entry) {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add("is-visible");
|
||||||
|
observer.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
threshold: 0.12,
|
||||||
|
rootMargin: "0px 0px -40px 0px",
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
revealElements.forEach(function (el) {
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
})();
|
||||||
@@ -179,6 +179,38 @@
|
|||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
padding: clamp(0.8rem, 2vw, 1.25rem) clamp(1rem, 4vw, 3rem);
|
padding: clamp(0.8rem, 2vw, 1.25rem) clamp(1rem, 4vw, 3rem);
|
||||||
color: var(--hero-ink);
|
color: var(--hero-ink);
|
||||||
|
transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header.is-scrolled {
|
||||||
|
background: color-mix(in oklch, var(--background) 92%, transparent);
|
||||||
|
backdrop-filter: blur(12px) saturate(140%);
|
||||||
|
-webkit-backdrop-filter: blur(12px) saturate(140%);
|
||||||
|
box-shadow: 0 1px 0 var(--hairline);
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header.is-scrolled .brand-descriptor {
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header.is-scrolled .nav-link:hover,
|
||||||
|
.site-header.is-scrolled .nav-link:focus-visible {
|
||||||
|
background: var(--muted);
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header.is-scrolled .button-link--compact {
|
||||||
|
background: var(--primary);
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: var(--primary-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header.is-scrolled .button-link--compact:hover,
|
||||||
|
.site-header.is-scrolled .button-link--compact:focus-visible {
|
||||||
|
background: oklch(0.28 0.094 18);
|
||||||
|
border-color: oklch(0.28 0.094 18);
|
||||||
|
color: oklch(0.98 0.012 84);
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-lockup {
|
.brand-lockup {
|
||||||
|
|||||||
323
src/styles/home.css
Normal file
323
src/styles/home.css
Normal file
@@ -0,0 +1,323 @@
|
|||||||
|
/* ─── V2 Design Tokens ─── */
|
||||||
|
:root {
|
||||||
|
--v2-bg: oklch(0.965 0.016 78);
|
||||||
|
--v2-fg: oklch(0.13 0.035 35);
|
||||||
|
--v2-primary: oklch(0.36 0.145 42);
|
||||||
|
--v2-primary-dim: oklch(0.3 0.12 42);
|
||||||
|
--v2-accent: oklch(0.78 0.14 62);
|
||||||
|
--v2-muted: oklch(0.52 0.03 42);
|
||||||
|
--v2-surface: oklch(0.94 0.022 75);
|
||||||
|
--v2-surface-dark: oklch(0.2 0.04 45);
|
||||||
|
--v2-surface-warm: oklch(0.93 0.028 72);
|
||||||
|
--v2-hairline: color-mix(in oklch, var(--v2-fg) 14%, transparent);
|
||||||
|
--v2-hero-ink: oklch(0.98 0.012 82);
|
||||||
|
--v2-radius: 0.25rem;
|
||||||
|
|
||||||
|
/* Animation */
|
||||||
|
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
|
||||||
|
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
|
||||||
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Animation Keyframes ─── */
|
||||||
|
@keyframes fade-up {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(28px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scale-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.94);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Base overrides for v2 ─── */
|
||||||
|
body {
|
||||||
|
background: var(--v2-bg);
|
||||||
|
color: var(--v2-fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Shared heading scale ─── */
|
||||||
|
.section-heading-v2 h2,
|
||||||
|
.promise-v2__intro h2,
|
||||||
|
.final-cta-v2 h2 {
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-size: clamp(2.8rem, 6.5vw, 6.5rem);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 0.95;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Buttons ─── */
|
||||||
|
.button-link-v2 {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 2.8rem;
|
||||||
|
width: fit-content;
|
||||||
|
border: 1.5px solid var(--v2-primary);
|
||||||
|
border-radius: var(--v2-radius);
|
||||||
|
background: var(--v2-primary);
|
||||||
|
color: var(--v2-hero-ink);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0.85rem 1.35rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms ease, border-color 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-link-v2:hover,
|
||||||
|
.button-link-v2:focus-visible {
|
||||||
|
background: var(--v2-primary-dim);
|
||||||
|
border-color: var(--v2-primary-dim);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-link-v2--compact {
|
||||||
|
min-height: 2.45rem;
|
||||||
|
padding: 0.55rem 0.95rem;
|
||||||
|
background: transparent;
|
||||||
|
border-color: color-mix(in oklch, currentColor 45%, transparent);
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-link-v2--compact:hover,
|
||||||
|
.button-link-v2--compact:focus-visible {
|
||||||
|
background: var(--v2-fg);
|
||||||
|
border-color: var(--v2-fg);
|
||||||
|
color: var(--v2-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-link-v2--ghost {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--v2-fg);
|
||||||
|
border-color: var(--v2-fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-link-v2--ghost:hover,
|
||||||
|
.button-link-v2--ghost:focus-visible {
|
||||||
|
background: var(--v2-fg);
|
||||||
|
color: var(--v2-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-link-v2--light {
|
||||||
|
background: var(--v2-hero-ink);
|
||||||
|
border-color: var(--v2-hero-ink);
|
||||||
|
color: var(--v2-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-link-v2--light:hover,
|
||||||
|
.button-link-v2--light:focus-visible {
|
||||||
|
background: var(--v2-accent);
|
||||||
|
border-color: var(--v2-accent);
|
||||||
|
color: var(--v2-fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Micro-interactions */
|
||||||
|
.button-link-v2:active {
|
||||||
|
transform: scale(0.97) translateY(-1px);
|
||||||
|
transition-duration: 100ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-link-v2--compact:active,
|
||||||
|
.button-link-v2--ghost:active,
|
||||||
|
.button-link-v2--light:active {
|
||||||
|
transform: scale(0.97);
|
||||||
|
transition-duration: 100ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Eyebrow ─── */
|
||||||
|
.eyebrow-v2 {
|
||||||
|
color: var(--v2-primary);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
margin: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Sections ─── */
|
||||||
|
.section-v2 {
|
||||||
|
padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 5vw, 5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading-v2 {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 44rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading-v2--centered {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading-v2 p:not(.eyebrow-v2) {
|
||||||
|
color: var(--v2-muted);
|
||||||
|
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
|
||||||
|
line-height: 1.65;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Scroll-Triggered Reveals ─── */
|
||||||
|
.promise-v2__intro,
|
||||||
|
.promise-v2__card,
|
||||||
|
.editorial-v2,
|
||||||
|
.section-heading-v2,
|
||||||
|
.services-v2__card,
|
||||||
|
.team-image-v2,
|
||||||
|
.team-v2__card,
|
||||||
|
.hours-v2__row,
|
||||||
|
.trust-v2__rating,
|
||||||
|
.trust-v2__copy,
|
||||||
|
.reviews-v2__card,
|
||||||
|
.reviews-v2__footer,
|
||||||
|
.contact-v2__left,
|
||||||
|
.contact-v2__actions,
|
||||||
|
.final-cta-v2 {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(28px);
|
||||||
|
transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart);
|
||||||
|
}
|
||||||
|
|
||||||
|
.promise-v2__intro.is-visible,
|
||||||
|
.promise-v2__card.is-visible,
|
||||||
|
.editorial-v2.is-visible,
|
||||||
|
.section-heading-v2.is-visible,
|
||||||
|
.services-v2__card.is-visible,
|
||||||
|
.team-image-v2.is-visible,
|
||||||
|
.team-v2__card.is-visible,
|
||||||
|
.reviews-v2__card.is-visible,
|
||||||
|
.reviews-v2__footer.is-visible,
|
||||||
|
.hours-v2__row.is-visible,
|
||||||
|
.trust-v2__rating.is-visible,
|
||||||
|
.trust-v2__copy.is-visible,
|
||||||
|
.contact-v2__left.is-visible,
|
||||||
|
.contact-v2__actions.is-visible,
|
||||||
|
.final-cta-v2.is-visible {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stagger delays */
|
||||||
|
.promise-v2__card:nth-child(1) { transition-delay: 0ms; }
|
||||||
|
.promise-v2__card:nth-child(2) { transition-delay: 100ms; }
|
||||||
|
.promise-v2__card:nth-child(3) { transition-delay: 200ms; }
|
||||||
|
|
||||||
|
.services-v2__card:nth-child(1) { transition-delay: 0ms; }
|
||||||
|
.services-v2__card:nth-child(2) { transition-delay: 120ms; }
|
||||||
|
.services-v2__card:nth-child(3) { transition-delay: 240ms; }
|
||||||
|
.services-v2__card:nth-child(4) { transition-delay: 360ms; }
|
||||||
|
|
||||||
|
.team-v2__card:nth-child(1) { transition-delay: 0ms; }
|
||||||
|
.team-v2__card:nth-child(2) { transition-delay: 100ms; }
|
||||||
|
.team-v2__card:nth-child(3) { transition-delay: 200ms; }
|
||||||
|
|
||||||
|
.hours-v2__row:nth-child(1) { transition-delay: 0ms; }
|
||||||
|
.hours-v2__row:nth-child(2) { transition-delay: 60ms; }
|
||||||
|
.hours-v2__row:nth-child(3) { transition-delay: 120ms; }
|
||||||
|
.hours-v2__row:nth-child(4) { transition-delay: 180ms; }
|
||||||
|
.hours-v2__row:nth-child(5) { transition-delay: 240ms; }
|
||||||
|
.hours-v2__row:nth-child(6) { transition-delay: 300ms; }
|
||||||
|
|
||||||
|
/* Trust number dramatic entrance */
|
||||||
|
.trust-v2__rating h2 {
|
||||||
|
transition: transform 0.9s var(--ease-out-expo);
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
.trust-v2__rating.is-visible h2 {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reviews stagger */
|
||||||
|
.reviews-v2__card:nth-child(1) { transition-delay: 0ms; }
|
||||||
|
.reviews-v2__card:nth-child(2) { transition-delay: 100ms; }
|
||||||
|
.reviews-v2__card:nth-child(3) { transition-delay: 200ms; }
|
||||||
|
.reviews-v2__card:nth-child(4) { transition-delay: 300ms; }
|
||||||
|
|
||||||
|
/* Reduced motion: ensure visibility */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.hero-deco,
|
||||||
|
.hero-v2__copy .eyebrow-v2,
|
||||||
|
.hero-v2__copy h1,
|
||||||
|
.hero-v2__intro,
|
||||||
|
.hero-v2__actions,
|
||||||
|
.hero-v2__meta,
|
||||||
|
.promise-v2__intro,
|
||||||
|
.promise-v2__card,
|
||||||
|
.editorial-v2,
|
||||||
|
.section-heading-v2,
|
||||||
|
.services-v2__card,
|
||||||
|
.team-image-v2,
|
||||||
|
.team-v2__card,
|
||||||
|
.hours-v2__row,
|
||||||
|
.trust-v2__rating,
|
||||||
|
.trust-v2__copy,
|
||||||
|
.reviews-v2__card,
|
||||||
|
.reviews-v2__footer,
|
||||||
|
.contact-v2__left,
|
||||||
|
.contact-v2__actions,
|
||||||
|
.final-cta-v2 {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
animation: none;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
.trust-v2__rating h2 {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Mobile overrides ─── */
|
||||||
|
@media (max-width: 820px) {
|
||||||
|
.section-heading-v2 h2,
|
||||||
|
.promise-v2__intro h2,
|
||||||
|
.final-cta-v2 h2 {
|
||||||
|
font-size: clamp(2.2rem, 8vw, 4rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.promise-v2,
|
||||||
|
.hours-v2,
|
||||||
|
.trust-v2,
|
||||||
|
.contact-v2__layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.promise-v2__intro {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-v2__grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-v2__card:nth-child(even) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-v2 h2 {
|
||||||
|
font-size: clamp(4.5rem, 18vw, 8rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user