https://pika.style/_next/static/chunks/pages/user/onboarding-1f7090a83075cc61.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3663],{54059:(e,t,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/user/onboarding",function(){return s(87100)}])},87100:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>E});var a=s(75038),r=s(76430),i=s(58454),n=s(21958),l=s(69358),o=s(56725),c=s(83390),d=s(72651),x=s(7880),m=s.n(x),h=s(40208),u=s(91672),p=s(14876),b=s(80070),f=s(80998),j=s(5526),g=s(96136),y=s(18381),N=s(19021),k=s(44376),w=s(58742),v=s(45609),_=s.n(v);let A=()=>(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"bg-linear-to-br from-orange-50 to-yellow-50 border border-orange-200/70 rounded-xl px-8 py-10 relative",children:[(0,a.jsx)(h.A,{className:"text-5xl mb-4 mix-blend-color-burn dark:mix-blend-dodge"}),(0,a.jsxs)("h3",{className:"text-xl font-inter",children:["Capture and edit browser screenshots quickly with"," ",(0,a.jsx)("span",{className:"font-semibold",children:"Pika Chrome Extension"})]}),(0,a.jsxs)("div",{className:"text-orange-500 font-semibold bg-white px-2 py-1 rounded-xl absolute inline-flex top-[-10px] right-[10px] rotate-[-1.2deg] border border-orange-400 items-center justify-center gap-1",children:[(0,a.jsx)(u.A,{weight:"duotone"}),(0,a.jsx)("p",{children:"Used by 1,000+ users"})]}),(0,a.jsxs)("div",{className:"flex flex-wrap gap-4 items-center mt-6",children:[(0,a.jsxs)(c.$n,{className:"text-base inline-flex",variant:"secondary",as:"a",target:"_blank",href:"https://chromewebstore.google.com/detail/pika-capture-website-scre/eabcpmplbinmgkaaccanhofnmljaaiia",children:["Install Chrome Extension",(0,a.jsx)(p.A,{size:10,className:"ml-1 self-start opacity-50"})]}),(0,a.jsxs)(c.$n,{as:"a",href:"https://www.youtube.com/watch?v=F9ecGg1VyzE",target:"_blank",className:"text-sm opacity-50 hover:opacity-100 duration-100 gap-1 flex items-center text-yellow-900 font-medium",children:[(0,a.jsx)(b.A,{}),"See usage video"]})]})]}),(0,a.jsxs)("div",{className:"bg-linear-to-br from-pink-50 to-red-100 border border-red-200 rounded-xl px-8 py-10",children:[(0,a.jsx)(f.A,{className:"text-5xl mb-4 mix-blend-color-burn dark:mix-blend-dodge"}),(0,a.jsxs)("h3",{className:"text-xl font-inter",children:["Check ",(0,a.jsx)("span",{className:"font-semibold",children:"Pika Editor templates"}),": create ",(0,a.jsx)("br",{}),(0,a.jsx)(_(),{target:"_blank",href:"/templates/tweet-image",className:"border-b-2 border-pink-300 text-pink-600",children:"tweet screenshots"}),","," ",(0,a.jsx)(_(),{target:"_blank",href:"/templates/code-image",className:"border-b-2 border-pink-300 text-pink-600",children:"code images"})," ","and more"]}),(0,a.jsx)(c.$n,{className:"mt-6 text-base inline-flex",variant:"secondary",as:"a",href:"/templates",target:"_blank",children:"View all templates →"})]}),(0,a.jsxs)("div",{className:"bg-linear-to-br from-sky-50 to-blue-100 border border-blue-200 rounded-xl px-8 py-10 relative",children:[(0,a.jsxs)("div",{className:"text-blue-500 font-semibold bg-white px-2 py-1 rounded-xl absolute inline-flex top-[-10px] right-[10px] rotate-[-1.2deg] border border-blue-400 items-center justify-center gap-1",children:[(0,a.jsx)(u.A,{weight:"duotone"}),(0,a.jsx)("p",{children:"Used by 3,000+ devs"})]}),(0,a.jsx)(j.A,{className:"text-5xl mb-4 mix-blend-color-burn dark:mix-blend-dodge"}),(0,a.jsxs)("h3",{className:"text-xl font-inter",children:["Convert Code into beautiful images with just a shortcut with"," ",(0,a.jsx)("span",{className:"font-semibold",children:"VSCode Extension"})]}),(0,a.jsxs)(c.$n,{className:"mt-6 text-base inline-flex",variant:"secondary",as:"a",href:"https://marketplace.visualstudio.com/items?itemName=RishiMohan.pika-vscode",target:"_blank",children:["Install VSCode Extension",(0,a.jsx)(p.A,{size:10,className:"ml-1 self-start opacity-50"})]})]}),(0,a.jsxs)("div",{className:"bg-linear-to-br from-green-50 to-emerald-100 border border-emerald-300 rounded-xl px-8 py-10",children:[(0,a.jsx)(g.A,{className:"text-5xl mb-4 mix-blend-color-burn dark:mix-blend-dodge"}),(0,a.jsxs)("h3",{className:"text-xl font-inter",children:["Have questions or just want to say hi?"," ",(0,a.jsx)("br",{className:"hidden md:inline-flex"}),(0,a.jsx)("span",{className:"font-semibold",children:"Chat support is one click away!"})]}),(0,a.jsxs)("div",{className:"flex flex-wrap gap-x-2  gap-y-2 items-center mt-6",children:[(0,a.jsx)(c.$n,{

