https://www.navattic.com/_next/static/chunks/3247-7d8e23b43840ae17.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3247],{26428:(e,s,a)=>{a.d(s,{A:()=>r});var t=a(37876),l=a(10720);let r=function(){let e={initial:{opacity:.2,y:-3},animate:{opacity:1,y:0},exit:{opacity:.2,y:-3}};return(0,t.jsxs)(l.P.svg,{className:"home-hero-iframe-loader",fill:"none",height:"32",viewBox:"0 0 32 32",width:"32",xmlns:"http://www.w3.org/2000/svg",children:[(0,t.jsx)(l.P.path,{d:"M25.7812 5.8075C23.5161 5.8075 21.5334 7.32873 20.9468 9.51659C20.9258 9.59519 20.9764 9.67507 21.0566 9.68867C22.826 9.98856 24.6808 9.96791 26.7634 9.09746C27.0395 8.98207 27.2396 8.73947 27.3171 8.45044L27.9971 5.91388C28.0115 5.86021 27.971 5.8075 27.9154 5.8075H25.7812Z",fill:"#03020F",initial:"initial",animate:"animate",exit:"exit",variants:e,transition:{repeat:1/0,repeatType:"reverse",duration:.5,delay:.3,ease:"linear"}}),(0,t.jsx)(l.P.path,{d:"M26.4854 11.0039C26.5509 10.9743 26.6255 11.0326 26.6069 11.1021L25.689 14.5282C25.6118 14.8162 25.409 15.0599 25.1343 15.1757C18.3477 18.035 13.9951 11.807 7.14476 14.9043C7.07919 14.934 7.00461 14.8757 7.02323 14.8062L7.94114 11.3801C8.0183 11.0921 8.22108 10.8484 8.49586 10.7326C15.2825 7.87327 19.635 14.1013 26.4854 11.0039Z",fill:"#03020F",initial:"initial",animate:"animate",exit:"exit",variants:e,transition:{repeat:1/0,repeatType:"reverse",duration:.5,delay:.2,ease:"linear"}}),(0,t.jsx)(l.P.path,{d:"M24.8552 17.0883C24.9208 17.0587 24.9954 17.117 24.9768 17.1865L24.0589 20.6126C23.9817 20.9006 23.7789 21.1443 23.5041 21.2601C16.7176 24.1194 12.365 17.8914 5.51464 20.9888C5.44907 21.0184 5.37449 20.9601 5.39311 20.8906L6.31102 17.4645C6.38819 17.1765 6.59096 16.9328 6.86574 16.817C13.6523 13.9577 18.0049 20.1857 24.8552 17.0883Z",fill:"#03020F",initial:"initial",animate:"animate",exit:"exit",variants:e,transition:{repeat:1/0,repeatType:"reverse",duration:.5,delay:.1,ease:"linear"}}),(0,t.jsx)(l.P.path,{d:"M6.21512 26.1852C8.48235 26.1852 10.4669 24.6625 11.0539 22.4725C11.075 22.3937 11.024 22.3136 10.9435 22.3

