// landing.jsx — landing page for Karolina Młyńczak // Theme values are consumed via CSS custom properties on the scoped root. const { useState, useEffect, useRef, useMemo } = React; // ─── ICONS ────────────────────────────────────────────────────────────── // Tiny geometric markers, never literal. Strokes are currentColor. const Ico = { Leaf: ({ size = 18 }) => ( ), Branch: ({ size = 18 }) => ( ), Wave: ({ size = 18 }) => ( ), Dot: ({ size = 10 }) => ( ), Arrow: ({ size = 14 }) => ( ), }; // ─── DECORATIVE ELEMENTS ──────────────────────────────────────────────── function HeroDecor() { return ( ); } function OrganicComposition() { return (
); } // ─── NAV ──────────────────────────────────────────────────────────────── function Nav({ rootId, onCta }) { const links = [ ['o-mnie', 'O mnie'], ['obszary', 'Obszary wsparcia'], ['spotkanie', 'Spotkanie'], ['podejscie', 'Podejście'], ['kontakt', 'Kontakt'], ]; const [active, setActive] = useState(''); // Smooth scroll within the theme root (not the page) so the canvas wrapper // doesn't get pulled around. Falls back to native if no root. const handleClick = (e, id) => { e.preventDefault(); const root = document.getElementById(rootId); if (!root) return; const target = root.querySelector(`[data-section="${id}"]`); if (!target) return; const scrollContainer = root.closest('[data-scroll-container]') || window; const top = target.getBoundingClientRect().top + (scrollContainer === window ? window.scrollY : scrollContainer.scrollTop) - 72; if (scrollContainer === window) { window.scrollTo({ top, behavior: 'smooth' }); } else { scrollContainer.scrollTo({ top, behavior: 'smooth' }); } }; // active section highlight via intersection useEffect(() => { const root = document.getElementById(rootId); if (!root) return; const sections = root.querySelectorAll('[data-section]'); const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.getAttribute('data-section')); }); }, { rootMargin: '-30% 0px -60% 0px', threshold: 0 } ); sections.forEach((s) => io.observe(s)); return () => io.disconnect(); }, [rootId]); return ( ); } // ─── HERO ─────────────────────────────────────────────────────────────── function Hero({ rootId }) { const scrollTo = (id) => { const root = document.getElementById(rootId); if (!root) return; const target = root.querySelector(`[data-section="${id}"]`); if (!target) return; const sc = root.closest('[data-scroll-container]') || window; const top = target.getBoundingClientRect().top + (sc === window ? window.scrollY : sc.scrollTop) - 72; (sc === window ? window : sc).scrollTo({ top, behavior: 'smooth' }); }; return (
Psycholog · Kielce

Karolina Młyńczak

Spokojna przestrzeń do rozmowy.
Wsparcie psychologiczne dla osób dorosłych.

Psycholog · absolwentka UJK w Kielcach.
Uczestniczka Szkoły Psychoterapii Dialog — nurt integracyjno-systemowy.

{ e.preventDefault(); scrollTo('o-mnie'); }} aria-label="Przewiń niżej">
); } // ─── O MNIE ───────────────────────────────────────────────────────────── function About() { return (
01 — O mnie

Z uważnością towarzyszę w odkrywaniu własnych przeżyć — co może wspierać głębsze zrozumienie siebie i rozwój.

Ukończyłam psychologię na Uniwersytecie Jana Kochanowskiego w Kielcach i jestem uczestniczką Szkoły Psychoterapii Dialog — w nurcie integracyjno-systemowym.

Doświadczenie zdobywałam w poradni psychologiczno-pedagogicznej, a obecnie od trzech lat prowadzę wsparcie psychologiczne w ośrodku adopcyjnym — dla dzieci, młodzieży, dorosłych, par i rodzin. W swojej praktyce kieruję się Kodeksem Etyczno-Zawodowym Psychologa i regularnie poddaję swoją pracę superwizji.

); } // ─── OBSZARY WSPARCIA — pill chips, varied widths ─────────────────────── function Areas() { const items = [ { label: 'trudności emocjonalne', size: 'lg' }, { label: 'stres i przeciążenie', size: 'md' }, { label: 'obniżony nastrój', size: 'md' }, { label: 'lęk i napięcie', size: 'sm' }, { label: 'kryzysy życiowe', size: 'md' }, { label: 'trudności w relacjach', size: 'lg' }, { label: 'lepsze rozumienie siebie', size: 'lg' }, { label: 'samotność', size: 'sm' }, { label: 'żałoba i strata', size: 'md' }, ]; return (
02 — Obszary wsparcia

