https://www.fitfi.ai/assets/BlogPage--lFrPPzH.js

1import{r as e,j as s,a4 as t,X as a,a9 as l,a5 as r,ab as i,t as n,ac as o,ad as d,ae as c}from"./vendor-react-B-4McmhP.js";import{S as x,s as m}from"./index-CrwB1XOa.js";import{g as h,t as u}from"./blogService-Cdw8XjBC.js";import"./vendor-misc-Digy4hD8.js";import"./vendor-query-Dn9Z-_WB.js";import"./vendor-supabase-CVVkX7xR.js";import"./vendor-motion-aAUxiaKM.js";function p(){return s.jsxs("div",{className:"bg-white rounded-2xl border border-[#E5E5E5] overflow-hidden animate-pulse h-full",children:[s.jsx("div",{className:"aspect-[16/10] bg-[#E5E5E5]"}),s.jsxs("div",{className:"p-6 space-y-3",children:[s.jsx("div",{className:"h-4 bg-[#E5E5E5] rounded-full w-4/5"}),s.jsx("div",{className:"h-3 bg-[#E5E5E5] rounded-full w-2/3"}),s.jsx("div",{className:"h-3 bg-[#E5E5E5] rounded-full w-full"}),s.jsx("div",{className:"h-3 bg-[#E5E5E5] rounded-full w-3/4"})]})]})}function b({post:e,style:t}){const a=e.author.name.split(" ").map(e=>e[0]).join("").slice(0,2).toUpperCase();return s.jsxs("article",{className:"bg-white border border-[#E5E5E5] rounded-2xl overflow-hidden hover:shadow-[0_12px_40px_rgba(0,0,0,0.06)] hover:border-[#A85740] transition-all duration-300 group flex flex-col h-full",style:t,children:[s.jsxs("a",{href:`/blog/${e.slug}`,className:"relative aspect-[16/10] overflow-hidden flex-shrink-0 block",tabIndex:-1,"aria-hidden":"true",children:[s.jsx("img",{src:e.image,alt:e.title,loading:"lazy",className:"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"}),s.jsx("div",{className:"absolute top-3 left-3",children:s.jsx("span",{className:"bg-white/90 backdrop-blur-sm rounded-full px-3 py-1 text-[11px] font-semibold text-[#1A1A1A]",children:e.category})})]}),s.jsxs("div",{className:"p-7 flex flex-col flex-1",children:[s.jsx("h3",{className:"text-lg font-bold text-[#1A1A1A] leading-snug mb-3 line-clamp-2 group-hover:text-[#A85740] transition-colors duration-200",children:s.jsx("a",{href:`/blog/${e.slug}`,className:"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#A85740]/40 rounded",children:e.title})}),s.jsxs("div",{className:"flex items-center gap-2.5 mb-3",children:[e.author.avatar?s.jsx("img",{src:e.author.avatar,alt:"","aria-hidden":"true",className:"w-6 h-6 rounded-full flex-shrink-0 object-cover"}):s.jsx("div",{className:"w-6 h-6 rounded-full bg-[#F4E8E3] flex items-center justify-center flex-shrink-0",children:s.jsx("span",{className:"text-[10px] font-bold text-[#A85740]",children:a})}),s.jsx("span",{className:"text-xs font-medium text-[#4A4A4A] truncate max-w-[80px]",children:e.author.name}),s.jsx("span",{className:"text-xs text-[#6E6E6E] opacity-60","aria-hidden":"true",children:"·"}),s.jsx("span",{className:"text-xs text-[#6E6E6E] flex-shrink-0",children:e.date})]}),s.jsx("p",{className:"text-sm text-[#4A4A4A] leading-[1.6] line-clamp-2 mb-4 flex-1",children:e.excerpt}),s.jsx("div",{className:"mt-auto",children:s.jsxs("span",{className:"inline-flex items-center gap-1.5 text-sm font-semibold text-[#A85740] hover:text-[#9A503B] transition-colors duration-200",children:["Lees meer ",s.jsx(n,{className:"w-3.5 h-3.5"})]})})]})]})}function f(){const[f,j]=e.useState(""),[g,A]=e.useState("all"),[N,v]=e.useState(!1),[w,E]=e.useState(""),[y,k]=e.useState(!1),[F,C]=e.useState([]),[S,B]=e.useState(!0),[_,U]=e.useState(null),z=e.useRef(null);e.useEffect(()=>{!async function(){try{const e=(await h(100,0)).map(u);C(e),U(null)}catch{U("Kon blogposts niet laden. Probeer het later opnieuw.")}finally{B(!1)}}()},[]);const L=e.useMemo(()=>["all",...Array.from(new Set(F.map(e=>e.category)))],[F]),P=e.useMemo(()=>F.filter(e=>{const s=e.title.toLowerCase().includes(f.toLowerCase())||e.excerpt.toLowerCase().includes(f.toLowerCase()),t="all"===g||e.category===g;return s&&t}),[f,g,F]),$=e.useMemo(()=>F.find(e=>e.featured)??F[0],[F]),Y=e.useMemo(()=>P.filter(e=>e.id!==$?.id),[P,$]),I=e=>{const s=z.current;s&&s.scrollBy({left:"left"===e?-300:300,behavior:"smooth"})},M="all"!==g?1:0;return s.jsxs(s.Fragment,{children:[s.jsx(x,{title:"Blog — FitFi",description:"De nieuwste stijltips, seizoenstrends en mode-inzichten van FitFi. Praktische gidsen over silhouet, kleur en outfits.",path:"/blog",ogImage:"/images/hf_20260221_210750_e12efd50-544c-4e35-986d-bfff9999542b.webp"}),s.jsxs("div",{className:"min-h-screen bg-[#FAFAF8]",children:[s.jsx("section",{className:"bg-[#F5F0EB] pt-44 pb-12 md:pt-52 md:pb-16",children:s.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:s.jsxs("div",{className:"max-w-3xl mx-auto text-center",style:{opacity:0,transform:"translateY(40px)",animation:"revealUp 0.9s ease forwards"},children:[s.jsxs("div",{className:"inline-flex items-center gap-2.5 mb-6",children:[s.jsx("span",{className:"w-6 h-px bg-[#A85740]","aria-hidden":"true"}),s.jsx("span",{className:"text-xs font-semibold tracking-[2.5px] uppercase text-[#A85740]",children:"Stijl & mode"}),s.jsx("span",{className:"w-6 h-px bg-[#A85740]","aria-hidden":"true"})]}),s.jsxs("h1",{className:"text-[32px] md:text-[56px] text-[#1A1A1A] leading-[1.05] mb-6",children:[s.jsx("span",{className:"font-serif italic",children:"Inzichten voor jouw "}),s.jsx("span",{className:"font-sans font-bold",children:"stijl"})]}),s.jsx("p",{className:"text-lg text-[#4A4A4A] leading-[1.7] max-w-[520px] mx-auto",children:"Praktische gidsen over silhouet, kleur en outfits. Premium stijl, nuchtere uitleg."})]})})}),s.jsx("section",{className:"bg-[#FAFAF8] py-16",children:s.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[s.jsxs("div",{className:"flex items-center gap-4 max-w-[880px] mx-auto",children:[s.jsxs("div",{className:"relative flex-1",children:[s.jsx(t,{className:"absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-[#6E6E6E] pointer-events-none"}),s.jsx("input",{type:"search",placeholder:"Zoek artikelen...",value:f,onChange:e=>j(e.target.value),"aria-label":"Zoek artikelen",className:"w-full pl-12 pr-4 py-3.5 bg-white border border-[#

1E5E5E5] rounded-2xl text-base text-[#1A1A1A] placeholder:text-[#6E6E6E] focus:outline-none focus:ring-2 focus:ring-[#A85740]/20 focus:border-[#A85740] transition-colors duration-200"}),f&&s.jsx("button",{onClick:()=>j(""),className:"absolute right-4 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center rounded-full text-[#6E6E6E] hover:text-[#1A1A1A] transition-colors","aria-label":"Zoekopdracht wissen",children:s.jsx(a,{className:"w-4 h-4"})})]}),s.jsxs("button",{onClick:()=>v(e=>!e),"aria-expanded":N,"aria-controls":"filter-panel",className:"flex items-center gap-2 px-5 py-3.5 bg-white border rounded-2xl text-sm font-medium text-[#4A4A4A] hover:border-[#A85740] transition-colors duration-200 flex-shrink-0 "+(N||M>0?"border-[#A85740] text-[#A85740]":"border-[#E5E5E5]"),children:[s.jsx(l,{className:"w-4 h-4"}),s.jsx("span",{className:"hidden sm:inline",children:"Filters"}),M>0&&s.jsx("span",{className:"w-5 h-5 rounded-full bg-[#A85740] text-white text-xs font-bold flex items-center justify-center",children:M}),s.jsx(r,{className:"w-4 h-4 transition-transform duration-200 "+(N?"rotate-180":""),"aria-hidden":"true"})]})]}),N&&s.jsxs("div",{id:"filter-panel",className:"max-w-[880px] mx-auto mt-3 bg-white border border-[#E5E5E5] rounded-2xl p-5",children:[s.jsxs("div",{className:"flex items-center justify-between mb-3",children:[s.jsx("p",{className:"text-xs font-bold uppercase tracking-wide text-[#6E6E6E]",children:"Categorie"}),"all"!==g&&s.jsx("button",{onClick:()=>A("all"),className:"text-xs font-semibold text-[#A85740] hover:text-[#9A503B] transition-colors",children:"Wis filter"})]}),s.jsx("div",{className:"flex flex-wrap gap-2",children:L.map(e=>s.jsx("button",{onClick:()=>A(e),"aria-pressed":g===e,className:"px-4 py-2 rounded-full text-xs font-semibold border transition-colors "+(g===e?"bg-[#A85740] text-white border-[#A85740]":"bg-white text-[#1A1A1A] border-[#E5E5E5] hover:border-[#A85740]"),children:"all"===e?"Alle artikelen":e},e))})]}),!N&&"all"!==g&&s.jsxs("div",{className:"flex items-center gap-2 max-w-[880px] mx-auto mt-3",children:[s.jsx("span",{className:"text-xs text-[#6E6E6E]",children:"Filter:"}),s.jsxs("button",{onClick:()=>A("all"),className:"inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold bg-[#F4E8E3] text-[#A85740] transition-colors",children:[g,s.jsx(a,{className:"w-3 h-3"})]})]})]})}),!S&&$&&s.jsx("section",{className:"bg-[#FAFAF8] pb-16",children:s.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:s.jsxs("div",{className:"max-w-[1040px] mx-auto mb-16",style:{opacity:0,transform:"translateY(40px)",animation:"revealUp 0.9s ease 0.12s forwards"},children:[s.jsx("p",{className:"text-xs font-semibold tracking-[1.5px] uppercase text-[#6E6E6E] mb-3",children:"Uitgelicht"}),s.jsxs("article",{className:"bg-white border border-[#E5E5E5] rounded-2xl overflow-hidden hover:shadow-[0_12px_40px_rgba(0,0,0,0.06)] transition-shadow duration-300 group",children:[s.jsxs("a",{href:`/blog/${$.slug}`,className:"block relative w-full aspect-[21/9] overflow-hidden",tabIndex:-1,"aria-hidden":"true",children:[s.jsx("img",{src:$.image,alt:$.title,loading:"eager",className:"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"}),s.jsx("div",{className:"absolute inset-0",style:{background:"linear-gradient(to top, rgba(26,26,26,0.35) 0%, transparent 55%)"}}),s.jsx("div",{className:"absolute bottom-4 left-4",children:s.jsx("span",{className:"bg-white/90 backdrop-blur-sm rounded-full px-3.5 py-1.5 text-xs font-semibold text-[#1A1A1A]",children:$.category})})]}),s.jsxs("div",{className:"p-6 sm:p-8",children:[s.jsxs("div",{className:"flex items-center gap-3 text-xs text-[#6E6E6E] mb-4",children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx("img",{src:$.author.avatar,alt:$.author.name,className:"w-6 h-6 rounded-full object-cover"}),s.jsx("span",{className:"text-[#4A4A4A] font-medium",children:$.author.name})]}),s.jsx("span",{"aria-hidden":"true",children:"·"}),s.jsxs("div",{className:"flex items-center gap-1",children:[s.jsx(i,{className:"w-3.5 h-3.5","aria-hidden":"true"}),s.jsx("span",{children:$.date})]})]}),s.jsx("h2",{className:"text-2xl md:text-[28px] font-bold text-[#1A1A1A] leading-snug mb-3 group-hover:text-[#A85740] transition-colors duration-200",children:s.jsx("a",{href:`/blog/${$.slug}`,className:"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#A85740]/40 rounded",children:$.title})}),s.jsx("p",{className:"text-base text-[#4A4A4A] leading-relaxed mb-6 line-clamp-3 max-w-2xl",children:$.excerpt}),s.jsxs("a",{href:`/blog/${$.slug}`,className:"inline-flex items-center gap-2 bg-[#A85740] hover:bg-[#9A503B] text-white font-semibold text-base py-3 px-6 rounded-xl transition-all duration-200 hover:-translate-y-0.5",children:["Lees artikel",s.jsx(n,{className:"w-4 h-4","aria-hidden":"true"})]})]})]})]})})}),s.jsx("section",{className:"bg-[#FAFAF8] pb-16 md:pb-24",children:s.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[s.jsxs("div",{className:"flex items-center justify-between mb-8",children:[s.jsxs("h2",{className:"text-xl font-bold text-[#1A1A1A]",children:[f||"all"!==g?"Resultaten":"Alle artikelen",!S&&s.jsxs("span",{className:"text-[#6E6E6E] font-normal ml-1",children:["(",Y.length,")"]})]}),!S&&Y.length>1&&s.jsxs("div",{className:"flex items-center gap-2 sm:hidden",children:[s.jsx("button",{onClick:()=>I("left"),"aria-label":"Vorige artikelen",className:"w-11 h-11 rounded-full border border-[#

1E5E5E5] bg-white flex items-center justify-center text-[#6E6E6E] hover:text-[#1A1A1A] hover:border-[#A85740] transition-colors",children:s.jsx(o,{className:"w-4 h-4"})}),s.jsx("button",{onClick:()=>I("right"),"aria-label":"Volgende artikelen",className:"w-11 h-11 rounded-full border border-[#E5E5E5] bg-white flex items-center justify-center text-[#6E6E6E] hover:text-[#1A1A1A] hover:border-[#A85740] transition-colors",children:s.jsx(d,{className:"w-4 h-4"})})]})]}),S?s.jsxs(s.Fragment,{children:[s.jsx("div",{className:"flex gap-4 overflow-x-auto pb-4 -mx-4 px-4 sm:hidden",style:{scrollbarWidth:"none"},children:[...Array(4)].map((e,t)=>s.jsx(p,{},t))}),s.jsx("div",{className:"hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-6",children:[...Array(6)].map((e,t)=>s.jsx(p,{},t))})]}):_?s.jsxs("div",{className:"text-center py-16",children:[s.jsx("p",{className:"text-[#6E6E6E] text-sm mb-4",children:_}),s.jsx("button",{onClick:()=>window.location.reload(),className:"px-6 py-3 rounded-xl text-sm font-semibold bg-[#A85740] text-white hover:bg-[#9A503B] transition-colors",children:"Probeer opnieuw"})]}):0===Y.length?s.jsxs("div",{className:"text-center py-16",children:[s.jsx("p",{className:"font-semibold text-[#1A1A1A] mb-1",children:"Geen artikelen gevonden"}),s.jsx("p",{className:"text-sm text-[#6E6E6E] mb-4",children:"Probeer een andere zoekterm of filter."}),s.jsx("button",{onClick:()=>{j(""),A("all")},className:"text-sm font-semibold text-[#A85740] hover:text-[#9A503B] transition-colors",children:"Alle artikelen tonen"})]}):s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:z,className:"flex gap-4 overflow-x-auto pb-4 -mx-4 px-4 sm:hidden snap-x snap-mandatory",style:{scrollbarWidth:"none",msOverflowStyle:"none"},role:"list","aria-label":"Artikelen carrousel",children:Y.map(e=>s.jsx("div",{className:"snap-start flex-shrink-0 w-[280px]",role:"listitem",children:s.jsx(b,{post:e})},e.id))}),s.jsx("div",{className:"hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:auto-rows-fr",role:"list",children:Y.map((e,t)=>s.jsx("div",{role:"listitem",children:s.jsx(b,{post:e,style:{opacity:0,transform:"translateY(40px)",animation:`revealUp 0.9s ease ${.06*t}s forwards`}})},e.id))})]})]})}),s.jsx("section",{className:"py-24 bg-[#FAFAF8]",children:s.jsxs("div",{className:"max-w-[640px] mx-auto text-center px-6",style:{opacity:0,transform:"translateY(40px)",animation:"revealUp 0.9s ease 0.1s forwards"},children:[s.jsx("div",{className:"w-14 h-14 rounded-2xl bg-[#F5F0EB] flex items-center justify-center mx-auto mb-6",children:s.jsx(c,{className:"w-6 h-6 text-[#A85740]"})}),s.jsx("h3",{className:"font-serif italic text-3xl text-[#1A1A1A] mb-3",children:"Blijf op de hoogte"}),s.jsx("p",{className:"text-base text-[#4A4A4A] mb-8",children:"Nieuwste stijltips en mode-inzichten direct in je inbox."}),s.jsxs("form",{onSubmit:async e=>{if(e.preventDefault(),w){try{const e=m();if(!e)throw new Error("Supabase is niet beschikbaar");await e.from("newsletter_subscribers").upsert({email:w.trim()},{onConflict:"email"})}catch{}k(!0),E(""),setTimeout(()=>k(!1),3e3)}},className:"flex gap-3 max-w-[460px] mx-auto",children:[s.jsx("label",{htmlFor:"newsletter-email",className:"sr-only",children:"E-mailadres"}),s.jsx("input",{id:"newsletter-email",type:"email",placeholder:"Je e-mailadres",value:w,onChange:e=>E(e.target.value),required:!0,autoComplete:"email",className:"flex-1 bg-white border border-[#E5E5E5] rounded-full py-3.5 px-6 text-sm text-[#1A1A1A] placeholder:text-[#6E6E6E] focus:outline-none focus:ring-2 focus:ring-[#A85740]/20 focus:border-[#A85740] transition-colors duration-200"}),s.jsx("button",{type:"submit",disabled:!w,className:"bg-[#A85740] hover:bg-[#9A503B] text-white font-semibold text-base py-3 px-6 rounded-xl transition-all duration-300 hover:-translate-y-0.5 flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed",children:y?"Aangemeld!":"Aanmelden"})]})]})})]}),s.jsx("style",{children:"\n        @keyframes revealUp {\n          to {\n            opacity: 1;\n            transform: translateY(0);\n          }\n        }\n      "})]})}export{f as default};