https://pika.style/_next/static/chunks/2075-35c2595fb1dee575.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2075,9389],{12075:(e,t,a)=>{a.d(t,{yQ:()=>M,CR:()=>u,xW:()=>_,Ax:()=>P,Gr:()=>U,S2:()=>F,QK:()=>W});var r=a(75038),s=a(76430),l=a(2272),i=a(34530),o=a(41075),n=a(19297),m=a(59717),d=a(85315),c=a(80795),x=a(76598),p=a(72651),h=a(1433);let g={svg:"SVG",webp:"WebP"},u=({imageRef:e,allowScaling:t,copyImage:a,saveImage:u,saveImageWithoutBackground:f})=>{let{isPro:j,c_HandleNonPro:b,c_Session:N,c_Settings:v,c_StripeSub:y,c_CloudLibrary:w}=(0,s.useContext)(l.A),[k,P]=(0,s.useState)("1x"),S=e=>{let t=g[e];return!!j||!t||(b({text:`Upgrade to Pro to save images in ${t} format`}),(0,p.u4)({event:"\uD83E\uDD16 Flow",meta:N?.email?`${t} export option → Signup modal(${N?.email})`:`${t} export option → Signup modal`}),!1)};(0,x.vC)("ctrl+c, meta+c",e=>{e.preventDefault(),a({customScale:k})},[k,P,a,j]),(0,x.vC)("ctrl+s, meta+s",e=>{e.preventDefault(),u({format:"png",customScale:k,fileNamePrefix:v?.fileNamePrefix})},[k,P,u,j,v]),(0,x.vC)("ctrl+j, meta+j",e=>{e.preventDefault(),u({format:"jpeg",customScale:k,fileNamePrefix:v?.fileNamePrefix})},[k,P,u,j,v]),(0,x.vC)("ctrl+g, meta+g",e=>{e.preventDefault(),S("svg")&&u({format:"svg",customScale:k,fileNamePrefix:v?.fileNamePrefix})},[k,P,u,j,N,v]),(0,x.vC)("ctrl+i, meta+i",e=>{e.preventDefault(),S("webp")&&u({format:"webp",customScale:k,fileNamePrefix:v?.fileNamePrefix})},[k,P,u,j,N,v]);let _=async()=>{if(!e)return;if(!N?.id||!j)return void b({text:"Upgrade to Pro to upload and share image links"});if(w?.data?.Contents?.length>=y?.planMeta?.max_cloud_images)return void h.oR.error("You have reached the limit of 100 images in your library. Please delete some images to add more or upgrade to higher plan");let t=h.oR.loading("Uploading image...");try{await (0,p.yN)({ref:e});let a=await (0,p.yN)({ref:e}),r=e=>h.oR.error(e||"Could not upload the image, please try again",{id:t}),s=await (0,p.ku)(a),l="image/webp"===s.type?"webp":"png",i=await fetch("/api/storage/createUpload",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({format:l})}),o=await i.json().catch(()=>null);if(!i.ok||!o?.uploadUrl)return r(o?.error);if(!(await fetch(o.uploadUrl,{method:"PUT",headers:o.headers,body:s})).ok)return r();let n=await fetch("/api/storage/confirmUpload",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:o.id,format:o.format})}),m=await n.json().catch(()=>null),d=m?.shortLink?.from;if(!n.ok||!d)return r(m?.error);let c=`https://pika.style/cloud/${d}`;try{await navigator.clipboard.writeText(c),h.oR.success("Added to library and link copied to clipboard",{id:t})}catch(e){h.oR.success(`Added to library: ${c}`,{id:t})}}catch(e){h.oR.error("Could not upload the image, please try again",{id:t})}};return(0,r.jsxs)("div",{className:"dark:bg-gray-900/70 dark:border-gray-800 py-2 border-t border-gray-200 w-full lg:sticky fixed bottom-0 left-0 z-10 md:z-0 bg-white backdrop-blur-lg md:rounded-b-xl px-4 pb-4 md:py-2 flex items-center",children:[t?(0,r.jsx)(i.m_,{text:(0,r.jsxs)("div",{className:"p-2",children:[(0,r.jsx)("strong",{children:"Select Output size"}),(0,r.jsxs)("div",{className:"flex flex-col",children:[(0,r.jsx)("div",{children:"1x: HD resolution upto 1920px"}),(0,r.jsx)("div",{children:"2x: 4K upto 3840px"})]})]}),children:(0,r.jsx)(i.l6,{value:k||"1x",className:"max-w-[41px] w-full mr-6 px-0",inputClassName:"text-xs",options:[{title:"1x (HD resolution)",value:"1x"},{title:`${j?"2x (upto 4K resolution)":"2x (upto 4K resolution, Pro only)"}`,value:"2x"}],onChange:e=>{if("1x"!==e.target.value&&!j){b({text:"Upgrade to Pro to enable 2x exports"}),(0,p.u4)({event:"\uD83E\uDD16 Flow",meta:N?.email?`4K export option → Signup modal(${N?.email})`:"4K export option → Signup modal"});return}P(e.target.value)}})}):"",(0,r.jsxs)("div",{className:"grid w-full grid-cols-[1.3fr_1fr_1fr] gap-x-2 text-sm items-center",children:[(0,r.jsx)(i.m_,{text:"Add image to library and copy link for sharing",children:(0,r.jsxs)(i.$n,{as:"div",variant:"ternary",onClick:async()=>{await _()},className:"min-h-[42px] shadow-[0_0_7px_rgba(0,0,0,0.05)] font-semibold justify-start! border border-gray-200! dark:border-gray-700/80! dark:bg-gray-900!",children:[j?(0,r.jsx)(m.A,{size:16,className:"mr-1"}):(0,r.jsx)(n.A,{size:16,className:"mr-1"}),"Link"]})}),(0,r.jsx)(i.m_,{text:"Copy PNG image to clipboard",hasShortcut:"⌘ C",children:(0,r.jsxs)(i.$n,{as:"div",variant:"ternary",onClick:()=>{a({customScale:"2x"===k?"2x":""})},className:"min-h-[42px] shadow-[0_0_7px_rgba(0,0,0,0.05)] font-semibold justify-start! border border-gray-200! dark:border-gray-700/80! dark:bg-gray-900!",children:[(0,r.jsx)(d.A,{size:16,className:"mr-1"}),"Copy"]})}),(0,r.jsxs)("div",{className:"flex items-center w-full max-w-full",children:[(0,r.jsx)(i.m_,{text:"Save image as PNG",hasShortcut:"⌘ S",triggerClass:"w-full",children:(0,r.jsxs)(i.$n,{as:"div",variant:"ternary",onClick:()=>{u({customScale:"2x"===k?"2x":"",fileNamePrefix:v?.fileNamePrefix})},className:"rounded-l-lg rounded-r-none! min-h-[42px] shadow-[0_0_7px_rgba(0,0,0,0.05)] font-semibold justify-start! border border-gray-200! dark:border-gray-700/80! dark:bg-gray-900!",children:[(0,r.jsx)(c.A,{size:16,className:"mr-1"}),(0,r.jsx)("span",{children:"Save"})]})}),(0,r.jsx)(i.ms,{trigger:(0,r.jsx)(i.$n,{className:"rounded-r-lg rounded-l-none! text-sm px-3 border-l-0 min-h-[42px] relative top-[3px] shadow-[0_0_7px_rgba(0,0,0,0.05)] font-semibold justify-start! border  border-gray-200! dark:border-gray-700/80! dark:bg-gray-900!",children:(0,r.jsx)(o.A,{})}),items:[{title:(0,r.jsxs)(r.Fragment,{children:["as PNG",(0,r.jsx)(i.iM,{className:"ml-auto",children:"⌘"}),(0,r.jsx)(i.iM,{className:"ml-1",children:"S"})]}),onClick:()=>{u({customScale:"2x"===k?"2x":"",fileNamePrefix:v?.fileNamePrefix})}},{title:(0,r.jsxs)(r.Fragment,{children:["as JPG",(0,r.jsx)(i.iM,{className:"ml-auto",children:"⌘"}),(0,r.jsx)(i.iM,{className:"ml-1",children:"J"})]}),onClick:()=>{u({format:"jpeg",customScale:"2x"===k?"2x":"",fileNamePrefix:v?.fileNamePrefix})}},{icon:j?"":(0,r.jsx)(n.A,{size:14,className:"opacity-50"}),title:(0,r.jsxs)(r.Fragment,{children:["as SVG",(0,r.jsx)(i.iM,{className:"ml-auto",children:"⌘"}),(0,r.jsx)(i.iM,{className:"ml-1",children:"G"})]}),onClick:()=>{S("svg")&&u({format:"svg",customScale:"2x"===k?"2x":"",fileNamePrefix:v?.fileNamePrefix})}},{icon:j?"":(0,r.jsx)(n.A,{size:14,className:"opacity-50"}),title:(0,r.jsxs)(r.Fragment,{children:["as WebP",(0,r.jsx)(i.iM,{className:"ml-auto",children:"⌘"}),(0,r.jsx)(i.iM,{className:"ml-1",children:"I"})]}),onClick:()=>{S("webp")&&u({format:"webp",customScale:"2x"===k?"2x":"",fileNamePrefix:v?.fileNamePrefix})}},{icon:"",title:(0,r.jsx)(r.Fragment,{children:"without background"}),hide:!f,onClick:()=>{f({format:"png",customScale:"2x"===k?"2x":"",fileNamePrefix:v?.fileNamePrefix})}}]})]})]})]})};var f=a(45609),j=a.n(f),b=a(81292),N=a(32864),v=a(36845),y=a(93320),w=a(73753),k=a(56725);let P=({currentTemplate:e})=>(0,r.jsxs)("div",{className:"py-10 md:py-20 relative bg-linear-to-b from-white dark:from-[#111]",children:[(0,r.jsx)(k.bV,{openGraph:{images:[{url:(0,b.o)({title:e?.title,imageUrl:e?.src}),width:1200,height:630,alt:"Pika – Create Screenshots and Mockups"}]}}),(0,r.jsx)(i.mc,{width:"1080px",className:"grid grid-cols-1 lg:grid-cols-[70%_30%] items-start gap-x-10",children:(0,r.jsxs)("div",{children:[(0,r.jsxs)("ul",{itemScope:!0,itemType:"https://schema.org/BreadcrumbList","aria-label":"Breadcrumbs",className:"flex items-center mb-5 text-gray-500 dark:text-gray-400 font-inter",children:[(0,r.jsxs)("li",{itemProp:"itemListElement",itemScope:!0,itemType:"https://schema.org/ListItem",children:[(0,r.jsxs)(j(),{href:"/","aria-label":"Home page",itemProp:"item",children:[(0,r.jsx)(y.A,{weight:"fill",className:"opacity-70"}),(0,r.jsx)("span",{itemProp:"name",className:"hidden",children:"Pika"})]}),(0,r.jsx)("meta",{itemProp:"position",content:"1"})]}

