https://app.stealads.ai/assets/InteractiveDemo-D2jxagrH.js

1import{r as i,j as e,R as O}from"./vendor-react-4nskSLwF.js";import{a as Y,r as F}from"./bodyScrollLock-BfSrVtoR.js";import{B as G}from"./index-Dwg2Ax7P.js";import{S as u}from"./SafeImage-CwnXdA0_.js";import{C as U}from"./Confetti-BqmUNno0.js";import{D as H}from"./demoExamples-C-c6QaBa.js";import{$ as V,a0 as P,a1 as q,o as K,Y as _,y as W,A as C,c as N,a2 as E,S as I,w as Z,Z as T,h as J}from"./vendor-icons-C1yuteaU.js";import"./vendor-auth-fHvZxNVn.js";import"./vendor-convex-CnLjhndY.js";function w(l){const d=H.find(o=>o.id===l);if(!d)throw new Error(`[InteractiveDemo] Missing demo example "${l}". Check demoExamples.ts.`);return d}const v=[{brand:"Perfect White Tee",color:"#F5A0B8",example:w("pwt-sugar-high")},{brand:"VKTRY Gear",color:"#FF6B00",example:w("vktry-spring")},{brand:"ClickUp",color:"#7B68EE",example:w("clickup-robbed")}],h=[{key:"scan",label:"SCAN",icon:V,duration:1200},{key:"intel",label:"INTEL",icon:P,duration:1e3},{key:"tactics",label:"TACTICS",icon:q,duration:1e3},{key:"select",label:"SELECT",icon:K,duration:800},{key:"design",label:"DESIGN",icon:_,duration:600},{key:"render",label:"RENDER",icon:W,duration:1400}],R=[{headline:"You just stole an ad!",sub:"See what the AI found."},{headline:"Another one! You're on a roll.",sub:"Check out this transformation."},{headline:"3 for 3. You're a natural.",sub:"Imagine doing this with YOUR brand."}],$=[{primary:"Make Ads for YOUR Brand",secondary:"Try Another Ad"},{primary:"Make Ads for YOUR Brand",secondary:"Try Another Ad"},{primary:"Make Ads for YOUR Brand",secondary:"One More?"},{primary:"Start Creating Now",secondary:null}],X={Joy:"text-pink-400 bg-pink-500/10 border-pink-500/30",Playfulness:"text-amber-400 bg-amber-500/10 border-amber-500/30","Self-Expression":"text-purple-400 bg-purple-500/10 border-purple-500/30",Power:"text-red-400 bg-red-500/10 border-red-500/30",Achievement:"text-emerald-400 bg-emerald-500/10 border-emerald-500/30",Competition:"text-orange-400 bg-orange-500/10 border-orange-500/30","Fear of Missing Out":"text-amber-400 bg-amber-500/10 border-amber-500/30","Social Proof":"text-blue-400 bg-blue-500/10 border-blue-500/30",Authority:"text-cyan-400 bg-cyan-500/10 border-cyan-500/30","Productivity Guilt":"text-orange-400 bg-orange-500/10 border-orange-500/30",FOMO:"text-red-400 bg-red-500/10 border-red-500/30",Status:"text-purple-400 bg-purple-500/10 border-purple-500/30",Performance:"text-emerald-400 bg-emerald-500/10 border-emerald-500/30","Financial Pain":"text-red-400 bg-red-500/10 border-red-500/30",Frustration:"text-orange-400 bg-orange-500/10 border-orange-500/30",Simplification:"text-cyan-400 bg-cyan-500/10 border-cyan-500/30"};function z(l){return X[l]||"text-brand-gray bg-white/5 border-white/10"}const Q=({activeIndex:l})=>e.jsx("div",{className:"flex items-center justify-between gap-1 mb-5",children:h.map((d,o)=>{const r=d.icon,n=o<l?"complete":o===l?"active":"pending";return e.jsxs(O.Fragment,{children:[e.jsxs("div",{className:"flex flex-col items-center gap-1.5 flex-1",children:[e.jsxs("div",{className:`
2              relative w-10 h-10 rounded-lg flex items-center justify-center transition-all duration-300
3              ${n==="complete"?"bg-brand-emerald/20 border border-brand-emerald/50":n==="active"?"bg-brand-emerald/10 border border-brand-emerald animate-glow-pulse":"bg-white/5 border border-white/10"}
4            `,children:[n==="complete"?e.jsx(J,{size:16,className:"text-brand-emerald"}):e.jsx(r,{size:16,className:n==="active"?"text-brand-emerald":"text-brand-gray/50"}),n==="active"&&e.jsx("div",{className:"absolute inset-0 rounded-lg border border-brand-emerald/50 animate-ping opacity-30"})]}),e.jsx("span",{className:`
5              text-[9px] font-mono font-bold tracking-[0.15em] uppercase
6              ${n==="complete"||n==="active"?"text-brand-emerald":"text-brand-gray/40"}
7            `,children:d.label})]}),o<h.length-1&&e.jsxs("div",{className:"flex-shrink-0 w-6 h-px relative -mt-5",children:[e.jsx("div",{className:"absolute inset-0 bg-white/10"}),e.jsx("div",{className:`absolute inset-y-0 left-0 bg-brand-emerald transition-all duration-500 ${o<l?"w-full":"w-0"}`})]})]},d.key)})}),ee=({total:l,current:d,completed:o})=>e.jsx("div",{className:"flex items-center gap-2",children:Array.from({length:l}).map((r,n)=>e.jsx("div",{className:`w-2 h-2 rounded-full transition-all duration-300 ${n<o?"bg-brand-emerald":n===d?"bg-brand-emerald/50 ring-2 ring-brand-emerald/30":"bg-white/10"}`},n))}),ce=({onGetStarted:l})=>{const[d,o]=i.useState(0),[r,n]=i.useState("idle"),[c,f]=i.useState(0),[D,k]=i.useState(!1),[p,M]=i.useState(0),g=i.useRef(!1),x=i.useRef(0),S=i.useRef(null),m=v[d],{example:t}=m,b=$[Math.min(p,$.length-1)],B=Math.min(Math.max(p-1,0),R.length-1),j=R[B];i.useEffect(()=>{const a=new Image;a.src=m.example.transformation.adImage},[d]),i.useEffect(()=>{var a;if(r==="result")return Y(),(a=S.current)==null||a.focus(),()=>{F()}},[r]);const A=i.useCallback(async()=>

7{if(g.current)return;g.current=!0;const a=++x.current;n("stealing"),f(0);try{for(let s=0;s<h.length;s++){if(x.current!==a)return;f(s),await new Promise(L=>setTimeout(L,h[s].duration))}if(x.current!==a||(n("result"),M(s=>s+1),await new Promise(s=>setTimeout(s,200)),x.current!==a))return;k(!0)}finally{x.current===a&&(g.current=!1)}},[]),y=i.useCallback(()=>{x.current++,g.current=!1,k(!1);const a=(d+1)%v.length;o(a),n("idle"),f(0)},[d]);return i.useEffect(()=>{if(r!=="result")return;const a=s=>{s.key==="Escape"&&b.secondary&&y()};return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[r,b.secondary,y]),e.jsxs("div",{className:"min-h-screen bg-brand-darkest text-brand-offwhite font-sans",children:[e.jsx(U,{active:D,duration:3e3,particleCount:60}),e.jsxs("nav",{className:"fixed top-0 inset-x-0 h-16 bg-brand-darkest/90 backdrop-blur-xl border-b border-white/5 z-40 flex items-center justify-between px-4 lg:px-8",children:[e.jsx("div",{className:"flex items-center gap-4",children:e.jsx("div",{className:"flex items-center cursor-pointer",onClick:l,children:e.jsx("img",{src:"/logo-green-white.jpg",alt:"StealAds.AI",className:"h-8 w-auto"})})}),e.jsx("div",{className:"flex items-center gap-3",children:e.jsxs(G,{variant:"primary",size:"sm",onClick:l,children:[e.jsx("span",{className:"hidden sm:inline",children:"Get Started"}),e.jsx("span",{className:"sm:hidden",children:"Start"}),e.jsx(C,{size:14,className:"ml-1"})]})})]}),e.jsxs("main",{className:"pt-20 md:pt-24 px-4 lg:px-8 max-w-4xl mx-auto pb-20",children:[e.jsxs("div",{className:"text-center mb-5 md:mb-8",children:[e.jsxs("h1",{className:"text-2xl md:text-5xl font-black text-white tracking-tight leading-tight mb-3",children:["See their ads. ",e.jsx("span",{className:"text-brand-emerald",children:"Steal the strategy."})]}),e.jsx("p",{className:"text-brand-gray text-sm md:text-lg font-medium max-w-xl mx-auto",children:"Watch AI analyze a competitor's ad, extract what makes it work, and generate your version in seconds."})]}),e.jsx("div",{className:"flex justify-center mb-4 md:mb-8",children:e.jsx(ee,{total:v.length,current:d,completed:p})}),r==="idle"&&e.jsx("div",{className:"md:hidden mb-5",children:e.jsxs("button",{onClick:A,"aria-label":"Start demo steal",className:"w-full inline-flex items-center justify-center gap-2 bg-brand-emerald text-brand-darkest font-bold text-sm px-6 py-3.5 rounded-xl transition-all active:scale-[0.98]",children:["STEAL THIS AD",e.jsx(N,{size:16})]})}),e.jsxs("div",{className:`
8          bg-brand-card rounded-2xl border overflow-hidden transition-all duration-500
9          ${r==="result"?"border-brand-emerald/30 shadow-[0_0_60px_-10px_rgba(0,255,128,0.15)]":r==="stealing"?"border-brand-emerald/20":"border-white/[0.08] hover:border-white/20"}
10        `,children:[e.jsxs("div",{className:"flex items-center justify-between px-6 py-4 border-b border-white/5 bg-white/[0.02]",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-8 h-8 rounded-lg flex items-center justify-center",style:{backgroundColor:`${m.color}20`,border:`1px solid ${m.color}40`},children:e.jsx("span",{className:"text-xs font-black",style:{color:m.color},children:m.brand.charAt(0)})}),e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("h3",{className:"font-bold text-white text-sm",children:t.competitor.name}),e.jsx("span",{className:"text-[10px] font-mono font-bold text-brand-gray bg-white/10 px-1.5 py-0.5 rounded-sm border border-white/5",children:t.industry})]}),e.jsxs("p",{className:"text-[10px] text-brand-gray",children:["Targeting: ",e.jsx("span",{className:"text-white/70",children:m.brand})]})]})]}),e.jsx("span",{className:`text-[10px] font-bold uppercase tracking-widest px-3 py-1.5 rounded-lg ${r==="result"?"bg-brand-emerald/10 text-brand-emerald border border-brand-emerald/20":r==="stealing"?"bg-amber-500/10 text-amber-400 border border-amber-500/20":"bg-white/5 text-brand-gray border border-white/10"}`,children:r==="result"?"Stolen":r==="stealing"?"Analyzing...":"Ready"})]}),e.jsxs("div",{className:"grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-white/5",children:[e.jsxs("div",{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(E,{className:"w-4 h-4 text-brand-gray"}),e.jsx("span",{className:"text-[11px] font-bold text-brand-gray uppercase tracking-widest",children:"Their Ad"})]}),e.jsx("div",{className:`aspect-[4/5] rounded-xl overflow-hidden mb-4 bg-brand-darkest ring-1 ring-white/10 ${r==="result"?"grayscale-[40%] opacity-60":""} transition-all duration-500`,children:e.jsx(u,{src:t.competitor.adImage,alt:`${t.competitor.name} ad`,className:"w-full h-full object-contain"})}),e.jsxs("p",{className:"text-xs text-brand-gray leading-relaxed font-mono",children:['"',t.competitor.adCopy,'"']})]}),e.jsxs("div",{className:"p-6 relative",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(I,{className:`w-4 h-4 ${r==="result"?"text-brand-emerald":"text-brand-emerald/50"}`}),e.jsx("span",{className:`text-[11px] font-bold uppercase tracking-widest ${r==="result"?"text-brand-emerald":"text-brand-emerald/50"}`,children:"Your Version"})]}

10),r==="result"?e.jsxs("div",{className:"animate-fade-in",children:[e.jsx("div",{className:"aspect-[4/5] rounded-xl overflow-hidden mb-4 ring-2 ring-brand-emerald/40 shadow-lg shadow-brand-emerald/10 animate-scale-in",children:e.jsx(u,{src:t.transformation.adImage,alt:"Generated ad",className:"w-full h-full object-contain"})}),e.jsx("h4",{className:"text-sm font-bold text-white leading-tight mb-1",children:t.transformation.headline}),e.jsx("p",{className:"text-xs text-brand-gray leading-relaxed",children:t.transformation.bodyCopy})]}):r==="stealing"?e.jsxs("div",{className:"aspect-[4/5] rounded-xl overflow-hidden border border-brand-emerald/20 bg-brand-card relative",children:[e.jsx("div",{className:"absolute inset-0 overflow-hidden pointer-events-none",children:e.jsx("div",{className:"absolute inset-x-0 h-32 bg-gradient-to-b from-brand-emerald/5 to-transparent animate-scan-line",style:{animationDuration:"3s"}})}),e.jsx("div",{className:"absolute inset-0 opacity-[0.02]",style:{backgroundImage:"radial-gradient(circle at 1px 1px, white 1px, transparent 0)",backgroundSize:"16px 16px"}}),e.jsxs("div",{className:"relative z-10 p-5 flex flex-col h-full",children:[e.jsx(Q,{activeIndex:c}),c>=2&&e.jsxs("div",{className:"animate-intel-decode mb-3 rounded-lg border border-brand-emerald/20 bg-brand-emerald/5 p-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-1.5",children:[e.jsx(_,{size:12,className:"text-brand-emerald"}),e.jsx("span",{className:"text-[9px] font-mono font-bold text-brand-emerald uppercase tracking-wider",children:"Intercepted Intel"})]}),e.jsxs("p",{className:"text-[11px] text-white/80 leading-relaxed",children:['"',t.analysis.hookDescription,'"']})]}),c>=3&&e.jsxs("div",{className:"space-y-2 flex-grow",children:[e.jsx("span",{className:"text-[9px] font-mono font-bold text-brand-gray uppercase tracking-wider",children:"Attack Vectors"}),t.analysis.emotionalTriggers.slice(0,2).map((a,s)=>e.jsx("div",{className:`rounded-lg border p-3 animate-card-deal ${c>=4&&s===0?"border-brand-emerald bg-brand-emerald/10":"border-white/10 bg-white/[0.03]"}`,style:{animationDelay:`${s*150}ms`,animationFillMode:"both"},children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("span",{className:"text-[11px] font-bold text-white",children:[a," Hook"]}),e.jsx("span",{className:`text-[8px] font-mono font-bold px-2 py-0.5 rounded border ${z(a)}`,children:a.toUpperCase()})]})},s)),c>=4&&e.jsxs("div",{className:"flex items-center gap-2 p-2 rounded-lg border border-brand-emerald/30 bg-brand-emerald/10 animate-intel-decode",children:[e.jsx(Z,{size:12,className:"text-brand-emerald"}),e.jsx("span",{className:"text-[10px] font-mono font-bold text-brand-emerald uppercase tracking-wider",children:"Target Acquired"})]})]}),c>=5&&e.jsxs("div",{className:"mt-auto p-3 rounded-lg border border-dashed border-brand-emerald/30 bg-brand-emerald/[0.02] flex flex-col items-center animate-fade-in",children:[e.jsxs("div",{className:"relative mb-2",children:[e.jsx("div",{className:"absolute inset-0 bg-brand-emerald/20 rounded-full blur-lg animate-pulse"}),e.jsx("div",{className:"relative w-10 h-10 rounded-full bg-brand-emerald/10 border border-brand-emerald/30 flex items-center justify-center animate-glow-pulse",children:e.jsx(T,{size:18,className:"text-brand-emerald"})})]}),e.jsx("span",{className:"text-[10px] font-bold text-white uppercase tracking-wide",children:"Rendering Your Ad"}),e.jsx("div",{className:"flex gap-0.5 mt-1.5",children:[0,1,2].map(a=>e.jsx("div",{className:"w-1.5 h-1.5 rounded-full bg-brand-emerald animate-pulse",style:{animationDelay:`${a*200}ms`}},a))})]}),e.jsxs("div",{className:"flex items-center justify-between mt-3 pt-3 border-t border-white/5",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"w-2 h-2 rounded-full bg-brand-emerald animate-pulse"}),e.jsx("span",{className:"text-[9px] font-mono text-brand-gray uppercase tracking-wider",children:"In Progress"})]}),e.jsxs("span",{className:"text-[9px] font-mono text-brand-gray/50",children:[c+1,"/",h.length]})]})]})]}):e.jsxs("div",{className:"aspect-[4/5] rounded-xl flex flex-col items-center justify-center text-center p-6 border-2 border-dashed border-brand-emerald/30 bg-gradient-to-br from-brand-emerald/[0.03] to-transparent",children:[e.jsx("h4",{className:"text-white font-black text-lg mb-2 uppercase tracking-wide",children:"Steal This Ad"}),e.jsx("p",{className:"text-sm text-brand-gray mb-6 max-w-[200px]",children:"AI will analyze the ad, extract what works, and create your version."}),e.jsxs("button",{onClick:A,className:"group inline-flex items-center gap-2 bg-brand-emerald text-brand-darkest font-bold text-sm px-8 py-3.5 rounded-xl transition-all hover:shadow-[0_0_30px_-5px_rgba(0,255,128,0.5)] hover:scale-[1.02] active:scale-[0.98]",children:["STEAL THIS AD",e.jsx(N,{size:16,className:"group-hover:translate-x-0.5 transition-transform"})]})]})]})]})]})]}),r==="result"&&e.jsxs("div",{className:"fixed inset-0 z-50 flex items-center justify-center p-4",role:"dialog","aria-modal":"true","aria-label":j.headline,ref:S,tabIndex:-1,

10children:[e.jsx("div",{className:"absolute inset-0 bg-black/80 backdrop-blur-sm"}),e.jsxs("div",{className:"relative bg-brand-card border border-white/10 rounded-2xl shadow-2xl max-w-2xl w-full animate-scale-in overflow-hidden max-h-[90vh] overflow-y-auto",children:[e.jsxs("div",{className:"flex items-center gap-3 pt-5 pb-3 px-6",children:[e.jsx("div",{className:"w-10 h-10 rounded-full bg-brand-emerald/20 border-2 border-brand-emerald flex items-center justify-center flex-shrink-0",children:e.jsx(T,{size:18,className:"text-brand-emerald fill-brand-emerald"})}),e.jsxs("div",{children:[e.jsx("h2",{className:"text-xl md:text-2xl font-black text-white uppercase tracking-wide leading-tight",children:j.headline}),e.jsx("p",{className:"text-brand-gray text-xs",children:j.sub})]})]}),e.jsx("div",{className:"px-6 pb-3",children:e.jsxs("div",{className:"grid grid-cols-2 gap-3 rounded-xl border border-white/[0.08] bg-brand-darkest/50 p-3",children:[e.jsxs("div",{children:[e.jsxs("span",{className:"text-[9px] font-bold text-brand-gray uppercase tracking-widest flex items-center gap-1.5 mb-2",children:[e.jsx(E,{size:10})," Their Ad"]}),e.jsx("div",{className:"aspect-[4/5] rounded-lg overflow-hidden bg-brand-darkest ring-1 ring-white/10 grayscale-[40%] opacity-60",children:e.jsx(u,{src:t.competitor.adImage,alt:`${t.competitor.name} ad`,className:"w-full h-full object-contain"})})]}),e.jsxs("div",{children:[e.jsxs("span",{className:"text-[9px] font-bold text-brand-emerald uppercase tracking-widest flex items-center gap-1.5 mb-2",children:[e.jsx(I,{size:10})," Your Version"]}),e.jsx("div",{className:"aspect-[4/5] rounded-lg overflow-hidden ring-2 ring-brand-emerald/40 shadow-lg shadow-brand-emerald/10",children:e.jsx(u,{src:t.transformation.adImage,alt:"Generated ad",className:"w-full h-full object-contain"})})]})]})}),e.jsx("div",{className:"px-6 pb-3",children:e.jsxs("div",{className:"rounded-xl border border-brand-emerald/20 bg-brand-emerald/[0.04] p-4",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx(P,{size:14,className:"text-brand-emerald"}),e.jsx("span",{className:"text-[10px] font-mono font-bold text-brand-emerald uppercase tracking-wider",children:t.analysis.hookType})]}),e.jsxs("p",{className:"text-xs text-white/80 leading-relaxed mb-3",children:['"',t.analysis.hookDescription,'"']}),e.jsx("div",{className:"flex flex-wrap gap-1.5",children:t.analysis.emotionalTriggers.map((a,s)=>e.jsx("span",{className:`text-[8px] font-mono font-bold px-2 py-0.5 rounded border ${z(a)}`,children:a.toUpperCase()},s))})]})}),e.jsxs("div",{className:"px-6 pb-6 flex flex-col items-center gap-3",children:[e.jsxs("button",{onClick:l,className:`
11                  w-full inline-flex items-center justify-center gap-3 bg-brand-emerald text-brand-darkest font-bold rounded-xl transition-all
12                  hover:shadow-[0_0_40px_-5px_rgba(0,255,128,0.5)] hover:scale-[1.01] active:scale-[0.99]
13                  ${p>=3?"text-lg py-5":"text-base py-4"}
14                `,children:[b.primary,e.jsx(C,{size:p>=3?20:18})]}),b.secondary&&e.jsxs("button",{onClick:y,className:"text-sm text-brand-gray hover:text-white transition-colors flex items-center gap-1.5 py-2",children:[b.secondary,e.jsx(N,{size:14})]}),!b.secondary&&e.jsx("p",{className:"text-xs text-brand-gray/50 font-mono",children:"Plans from $149/month · No contracts"})]})]})]})]})};export{ce as InteractiveDemo};