Z czym przychodzą osoby,
z którymi się spotykam.

To nie zamknięta lista. Jeśli nie wiesz, czy to, czego doświadczasz, „pasuje" do tych słów — po prostu napisz, porozmawiamy.

{items.map((it, i) => ( ))}
); } // ─── JAK WYGLĄDA SPOTKANIE ────────────────────────────────────────────── function Meeting() { const steps = [ { n: '01', title: 'Pierwsza konsultacja', body: 'Spotkanie, na którym opowiadasz, z czym przychodzisz. Wspólnie zastanawiamy się, czego potrzebujesz i jak mogę być pomocna. Pierwsze spotkanie trwa 50 minut.', }, { n: '02', title: 'Atmosfera bezpieczeństwa', body: 'Wszystko, co mówisz, pozostaje między nami. Pracuję w atmosferze poufności, szacunku i uważności — bez oceniania, bez pośpiechu.', }, { n: '03', title: 'Stacjonarnie lub online', body: 'Spotykamy się w gabinecie w Kielcach albo online — wybierz formę, która lepiej Ci pasuje. Sesje online prowadzę przez bezpieczną platformę wideo.', }, ]; return (
03 — Jak wygląda spotkanie

Kameralnie, bez pośpiechu,
we własnym tempie.

{steps.map((s, i) => (
{s.n}

{s.title}

{s.body}

))}
Czas sesji 50 minut
Cennik 150 zł / sesja
Częstotliwość co tydzień lub co dwa
Forma stacjonarnie · online
); } // ─── PODEJŚCIE ────────────────────────────────────────────────────────── function Approach() { return (
04 — Podejście

Pracuję w nurcie integracyjno-systemowym. Łączę różne perspektywy, żeby zobaczyć Ciebie w kontekście Twoich relacji, historii i sytuacji, w której jesteś dzisiaj.

Moim sposobem pracy jest uważna rozmowa, prowadzona w Twoim tempie. Wspólnie staramy się zobaczyć i zrozumieć to, co przeżywasz, oraz znaleźć takie sposoby radzenia sobie, które będą dla Ciebie realne i trwałe. Jestem uczestniczką Szkoły Psychoterapii Dialog, swoją pracę regularnie superwizuję i kieruję się Kodeksem Etyczno-Zawodowym Psychologa.

); } // ─── KONTAKT — form with validation ───────────────────────────────────── function Contact() { const [form, setForm] = useState({ name: '', email: '', message: '', mode: 'stacjonarnie' }); const [errors, setErrors] = useState({}); const [touched, setTouched] = useState({}); const [status, setStatus] = useState('idle'); // idle | sending | sent const validate = (f) => { const e = {}; if (!f.name.trim()) e.name = 'Podaj swoje imię.'; if (!f.email.trim()) e.email = 'Podaj adres e-mail.'; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) e.email = 'Sprawdź poprawność adresu.'; if (!f.message.trim()) e.message = 'Napisz kilka słów — to mi pomoże się przygotować.'; else if (f.message.trim().length < 10) e.message = 'Dopisz proszę kilka słów więcej.'; return e; }; const onChange = (k, v) => { const next = { ...form, [k]: v }; setForm(next); if (touched[k]) setErrors(validate(next)); }; const onBlur = (k) => { setTouched({ ...touched, [k]: true }); setErrors(validate(form)); }; const submit = (e) => { e.preventDefault(); const eobj = validate(form); setErrors(eobj); setTouched({ name: true, email: true, message: true }); if (Object.keys(eobj).length) return; setStatus('sending'); setTimeout(() => setStatus('sent'), 900); }; if (status === 'sent') { return (

Dziękuję za wiadomość.

Odezwę się w ciągu 24-48 godzin, najczęściej tego samego dnia. Zaproponuję dogodny termin pierwszego spotkania.

); } return (
05 — Kontakt

Napisz, kiedy poczujesz,
że to dobry moment.

Pierwszy krok bywa najtrudniejszy. Zostaw wiadomość, a ja odezwę się w ciągu 24-48 godzin.

onChange('name', e.target.value)} onBlur={() => onBlur('name')} placeholder="Jak mam do Ciebie pisać?" autoComplete="given-name" /> {errors.name && {errors.name}}
onChange('email', e.target.value)} onBlur={() => onBlur('email')} placeholder="adres@przyklad.pl" autoComplete="email" /> {errors.email && {errors.email}}
Wolisz spotkać się
{['stacjonarnie', 'online', 'nie wiem jeszcze'].map((m) => ( ))}