1),(0,r.jsx)(w.A,{size:10,className:"mx-2"}),(0,r.jsxs)("li",{itemProp:"itemListElement",itemScope:!0,itemType:"https://schema.org/ListItem",children:[(0,r.jsx)(j(),{itemScope:!0,itemType:"https://schema.org/WebPage",itemProp:"item",itemID:"/templates",href:"/templates",className:"hover:underline text-sm text-gray-600 dark:text-gray-500",children:(0,r.jsx)("span",{itemProp:"name",children:"Screenshot Templates"})}),(0,r.jsx)("meta",{itemProp:"position",content:"2"})]}),(0,r.jsx)(w.A,{size:10,className:"mx-2"}),(0,r.jsxs)("li",{itemProp:"itemListElement",itemScope:!0,itemType:"https://schema.org/ListItem",children:[(0,r.jsx)(j(),{itemScope:!0,itemType:"https://schema.org/WebPage",itemProp:"item",itemID:`/templates/${e?.slug}`,href:`/templates/${e?.slug}`,className:"hover:underline text-sm text-gray-600 dark:text-gray-500",children:(0,r.jsx)("span",{itemProp:"name",children:e?.title})}),(0,r.jsx)("meta",{itemProp:"position",content:"3"})]})]}),(0,r.jsx)("h1",{className:"text-3xl lg:text-5xl mt-2 font-black dark:text-white font-sans",children:(0,r.jsx)(j(),{href:`/templates/${e?.slug}`,children:e?.title})}),(0,r.jsx)("div",{className:"flex mt-5 flex-wrap",children:e?.tags?.map(e=>(0,r.jsx)("div",{className:"mr-3 rounded-xl mb-2 bg-gray-200 text-xs text-gray-600 px-2 dark:bg-gray-800 dark:text-gray-400/80 font-mono shadow-inner",children:e},e))}),(0,r.jsx)("p",{className:"text-base lg:text-xl mt-5 max-w-[620px]",children:e?.description}),(0,r.jsx)("div",{className:"mt-12",children:(0,r.jsx)("div",{className:"h-px w-[30%] bg-gray-100 dark:bg-gray-800"})}),(0,r.jsx)("div",{className:"flex mt-5 md:mt-12",children:(0,r.jsx)(U,{link:`https://pika.style/templates/${e?.slug}`,title:`${e?.title} Template`})})]})}),(0,r.jsx)(N.G$,{guide:v.o[e?.slug]}),(0,r.jsx)(N.a2,{}),(0,r.jsx)(N.lX,{}),(0,r.jsx)(N.LT,{}),(0,r.jsx)("div",{className:"pt-1",children:(0,r.jsx)(N.k$,{})}),(0,r.jsx)("div",{className:"mt-4 md:my-32",children:(0,r.jsx)(N.f,{})})]});var S=a(90026);let _=({template:e})=>{let{isPro:t}=(0,s.useContext)(l.A);return(0,r.jsxs)("div",{className:"w-full max-w-full relative group duration-200 ease-in-out",children:[e?.isPaid&&!t?(0,r.jsxs)("div",{className:"absolute px-2 top-[-2%] right-[-2%] bg-linear-to-br from-purple-600 via-purple-500 to-purple-700 text-sm text-purple-50 rounded-full flex items-center justify-center shadow z-10",children:[(0,r.jsx)(S.A,{size:18,className:"pr-1"}),"Pro"]}):"",(0,r.jsx)("div",{className:"h-[200px] bg-white shadow-[rgba(0,0,0,0.1)_0_1px_10px] rounded-xl mb-5 flex items-center justify-center relative overflow-hidden",children:e?.src?(0,r.jsx)("div",{className:"object-contain h-full flex items-center justify-center max-w-[80%]",children:(0,r.jsx)("img",{loading:"lazy",alt:"Screenshot",className:"relative object-contain max-h-full md:group-hover:scale-[1.08] duration-100 drop-shadow-[0_2px_20px_rgba(0,0,0,0.15)] rounded-xl",src:`${e?.src}`})}):""}),(0,r.jsx)("h3",{className:"text-xl font-semibold mb-3 text-black dark:text-white font-inter",children:e?.title}),(0,r.jsx)("div",{className:"flex flex-wrap",children:e?.tags?.map((e,t)=>(0,r.jsx)("div",{className:"mr-3 rounded-xl mb-2 bg-gray-100 text-xs text-gray-600 px-2 dark:bg-gray-800 dark:text-gray-400/80 font-mono shadow-inner",children:e},e+t))})]})};var C=a(1150),$=a(73293),A=a(44376),z=a(57351),T=a(1895);let U=({title:e,link:t})=>(0,r.jsxs)("div",{className:"flex items-center",children:[(0,r.jsx)("div",{className:"mr-3 text-sm",children:"Share this template →"}),(0,r.jsxs)("div",{className:"flex items-center space-x-3",children:[(0,r.jsx)(i.m_,{text:"Copy link to clipboard",children:(0,r.jsx)("div",{className:"cursor-pointer",onClick:()=>{navigator.clipboard.writeText(t),h.oR.success(`Copied template link to clipboard 😊`)},children:(0,r.jsx)(C.A,{size:24})})}),(0,r.jsx)(i.m_,{text:"Share on Facebook",children:(0,r.jsx)(j(),{href:`https://www.facebook.com/sharer/sharer.php?u=${t}&quote=${e?.replace(" ","+")}!`,target:"_blank",children:(0,r.jsx)($.A,{size:24})})}),(0,r.jsx)(i.m_,{text:"Share on Twitter",children:(0,r.jsx)(j(),{href:`https://twitter.com/intent/tweet?text=${e?.replace(" ","%20")}%20→%20${t}!`,target:"_blank",children:(0,r.jsx)(A.A,{size:24})})}),(0,r.jsx)(i.m_,{text:"Share on LinkedIn",children:(0,r.jsx)(j(),{href:`https://www.linkedin.com/sharing/share-offsite/?url=${t}`,target:"_blank",children:(0,r.jsx)(z.A,{size:24})})}),(0,r.jsx)(i.m_,{text:"Share on WhatsApp",children:(0,r.jsx)(j(),{href:`whatsapp://send?text=${e} → ${t}`,target:"_blank",children:(0,r.jsx)(T.A,{size:24})})})]})]});var L=a(62260);let M=({onHide:e,tooltipText:t})=>{let{isPro:a,c_HandleNonPro:o,c_Session:n}=(0,s.useContext)(l.A);return a?"":(0,r.jsx)("div",{className:"absolute bottom-[25px] leading-none left-[50%] translate-x-[-50%] text-[13px] font-inter group z-50",children:(0,r.jsx)(i.m_,{text:(0,r.jsx)("div",{className:"max-w-[250px]",children:t||"Upgrade to Pro to remove this watermark"}),children:(0,r.jsxs)("div",{className:"text-black relative mb-px px-2 py-px whitespace-nowrap cursor-pointer",onClick:()=>{o({showModal:!0}),(0,p.u4)({event:"\uD83E\uDD16 Flow",meta:n?.email?`Remove Pika Watermark → Signup modal(${n?.email})`:"Remove Pika Watermark → Signup modal"})},children:[e?(0,r.jsx)("span",{onClick:t=>{t.stopPropagation(),e()},className:"hidden group-hover:flex absolute top-[-35%] right-[-15%] w-4 h-4 rounded-full items-center justify-center bg-white text-gray-500 z-10",children:(0,r.jsx)(L.A,{size:12,weight:"bold"})}):"",(0,r.jsx)("span",{className:"absolute top-[-4px] left-[-2px] w-[calc(100%+4px)] h-[calc(100%+8px)] rounded-lg bg-white/60 backdrop-blur-md"}),(0,r.jsxs)("span",{className:"relative top-px",children:[(0,r.jsx)("span",{className:"opacity-50",children:"designed in"}),"",(0,r.jsxs)("span",{className:"opacity-60 font-semibold",children:[(0,r.jsx)("img",{src:"/icons/pika-watermark-image.png",className:"w-4 h-4 inline-flex ml-[6px] mr-1 mt-[-2px]",alt:"Pika Logo"}),"Pika.style"]})]})]})})})};var R=a(99793),D=a(15642);let F=({slug:e})=>(0,r.jsx)(R.A,{items:D.nB[e]});var G=a(92376),I=a(71623),E=a(15198);let W=({title:e,subTitle:t,gridClass:a,toShow:s})=>{let l=(0,G.useRouter)();return(0,r.jsx)("div",{className:"mt-20 md:mt-32",children:(0,r.jsxs)(i.mc,{width:"1280px",className:"relative",children:[(0,r.jsxs)("div",{className:"mb-8 md:mb-12 relative",children:[e?(0,r.jsx)(j(),{href:"/templates",children:(0,r.jsx)("h2",{className:"text-2xl md:text-4xl font-black text-center dark:text-white font-inter",children:e??"Introducing Mockup Templates"})}):"",(0,r.jsxs)("p",{className:"text-lg mt-1 text-center mb-12 max-w-[600px] mx-auto",children:["No need to spend hours in Figma or Photoshop."," ",(0,r.jsx)("br",{className:"hidden md:inline-flex"}),"Pika gives you tools to design great mockups and screenshots easily"]}),(0,r.jsx)("div",{})]}),(0,r.jsx)("div",{className:(0,I.A)("grid relative","",a??"grid-cols-1 md:grid-cols-2 lg:grid-cols-3"),children:E.ff?.filter(e=>e.link!==l?.asPath)?.slice(0,s||6)?.reverse()?.map(e=>(0,r.jsxs)(j(),{href:e?.link,className:"flex flex-col items-center justify-start border border-gray-200 dark:border-gray-800 text-left group relative p-6 md:p-10 -mt-px -mr-px bg-white dark:bg-[#111]",children:[(0,r.jsx)("span",{className:(0,I.A)("max-h-[250px] h-full flex rounded-t-xl items-center justify-center w-full drop-shadow-[0_2px_10px_rgba(0,0,0,0.2)]"),children:(0,r.jsx)("img",{loading:"lazy",src:e.src,alt:e.title,className:(0,I.A)("duration-100 w-full object-contain rounded-lg h-full")})}),(0,r.jsxs)("span",{className:"w-full pt-5",children:[(0,r.jsx)("h3",{className:"text-xl md:text-2xl font-inter font-extrabold mb-2 dark:text-white border-b-2 border-transparent group-hover:border-gray-300 dark:group-hover:border-gray-700 inline-flex",children:e.title}),e?.description?(0,r.jsx)("p",{className:"text-base md:text-lg mb-4 opacity-60",children:e?.description}):"",(0,r.jsx)(i.$n,{variant:"secondary",className:"text-sm md:text-base mt-3 md:mt-6",children:"Use template →"})]})]},e.title))})]})})};a(79389)},79389:(e,t,a)=>{a.r(t),a.d(t,{default:()=>p});var r=a(75038),s=a(76430),l=a(2272),i=a(34530),o=a(70081),n=a(45609),m=a.n(n),d=a(76598),c=a(72651);let x=({c_ToggleTemplatesExplorer:e})=>(0,r.jsx)("div",{className:"flex flex-nowrap gap-4",children:o.A?.map(t=>(0,r.jsx)("div",{className:"flex flex-nowrap gap-4",children:t?.templates?.map(t=>(0,r.jsxs)(m(),{className:"group",href:`/templates/${t?.slug}?via=templates-explorer`,onClick:()=>e(!1),children:[(0,r.jsx)("div",{className:"w-[180px] md:w-[240px] h-[120px] md:h-[160px] flex items-center justify-center bg-gray-100 rounded-lg mb-2 p-2",children:(0,r.jsx)("img",{src:t?.src,alt:t?.title,className:"w-full h-full object-contain drop-shadow-lg"})}),(0,r.jsxs)("h3",{className:"font-inter font-medium group-hover:underline decoration-1 underline-offset-[3px] dark:text-white",children:[t?.title?.slice(0,22),t?.title?.length>22?"...":""]})]},t?.slug))},t?.title))}),p=()=>{let{c_TemplatesExplorer:e,c_ToggleTemplatesExplorer:t}=(0,s.useContext)(l.A);return(0,s.useEffect)(()=>{!0===e&&(0,c.u4)({event:"⏭️ Template Explorer"})},[e]),(0,d.vC)("period",a=>{"."===a.key&&(a.preventDefault(),t(!e))},[e]),(0,r.jsx)("div",{children:(0,r.jsx)(i.Tr,{open:e,onOpenChange:t,className:"w-full max-w-[1280px] mx-auto",content:(0,r.jsxs)("div",{className:"dark:bg-gray-900 bg-white h-full pt-6 px-6",children:[(0,r.jsx)("div",{className:"border-b border-gray-100 dark:border-gray-800 flex gap-4 mb-4",children:(0,r.jsx)("h3",{className:"text-lg dark:text-white md:text-xl font-inter font-medium -mb-px border-b border-black dark:border-white",children:"Editor Templates"})}),(0,r.jsx)("div",{className:"overflow-scroll pb-6 flex flex-nowrap gap-4",children:(0,r.jsx)(x,{c_ToggleTemplatesExplorer:t})})]})})})}},81292:(e,t,a)=>{a.d(t,{U:()=>l,o:()=>i});let r=e=>e?/^https?:\/\//.test(e)?e:`https://pika.style${e}`:"",s=(e,t)=>{let a=new URLSearchParams;for(let[e,r]of Object.entries(t))r&&a.set(e,r);let r=a.toString();return r?`${e}&${r}`:e},l=({title:e,description:t,authorName:a,authorPhoto:l}={})=>s("https://api.orshot.com/v1/studio/dynamic-url/pika-blog-og.png?templateId=20200&sign=1349901470cd2516",{title:e,description:t,author_name:a,author_photo:r

1(l)}),i=({title:e,imageUrl:t}={})=>s("https://api.orshot.com/v1/studio/dynamic-url/pika-template-og.png?templateId=20201&sign=219bac02ad785c1d",{title:e,image:r(t)})}}]);