https://pika.style/_next/static/chunks/pages/templates/app-store-play-store-screenshot-d5345ced70dd5896.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6817],{59255:(e,t,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/templates/app-store-play-store-screenshot",function(){return s(68702)}])},68702:(e,t,s)=>{"use strict";s.r(t),s.d(t,{__N_SSG:()=>z,default:()=>P});var a=s(75038),i=s(76430),r=s(2272),n=s(73982),o=s(71623),l=s(93646),c=s(14661),d=s(28276),p=s(12075);s(50876);var x=s(34530),m=s(41075),g=s(8557),u=s(89934),h=s(97181),y=s(63166),f=s(94548),v=s(60509),j=s(61498);let b=({canvasRef:e,options:t,image:s,outputSize:n,setImage:b,isSaving:k,setOptions:w})=>{let S,{isPro:N,c_HandleNonPro:A}=(0,i.useContext)(r.A),[R,_]=(0,i.useState)(),[C,z]=(0,i.useState)(),P=({type:e})=>{if(!N)return void A({text:"Upgrade to Pro to add shapes in canvas"});let t={id:+new Date,type:"rectangle",opacity:1,background:"#c489f8",zIndex:30,blur:0,borderWidth:2,borderColor:"#9f54f4"},s={...t,id:+new Date,type:"circle"},a={...t,id:+new Date,type:"highlight"},i={...t,id:+new Date,type:"square"};switch(e){case"rectangle":z(e=>e?.length?[...e,t]:[t]);break;case"circle":z(e=>e?.length?[...e,s]:[s]);break;case"square":z(e=>e?.length?[...e,i]:[i]);break;case"highlight":z(e=>e?.length?[...e,a]:[a])}};return(0,a.jsxs)("div",{className:"flex flex-col w-full",children:[(0,a.jsx)(d.ER,{children:(0,a.jsxs)("div",{className:"ml-auto flex items-center space-x-3",children:[(0,a.jsx)(d.sc,{shapesStack:C,setShapesStack:z,trigger:(0,a.jsx)(x.ms,{trigger:(0,a.jsx)(x.$n,{variant:"secondary",suffix:(0,a.jsx)(m.A,{size:15}),className:(0,o.A)("text-sm focus:z-10",C?.length?"rounded-r-none! ":""),children:(0,a.jsx)("span",{className:"hidden md:inline-flex mr-1",children:"Add"})}),items:[{icon:(0,a.jsx)(g.A,{size:15}),title:(0,a.jsx)(a.Fragment,{children:"Rectangle"}),onClick:()=>P({type:"rectangle"})},{icon:(0,a.jsx)(u.A,{size:15}),title:(0,a.jsx)(a.Fragment,{children:"Circle"}),onClick:()=>P({type:"circle"})},{icon:(0,a.jsx)(h.A,{size:15}),title:(0,a.jsx)(a.Fragment,{children:"Square"}),onClick:()=>P({type:"square"})},{icon:(0,a.jsx)(y.A,{size:15}),title:(0,a.jsx)(a.Fragment,{children:"Highlight"}),onClick:()=>P({type:"highlight"})}]}),listTrigger:(0,a.jsx)(x.m_,{text:"Manage Layers",children:(0,a.jsx)(x.$n,{variant:"secondary",className:"rounded-l-none! text-sm -ml-px px-1 focus:z-10",children:(0,a.jsx)(f.A,{size:14})})})}),(0,a.jsx)(d.RT,{textStack:R,setTextStack:_,trigger:(0,a.jsx)(x.$n,{variant:"secondary",prefix:(0,a.jsx)(v.A,{size:15}),className:(0,o.A)("text-sm focus:z-10",R?.length?"rounded-r-none! ":""),children:(0,a.jsx)("span",{className:"hidden md:inline-flex ml-1",children:"Text"})}),listTrigger:(0,a.jsx)(x.m_,{text:"Manage layers",children:(0,a.jsx)(x.$n,{variant:"secondary",className:"rounded-l-none! text-sm -ml-px px-1 focus:z-10",children:(0,a.jsx)(f.A,{size:14})})})})]})}),(0,a.jsxs)("div",{ref:e,style:((S={}).aspectRatio=t?.canvasAspectRatio?.value,S.transform=`scale(${n?.canvasScale||1})`,t?.canvasAspectRatio?.key==="aspect-app-store"&&(S.maxWidth="642px"),t?.canvasAspectRatio?.key==="aspect-app-store-5-8"&&(S.maxWidth="585px"),t?.canvasAspectRatio?.key==="aspect-app-store-5-5"&&(S.maxWidth="621px"),t?.canvasAspectRatio?.key==="aspect-app-store-4-7"&&(S.maxWidth="375px"),t?.background?.active==="custom-color")?{...S,backgroundImage:(0,j.Bu)(t?.background)}:t?.background?.active==="image"?{...S,backgroundImage:`url(${t?.background?.image?.baseData}) `,backgroundPosition:"center",backgroundSize:"cover",backgroundRepeat:"no-repeat"}:S,className:(0,o.A)("canvas overflow-hidden duration-100 flex items-center justify-center origin-top w-full max-w-full self-center",t?.background?.active==="gradient"&&t?.background?.gradientDirection?.tw,t?.background?.active==="gradient"&&t?.background?.gradient,t?.canvasAspectRatio?.value!=="auto"&&"useAutoHeight"),children:[k?N?"":(0,a.jsx)(p.yQ,{}):"",(0,a.jsx)(l.Mt,{options:t}),(0,a.jsx)(l.Mx,{options:t}),(0,a.jsx)(l.$P,{textStack:R,setTextStack:_,options:t,setOptions:e=>w(t=>({...t,imageText:{...t.imageText,...e}}))}),(0,a.jsx)(l.E_,{shapesStack:C,setShapesStack:z,options:t}),(0,a.jsxs)("div",{className:(0,o.A)(t?.layout?.tw?.first,"duration-100 relative"),children:[(0,a.jsx)(l.xH,{onDrop:e=>b(t=>({...t,first:e?.baseData}))}),(0,a.jsx)("div",{style:{transform:`scale(${t?.imageScale||90}%) translateX(${t?.positionX||0}%) translateY(${t?.positionY||0}%)`}

