// Die Weiberei — page components const { useState, useEffect, useRef } = React; // ---------- Hooks ---------- const useReveal = () => { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.12 }); io.observe(el); return () => io.disconnect(); }, []); return ref; }; const useCountUp = (target, duration = 1600, suffix = '') => { const [val, setVal] = useState(0); const ref = useRef(null); const started = useRef(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !started.current) { started.current = true; const start = performance.now(); const tick = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(Math.round(target * eased)); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); } }); }, { threshold: 0.4 }); io.observe(el); return () => io.disconnect(); }, [target, duration]); return [val, ref, suffix]; }; // ---------- Nav ---------- const Nav = ({ onOpenInquiry }) => { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); // Lock body scroll while menu is open useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; return () => {document.body.style.overflow = '';}; }, [menuOpen]); const links = [ { label: 'Kursplan', id: 'kursplan' }, { label: 'Behandlungen', id: 'behandlungen' }, { label: 'Angebot', id: 'angebot' }, { label: 'Die Weiber', id: 'weiber' }, { label: 'Bauchschmiede', id: 'bauchschmiede' }, { label: 'Einblicke', id: 'einblicke' }, ]; return (
Die Weiberei
{/* Mobile drawer */}
); }; // ---------- Hero ---------- const Hero = ({ onOpenInquiry }) => { const ref = useReveal(); return (
Frauenort in München-Pasing · seit 2019

Ein Ort für{' '} dich.
Miteinander.{' '} Füreinander.

Die Weiberei begleitet Frauen durch Schwangerschaft, Geburt, Rückbildung, Zyklus und Mutterschaft. Hebammen, Yogalehrerinnen, Osteopathinnen und Coaches – fachlich fundiert, schwesterlich, miteinander.

Angebot ansehen
); }; // ---------- Hero portrait carousel ---------- // Compact stack of overlapping branded cards. Three intimate-gesture vignettes // (hand-on-belly, two-figures, yoga aufrichtung) cycle every ~5s; the back two // peek out fanned behind the front. Replace each with real // photography by swapping the children for an element. const PORTRAIT_CARDS = [ { id: 'hand', label: 'Schwangerschaft', caption: 'Hand auf Bauch' }, { id: 'kreis', label: 'Frauenkreis', caption: 'Im Gespräch' }, { id: 'yoga', label: 'Aufrichtung', caption: 'Yoga im Studio' }]; const HeroPortrait = () => { const [front, setFront] = React.useState(0); const [paused, setPaused] = React.useState(false); const [dragDx, setDragDx] = React.useState(0); const N = PORTRAIT_CARDS.length; const dragRef = React.useRef({ active: false, startX: 0, moved: false, pointerId: 0 }); const SWIPE_THRESHOLD = 48; // px; below this, snap back React.useEffect(() => { if (paused) return undefined; const t = setInterval(() => setFront((i) => (i + 1) % N), 5000); return () => clearInterval(t); }, [paused, N]); const onPointerDown = (e) => { if (e.button !== undefined && e.button !== 0) return; dragRef.current = { active: true, startX: e.clientX, moved: false, pointerId: e.pointerId }; setPaused(true); try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {} }; const onPointerMove = (e) => { if (!dragRef.current.active) return; const dx = e.clientX - dragRef.current.startX; if (!dragRef.current.moved && Math.abs(dx) > 5) dragRef.current.moved = true; setDragDx(dx); }; const onPointerUp = (e) => { if (!dragRef.current.active) return; const dx = e.clientX - dragRef.current.startX; dragRef.current.active = false; setDragDx(0); if (Math.abs(dx) > SWIPE_THRESHOLD) { // Swipe left (dx < 0) → next; swipe right → previous setFront(i => (i + (dx < 0 ? 1 : -1) + N) % N); } try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {} if (dragRef.current.moved) { // Swallow the click that ends the drag so the card under the cursor // doesn't also get tapped to the front const swallow = (ev) => { ev.stopPropagation(); ev.preventDefault(); }; e.currentTarget.addEventListener('click', swallow, { capture: true, once: true }); setTimeout(() => { dragRef.current.moved = false; }, 0); } // Resume autoplay shortly after the user lets go setTimeout(() => setPaused(false), 300); }; // Stack positions: 0 = front, 1 = mid (right peek), 2 = back (left peek). // Rotated/translated so the deck reads as a fanned stack of polaroids. const positionFor = (i) => { const rel = (i - front + N) % N; if (rel === 0) return { z: 3, x: 0, y: 0, rot: -2.5, scale: 1, opacity: 1 }; if (rel === 1) return { z: 2, x: 36, y: 24, rot: 5, scale: 0.94, opacity: 1 }; return { z: 1, x: -28, y: 18, rot: -7, scale: 0.9, opacity: 1 }; }; // While dragging, slide the front card with the finger and rubber-band // fade-in the neighbour from the swipe direction so it feels physical. const dragProgress = Math.max(-1, Math.min(1, dragDx / 160)); return (
setPaused(true)} onMouseLeave={() => setPaused(false)}>
{PORTRAIT_CARDS.map((c, i) => { const p = positionFor(i); const isFront = (i - front + N) % N === 0; // Apply drag offset to the front card; nudge the neighbours // slightly the opposite way so the stack feels physical. const dragX = isFront ? dragDx : -dragProgress * 12; const dragRot = isFront ? dragProgress * 4 : 0; return ( ); })}
{/* Dot indicators below */}
{PORTRAIT_CARDS.map((c, i) =>
); }; // Three branded vignettes. All share the warm sandstone→heather-plum palette // so the stack reads as one piece even when fanned. const PortraitArt = ({ id }) => { const common = ; const bg = <> ; const grain = ; return ( ); }; // ---------- Stats / count-up ---------- const StatItem = ({ target, suffix, label, decimals, isFirst, nowrap }) => { const [val, ref] = useCountUp(target, 1800); return (
{decimals ? (val / 10).toFixed(1).replace('.', ',') : val.toLocaleString('de-DE')}{suffix}
{label}
); }; const Stats = () => { const ref = useReveal(); const headRef = useReveal(); return (
Was die Weiberei trägt

Sechs Jahre, viele Hände, ein gemeinsamer Ort.

Stand {new Date().getFullYear()} — Zahlen aus der laufenden Begleitung.

); }; // ---------- Angebot ---------- const Card = ({ tone, eyebrow, title, body, items, badge }) => { const ref = useReveal(); const tones = { sandstone: { bg: 'var(--sandstone)', radius: 16 }, rose: { bg: 'var(--rose-tint)', radius: 24 }, sage: { bg: 'var(--sage-tint)', radius: 16 }, canvas: { bg: 'var(--offwhite)', radius: 12, border: '1px solid var(--sandstone)' }, honey: { bg: 'var(--offwhite)', radius: 16, border: '1px solid var(--honey)' } }; const t = tones[tone] || tones.sandstone; return (
{e.currentTarget.style.transform = 'translateY(-3px)';e.currentTarget.style.boxShadow = 'var(--shadow-md)';}} onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = 'var(--shadow-xs)';}}>
{eyebrow}
{badge && {badge}}

