https://arclet.io/_next/static/chunks/app/page-97c2af5031833eab.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8974],{1959:(e,t,r)=>{Promise.resolve().then(r.bind(r,961)),Promise.resolve().then(r.bind(r,7613)),Promise.resolve().then(r.bind(r,9663)),Promise.resolve().then(r.bind(r,2988)),Promise.resolve().then(r.bind(r,5903)),Promise.resolve().then(r.bind(r,1615)),Promise.resolve().then(r.bind(r,5234)),Promise.resolve().then(r.t.bind(r,8809,23)),Promise.resolve().then(r.t.bind(r,614,23))},9663:(e,t,r)=>{"use strict";r.d(t,{DemoCardCarousel:()=>f});var s=r(28),o=r(80),n=r(8809),i=r.n(n),l=r(4089);function a(){return(0,s.jsxs)("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none","aria-hidden":"true",children:[(0,s.jsx)("path",{d:"M5.5 2.333A4.667 4.667 0 1 0 11.667 7",stroke:"currentColor",strokeWidth:"1.4",strokeLinecap:"round"}),(0,s.jsx)("path",{d:"M7 1v3.5l2.333 1.167",stroke:"currentColor",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})]})}function d(e){var t;let{demo:r}=e,o=null!==(t=r.brandName)&&void 0!==t?t:r.title.split(/[-\s]/)[0],n=o.charAt(0).toUpperCase();return(0,s.jsxs)(i(),{href:"/demos/".concat(r.slug),className:(0,l.cx)("group flex min-h-full flex-col overflow-hidden rounded-xl border border-border-subtle bg-white","no-underline transition-[transform,box-shadow] duration-150 ease-in-out","hover:-translate-y-0.5 hover:shadow-demoly-md","focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-3 focus-visible:outline-accent-muted"),"data-arclet-id":"demo-card",children:[(0,s.jsxs)("div",{className:"flex flex-col gap-3 p-5",children:[(0,s.jsxs)("div",{className:"flex items-center justify-between gap-2",children:[(0,s.jsxs)("div",{className:"flex items-center gap-2",children:[(0,s.jsx)("span",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-sm font-bold text-white",style:{backgroundColor:r.color},"aria-hidden":"true",children:n}),(0,s.jsx)("span",{className:"text-sm font-semibold text-text",children:o})]}),(0,s.jsx)("span",{className:"inline-flex flex-shrink-0 items-center rounded-full bg-surface px-3 py-1 text-xs font-medium text-text-muted",children:r.category})]}),(0,s.jsx)("h3",{className:"m-0 text-[17px] font-bold leading-[1.3] text-text",children:r.title}),(0,s.jsxs)("div",{className:"flex items-center justify-between gap-2",children:[r.stat?(0,s.jsxs)("span",{className:"flex items-center gap-1.5 text-sm text-text-muted",children:[(0,s.jsx)(a,{}),r.stat]}):(0,s.jsx)("span",{}),(0,s.jsx)("span",{className:"text-sm font-semibold text-accent transition-colors group-hover:text-accent-hover",children:"Watch demo →"})]})]}),(0,s.jsx)("div",{className:"mx-3 mb-3 overflow-hidden rounded-lg border border-border-subtle",children:(0,s.jsx)("img",{className:"aspect-[16/10] w-full object-cover",src:r.thumbnail,alt:"","aria-hidden":"true"})})]})}var c=r(9318),u=r(7389);function x(){return(0,s.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",width:"22",height:"22","aria-hidden":"true",children:(0,s.jsx)("path",{d:"M15.5 4.5L8 12l7.5 7.5"})})}function h(){return(0,s.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",width:"22",height:"22","aria-hidden":"true",children:(0,s.jsx)("path",{d:"M8.5 4.5L16 12l-7.5 7.5"})})}let m="var(--carousel-pad, 32px)",p="max(".concat(m,", calc((100vw - var(--content-width, 1200px)) / 2 + ").concat(m,"))");function f(e){let{demos:t,eyebrow:r,title:n,description:i}=e,l=(0,o.useRef)(null),a=(0,o.useRef)(null),m=(0,o.useRef)(null),[f,b]=(0,o.useState)(!0),[v,g]=(0,o.useState)(t.length<=1),j=window.matchMedia("(prefers-reduced-motion: reduce)").matches;(0,o.useEffect)(()=>{let e=l.current,t=a.current,r=m.current;if(!e||!t||!r)return;let s=new IntersectionObserver(e=>{for(let s of e)s.target===t&&b(s.isIntersecting),s.target===r&&g(s.isIntersecting)},{root:e,threshold:.9});return s.observe(t),s.observe(r),()=>s.disconnect()},[]);let w=(0,o.useCallback)(e=>{let t=l.current;if(!t)return;let r=t.firstElementChild,s=r?r.offsetWidth+20:380;t.scrollBy({left:e*s,behavior:j?"instant":"smooth"})},[j]);if(0===t.length)return(0,s.jsx)("section",{className:"pb-[var(--section-gap)] pt-[var(--section-gap)] max-[600px]:py-[var(--section-gap-mobile)]","data-arclet-id":"demo-card-carousel",children:(0,s.jsxs)("div",{className:u.DQ,children:[n&&(0,s.jsx)(c.X,{eyebrow:r,t

