https://www.supernova.io/_next/static/chunks/app/customers/page-59…?dpl=dpl_3QKfwUuYaD8R3xWix9bLHfQrVwCK

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5812],{18023:(e,t,s)=>{Promise.resolve().then(s.bind(s,97342))},97342:(e,t,s)=>{"use strict";s.d(t,{default:()=>D});var a=s(95155),i=s(66766),n=s(65567),l=s(77497),r=s(78991),o=s(79164),c=s(53551),d=s(99430),m=s(6870),x=s(97928),u=s(12115),h=s(69829),p=s(53999);let g=s(49509).env.BASE_PATH||"";function f(e){return e.toLowerCase().replace(/\s+/g,"-").replace(/[^a-z0-9-]/g,"")}function v(e){let{entry:t}=e,s=t.customerLogoDark;return(0,a.jsxs)(n.default,{href:t.publicDocumentationUrl,className:"group relative flex min-h-[220px] flex-col overflow-hidden bg-[#F1F3F9]",children:[(0,a.jsxs)("div",{className:"relative flex min-h-[220px] flex-1 items-center justify-center px-6 py-8",children:[(0,a.jsxs)("div",{className:"flex flex-col items-center gap-3 transition-all duration-500 group-hover:-translate-y-8 group-hover:opacity-0",children:[(0,a.jsx)("img",{src:"".concat(g).concat(s),alt:"",className:"h-auto max-h-12 w-auto max-w-[70%] object-contain"}),(0,a.jsx)("span",{className:"text-center text-sm font-medium text-(--v-muted)",children:t.designSystemName})]}),(0,a.jsx)(i.default,{src:t.publicDocumentationPreview,alt:"".concat(t.designSystemName," documentation preview"),width:1166,height:858,className:"absolute inset-4 translate-y-6 rounded-lg object-cover object-top opacity-0 shadow-[0_18px_40px_-18px_rgba(12,22,46,0.28)] transition-all duration-500 group-hover:translate-y-0 group-hover:opacity-100"})]}),(0,a.jsx)("span",{className:"pointer-events-none absolute right-4 bottom-4 inline-flex size-8 items-center justify-center rounded-full bg-white/90 text-(--v-blue) opacity-0 shadow-sm transition-opacity duration-300 group-hover:opacity-100",children:(0,a.jsx)(l._,{icon:"IconArrowUpRight",className:"size-4"})})]})}function b(e){let{category:t}=e,s=f(t.name);return(0,a.jsxs)("section",{id:s,children:[(0,a.jsx)("div",{className:"px-6 py-5",children:(0,a.jsx)("h3",{className:"text-sm font-semibold tracking-[0.12em] text-(--v-faint) uppercase",children:t.name})}),(0,a.jsx)("ul",{className:(0,p.cn)("m:grid-cols-3 grid grid-cols-1 border-t",d.RAIL_BORDER),children:t.items.map(e=>(0,a.jsx)("li",{className:(0,p.cn)("border-r border-b",d.RAIL_BORDER,"max-m:border-r-0","m:[&:nth-child(3n)]:border-r-0"),children:(0,a.jsx)(v,{entry:e})},e.slug))})]})}function j(){let e=h.M.map(e=>({...e,items:e.items.filter(e=>!e.draft)})).filter(e=>e.items.length>0),t=(0,u.useMemo)(()=>e.map(e=>f(e.name)),[e]),[s,i]=(0,u.useState)(()=>{var e;return null!==(e=t[0])&&void 0!==e?e:null}),n=(0,u.useRef)(!1),l=(0,u.useRef)(null),[r,o]=(0,u.useState)(128);(0,u.useEffect)(()=>{let e=l.current;if(!e)return;let t=()=>{o(64+e.getBoundingClientRect().height)};t();let s=new ResizeObserver(t);return s.observe(e),()=>s.disconnect()},[]);let c=(0,u.useCallback)(()=>{if(0===t.length)return;let e=t[0];for(let s of t){let t=document.getElementById(s);t&&t.getBoundingClientRect().top<=r+1&&(e=s)}i(t=>t!==e?e:t)},[t,r]);(0,u.useEffect)(()=>{let e=()=>{n.current||(n.current=!0,requestAnimationFrame(()=>{c(),n.current=!1}))};return c(),window.addEventListener("scroll",e,{passive:!0}),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e),window.removeEventListener("resize",e)}},[c]);let d=e=>{let t=document.getElementById(e);if(!t)return;let s=window.scrollY+t.getBoundingClientRect().top-r;window.scrollTo({top:Math.max(0,s),behavior:"smooth"})};return(0,a.jsxs)("div",{children:[(0,a.jsx)("nav",{ref:l,"aria-label":"Showcase categories",className:"sticky top-16 z-20 border-b border-[#0C162E]/6 bg-[#F1F3F9]/80 backdrop-blur-md",children:(0,a.jsx)("div",{className:"sn-rail flex items-center gap-1 overflow-x-auto px-6 py-3.5",children:e.map(e=>{let t=f(e.name),i=s===t;return(0,a.jsx)("button",{type:"button","aria-current":i?"true":void 0,onClick:e=>{d(t),e.currentTarget.blur()},className:(0,p.cn)("inline-flex h-8 shrink-0 cursor-pointer items-center rounded-full px-4 text-sm leading-none font-medium whitespace-nowrap transition-colors","focus-visible:rounded-full focus-visible:ring-2 focus-visible:ring-(--v-blue)/40 focu

1s-visible:outline-none",i?"bg-(--v-blue) text-white":"text-(--v-muted) hover:bg-[#0C162E]/5 hover:text-[#0C162E]"),children:e.name},t)})})}),(0,a.jsx)("div",{children:e.map(e=>(0,a.jsx)(b,{category:e},f(e.name)))})]})}var w=s(68644),N=s(71755);s(34776);let y="[font-size:inherit] [letter-spacing:inherit] [line-height:inherit]",_=[{axis:"v",line:8,duration:10,delay:2.2},{axis:"h",line:6,duration:11,delay:3.4},{axis:"v",line:14,duration:9.5,delay:4.6,reverse:!0},{axis:"h",line:11,duration:10.5,delay:5.8,reverse:!0},{axis:"v",line:21,duration:11,delay:7},{axis:"h",line:5,duration:9,delay:8.2}],R="[mask-image:radial-gradient(ellipse_56%_72%_at_50%_100%,white_0%,rgba(255,255,255,0.7)_30%,rgba(255,255,255,0.25)_65%,transparent_100%)] [mask-repeat:no-repeat]",k={celonis:"Celonis"},B=(e=>{var t;return null!==(t=N.e.find(t=>t.company===e))&&void 0!==t?t:N.e[0]})("celonis"),E=[{name:"Userlane",href:w._[0].href,title:w._[0].title,quote:w._[0].description,image:w._[0].image,logo:"/static/images/customers/userlane/logo-burrito.svg",tile:"/static/images/customers/userlane/scene.jpg",color:"#5C2BD6"},{name:"OneSignal",href:w._[1].href,title:w._[1].title,quote:w._[1].description,image:w._[1].image,logo:"/static/images/customers/onesignal/logo-beam.svg",tile:"/static/images/customers/onesignal/scene.jpg",color:"#0B9BD7"},{name:"Mews",href:w._[2].href,title:w._[2].title,quote:w._[2].description,image:w._[2].image,logo:"/static/images/customers/mews/logo-mews-design-system.svg",tile:"/static/images/customers/mews/scene.jpg",color:"#FF4EB8"},{name:"IFC",href:w._[3].href,title:w._[3].title,quote:w._[3].description,image:w._[3].image,color:"#0B4F8A"},{name:"SoFi",href:w._[4].href,title:w._[4].title,quote:w._[4].description,image:w._[4].image,color:"#00A862"}],C=E[0];function z(){return(0,a.jsx)(d.Band,{tone:"dark",transparent:!0,className:"z-10 pt-16",children:(0,a.jsxs)("div",{className:"m:pt-16 relative flex flex-col items-center pt-12 text-center",children:[(0,a.jsxs)("div",{className:"m:pb-12 t:pb-14 relative isolate flex w-full flex-col items-center pb-8",children:[(0,a.jsx)(o.ScrollBuildGrid,{play:"enter",snapBottom:!0,cell:40,strokeDasharray:"4 2",className:(0,p.cn)("-right-6 -bottom-px -left-6 w-auto fill-white/10 stroke-white/10",R)}),(0,a.jsx)(r.GridPattern,{hideGrid:!0,lightning:_,width:40,height:40,x:-.5,snapBottom:!0,strokeDasharray:"4 2",className:(0,p.cn)("-right-6 -bottom-px -left-6 w-auto fill-white/10 stroke-white/10",R)}),(0,a.jsx)(d.Reveal,{onMount:!0,delay:.05,className:"relative z-10",children:(0,a.jsx)("span",{className:(0,p.cn)("inline-flex items-center gap-2 rounded-full border bg-[#0f0f15] px-3 py-1.5 text-xs text-white/90",d.RAIL_BORDER),children:"Customer stories"})}),(0,a.jsxs)(d.Reveal,{onMount:!0,delay:.15,className:"relative isolate z-10 w-full",children:[(0,a.jsxs)("h1",{className:"m:text-[60px] t:text-[72px] mt-5 w-full text-center text-[32px] leading-none font-light tracking-[-0.01em]",children:[(0,a.jsx)("span",{className:"sr-only",children:"Companies scaling their design systems with Supernova"}),(0,a.jsxs)("span",{"aria-hidden":!0,className:(0,p.cn)("flex flex-col items-center",y),children:[(0,a.jsx)("span",{className:(0,p.cn)(y,"leading-[1.05] font-light"),children:"Companies scaling"}),(0,a.jsx)("span",{className:(0,p.cn)("sn-vetra-hero-accent font-bold",y,"[font-size:inherit] [letter-spacing:inherit] [line-height:1.35]"),children:"their design systems."})]})]}),(0,a.jsx)("div",{"aria-hidden":!0,className:"pointer-events-none absolute bottom-0 left-1/2 -z-10 h-40 w-[60%] -translate-x-1/2 translate-y-1/3 rounded-full bg-[#1a5ee5]/28 blur-[6.5rem]"})]}),(0,a.jsx)(d.Reveal,{onMount:!0,delay:.25,className:"relative z-10",children:(0,a.jsx)("p",{className:"m:text-lg mt-4 max-w-[56ch] text-base font-medium text-[#ffffff]",children:"Discover how real customers accelerate digital product development with design systems built on Supernova."})}),(0,a.jsx)(d.Reveal,{onMount:!0,delay:.32,className:"relative z-10",children:(0,a.jsxs)("div",{className:"mt-6 flex flex-wrap items-center justify-center gap-3",children:[(0,a.jsx)(d.Btn,{href:"#case-studies",children:"Read case studies"}),(0,a.jsx)(d.Btn,{variant:"ghost",href:"#showcase",children:"Explore showcase"})]})})]}),(0,a.jsxs)(d.Reveal,{onMount:!0,delay:.4,className:"relative w-[calc(100%+3rem)] p-10",children:[(0,a.jsx)("span",{"aria-hidden":!0,

1className:(0,p.cn)("pointer-events-none absolute top-0 left-1/2 z-10 h-px w-screen -translate-x-1/2",d.RAIL)}),(0,a.jsx)("span",{"aria-hidden":!0,className:(0,p.cn)("pointer-events-none absolute inset-x-0 top-10 z-10 h-px",d.RAIL)}),(0,a.jsx)("span",{"aria-hidden":!0,className:(0,p.cn)("pointer-events-none absolute inset-x-0 bottom-10 z-10 h-px",d.RAIL)}),(0,a.jsx)("span",{"aria-hidden":!0,className:(0,p.cn)("pointer-events-none absolute top-0 bottom-10 left-10 z-10 w-px",d.RAIL)}),(0,a.jsx)("span",{"aria-hidden":!0,className:(0,p.cn)("pointer-events-none absolute top-0 right-10 bottom-10 z-10 w-px",d.RAIL)}),(0,a.jsxs)("div",{className:"relative",children:[(0,a.jsx)("div",{className:"sn-glow-pulse t:blur-[10rem] pointer-events-none absolute top-0 left-1/2 -z-10 h-[42%] w-3/4 -translate-x-1/2 translate-y-[28%] rounded-full bg-gradient-to-r from-sky-500 to-(--v-blue) blur-[6rem]"}),(0,a.jsx)(n.default,{href:C.href,className:"group relative block overflow-hidden bg-[#0b0b11] text-left",children:(0,a.jsxs)("div",{className:"t:grid-cols-[1.1fr_1fr] grid grid-cols-1 items-stretch",children:[(0,a.jsx)("div",{className:(0,p.cn)("t:border-r max-t:border-b overflow-hidden",d.RAIL_BORDER),children:(0,a.jsx)(i.default,{src:C.image,alt:"",width:1948,height:1092,priority:!0,className:"t:aspect-[16/10] aspect-video size-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"})}),(0,a.jsxs)("div",{className:"t:p-12 t:gap-5 flex flex-col justify-center gap-4 p-8",children:[(0,a.jsx)("span",{className:"text-xs font-semibold tracking-[0.16em] text-(--v-blue) uppercase",children:"Featured story"}),(0,a.jsx)("h2",{className:"m:text-[30px] t:text-[34px] text-2xl leading-[1.15] font-light tracking-[-0.02em]",children:C.title}),(0,a.jsx)("p",{className:"m:text-base line-clamp-3 text-sm text-(--v-muted)",children:C.quote}),(0,a.jsxs)("span",{className:"inline-flex items-center gap-2 text-sm font-semibold text-(--v-blue)",children:["Read ",C.name,"’s story",(0,a.jsx)(l._,{icon:"IconArrowRight",className:"size-4 transition-transform duration-300 group-hover:translate-x-1"})]})]})]})})]})]})]})})}function A(e){var t,s,r;let{story:o}=e;return(0,a.jsxs)(n.default,{href:o.href,className:"t:grid-cols-[1.05fr_1fr] group grid grid-cols-1 items-stretch bg-[#F1F3F9] transition-colors duration-300 hover:bg-[#F1F3F9]",children:[(0,a.jsx)("div",{className:(0,p.cn)("t:border-r max-t:border-b relative overflow-hidden",d.RAIL_BORDER),children:(0,a.jsxs)("div",{className:"relative aspect-[16/10] overflow-hidden",style:{backgroundColor:null!==(t=o.color)&&void 0!==t?t:"#1a5ee5"},children:[(0,a.jsx)(i.default,{src:null!==(s=o.tile)&&void 0!==s?s:o.image,alt:"",fill:!0,sizes:"(min-width: 992px) 560px, 100vw",className:"object-cover opacity-70 mix-blend-luminosity transition-transform duration-700 group-hover:scale-[1.04]"}),(0,a.jsx)("div",{className:"absolute inset-0 opacity-55 mix-blend-multiply",style:{backgroundColor:null!==(r=o.color)&&void 0!==r?r:"#1a5ee5"}}),(0,a.jsx)("div",{className:"absolute inset-0 flex items-center justify-center p-10",children:o.logo?(0,a.jsx)("img",{src:o.logo,alt:"",className:"h-12 w-auto max-w-[70%] object-contain drop-shadow-[0_2px_16px_rgba(0,0,0,0.28)]"}):(0,a.jsx)("span",{className:"text-3xl font-semibold tracking-[-0.03em] text-white",children:o.name})})]})}),(0,a.jsxs)("div",{className:"t:p-10 flex flex-col justify-center gap-4 p-8",children:[(0,a.jsx)("span",{className:"text-xs font-semibold tracking-[0.16em] text-(--v-blue) uppercase",children:o.name}),(0,a.jsx)("h3",{className:"m:text-[26px] text-[22px] leading-[1.2] font-semibold tracking-[-0.02em]",children:o.title}),(0,a.jsx)("p",{className:"line-clamp-4 text-base leading-[1.45] text-(--v-muted)",children:o.quote}),(0,a.jsxs)("span",{className:"mt-1 inline-flex items-center gap-1.5 text-sm font-semibold text-(--v-blue)",children:["Read ",o.name,"’s story",(0,a.jsx)(l._,{icon:"IconArrowRight",className:"size-4 transition-transform duration-300 group-hover:translate-x-1"})]})]})]})}function F(){return(0,a.jsxs)(d.Band,{tone:"light",id:"case-studies",className:"scroll-mt-16 border-t border-(--v-border) pt-24",children:[(0,a.jsx)(d.Reveal,{children:(0,a.jsx)(d.Heading,{align:"left",eyebrow:"Case studies",segments:[{text:"Teams already"},{text:"shipping",className:d.ACCENT},{text:"on system"}]})}),(0,a.jsx)("div",{className:(0,p.cn)("relative -mx-6 mt-12 border-t",d.RAIL_BORDER),children:E.map(e=>(0,a.jsx)("div",{className:(0,p.cn)("border-b",d.RAIL_BORDER),children:(0,a.jsx)(A,{story:e})},e.href))})]})}function I(e){var t;let{quote:s,eyebrow:i,accent:n}=e,l=s.testimonialHighlight,r=n?l.indexOf(n):-1,m=r>=0&&n?[{text:"“".concat(l.slice(0,r)).trimEnd()},{text:n,className:d.ACCENT},{text:"".concat(l.slice(r+n.length),"”").trimStart()}]:[{text:"“".concat(l,"”")}];return(0,a.jsx)(d.Band,{tone:"light",className:"t:py-36 py-28",backdrop:(0,a.jsx)("div",{className:"absolute inset-x-0 top-0 mx-auto h-full w-full max-w-(--max-width-content)",children:(0,a.jsx)(o.ScrollBuildGrid,{cell:40,strokeDasharray:"4 2",className:"[mask-image:radial-gradient(ellipse_50%_58%_at_50%_0%,white_0%,white_48%,transparent_100%)] [mask-repeat:no-repeat] stroke-(--v-blue)/16"})}),children:(0,a.jsxs)("figure",{className:"mx-auto flex w-full max-w-[900px] flex-col items-center text-center",children:[(0,a.jsx)("span",{className:"mb-8 inl

1ine-flex items-center rounded-md bg-[#F1F3F9] px-4 py-2 text-xs font-semibold tracking-[0.16em] text-(--v-blue) uppercase",children:i}),(0,a.jsx)(c.J,{as:"blockquote",segments:m,className:d.GW}),(0,a.jsx)(d.Reveal,{delay:.15,children:(0,a.jsxs)("figcaption",{className:"mt-10 text-base",children:[(0,a.jsx)("div",{className:"font-semibold",children:s.author}),(0,a.jsxs)("div",{className:"text-(--v-muted)",children:[s.authorTitle," at ",null!==(t=k[s.company])&&void 0!==t?t:s.company]})]})})]})})}function L(){return(0,a.jsx)(d.Band,{tone:"light",id:"showcase",className:"scroll-mt-16",children:(0,a.jsxs)("div",{className:"-mx-6",children:[(0,a.jsx)("div",{className:"t:py-24 border-t border-(--v-border) px-6 py-16",children:(0,a.jsx)(d.Reveal,{children:(0,a.jsx)(d.Heading,{align:"left",eyebrow:"Showcase",className:"t:[&_h2]:flex-nowrap [&_h2]:max-w-none",segments:[{text:"Design system sites"},{text:"made with",className:d.ACCENT},{text:"Supernova"}],lede:"Public documentation sites teams published from Supernova — hover a mark to preview the live site."})})}),(0,a.jsx)(j,{})]})})}function D(){return(0,a.jsxs)(d.VetraPageShell,{children:[(0,a.jsx)(z,{}),(0,a.jsx)(x.lH,{overlapHero:!0}),(0,a.jsx)(F,{}),(0,a.jsx)(I,{quote:B,eyebrow:"In their words",accent:"many opportunities to scale"}),(0,a.jsx)(L,{}),(0,a.jsx)(m.VetraCta,{rotatingGlow:!1,grid:"top"})]})}}},e=>{var t=t=>e(e.s=t);e.O(0,[1355,7465,8607,3063,7244,7579,5940,1530,4974,9430,1989,7058,841,8441,1684,7358],()=>t(18023)),_N_E=e.O()}]);