640 lines
27 KiB
TypeScript
Executable file
640 lines
27 KiB
TypeScript
Executable file
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Image from "next/image"
|
|
|
|
const C = {
|
|
dark: "#1C2420",
|
|
green: "#2D4A3E",
|
|
greenLight: "#3D5C4E",
|
|
cognac: "#A06040",
|
|
cognacLight: "#C4845A",
|
|
parchment: "#F0EBE1",
|
|
parchmentMid: "#E8E0D4",
|
|
parchmentDark: "#DDD4C4",
|
|
brown: "#1A1210",
|
|
textDark: "#2A2218",
|
|
textMuted: "#7A6E62",
|
|
white: "#FDFAF6",
|
|
sage: "#EBF0ED",
|
|
}
|
|
|
|
function StrataDecor({ color = C.cognac, opacity = 0.2 }: { color?: string; opacity?: number }) {
|
|
return (
|
|
<svg width="280" height="40" viewBox="0 0 280 40" fill="none" aria-hidden="true">
|
|
<path d="M0 10 Q70 5 140 12 Q210 19 280 8" stroke={color} strokeWidth="1.5" fill="none" opacity={opacity + 0.08} />
|
|
<path d="M0 20 Q70 15 140 22 Q210 29 280 18" stroke={color} strokeWidth="1" fill="none" opacity={opacity} />
|
|
<path d="M0 30 Q70 25 140 32 Q210 39 280 28" stroke={color} strokeWidth="0.75" fill="none" opacity={opacity - 0.08} />
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
const body: React.CSSProperties = {
|
|
fontFamily: "var(--font-dm-sans, system-ui, sans-serif)",
|
|
color: C.textDark,
|
|
lineHeight: 1.7,
|
|
}
|
|
|
|
const serif: React.CSSProperties = {
|
|
fontFamily: "var(--font-cormorant, Georgia, serif)",
|
|
}
|
|
|
|
export default function OlgaDeepScanPage() {
|
|
const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "" })
|
|
const [submitted, setSubmitted] = useState(false)
|
|
|
|
function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
|
|
setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }))
|
|
}
|
|
|
|
function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
setSubmitted(true)
|
|
}
|
|
|
|
return (
|
|
<main style={body}>
|
|
|
|
{/* ── HEADER ─────────────────────────────────────────────── */}
|
|
<header style={{ background: C.dark, padding: "14px 32px" }}>
|
|
<div style={{ maxWidth: 760, margin: "0 auto" }}>
|
|
<p style={{
|
|
...serif,
|
|
color: C.parchment,
|
|
fontSize: "0.95rem",
|
|
letterSpacing: "0.14em",
|
|
textTransform: "uppercase",
|
|
margin: 0,
|
|
opacity: 0.75,
|
|
}}>
|
|
Olga Izieva · Skin Signal Method™
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
{/* ── HERO ───────────────────────────────────────────────── */}
|
|
<section style={{ background: C.green, padding: "88px 32px 80px" }}>
|
|
<div style={{ maxWidth: 720, margin: "0 auto" }}>
|
|
|
|
<span style={{
|
|
display: "inline-block",
|
|
background: C.cognac,
|
|
color: C.white,
|
|
fontSize: "0.7rem",
|
|
fontWeight: 600,
|
|
letterSpacing: "0.12em",
|
|
textTransform: "uppercase",
|
|
padding: "5px 14px",
|
|
borderRadius: 2,
|
|
marginBottom: 28,
|
|
}}>
|
|
Nur 5 Plätze verfügbar
|
|
</span>
|
|
|
|
<h1 style={{
|
|
...serif,
|
|
color: C.white,
|
|
fontSize: "clamp(2rem, 5vw, 3rem)",
|
|
fontWeight: 500,
|
|
lineHeight: 1.2,
|
|
marginBottom: 24,
|
|
maxWidth: 600,
|
|
}}>
|
|
In 90 Minuten weißt du endlich, was dein Körper dir die ganze Zeit sagen wollte
|
|
</h1>
|
|
|
|
<p style={{
|
|
color: C.parchment,
|
|
fontSize: "1.05rem",
|
|
lineHeight: 1.75,
|
|
marginBottom: 12,
|
|
maxWidth: 540,
|
|
opacity: 0.88,
|
|
}}>
|
|
Der Skin Signal Deep Scan — eine systemische Körperanalyse, die Haut, Hormone, Darm, Schlaf und Stress als ein zusammenhängendes Bild liest.
|
|
</p>
|
|
|
|
<p style={{
|
|
color: C.parchment,
|
|
fontSize: "0.85rem",
|
|
marginBottom: 44,
|
|
opacity: 0.6,
|
|
}}>
|
|
Olga Izieva · 33 Jahre klinische Erfahrung · Heilpraktikerin · Medical Cosmetology
|
|
</p>
|
|
|
|
<a
|
|
href="#termin"
|
|
style={{
|
|
display: "inline-block",
|
|
background: C.cognac,
|
|
color: C.white,
|
|
padding: "15px 38px",
|
|
fontSize: "0.95rem",
|
|
fontWeight: 600,
|
|
textDecoration: "none",
|
|
borderRadius: 3,
|
|
letterSpacing: "0.04em",
|
|
}}
|
|
>
|
|
Meinen Platz sichern →
|
|
</a>
|
|
|
|
<p style={{ color: C.parchment, fontSize: "0.8rem", marginTop: 14, opacity: 0.55 }}>
|
|
Pilotpreis 197 € · persönlich bei Olga · 5 Plätze
|
|
</p>
|
|
|
|
<div style={{ marginTop: 48, opacity: 0.7 }}>
|
|
<StrataDecor color={C.parchment} opacity={0.12} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── PROBLEM ────────────────────────────────────────────── */}
|
|
<section style={{ background: C.white, padding: "80px 32px" }}>
|
|
<div style={{ maxWidth: 720, margin: "0 auto" }}>
|
|
|
|
<p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 16 }}>
|
|
Kommt dir das bekannt vor?
|
|
</p>
|
|
<h2 style={{
|
|
...serif,
|
|
color: C.dark,
|
|
fontSize: "clamp(1.7rem, 3.5vw, 2.4rem)",
|
|
fontWeight: 500,
|
|
lineHeight: 1.25,
|
|
marginBottom: 48,
|
|
maxWidth: 560,
|
|
}}>
|
|
Du tust alles richtig — und trotzdem stimmt irgendetwas nicht.
|
|
</h2>
|
|
|
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24 }}>
|
|
{[
|
|
["Haut die müde wirkt", "Trotz Pflege, Supplements und clean eating — sie strahlt einfach nicht mehr so wie früher."],
|
|
["Ärzte sagen: alles normal", "Die Blutwerte sind unauffällig. Aber du fühlst, dass etwas nicht stimmt — und niemand kann dir sagen was."],
|
|
["Du hast schon alles probiert", "Keto, Yoga, Schlaftracking, Vitamin D, Kollagen. Jedes Mal kurze Besserung. Dann wieder Ausgangszustand."],
|
|
["Niemand sieht das Gesamtbild", "Jeder schaut auf seinen Bereich. Haut oder Hormone oder Darm. Nie alles zusammen. Nie du."],
|
|
].map(([title, text], i) => (
|
|
<div key={i} style={{ padding: "24px 0", borderTop: `1.5px solid ${C.parchmentDark}` }}>
|
|
<div style={{
|
|
...serif,
|
|
color: C.cognac,
|
|
fontSize: "1.6rem",
|
|
fontWeight: 400,
|
|
marginBottom: 10,
|
|
opacity: 0.5,
|
|
}}>
|
|
{String(i + 1).padStart(2, "0")}
|
|
</div>
|
|
<p style={{ fontWeight: 600, color: C.textDark, fontSize: "0.95rem", marginBottom: 6 }}>{title}</p>
|
|
<p style={{ color: C.textMuted, fontSize: "0.88rem", lineHeight: 1.65 }}>{text}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── EPIPHANY ───────────────────────────────────────────── */}
|
|
<section style={{ background: C.sage, padding: "80px 32px" }}>
|
|
<div style={{ maxWidth: 720, margin: "0 auto" }}>
|
|
<StrataDecor color={C.green} opacity={0.16} />
|
|
<div style={{ height: 40 }} />
|
|
|
|
<blockquote style={{
|
|
...serif,
|
|
color: C.green,
|
|
fontSize: "clamp(1.6rem, 4vw, 2.6rem)",
|
|
fontStyle: "italic",
|
|
fontWeight: 400,
|
|
lineHeight: 1.35,
|
|
marginBottom: 40,
|
|
borderLeft: `3px solid ${C.cognac}`,
|
|
paddingLeft: 32,
|
|
maxWidth: 600,
|
|
}}>
|
|
„Die Haut ist keine Krankheit. Sie ist die Botschaft."
|
|
</blockquote>
|
|
|
|
<p style={{ color: C.textMuted, fontSize: "1rem", lineHeight: 1.8, marginBottom: 16, maxWidth: 560 }}>
|
|
Olga Izieva sieht seit 33 Jahren, was Ärzte nicht sehen wollen: Hautprobleme sind keine Oberflächenfrage. Sie zeigen, was im Körper wirklich passiert.
|
|
</p>
|
|
<p style={{ color: C.textMuted, fontSize: "1rem", lineHeight: 1.8, maxWidth: 560 }}>
|
|
Als ihre eigene Haut durch Stress zusammenbrach und niemand helfen konnte, entwickelte sie die Skin Signal Method™. Ein systemischer Ansatz, der Haut als das liest, was sie ist: das ehrlichste Diagnoseinstrument, das wir haben.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── VALUE STACK ────────────────────────────────────────── */}
|
|
<section style={{ background: C.white, padding: "80px 32px" }}>
|
|
<div style={{ maxWidth: 720, margin: "0 auto" }}>
|
|
|
|
<p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 16 }}>
|
|
Was du bekommst
|
|
</p>
|
|
<h2 style={{
|
|
...serif,
|
|
color: C.dark,
|
|
fontSize: "clamp(1.7rem, 3.5vw, 2.2rem)",
|
|
fontWeight: 500,
|
|
marginBottom: 8,
|
|
}}>
|
|
Skin Signal Deep Scan
|
|
</h2>
|
|
<p style={{ color: C.textMuted, fontSize: "0.95rem", marginBottom: 48 }}>
|
|
90 Minuten. Vollständige systemische Analyse. Alles schriftlich.
|
|
</p>
|
|
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 0, marginBottom: 40, borderTop: `1.5px solid ${C.parchmentDark}` }}>
|
|
{[
|
|
["Visuelle Körperanalyse", "Haut, Zunge, Nägel, Haare, Lippen — Olga liest alle äußeren Signale deines Körpers", "150 €"],
|
|
["Systemische Anamnese", "Hormone, Darm, Schlaf, Stress, Ernährung, Bewegung, Medikamente — beide vollständigen Fragebögen", "180 €"],
|
|
["Schriftliche System-Hypothese", "Olgas Einschätzung was systemisch hinter deinen Symptomen steckt — benannt, nicht vermutet", "220 €"],
|
|
["7-Tage-Sofortplan", "Drei bis fünf konkrete Schritte die heute noch beginnen können — schriftlich", "102 €"],
|
|
["Klare Einschätzung nächster Schritt", "Du weißt danach genau was als nächstes kommt — Olga schlägt die konkrete Richtung vor", "50 €"],
|
|
].map(([title, desc, value], i) => (
|
|
<div key={i} style={{
|
|
display: "flex",
|
|
alignItems: "flex-start",
|
|
justifyContent: "space-between",
|
|
gap: 20,
|
|
padding: "20px 0",
|
|
borderBottom: `1px solid ${C.parchmentDark}`,
|
|
}}>
|
|
<div style={{ flex: 1 }}>
|
|
<p style={{ fontWeight: 600, color: C.textDark, fontSize: "0.93rem", marginBottom: 3 }}>{title}</p>
|
|
<p style={{ color: C.textMuted, fontSize: "0.84rem", lineHeight: 1.55 }}>{desc}</p>
|
|
</div>
|
|
<p style={{ color: C.cognac, fontWeight: 600, fontSize: "0.9rem", whiteSpace: "nowrap", paddingTop: 2 }}>
|
|
{value}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Preisblock */}
|
|
<div style={{
|
|
background: C.green,
|
|
borderRadius: 6,
|
|
padding: "32px 36px",
|
|
marginBottom: 20,
|
|
}}>
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10, flexWrap: "wrap", gap: 8 }}>
|
|
<p style={{ color: C.parchment, fontSize: "0.88rem", opacity: 0.7 }}>Gesamtwert</p>
|
|
<p style={{ ...serif, color: C.parchment, fontSize: "1.4rem", textDecoration: "line-through", opacity: 0.4 }}>702 €</p>
|
|
</div>
|
|
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 8 }}>
|
|
<p style={{ color: C.parchment, fontSize: "1rem", fontWeight: 600 }}>Pilotpreis — für 5 Bestandskundinnen</p>
|
|
<p style={{ ...serif, color: C.white, fontSize: "2.6rem", fontWeight: 600, lineHeight: 1 }}>197 €</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p style={{ color: C.textMuted, fontSize: "0.83rem", lineHeight: 1.65, fontStyle: "italic", marginBottom: 40 }}>
|
|
Das ist der erste strukturierte Durchlauf der Skin Signal Method™. Du bekommst die vollständige Analyse. Im Gegenzug nimmt sich Olga die Zeit, die sie im regulären Praxiskontext nicht hätte.
|
|
</p>
|
|
|
|
<div style={{ textAlign: "center" }}>
|
|
<a
|
|
href="#termin"
|
|
style={{
|
|
display: "inline-block",
|
|
background: C.cognac,
|
|
color: C.white,
|
|
padding: "15px 42px",
|
|
fontSize: "0.95rem",
|
|
fontWeight: 600,
|
|
textDecoration: "none",
|
|
borderRadius: 3,
|
|
letterSpacing: "0.04em",
|
|
}}
|
|
>
|
|
Meinen Platz sichern →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── TRANSFORMATION ─────────────────────────────────────── */}
|
|
<section style={{ background: C.parchmentMid, padding: "80px 32px" }}>
|
|
<div style={{ maxWidth: 720, margin: "0 auto" }}>
|
|
<p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 24 }}>
|
|
Was danach anders ist
|
|
</p>
|
|
|
|
<div style={{ borderLeft: `3px solid ${C.green}`, paddingLeft: 32 }}>
|
|
<p style={{ ...serif, color: C.dark, fontSize: "clamp(1.2rem, 2.5vw, 1.5rem)", lineHeight: 1.7, marginBottom: 20, fontStyle: "italic" }}>
|
|
„Nach diesem Gespräch weißt du endlich, was dein Körper dir die ganze Zeit sagen wollte."
|
|
</p>
|
|
<p style={{ color: C.textMuted, fontSize: "0.97rem", lineHeight: 1.8, marginBottom: 16 }}>
|
|
Die Haut die müde wirkt, die Energie die fehlt, das Gewicht das sich trotz allem nicht bewegt — du verstehst jetzt das Muster dahinter. Olga hat dich als Gesamtbild gelesen: Haut, Zunge, Nägel, Haare, Darm, Hormone, Schlaf, Stress — alles zusammen.
|
|
</p>
|
|
<p style={{ color: C.textMuted, fontSize: "0.97rem", lineHeight: 1.8 }}>
|
|
Du verlässt das Gespräch nicht mit einem weiteren Ratschlag. Sondern mit einer klaren Einschätzung was systemisch hinter deinen Symptomen steckt — und einem 7-Tage-Plan der heute noch startet.{" "}
|
|
<strong style={{ color: C.dark }}>Dein Körper war nie dein Feind. Er hat nur auf Klarheit gewartet.</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── ÜBER OLGA ──────────────────────────────────────────── */}
|
|
<section style={{ background: C.white, padding: "80px 32px" }}>
|
|
<div style={{ maxWidth: 720, margin: "0 auto" }}>
|
|
<p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 40 }}>
|
|
Über Olga Izieva
|
|
</p>
|
|
|
|
<div style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "200px 1fr",
|
|
gap: 48,
|
|
alignItems: "start",
|
|
}}
|
|
className="olga-bio-grid"
|
|
>
|
|
{/* Foto */}
|
|
<div style={{ position: "relative" }}>
|
|
<div style={{
|
|
position: "relative",
|
|
width: 200,
|
|
height: 240,
|
|
borderRadius: 4,
|
|
overflow: "hidden",
|
|
boxShadow: "0 8px 32px rgba(28,36,32,0.12)",
|
|
}}>
|
|
<Image
|
|
src="/olga.jpg"
|
|
alt="Olga Izieva"
|
|
fill
|
|
style={{ objectFit: "cover", objectPosition: "center top" }}
|
|
priority
|
|
/>
|
|
</div>
|
|
<div style={{
|
|
position: "absolute",
|
|
bottom: -12,
|
|
right: -12,
|
|
width: 80,
|
|
height: 80,
|
|
borderRadius: "50%",
|
|
background: C.parchment,
|
|
border: `3px solid ${C.cognac}`,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
...serif,
|
|
color: C.cognac,
|
|
fontSize: "0.65rem",
|
|
letterSpacing: "0.06em",
|
|
textTransform: "uppercase",
|
|
textAlign: "center",
|
|
lineHeight: 1.4,
|
|
fontWeight: 500,
|
|
padding: 4,
|
|
}}>
|
|
33 Jahre<br />Erfahrung
|
|
</div>
|
|
</div>
|
|
|
|
{/* Text */}
|
|
<div>
|
|
<h2 style={{
|
|
...serif,
|
|
color: C.dark,
|
|
fontSize: "clamp(1.6rem, 3vw, 2.2rem)",
|
|
fontWeight: 500,
|
|
marginBottom: 20,
|
|
lineHeight: 1.2,
|
|
}}>
|
|
Die Frau, die deinen Körper liest wie niemand sonst
|
|
</h2>
|
|
|
|
<p style={{ color: C.textMuted, fontSize: "0.95rem", lineHeight: 1.8, marginBottom: 16 }}>
|
|
Olga Izieva hat 33 Jahre als Kosmetikerin gearbeitet — und dabei täglich gesehen, was Ärzte nicht sehen wollten: Die Haut ist kein kosmetisches Problem. Sie ist ein systemisches Signal.
|
|
</p>
|
|
<p style={{ color: C.textMuted, fontSize: "0.95rem", lineHeight: 1.8, marginBottom: 28 }}>
|
|
Sie ist Heilpraktikerin, hat Zertifikate in Ernährungswissenschaft, Psychologie und Medical Cosmetology. Sie koordiniert Ärzte, Spezialisten und Coaches — der einzige Hub, der den visuellen Diagnosezugang der Kosmetik mit systemischer Medizin verbindet.
|
|
</p>
|
|
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
|
{[
|
|
"33 Jahre klinische Praxis als Kosmetikerin",
|
|
"Ausgebildete Heilpraktikerin",
|
|
"Zertifikate in Ernährungswissenschaft & Psychologie",
|
|
"Medical Cosmetology",
|
|
"Skin Signal Method™ — aus der eigenen Praxis heraus entwickelt",
|
|
].map((point, i) => (
|
|
<div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
|
|
<span style={{ color: C.cognac, marginTop: 2, fontSize: "0.9rem" }}>—</span>
|
|
<p style={{ color: C.textDark, fontSize: "0.88rem", lineHeight: 1.5 }}>{point}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── GARANTIE ───────────────────────────────────────────── */}
|
|
<section style={{ background: C.parchment, padding: "80px 32px" }}>
|
|
<div style={{ maxWidth: 720, margin: "0 auto" }}>
|
|
<p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 16 }}>
|
|
Olgas Versprechen
|
|
</p>
|
|
<h2 style={{
|
|
...serif,
|
|
color: C.dark,
|
|
fontSize: "clamp(1.6rem, 3.5vw, 2.2rem)",
|
|
fontWeight: 500,
|
|
marginBottom: 48,
|
|
}}>
|
|
Ohne Wenn und Aber.
|
|
</h2>
|
|
|
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24 }}>
|
|
{[
|
|
{
|
|
label: "Klarheits-Garantie",
|
|
text: "Wenn du nach unserem Gespräch nicht weißt, was dein nächster konkreter Schritt ist — wir machen es nochmal. Kostenlos.",
|
|
},
|
|
{
|
|
label: "7-Tage-Garantie",
|
|
text: "Setz den 7-Tage-Sofortplan um. Wenn du nach einer Woche keine spürbare Veränderung merkst, bekommst du ein kostenloses 20-Minuten-Nachgespräch dazu.",
|
|
},
|
|
].map((g, i) => (
|
|
<div key={i} style={{
|
|
background: C.white,
|
|
borderRadius: 4,
|
|
padding: "28px 28px",
|
|
borderTop: `3px solid ${C.cognac}`,
|
|
}}>
|
|
<p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 14 }}>
|
|
{g.label}
|
|
</p>
|
|
<p style={{ ...serif, color: C.dark, fontSize: "1.05rem", lineHeight: 1.65, fontStyle: "italic" }}>
|
|
„{g.text}"
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── ORDER FORM ─────────────────────────────────────────── */}
|
|
<section id="termin" style={{ background: C.sage, padding: "88px 32px 96px" }}>
|
|
<div style={{ maxWidth: 560, margin: "0 auto" }}>
|
|
<p style={{ color: C.cognac, fontSize: "0.72rem", fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 16 }}>
|
|
Platz sichern
|
|
</p>
|
|
<h2 style={{
|
|
...serif,
|
|
color: C.dark,
|
|
fontSize: "clamp(1.7rem, 3.5vw, 2.4rem)",
|
|
fontWeight: 500,
|
|
marginBottom: 8,
|
|
lineHeight: 1.2,
|
|
}}>
|
|
Dein Platz im Skin Signal Deep Scan
|
|
</h2>
|
|
<p style={{ color: C.textMuted, fontSize: "0.93rem", marginBottom: 6, lineHeight: 1.65 }}>
|
|
Füll das Formular aus — Olga meldet sich persönlich bei dir für die Terminvereinbarung.
|
|
</p>
|
|
<p style={{ color: C.cognac, fontSize: "0.85rem", fontWeight: 600, marginBottom: 44 }}>
|
|
Pilotpreis 197 € · 90 Minuten · 5 Plätze
|
|
</p>
|
|
|
|
{submitted ? (
|
|
<div style={{
|
|
background: C.white,
|
|
borderRadius: 6,
|
|
padding: "40px 36px",
|
|
textAlign: "center",
|
|
borderTop: `3px solid ${C.green}`,
|
|
}}>
|
|
<p style={{
|
|
...serif,
|
|
color: C.green,
|
|
fontSize: "1.9rem",
|
|
fontStyle: "italic",
|
|
marginBottom: 12,
|
|
}}>
|
|
Anfrage eingegangen.
|
|
</p>
|
|
<p style={{ color: C.textMuted, fontSize: "0.95rem", lineHeight: 1.7 }}>
|
|
Olga meldet sich innerhalb von 24 Stunden persönlich bei dir mit allen Details zum Termin.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
|
|
{[
|
|
{ name: "name", label: "Dein Name", type: "text", placeholder: "Vorname Nachname", required: true },
|
|
{ name: "email", label: "E-Mail-Adresse", type: "email", placeholder: "deine@email.de", required: true },
|
|
{ name: "phone", label: "Telefonnummer (optional)", type: "tel", placeholder: "+49 ...", required: false },
|
|
].map((field) => (
|
|
<div key={field.name}>
|
|
<label style={{
|
|
display: "block",
|
|
color: C.textDark,
|
|
fontSize: "0.85rem",
|
|
fontWeight: 600,
|
|
marginBottom: 7,
|
|
letterSpacing: "0.02em",
|
|
}}>
|
|
{field.label}
|
|
</label>
|
|
<input
|
|
type={field.type}
|
|
name={field.name}
|
|
value={formData[field.name as keyof typeof formData]}
|
|
onChange={handleChange}
|
|
placeholder={field.placeholder}
|
|
required={field.required}
|
|
style={{
|
|
width: "100%",
|
|
padding: "12px 16px",
|
|
border: `1.5px solid ${C.parchmentDark}`,
|
|
borderRadius: 3,
|
|
background: C.white,
|
|
color: C.textDark,
|
|
fontSize: "0.95rem",
|
|
outline: "none",
|
|
boxSizing: "border-box",
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
|
|
<div>
|
|
<label style={{
|
|
display: "block",
|
|
color: C.textDark,
|
|
fontSize: "0.85rem",
|
|
fontWeight: 600,
|
|
marginBottom: 7,
|
|
letterSpacing: "0.02em",
|
|
}}>
|
|
Was beschäftigt dich gerade am meisten? (optional)
|
|
</label>
|
|
<textarea
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
rows={4}
|
|
placeholder="Beschreib kurz was dich beschäftigt — Olga bereitet sich damit auf das Gespräch vor."
|
|
style={{
|
|
width: "100%",
|
|
padding: "12px 16px",
|
|
border: `1.5px solid ${C.parchmentDark}`,
|
|
borderRadius: 3,
|
|
background: C.white,
|
|
color: C.textDark,
|
|
fontSize: "0.95rem",
|
|
outline: "none",
|
|
resize: "vertical",
|
|
boxSizing: "border-box",
|
|
fontFamily: "var(--font-dm-sans, system-ui, sans-serif)",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
style={{
|
|
background: C.cognac,
|
|
color: C.white,
|
|
padding: "15px 36px",
|
|
fontSize: "0.95rem",
|
|
fontWeight: 600,
|
|
border: "none",
|
|
borderRadius: 3,
|
|
cursor: "pointer",
|
|
letterSpacing: "0.04em",
|
|
marginTop: 4,
|
|
alignSelf: "flex-start",
|
|
}}
|
|
>
|
|
Anfrage absenden →
|
|
</button>
|
|
|
|
<p style={{ color: C.textMuted, fontSize: "0.79rem", lineHeight: 1.55 }}>
|
|
Kein automatischer Kauf. Olga meldet sich persönlich. Zahlung erfolgt nach Terminbestätigung.
|
|
</p>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── FOOTER ─────────────────────────────────────────────── */}
|
|
<footer style={{ background: C.dark, padding: "24px 32px" }}>
|
|
<div style={{ maxWidth: 720, margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 10 }}>
|
|
<p style={{ ...serif, color: C.parchment, fontSize: "0.95rem", opacity: 0.65, letterSpacing: "0.06em" }}>
|
|
Olga Izieva · Skin Signal Method™
|
|
</p>
|
|
<p style={{ color: C.parchment, fontSize: "0.75rem", opacity: 0.35 }}>
|
|
Impressum · Datenschutz
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</main>
|
|
)
|
|
}
|