1const { useState, useEffect, useRef, useMemo } = React; 2function PersonioMark({ size = 28, color = "var(--p-accent)" }) { 3 return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 222 222", fill: "none", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { d: "M167.529 45.3093L147.607 9.77713C144.225 3.74162 137.838 0 130.915 0H61.8702C27.6986 0 0 27.6655 0 61.7962V145.705H57.0452V70.4693C57.0452 63.0192 63.0946 56.977 70.5537 56.977H150.645C158.097 56.977 164.133 63.0125 164.133 70.4495V150.736C164.133 158.179 158.091 164.208 150.645 164.208H73.9895V221.179H131.557C138.486 221.179 144.88 217.437 148.262 211.401L167.218 177.614C169.607 173.364 174.107 170.726 178.985 170.726H207.69C215.142 170.726 221.179 164.691 221.179 157.254V65.6766C221.179 58.2331 215.136 52.2042 207.69 52.2042H179.303C174.419 52.2042 169.918 49.5665 167.529 45.3093Z", fill: color })); 4} 5const Icon = { 6 Sparkles: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" }), /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "3" })), 7 ArrowRight: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M5 12h14M13 6l6 6-6 6" })), 8 ArrowUp: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M12 19V5M6 11l6-6 6 6" })), 9 Check: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M20 6L9 17l-5-5" })), 10 Shield: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })), 11 Lock: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("rect", { x: "4", y: "11", width: "16", height: "10", rx: "2" }), /* @__PURE__ */ React.createElement("path", { d: "M8 11V7a4 4 0 1 1 8 0v4" })), 12 Globe: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "9" }), /* @__PURE__ */ React.createElement("path", { d: "M3 12h18M12 3a13.5 13.5 0 0 1 0 18M12 3a13.5 13.5 0 0 0 0 18" })), 13 MessageSquare: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })), 14 Calendar: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }), /* @__PURE__ */ React.createElement("path", { d: "M16 2v4M8 2v4M3 10h18" })), 15 FileText: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }
15, /* @__PURE__ */ React.createElement("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ React.createElement("path", { d: "M14 2v6h6M16 13H8M16 17H8M10 9H8" })), 16 TrendingUp: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M22 7l-8.5 8.5-5-5L2 17M16 7h6v6" })), 17 Users: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" }), /* @__PURE__ */ React.createElement("circle", { cx: "8.5", cy: "7", r: "4" })), 18 CheckCircle: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "9" }), /* @__PURE__ */ React.createElement("path", { d: "M9 12l2 2 4-4" })), 19 Bot: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("rect", { x: "4", y: "7", width: "16", height: "13", rx: "3" }), /* @__PURE__ */ React.createElement("path", { d: "M12 3v4M9 13h.01M15 13h.01M9 17h6" })), 20 Zap: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M13 2L3 14h7l-1 8 10-12h-7l1-8z" })), 21 Search: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("circle", { cx: "11", cy: "11", r: "7" }), /* @__PURE__ */ React.createElement("path", { d: "M21 21l-4.3-4.3" })), 22 Plus: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M12 5v14M5 12h14" })), 23 X: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M18 6L6 18M6 6l12 12" })), 24 Menu: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M3 6h18M3 12h18M3 18h18" })), 25 Cpu: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2" }), /* @__PURE__ */ React.createElement("rect", { x: "9", y: "9", width: "6", height: "6" }), /* @__PURE__ */ React.createElement("path", { d: "M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3" })), 26 Layers: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" })), 27 Heart: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }
27, /* @__PURE__ */ React.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })), 28 User: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "7", r: "4" })), 29 Database: (p) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", ...p }, /* @__PURE__ */ React.createElement("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }), /* @__PURE__ */ React.createElement("path", { d: "M3 5v6c0 1.66 4 3 9 3s9-1.34 9-3V5M3 11v6c0 1.66 4 3 9 3s9-1.34 9-3v-6" })) 30}; 31function useReveal() { 32 useEffect(() => { 33 const els = document.querySelectorAll(".reveal"); 34 const io = new IntersectionObserver( 35 (entries) => entries.forEach((e) => { 36 if (e.isIntersecting) e.target.classList.add("in"); 37 }), 38 { threshold: 0.12 } 39 ); 40 els.forEach((el) => io.observe(el)); 41 return () => io.disconnect(); 42 }); 43} 44function Nav() { 45 const [scrolled, setScrolled] = useState(false); 46 const [menuOpen, setMenuOpen] = useState(false); 47 useEffect(() => { 48 const onScroll = () => setScrolled(window.scrollY > 24); 49 window.addEventListener("scroll", onScroll); 50 return () => window.removeEventListener("scroll", onScroll); 51 }, []); 52 useEffect(() => { 53 if (!menuOpen) return; 54 const onKey = (e) => { 55 if (e.key === "Escape") setMenuOpen(false); 56 }; 57 const mq = window.matchMedia("(min-width: 1041px)"); 58 const onMQ = (e) => { 59 if (e.matches) setMenuOpen(false); 60 }; 61 document.body.style.overflow = "hidden"; 62 window.addEventListener("keydown", onKey); 63 mq.addEventListener?.("change", onMQ); 64 return () => { 65 document.body.style.overflow = ""; 66 window.removeEventListener("keydown", onKey); 67 mq.removeEventListener?.("change", onMQ); 68 }; 69 }, [menuOpen]); 70 const links = [ 71 { href: "#assistant", label: "AI Assistant" }, 72 { href: "#trust", label: "Trust" }, 73 { href: "#how", label: "How it works" }, 74 { href: "#customers", label: "Customers" }, 75 { href: "#capabilities", label: "Capabilities" }, 76 { href: "#roadmap", label: "Roadmap" } 77 ]; 78 return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("nav", { style: { 79 position: "fixed", 80 top: 0, 81 left: 0, 82 right: 0, 83 zIndex: 50, 84 transition: "all 240ms var(--p-easing)", 85 background: scrolled || menuOpen ? "color-mix(in oklab, var(--p-bg) 88%, transparent)" : "transparent", 86 backdropFilter: scrolled || menuOpen ? "blur(14px) saturate(140%)" : "none", 87 WebkitBackdropFilter: scrolled || menuOpen ? "blur(14px) saturate(140%)" : "none", 88 borderBottom: scrolled || menuOpen ? "1px solid var(--p-line)" : "1px solid transparent" 89 } }, /* @__PURE__ */ React.createElement("div", { className: "page-w", style: { 90 display: "flex", 91 alignItems: "center", 92 justifyContent: "space-between", 93 height: 68, 94 gap: 16 95 } }, /* @__PURE__ */ React.createElement("a", { href: "https://www.personio.com", target: "_blank", rel: "noopener", className: `nav-brand${scrolled ? " nav-brand--compact" : ""}`, "aria-label": "Personio home" }, /* @__PURE__ */ React.createElement("span", { className: "nav-brand__glyph-svg", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement(PersonioMark, { size: 28 })), /* @__PURE__ */ React.createElement( 96 "img", 97 { 98 className: "nav-brand__wordmark", 99 src: "assets/personio-wordmark-white.svg", 100 alt: "Personio" 101 }
102 )), /* @__PURE__ */ React.createElement("div", { className: "nav-links" }, links.map((l) => /* @__PURE__ */ React.createElement("a", { key: l.href, href: l.href, className: "nav-link" }, l.label))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0 } }, /* @__PURE__ */ React.createElement("a", { href: "https://www.personio.com/webdemo/", target: "_blank", rel: "noopener", className: "btn btn-primary btn-sm nav-cta" }, "Book a demo"), /* @__PURE__ */ React.createElement( 103 "button", 104 { 105 type: "button", 106 className: "nav-burger", 107 "aria-label": menuOpen ? "Close menu" : "Open menu", 108 "aria-expanded": menuOpen, 109 "aria-controls": "nav-mobile-panel", 110 onClick: () => setMenuOpen((o) => !o) 111 }, 112 /* @__PURE__ */ React.createElement("span", { className: `nav-burger__icon${menuOpen ? " nav-burger__icon--open" : ""}`, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("span", null), /* @__PURE__ */ React.createElement("span", null), /* @__PURE__ */ React.createElement("span", null)) 113 )))), /* @__PURE__ */ React.createElement( 114 "div", 115 { 116 id: "nav-mobile-panel", 117 className: `nav-mobile${menuOpen ? " nav-mobile--open" : ""}`, 118 "aria-hidden": !menuOpen 119 }, 120 /* @__PURE__ */ React.createElement("div", { className: "nav-mobile__inner" }, links.map((l) => /* @__PURE__ */ React.createElement( 121 "a", 122 { 123 key: l.href, 124 href: l.href, 125 className: "nav-mobile__link", 126 onClick: () => setMenuOpen(false) 127 }, 128 l.label
129 )), /* @__PURE__ */ React.createElement( 130 "a", 131 { 132 href: "https://www.personio.com/webdemo/", 133 target: "_blank", 134 rel: "noopener", 135 className: "btn btn-primary nav-mobile__cta", 136 onClick: () => setMenuOpen(false) 137 }, 138 "Book a demo" 139 )) 140 ), /* @__PURE__ */ React.createElement("style", null, ` 141 /* Brand mark \u2014 wordmark + .ai suffix expanded; glyph-only when scrolled. */ 142 .nav-brand { 143 display: inline-flex; 144 align-items: center; 145 gap: 8px; 146 color: var(--p-text); 147 text-decoration: none; 148 flex-shrink: 0; 149 height: 40px; 150 line-height: 1; 151 } 152 .nav-brand:hover { text-decoration: none; color: var(--p-text); } 153 .nav-brand__glyph-svg { 154 display: inline-flex; 155 width: 0; 156 opacity: 0; 157 overflow: hidden; 158 transition: width 240ms var(--p-easing), opacity 200ms var(--p-easing), margin-right 240ms var(--p-easing); 159 margin-right: 0; 160 } 161 .nav-brand__glyph-svg svg { display: block; flex-shrink: 0; } 162 .nav-brand__wordmark { 163 display: block; 164 height: 22px; 165 width: auto; 166 max-width: 220px; 167 opacity: 1; 168 transition: max-width 280ms var(--p-easing), opacity 220ms var(--p-easing), margin-right 240ms var(--p-easing); 169 } 170 .nav-brand__suffix { 171 font-family: var(--font-family-heading); 172 font-weight: 600; 173 font-size: 18px; 174 letter-spacing: -0.01em; 175 color: var(--p-accent-strong); 176 opacity: 1; 177 max-width: 28px; 178 overflow: hidden; 179 transition: max-width 240ms var(--p-easing), opacity 200ms var(--p-easing); 180 white-space: nowrap; 181 } 182 /* Compact (scrolled) state \u2014 collapse wordmark + .ai, show glyph only */ 183 .nav-brand--compact .nav-brand__glyph-svg { 184 width: 28px; 185 opacity: 1; 186 margin-right: 0; 187 } 188 .nav-brand--compact .nav-brand__wordmark { 189 max-width: 0; 190 opacity: 0; 191 margin-right: 0; 192 } 193 .nav-brand--compact .nav-brand__suffix { 194 max-width: 0; 195 opacity: 0; 196 } 197 /* Light mode: white logo needs to flip dark */ 198 html.light .nav-brand__wordmark { filter: invert(1) hue-rotate(180deg); } 199 .nav-link { 200 color: var(--p-text-2); 201 font-size: 14px; 202 white-space: nowrap; 203 padding: 8px 14px; 204 border-radius: 8px; 205 text-decoration: none; 206 transition: all 180ms var(--p-easing); 207 } 208 .nav-link:hover { color: var(--p-text); background: rgba(255,255,255,0.04); text-decoration: none; } 209 html.light .nav-link:hover { background: rgba(20,20,43,0.04); } 210 .nav-links { flex-shrink: 0; display: flex; align-items: center; gap: 8px; } 211 212 /* Hamburger button \u2014 hidden on desktop */ 213 .nav-burger { 214 display: none; 215 width: 40px; height: 40px; 216 align-items: center; justify-content: center; 217 background: transparent; 218 border: 1px solid var(--p-line); 219 border-radius: 10px; 220 cursor: pointer; 221 padding: 0; 222 color: var(--p-text); 223 transition: background 180ms var(--p-easing), border-color 180ms var(--p-easing); 224 } 225 .nav-burger:hover { background: rgba(255,255,255,0.05); } 226 html.light .nav-burger:hover { background: rgba(20,20,43,0.04); } 227 .nav-burger__icon { 228 position: relative; 229 width: 18px; height: 12px; 230 display: block; 231 } 232 .nav-burger__icon span { 233 position: absolute; left: 0; right: 0; 234 height: 1.5px; background: currentColor; border-radius: 2px; 235 transition: transform 220ms var(--p-easing), opacity 180ms var(--p-easing), top 220ms var(--p-easing); 236 } 237 .nav-burger__icon span:nth-child(1) { top: 0; } 238 .nav-burger__icon span:nth-child(2) { top: 5px; } 239 .nav-burger__icon span:nth-child(3) { top: 10px; } 240 .nav-burger__icon--open span:nth-child(1) { top: 5px; transform: rotate(45deg); } 241 .nav-burger__icon--open span:nth-child(2) { opacity: 0; } 242 .nav-burger__icon--open span:nth-child(3) { top: 5px; transform: rotate(-45deg); } 243 244 /* Mobile menu panel */ 245 .nav-mobile { 246 position: fixed; 247 top: 68px; left: 0; right: 0; 248 bottom: 0; 249 background: color-mix(in oklab, var(--p-bg) 96%, transparent); 250 backdrop-filter: blur(20px) saturate(140%); 251 -webkit-backdrop-filter: blur(20px) saturate(140%); 252 border-top: 1px solid var(--p-line); 253 opacity: 0; 254 pointer-events: none; 255 transform: translateY(-8px); 256 transition: opacity 220ms var(--p-easing), transform 240ms var(--p-easing); 257 z-index: 49; 258 overflow-y: auto; 259 display: none; 260 } 261 .nav-mobile--open { 262 opacity: 1; 263 pointer-events: auto; 264 transform: translateY(0); 265 } 266 @media (max-width: 1040px) { 267 .nav-mobile { display: block; } 268 } 269 .nav-mobile__inner { 270 display: flex; 271 flex-direction: column; 272 gap: 4px; 273 padding: 24px 32px 40px; 274 max-width: 720px; 275 margin: 0 auto; 276 } 277 .nav-mobile__link { 278 display: block; 279 font-family: var(--font-family-heading); 280 font-weight: 500; 281 font-size: 22px; 282 letter-spacing: -0.01em; 283 color: var(--p-text); 284 text-decoration: none; 285 padding: 16px 4px; 286 border-bottom: 1px solid var(--p-line); 287 } 288 .nav-mobile__link:hover { color: var(--p-accent-strong); text-decoration: none; } 289 .nav-mobile__cta { 290 margin-top: 24px; 291 justify-content: center; 292 font-size: 15px; 293 } 294 295 @media (max-width: 1040px) { 296 .nav-links { display: none; } 297 .nav-burger { display: inline-flex; } 298 } 299 @media (max-width: 520px) { 300 .nav-cta { display: none; } 301 } 302 `)); 303} 304function Footer() { 305 const cols = [ 306 { 307 h: "Platform", 308 l: [ 309 { t: "The Intelligent HR Platform", u: "https://www.personio.com/platform/" }, 310 { t: "HR management", u: "https://www.personio.com/hr-management/" }, 311 { t: "Recruiting", u: "https://www.personio.com/recruiting/" }, 312 { t: "Payroll", u: "https://www.personio.com/payroll/" }, 313 { t: "Marketplace", u: "https://www.marketplace.personio.com/" } 314 ] 315 }, 316 { 317 h: "Company", 318 l: [ 319 { t: "About", u: "https://www.personio.com/about-personio/" }, 320 { t: "Careers", u: "https://www.personio.com/about-personio/careers/" }, 321 { t: "Personio Foundation", u: "https://www.personio.com/about-personio/personio-foundation/" }, 322 { t: "Press", u: "https://www.personio.com/about-personio/press/" } 323 ] 324 }, 325 { 326 h: "Getting started", 327 l: [ 328 { t: "FAQ", u: "https://www.personio.com/faq/" }, 329 { t: "Security and Trust", u: "https://www.personio.com/security/" }, 330 { t: "Implementation", u: "https://www.personio.com/professional-services/" }, 331 { t: "Partner Program", u: "https://www.personio.com/partner-program/" } 332 ] 333 }, 334 { 335 h: "Support", 336 l: [ 337 { t: "Voyager Community", u: "https://community.personio.com/" }, 338 { t: "Product Updates", u: "https://www.personio.com/product-updates/" }, 339 { t: "Developer Hub", u: "https://developer.personio.de/" }, 340 { t: "Help Center", u: "https://support.personio.com/" } 341 ] 342 } 343 ]; 344 return /* @__PURE__ */ React.createElement("footer", { style: { borderTop: "1px solid var(--p-line)", padding: "64px 0 48px", position: "relative", zIndex: 1 } }
344, /* @__PURE__ */ React.createElement("div", { className: "page-w" }, /* @__PURE__ */ React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr 1fr", gap: 40, marginBottom: 56 }, className: "footer-grid" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: 16 } }, /* @__PURE__ */ React.createElement("a", { href: "https://www.personio.com", target: "_blank", rel: "noopener", "aria-label": "Personio home", style: { display: "inline-flex" } }, /* @__PURE__ */ React.createElement( 345 "img", 346 { 347 src: "assets/personio-wordmark-white.svg", 348 alt: "Personio", 349 style: { height: 28, width: "auto", display: "block" } 350 } 351 ))), /* @__PURE__ */ React.createElement("p", { className: "muted", style: { fontSize: 14, maxWidth: 360, lineHeight: 1.55 } }, "Europe\u2019s AI HR platform. Built in Munich, trained on European work, trusted by 16,000+ companies.")), cols.map((col) => /* @__PURE__ */ React.createElement("div", { key: col.h }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: 13, fontWeight: 600, marginBottom: 16, color: "var(--p-text)" } }, col.h), col.l.map((x) => /* @__PURE__ */ React.createElement("a", { key: x.t, href: x.u, target: "_blank", rel: "noopener", className: "footer-link" }, x.t))))), /* @__PURE__ */ React.createElement("hr", { className: "hr-faint" }), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, paddingTop: 24, fontSize: 13, color: "var(--p-text-3)" } }, /* @__PURE__ */ React.createElement("div", null, "\xA9 2026 Personio SE & Co. KG \xB7 Munich, Germany"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: 24 } }, /* @__PURE__ */ React.createElement("a", { href: "https://www.personio.com/privacy-policy/", target: "_blank", rel: "noopener", className: "footer-legal" }, "Privacy Policy"), /* @__PURE__ */ React.createElement("a", { href: "https://www.personio.com/terms-and-conditions/", target: "_blank", rel: "noopener", className: "footer-legal" }, "Terms"), /* @__PURE__ */ React.createElement("a", { href: "https://www.personio.com/legal-notice/", target: "_blank", rel: "noopener", className: "footer-legal" }, "Legal Notice"), /* @__PURE__ */ React.createElement("a", { href: "https://www.personio.com/site-map/", target: "_blank", rel: "noopener", className: "footer-legal" }, "Site Map")))), /* @__PURE__ */ React.createElement("style", null, ` 352 .footer-link { 353 display: block; 354 font-size: 14px; 355 color: var(--p-text-2); 356 margin-bottom: 10px; 357 text-decoration: none; 358 width: fit-content; 359 } 360 .footer-link:hover { text-decoration: underline; text-underline-offset: 3px; } 361 .footer-legal { 362 color: var(--p-text-3); 363 text-decoration: none; 364 } 365 .footer-legal:hover { text-decoration: underline; text-underline-offset: 3px; } 366 @media (max-width: 1040px) { 367 .footer-grid { grid-template-columns: 1fr 1fr 1fr !important; } 368 } 369 @media (max-width: 720px) { 370 .footer-grid { grid-template-columns: 1fr 1fr !important; } 371 } 372 @media (max-width: 480px) { 373 .footer-grid { grid-template-columns: 1fr !important; } 374 } 375 `)); 376} 377Object.assign(window, { PersonioMark, Icon, Nav, Footer, useReveal });
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.