1import{j as e}from"./ui-vendor-CwGWn-2w.js";import{u as F,r as d,L as k,N as A}from"./react-vendor-C2P8E6YD.js";import{a4 as D,a0 as h,P as c,T as s,B as P,a1 as $,p as z,U as H,$ as M,s as B}from"./index-B8FmsM8J.js";import{u as R}from"./query-Dkb2VrSI.js";import{u as O}from"./hubspotForm-BUkCd-Ap.js";import{u as W}from"./i18n-NahhDyWV.js";import{L as q}from"./loader-circle-BDrosu8O.js";import{C as I}from"./clock-C0nCH5T5.js";import{C as U}from"./calendar-COGB3ysL.js";import"./supabase-B81KnaZ3.js";const o="webinarDetail",ne=()=>{const{i18n:_}=W(),{lang:u,"*":y}=F(),i=D(y);d.useState(""),d.useState(!1),d.useState(!1);const n=_.language||u||"nl",f=M(n),{data:r,isLoading:w}=R({queryKey:["hr-resource",i],queryFn:async()=>{if(!i)return null;const{data:t,error:a}=await B.from("hr_resources").select("*").eq("slug",i).single();if(a)throw a;return{...t,speakers:t.speakers||[],learnings_nl:t.learnings_nl||[],learnings_en:t.learnings_en||[],learnings_de:t.learnings_de||[],content_nl:t.content_nl||[],content_en:t.content_en||[],content_de:t.content_de||[]}},enabled:!!i}),m=()=>r?n==="en"&&r.title_en?r.title_en:n==="de"&&r.title_de?r.title_de:r.title_nl:"",v=()=>{var t,a;return r?n==="en"&&((t=r.learnings_en)!=null&&t.length)?r.learnings_en:n==="de"&&((a=r.learnings_de)!=null&&a.length)?r.learnings_de:r.learnings_nl||[]:[]},N=()=>{var t,a;return r?n==="en"&&((t=r.content_en)!=null&&t.length)?r.content_en:n==="de"&&((a=r.content_de)!=null&&a.length)?r.content_de:r.content_nl||[]:[]},E={"transparant-belonen-styr":{text:"Aan de slag met transparant belonen? ð",link:h(`/${n}/features/functiehuis`),linkText:"Creëer in 2 klikken objectieve functieprofielen in ons gratis functiehuis"},"integratie-learned-rakoo":{text:"Aan de slag met leren en performance in jouw organisatie? ð",link:`/${n}/`,linkText:"Automatiseer jouw evaluatieproces met onze Performance Management-software"},"ai-in-performance-management":{text:"Benieuwd naar de prompt-voorbeelden voor ChatGPT? ð",link:h(`/${n}/template/voorbeelden-ai-hrm`),linkText:"Download dit template met de slimste AI-prompts voor HR"},"skill-gap":{text:"Op zoek naar praktische tips om de skill gap aan te pakken? ð",link:h(`/${n}/blog/skill-gap-analyse`),linkText:"Lees ook: Zo voer je een skill gap analyse uit"}},T=()=>{const t=E[i||""];return t?`${t.text} <a href="${t.link}" style="color:#9055EE;font-weight:600" class="hover:underline">${t.linkText}</a>`:""},x=r?n==="en"&&r.hubspot_form_id_en||n==="de"&&r.hubspot_form_id_de||r.hubspot_form_id_nl:null,g=d.useRef(null);if(O(g,x||void 0,` 2 .learned-hs-form form { display: flex; flex-direction: column; gap: 1rem; } 3 .learned-hs-form .hs-form-field { margin-bottom: 0; } 4 .learned-hs-form .hs-form-field > label { 5 display: block; font-size: 0.875rem; font-weight: 500; 6 margin-bottom: 0.5rem; color: hsl(var(--foreground)); 7 } 8 .learned-hs-form .hs-form-field > label .hs-form-required { color: #9055EE; margin-left: 2px; } 9 .learned-hs-form input[type="text"], 10 .learned-hs-form input[type="email"], 11 .learned-hs-form input[type="tel"], 12 .learned-hs-form input[type="number"], 13 .learned-hs-form select, 14 .learned-hs-form textarea, 15 .learned-hs-form .hs-input:not([type="checkbox"]):not([type="radio"]) { 16 width: 100% !important; background: #ffffff !important; 17 border: 1px solid #E5E7EB !important; 18 border-radius: 9999px !important; 19 padding: 0.75rem 1.25rem !important; 20 height: 2.875rem !important; font-size: 0.9375rem !important; 21 color: hsl(var(--foreground)) !important; 22 outline: none !important; 23 box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important; 24 transition: border-color 0.2s ease, box-shadow 0.2s ease; 25 box-sizing: border-box !important; 26 } 27 .learned-hs-form input[type="checkbox"], 28 .learned-hs-form input[type="radio"] { 29 width: 1rem !important; height: 1rem !important; 30 min-width: 1rem !important; 31 margin: 0.2rem 0.5rem 0 0 !important; 32 padding: 0 !important; 33 flex-shrink: 0 !important; 34 accent-color: #9055EE !important; 35 border-radius: 0.25rem !important; 36 } 37 .learned-hs-form .hs-fieldtype-intl-phone.hs-input { 38 display: flex !important; align-items: center !important; padding: 0 !important; 39 overflow: hidden !important; 40 } 41 .learned-hs-form .hs-fieldtype-intl-phone.hs-input select { border: none !important; box-shadow: none !important; height: 2.75rem !important; border-radius: 0 !important; background: transparent !important; padding-left: 1rem !important; width: auto !important; } 42 .learned-hs-form .hs-fieldtype-intl-phone.hs-input input { border: none !important; box-shadow: none !important; height: 2.75rem !important; border-radius: 0 !important; } 43 .learned-hs-form textarea { 44 height: auto !important; min-height: 6rem; border-radius: 1rem !important; 45 } 46 .learned-hs-form input:focus, 47 .learned-hs-form select:focus, 48 .learned-hs-form textarea:focus { 49 border-color: #9055EE !important; 50 box-shadow: 0 0 0 3px rgba(144, 85, 238, 0.15) !important; 51 } 52 .learned-hs-form .hs-error-msgs { list-style: none; padding: 0; margin: 0.25rem 0 0; } 53 .learned-hs-form .hs-error-msg, .learned-hs-form .hs-main-font-element { color: hsl(var(--destructive)); font-size: 0.8125rem; } 54 .learned-hs-form .hs-submit { margin-top: 1rem; } 55 .learned-hs-form .hs-button, 56 .learned-hs-form input[type="submit"] { 57 background: #9055EE !important; color: #ffffff !important; 58 border: none !important; border-radius: 9999px !important; 59 padding: 0.75rem 2rem !important; font-size: 0.875rem !important; 60 font-weight: 600 !important; cursor: pointer !important; 61 transition: background-color 0.2s ease; width: auto !important; 62 } 63 .learned-hs-form .hs-button:hover, 64 .learned-hs-form input[type="submit"]:hover { background: #753DCE !important; } 65 .learned-hs-form .hs-form-booleancheckbox label, 66 .learned-hs-form .hs-form-checkbox label { 67 display: flex; align-items: flex-start; gap: 0.5rem; 68 font-size: 0.8125rem; color: hsl(var(--muted-foreground)); 69 } 70 .learned-hs-form fieldset { max-width: 100% !important; } 71 .learned-hs-form .form-columns-2 .hs-form-field { width: 100% !important; padding: 0 !important; } 72 .learned-hs-form .form-columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } 73 @media (max-width: 640px) { 74 .learned-hs-form .form-columns-2 { grid-template-columns: 1fr; } 75 } 76 .learned-hs-form .submitted-message { color: hsl(var(--foreground)); font-weight: 500; } 77 `),w)return e.jsx("section",{className:"pt-[140px] pb-20 px-6",children:e.jsx(c,{children:e.jsx("div",{className:"flex items-center justify-center py-20",children:e.jsx(q,{className:"w-8 h-8 animate-spin text-muted-foreground"})})})});if(!r)return e.jsx("section",{className:"pt-[140px] pb-20 px-6",children:e.jsx(c,{children:e.jsxs("div",{className:"text-center",children:[e.jsx("h1",{className:"mb-4",children:e.jsx(s,{page:o,k:"notFound",d:"Webinar niet gevonden"})}),e.jsx(k,{to:f,children:e.jsx(P,{children:e.jsx(s,{page:o,k:"backToHub",d:"Terug naar Knowledge Hub"})})})]})})});if(n!=="nl")return e.jsx(A,{to:`/${u}/`,replace:!0});const l=Array.isArray(r.speakers)?r.speakers:[];v();const b=N(),j=i==="skill-gap"||i==="ai-in-performance-management",p=m(),S=p?`Webinar: ${p} | Learned`:"Webinar | Learned",L=r.description_nl||p;return e.jsxs("article",{children:[e.jsx($,{title:S,description:(L||"").slice(0,160)}),e.jsx("section",{className:"pt-[140px] pb-16 px-6 relative",style:{background:"radial-gradient(circle at center, white 0%, #F3EDFD 70%)"},children:e.jsxs(c,{children:[e.jsx("div",{className:"mb-8",children:e.jsxs(k,{to:f,className:"inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors",children:[e.jsx(z,{className:"w-4 h-4 flex-shrink-0"}),e.jsx("span",{children:e.jsx(s,{page:o,k:"backLink",d:"Terug naar kennisbank"})})]})}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center",children:[e.jsxs("div",{className:"animate-fade-in",children:[e.jsx("span",{className:"inline-block px-4 py-1.5 rounded-full text-sm font-medium mb-6",style:{backgroundColor:"#F3EDFD",color:"#9055EE"},children:j?"Masterclass":e.jsx(s,{page:o,k:"badge",d:"Webinar"})}),e.jsx("h1",{className:"mb-6",style:{color:"#2A2334"},children:m()}),e.jsxs("div",{className:"flex flex-wrap items-center gap-6 text-muted-foreground",children:[r.duration&&e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(I,{className:"w-4 h-4 flex-shrink-0"}),e.jsx("span",{children:r.duration})]}),r.date&&e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(U,{className:"w-4 h-4 flex-shrink-0"}),e.jsx("span",{children:r.date})]}),l.length>0&&e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(H,{className:"w-4 h-4 flex-shrink-0"}),e.jsxs("span",{children:[l.length," ",l.length===1?e.jsx(s,{page:o,k:"speaker",d:"spreker"}):e.jsx(s,{page:o,k:"speakers",d:"sprekers"})]})]})]})]}),r.image_url&&e.jsx("div",{className:"animate-fade-in",style:{animationDelay:"200ms"},children:e.jsx("div",{className:"rounded-2xl overflow-hidden",style:{border:"10px solid rgba(255, 255, 255, 0.7)"},children:e.jsx("img",{src:r.image_url,alt:m(),className:"w-full h-auto",loading:"lazy"})})})]})]})}),e.jsx("section",{className:"py-16 px-6",children:e.jsx(c,{children:e.jsx("div",{className:"flex gap-12 relative",children:e.jsxs("div",{className:"flex-1 min-w-0",children:[b.length>0&&e.jsx("div",{id:"description",className:"mb-12",children:e.jsx("div",{className:"prose max-w-none [&_strong]:font-normal [&_h2]:mt-10 [&_h2]:mb-5 [&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-4 [&_li]:mb-1 [&_li]:text-muted-foreground [&_p]:text-muted-foreground [&_p]:whitespace-pre-line [&_p:empty]:block [&_p:empty]:h-6 [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 hover:[&_a]:opacity-80",style:{color:"#2A2334"},children:b.map((t,a)=>e.jsx("div",{dangerouslySetInnerHTML:{__html:t}},a))})}),l.length>0&&e.jsxs("div",{className:"mb-12 max-w-2xl mx-auto",children:[e.jsx("h2",{className:"text-2xl font-semibold mb-6 text-center",style:{color:"#2A2334"},children:l.length===1?e.jsx(s,{page:o,k:"speakerTitle",d:"Spreker"}):e.jsx(s,{page:o,k:"speakersTitle",d:"Sprekers"})}),e.jsx("div",{className:"flex flex-wrap justify-center gap-8",children:l.map((t,a)=>e.jsxs("div",{className:"flex flex-col items-center text-center max-w-[200px]",children:[t.image?e.jsx("img",{src:t.image,alt:t.name,className:"w-24 h-24 rounded-full object-cover mb-3",style:{border:"4px solid rgba(255, 255, 255, 0.7)"},loading:"lazy"}):e.jsx("div",{className:"w-24 h-24 rounded-full flex items-center justify-center mb-3 text-2xl font-semibold",style:{backgroundColor:"#F3EDFD",color:"#9055EE",border:"4px solid rgba(255, 255, 255, 0.7)"},children:t.name.split(" ").map(C=>C[0]).join("").slice(0,2)}),e.jsx("div",{className:"font-semibold text-sm",style:{color:"#2A2334"},children:t.name}),e.jsxs("div",{className:"text-xs text-muted-foreground",children:[t.role,t.company?` @ ${t.company}`:""]})]},a))})]}),(r.youtube_id||r.video_embed_url)&&e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"text-base text-muted-foreground mb-6",children:j?"Bekijk de masterclass hier ð":"Bekijk de webinar hier ð"}),e.jsx("div",{id:"video",className:"relative rounded-2xl overflow-hidden shadow-2xl mb-12",style:{border:"10px solid rgba(255, 255, 255, 0.7)",aspectRatio:"16/9"},children:e.jsx("iframe",{src:r.youtube_id?`https://www.youtube.com/embed/${r.youtube_id}`:r.video_embed_url,title:m(),allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,className:"absolute inset-0 w-full h-full"})})]}),e.jsx("div",{className:"text-center mt-12 mb-8",children:e.jsx("p",{className:"text-lead text-muted-foreground",dangerouslySetInnerHTML:{__html:T()}})}),x&&e.jsxs("div",{className:"mt-12 max-w-3xl mx-auto",children:[e.jsx("h2",{className:"mb-6 text-center",children:e.jsx(s,{page:o,k:"formTitle",d:"Schrijf je hier in"})}),e.jsx("div",{className:"bg-white rounded-3xl p-8 shadow-sm border border-border/50",children:e.jsx("div",{ref:g,className:"learned-hs-form"})})]})]})})})})]})};export{ne as default}; 78//# sourceMappingURL=WebinarDetail-5IrKqida.js.map
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.