// shared.jsx — Header, Footer, Tweaks, common helpers.
// Loaded on every page before the page-specific app file.
// Components and helpers are exported to window so other Babel scripts can reach them.
// Beim Reload immer ganz oben starten (kein Scroll-Restore). So sehen User
// die Initial-Choreographie der Animationen jedes Mal von vorne, statt
// mitten in der Seite zu landen wo schon viele Reveals "is-in" sind.
if (typeof window !== "undefined") {
if ("scrollRestoration" in history) {
history.scrollRestoration = "manual";
}
// Sicherheits-Reset: Browser koennte ohne manual-Restore noch scrollen
window.scrollTo(0, 0);
// Auch nach DOM-Load nochmal scrollen, falls ein async resource
// (Font, Bild) zwischendrin den Layout-Anker verschiebt
window.addEventListener("load", () => window.scrollTo(0, 0), { once: true });
}
const { useState, useEffect, useLayoutEffect, useMemo, useRef, createContext, useContext } = React;
// -----------------------------
// Logo (inline SVG — Wave-Stack mit drei gestaffelten Wellen)
// Passend zur Wortmarke "Treibiq" und zum public/assets/logo-full.svg
// -----------------------------
function LogoMark({ size = 26 }) {
// Brand-Image-1 ist das offizielle Wave-Mark als PNG (3 Wellen, voll
// ausgearbeitet, kein SVG-Clipping-Risiko mehr).
// Aspect-Ratio: 441 x 278 = 1.586. Width = size * 1.586.
return (
);
}
function Logo({ small = false }) {
return (
Treibiq
);
}
function BrandWave() {
return (
);
}
// -----------------------------
// Icons (inline SVG, lucide-style)
// -----------------------------
function Icon({ name, size = 20, stroke = 1.6 }) {
const paths = {
arrow: ,
check: ,
plus: <>,
close: <>,
menu: <>,
bell: <>,
play: ,
sparkle: <>,
mail: <>,
file: <>,
chart: <>,
users: <>,
handshake: <>,
shield: ,
server: <>,
zap: ,
clock: <>,
pin: <>,
phone: ,
};
return (
);
}
// -----------------------------
// AnimatedContent: React-Bits-aehnliche Reveal-Animation Komponente,
// vanilla JS port (statt GSAP). Wrapper-Div bekommt initial translate +
// scale + opacity, IntersectionObserver triggert die Transition zu
// "Resting State" (translate0, scale1, opacity1). Easings sind cubic-
// bezier-Approximationen der GSAP-Ease-Curves.
// API kompatibel mit reactbits.dev/animations/animated-content - subset
// (disappear-features weggelassen, brauchen wir aktuell nicht).
// -----------------------------
const ANIM_EASE_MAP = {
"power1.out": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
"power2.out": "cubic-bezier(0.165, 0.84, 0.44, 1)",
"power3.out": "cubic-bezier(0.215, 0.61, 0.355, 1)",
"power4.out": "cubic-bezier(0.165, 0.84, 0.44, 1)",
"expo.out": "cubic-bezier(0.19, 1, 0.22, 1)",
"circ.out": "cubic-bezier(0.075, 0.82, 0.165, 1)",
"back.out": "cubic-bezier(0.34, 1.56, 0.64, 1)",
"bounce.out": "cubic-bezier(0.34, 1.56, 0.64, 1)",
"sine.out": "cubic-bezier(0.39, 0.575, 0.565, 1)",
};
function AnimatedContent(props) {
const children = props.children;
const distance = props.distance != null ? props.distance : 100;
const direction = props.direction || "vertical";
const reverse = props.reverse || false;
const duration = props.duration != null ? props.duration : 0.8;
const ease = props.ease || "power3.out";
const initialOpacity = props.initialOpacity != null ? props.initialOpacity : 0;
const animateOpacity = props.animateOpacity !== false;
const scale = props.scale != null ? props.scale : 1;
const threshold = props.threshold != null ? props.threshold : 0.1;
const delay = props.delay || 0;
const onComplete = props.onComplete;
const className = props.className || "";
const extraStyle = props.style || {};
const ref = useRef(null);
// Hardening 2026-05-15: useMemo fuer das gemergde Style-Objekt.
// Vorher entstand auf JEDEM Render ein neues Object literal, das
// React's Style-Reconciliation als geaenderte style-Prop interpretieren
// konnte und damit die per Imperativ gesetzten inline-Styles (opacity,
// transform, transition) potentiell ueberschrieb. Indem wir per useMemo
// die Referenz nur bei echtem extraStyle-Change neu erzeugen, bleibt
// React's commit-Phase bei Re-Renders idempotent fuer die style-Prop.
// Hinweis: wir vergleichen NICHT tief, sondern verlassen uns auf den
// Eltern-Aufrufer ein stabiles extraStyle zu liefern - das ist auch im
// Original-Verhalten implizit so vorausgesetzt gewesen.
const baseStyle = useMemo(
() => Object.assign({ visibility: "hidden" }, extraStyle),
[extraStyle]
);
// Hardening 2026-05-15: useLayoutEffect statt useEffect fuer den
// Initial-Style-Setup. useLayoutEffect laeuft synchron NACH dem DOM-
// commit, aber VOR dem Browser-Paint. Damit ist garantiert dass der
// User nie das Element ohne Transform / mit visibility:hidden sieht.
// Bei useEffect (asynchron, nach Paint) konnte es einen Frame
// Visibility-Flash geben in dem das Element ohne Initial-Transform
// rendert - wahrnehmbar als "Sprung" wenn die Pakete-Karten remounten.
useLayoutEffect(() => {
const el = ref.current;
if (!el) return;
if (typeof window === "undefined" || typeof IntersectionObserver === "undefined") return;
const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const cssEase = ANIM_EASE_MAP[ease] || ANIM_EASE_MAP["power3.out"];
const axis = direction === "horizontal" ? "X" : "Y";
// Distance kann Number (px) ODER String (CSS-Expression wie "100% + 24px")
// sein. Bei String wird calc() drumrum gelegt damit translate eine valide
// Single-Value-Expression bekommt. Damit lassen sich viewport-abhaengige
// Distanzen (z.B. exakte Spaltenbreite via 100% own-width) ausdruecken.
const distanceCss = typeof distance === "number" ? `${distance}px` : distance;
const offsetCss = reverse
? `calc(-1 * (${distanceCss}))`
: `calc(${distanceCss})`;
if (reduceMotion) {
el.style.opacity = "1";
el.style.transform = "none";
el.style.visibility = "visible";
if (onComplete) onComplete();
return;
}
// Initial-State setzen bevor Transition aktiv ist. Weil wir in
// useLayoutEffect sind, sieht der Browser den Initial-State sicher
// beim ersten Paint, kein Flash moeglich.
el.style.opacity = animateOpacity ? String(initialOpacity) : "1";
el.style.transform = `translate${axis}(${offsetCss}) scale(${scale})`;
el.style.visibility = "visible";
// Doppel-RAF: Browser muss den Initial-State sicher rendern, dann erst
// wird die Transition-Property gesetzt und der IO scharfgeschaltet.
// Vorher: IO wurde synchron erzeugt und konnte feuern BEVOR die
// Transition gesetzt war (= Element snappt instant, keine Animation).
//
// Hardening 2026-05-15: RAF-IDs werden jetzt getrackt und im Cleanup
// cancelled. Vorher liefen die geRAF-ed Callbacks bei schnellem
// mount+unmount weiter und checkten nur das cancelled-Flag - das
// kostete RAF-Quota und verzoegerte parallele Mounts (race conditions
// bei mehreren AnimatedContent-Instanzen im selben Frame, z.B.
// gestaffelte Pricing-Cards). Mit cancelAnimationFrame entstehen
// saubere Cleanups ohne dass die Browser-Animation-Queue muellt.
let completeTimer = null;
let io = null;
let cancelled = false;
let rafId1 = 0;
let rafId2 = 0;
rafId1 = requestAnimationFrame(() => {
rafId1 = 0;
rafId2 = requestAnimationFrame(() => {
rafId2 = 0;
if (cancelled || !ref.current) return;
el.style.transition = `opacity ${duration}s ${cssEase} ${delay}s, transform ${duration}s ${cssEase} ${delay}s`;
// IO wird hier INNERHALB des zweiten RAF erzeugt - so ist
// garantiert dass Initial-State + Transition gesetzt sind
// bevor der erste IO-Callback feuern kann. Auch wenn das
// Element schon im Viewport ist, kommt der Callback frueh-
// estens im naechsten Frame nach observe().
io = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
io.unobserve(entry.target);
el.style.opacity = "1";
el.style.transform = "translate(0, 0) scale(1)";
if (onComplete) {
completeTimer = setTimeout(onComplete, (duration + delay) * 1000);
}
});
},
{ threshold }
);
io.observe(el);
});
});
return () => {
cancelled = true;
if (rafId1) cancelAnimationFrame(rafId1);
if (rafId2) cancelAnimationFrame(rafId2);
if (io) io.disconnect();
if (completeTimer) clearTimeout(completeTimer);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
{children}
);
}
// -----------------------------
// Header (with sticky-on-scroll)
// -----------------------------
function Header({ active }) {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
// Hysterese verhindert Rattern am Threshold: einmal scrolled bleibt
// scrolled bis man wirklich wieder am Top ist (< 2px). Einmal oben
// bleibt oben bis man deutlich gescrollt hat (> 40px). Dazwischen
// kein toggle - keine Glitch-Loop durch Header-Reflow.
// rAF dedup verhindert dass der Handler mehrmals pro Frame feuert.
let ticking = false;
const onScroll = () => {
if (ticking) return;
ticking = true;
requestAnimationFrame(() => {
const y = window.scrollY;
setScrolled((prev) => {
if (!prev && y > 40) return true;
if (prev && y < 2) return false;
return prev;
});
ticking = false;
});
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
// Body-Scroll-Lock wenn Mobile-Menu offen + Escape-Taste schliesst
useEffect(() => {
if (menuOpen) {
document.body.classList.add("menu-open");
const onEsc = (e) => { if (e.key === "Escape") setMenuOpen(false); };
window.addEventListener("keydown", onEsc);
return () => {
document.body.classList.remove("menu-open");
window.removeEventListener("keydown", onEsc);
};
}
}, [menuOpen]);
const links = [
{ href: "use-cases.html", label: "Use Cases", key: "use-cases" },
{ href: "leistungen.html", label: "Leistungen", key: "leistungen" },
{ href: "pakete.html", label: "Preise", key: "pakete" },
{ href: "ueber-uns.html", label: "Über uns", key: "ueber-uns" },
{ href: "kontakt.html", label: "Kontakt", key: "kontakt" },
];
return (
<>
);
}
function Logo({ small = false }) {
return (