1002C9.17467 22.0066 7.32202 22.0269 5.24695 22.8771C4.96779 22.9915 4.76499 23.2355 4.68689 23.5269L4.00293 26.0788C3.98854 26.1325 4.02899 26.1852 4.08455 26.1852H6.21512Z",fill:"#03020F",initial:"initial",animate:"animate",exit:"exit",variants:e,transition:{repeat:1/0,repeatType:"reverse",duration:.5,delay:0,ease:"linear"}})]})}},86719:(e,s,a)=>{a.d(s,{c:()=>x});var t=a(37876),l=a(90698),r=a(10720),i=a(14232);let n=e=>{let{websiteUrl:s,copy:a,ctaText:l,type:r,currentStep:i,totalSteps:n}=e,c=s?s.replace(/^https?:\/\//,"").replace(/^www\./,"").split("/")[0]:"";return(0,t.jsx)("div",{className:"relative mx-auto",children:(0,t.jsxs)("div",{className:"mx-auto z-1 w-full sm:w-[80%] md:w-[500px] h-auto bg-white rounded-lg md:rounded-xl border-[1.5px] border-gray-200 relative shadow-[0px_0px_20px_0px_rgba(107,114,128,0.1)] overflow-hidden",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between px-2 py-1 md:px-4 md:py-2 border-b border-gray-200",children:[(0,t.jsxs)("span",{className:"flex gap-1",children:[(0,t.jsx)("span",{className:"size-2 bg-gray-200 rounded-full"}),(0,t.jsx)("span",{className:"size-2 bg-gray-200 rounded-full"}),(0,t.jsx)("span",{className:"size-2 bg-gray-200 rounded-full"})]}),(0,t.jsx)("span",{className:"text-[9px] md:text-xs font-semibold text-gray-500 select-none",children:c?"".concat(c,"/demo"):"product-demo.com"}),(0,t.jsxs)("span",{className:"flex gap-1 opacity-0",children:[(0,t.jsx)("span",{className:"size-2 bg-gray-200 rounded-full"}),(0,t.jsx)("span",{className:"size-2 bg-gray-200 rounded-full"}),(0,t.jsx)("span",{className:"size-2 bg-gray-200 rounded-full"})]})]}),"Modal"===r&&(0,t.jsx)(o,{copy:a,ctaText:l}),"Tooltip"===r&&(0,t.jsx)(d,{copy:a,currentStep:i,totalSteps:n}),(0,t.jsxs)("div",{className:"relative flex items-start justify-between flex-col p-4 pt-3 md:p-6 md:pt-4 gap-3 sm:gap-4",children:[(0,t.jsxs)("div",{className:"relative w-full flex items-center justify-start gap-4",children:[(0,t.jsx)("span",{className:"h-[10px] w-[20%] bg-gray-100 rounded-full"}),(0,t.jsx)("span",{className:"h-[10px] w-[20%] bg-gray-100 rounded-full"}),(0,t.jsx)("span",{className:"h-[10px] w-[20%] bg-gray-100 rounded-full"})]}),(0,t.jsxs)("div",{className:"flex gap-3 md:gap-5 flex-row items-start justify-between w-full relative",children:[(0,t.jsxs)("div",{className:"flex-1 relative border-2 border-gray-50 rounded-lg md:rounded-xl px-2 py-3 flex flex-col gap-2",children:[(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[30%] bg-gray-100 rounded-full"}),(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[70%] bg-gray-200 rounded-full"})]}),(0,t.jsxs)("div",{className:"flex-1 relative border-2 border-gray-50 rounded-lg md:rounded-xl px-2 py-3 flex flex-col gap-2",children:[(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[30%] bg-gray-100 rounded-full"}),(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[70%] bg-gray-200 rounded-full"})]})]}),(0,t.jsxs)("div",{className:"w-full flex-1 relative border-2 border-gray-50 rounded-lg md:rounded-xl px-2 py-3 flex flex-col gap-4",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between gap-4",children:[(0,t.jsx)("span",{className:"aspect-square size-8 bg-gray-100 rounded-full"}),(0,t.jsxs)("div",{className:"flex-1 flex flex-row gap-1",children:[(0,t.jsxs)("div",{className:"flex-1 flex flex-col gap-1",children:[(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[50%] bg-gray-100 rounded-full"}),(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[70%] bg-gray-100 rounded-full"})]}),(0,t.jsxs)("div",{className:"flex-1 flex flex-col gap-1",children:[(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[50%] bg-gray-100 rounded-full"}),(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[70%] bg-gray-100 rounded-full"})]}),(0,t.jsxs)("div",{className:"flex-1 flex flex-col gap-1",children:[(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[50%] bg-gray-100 rounded-full"}),(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[70%] bg-gray-100 rounded-full"})]})]})]}),(0,t.jsxs)("div",{className:"flex items-center justify-between gap-4",children:[(0,t.jsx)("span",{className:"aspect-square size-8 bg-gray-100 rounded-full"}),(0,t.jsxs)("div",{className:"flex-1 flex flex-row gap-1",children:[(0,t.jsxs)("div",{className:"flex-1 flex flex-col gap-1",children:[(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[50%] bg-gray-100 rounded-full"}),(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[70%] bg-gray-100 rounded-full"})]}),(0,t.jsxs)("div",{className:"flex-1 flex flex-col gap-1",children:[(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[50%] bg-gray-100 rounded-full"}),(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[70%] bg-gray-100 rounded-full"})]}),(0,t.jsxs)("div",{className:"flex-1 flex flex-col gap-1",children:[(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[50%] bg-gray-100 rounded-full"}),(0,t.jsx)("span",{className:"h-2 md:h-[12px] w-[70%] bg-gray-100 rounded-full"})]})]})]})]})]})]})})};

