https://boombam.app/assets/tiktok-ads-mockup-fKF5oGJ5.js

1import{j as e,s as p,dD as y,dE as k,dF as T,aP as C,cV as A,aL as S,B as i,a4 as j,S as N,aF as v,ap as L,h as B}from"./index-CuSEeJFb.js";import{P as b}from"./play-oR40AlEL.js";import{S as I}from"./share-B5BYf7qZ.js";function U({register:d,watch:o,businessProfile:t,isGeneratingField:s,onGenerateField:c}){const r=o("platformContent.headline")||"",l=o("platformContent.description")||"",n=o("platformContent.callToAction")||"",a={headline:100,description:400,callToAction:20},x=(h,w)=>{const g=h/w;return g>.9?"text-red-500":g>.7?"text-orange-500":"text-gray-500"},m=(t==null?void 0:t.businessName)||"yourbusiness",u=(t==null?void 0:t.logo)||"",f=m.split(" ").map(h=>h[0]).join("").toUpperCase().slice(0,2);return e.jsxs("div",{className:"max-w-4xl mx-auto",children:[e.jsxs("div",{className:"max-w-sm mx-auto bg-black rounded-3xl overflow-hidden mb-6 shadow-xl",children:[e.jsxs("div",{className:"bg-black text-white text-xs p-2 flex justify-between items-center",children:[e.jsx("span",{children:"9:41"}),e.jsxs("div",{className:"flex space-x-1",children:[e.jsx("div",{className:"w-4 h-2 bg-white rounded-sm"}),e.jsx("div",{className:"w-1 h-2 bg-white rounded-sm"}),e.jsx("div",{className:"w-6 h-2 bg-white rounded-sm"})]})]}),e.jsx("div",{className:"bg-black text-white p-4 flex justify-center",children:e.jsx("span",{className:"font-bold text-lg",children:"TikTok"})}),e.jsxs("div",{className:"relative bg-gradient-to-br from-purple-600 via-pink-500 to-red-500 aspect-[9/16] flex items-center justify-center",children:[e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx("div",{className:"w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center",children:e.jsx(b,{className:"w-8 h-8 text-gray-800 ml-1"})})}),e.jsx("div",{className:"absolute top-4 left-4",children:e.jsx(p,{className:"bg-black bg-opacity-60 text-white text-xs border-none",children:"Sponsored"})}),e.jsxs("div",{className:"absolute right-4 bottom-20 flex flex-col items-center space-y-4",children:[e.jsx(y,{className:"w-12 h-12 border-2 border-white",children:u?e.jsx(k,{src:u,alt:m}):e.jsx(T,{className:"bg-gray-600 text-white font-semibold text-sm",children:f})}),e.jsxs("div",{className:"flex flex-col items-center space-y-3 text-white",children:[e.jsxs("div",{className:"flex flex-col items-center",children:[e.jsx(C,{className:"w-8 h-8"}),e.jsx("span",{className:"text-xs",children:"12.5K"})]}),e.jsxs("div",{className:"flex flex-col items-center",children:[e.jsx(A,{className:"w-8 h-8"}),e.jsx("span",{className:"text-xs",children:"1,847"})]}),e.jsxs("div",{className:"flex flex-col items-center",children:[e.jsx(I,{className:"w-8 h-8"}),e.jsx("span",{className:"text-xs",children:"3,291"})]}),e.jsx("div",{className:"flex flex-col items-center",children:e.jsx(S,{className:"w-8 h-8"})})]})]}),e.jsx("div",{className:"absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black via-black/60 to-transparent",children:e.jsxs("div",{className:"text-white space-y-2",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsxs("span",{className:"font-semibold text-sm",children:["@",m.toLowerCase()]}),e.jsx(p,{variant:"outline",className:"text-xs border-white text-white bg-transparent",children:"Ad"})]}),r&&e.jsx("h3",{className:"font-semibold text-sm leading-tight",children:r}),l&&e.jsxs("p",{className:"text-sm opacity-90 leading-tight",children:[l.slice(0,120),l.length>120?"...":""]}),n&&e.jsx(i,{className:"bg-white text-black hover:bg-gray-100 rounded-full text-sm px-6 py-2 h-auto font-semibold",size:"sm",children:n})]})})]}),e.jsxs("div",{className:"bg-black text-white p-2 flex justify-around",children:[e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"w-6 h-6 mx-auto mb-1 bg-white rounded"}),e.jsx("span",{className:"text-xs",children:"Home"})]}),e.jsxs("div",{className:"text-center opacity-60",children:[e.jsx("div",{className:"w-6 h-6 mx-auto mb-1 bg-gray-600 rounded"}),e.jsx("span",{className:"text-xs",children:"Discover"})]}),e.jsxs("div",{className:"text-center opacity-60",children:[e.jsx("div",{className:"w-6 h-6 mx-auto mb-1 bg-gray-600 rounded"}),e.jsx("span",{className:"text-xs",children:"Inbox"})]}),e.jsxs("div",{className:"text-center opacity-60",children:[e.jsx("div",{className:"w-6 h-6 mx-auto mb-1 bg-gray-600 rounded"}),e.jsx("span",{className:"text-xs",children:"Profile"})]})]})]}),e.jsxs("div",{className:"bg-white border rounded-lg p-6 space-y-6",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx("div",{className:"w-8 h-8 bg-gradient-to-r from-pink-500 to-purple-600 rounded-lg flex items-center justify-center",children:e.jsx("span",{className:"text-white font-bold text-sm",children:"TT"})}),e.jsx("h3",{className:"font-semibold text-lg",children:"TikTok Ad Configuration"}),e.jsx(p,{variant:"secondary",className:"ml-auto",children:"Video-First Platform"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("label",{className:"text-sm font-medium text-gray-700",children:["Video Caption/Headline ",e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:`text-xs ${x(r.length,a.headline)}`,children:[r.length,"/",a.headline]}),e.jsx(i,{type:"button",variant:"ghost",size:"sm",className:"h-6 w-6 p-0",onClick:()=>c==null?void 0:c("headline"),disabled:s==null?void 0:s("headline"),children:s!=null&&s("headline")?e.jsx(j,{className:"h-3 w-3 animate-spin"}):e.jsx(N,{className:"h-3 w-3"})})]})]}),e.jsx(v,{...d("platformContent.headline"),placeholder:"Hook your audience with compelling video caption",maxLength:a.headline,className:r.length>a.headline?"border-red-500":""}),e.jsx("p",{className:"text-xs text-gray-500",children:"Engaging, trend-aware caption that hooks viewers immediately"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("label",{className:"text-sm font-medium text-gray-700",children:["Video Description ",e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:`text-xs ${x(l.length,a.description)}`,children:[l.length,"/",a.description]}),e.jsx(i,{type:"button",variant:"ghost",size:"sm",className:"h-6 w-6 p-0",onClick:()=>c==null?void 0:c("description"),disabled:s==null?void 0:s("description"),children:s!=null&&s("description")?e.jsx(j,{className:"h-3 w-3 animate-spin"}):e.jsx(N,{className:"h-3 w-3"})})]})]}),e.jsx(L,{...d("platformContent.description"),placeholder:"Creative description with trending hashtags and engaging content",maxLength:a.description,rows:4,className:l.length>a.description?"border-red-500":""}),e.jsx("p",{className:"text-xs text-gray-500",children:"Authentic, creative content with relevant hashtags and trending elements"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("label",{className:"text-sm font-medium text-gray-700",children:["Call to Action Button ",e.jsx("span",{className:"text-red-500",children:"*"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:`text-xs ${x(n.length,a.callToAction)}`,children:[n.length,"/",a.callToAction]}),e.jsx(i,{type:"button",variant:"ghost",size:"sm",className:"h-6 w-6 p-0",onClick:()=>c==null?void 0:c("callToAction"),disabled:s==null?void 0:s("callToAction"),children:s!=null&&s("callToAction")?e.jsx(j,{className:"h-3 w-3 animate-spin"}):e.jsx(N,{className:"h-3 w-3"})})]})]}),e.jsx(v,{...d("platformContent.callToAction"),placeholder:"Shop Now",maxLength:a.callToAction,className:n.length>a.callToAction?"border-red-500":""}),e.jsx("p",{className:"text-xs text-gray-500",children:'Action-oriented button text (e.g., "Shop Now", "Try It", "Get It")'})]}),e.jsx("div",{className:"bg-gradient-to-r from-pink-50 to-purple-50 border border-pink-200 rounded-lg p-4",children:e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(B,{className:"h-5 w-5 text-pink-600 mt-0.5"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h5",{className:"font-medium text-pink-900",children:"TikTok Ad Best Practices"}),e.jsxs("ul",{className:"text-sm text-pink-800 space-y-1",children:[e.jsx("li",{children:"• Create authentic, native-feeling content that doesn't feel like an ad"}),e.jsx("li",{children:"• Use trending sounds, effects, and hashtags relevant to your audience"}),e.jsx("li",{children:"• Hook viewers in the first 3 seconds with compelling visuals or questions"}),e.jsx("li",{children:"• Keep content vertical (9:16 aspect ratio) and mobile-optimized"}),e.jsx("li",{children:"• Include clear, action-oriented CTAs that encourage immediate engagement"}),e.jsx("li",{children:"• Leverage TikTok creators and influencer partnerships for authenticity"})]})]})]})}),e.jsx("div",{className:"bg-gradient-to-r from-purple-50 to-pink-50 border border-purple-200 rounded-lg p-4",children:e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"w-5 h-5 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center mt-0.5",children:e.jsx("span",{className:"text-white text-xs",children:"🎬"})}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h5",{className:"font-medium text-purple-900",children:"Creator-Style Content"}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 text-xs",children:[e.jsxs("div",{className:"bg-white rounded p-2 border border-purple-100",children:[e.jsx("span",{className:"font-medium text-purple-800",children:"Behind the Scenes"}),e.jsx("p",{className:"text-purple-600 mt-1",children:"Show your process authentically"})]}),e.jsxs("div",{className:"bg-white rounded p-2 border border-purple-100",children:[e.jsx("span",{className:"font-medium text-purple-800",children:"Qu

1ick Tips"}),e.jsx("p",{className:"text-purple-600 mt-1",children:"15-30 second educational content"})]}),e.jsxs("div",{className:"bg-white rounded p-2 border border-purple-100",children:[e.jsx("span",{className:"font-medium text-purple-800",children:"Trending Audio"}),e.jsx("p",{className:"text-purple-600 mt-1",children:"Use popular sounds for reach"})]}),e.jsxs("div",{className:"bg-white rounded p-2 border border-purple-100",children:[e.jsx("span",{className:"font-medium text-purple-800",children:"User Generated"}),e.jsx("p",{className:"text-purple-600 mt-1",children:"Customer testimonials/reviews"})]})]})]})]})}),e.jsx("div",{className:"bg-gray-50 border rounded-lg p-4",children:e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("div",{className:"w-5 h-5 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full flex items-center justify-center mt-0.5",children:e.jsx(b,{className:"w-3 h-3 text-white"})}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h5",{className:"font-medium text-gray-900",children:"Mobile-First Video Strategy"}),e.jsxs("p",{className:"text-sm text-gray-700",children:["Your TikTok ad for ",e.jsx("strong",{children:(t==null?void 0:t.businessName)||"your business"})," should feel native to the platform. Focus on entertainment value while showcasing your",(t==null?void 0:t.industry)&&e.jsxs("span",{children:[" ",t.industry.toLowerCase()]})," services. Optimize for vertical 9:16 format, hook viewers in first 3 seconds, and leverage trending elements that resonate with TikTok's young, engaged audience."]})]})]})})]})]})}export{U as TikTokAdsMockup};