{title}

{body}

    {items.map((i) =>
  • {i}
    • )}
); }; const Angebot = () => { const ref = useReveal(); return (
Angebot

Begleitung über alle{' '} Lebensphasen.

Vom ersten Spüren bis lange nach der Geburt – und durch alles, was Frausein sonst noch ausmacht. Kurse, Einzelbegleitung, Frauenkreise.

); }; // ---------- Bauchschmiede card ---------- const Bauchschmiede = () => { const ref = useReveal(); return (
VON UNS ENTWICKELT

die Bauchschmiede.

Das 6-Wochen-Tupler-Protokoll für Rektusdiastase. ZPP-zertifiziert, ca. 150 € Kassenerstattung. Aus der Weiberei heraus geboren – als eigenständiges Programm.

{[ { t: 'ZPP §20 SGB V', bg: 'var(--sage-tint)', c: 'var(--sage-ink)' }, { t: 'TUPLER TECHNIQUE®', bg: 'var(--sage-tint)', c: 'var(--sage-ink)' }, { t: '6 WOCHEN', bg: 'var(--honey-tint)', c: 'var(--honey-ink)' }]. map((p) => {p.t} )}
{e.currentTarget.style.background = '#9E5740';e.currentTarget.style.transform = 'translateY(-2px)';}} onMouseLeave={(e) => {e.currentTarget.style.background = 'var(--terracotta)';e.currentTarget.style.transform = 'translateY(0)';}}> Zur Bauchschmiede →
); }; const BauchschmiedeIllustration = () => { // Real photo: trainer hands-on guidance on the mat. Studio with terracotta wall — // matches the Bauchschmiede accent color, so the image sits naturally in the section. return (
Trainerin gibt Hands-on-Anleitung beim Tupler-Protokoll auf der Matte
); }; // ---------- Frauenkreis (Zitat / Editorial) ---------- const Frauenkreis = () => { const ref = useReveal(); return (
Frauenkreis

»Es braucht ein ganzes{' '} Dorf. Bei uns sitzen Frauen miteinander im Kreis. Schwangere, Mütter, nicht-Mütter, im Zyklus, im Wandel. Ohne Erwartung. Ohne Performance.«