1className:"text-base inline-flex",variant:"secondary",as:"a",target:"_blank",href:"/articles",children:"View Editor documentation"}),(0,a.jsx)(c.$n,{className:"text-base inline-flex",variant:"secondary",onClick:()=>{$crisp&&($crisp.push(["do","chat:show"]),$crisp.push(["do","chat:open"]))},children:"Chat Support"}),(0,a.jsx)(c.$n,{className:"text-base inline-flex",variant:"secondary",as:"a",href:"mailto:[email protected]",children:"Send an email"})]})]})]}),C=()=>(0,a.jsx)("div",{children:(0,a.jsxs)(c.mc,{width:"1080px",className:"my-32 text-center text-xl py-10 dark:text-white",children:[(0,a.jsx)(y.A,{className:"text-3xl mb-5 mx-auto opacity-50",weight:"duotone"}),(0,a.jsxs)("div",{className:"text-2xl font-inter mb-1",children:["Want to embed Pika Screenshot Editor in your app?"," "]}),(0,a.jsx)("p",{className:"mb-4 opacity-50",children:"Integrate a full-fledged screenshot editor in your app"}),(0,a.jsx)("div",{children:(0,a.jsx)(_(),{className:"border-b border-gray-200 hover:border-pink-500 text-base",href:"/products/embed",target:"_blank",children:"Check Pika Embed →"})})]})}),E=()=>{let e=(0,r.useRef)(),[t,s]=(0,r.useState)(!0),{c_Session:x,c_StripeSub:h,c_ActiveSubscription:u,c_RefreshActiveSubscription:p,isPro:b}=(0,r.useContext)(i.A),f=()=>{e?.current&&setTimeout(()=>{e?.current((0,d.Oe)({x:.1,y:.3})),e?.current((0,d.Oe)({x:.7,y:.9})),e?.current((0,d.Oe)({x:.8,y:.9})),e?.current((0,d.Oe)({x:.6,y:.9}))},300)};(0,r.useEffect)(()=>{setTimeout(()=>{f()},200),setTimeout(()=>{f()},1e3),setTimeout(()=>{f()},1500),setTimeout(()=>{f()},1700)},[]);let j=(0,r.useRef)(0),[g,y]=(0,r.useState)(0);return(0,r.useEffect)(()=>{if(null!==x){if(!x||b)return void s(!1);if(null!==h&&void 0!==u&&!b)if(j.current<10){let e=setTimeout(async()=>{j.current+=1,await p(),y(e=>e+1)},2e3);return()=>clearTimeout(e)}else s(!1),w.oR.error("Your payment is still processing. Refresh in a minute, or contact support if Pro doesn't unlock")}},[h,x,u,b,g]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.bV,{noindex:!0,nofollow:!0,title:`👋 ${x?.user_metadata?.name??"there"}, you've successfully upgraded! – Pika`,openGraph:{title:`👋 ${x?.user_metadata?.name??"there"}, you've successfully upgraded! – Pika`}}),(0,a.jsx)(m(),{className:"fixed w-full h-full pointer-events-none z-200",onInit:({confetti:t})=>e.current=t}),(0,a.jsx)(n.A,{}),null===x?(0,a.jsx)("div",{className:"flex items-center justify-center h-full w-full min-h-[500px]",children:(0,a.jsx)(N.A,{size:32,className:"animate-spin leading-none opacity-70"})}):x?.id?(0,a.jsx)(a.Fragment,{children:t?(0,a.jsx)("div",{className:"flex items-center justify-center h-full w-full min-h-[500px]",children:(0,a.jsx)(N.A,{size:32,className:"animate-spin leading-none opacity-70"})}):(0,a.jsxs)("div",{className:"",children:[(0,a.jsx)("div",{className:"bg-gray-100 dark:bg-gray-900 py-12 relative group",children:(0,a.jsx)(c.mc,{width:"1080px",className:"",children:(0,a.jsxs)(c.T8,{initial:{opacity:0,y:30},animate:{opacity:1,y:0},className:"text-center max-w-[700px] mx-auto",children:[(0,a.jsxs)("h1",{className:"mt-5 text-2xl md:text-3xl dark:text-gray-400 text-gray-500 font-inter",children:[(0,a.jsx)("div",{className:"rotate-[5deg] group-hover:rotate-[-5deg] duration-200 inline-flex",children:"\uD83D\uDC4B"})," ",(0,a.jsxs)("span",{className:"text-black dark:text-white font-medium",children:[x?.user_metadata?.name??"there",", you're ready to go!"]})," "]}),(0,a.jsx)("p",{className:"mt-2 md:text-base opacity-80 mx-auto",children:"You've successfully upgraded!"}),(0,a.jsxs)("div",{className:"flex items-center justify-center mt-4 gap-2 md:gap-4 flex-wrap",children:[(0,a.jsx)(c.$n,{variant:"secondary",className:"text-base",as:"a",href:"/templates/screenshot-editor",children:"Continue to Screenshot Editor →"}),(0,a.jsxs)(c.$n,{variant:"secondary",className:"text-base",as:"a",target:"_blank",href:"https://twitter.com/intent/tweet?text=Checkout @AppPika, a great tool for automating and designing marketing images! → pika.style/templates/screenshot-editor",children:[(0,a.jsx)(k.A,{className:"mr-1"}),"Tweet about Pika"]})]})]})})}),(0,a.jsxs)("div",{children:[(0,a.jsx)(c.T8,{initial:{opacity:0,y:30}

1,animate:{opacity:1,y:0},children:(0,a.jsxs)(c.mc,{width:"1080px",className:"pt-16",children:[(0,a.jsxs)("div",{className:"pb-2",children:[(0,a.jsx)("h2",{className:"font-inter text-center text-2xl dark:text-white",children:"Let's get you started!"}),(0,a.jsx)("p",{className:"mx-auto text-center mt-1 opacity-70",children:"Take a minute to know what all you can do with your subscription"})]}),(0,a.jsx)("div",{className:"grid md:grid-cols-2 gap-8 mt-12 dark:text-black",children:(0,a.jsx)(A,{})})]})}),(0,a.jsx)(C,{})]})]})}):(0,a.jsx)("div",{className:"flex items-center justify-center h-full w-full min-h-[500px]",children:"Please log in to continue"}),(0,a.jsx)(l.A,{})]})}}},e=>{e.O(0,[4558,1178,7880,3490,1958,6394,636,6593,8792],()=>e(e.s=54059)),_N_E=e.O()}]);