1itle:n,description:i}),(0,s.jsx)("p",{className:"m-0 rounded-md border border-dashed border-border-subtle bg-white p-8 text-center text-text-muted",children:"Demo examples are being prepared."})]})});let N="inline-flex h-11 w-11 items-center justify-center rounded-full border border-border-subtle bg-white text-text transition-[background-color,border-color,color] duration-150 focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-3 focus-visible:outline-accent-muted";return(0,s.jsxs)("section",{className:"pb-[var(--section-gap)] pt-[var(--section-gap)] max-[600px]:py-[var(--section-gap-mobile)]",role:"region","aria-roledescription":"carousel","aria-label":null!=n?n:"Featured demos","data-arclet-id":"demo-card-carousel",children:[n&&(0,s.jsx)("div",{className:u.DQ,children:(0,s.jsx)(c.X,{eyebrow:r,title:n,description:i})}),(0,s.jsxs)("div",{className:"[--carousel-pad:32px] max-[600px]:[--carousel-pad:16px] mx-auto w-full max-w-content",children:[(0,s.jsx)("div",{ref:l,className:"flex overflow-x-auto scrollbar-none",style:{gap:"20px",width:"100vw",marginLeft:"calc(-1 * ".concat(p,")"),marginTop:"-16px",marginBottom:"-16px",paddingLeft:p,paddingRight:p,paddingTop:"16px",paddingBottom:"16px",scrollSnapType:"x mandatory",scrollPaddingLeft:p,scrollBehavior:j?"auto":"smooth"},children:t.map((e,r)=>(0,s.jsx)("div",{ref:0===r?a:r===t.length-1?m:void 0,role:"group","aria-roledescription":"slide","aria-label":"".concat(r+1," of ").concat(t.length),className:"flex-shrink-0",style:{width:"min(86vw, 360px)",scrollSnapAlign:"start"},children:(0,s.jsx)(d,{demo:e})},e.slug))}),(0,s.jsxs)("div",{className:"mt-6 flex items-center justify-end gap-2 max-[600px]:hidden",children:[(0,s.jsx)("button",{type:"button",className:"".concat(N," ").concat(f?"cursor-not-allowed text-text-muted":"hover:bg-surface"),"aria-label":"Previous demos",disabled:f,onClick:()=>w(-1),children:(0,s.jsx)(x,{})}),(0,s.jsx)("button",{type:"button",className:"".concat(N," ").concat(v?"cursor-not-allowed text-text-muted":"hover:bg-surface"),"aria-label":"Next demos",disabled:v,onClick:()=>w(1),children:(0,s.jsx)(h,{})})]})]})]})}}},e=>{var t=t=>e(e.s=t);e.O(0,[8809,614,7613,912,2988,5148,6535,7358],()=>t(1959)),_N_E=e.O()}]);