-
-
Project ready!
-
You may now add components and start building.
-
We've already added the button component for you.
-
-
+
+ Zum Inhalt springen
+
+
+
+
+
+
+
+
+
+
{siteContent.hero.eyebrow}
+
{siteContent.hero.title}
+
{siteContent.hero.intro}
+
+
+
+
+
+
- Adresse
+ - {siteContent.business.address.display}
+
+
+
- Telefon
+ - {siteContent.business.phone.display}
+
+
+
- {siteContent.hours[0].day}
+ - {siteContent.hours[0].time}
+
+
+
+
Salonversprechen
+
Haare dürfen leicht aussehen, auch wenn dahinter Präzision steckt.
+
+ {
+ siteContent.promise.map((item, index) => (
+
+ {String(index + 1).padStart(2, "0")}
+ {item.title}
+ {item.text}
+
+ ))
+ }
+
+ Atmosphäre im Salon
+
+
+
+
+
+
Leistungen
+
Alles, was ein guter Salonbesuch braucht.
+
Die Auswahl bleibt bewusst klar. Details, Wünsche und Termine werden am besten direkt telefonisch besprochen.
+
+ {
+ siteContent.services.map((service, index) => (
+
+ {String(index + 1).padStart(2, "0")}
+ {service.title}
+ {service.text}
+
+ ))
+ }
+
+
Unser Team
+
Die Menschen hinter den Scheren.
+
+ Handwerk mit Präzision
+
+
+
+ {
+ siteContent.team.map((member) => (
+
+
+ {member.initials}
+
+ {member.name}
+ {member.role}
+ {member.bio}
+
+ ))
+ }
+
+
Öffnungszeiten
+
Planbar von Montag bis Samstag.
+
Für Termine bitte kurz anrufen. So lässt sich direkt klären, wann genug Zeit für Beratung, Schnitt oder Farbe frei ist.
+
+ {
+ siteContent.hours.map((entry) => (
+
+ {entry.day}
+
+
+ ))
+ }
+
+
Lokales Vertrauen
+
{siteContent.reviewSummary.rating}
+
+ {siteContent.reviewSummary.count}
+ {siteContent.reviewSummary.text}
+
+
+
+
+
+
+
+
+ Bereit für den nächsten Schnitt?
+ Kurz anrufen, Termin abstimmen, vorbeikommen.
+
+
+
+
+
+
+
diff --git a/src/styles/global.css b/src/styles/global.css
index 5e4be4e..fd5dbb4 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -7,30 +7,35 @@
@custom-variant dark (&:is(.dark *));
:root {
- --background: oklch(1 0 0);
- --foreground: oklch(0.147 0.004 49.25);
- --card: oklch(1 0 0);
- --card-foreground: oklch(0.147 0.004 49.25);
- --popover: oklch(1 0 0);
- --popover-foreground: oklch(0.147 0.004 49.25);
- --primary: oklch(0.514 0.222 16.935);
- --primary-foreground: oklch(0.969 0.015 12.422);
- --secondary: oklch(0.967 0.001 286.375);
- --secondary-foreground: oklch(0.21 0.006 285.885);
- --muted: oklch(0.97 0.001 106.424);
- --muted-foreground: oklch(0.553 0.013 58.071);
- --accent: oklch(0.97 0.001 106.424);
- --accent-foreground: oklch(0.216 0.006 56.043);
+ --background: oklch(0.965 0.018 82);
+ --foreground: oklch(0.17 0.028 31);
+ --card: oklch(0.99 0.011 84);
+ --card-foreground: oklch(0.18 0.026 31);
+ --popover: oklch(0.986 0.012 84);
+ --popover-foreground: oklch(0.18 0.026 31);
+ --primary: oklch(0.34 0.105 18);
+ --primary-foreground: oklch(0.986 0.012 84);
+ --secondary: oklch(0.87 0.045 149);
+ --secondary-foreground: oklch(0.2 0.036 34);
+ --muted: oklch(0.92 0.022 78);
+ --muted-foreground: oklch(0.43 0.031 42);
+ --accent: oklch(0.74 0.095 64);
+ --accent-foreground: oklch(0.2 0.036 34);
--destructive: oklch(0.577 0.245 27.325);
- --border: oklch(0.923 0.003 48.717);
- --input: oklch(0.923 0.003 48.717);
- --ring: oklch(0.709 0.01 56.259);
+ --border: oklch(0.78 0.026 70);
+ --input: oklch(0.82 0.027 72);
+ --ring: oklch(0.58 0.112 19);
--chart-1: oklch(0.828 0.111 230.318);
--chart-2: oklch(0.685 0.169 237.323);
--chart-3: oklch(0.588 0.158 241.966);
--chart-4: oklch(0.5 0.134 242.749);
--chart-5: oklch(0.443 0.11 240.79);
- --radius: 0.625rem;
+ --radius: 0.5rem;
+ --surface-warm: oklch(0.934 0.025 78);
+ --surface-deep: oklch(0.195 0.037 31);
+ --hairline: color-mix(in oklch, var(--foreground) 18%, transparent);
+ --hero-ink: oklch(0.985 0.011 84);
+ --measure: 68rem;
--sidebar: oklch(0.985 0.001 106.423);
--sidebar-foreground: oklch(0.147 0.004 49.25);
--sidebar-primary: oklch(0.586 0.253 17.585);
@@ -123,12 +128,635 @@
@apply border-border outline-ring/50;
}
body {
- @apply bg-background text-foreground;
+ @apply bg-background text-foreground antialiased;
+ background-image: linear-gradient(180deg, color-mix(in oklch, var(--surface-warm) 68%, transparent), transparent 28rem);
+ background-repeat: no-repeat;
+ background-size: 100% 28rem;
}
button:not(:disabled), [role="button"]:not(:disabled) {
cursor: pointer;
}
html {
@apply font-sans;
+ scroll-behavior: smooth;
}
-}
\ No newline at end of file
+
+ h1,
+ h2,
+ h3,
+ p {
+ text-wrap: pretty;
+ }
+}
+
+@layer components {
+ .skip-link {
+ position: fixed;
+ left: 1rem;
+ top: 1rem;
+ z-index: 80;
+ transform: translateY(-150%);
+ border-radius: var(--radius);
+ background: var(--primary);
+ color: var(--primary-foreground);
+ padding: 0.65rem 0.9rem;
+ transition: transform 180ms ease;
+ }
+
+ .skip-link:focus {
+ transform: translateY(0);
+ }
+
+ .site-header {
+ 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(--hero-ink);
+ }
+
+ .brand-lockup {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.75rem;
+ width: fit-content;
+ color: inherit;
+ text-decoration: none;
+ }
+
+ .brand-mark {
+ display: grid;
+ place-items: center;
+ width: 2.25rem;
+ height: 2.25rem;
+ border: 1px solid color-mix(in oklch, currentColor 58%, transparent);
+ border-radius: 999px;
+ font-family: var(--font-heading);
+ font-size: 1.05rem;
+ line-height: 1;
+ }
+
+ .brand-descriptor {
+ display: block;
+ color: color-mix(in oklch, var(--hero-ink) 74%, transparent);
+ font-size: 0.78rem;
+ line-height: 1.1;
+ }
+
+ .site-header nav {
+ justify-self: end;
+ }
+
+ .nav-link {
+ border-radius: 999px;
+ color: inherit;
+ font-size: 0.95rem;
+ padding: 0.55rem 0.8rem;
+ text-decoration: none;
+ transition: background-color 180ms ease, color 180ms ease;
+ }
+
+ .nav-link:hover,
+ .nav-link:focus-visible {
+ background: color-mix(in oklch, currentColor 13%, transparent);
+ color: oklch(0.99 0.008 84);
+ }
+
+ .button-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 2.8rem;
+ width: fit-content;
+ border: 1px solid var(--primary);
+ border-radius: var(--radius);
+ background: var(--primary);
+ color: var(--primary-foreground);
+ font-weight: 700;
+ line-height: 1;
+ padding: 0.82rem 1.15rem;
+ text-decoration: none;
+ transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
+ }
+
+ .button-link:hover,
+ .button-link:focus-visible {
+ background: oklch(0.28 0.094 18);
+ border-color: oklch(0.28 0.094 18);
+ box-shadow: 0 0.75rem 2rem oklch(0.14 0.035 24 / 18%);
+ transform: translateY(-1px);
+ }
+
+ .button-link--compact {
+ min-height: 2.45rem;
+ padding: 0.55rem 0.95rem;
+ background: color-mix(in oklch, var(--hero-ink) 14%, transparent);
+ border-color: color-mix(in oklch, var(--hero-ink) 45%, transparent);
+ color: var(--hero-ink);
+ }
+
+ .button-link--secondary {
+ background: transparent;
+ color: var(--foreground);
+ }
+
+ .button-link--secondary:hover,
+ .button-link--secondary:focus-visible {
+ background: var(--foreground);
+ border-color: var(--foreground);
+ color: var(--background);
+ }
+
+ .button-link--light {
+ background: oklch(0.98 0.012 84);
+ border-color: oklch(0.98 0.012 84);
+ color: oklch(0.22 0.039 22);
+ }
+
+ .eyebrow {
+ color: var(--primary);
+ font-size: 0.83rem;
+ font-weight: 800;
+ letter-spacing: 0;
+ margin: 0;
+ text-transform: uppercase;
+ }
+
+ .cut-line {
+ position: relative;
+ }
+
+ .cut-line::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: clamp(1rem, 5vw, 5rem);
+ right: clamp(1rem, 5vw, 5rem);
+ height: 1px;
+ background: linear-gradient(90deg, transparent, var(--hairline) 12%, var(--hairline) 88%, transparent);
+ }
+
+ .hero-section {
+ position: relative;
+ display: grid;
+ min-height: 92svh;
+ overflow: hidden;
+ padding: clamp(7rem, 14vw, 10rem) clamp(1rem, 5vw, 5rem) clamp(3.75rem, 7vw, 6rem);
+ }
+
+ .hero-section::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(90deg, oklch(0.115 0.03 28 / 94%) 0%, oklch(0.16 0.033 30 / 78%) 42%, oklch(0.18 0.035 30 / 30%) 100%),
+ linear-gradient(0deg, oklch(0.1 0.025 28 / 66%) 0%, transparent 46%);
+ z-index: 1;
+ }
+
+ .hero-copy {
+ position: relative;
+ z-index: 2;
+ align-self: end;
+ max-width: 58rem;
+ color: var(--hero-ink);
+ }
+
+ .hero-copy .eyebrow {
+ color: oklch(0.84 0.093 68);
+ }
+
+ .hero-copy .button-link--secondary {
+ border-color: color-mix(in oklch, oklch(0.98 0.012 84) 58%, transparent);
+ color: oklch(0.98 0.012 84);
+ }
+
+ .hero-copy .button-link--secondary:hover,
+ .hero-copy .button-link--secondary:focus-visible {
+ background: oklch(0.98 0.012 84);
+ border-color: oklch(0.98 0.012 84);
+ color: oklch(0.22 0.039 22);
+ }
+
+ .hero-copy h1 {
+ max-width: 12ch;
+ font-family: var(--font-heading);
+ font-size: clamp(4.2rem, 10.5vw, 9.25rem);
+ font-weight: 600;
+ line-height: 0.88;
+ margin: 1rem 0 1.4rem;
+ }
+
+ .hero-intro {
+ max-width: 39rem;
+ color: oklch(0.93 0.015 84);
+ font-size: clamp(1.15rem, 2vw, 1.45rem);
+ line-height: 1.55;
+ margin: 0;
+ }
+
+ .hero-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ padding-top: 1.35rem;
+ }
+
+ .salon-meta {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 0;
+ max-width: 50rem;
+ margin: clamp(2rem, 4vw, 3.2rem) 0 0;
+ border-top: 1px solid color-mix(in oklch, var(--hero-ink) 34%, transparent);
+ border-bottom: 1px solid color-mix(in oklch, var(--hero-ink) 22%, transparent);
+ }
+
+ .salon-meta div {
+ display: grid;
+ gap: 0.32rem;
+ padding: 1rem clamp(0.8rem, 2vw, 1.2rem);
+ }
+
+ .salon-meta div + div {
+ border-left: 1px solid color-mix(in oklch, var(--hero-ink) 18%, transparent);
+ }
+
+ .salon-meta dt {
+ color: color-mix(in oklch, var(--hero-ink) 58%, transparent);
+ font-size: 0.72rem;
+ font-weight: 800;
+ letter-spacing: 0;
+ text-transform: uppercase;
+ }
+
+ .salon-meta dd {
+ margin: 0;
+ font-weight: 700;
+ line-height: 1.25;
+ }
+
+ .hero-image {
+ position: absolute;
+ inset: 0;
+ margin: 0;
+ }
+
+ .hero-image img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ }
+
+ .hero-image figcaption {
+ position: absolute;
+ right: clamp(1rem, 4vw, 3rem);
+ bottom: 1rem;
+ z-index: 2;
+ color: oklch(0.9 0.012 84);
+ font-size: 0.78rem;
+ }
+
+ .hero-image a {
+ color: inherit;
+ }
+
+ .section-shell {
+ padding: clamp(4.5rem, 8vw, 8rem) clamp(1rem, 5vw, 5rem);
+ }
+
+ .section-heading {
+ display: grid;
+ gap: 1rem;
+ max-width: 42rem;
+ }
+
+ .section-heading h2,
+ .promise-section h2,
+ .final-cta h2 {
+ font-family: var(--font-heading);
+ font-size: clamp(2.45rem, 5.4vw, 5.35rem);
+ font-weight: 600;
+ line-height: 1.02;
+ margin: 0;
+ }
+
+ .section-heading p:not(.eyebrow) {
+ color: var(--muted-foreground);
+ font-size: clamp(1.05rem, 1.5vw, 1.22rem);
+ line-height: 1.65;
+ margin: 0;
+ }
+
+ .promise-section {
+ display: grid;
+ gap: clamp(2rem, 5vw, 5rem);
+ grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
+ background:
+ linear-gradient(90deg, transparent 0 calc(50% - 0.5px), var(--hairline) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
+ var(--background);
+ }
+
+ .promise-intro {
+ position: sticky;
+ top: 6rem;
+ align-self: start;
+ }
+
+ .promise-grid {
+ display: grid;
+ gap: 0;
+ border-top: 1px solid var(--hairline);
+ }
+
+ .promise-card {
+ display: grid;
+ grid-template-columns: minmax(3.2rem, 0.22fr) minmax(0, 0.75fr);
+ column-gap: clamp(1rem, 3vw, 2.5rem);
+ border-bottom: 1px solid var(--hairline);
+ padding: clamp(1.25rem, 2.3vw, 2.1rem) 0;
+ }
+
+ .index-label {
+ color: var(--primary);
+ display: block;
+ font-family: var(--font-heading);
+ font-size: clamp(2rem, 4vw, 4rem);
+ line-height: 0.85;
+ opacity: 0.92;
+ }
+
+ .promise-grid h3,
+ .service-row h3 {
+ font-family: var(--font-heading);
+ font-size: clamp(1.55rem, 2vw, 2rem);
+ line-height: 1.08;
+ margin: 0 0 0.75rem;
+ }
+
+ .promise-card h3,
+ .promise-card p {
+ grid-column: 2;
+ }
+
+ .promise-grid p,
+ .service-row p {
+ color: var(--muted-foreground);
+ line-height: 1.65;
+ margin: 0;
+ }
+
+ .services-section {
+ background: var(--surface-deep);
+ color: oklch(0.97 0.012 84);
+ }
+
+ .services-section .eyebrow {
+ color: oklch(0.82 0.104 65);
+ }
+
+ .services-section .section-heading p {
+ color: oklch(0.84 0.019 83);
+ }
+
+ .service-list {
+ display: grid;
+ gap: 0;
+ margin-top: clamp(2rem, 4vw, 4rem);
+ border-top: 1px solid oklch(0.62 0.042 49 / 45%);
+ }
+
+ .service-row {
+ display: grid;
+ grid-template-columns: minmax(3.4rem, 0.18fr) minmax(14rem, 0.62fr) minmax(0, 1fr);
+ gap: clamp(1rem, 3vw, 2.5rem);
+ align-items: baseline;
+ border-bottom: 1px solid oklch(0.62 0.042 49 / 45%);
+ padding: clamp(1.2rem, 2.4vw, 2rem) 0;
+ }
+
+ .service-index {
+ color: oklch(0.82 0.104 65);
+ font-family: var(--font-heading);
+ font-size: clamp(2rem, 4vw, 4.4rem);
+ line-height: 0.85;
+ }
+
+ .service-row p {
+ color: oklch(0.84 0.019 83);
+ }
+
+ .hours-section {
+ display: grid;
+ gap: clamp(2rem, 5vw, 5rem);
+ grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.8fr);
+ background: var(--surface-warm);
+ }
+
+ .hours-panel {
+ border-top: 1px solid var(--foreground);
+ background: color-mix(in oklch, var(--background) 45%, transparent);
+ padding: 0 clamp(0.2rem, 1vw, 0.8rem);
+ }
+
+ .hours-row {
+ display: flex;
+ justify-content: space-between;
+ gap: 1.5rem;
+ border-bottom: 1px solid color-mix(in oklch, var(--foreground) 16%, transparent);
+ padding: 1.05rem 0;
+ }
+
+ .hours-row span {
+ font-weight: 800;
+ }
+
+ .hours-row time {
+ color: var(--muted-foreground);
+ font-variant-numeric: tabular-nums;
+ }
+
+ .trust-band {
+ display: grid;
+ align-items: center;
+ gap: 2rem;
+ grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+ background: color-mix(in oklch, var(--secondary) 82%, var(--background));
+ padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 5vw, 5rem);
+ }
+
+ .trust-band h2 {
+ font-family: var(--font-heading);
+ font-size: clamp(4rem, 9vw, 7rem);
+ line-height: 0.92;
+ margin: 0.8rem 0 0;
+ }
+
+ .trust-copy {
+ display: grid;
+ gap: 0.75rem;
+ font-size: clamp(1.1rem, 1.8vw, 1.45rem);
+ line-height: 1.55;
+ max-width: 42ch;
+ margin: 0;
+ }
+
+ .contact-layout {
+ display: grid;
+ gap: clamp(2rem, 5vw, 5rem);
+ grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
+ margin-top: clamp(2rem, 5vw, 4rem);
+ }
+
+ .contact-note {
+ max-width: 36rem;
+ }
+
+ .contact-address {
+ display: grid;
+ gap: 0.35rem;
+ font-family: var(--font-heading);
+ font-size: clamp(1.8rem, 3.5vw, 3.2rem);
+ font-style: normal;
+ line-height: 1.1;
+ }
+
+ .contact-actions {
+ display: grid;
+ gap: 0;
+ align-content: start;
+ }
+
+ .contact-card {
+ border-top: 1px solid var(--foreground);
+ border-bottom: 1px solid var(--hairline);
+ }
+
+ .contact-line {
+ display: grid;
+ gap: 0.5rem;
+ border: 0;
+ border-bottom: 1px solid var(--hairline);
+ color: inherit;
+ padding: 1.15rem 0;
+ text-decoration: none;
+ transition: border-color 180ms ease, background-color 180ms ease;
+ }
+
+ .contact-line:hover,
+ .contact-line:focus-visible {
+ background: color-mix(in oklch, var(--card) 48%, transparent);
+ border-color: var(--primary);
+ }
+
+ .contact-line span {
+ color: var(--muted-foreground);
+ font-size: 0.9rem;
+ }
+
+ .contact-line strong {
+ font-size: clamp(1.2rem, 2vw, 1.65rem);
+ }
+
+ .contact-actions > .button-link {
+ margin-top: 1.15rem;
+ }
+
+ .final-cta {
+ display: grid;
+ gap: 1.5rem;
+ justify-items: start;
+ background:
+ linear-gradient(90deg, color-mix(in oklch, var(--primary) 92%, black) 0%, var(--primary) 100%);
+ color: var(--primary-foreground);
+ padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem);
+ }
+
+ .final-cta .eyebrow {
+ color: oklch(0.85 0.087 68);
+ }
+
+ .final-cta h2 {
+ max-width: 12ch;
+ }
+
+ .final-cta-actions {
+ border-top: 1px solid color-mix(in oklch, var(--primary-foreground) 34%, transparent);
+ padding-top: 1.25rem;
+ }
+}
+
+@media (max-width: 820px) {
+ .site-header {
+ grid-template-columns: 1fr auto;
+ color: var(--hero-ink);
+ }
+
+ .hero-section {
+ min-height: 94svh;
+ }
+
+ .hero-copy h1 {
+ font-size: clamp(3.4rem, 18vw, 5.6rem);
+ }
+
+ .salon-meta {
+ grid-template-columns: 1fr;
+ }
+
+ .salon-meta div + div {
+ border-top: 1px solid color-mix(in oklch, var(--hero-ink) 18%, transparent);
+ border-left: 0;
+ }
+
+ .promise-section,
+ .hours-section,
+ .trust-band,
+ .contact-layout {
+ grid-template-columns: 1fr;
+ }
+
+ .promise-section {
+ background: var(--background);
+ }
+
+ .promise-intro {
+ position: static;
+ }
+
+ .promise-card,
+ .service-row {
+ grid-template-columns: 1fr;
+ }
+
+ .promise-card h3,
+ .promise-card p {
+ grid-column: auto;
+ }
+
+ .service-row {
+ gap: 0.75rem;
+ }
+
+ .hours-row {
+ align-items: baseline;
+ }
+}
+
+@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;
+ }
+}
+ 
+