1,children:(0,a.jsx)(c.A,{tiltAngleXManual:t?.imageTilt?.angleX||0,tiltAngleYManual:t?.imageTilt?.angleY||0,style:{borderRadius:`${t?.mobileFrame?.value!=="none"?"50":t?.imageRoundness}px`},className:(0,o.A)("flex",t?.mobileFrame?.value==="none"&&"overflow-hidden"),children:(0,a.jsx)(l.mL,{className:"scale-[2.4]",options:t,src:s?.first??"/templates/demo-images/iphone-3.png",children:(0,a.jsx)("img",{alt:"Screenshot",src:s?.first??"/templates/demo-images/iphone-3.png"})})})})]})]})]})};var k=s(36791),w=s(19297),S=s(72651);let N=({options:e,setOptions:t})=>{let{isPro:s,c_HandleNonPro:n,c_Session:l}=(0,i.useContext)(r.A);return(0,a.jsxs)("div",{className:"w-full px-4 py-2",children:[(0,a.jsx)("div",{className:"text-sm font-semibold dark:text-gray-200 flex items-center",children:"Layout"}),(0,a.jsx)("div",{className:"flex flex-wrap",children:[{key:"style-1",tw:{first:""}},{key:"style-2",tw:{first:"rotate-[8deg]"},isPro:!0},{key:"style-3",tw:{first:"rotate-[-8deg]"},isPro:!0},{key:"style-4",tw:{first:"translate-x-[-40%]"},isPro:!0},{key:"style-5",tw:{first:"translate-x-[40%]"},isPro:!0},{key:"style-6",tw:{first:"translate-y-[30%]"},isPro:!0},{key:"style-7",tw:{first:"translate-y-[-30%]"},isPro:!0}].map(i=>(0,a.jsxs)("div",{className:"relative mr-3",onClick:()=>{if(i?.isPro&&!s){n({text:"Please upgrade to Pro to set custom layout styles"}),(0,S.u4)({event:"\uD83E\uDD16 Flow",meta:l?.email?`Template → Layout option → Signup modal(${l?.email})`:"Template → Layout option → Signup modal"});return}t(e=>({...e,layout:{key:i.key,tw:i.tw}}))},children:[(0,a.jsx)("div",{style:{aspectRatio:"9/16"},className:(0,o.A)("mt-2 whitespace-nowrap cursor-pointer text-center border rounded-md flex relative w-8 items-center justify-center overflow-hidden",{"hover:border-pink-500 text-gray-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 bg-white border-gray-300 dark:hover:border-pink-500/80":i.key!=e?.layout.key},{"bg-pink-100 text-pink-500  border-pink-500 dark:bg-pink-500/10 dark:border-pink-500/80 dark:text-pink-400":i.key===e?.layout.key}),children:(0,a.jsx)("div",{className:(0,o.A)("w-5 h-10 dark:bg-gray-900 bg-white border shadow rounded",i?.tw?.first,i.key===e?.layout.key?"dark:border-pink-500 border-pink-400":"border-gray-300 dark:border-gray-700")})}),i?.isPro&&!s?(0,a.jsx)("div",{className:"w-[18px] h-[18px] rounded-full flex items-center justify-center absolute bottom-[-3px] right-[-4px] bg-gray-100 dark:bg-gray-700 border border-gray-300 z-10 text-gray-500 dark:text-gray-200 dark:border-gray-600",children:(0,a.jsx)(w.A,{size:12})}):""]},i.key))})]})},A=({options:e,setOptions:t,image:s,setImage:i,saveImage:r,copyImage:o,imageRef:l})=>(0,a.jsx)(n.E,{children:(0,a.jsxs)("div",{className:"w-full",children:[(0,a.jsx)("div",{className:"text-center text-gray-500 bg-gray-200 px-4 py-1 dark:bg-gray-900 w-full text-sm",children:"Screenshot options"}),(0,a.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800 w-full",children:[(0,a.jsxs)("div",{className:"w-full items-center py-2 px-4 flex",children:[(0,a.jsx)("div",{className:"relative text-sm font-semibold dark:text-white",children:"Add Image"}),(0,a.jsx)("div",{className:"flex items-center space-x-4 ml-auto py-1",children:(0,a.jsx)(x.m_,{text:`${s?.first?"Replace":"Add"} app screenshot`,children:(0,a.jsx)(k.Z4,{image:s?.first,setImage:e=>i(t=>({...t,first:e})),id:"firstImage"})})})]}),(0,a.jsx)(k.sB,{options:e,setOptions:e=>t(t=>({...t,mobileFrame:e}))}),(0,a.jsx)(N,{options:e,setOptions:t}),(0,a.jsx)(x.Ap,{min:30,max:150,stepValue:e?.imageScale,value:e?.imageScale||80,label:"Size",onChange:e=>t(t=>({...t,imageScale:e}))}),(0,a.jsx)(x.Ap,{min:0,max:24,disabled:e?.mobileFrame?.value!=="none",label:"Roundness",defaultValue:10,value:e?.imageRoundness,stepValue:e?.imageRoundness,onChange:e=>t(t=>({...t,imageRoundness:e}))}),(0,a.jsxs)("div",{className:"flex w-full divide-x divide-gray-200 dark:divide-gray-800",children:[(0,a.jsx)(k.Ru,{options:e,setOptions:e=>t(t=>({...t,imageTilt:e}))}),(0,a.jsx)(k.yX,{options:e,setOptions:t})]})]}),(0,a.jsx)("div",{className:"text-center text-gray-500 bg-gray-200 px-4 py-1 dark:bg-gray-900 w-full text-sm",children:"Canvas options"}),(0,a.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800 w-full",children:[(0,a.jsx)(k.qU,{hideSizes:["aspect-adapt"],options:e,setOptions:e=>t(t=>({...t,canvasAspectRatio:e}))}

1),(0,a.jsx)(k.VS,{options:e,setOptions:t}),(0,a.jsx)(k.gE,{options:e,setOptions:t}),(0,a.jsx)(k.aR,{options:e,setOptions:t})]}),(0,a.jsx)(p.CR,{imageRef:l,allowScaling:!0,saveImage:r,copyImage:o})]})});var R=s(1433),_=s(7880),C=s.n(_),z=!0;let P=e=>{let{currentTemplate:t}=e,s=(0,i.useRef)(),o=(0,i.useRef)(),{c_Session:l,c_SetStats:c,isPro:d}=(0,i.useContext)(r.A),[m,g]=(0,i.useState)(!1),[u,h]=(0,i.useState)({w:null,h:null,canvasScale:1,vw:null,vh:null}),[y,f]=(0,i.useState)({}),[v,j]=(0,i.useState)({layout:{key:"style-1",tw:{first:"",second:"",third:""}},background:{active:"custom-color",gradientDirection:{tw:"bg-linear-to-b",css:"to bottom"},gradient:"from-[#f0e2cf] via-[#f4d5af] to-[#f1c2b4]",customColor:{colorStart:"#ebebeb",colorEnd:"#ebebeb"},image:""},canvasAspectRatio:{name:"App Store",value:"1 / 2",key:"aspect-app-store"},imageTilt:{angleX:0,angelY:0},watermark:{socials:{text:"",link:"yourwebsite.com",twitter:"handle",facebook:"",linkedin:"",youtube:"",instagram:""},logo:"",bgColor:"bg-gray-800/30",position:"bottom-0 justify-center",active:!1},imageScale:71,imageShadow:6,positionX:0,positionY:0,imageRoundness:18,canvasRoundness:8,imageText:{active:!1,positionX:0,positionY:0,iconSize:80,textWidth:100,lineHeight:1.1,textColor:"#111",textAlignment:"center",size:1,position:"top",title:"Add your heading here",subTitle:"→ Go to Add Text to tweak this text\n→ You can add multi-line subtext here\n→You can also add a custom icon or logo here"},mobileFrame:{variantName:"Purple",title:"iPhone 14 Pro / Purple",value:"iphone-14-pro-purple"},pattern:{value:"none",name:"None",opacity:80,shapeSize:90,blending:"overlay",linesIntensity:3,patternIntensity:30,patternRotation:0,gridColor:"#ffffff",blur:0}}),k=async({customScale:e="1x",format:t="png",fileNamePrefix:i}={})=>{let r;if(g(e=>(r=e,e)),r)return;let n=R.oR.loading((0,a.jsxs)(a.Fragment,{children:["Exporting image in ",(0,a.jsx)("span",{className:"uppercase ml-1",children:t}),"..."]}));g(!0),(0,S.vq)("template_save",{key:l?.email??""}),(0,S.i6)({ref:s?.current,customScale:e,format:t,fileNamePrefix:i,onSuccess:async()=>{if(R.oR.success("Image exported!",{id:n}),w(),g(!1),l){try{let e={type:"save",template_id:"app-store-play-store-screenshot",user_id:l?.id},t=createClient();await t.from("stats").insert({...e})}catch(e){console.error("Error saving stats",e)}c({type:"template",exportType:"save",isPro:d})}},onError:e=>{R.oR.error("Something went wrong, please try again",{id:n}),g(!1)}})},w=()=>{setTimeout(()=>{o?.current((0,S.Oe)({x:.1,y:.3})),o?.current((0,S.Oe)({x:.7,y:.9})),o?.current((0,S.Oe)({x:.8,y:.9})),o?.current((0,S.Oe)({x:.6,y:.9}))},300)};(0,i.useEffect)(()=>(N(),f({first:"/templates/demo-images/iphone-3.png"}),window.addEventListener("resize",N),()=>window.removeEventListener("resize",N)),[]);let N=()=>{let{innerWidth:e,innerHeight:t}=window;h(s=>({...s,vw:e,vh:t}))};return(0,i.useEffect)(()=>{setTimeout(()=>{h(e=>({...e,w:s?.current?.offsetWidth*window?.devicePixelRatio,h:s?.current?.offsetHeight*window?.devicePixelRatio,canvasScale:s?.current?.offsetHeight>u?.vh-100?1/(s?.current?.offsetHeight/(u?.vh-120)):1}))},300)},[u?.vw,u?.vh,v,y]),(0,a.jsxs)("div",{children:[(0,a.jsx)(C(),{className:"fixed w-full h-full pointer-events-none z-200",onInit:({confetti:e})=>o.current=e}),(0,a.jsx)(n.S,{options:v,setOptions:j,metaTitle:t?.metaTitle,name:t?.title,metaDescription:t?.metaDescription??t?.description,content:(0,a.jsx)(b,{options:v,setOptions:j,image:y,setImage:f,canvasRef:s,outputSize:u,isSaving:m}),info:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(p.Ax,{currentTemplate:t}),(0,a.jsx)(()=>{let e=[{title:"Add your mobile screenshot",content:(0,a.jsxs)("div",{children:[(0,a.jsxs)("p",{children:["On the right side of the editor, you'll see the very first option to be ",(0,a.jsx)("strong",{children:'"Add Image"'}),". You can click on the ",(0,a.jsx)(x.iM,{children:"+"})," button to add your screenshot"]}),(0,a.jsx)("br",{}),(0,a.jsxs)("p",{children:[(0,a.jsx)("strong",{children:"Note that"})," this template is optimized for mobile screenshots, so it would work best with iPhone or Android screenshots"]})]}),gradientClass:"from-green-600 to-teal-700"},{title:"Design your screenshot",content:(0,a.jsxs)("div",{children:[(0,a.jsx)("p",{children:"Use the customization options to beautify your screenshot as you like"}),(0,a.jsx)("br",{}),(0,a.jsx)("p",{children:"You can select frame including one for iPhone 14 Pro, change background gradient color, add custom text or icon, add tilt-effect and more"})]}),gradientClass:"from-blue-500 to-indigo-700"},{title:"Export your image",content:(0,a.jsxs)("div",{children:[(0,a.jsxs)("p",{children:["Use shortcut ",(0,a.jsx)(x.iM,{children:"⌘+C"}),"/"," ",(0,a.jsx)(x.iM,{children:"Ctrl+C"})," to copy beautified image as PNG file to clipboard or ",(0,a.jsx)(x.iM,{children:"⌘+S"}),"/",(0,a.jsx)(x.iM,{children:"Ctrl+S"}),"to save it to your system. You can also save image in JPEG format"]}),(0,a.jsx)("br",{}),(0,a.jsxs)("p",{children:["Pro users can export images in size upto 4K resolution using the"," ",(0,a.jsx)(x.iM,{children:"2x"})," in the output size"]})]}),gradientClass:"from-orange-500 to-pink-700"}];return(0,a.jsx)(x.mc,{width:"1080px",className:"flex items-center justify-center mt-5 relative",children:(0,a.jsxs)("div",{className:"",children:[(0,a.jsx)("h2",{className:"text-2xl md:text-4xl text-center font-black mb-2 dark:text-white font-inter",children:"How to create App Store images using Pika?"}),(0,a.jsx)("p",{className:"text-lg mb-12 text-center",children:"3 simple steps to design perfect looking App Store screenshots"}),(0,a.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-10",children:e?.map((e,t)=>(0,a.jsxs)("div",{className:"flex flex-col items-center md:items-start justify-center md:justify-start",children:[(0,a.jsx)("div",{className:"\n                    flex items-center justify-center text-black/60 dark:text-gray-300 shadow-[0_0_44px_6px_#ff89c299] dark:shadow-[0_0_44px_2px_#dc2b81ba] mb-4 w-8 h-8 rounded-lg bg-linear-to-r bg-white dark:bg-black text-sm font-code font-semibold",children:t+1}),(0,a.jsx)("div",{className:"font-semibold my-4 dark:text-white text-xl",children:e?.title}),(0,a.jsx)("div",{className:"text-gray-700 dark:text-gray-200",children:e.content})]},e.title+t))})]})})},{}),(0,a.jsx)(p.S2,{slug:t?.slug})]}),sidebar:(0,a.jsx)(A,{options:v,setOptions:j,image:y,setImage:f,copyImage:({customScale:e="1x"}={})=>{let t,a=navigator?.userAgent?.indexOf("Firefox")<0;if(g(e=>(t=e,e)),t)return;

1let i=R.oR.loading("Copying image...");g(!0),(0,S.vq)("template_save",{key:l?.email??""}),(0,S.yq)({ref:s?.current,customScale:e,onSuccess:async()=>{if(R.oR.success("Image copied to clipboard",{id:i}),w(),g(!1),l){c({type:"template",exportType:"copy",isPro:d});try{let e={type:"copy",template_id:"app-store-play-store-screenshot",user_id:l?.id},t=createClient();await t.from("stats").insert({...e})}catch(e){console.error("Error saving stats",e)}}},onError:e=>{console.log("Err",e),a?R.oR.error("Something went wrong, please try again",{id:i}):R.oR.error("Firefox doesn't support copying image, please use save",{id:i}),g(!1)}})},saveImage:k,isPro:d,imageRef:s?.current})})]})}}},e=>{e.O(0,[4558,8689,407,7880,9539,303,1958,3771,5642,5198,6845,2075,2909,4510,636,6593,8792],()=>e(e.s=59255)),_N_E=e.O()}]);