1function o(e){let{copy:s,ctaText:a}=e,n=s.replace(/^['"]+|['"]+$/g,""),o=null==a?void 0:a.replace(/^['"]+|['"]+$/g,""),d=i.useRef(null),c=(0,l.W)(d,{once:!0,amount:.3});return(0,t.jsx)(r.P.div,{ref:d,initial:{opacity:0},animate:c?{opacity:1}:{opacity:0},transition:{duration:.5,delay:.75},className:"absolute inset-0 z-10 opacity-0 bg-white/10 backdrop-blur-[1px]",children:(0,t.jsx)("div",{className:"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2",children:(0,t.jsxs)(r.P.div,{initial:{opacity:0,scale:.9,y:20},animate:c?{opacity:1,scale:1,y:0}:{opacity:0,scale:.9,y:20},transition:{duration:.25,delay:1},className:"relative flex flex-col gap-4 p-4 bg-blue-50 rounded-lg border border-blue-300 z-10 min-w-[250px] md:min-w-[300px]",children:[(0,t.jsx)("div",{className:"text-xs font-normal text-gray-700 select-none",children:n}),(0,t.jsx)("div",{className:"flex gap-2",children:(0,t.jsx)("span",{className:"flex items-center justify-center text-xs text-white border border-blue-500 bg-blue-500 rounded-md px-2 py-0.5 select-none",children:a?o:"Next"})})]})})})}function d(e){let{copy:s,currentStep:a,totalSteps:n}=e,o=s.replace(/^['"]+|['"]+$/g,""),d=i.useRef(null),c=(0,l.W)(d,{once:!0,amount:.3}),p=[{wrapperPos:"absolute md:top-4 top-5 right-2 md:right-6 flex-col-reverse",chevronPos:"top-0 left-[25%]"},{wrapperPos:"absolute top-6 md:top-8 left-2 md:left-3 flex-col",chevronPos:"top-0 left-4 md:left-8 rotate-180"},{wrapperPos:"absolute top-6 md:top-8 left-4 md:left-8 flex-col",chevronPos:"top-0 left-[25%] md:left-[35%] rotate-180"},{wrapperPos:"absolute top-6 md:top-8 right-1 md:right-6 flex-col",chevronPos:"top-0 left-[55%] md:left-[45%] rotate-180"}],x=a?p[(a-1)%p.length]:p[0];return(0,t.jsx)("div",{className:"z-10 max-w-[250px] md:max-w-[300px] ".concat(x.wrapperPos),ref:d,children:(0,t.jsxs)(r.P.div,{initial:{opacity:0,scale:.9,y:20},animate:c?{opacity:1,scale:1,y:0}:{opacity:0,scale:.9,y:20},transition:{duration:.25,delay:1},className:"relative flex z-10 min-w-[250px] md:min-w-[300px] ".concat(x.wrapperPos),children:[(0,t.jsx)("div",{className:"relative w-full h-[10px]",children:(0,t.jsx)("svg",{className:"absolute mx-auto ".concat(x.chevronPos),width:"21",height:"11",viewBox:"0 0 21 11",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M11.3239 10.1861C10.9272 10.6225 10.2408 10.6225 9.84404 10.1861L0.583985 1.19209e-07L20.584 1.19209e-07L11.3239 10.1861Z",fill:"#A3CFF7"})})}),(0,t.jsxs)("div",{className:"flex flex-col bg-blue-50 rounded-lg border border-blue-300",children:[(0,t.jsx)("div",{className:"p-4 pb-4 text-xs font-normal text-gray-700 select-none",children:o}),(0,t.jsxs)("div",{className:"p-4 py-3 flex justify-between items-center border-t border-blue-200",children:[(0,t.jsx)("span",{className:"flex items-center justify-center text-xs text-gray-700 bg-white border border-gray-200 rounded-md px-2 py-0.5 select-none",children:"Back"}),(0,t.jsxs)("span",{className:"text-xs text-gray-400",children:[a," of ",n]}),(0,t.jsx)("span",{className:"flex items-center justify-center text-xs text-white border border-blue-500 bg-blue-500 rounded-md px-2 py-0.5 select-none",children:"Next"})]})]})]})})}var c=a(65480),p=a(67992);function x(e){var s;let{step:a,currentStep:l,totalSteps:r,websiteUrl:i}=e;return(0,t.jsx)("div",{className:"bg-white rounded-xl md:rounded-2xl shadow-md border border-gray-200 overflow-hidden",children:(0,t.jsxs)("div",{className:"",children:[(0,t.jsxs)("div",{className:"px-4 py-3 md:px-6 md:py-4 flex items-center space-x-3 border-b border-gray-200",children:[(0,t.jsxs)("span",{className:"text-base text-gray-700 font-semibold",children:["Step ",a.number,":"]}),a.type&&(0,t.jsxs)("div",{className:"flex items-center gap-0.5",children:[(0,t.jsx)(p.vu,{colorScheme:"brand",size:"md",iconLeft:"Modal"===(s=a.type)?"panel-top":"Tooltip"===s?"message-square":void 0,children:a.type}),(0,t.jsx)(p.m_,{content:"Modal"===a.type?"Larger pop-up that appears in the center of the screen":"Overlay in the tour highlighting specific parts of the product",children:(0,t.jsx)(c.In,{name:"circle-help",size:"xs",className:"ml-1 text-gray-400 "})})]})]}),(0,t.jsxs)("div",{className:"p-4 md:p-6",children:[a.copy&&(0,t.jsx)("div",{className:"mb-4",children:(0,t.jsxs)("div",{className:"bg-linear-to-r from-gray-50 to-white p-4 rounded-lg border border-gray-200 relative overflow-hidden ",children:[(0,t.jsx)("div",{className:"absolute inset-0 bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] bg-size-[16px_16px] opacity-75"}),(0,t.jsx)("div",{className:"relative z-10",children:(0,t.jsx)(n,{websiteUrl:i,type:a.type,copy:a.copy,ctaText:a.cta,currentStep:l,totalSteps:r})})]})}),a.capture&&(0,t.jsxs)("div",{className:"bg-blue-100/70 py-4 pb-4 px-4 md:px-6 rounded-xl mb-4 border border-blue-100 flex flex-col gap-2",children:[(0,t.jsxs)("div",{className:"text-sm font-medium text-blue-700 flex",children:[(0,t.jsxs)("div",{className:"flex items-center gap-1.5",children:[(0,t.jsx)(c.In,{name:"image",size:"sm",className:"mb-[3px]"}),"Suggested Capture View"]}),(0,t.jsx)(p.m_,{content:"Captures show your product. Navattic HTML captures make it feel real, including hover states and more.",side:"right",children:(0,t.jsx)(c.In,{name:"circle-help",size:"xs",className:"text-gray-400 ml-1.5 mb-[3px]"})})]}),(0,t.jsx)("div",{className:"text-sm text-gray-800 text-balance",children:a.capture})]}),(0,t.jsxs)("div",{className:"text-base font-medium text-gray-700 py-3 px-2",children:[a.type," details"]}

1),(0,t.jsxs)("div",{className:"flex flex-col gap-3",children:[a.copy&&(0,t.jsx)(m,{title:"".concat("Modal"===a.type?"Modal":"Tooltip"," copy"),iconName:"pencil-ruler",tooltip:"Suggested text for this step",description:a.copy}),(0,t.jsxs)("div",{className:"flex flex-col md:flex-row gap-3",children:[a.position&&(0,t.jsx)(m,{title:"Position",iconName:"move",tooltip:"The position of the element on the page.",description:a.position}),a.cta&&(0,t.jsx)(m,{title:"CTA text",iconName:"mouse-pointer-click",description:a.cta}),a.beacon&&(0,t.jsx)(m,{title:"Beacon",iconName:"target",tooltip:"Beacons are visual indicators (like pulsing dots or highlights) that guide users to important elements.",description:a.beacon})]})]})]})]})},a.number)}let m=e=>{let{title:s,iconName:a,tooltip:l,description:r}=e;return(0,t.jsxs)("div",{className:"flex-1 w-full bg-gray-50 rounded-xl border border-gray-200 overflow-hidden shadow-[0px_5px_5px_0px_rgba(31,40,55,0.02),0px_2px_2px_0px_rgba(31,40,55,0.02)]",children:[(0,t.jsxs)("div",{className:"px-4 py-3 pb-2 text-sm font-medium text-gray-600 border-b border-gray-200 flex",children:[(0,t.jsxs)("div",{className:"flex items-center gap-1.5",children:[(0,t.jsx)(c.In,{name:a,size:"sm",className:"mb-[3px]"}),s]}),l&&(0,t.jsx)(p.m_,{content:l,side:"right",children:(0,t.jsx)(c.In,{name:"circle-help",size:"xs",className:"text-gray-400 ml-1.5 mb-[3px]"})})]}),(0,t.jsx)("div",{className:"px-5 py-4 bg-white text-sm text-gray-800 h-full",children:(0,t.jsx)("div",{className:"max-w-prose",children:r})})]})}},96074:(e,s,a)=>{a.d(s,{$i:()=>t,AY:()=>i,Xc:()=>l,l2:()=>n,wv:()=>r});let t=e=>{if(!e)return[];let s=e.match(/Step \d+:([\s\S]*?)(?=Step \d+:|$)/g);return s?s.map((e,s)=>{let a=e.split("\n").map(e=>e.trim()).filter(Boolean),t=e=>{let s=a.find(s=>s.toLowerCase().startsWith(e.toLowerCase()+":"));return s?s.substring(s.indexOf(":")+1).trim():""};return{number:s+1,type:t("Type"),position:t("Position"),beacon:t("Beacon"),copy:t("Copy"),cta:t("CTA"),capture:t("Capture")}}):[]},l=["Analyzing your product page to create a custom storyboard...","This typically takes 30-45 seconds...","Reviewing insights from 28,000+ interactive demos on our platform...","Reviewing best practices from teams like Ramp, Dropbox, and Mixpanel...","Building your personalized demo flow...","Optimizing for maximum engagement..."],r=e=>{if(!e)return{isValid:!1,errorMessage:"URL is empty"};if("string"!=typeof e)return{isValid:!1,errorMessage:"URL must be a string"};let s=e.trim();s.startsWith("http://")||s.startsWith("https://")||(s="https://"+s);try{let e=new URL(s);if("http:"!==e.protocol&&"https:"!==e.protocol)return{isValid:!1,errorMessage:"Invalid protocol: ".concat(e.protocol,". Only http: and https: are allowed.")};if(!e.hostname)return{isValid:!1,errorMessage:"Missing hostname"};if(!e.hostname.includes("."))return{isValid:!1,errorMessage:"Your URL must include at least one dot."};let a=e.hostname.replace(/\./g,"");if(/^\d+$/.test(a))return{isValid:!1,errorMessage:"Your URL cannot consist of only numbers."};if(e.hostname.endsWith("."))return{isValid:!1,errorMessage:"Your URL cannot end with a dot."};if(!/^[a-zA-Z0-9.-]+$/.test(e.hostname))return{isValid:!1,errorMessage:"Your URL contains invalid characters."};if(e.hostname.includes("..")||e.hostname.includes("--"))return{isValid:!1,errorMessage:"Invalid URL - Your URL must not contain consecutive dots or hyphens"};if(e.hostname.startsWith("-")||e.hostname.endsWith("-"))return{isValid:!1,errorMessage:"Invalid URL - Your URL must not start or end with a hyphen"};return{isValid:!0}}catch(e){return{isValid:!1,errorMessage:"Invalid URL - ".concat(e.message)}}},i=e=>r(e).isValid,n=e=>{if(!e||"string"!=typeof e)return"";let s=e.trim();return s.startsWith("http://")||s.startsWith("https://")?s:"https://"+s}}}]);