https://readyset.io/assets/hero-test-Dd-T2pHx.js

1import{r as h,c as q,j as s,d as I,M as D,e as F,S as H}from"./index-Dk2c7UNM.js";const N=24,L=4,P=N*L,V=.38,K={col:5,row:1},W={idle:"Ready",problem:"Slow queries piling up…",beat:"Readyset kicks in",resolving:"Caching your costliest queries…",done:"Costliest queries now served from cache"},G=e=>Array.from({length:e},(t,r)=>r);function O(e){const t=e.slice();for(let r=t.length-1;r>0;r--){const l=Math.floor(Math.random()*(r+1));[t[r],t[l]]=[t[l],t[r]]}return t}function Q(){return G(P).map(e=>{const t=e%N,r=Math.floor(e/N),l=Math.hypot(t-K.col,(r-K.row)*1.6);return{idx:e,score:l+Math.random()*2.2}}).sort((e,t)=>e.score-t.score).map(e=>e.idx)}function A(){return new Array(P).fill("neutral")}const Y=h.memo(function(t){const r=q.c(2),{color:l}=t;let u;return r[0]!==l?(u=s.jsx("div",{className:"aspect-square rounded-md transition-colors duration-300 ease-out",style:{backgroundColor:l}}),r[0]=l,r[1]=u):u=r[1],u});function J({variant:e="scatter",problem:t="red",runKey:r=0,showCaption:l=!1,className:u}){const[m,d]=h.useState(()=>A()),[f,n]=h.useState("idle"),[y,j]=h.useState(!1),x=h.useRef([]),v=h.useCallback(()=>{for(const a of x.current)clearTimeout(a);x.current=[]},[]),C=h.useCallback(()=>{v();const a=Math.round(P*V),p=e==="scatter"?O(G(P)).slice(0,a):Q().slice(0,a);if(typeof window<"u"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches){const o=A();for(const c of p)o[c]="green";d(o),n("done");return}d(A()),j(!1),n("problem");const i=(o,c)=>x.current.push(setTimeout(o,c)),w=(o,c)=>d(g=>{if(g[o]===c)return g;const E=g.slice();return E[o]=c,E}),k=o=>d(c=>{if(c[o]!=="red")return c;const g=c.slice();return g[o]="green",g});let b=350,S=135;for(const o of p)i(()=>w(o,"red"),b),b+=S,S=Math.max(45,S*.92);const z=b+260;i(()=>{j(!0),n("beat")},z),i(()=>j(!1),z+240);const M=z+320;if(i(()=>n("resolving"),M),e==="cascade"){for(let o=0;o<N;o++)i(()=>{d(c=>{const g=c.slice();for(let E=0;E<L;E++){const B=E*N+o;g[B]==="red"&&(g[B]="green")}return g})},M+o*42);i(()=>n("done"),M+N*42+200)}else O(p).forEach((o,c)=>i(()=>k(o),M+c*22)),i(()=>n("done"),M+a*22+200)},[e,v]);h.useEffect(()=>(C(),v),[C,r,v]);const _=a=>a==="green"?"var(--lime-light-9)":a==="red"?t==="amber"?"var(--color-surface-warning-solid)":"var(--color-surface-negative-solid)":"var(--color-surface-layout-2)";return s.jsxs("div",{className:I("origin-center transition-transform duration-200 ease-out",u),style:{transform:y?"scale(1.012)":"scale(1)"},children:[s.jsx("div",{className:"grid w-full gap-1.5 tablet:gap-2",style:{gridTemplateColumns:`repeat(${N}, minmax(0, 1fr))`},"aria-hidden":"true",children:m.map((a,p)=>s.jsx(Y,{color:_(a)},p))}),l&&s.jsx("p",{className:"mt-4 font-mono text-xs text-content-layout-3","aria-live":"polite",children:W[f]})]})}function Z(){const e=q.c(26),[t,r]=h.useState("scatter"),[l,u]=h.useState("red"),[m,d]=h.useState(0);let f;e[0]===Symbol.for("react.memo_cache_sentinel")?(f=s.jsx("div",{className:"mb-10 text-sm font-medium tracking-wide text-content-layout-3",children:"readyset · hero-test"}),e[0]=f):f=e[0];let n;e[1]!==l||e[2]!==m||e[3]!==t?(n=s.jsx(J,{variant:t,problem:l,runKey:m,showCaption:!0}),e[1]=l,e[2]=m,e[3]=t,e[4]=n):n=e[4];let y;e[5]===Symbol.for("react.memo_cache_sentinel")?(y=s.jsxs("div",{className:"max-w-3xl",children:[s.jsxs(D,{as:"h1",level:"display-large",className:"text-content-layout-1",children:["Stop Buying Hardware",s.jsx("br",{}),"to Fix Your Database"]}),s.jsx(D,{level:"body-large",className:"mt-6 max-w-md text-content-layout-3",children:"Readyset optimizes and caches your costliest queries, reducing infrastructure 30-70%."})]}),e[5]=y):y=e[5];let j;e[6]===Symbol.for("react.memo_cache_sentinel")?(j=s.jsxs("div",{className:"mt-14 flex flex-col gap-10 tablet:flex-row tablet:items-end tablet:justify-between",children:[y,s.jsxs("div",{className:"flex shrink-0 items-center gap-3",children:[s.jsx(F,{label:"See How It Works",variant:"primary",modifier:"outline",size:"large",icon:"arrow-right",iconPosition:"right"}),s.jsx(F,{label:"Start for Free",variant:"primary",modifier:"solid",size:"large",icon:"arrow-right",iconPosition:"right"})]})]}),e[6]=j):j=e[6];let x;e[7]!==n?(x=s.jsx(H,{className:"mt-0",children:s.jsxs("div",{className:"w-full rounded-[40px] bg-surface-layout-1 px-8 py-10 tablet:px-14 tablet:py-14",children:[f,n,j]})}),e[7]=n,e[8]=x):x=e[8];let v;e[9]===Symbol.for("react.memo_cache_sentinel")?(v=s.jsx("span",{className:"font-medium text-content-layout-3",children:"Variant"}),e[9]=v):v=e[9];let C,_;e[10]===Symbol.for("react.memo_cache_sentinel")?(C=T=>r(T),_=[{value:"scatter",label:"Random scatter (seçildi)"},{value:"cascade",label:"Cascade + sweep"}],e[10]=C,e[11]=_):(C=e[10],_=e[11]);let a;e[12]!==t?(a=s.jsx($,{value:t,onChange:C,options:_}),e[12]=t,e[13]=a):a=e[13];let p;e[14]===Symbol.for("react.memo_cache_sentinel")?(p=s.jsx("span",{className:"ml-4 font-medium text-content-layout-3",children:"Problem rengi"}),e[14]=p):p=e[14];let R,i;e[15]===Symbol.for("react.memo_cache_sentinel")?(R=T=>u(T),i=[{value:"red",label:"Kırmızı"},{value:"amber",label:"Kehribar"}],e[15]=R,e[16]=i):(R=e[15],i=e[16]);let w;

1e[17]!==l?(w=s.jsx($,{value:l,onChange:R,options:i}),e[17]=l,e[18]=w):w=e[18];let k;e[19]===Symbol.for("react.memo_cache_sentinel")?(k=s.jsx("button",{onClick:()=>d(U),className:"ml-auto rounded-full bg-black px-4 py-2 font-medium text-white",children:"↻ Replay"}),e[19]=k):k=e[19];let b;e[20]!==w||e[21]!==a?(b=s.jsx(H,{className:"mt-6",children:s.jsxs("div",{className:"flex w-full flex-wrap items-center gap-3 rounded-2xl border border-border-layout-2 bg-white px-5 py-4 text-sm",children:[v,a,p,w,k]})}),e[20]=w,e[21]=a,e[22]=b):b=e[22];let S;return e[23]!==b||e[24]!==x?(S=s.jsxs("main",{className:"min-h-screen bg-white py-8",children:[x,b]}),e[23]=b,e[24]=x,e[25]=S):S=e[25],S}function U(e){return e+1}function $(e){const t=q.c(9),{value:r,onChange:l,options:u}=e;let m;if(t[0]!==l||t[1]!==u||t[2]!==r){let f;t[4]!==l||t[5]!==r?(f=n=>{const y=n.value===r;return s.jsx("button",{onClick:()=>l(n.value),className:"rounded-full px-3 py-1.5 text-sm font-medium transition-colors",style:{backgroundColor:y?"var(--lime-light-9)":"transparent",color:y?"var(--lime-light-12)":"var(--color-content-layout-3)"},children:n.label},n.value)},t[4]=l,t[5]=r,t[6]=f):f=t[6],m=u.map(f),t[0]=l,t[1]=u,t[2]=r,t[3]=m}else m=t[3];let d;return t[7]!==m?(d=s.jsx("div",{className:"inline-flex rounded-full border border-border-layout-2 p-0.5",children:m}),t[7]=m,t[8]=d):d=t[8],d}export{Z as component};