Franzi & Dina, Gründerinnen
); }; // ---------- Team ---------- const teamMembers = [ { name: 'Franziska Helmbrecht', role: 'Hebamme, Gründerin', tags: ['Hebamme', 'Geburtsvorbereitung', 'Wochenbett'], image: 'assets/franzi.png' }, { name: 'Dina Stöcker', role: 'Sportwissenschaftlerin, Gründerin', tags: ['Rückbildung', 'Tupler', 'Yoga'], image: 'assets/dina.png' }]; const Team = () => { const ref = useReveal(); return (
Team

Die Frauen, die{' '} halten.

{teamMembers.map((m, i) => )}
); }; const TeamCard = ({ member, index }) => { const ref = useReveal(); return (
{e.currentTarget.style.transform = 'translateY(-3px)';e.currentTarget.style.boxShadow = 'var(--shadow-md)';e.currentTarget.style.borderColor = 'var(--heather-plum)';}} onMouseLeave={(e) => {e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = 'none';e.currentTarget.style.borderColor = 'var(--sandstone)';}}>
{member.image ? {member.name} : member.name.split(' ').map((p) => p[0]).slice(0, 2).join('') }

{member.name}

{member.role}

{member.tags.map((t) => {t} )}
); }; // ---------- Ort ---------- const Ort = ({ onOpenInquiry }) => { const ref = useReveal(); return (
EINBLICKE

Bodenseestraße 94,
München-Pasing.

Heller Holzboden, Pflanzen, Decken, Tee. Ein Raum, in dem man ankommen kann – mit Bauch, mit Kind, mit allem, was gerade da ist.

Die Weiberei entdecken →
); }; // ---------- Einblicke carousel ---------- // Compact photo carousel that gives the "Einblicke" section a face: room, ritual, // course moments. Auto-advancing crossfade with caption + dot navigation. // Picsum-seeded so each slide is stable across reloads; swap the src for real // photography later by replacing the array. const EINBLICKE_SLIDES = [ { id: 'studio', label: 'Studio', caption: 'Heller Yoga-Raum mit Holzboden.' }, { id: 'kreis', label: 'Frauenkreis', caption: 'Im Kreis, im Kerzenschein.' }, { id: 'tee', label: 'Empfang', caption: 'Tee, Decken, Ankommen.' }, { id: 'kurs', label: 'Kurs', caption: 'Rückbildung mit Baby.' }, { id: 'praxis', label: 'Praxis', caption: 'Behandlungsraum für 1:1-Sitzungen.' }]; const EinblickeCarousel = () => { const [idx, setIdx] = React.useState(0); const [paused, setPaused] = React.useState(false); const N = EINBLICKE_SLIDES.length; // Swipe state — track touch start, decide direction on end const swipeRef = React.useRef({ x: 0, y: 0, active: false }); React.useEffect(() => { if (paused) return undefined; const t = setInterval(() => setIdx((i) => (i + 1) % N), 4500); return () => clearInterval(t); }, [paused, N]); const go = (n) => setIdx((n % N + N) % N); const onTouchStart = (e) => { const t = e.touches[0]; swipeRef.current = { x: t.clientX, y: t.clientY, active: true }; setPaused(true); }; const onTouchEnd = (e) => { if (!swipeRef.current.active) return; const t = e.changedTouches[0]; const dx = t.clientX - swipeRef.current.x; const dy = t.clientY - swipeRef.current.y; swipeRef.current.active = false; // Horizontal swipe (only if mostly horizontal, > 40px) if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) { go(idx + (dx < 0 ? 1 : -1)); } setPaused(false); }; return (
setPaused(true)} onMouseLeave={() => setPaused(false)} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} onTouchCancel={onTouchEnd} style={{ position: 'relative', aspectRatio: '4/3', borderRadius: 12, overflow: 'hidden', border: '1px solid var(--sandstone)', boxShadow: '0 22px 60px rgba(42,34,29,0.18)', background: 'var(--sage-tint)', touchAction: 'pan-y', }}> {EINBLICKE_SLIDES.map((s, i) => {s.caption} )} {/* Bottom vignette */} ); }; // ---------- Footer ---------- const Footer = () => { return (
die Weiberei.

Von Weibern für Weiber. Miteinander. Füreinander.

Ort

Bodenseestraße 94
81243 München-Pasing

Kontakt

hallo@dieweiberei.de

Programm

die Bauchschmiede →

© 2026 Die Weiberei Impressum · Datenschutz · AGB
); }; // ---------- Section divider — quiet ornament between sections ---------- const SectionDivider = ({ variant = 'line' }) => { if (variant === 'dot') { // Just a heather-plum dot, very small return ( ); } // Default: hairline + center dot (à la editorial section break) return ( ); }; Object.assign(window, { Nav, Hero, Stats, Angebot, Bauchschmiede, Frauenkreis, Team, Ort, Footer, SectionDivider, useReveal, useCountUp });