https://www.svgai.org/_next/static/chunks/app/page-64d16b6b4d709cb8.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8974],{29223:(e,t,a)=>{"use strict";a.d(t,{Xi:()=>p,bZ:()=>m,dV:()=>i});let i="svgai_dashboard_settings",r="svgai_model_type",s="svgai_transparent_background_mode",o="svgai_transparent_background";function n(){try{return window.localStorage}catch{return}}function l(e){try{let t=JSON.parse(e.getItem(i)||"{}");return t&&"object"==typeof t&&!Array.isArray(t)?t:{}}catch{return{}}}function d(e){return"classic"===e||"ultra"===e?e:void 0}function c(e){return"auto"===e||"on"===e||"off"===e?e:void 0}function p(e=n()){if(!e)return{};try{let t=l(e),a=d(e.getItem(r))||d(t.model),i=e.getItem(o),n=c(e.getItem(s))||("true"===i?"on":"false"===i?"off":void 0)||c(t.transparentBackgroundMode)||(!1===t.transparentBackground?"off":void 0);return{...a?{model:a}:{},...n?{transparentBackgroundMode:n}:{}}}catch{return{}}}function m(e,t=n()){if(t)try{let a=l(t),n=d(e.model),p=c(e.transparentBackgroundMode);n&&(t.setItem(r,n),a.model=n),p&&(t.setItem(s,p),t.setItem(o,String("off"!==p)),a.transparentBackgroundMode=p,a.transparentBackground="off"!==p),a.outputAspectRatio="default",t.setItem(i,JSON.stringify(a))}catch{}}},34136:(e,t,a)=>{"use strict";function i(e,t,a={}){let r=!1,s,o=!1,n=!1,l=!0;try{n=!!(a.storageKey&&sessionStorage.getItem(a.storageKey))}catch{}let d=()=>{void 0!==s&&clearTimeout(s),s=void 0},c=()=>{if(!o){if(!r||"visible"!==document.visibilityState){d(),l=!0;return}void 0===s&&l&&(!n||!1!==a.repeat)&&(s=setTimeout(()=>{if(s=void 0,!o&&r&&"visible"===document.visibilityState){if(!1===t(n))return void c();n=!0,l=!1;try{a.storageKey&&sessionStorage.setItem(a.storageKey,"1")}catch{}}},a.dwellMs??1e3))}};if("undefined"==typeof IntersectionObserver)return()=>{};let p=a.threshold??.35,m=new IntersectionObserver(([e])=>{r=e.isIntersecting&&e.intersectionRatio>=p,c()},{threshold:[0,p]});return m.observe(e),document.addEventListener("visibilitychange",c),()=>{o=!0,d(),m.disconnect(),document.removeEventListener("visibilitychange",c)}}a.d(t,{_:()=>i})},34964:(e,t,a)=>{"use strict";a.r(t),a.d(t,{Tabs:()=>n,TabsContent:()=>c,TabsList:()=>l,TabsTrigger:()=>d});var i=a(95155),r=a(12115),s=a(60704),o=a(24026);let n=s.bL,l=r.forwardRef(({className:e,...t},a)=>(0,i.jsx)(s.B8,{ref:a,className:(0,o.cn)("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-slate-700",e),...t}));l.displayName=s.B8.displayName;let d=r.forwardRef(({className:e,...t},a)=>(0,i.jsx)(s.l9,{ref:a,className:(0,o.cn)("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",e),...t}));d.displayName=s.l9.displayName;let c=r.forwardRef(({className:e,...t},a)=>(0,i.jsx)(s.UC,{ref:a,className:(0,o.cn)("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",e),...t}));c.displayName=s.UC.displayName},39881:(e,t,a)=>{"use strict";a.d(t,{A:()=>i});let i=(0,a(19946).A)("ArrowUp",[["path",{d:"m5 12 7-7 7 7",key:"hav0vg"}],["path",{d:"M12 19V5",key:"x0mq9r"}]])},47228:(e,t,a)=>{"use strict";a.d(t,{JO:()=>x,T:()=>g,oB:()=>p});var i=a(46412),r=a(86424),s=a(90802);let o=s.m4,n="svgai_hero_wait_analytics_v2",l="svgai_hero_result_analytics_v2",d=[10,20,30,45,60,90,120,180,300];function c(){let e=(0,s.If)();return window.location.hostname,{funnel_version:o,acquisition_flow_id:(0,s.Ay)(),country_code:e,country_tier:e?(0,i.uR)(e)?"tier_1":"tier_2":"unknown",country_source:e?"country_cookie":"unavailable",deployment_environment:"production"}}function p(e,t={}){let a=e===s.nN.HERO_GENERATION_WAIT_LEFT||e===s.nN.HERO_GENERATION_VISIBILITY_CHANGED&&"hidden"===t.visibility;(0,r.trackPostHogEvent)(e,{...c(),...t},a?{transport:"sendBeacon",send_instantly:!0}:void 0)}function m(e,t){try{return JSON.parse(e?.getItem(t)||"null")}catch{return null}}function u(e,t,a){try{e?.setItem(t,JSON.stringify(a))}catch{}}function h(){try{return window.sessionStorage}catch{return}}function g(e){if(!e)return{};let t=m(h(),l);return!t?.properties||t.properties.design_id!==e||!Number.isFinite(t.savedAt)||Date.now()-t.savedAt>864e5?{}:(0,s.Tc)(t.properties)}function x(e,t){let a=function(e){let t=e.now||Date.now,a=e.emit||p,i=m(e.storage,n),r=i?.requestId===e.requestId&&Number.isFinite(i.startedAt)&&t()>=i.startedAt&&t()-i.startedAt<864e5&&Number.isFinite(i.visibleMs)&&Array.isArray(i.milestones),o=r?i:{requestId:e.requestId,startedAt:t(),visibleMs:0,milestones:[],stage:"preparing",observations:0,completed:!1,redirected:!1,authResumed:!1},c=(0,s.Tc)({...e.properties,request_id:e.requestId}),h=!1!==e.visible,g=t(),x=!1,f=!1,b=!1,w=0;o.observations+=1;let v=()=>u(e.storage,n,o),_=()=>{let e=t();!x&&h&&(o.visibleMs+=Math.max(0,e-g)),g=e},y=(i,r={})=>{_(),v();try{a(i,{...c,elapsed_ms:Math.max(0,t()-o.startedAt),active_visible_ms:Math.round(o.visibleMs),submission_to_generation_ms:Number.isFinite(e.submittedAt)?Math.max(0,o.startedAt-e.submittedAt):void 0,wait_stage:o.stage,is_visible:h,observation_count:o.observations,...r})}catch{}};return e.authResumed&&!o.authResumed&&(o.authResumed=!0,y(s.nN.HERO_AUTH_RESUMED)),o.completed||y(r?s.nN.HERO_GENERATION_RESUMED:s.nN.HERO_GENERATION_STARTED,{resume_reason:r?"saved_request":void 0}),{startedAt:o.startedAt,update(e){c=(0,s.Tc)({...c,...e}),v()},checkpoint(){if(x||o.completed)return;_();let e=t()-o.startedAt;for(let t of d)e>=1e3*t&&!o.milestones.includes(t)&&(o.milestones.push(t),y(s.nN.HERO_GENERATION_WAIT_MILESTONE,{milestone_seconds:t}));v()},stage(e){x||o.completed||o.stage===e||(o.stage=e,y(s.nN.HERO_GENERATION_STAGE_CHANGED))},visibility(e){x||o.completed||h===e||(_(),h=e,y(s.nN.HERO_GENERATION_VISIBILITY_CHANGED,{visibility:h?"visible":"hidden"}))},reconnect(e){x||o.completed||b===e||(b=e,e&&(w+=1),y(e?s.nN.HERO_GENERATION_RECONNECTING:s.nN.HERO_GENERATION_RECONNECTED,{reconnect_count:w}))},leave(e){x||o.completed||f||(f=!0,y(s.nN.HERO_GENERATION_WAIT_LEFT,{leave_reason:e,generation_continues:!0}),h=!1)},returned(e){x||o.completed||!f||(g=t(),f=!1,h=e,y(s.nN.HERO_GENERATION_RESUMED,{resume_reason:"page_restored"}))},complete(a){x||(c=(0,s.Tc)({...c,...a}),o.completed||(o.stage="completed",y(s.nN.HERO_GENERATION_COMPLETED),o.completed=!0,v()),u(e.storage,l,{savedAt:t(),properties:c}))},redirected(){o.completed&&!o.redirected&&(o.redirected=!0,y(s.nN.HERO_GENERATION_DASHBOARD_REDIRECTED))},fail(e,t){x||o.completed||(y(s.nN.HERO_GENERATION_FAILED,{failure_stage:e,http_status:t}),x=!0)},blocked(e){x||o.completed||(y(s.nN.HERO_GENERATION_BLOCKED,{block_reason:e}),x=!0)},stop(){_(),v(),x=!0}

1}}({requestId:e.requestId,storage:h(),visible:!document.hidden,authResumed:!!e.authRequired,submittedAt:e.createdAt,properties:{...c(),acquisition_flow_id:e.acquisitionFlowId||(0,s.Ay)(),job_id:e.jobId,batch_id:e.batchId,funding:t.funding,model:t.model||e.model,requested_model:e.model,model_was_explicit:!!e.modelExplicit,input_group:(0,s.k3)(!!e.prompt.trim(),!!e.uploadedImage),has_uploaded_image:!!e.uploadedImage,transparent_background_mode:e.transparentBackgroundMode||(e.transparentBackground?"on":"off"),output_aspect_ratio:"auto"}}),i=()=>a.visibility(!document.hidden),r=()=>a.leave("pagehide"),o=()=>a.returned(!document.hidden);return document.addEventListener("visibilitychange",i),window.addEventListener("pagehide",r),window.addEventListener("pageshow",o),{...a,dispose(){document.removeEventListener("visibilitychange",i),window.removeEventListener("pagehide",r),window.removeEventListener("pageshow",o),a.stop()}}}},50561:(e,t,a)=>{"use strict";a.d(t,{default:()=>n});var i=a(12115),r=a(90802);function s(e,t){window.setTimeout(()=>{Promise.resolve().then(a.bind(a,86424)).then(({trackPostHogEvent:a})=>{a(e,(0,r.Tc)(t))}).catch(()=>{})},0)}function o(e){return(0,r.Tc)({...(0,r.fQ)(),...(0,r.gX)(),acquisition_flow_id:(0,r.iy)(),dashboard_v2_homepage_models:e})}function n({dashboardV2HomepageModels:e}){let t=(0,i.useRef)(new Set),a=(0,i.useRef)(new Map),n=(0,i.useRef)(null),l=(0,i.useRef)(null),d=(0,i.useRef)(!1),c=(0,i.useRef)(Date.now()),p=(0,i.useRef)(0),m=(0,i.useRef)(0),u=(0,i.useRef)(new Set),h=(0,i.useRef)(null),g=(0,i.useRef)({promptStarted:!1,imageUploaded:!1,generateClicked:!1,examplesHovered:!1,workflowHovered:!1,navPricingClicked:!1,signupGateOpened:!1});return(0,i.useEffect)(()=>{let i=o(e),d=Array.from(document.querySelectorAll("[data-homepage-section]"));if(d.forEach((e,t)=>{let i=e.getAttribute("data-homepage-section");i&&a.current.set(i,t)}),!d.length||"undefined"==typeof IntersectionObserver)return;let c=new IntersectionObserver(e=>{for(let o of e){if(!o.isIntersecting)continue;let e=o.target.getAttribute("data-homepage-section");if(!e)continue;l.current=e;let d=a.current.get(e)??0;d>(n.current?a.current.get(n.current)??0:-1)&&(n.current=e),t.current.has(e)||(t.current.add(e),s(r.nN.HOMEPAGE_SECTION_VIEWED,{...i,section_name:e,section_index:d,sections_seen_count:t.current.size,max_scroll_depth:m.current}))}},{threshold:.35,rootMargin:"0px 0px -10% 0px"});return d.forEach(e=>c.observe(e)),()=>c.disconnect()},[e]),(0,i.useEffect)(()=>

1{let t=o(e),a=[25,50,75,90],i=()=>{h.current=null;let e=function(){if("undefined"==typeof document)return 0;let e=window.scrollY||document.documentElement.scrollTop||0,t=window.innerHeight||0,a=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight);return!a||a<=t?100:Math.max(0,Math.min(100,Math.round((e+t)/a*100)))}();for(let i of(m.current=Math.max(m.current,e),a))e<i||u.current.has(i)||(u.current.add(i),s(r.nN.HOMEPAGE_SCROLL_MILESTONE,{...t,scroll_depth:i,max_scroll_depth:e,last_section_seen:l.current,deepest_section_seen:n.current,has_prompt_started:g.current.promptStarted,has_generated:g.current.generateClicked}))},d=()=>{null===h.current&&(h.current=window.requestAnimationFrame(i))};return d(),window.addEventListener("scroll",d,{passive:!0}),window.addEventListener("resize",d,{passive:!0}),()=>{window.removeEventListener("scroll",d),window.removeEventListener("resize",d),null!==h.current&&window.cancelAnimationFrame(h.current)}},[e]),(0,i.useEffect)(()=>{let e=e=>{switch((e.detail||{}).type){case"prompt_started":g.current.promptStarted=!0;break;case"image_uploaded":g.current.imageUploaded=!0;break;case"generate_clicked":g.current.generateClicked=!0;break;case"examples_hovered":g.current.examplesHovered=!0;break;case"workflow_hovered":g.current.workflowHovered=!0;break;case"nav_pricing_clicked":g.current.navPricingClicked=!0;break;case"signup_gate_opened":g.current.signupGateOpened=!0}};return window.addEventListener("svgai:homepage-activity",e),()=>window.removeEventListener("svgai:homepage-activity",e)},[]),(0,i.useEffect)(()=>{let a=o(e),i=()=>{if(d.current)return;d.current=!0,c.current&&(p.current+=Date.now()-c.current,c.current=0);let e=g.current,i=(0,r.Ay)();s(r.nN.HOMEPAGE_SESSION_SUMMARY,{...a,acquisition_flow_id:i||a.acquisition_flow_id,total_visible_time_ms:Math.max(0,Math.round(p.current)),max_scroll_depth:m.current,sections_seen_count:t.current.size,section_names_seen:Array.from(t.current).join(","),last_section_seen:l.current,deepest_section_seen:n.current,scrolled_past_hero:t.current.size>1||m.current>=25,prompt_started:e.promptStarted,image_uploaded:e.imageUploaded,generate_clicked:e.generateClicked,examples_hovered:e.examplesHovered,workflow_hovered:e.workflowHovered,nav_pricing_clicked:e.navPricingClicked,signup_gate_opened:e.signupGateOpened,hero_outcome:e.generateClicked?"generated":e.promptStarted||e.imageUploaded?"input_no_generate":"no_input",input_group:(0,r.k3)(e.promptStarted,e.imageUploaded)})},u=()=>{"hidden"===document.visibilityState&&c.current?(p.current+=Date.now()-c.current,c.current=0):"visible"!==document.visibilityState||c.current||(c.current=Date.now()),"hidden"===document.visibilityState&&i()};return document.addEventListener("visibilitychange",u),window.addEventListener("pagehide",i),()=>{document.removeEventListener("visibilitychange",u),window.removeEventListener("pagehide",i),i()}},[e]),null}},52920:(e,t,a)=>{Promise.resolve().then(a.bind(a,87376)),Promise.resolve().then(a.bind(a,53182)),Promise.resolve().then(a.bind(a,50561)),Promise.resolve().then(a.bind(a,17751)),Promise.resolve().then(a.bind(a,6490)),Promise.resolve().then(a.bind(a,93381)),Promise.resolve().then(a.t.bind(a,6874,23))},53182:(e,t,a)=>{"use strict";a.d(t,{default:()=>ed});var i=a(95155),r=a(12115),s=a(53311),o=a(39881),n=a(91788),l=a(32919),d=a(5196),c=a(54416),p=a(94631),m=a(381),u=a(66474),h=a(92138),g=a(99474),x=a(35695),f=a(33168),b=a(6874),w=a.n(b),v=a(55028),_=a(97626),y=a(29223),k=a(47228);let j="Convert this image into a clean, editable SVG. No design changes needed.";function S(e){let t=Number.isFinite(e)?Math.max(0,Math.floor(e)):0;return t<30?`About ${30-t}s remaining`:t<60?"Detailed designs can take 10–30 seconds longer.":`Still working on your SVG \xb7 ${t}s elapsed`}function N(e){let t="string"==typeof e?e.trim().toUpperCase():"";return/^[A-Z]{2}$/.test(t)&&"XX"!==t&&"ZZ"!==t?t:null}function E(e,t,a){return"classic"===t?"classic":"ultra"===t&&(e||a)||e||a?"ultra":"classic"}var A=a(93406),I=a(34136),F=a(86424),G=a(90802);function R({hasUploadedImage:e,disabled:t,onSelectPrompt:a}){let[s,o]=(0,r.useState)(null),n=(0,r.useRef)(null);return((0,r.useEffect)(()=>{e&&o((0,A.dl)())},[e]),(0,r.useEffect)(()=>

1{if(!e||!s||!n.current||t)return;let a={...(0,A.ns)(s),acquisition_flow_id:(0,G.Ay)(),exposure_context:"post_upload",has_uploaded_image:!0};return(0,I._)(n.current,()=>{if(!(0,F.isPostHogLoaded)())return!1;(0,F.trackPostHogEvent)(G.nN.HERO_CHIP_EXPERIMENT_EXPOSED,a),(0,F.capturePostHogFeatureFlagCalled)(A.AA,s,a)},{dwellMs:250,threshold:.01,repeat:!1,storageKey:`svgai_chip_exposure:${(0,G.Ay)()}:${s}`})},[e,s,t]),e&&s)?(0,i.jsx)("div",{ref:n,"data-hero-chip-variant":s,className:"show"===s?"mt-2.5 flex flex-wrap items-center gap-2":"h-px",children:"show"===s&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("button",{type:"button",disabled:t,className:"whitespace-nowrap rounded-full border border-gray-200 bg-white px-3 py-1 text-xs text-gray-500 transition-colors hover:border-[#FF7043]/40 hover:text-[#FF7043] disabled:opacity-50",onClick:()=>{(0,F.trackPostHogEvent)(G.nN.HERO_PROMPT_CHIP_CLICKED,{chip_type:"image_transform",chip_label:"Vectorize",has_uploaded_image:!0}),a(j)},children:"Vectorize"}),(0,i.jsx)("span",{className:"text-xs leading-5 text-gray-400",children:"Or describe edits, a new style, or how to use this reference."})]})}):null}var C=a(23753),M=a(84386),V=a(48151),O=a(77051),P=a(46412),L=a(53279);let D=(0,v.default)(()=>Promise.all([a.e(4758),a.e(3323)]).then(a.bind(a,63323)).then(e=>({default:e.GenerationSignupModal})),{loadableGenerated:{webpack:()=>[63323]},ssr:!1,loading:()=>null}),T=(0,v.default)(()=>Promise.all([a.e(4758),a.e(6080)]).then(a.bind(a,36080)).then(e=>({default:e.SignupModal})),{loadableGenerated:{webpack:()=>[36080]},ssr:!1,loading:()=>null}),B=(0,v.default)(()=>Promise.all([a.e(4758),a.e(348)]).then(a.bind(a,30348)).then(e=>({default:e.UpgradeModal})),{loadableGenerated:{webpack:()=>[30348]},ssr:!1,loading:()=>null}),H=["image/png","image/jpeg","image/jpg","image/webp","image/svg+xml"];function U(e){window.dispatchEvent(new CustomEvent("svgai:homepage-activity",{detail:{type:e}}))}let q=e=>`/homepage-hero-assets/svg/${e}.svg`,W=[{label:"SVG Logo",visual:"phoenix",asset:q("top-01-svg-logo-phoenix"),alt:"Colorful phoenix SVG logo example"},{label:"Product SVG",visual:"shoe",asset:q("top-36-product-gift-box"),alt:"Gift box product SVG example"},{label:"SVG Icon",visual:"icon",asset:q("top-02-svg-icon-feather"),alt:"Gradient feather SVG icon example"},{label:"Character SVG",visual:"character",asset:q("top-22-character-mage"),alt:"Fantasy character SVG example"},{label:"Illustration",visual:"landscape",asset:q("top-05-illustration-city"),alt:"City illustration SVG example"},{label:"Cricut SVG",visual:"pattern",asset:q("top-39-cricut-floral-wreath"),alt:"Celestial moon SVG design example for craft projects"},{label:"Brand Mark",visual:"phoenix",asset:q("top-37-brand-mark-green-hex"),alt:"Abstract green brand mark SVG example"},{label:"Icon Set",visual:"icon",asset:q("top-38-line-icon-set"),alt:"Minimal outline SVG icon set example"},{label:"Sticker SVG",visual:"badge",asset:q("top-40-sticker-rainbow-badge"),alt:"Retro flower sticker SVG example"},{label:"Pattern SVG",visual:"pattern",asset:q("top-41-pattern-floral-tile"),alt:"Repeating floral SVG pattern example"},{label:"Web Graphic",visual:"ui",asset:q("top-42-web-dashboard-graphic"),alt:"Dashboard web graphic SVG example"},{label:"Logo Symbol",visual:"phoenix",asset:q("top-44-logo-symbol-modern-mark"),alt:"Modern logo symbol SVG example"},{label:"Space Illustration",visual:"landscape",asset:q("top-04-character-astronaut"),alt:"Astronaut space illustration SVG example"},{label:"Product Label",visual:"shoe",asset:q("top-46-product-packaging-flat"),alt:"Ecommerce product label SVG example"},{label:"Line Icon",visual:"icon",asset:q("top-48-line-icon-search"),alt:"Search line icon SVG example"},{label:"Printable SVG",visual:"badge",asset:q("top-50-printable-sticker-labels"),alt:"Printable planner sticker SVG example"},{label:"Geometric Pattern",visual:"pattern",asset:q("top-51-pattern-geometric-tile"),alt:"Geometric tile SVG pattern example"},{label:"Shop Graphic",visual:"ui",asset:q("top-52-shop-graphic-flat"),alt:"Online shop graphic SVG example"}],$={reference:"/homepage-hero-assets/webp/workflow-01-image-reference-owl.webp",modernLogo:q("workflow-02-owl-modern-logo"),iconVersion:q("workflow-02-owl-icon-version"),lineArt:q("workflow-02-owl-line-art-detailed"),tshirtPrint:q("workflow-02-owl-tshirt-print"),refine:q("workflow-02-owl-icon-version"),download:q("workflow-04-svg-download-card")},Z=["Text Prompt or Image Reference","AI Generates an Editable SVG","Refine with AI","Download as SVG"],z=[{label:"Logo",src:$.modernLogo,alt:"Modern owl logo SVG example based on the reference owl",assetClassName:"scale-[1.18]"},{label:"Icon",src:$.iconVersion,alt:"Icon owl SVG example based on the reference owl",assetClassName:"scale-[1.06]"},{label:"Line art",src:$.lineArt,alt:"Line art owl SVG example based on the reference owl"},{label:"T-shirt print",src:$.tshirtPrint,alt:"T-shirt print owl SVG example based on the reference owl"}];function J({className:e=""}){let t=(0,r.useId)().replace(/:/g,"");return(0,i.jsxs)("svg",{className:e,viewBox:"0 0 180 180",fill:"none",role:"img","aria-label":"Phoenix SVG logo example",children:[(0,i.jsxs)("defs",{children:[(0,i.jsxs)("linearGradient",{id:`${t}-wingA`,x1:"31",y1:"39",x2:"150",y2:"137",gradientUnits:"userSpaceOnUse",children:[(0,i.jsx)("stop",{stopColor:"#F31F10"}),(0,i.jsx)("stop",{offset:".52",stopColor:"#FF7A1A"}),(0,i.jsx)("stop",{offset:"1",stopColor:"#FFB31A"})]}),(0,i.jsxs)("linearGradient",{id:`${t}-wingB`,x1:"28",y1:"122",x2:"94",y2:"58",gradientUnits:"userSpaceOnUse",children:[(0,i.jsx)("stop",{stopColor:"#7D2BFF"}),(0,i.jsx)("stop",{offset:".55",stopColor:"#E81766"}),(0,i.jsx)("stop",{offset:"1",stopColor:"#FF4A14"})]})]}),(0,i.jsx)("path",{d:"M89 38c13 11 18 28 14 50 14-13 30-22 51-31-8 22-21 42-42 56 17-2 31-6 45-14-11 23-30 36-

158 38 6 10 16 18 31 25-23-1-41-10-54-27-11 11-26 18-45 21 15-9 26-20 32-34-20-12-32-31-38-57 19 10 34 22 46 38-3-20 3-43 18-65Z",fill:`url(#${t}-wingA)`}),(0,i.jsx)("path",{d:"M72 101C54 82 44 65 38 45c22 12 38 25 49 41-7 5-12 10-15 15Zm-8 21c-17-5-29-17-39-35 19 8 34 17 45 28l-6 7Z",fill:`url(#${t}-wingB)`}),(0,i.jsx)("path",{d:"M96 78c16 3 28 10 38 21-18-2-32 1-43 9 2-11 3-20 5-30Z",fill:"#FFD25A"}),(0,i.jsx)("path",{d:"M83 70c4-8 10-14 20-19-2 11-1 20 3 27-8-5-15-7-23-8Z",fill:"#FF4A14"}),(0,i.jsx)("circle",{cx:"108",cy:"68",r:"4",fill:"#4A1D11"})]})}function X({className:e=""}){let t=(0,r.useId)().replace(/:/g,"");return(0,i.jsxs)("svg",{className:e,viewBox:"0 0 180 180",fill:"none",role:"img","aria-label":"SVG app icon example",children:[(0,i.jsx)("defs",{children:(0,i.jsxs)("linearGradient",{id:`${t}-icon`,x1:"32",y1:"31",x2:"148",y2:"149",gradientUnits:"userSpaceOnUse",children:[(0,i.jsx)("stop",{stopColor:"#14B8FF"}),(0,i.jsx)("stop",{offset:".52",stopColor:"#1967FF"}),(0,i.jsx)("stop",{offset:"1",stopColor:"#8A20FF"})]})}),(0,i.jsx)("rect",{x:"31",y:"31",width:"118",height:"118",rx:"24",fill:`url(#${t}-icon)`}),(0,i.jsx)("path",{d:"M112 53c-31 6-54 23-63 49 16-6 32-8 50-5-17 7-29 18-38 34 22-10 39-25 49-46 4-9 5-19 2-32Z",fill:"#fff"}),(0,i.jsx)("path",{d:"M56 127c12-23 29-41 54-58",stroke:"#fff",strokeWidth:"8",strokeLinecap:"round"})]})}function K({className:e="",variant:t="black"}){let a=(0,r.useId)().replace(/:/g,"");return(0,i.jsxs)("svg",{className:e,viewBox:"0 0 230 150",fill:"none",role:"img","aria-label":"Orange and black sneaker SVG product visual",children:[(0,i.jsx)("defs",{children:(0,i.jsxs)("linearGradient",{id:`${a}-sole`,x1:"31",y1:"101",x2:"199",y2:"133",gradientUnits:"userSpaceOnUse",children:[(0,i.jsx)("stop",{stopColor:"#FFFFFF"}),(0,i.jsx)("stop",{offset:"1",stopColor:"#E9EDF2"})]})}),(0,i.jsx)("path",{d:"M32 100c31-5 53-19 73-42 9-11 25-14 38-8 16 8 22 30 38 42 11 8 25 8 36 11-5 15-17 26-39 28H68c-21 0-35-9-36-31Z",fill:"orange"===t?"#F87515":"gray"===t?"#24272D":"#202329",stroke:"#101216",strokeWidth:"4"}),(0,i.jsx)("path",{d:"M54 103c22-6 42-19 61-39 8-8 22-9 32-2 12 9 19 27 35 35-26 5-53 3-79-7-16 12-33 19-49 13Z",fill:"orange"===t?"#FF9C29":"gray"===t?"#515762":"#373C43"}),(0,i.jsx)("path",{d:"M71 97c17-11 31-25 42-41",stroke:"#FF6A00",strokeWidth:"8",strokeLinecap:"round"}),(0,i.jsx)("path",{d:"M120 60c16 8 25 24 36 36",stroke:"#FF6A00",strokeWidth:"7",strokeLinecap:"round"}),(0,i.jsx)("path",{d:"M38 108c20 10 53 14 100 11 28-2 53-6 73-13 2 14-10 28-32 31H67c-23 0-36-10-29-29Z",fill:`url(#${a}-sole)`,stroke:"#111827",strokeWidth:"3"}),(0,i.jsx)("path",{d:"M55 125c28 5 70 6 126-1",stroke:"#FF6A00",strokeWidth:"5",strokeLinecap:"round"}),(0,i.jsx)("path",{d:"M91 73h40M82 83h57M73 93h68",stroke:"#111827",strokeWidth:"4",strokeLinecap:"round"}),(0,i.jsx)("circle",{cx:"129",cy:"70",r:"4",fill:"#FF6A00"}),(0,i.jsx)("circle",{cx:"141",cy:"82",r:"4",fill:"#FF6A00"}),(0,i.jsx)("circle",{cx:"153",cy:"94",r:"4",fill:"#FF6A00"})]})}function Y({className:e=""}){return(0,i.jsxs)("svg",{className:e,viewBox:"0 0 180 180",fill:"none",role:"img","aria-label":"Owl SVG workflow fallback",children:[(0,i.jsx)("path",{d:"M49 79c0-31 18-52 42-52s42 21 42 52v27c0 31-18 50-42 50s-42-19-42-50V79Z",fill:"#1D5A91",stroke:"#06162F",strokeWidth:"5"}),(0,i.jsx)("path",{d:"M61 69c4-18 16-29 30-29s26 11 30 29c-8-8-18-12-30-12s-22 4-30 12Z",fill:"#2A73B8"}),(0,i.jsx)("path",{d:"M53 95c9-8 20-12 34-12h8c14 0 25 4 34 12-2 31-17 52-38 52s-36-21-38-52Z",fill:"#F28A22"}),(0,i.jsx)("circle",{cx:"73",cy:"76",r:"18",fill:"#FFD9A0",stroke:"#06162F",strokeWidth:"4"}),(0,i.jsx)("circle",{cx:"109",cy:"76",r:"18",fill:"#FFD9A0",stroke:"#06162F",strokeWidth:"4"}),(0,i.jsx)("circle",{cx:"73",cy:"76",r:"9",fill:"#06162F"}),(0,i.jsx)("circle",{cx:"109",cy:"76",r:"9",fill:"#06162F"}),(0,i.jsx)("circle",{cx:"77",cy:"72",r:"3",fill:"#FFFFFF"}),(0,i.jsx)("circle",{cx:"113",cy:"72",r:"3",fill:"#FFFFFF"}),(0,i.jsx)("path",{d:"m91 88-10-13h20L91 88Z",fill:"#FF9D2E",stroke:"#06162F",strokeWidth:"3"}),(0,i.jsx)("path",{d:"M47 139c24-11 58-14 89-4",stroke:"#7A4A22",strokeWidth:"10",strokeLinecap:"round"}),(0,i.jsx)("path",{d:"M42 128c11-10 21-12 30-7",stroke:"#5F7D35",strokeWidth:"7",strokeLinecap:"round"}),(0,i.jsx)("path",{d:"M64 132c0 6 2 10 6 12M112 132c0 6 2 10 6 12",stroke:"#06162F",strokeWidth:"5",strokeLinecap:"round"})]})}function Q({className:e=""}){return(0,i.jsxs)("svg",{className:e,viewBox:"0 0 190 190",fill:"none",role:"img","aria-label":"Fantasy character SVG example",children:[(0,i.jsx)("path",{d:"M119 78c20 19 28 49 27 83l-24-11 8-45-23-18 12-9Z",fill:"#C84518",stroke:"#111827",strokeWidth:"3"}),(0,i.jsx)("path",{d:"M83 76h30l11 60H73l10-60Z",fill:"#38404A",stroke:"#111827",strokeWidth:"4"}),(0,i.jsx)("path",{d:"M76 91h55l-9 23H82l-6-23Z",fill:"#F28A22",stroke:"#111827",strokeWidth:"3"}),(0,i.jsx)("circle",{cx:"98",cy:"53",r:"24",fill:"#FFC88B",stroke:"#111827",strokeWidth:"4"}),(0,i.jsx)("path",{d:"M72 50c8-25 42-30 59-4-9-3-16-3-22 1 4-8-4-14-14-12-9 1-15 6-23 15Z",fill:"#6A3517",stroke:"#111827",strokeWidth:"3"}),(0,i.jsx)("path",{d:"M79 134l-11 31M120 134l12 31",stroke:"#111827",strokeWidth:"8",strokeLinecap:"round"}),(0,i.jsx)("path",{d:"M67 166h26M111 166h28",stroke:"#111827",strokeWidth:"8",strokeLinecap:"round"}),(0,i.jsx)("path",{d:"M74 94 49 131M125 94l24 33",stroke:"#111827",strokeWidth:"8",strokeLinecap:"round"}),(0,i.jsx)("path",{d:"M46 128 31 164",stroke:"#7E8A9A",strokeWidth:"6",strokeLinecap:"round"}),(0,i.jsx)("path",{d:"m29 164-5 14 13-7",fill:"#7E8A9A",stroke:"#111827",strokeWidth:"3"}),(0,i.jsx)("path",{d:"M92 59c3 4 8 4 12 0",stroke:"#111827",strokeWidth:"3",strokeLinecap:"round"}),(0,i.jsx)("circle",{cx:"88",cy:"51",r:"2",fill:"#111827"}),(0,i.jsx)("circle",{cx:"109",cy:"51",r:"2",fill:"#111827"}),(0,i.jsx)("path",{d:"M86 78h25v17H86V78Z",fill:"#F6A21A",stroke:"#111827",strokeWidth:"3"})]})}function ee({className:e=""}){let t=(0,r.useId)().replace(/:/g,"");return(0,i.jsxs)("svg",{className:e,viewBox:"0 0 180 180",fill:"none",role:"img","aria-label":"Mountain lake SVG illustration example",children:[(0,i.jsx)("defs",{children:(0,i.jsxs)("linearGradient",{id:`${t}-sky`,x1:"90",y1:"21",x2:"90",y2:"150",gradientUnits:"userSpaceOnUse",children:[(0,i.jsx)("stop",{stopColor:"#FFB453"}),(0,i.jsx)("stop",{offset:".44",stopColor:"#9DD7FF"}),(0,i.jsx)("stop",{offset:"1",stopColor:"#EBF8FF"})]})}),(0,i.jsx)("rect",{x:"24",y:"20",width:"132",height:"140",rx:"62",fill:`url(#${t}-sky)`,stroke:"#111827",strokeWidth:"4"}),(0,i.jsx)("circle",{cx:"130",cy:"49",r:"13",fill:"#FF6A1A"}),(0,i.jsx)("path",{d:"m39 111 43-58 30 42 21-28 28 44v47H39v-47Z",fill:"#DDEBEE"}),(0,i.jsx)("path",{d:"m42 111 38-51 26 51H42Z",fill:"#4AA0D4"}),(0,i.jsx)("path",{d:"m94 112 39-47 29 47H94Z",fill:"#68B6E4"}),(0,i.jsx)("path",{d:"m65 80 17-22 13 24-14-10-16 8Z",fill:"#fff"}

1),(0,i.jsx)("path",{d:"m116 86 17-20 11 18-14-8-14 10Z",fill:"#fff"}),(0,i.jsx)("path",{d:"M33 133c25-16 46-22 70-19 22 2 40 11 56 20v26H33v-27Z",fill:"#15805C"}),(0,i.jsx)("path",{d:"M33 150c43-19 83-21 126-3v13H33v-10Z",fill:"#2B9A5D"}),(0,i.jsx)("path",{d:"M62 135c17 7 35 9 55 6-12 10-28 16-46 19H42c5-10 12-18 20-25Z",fill:"#1877B8"}),(0,i.jsx)("path",{d:"M28 111c9-18 20-27 33-29-11 16-16 31-15 47M147 108c-8-14-19-22-32-24 10 14 15 28 15 44",stroke:"#0F5134",strokeWidth:"6",strokeLinecap:"round"})]})}function et({className:e=""}){return(0,i.jsxs)("svg",{className:e,viewBox:"0 0 180 180",fill:"none",role:"img","aria-label":"UI graphic SVG example",children:[(0,i.jsx)("rect",{x:"27",y:"35",width:"126",height:"99",rx:"12",fill:"#F8FAFC",stroke:"#0F172A",strokeWidth:"4"}),(0,i.jsx)("rect",{x:"44",y:"54",width:"42",height:"12",rx:"6",fill:"#FF4A14"}),(0,i.jsx)("rect",{x:"44",y:"78",width:"75",height:"8",rx:"4",fill:"#CBD5E1"}),(0,i.jsx)("rect",{x:"44",y:"96",width:"55",height:"8",rx:"4",fill:"#CBD5E1"}),(0,i.jsx)("rect",{x:"104",y:"52",width:"31",height:"31",rx:"8",fill:"#14B8FF"}),(0,i.jsx)("path",{d:"M55 130c18-21 36-27 56-16 12 6 19 6 31-5",stroke:"#16A34A",strokeWidth:"8",strokeLinecap:"round"}),(0,i.jsx)("path",{d:"m130 118 20 33-18-6-9 16-8-5 9-16-15-12 21-10Z",fill:"#0F172A"})]})}function ea({className:e=""}){return(0,i.jsxs)("svg",{className:e,viewBox:"0 0 180 180",fill:"none",role:"img","aria-label":"Pattern SVG example",children:[(0,i.jsx)("rect",{x:"31",y:"31",width:"118",height:"118",rx:"20",fill:"#FFF7ED",stroke:"#111827",strokeWidth:"4"}),(0,i.jsx)("path",{d:"M61 54c20 1 31 12 34 34-22-2-33-13-34-34ZM92 127c-18-12-21-28-9-47 18 12 21 29 9 47ZM116 52c17 15 18 32 3 50-16-15-17-32-3-50Z",fill:"#FF6A1A"}),(0,i.jsx)("path",{d:"M47 111c23-3 40 4 51 23-25 3-42-5-51-23ZM103 107c22-2 37 7 46 26-22 1-37-8-46-26Z",fill:"#14B8A6"}),(0,i.jsx)("circle",{cx:"56",cy:"74",r:"6",fill:"#0F172A"}),(0,i.jsx)("circle",{cx:"124",cy:"120",r:"6",fill:"#0F172A"}),(0,i.jsx)("circle",{cx:"135",cy:"67",r:"6",fill:"#0F172A"})]})}function ei({className:e=""}){return(0,i.jsxs)("svg",{className:e,viewBox:"0 0 180 180",fill:"none",role:"img","aria-label":"Badge SVG example",children:[(0,i.jsx)("path",{d:"m90 24 15 13 20-3 8 18 19 7-3 20 12 16-12 16 3 20-19 7-8 18-20-3-15 13-15-13-20 3-8-18-19-7 3-20-12-16 12-16-3-20 19-7 8-18 20 3 15-13Z",fill:"#16834F",stroke:"#0F5134",strokeWidth:"5"}),(0,i.jsx)("circle",{cx:"90",cy:"95",r:"47",fill:"#1F9D60",stroke:"#D9F99D",strokeWidth:"5"}),(0,i.jsx)("path",{d:"M63 91h54M70 110h40",stroke:"#fff",strokeWidth:"9",strokeLinecap:"round"}),(0,i.jsx)("path",{d:"M72 75h36",stroke:"#fff",strokeWidth:"8",strokeLinecap:"round"})]})}function er({src:e,alt:t="",className:a="",fallback:s}){let[o,n]=(0,r.useState)(!1);return(0,r.useEffect)(()=>{n(!1)},[e]),(0,i.jsxs)("span",{className:`relative inline-flex items-center justify-center ${a}`,children:[o&&(0,i.jsx)("span",{className:"absolute inset-0 flex items-center justify-center","aria-hidden":"true",children:s}),(0,i.jsx)("img",{src:e,alt:t,"aria-hidden":!t||void 0,draggable:!1,className:"h-full w-full object-contain",style:{opacity:+!o},onError:()=>n(!0),decoding:"async"})]})}function es({visual:e,asset:t,alt:a,className:r=""}){var s;return(0,i.jsx)(er,{src:t,alt:a,className:r,fallback:(s="h-full w-full","phoenix"===e?(0,i.jsx)(J,{className:s}):"icon"===e?(0,i.jsx)(X,{className:s}):"shoe"===e?(0,i.jsx)(K,{className:s}):"character"===e?(0,i.jsx)(Q,{className:s}):"landscape"===e?(0,i.jsx)(ee,{className:s}):"ui"===e?(0,i.jsx)(et,{className:s}):"pattern"===e?(0,i.jsx)(ea,{className:s}):(0,i.jsx)(ei,{className:s}))})}function eo({step:e}){return 0===e?(0,i.jsxs)("div",{className:"flex h-[90%] w-[92%] flex-col justify-center gap-1 min-[420px]:gap-1.5 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[96%] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!w-[94%]",children:[(0,i.jsx)("div",{className:"flex min-h-0 flex-1 items-center justify-center overflow-hidden rounded-md border border-gray-100 bg-white shadow-[0_6px_16px_rgba(15,23,42,0.08)]",children:(0,i.jsx)(er,{src:$.reference,alt:"Realistic owl image reference for SVG generation",className:"h-full w-full",fallback:(0,i.jsx)(Y,{className:"h-full w-full"})})}),(0,i.jsxs)("div",{className:"homepage-hero-workflow-prompt flex items-center gap-1 rounded-md border border-[#DDE3EC] bg-white px-1.5 py-1 shadow-[0_4px_12px_rgba(15,23,42,0.05)] min-[420px]:gap-1.5 min-[420px]:px-2 min-[420px]:py-1.5","aria-label":"Prompt to turn owl reference into an SVG",children:[(0,i.jsx)("span",{className:"flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#FFF1EA] text-[#FF6B35] min-[420px]:h-5 min-[420px]:w-5 min-[2200px]:h-7 min-[2200px]:w-7",children:(0,i.jsx)(s.A,{className:"h-2.5 w-2.5 min-[420px]:h-3 min-[420px]:w-3 min-[2200px]:h-4 min-[2200px]:w-4","aria-hidden":"true"})}),(0,i.jsx)("span",{className:"homepage-hero-workflow-prompt-text min-w-0 flex-1 whitespace-normal break-words text-[8.5px] font-semibold leading-[1.15] text-[#06162F] min-[380px]:text-[9px] min-[420px]:text-[10px] xl:text-[9px] min-[1400px]:text-[9.5px] min-[1700px]:text-[10px] min-[2200px]:text-[14px]",children:"Turn this owl reference into an SVG"}),(0,i.jsx)("span",{className:"flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#FF6B35] text-white min-[420px]:h-5 min-[420px]:w-5 min-[2200px]:h-7 min-[2200px]:w-7",children:(0,i.jsx)(o.A,{className:"h-2.5 w-2.5 min-[420px]:h-3 min-[420px]:w-3 min-[2200px]:h-4 min-[2200px]:w-4","aria-hidden":"true"})})]})]}):1===e?(0,i.jsx)("div",{className:"grid h-full w-full grid-cols-2 gap-1 p-1.5 min-[420px]:gap-1.5 min-[420px]:p-2",children:z.map(e=>(0,i.jsxs)("div",{className:"flex min-h-0 flex-col items-center justify-between rounded-md border border-gray-100 bg-white px-1 py-1 shadow-[0_4px_12px_rgba(15,23,42,0.05)] min-[420px]:px-1.5 min-[420px]:py-1.5",children:[(0,i.jsx)(er,{src:e.src,alt:e.alt,className:`h-[34px] w-full min-[380px]:h-[38px] sm:h-[50px] xl:h-[44px] min-[1400px]:h-[48px] min-[1700px]:h-[58px] min-[2200px]:h-[86px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[42px] ${e.assetClassName??""}`,fallback:(0,i.jsx)(Y,{className:"h-full w-full"})}),(0,i.jsx)("span",{className:"mt-0.5 max-w-full whitespace-normal break-words text-center text-[7.5px] font-medium leading-[1.05] text-[#06162F] min-[380px]:text-[8px] min-[420px]:mt-1 min-[420px]:text-[8.5px] min-[1700px]:text-[10px] min-[2200px]:text-[14px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!mt-0 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!text-[7.5px]",children:e.label})]},e.label))}):2===e?(0,i.jsxs)("div",{className:"flex h-[90%] w-[92%] flex-col justify-center gap-1.5 min-[420px]:gap-2 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[96%] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!w-[94%]",children:[(0,i.jsx)("div",{className:"flex min-h-0 flex-1 items-center justify-center rounded-md bg-white shadow-[0_4px_12px_rgba(15,23,42,0.04)]",children:(0,i.jsx)(er,{src:$.refine,alt:"Refined editable owl SVG with matched pose and structure",className:"h-full w-full",fallback:(0,i.jsx)(Y,{className:"h-full w-full"})})}),(0,i.jsxs)("div",{className:"homepage-hero-workflow-prompt flex items-center gap-1 rounded-md border border-[#DDE3EC] bg-white px-1.5 py-1 shadow-[0_4px_12px_rgba(15,23,42,0.05)] min-[420px]:gap-1.5 min-[420px]:px-2 min-[420px]:py-1.5","aria-label":"Follow-up prompt to refine the selected owl SVG with AI",children:[(0,i.jsx)("span",{className:"flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#FFF1EA] text-[#FF6B35] min-[420px]:h-5 min-[420px]:w-5 min-[2200px]:h-7 min-[2200px]:w-7",children:(0,i.jsx)(s.A,{className:"h-2.5 w-2.5 min-[420px]:h-3 min-[420px]:w-3 min-[2200px]:h-4 min-[2200px]:w-4","aria-hidden":"true"})}),(0,i.jsx)("span",{className:"homepage-hero-workflow-prompt-text min-w-0 flex-1 whitespace-normal break-words text-[8.5px] font-semibold leading-[1.15] text-[#06162F] min-[380px]:text-[9px] min-[420px]:text-[10px] xl:text-[9px] min-[1400px]:text-[9.5px] min-[1700px]:text-[10px] min-[2200px]:text-[14px]",children:"Make this SVG cleaner and bolder"}),(0,i.jsx)("span",{className:"flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[#FF6B35] text-white min-[420px]:h-5 min-[420px]:w-5 min-[2200px]:h-7 min-[2200px]:w-7",children:(0,i.jsx)(o.A,{className:"h-2.5 w-2.5 min-[420px]:h-3 min-[420px]:w-3 min-[2200px]:h-4 min-[2200px]:w-4","aria-hidden":"true"})})]})]}):(0,i.jsxs)("div",{className:"flex h-[88%] w-[88%] flex-col items-center justify-center gap-2 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[94%] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!w-[92%]",children:[(0,i.jsx)(er,{src:$.download,alt:"SVG file card ready to download",className:"h-[70%] w-[82%] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!h-[72%] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!w-[86%]",fallback:(0,i.jsx)(Y,{className:"h-full w-full"})}),(0,i.jsxs)("span",{className:"inline-flex max-w-full items-center justify-center gap-1 rounded-md bg-[#C73500] px-2.5 py-1.5 text-[10px] font-semibold leading-none text-white shadow-[0_4px_10px_rgba(255,61,0,0.24)] min-[2200px]:gap-2 min-[2200px]:px-4 min-[2200px]:py-2 min-[2200px]:text-[15px]",children:[(0,i.jsx)(n.A,{className:"h-3 w-3 min-[2200px]:h-5 min-[2200px]:w-5","aria-hidden":"true"}),"SVG"]})]})}function en({example:e}){let t="Brand Mark"===e.label?" -translate-x-[13%]":"";return(0,i.jsxs)("div",{className:"homepage-hero-example-card flex h-[176px] w-[134px] shrink-0 flex-col items-center justify-between rounded-lg border border-gray-200 bg-white px-2 py-5 shadow-[0_12px_32px_rgba(15,23,42,0.09)] sm:h-[216px] sm:w-[150px] md:h-[220px] md:w-[146px] min-[1536px]:h-[255px] min-[1536px]:w-[154px] min-[1536px]:py-6 min-[2200px]:h-[315px] min-[2200px]:w-[210px] min-[2200px]:px-4 min-[2200px]:py-8",children:[(0,i.jsx)("div",{className:"flex min-h-0 flex-1 items-center justify-center",children:(0,i.jsx)(es,{visual:e.visual,asset:e.asset,alt:e.alt,className:`homepage-hero-example-visual h-full max-h-[118px] w-[112%] max-w-none object-contain sm:max-h-[152px] min-[1536px]:max-h-[166px] min-[2200px]:max-h-[220px]${t}`})}),(0,i.jsx)("p",{className:"mt-3 text-center text-[15px] font-medium leading-tight text-[#06162F] sm:mt-4 sm:text-[17px] min-[1536px]:text-[18px] min-[2200px]:text-[24px]",children:e.label})]})}function el(e){return(0,L.Wz)(e)}function ed(e){let[t,o]=(0,r.useState)(""),[n,b]=(0,r.useState)(!1),v=function(){let e=(0,x.useRouter)(),[t,a]=(0,r.useState)(!1),[i,s]=(0,r.useState)(""),[o,n]=(0,r.useState)(null),[l,d]=(0,r.useState)(null),c=(0,r.useRef)(null),p=(0,r.useRef)(null),m=(0,r.useRef)(!1);return(0,r.useEffect)(()=>()=>{p.current?.leave("unmount"),p.current?.dispose(),c.current?.abort()},[]),{runPaid:(0,r.useCallback)(async(t,i)=>{let r;if(m.current)return!0;

1if(t.userId&&t.userId!==i)throw Error("This submission belongs to another account. Start a new submission to continue.");if(t.jobId&&!t.batchId&&!t.funding)throw(0,C.Rf)(),Error("This saved generation belongs to the previous homepage version. Open your dashboard to find its result, or start a new submission.");m.current=!0;let o=new AbortController;c.current=o;let l=o.signal,u={...t,userId:i,funding:"credits"},h=(0,k.JO)(t,{funding:"credits"});p.current=h,d(h.startedAt);let g="admission";try{if(a(!0),n("old-ultra"===t.model?null:t.model),s("Preparing your SVG…"),await (0,C.u4)(u),!u.batchId){if(t.authRequired&&!t.admissionPending){if(!(await fetch("/api/auth/signup-bonus",{method:"POST",signal:l})).ok)throw Error("Could not finish preparing your account. Please try again.");window.dispatchEvent(new Event("creditUsed"))}await (0,C.u4)({...u,admissionPending:!0});let e=`/api/dashboard/hero-generation?${new URLSearchParams({requestId:t.requestId})}`,a=t.admissionPending?await fetch(e,{cache:"no-store",signal:l}):null;a&&404!==a.status||(a=await fetch("/api/dashboard/hero-generation",{method:"POST",headers:{"Content-Type":"application/json"},signal:l,body:JSON.stringify({source:"hero_authenticated",requestId:t.requestId,prompt:t.prompt.trim()||void 0,model:t.model,numVariations:1,referenceImages:t.uploadedImage?[t.uploadedImage.includes(",")?t.uploadedImage.split(",")[1]:t.uploadedImage]:void 0,transparentBackground:t.transparentBackground,transparentBackgroundMode:t.transparentBackgroundMode,outputAspectRatio:u.outputAspectRatio,acquisitionFlowId:t.acquisitionFlowId})}));let i=await a.json();for(;a.ok&&i.pending&&!l.aborted;)s("Preparing your saved generation…"),await new Promise(e=>setTimeout(e,2500)),a=await fetch(e,{cache:"no-store",signal:l}),i=await a.json();if(402===a.status)return h.blocked("insufficient_credits"),(0,C.Rf)(),!1;if(!a.ok)throw r=a.status,a.status<500&&409!==a.status&&(0,C.Rf)(),Error(i.error||"Could not start your SVG. Please try again.");if(!i.batchId||!i.projectId)throw Error("Could not recover your saved generation. Please open your dashboard before retrying.");u={...u,admissionPending:!1,batchId:i.batchId,jobId:i.jobId,projectId:i.projectId,designId:i.designId||i.designs?.[0]?.id},await (0,C.u4)(u)}for(h.update({job_id:u.jobId,batch_id:u.batchId}),(0,y.bZ)({..."old-ultra"===u.model?{}:{model:u.model},transparentBackgroundMode:u.transparentBackgroundMode||(u.transparentBackground?"on":"off")}),g="status";!l.aborted;){let t;h.checkpoint(),h.stage("generating"),s("Generating your SVG…");try{t=await fetch(`/api/dashboard/check-status?${new URLSearchParams({batchId:u.batchId,projectId:u.projectId})}`,{cache:"no-store",signal:l})}catch(e){if(l.aborted)throw e;h.reconnect(!0),s("Reconnecting to your generation…"),await new Promise(e=>setTimeout(e,5e3));continue}if(401===t.status)throw r=401,Error("Please sign in again to resume this generation.");if(t.ok){h.reconnect(!1);let a=await t.json(),i=a.designs||a.results||[],r=i.find(e=>e.id===u.designId)||i[0];if(r?.status==="completed")return h.complete({project_id:u.projectId,design_id:r.id}),(0,C.Rf)(),sessionStorage.removeItem("svgai_google_oauth_pending"),window.dispatchEvent(new Event("creditUsed")),h.redirected(),e.push(`/dashboard?${new URLSearchParams({project:u.projectId,focusDesign:r.id})}`),!0;if(r?.status==="failed")throw g="generation",(0,C.Rf)(),Error("Your generation could not finish. Open your dashboard to see its status before trying again.")}else h.reconnect(!0),s("Reconnecting to your generation…");await new Promise(e=>setTimeout(e,document.hidden?1e4:2500))}return!0}catch(e){throw l.aborted||h.fail(g,r),e}finally{h.dispose(),p.current===h&&(p.current=null),m.current=!1,l.aborted||a(!1)}},[e]),busy:t,stage:i,model:o,startedAt:l}}(),A=n||v.busy,I=(0,r.useRef)(null);(0,r.useEffect)(()=>{if(!A)return;let e=0,t=requestAnimationFrame(()=>{e=requestAnimationFrame(()=>{let e=I.current;if(!e)return;let t=e.getBoundingClientRect(),a=window.visualViewport,i=(a?.offsetTop||0)+88,r=(a?.offsetTop||0)+(a?.height||window.innerHeight)-24,s=t.top<i?t.top-i:t.bottom>r?t.bottom-r:0;s&&window.scrollBy({top:s,behavior:window.matchMedia("(prefers-reduced-motion: reduce)").matches?"instant":"smooth"})})});return()=>{cancelAnimationFrame(t),cancelAnimationFrame(e)}},[A]);let q=(0,r.useRef)(!1),$=(0,r.useRef)(null),[z,J]=(0,r.useState)(null),X=(0,r.useRef)(null),[K,Y]=(0,r.useState)(""),[Q,ee]=(0,r.useState)(""),[et,ea]=(0,r.useState)(null),[ei,er]=(0,r.useState)(!1),[es,ed]=(0,r.useState)(!1),[ec,ep]=(0,r.useState)(!1),[em,eu]=(0,r.useState)(!1),[eh,eg]=(0,r.useState)(0),[ex,ef]=(0,r.useState)(!1),[eb,ew]=(0,r.useState)("1024x1024"),[ev,e_]=(0,r.useState)("any"),[ey,ek]=(0,r.useState)("Not set"),[ej,eS]=(0,r.useState)("ultra"),eN=(0,r.useRef)(!1),[eE,eA]=(0,r.useState)("auto"),[eI,eF]=(0,r.useState)("auto"),[eG,eR]=(0,r.useState)("default"),eC=(0,x.useRouter)();(0,f.i7)();let[eM,eV]=(0,r.useState)(!1),[eO,eP]=(0,r.useState)(null),[eL,eD]=(0,r.useState)(!1),eT=(0,r.useRef)(!0),[eB,eH]=(0,r.useState)(null),[eU,eq]=(0,r.useState)(!1),eW=(0,r.useRef)(!1),e$=(0,r.useRef)(!1),eZ=(0,r.useRef)(!1),ez=(0,r.useRef)(!1),[eJ,eX]=(0,r.useState)(null),{user:eK}=(0,V.A)(),[eY,eQ]=(0,r.useState)(null),[e0,e1]=(0,r.useState)(null);(0,r.useEffect)(()=>{(()=>{try{let e=localStorage.getItem("svgai_uploaded_image");if(e){eQ(e);let t=localStorage.getItem("svgai_uploaded_filename");t&&e1(t);return}let t=sessionStorage.getItem("svgai_uploaded_image");if(t){eQ(t);let e=sessionStorage.getItem("svgai_uploaded_filename");e&&e1(e);return}let a=localStorage.getItem("svgai_pending_prompt");if(a){let e=JSON.parse(a);if(Date.now()-e.timestamp<864e5){e.uploadedImage&&eQ(e.uploadedImage),e.uploadedFileName&&e1(e.uploadedFileName);return}}let i=sessionStorage.getItem("pendingUploadedImage");if(i){eQ(i);let e=sessionStorage.getItem("pendingUploadedFileName");e&&e1(e)}}catch{}})()},[]);let[e2,e3]=(0,r.useState)(!1),e5=(0,r.useRef)(null),e4=(0,r.useRef)(null),e6=(0,r.useRef)(null),e8=(0,r.useRef)("upload_button"),[e7,e9]=(0,r.useState)(!1);(0,r.useEffect)(()=>

1{if(eW.current)return;eW.current=!0;let e=(0,G.iy)();(0,F.trackPostHogEvent)(G.nN.HOMEPAGE_VIEW,{...(0,G.fQ)(),...(0,G.gX)(),acquisition_flow_id:e,dashboard_v2_homepage_models:!0})},[]);let te=(0,r.useCallback)((e,a)=>{let i="examples"===e?eZ:ez;if(i.current)return;i.current=!0;let r=(0,G.Ay)()||(0,G.iy)(),s=!!t.trim(),o=!!eY;U("examples"===e?"examples_hovered":"workflow_hovered"),(0,F.trackPostHogEvent)("examples"===e?G.nN.HOMEPAGE_EXAMPLES_HOVERED:G.nN.HOMEPAGE_WORKFLOW_HOVERED,{...(0,G.fQ)(),...(0,G.gX)(),acquisition_flow_id:r,hover_area:e,pointer_type:a||"unknown",input_group:(0,G.k3)(s,o),has_prompt:s,prompt_length_bucket:(0,G.Lm)(t),has_uploaded_image:o,model:ej,dashboard_v2_homepage_models:!0})},[ej,t,eY]);(0,r.useEffect)(()=>{if(window.location.hash)return;let e=window.requestAnimationFrame(()=>{let e=document.activeElement;e&&e!==document.body&&e!==document.documentElement||e5.current?.focus({preventScroll:!0})});return()=>window.cancelAnimationFrame(e)},[]);let tt=(0,r.useRef)(!1),[ta,ti]=(0,r.useState)("auto"),tr=(0,L.BR)(ta,!0);(0,r.useEffect)(()=>{let e=(0,y.Xi)();e.transparentBackgroundMode&&ti(e.transparentBackgroundMode)},[]);let ts=(0,r.useCallback)(e=>{(0,k.oB)(G.nN.HERO_SETTING_CHANGED,{...(0,G.fQ)(),acquisition_flow_id:(0,G.Ay)(),setting:"background",value:e}),tt.current=!0,ti(e)},[]);(0,r.useEffect)(()=>{tt.current&&(0,y.bZ)({transparentBackgroundMode:ta})},[tr,ta]),(0,r.useEffect)(()=>{let e=(0,P.JY)();eH(e);let t=(0,y.Xi)();eN.current=!!t.model,eS(E((0,P.uR)(N(e)),t.model,!1)),eA("auto"),eF("auto"),eR("default"),eT.current=!1},[]),(0,r.useEffect)(()=>{let e=e=>{let t=e.detail?.country?.toUpperCase()||null;t&&eH(e=>e??t)};return window.addEventListener("svgai:country-ready",e),()=>window.removeEventListener("svgai:country-ready",e)},[]),(0,r.useEffect)(()=>{"true"===localStorage.getItem("svgai_show_advanced")&&eV(!0)},[]),(0,r.useEffect)(()=>{localStorage.setItem("svgai_show_advanced",eM.toString())},[eM]),(0,r.useEffect)(()=>{if(eY)try{localStorage.setItem("svgai_uploaded_image",eY)}catch{console.warn("Image too large for localStorage, using sessionStorage");try{sessionStorage.setItem("svgai_uploaded_image",eY)}catch{}}else localStorage.removeItem("svgai_uploaded_image"),sessionStorage.removeItem("svgai_uploaded_image")},[eY]),(0,r.useEffect)(()=>{if(e0)try{localStorage.setItem("svgai_uploaded_filename",e0)}catch{try{sessionStorage.setItem("svgai_uploaded_filename",e0)}catch{}}else localStorage.removeItem("svgai_uploaded_filename"),sessionStorage.removeItem("svgai_uploaded_filename")},[e0]);let[to,tn]=(0,r.useState)(!1),tl=(0,r.useRef)(0),[td,tc]=(0,r.useState)(!1),[tp,tm]=(0,r.useState)(null),[tu,th]=(0,r.useState)(!1),[tg,tx]=(0,r.useState)(!1),[tf,tb]=(0,r.useState)(0),tw=(0,r.useRef)(null);(0,r.useEffect)(()=>{if(!z)return;let e=window.setTimeout(()=>J(null),8e3);return()=>window.clearTimeout(e)},[z]),(0,r.useEffect)(()=>{(t.trim()||eY)&&tx(!1)},[t,eY]);let tv=(0,r.useCallback)(()=>{let e=e5.current,t=e4.current;if(!e||!t)return;let a=window.matchMedia("(max-height: 430px) and (orientation: landscape)").matches?12:16,i=window.getComputedStyle(e),r=Number.parseFloat(i.paddingLeft||"0")+Number.parseFloat(i.paddingRight||"0"),s=Math.max(1,e.clientWidth-r);t.style.width=`${s}px`,t.style.fontFamily=i.fontFamily,t.style.fontSize=i.fontSize,t.style.fontWeight=i.fontWeight,t.style.letterSpacing=i.letterSpacing,t.style.lineHeight=i.lineHeight,t.textContent=e.value||e.placeholder||" ",e.style.paddingTop=`${a}px`,e.style.paddingBottom=`${a}px`;let o=Math.ceil(t.getBoundingClientRect().height),n=e.clientHeight,l=o<=n-2*a?Math.max(a,Math.floor((n-o)/2)):a;e.style.paddingTop=`${l}px`},[]);(0,r.useLayoutEffect)(()=>{tv()},[tv,t,eY]),(0,r.useEffect)(()=>(window.addEventListener("resize",tv),()=>window.removeEventListener("resize",tv)),[tv]);let[t_,ty]=(0,r.useState)(0),{creditInfo:tk,refreshCredits:tj}=(0,M.I)(),tS=tk?.hasPaidModelAccess===!0,tN=!(0,P.uR)(N(eB))&&!tS,[tE,tA]=(0,r.useState)(!1);(0,r.useEffect)(()=>{let e=$.current?.jobId||$.current?.batchId||$.current?.admissionPending;A||e||eS(E((0,P.uR)(N(eB)),(0,y.Xi)().model,tS))},[eB,tN,A,tS]),(0,r.useEffect)(()=>{v.busy&&v.model&&eS(v.model)}

1,[v.busy,v.model]);let tI=(0,r.useCallback)(e=>{let t="ultra"===e&&tN;if((0,k.oB)(G.nN.HERO_SETTING_CHANGED,{...(0,G.fQ)(),acquisition_flow_id:(0,G.Ay)(),setting:"model",value:e,blocked_by_upgrade:t}),t)return void tA(!0);tA(!1),eN.current=!0,eS(e),(0,y.bZ)({model:e})},[tN]);(0,r.useEffect)(()=>{if(!A){ty(0),tb(0),tw.current=null;return}let e=v.startedAt||tw.current||Date.now();tw.current=e;let t=()=>{let t=Math.max(0,Date.now()-e);tb(Math.floor(t/1e3)),ty(function(e){let t=25*(Number.isFinite(e)?Math.max(0,e):0)/30;return t<10?t/10*60:t<18?60+(t-10)/8*25:t<25?85+(t-18)/7*13:Math.min(99,98+(1-Math.exp(-(t-25)/10)))}(t/1e3))};t();let a=setInterval(t,100);return()=>clearInterval(a)},[A,v.startedAt]),(0,r.useEffect)(()=>{eK?.id?(ea(eK.id),tk&&(eP({used:tk.creditsUsed,limit:tk.creditLimit}),eD(tk.isSubscribed))):ea(null)},[eK,tk]);let{clearPromptData:tF}=(0,_.Eg)(o,e_,ew,ek,void 0,eA,eF,eQ,e1,void 0,th,tm,eR);(0,r.useCallback)(e=>{e_(e),t.trim()&&(0,_.e5)({transparentBackgroundMode:ta,transparentBackground:tr,prompt:t,style:e,size:eb,aspectRatio:ey,dashboardOutputAspectRatio:"default",uploadedImage:eY||void 0,uploadedFileName:e0||void 0})},[t,eb,ey,eG,eY,e0,ta,tr]),(0,r.useCallback)(e=>{ew(e),t.trim()&&(0,_.e5)({transparentBackgroundMode:ta,transparentBackground:tr,prompt:t,style:ev,size:e,aspectRatio:ey,dashboardOutputAspectRatio:"default",uploadedImage:eY||void 0,uploadedFileName:e0||void 0})},[t,ev,ey,eG,eY,e0,ta,tr]),(0,r.useCallback)(e=>{ek(e),t.trim()&&(0,_.e5)({transparentBackgroundMode:ta,transparentBackground:tr,prompt:t,style:ev,size:eb,aspectRatio:e,dashboardOutputAspectRatio:"default",uploadedImage:eY||void 0,uploadedFileName:e0||void 0})},[t,ev,eb,eG,eY,e0,ta,tr]);let tG=(0,r.useCallback)(e=>{o(e),th(!1),tm(null),(0,_.e5)({transparentBackgroundMode:ta,transparentBackground:tr,prompt:e,style:ev,size:eb,aspectRatio:ey,modelType:ej,imagenAspectRatio:eE,dashboardOutputAspectRatio:"default",uploadedImage:eY||void 0,uploadedFileName:e0||void 0})},[ev,eb,ey,ej,eE,eG,eY,e0,ta,tr]),tR=(0,r.useCallback)((e,a,i)=>{let r=(0,G.iy)(),s=!!t.trim();(0,k.oB)(G.nN.HERO_IMAGE_UPLOADED,{upload_source:i,...(0,G.fQ)(),...(0,G.gX)(),acquisition_flow_id:r,input_group:(0,G.k3)(s,!0),has_prompt:s,prompt_length_bucket:(0,G.Lm)(t),has_uploaded_image:!0,image_mime_type:e.type||null,image_size_bucket:(0,G.Yy)(e.size),image_was_svg_upload:"image/svg+xml"===e.type.toLowerCase()||e.name.toLowerCase().endsWith(".svg"),processed_image_mime_type:a,model:ej,dashboard_v2_homepage_models:!0}),U("image_uploaded")},[ej,t]),tC=(0,r.useCallback)(async e=>{let i=e.target.files?.[0];if(!i||A)return;let r=function(e){if(e.type)return e;let t=e.name.toLowerCase().split(".").pop(),a="png"===t?"image/png":"jpg"===t||"jpeg"===t?"image/jpeg":"webp"===t?"image/webp":"svg"===t?"image/svg+xml":"";return a?new File([e],e.name,{type:a}):e}(i),s=r.type.toLowerCase();if(!function(e){let t=e.type.toLowerCase();return H.includes(t)||/\.(png|jpe?g|webp|svg)$/i.test(e.name)}(r))return void Y("Please upload a valid image file (PNG, JPG, JPEG, WebP, or SVG)");if(i.size>0xa00000)return void Y("File size must be less than 10MB");e3(!0),Y("");try{let{prepareImageFileForFunction:e}=await a.e(5252).then(a.bind(a,65252)),n=r;if("image/svg+xml"===s||i.name.toLowerCase().endsWith(".svg")){let e=await i.text(),t=function(e){let t={width:1024,height:1024};try{let a=new DOMParser().parseFromString(e,"image/svg+xml").documentElement;if(!a||"parsererror"===a.tagName.toLowerCase())return t;let i=e=>{if(!e)return 0;let t=Number.parseFloat(e);return Number.isFinite(t)&&t>0?t:0},r=i(a.getAttribute("width")),s=i(a.getAttribute("height"));if(!r||!s){let e=a.getAttribute("viewBox"),t=e?.trim().split(/[\s,]+/).map(Number)||[];4===t.length&&t.every(Number.isFinite)&&(r=r||Math.abs(t[2]),s=s||Math.abs(t[3]))}if(!r||!s)return t;let o=Math.min(1,1600/Math.max(r,s));return{width:Math.max(1,Math.round(r*o)),height:Math.max(1,Math.round(s*o))}}catch{return t}}(e),{svgToPngHandler:r}=await a.e(7243).then(a.bind(a,27243)),s=await r(e,{width:t.width,height:t.height,background:"transparent",quality:.95});if(!s.success||!s.data)throw Error("Failed to convert SVG to PNG");let o=new Blob([s.data],{type:"image/png"});n=new File([o],i.name.replace(/\.[^/.]+$/,"")||"uploaded-svg.png",{type:"image/png"})}let l=await e(n,{filename:i.name,maxDimension:1600}),d=e8.current,{vectorizeShortcut:c,prompt:p}=function(e,t){let a="vectorize_shortcut"===e;return{prompt:a?j:t,vectorizeShortcut:a}}(d,t);e9(c),c&&(o(j),th(!1),tm(null)),eQ(l.dataUrl),e1(i.name),e3(!1),eA("auto"),(0,_.e5)({transparentBackgroun

1dMode:ta,transparentBackground:tr,prompt:p||"",style:ev,size:eb,aspectRatio:ey,modelType:ej,imagenAspectRatio:"auto",dashboardOutputAspectRatio:"default",uploadedImage:l.dataUrl,uploadedFileName:i.name}),Y(""),ee(""),tR(r,l.mimeType,d)}catch(e){Y(`Failed to process ${i.name.toLowerCase().endsWith(".svg")?"SVG":"image"} file. Please try a different file.`),e3(!1),console.error("File processing error:",e)}},[t,ev,eb,ey,ej,eG,tR,ta,tr,A]),tM=(0,r.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),tl.current++,e.dataTransfer.items&&e.dataTransfer.items.length>0&&tn(!0)},[]),tV=(0,r.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),tl.current--,0===tl.current&&tn(!1)},[]),tO=(0,r.useCallback)(e=>{e.preventDefault(),e.stopPropagation()},[]),tP=(0,r.useCallback)(async e=>{e.preventDefault(),e.stopPropagation(),tn(!1),tl.current=0;let t=e.dataTransfer.files;if(t&&t.length>0){let e=t[0];e8.current="drag_drop",await tC({target:{files:[e]}})}},[tC]),tL=(0,r.useCallback)(()=>{(0,k.oB)(G.nN.HERO_IMAGE_REMOVED,{upload_source:e8.current}),e9(!1),eQ(null),e1(null),e6.current&&(e6.current.value=""),localStorage.removeItem("svgai_uploaded_image"),localStorage.removeItem("svgai_uploaded_filename"),sessionStorage.removeItem("svgai_uploaded_image"),sessionStorage.removeItem("svgai_uploaded_filename"),eA("1:1"),t||"any"!==ev||"1024x1024"!==eb||"Not set"!==ey?(0,_.e5)({transparentBackgroundMode:ta,transparentBackground:tr,prompt:t||"",style:ev,size:eb,aspectRatio:ey,modelType:ej,imagenAspectRatio:"1:1",dashboardOutputAspectRatio:"default",uploadedImage:void 0,uploadedFileName:void 0}):(0,_.SY)()},[t,ev,eb,ey,ej,eG,ta,tr]);(0,r.useCallback)(async()=>{if(t.trim()&&!td){tc(!0),tm(t);try{let e=await fetch("/api/enhance-prompt",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({prompt:t.trim(),transparentBackground:tr})}),a=await e.json();if(a.enhancedPrompt&&a.wasEnhanced){let e=tp||t;tm(e),o(a.enhancedPrompt),th(!0),(0,_.e5)({transparentBackgroundMode:ta,transparentBackground:tr,prompt:a.enhancedPrompt,modelType:ej,imagenAspectRatio:"classic"===ej?eE:void 0,nanoAspectRatio:"classic"!==ej?eI:void 0,dashboardOutputAspectRatio:"default",uploadedImage:eY||void 0,uploadedFileName:e0||void 0,wasEnhanced:!0,originalPrompt:e})}}catch(e){console.error("Enhancement failed:",e)}finally{tc(!1)}}},[t,td,tr,ej,eE,eI,eG,eY,e0,tp,ta]),(0,r.useCallback)(()=>{tp&&(o(tp),th(!1),tm(null))},[tp]),(0,r.useCallback)(async()=>{if(td)return;let e=tp||t;if(e.trim()){tc(!0);try{let t=await fetch("/api/enhance-prompt",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({prompt:e.trim(),transparentBackground:tr})}),a=await t.json();a.enhancedPrompt&&a.wasEnhanced&&(o(a.enhancedPrompt),tp||tm(e),th(!0))}catch(e){console.error("Re-enhancement failed:",e)}finally{tc(!1)}}},[t,tp,td,tr]);let tD=(0,r.useCallback)(async(e="manual")=>{if(!q.current&&!A&&!e2){q.current=!0;try{if(eq(!1),!t.trim()&&!eY){tx(!0),e5.current?.focus({preventScroll:!0});return}let a=(0,G.iy)();eX(a||null),eV(!1);let i=()=>eC.push((0,G.bG)("/pricing?ref=hero_insufficient_credits&returnUrl=%2F",a));if((0,F.trackPostHogEvent)("manual"===e?G.nN.HERO_GENERATE_CLICKED:G.nN.HERO_AUTO_SUBMISSION_STARTED,{submission_trigger:e,user_initiated:"manual"===e,...(0,G.fQ)(),...(0,G.gX)(),acquisition_flow_id:a,input_group:(0,G.k3)(!!t.trim(),!!eY),has_prompt:!!t.trim(),prompt_length_bucket:(0,G.Lm)(t),has_uploaded_image:!!eY,model:ej,output_aspect_ratio:"default",transparent_background:tr,transparent_background_mode:ta,was_enhanced:tu,is_authenticated:!!et}),"manual"===e&&U("generate_clicked"),C.V7||$.current?.userId){Y("");let r=$.current?await (0,C.Jo)():null,s=(0,C.wp)(r,{prompt:t,uploadedImage:eY||void 0,model:ej,outputAspectRatio:"default",transparentBackground:tr,transparentBackgroundMode:ta})||{version:1,requestId:crypto.randomUUID(),createdAt:Date.now(),active:!0,authRequired:!et,prompt:t,uploadedImage:eY||void 0,uploadedFileName:e0||void 0,model:ej,modelExplicit:eN.current,outputAspectRatio:"default",transparentBackground:tr,transparentBackgroundMode:ta,acquisitionFlowId:a};if((0,y.bZ)({..."classic"===s.model||"ultra"===s.model?{model:s.model}:{}

1,transparentBackgroundMode:s.transparentBackgroundMode||(s.transparentBackground?"on":"off")}),await (0,C.u4)(s),(0,F.trackPostHogEvent)(G.nN.HERO_SUBMISSION_SAVED,{request_id:s.requestId,acquisition_flow_id:s.acquisitionFlowId,submission_trigger:e,user_initiated:"manual"===e,is_authenticated:!!et,input_group:(0,G.k3)(!!s.prompt.trim(),!!s.uploadedImage)}),$.current=s,et||eq(!0),et){ed(!1),await v.runPaid(s,et)||($.current=null,i());return}}if(C.V7||(0,y.bZ)({..."classic"===ej||"ultra"===ej?{model:ej}:{},transparentBackgroundMode:ta}),!et){(0,_.e5)({transparentBackgroundMode:ta,transparentBackground:tr,prompt:t,modelType:ej,imagenAspectRatio:"classic"===ej?eE:void 0,nanoAspectRatio:"classic"!==ej?eI:void 0,dashboardOutputAspectRatio:"default",uploadedImage:C.V7?void 0:eY||void 0,uploadedFileName:e0||void 0,intent:"generate",acquisitionFlowId:a,wasEnhanced:tu,originalPrompt:tp||void 0}),U("signup_gate_opened"),ed(!0);return}if(sessionStorage.setItem("pendingPrompt",t),sessionStorage.setItem("pendingModelType",ej),sessionStorage.setItem("pendingDashboardOutputAspectRatio","default"),"classic"!==ej?sessionStorage.setItem("pendingNanoAspectRatio",eI):sessionStorage.setItem("pendingImagenAspectRatio",eE),et&&eO){let e=el(ej);if(!(eO.limit-eO.used>=e))return void i()}b(!0),Y(""),ee("");try{let e,r=new AbortController,s=setTimeout(()=>r.abort(),3e5),o=eY?eY.includes(",")?eY.split(",")[1]:eY:void 0,n={prompt:t.trim()||void 0,model:ej,numVariations:1,source:"homepage",transparentBackgroundMode:ta,referenceImages:o?[o]:void 0,transparentBackground:tr,outputAspectRatio:"default",requestId:crypto.randomUUID(),acquisitionFlowId:a},l=await fetch("/api/dashboard/generate",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n),signal:r.signal});clearTimeout(s);let d=l.headers.get("content-type");if(d&&d.includes("application/json"))try{e=await l.json()}catch(e){throw console.error("Failed to parse JSON response:",e),Error(`Failed to parse server response (Status: ${l.status})`)}else try{let e=await l.text();throw console.error("Non-JSON response received:",e.substring(0,200)),Error(`Server returned non-JSON response: ${e.substring(0,100)}...`)}catch(e){throw Error(`Failed to parse server response (Status: ${l.status})`)}if(402===l.status){i(),b(!1);return}if(429===l.status){let t=e.error||"";if(t.includes("Sign up to continue")||t.includes("sign up for a free account")||t.includes("Sign up for a free account")||t.includes("Sign up to save your designs"))eu(!1),er(!0);else if(t.includes("no credits remaining")||t.includes("lifetime credits"))i();else if(t.includes("monthly credits"))i();else{let e=(0,O.NR)(t);Y(e)}b(!1);return}if(!l.ok){let t="string"==typeof e.error?e.error:e.error?.message||`Failed to generate SVG (Status: ${l.status})`;if(t.includes("Unable to verify your device")||t.includes("sign up for a free account")||t.includes("Sign up for a free account")){er(!0),b(!1);return}throw Error(t)}if(e.success){let a=Array.isArray(e.designs)?e.designs[0]:null,i=e.designId||a?.id;if(!i)throw Error("Generated design was not saved. Please try again.");let r=new URLSearchParams,s=e.remainingCredits?.toString()??"";if(s&&r.set("remaining",s),r.set("prompt",t),r.set("source","homepage"),r.set("designId",i),r.set("model",ej),tr&&r.set("transparent","true"),e.deferred&&r.set("deferred","true"),e.immediateProcessing&&r.set("immediateProcessing","true"),eO){let t=Number(e.creditsUsed)||el(ej);eP(e=>e?{...e,used:e.used+t}:null),window.dispatchEvent(new Event("creditUsed")),tj()}eC.push(`/results?${r.toString()}`);return}{let t="string"==typeof e.error?e.error:e.error?.message||"Failed to generate SVG";throw Error(t)}}catch(e){if(console.error("\uD83D\uDD34 [API] Request failed:",e),!Q){let t;if("AbortError"===e.name)t="classic"!==ej?"Ultra model is experiencing high demand. Your credits have been refunded. Try Classic model in the meantime!":"High traffic on our servers. Your credits may have been used - please check your dashboard.";else if((t=(0,O.NR)(e)).includes("Unable to verify your device")||t.includes("sign up for a free account")||t.includes("Sign up for a free account")||t.includes("Sign up to save your designs")){er(!0),b(!1);return}Y(t),b(!1)}}finally{Q||b(!1)}}catch(e){e instanceof DOMException&&"AbortError"===e.name||Y(e instanceof Error?e.message:"Could not preserve your submission. Please try again.")}finally{q.current=!1}}},[t,ev,eb,ey,eE,eI,eG,ej,et,eO,eL,eC,tj,Q,eY,e0,tr,tu,tp,v.runPaid,A,e2,ta]);(0,r.useEffect)(()=>{let e=!1;return(0,C.Jo)().then(t=>{if(!e){if(!t){"1"===new URLSearchParams(window.location.search).get("heroResume")&&Y("Your draft is not available in this browser. Return to the browser where you started, or enter your prompt and reattach your image here.");return}o(t.prompt),e9(!!t.uploadedImage&&t.prompt===j),eQ(t.uploadedImage||null),e1(t.uploadedFileName||null),t.active&&(eS(t.model),eR(t.outputAspectRatio),eN.current=!0===t.modelExplicit,tt.current=!0,ti((0,L.$z)(t.transparentBackgroun

1dMode,(0,L.Ij)(t.transparentBackground)||"on"))),t.active&&(C.V7||t.userId)&&($.current=t,eq(!0))}}).catch(t=>{e||Y(t.message)}),()=>{e=!0}},[]),(0,r.useEffect)(()=>{if(C.V7)return;let e=()=>{let e=(0,P.JY)();(0,P.av)(!0,e)&&eS("classic"),eq(!0)};return window.addEventListener("svgai-auto-generate",e),()=>window.removeEventListener("svgai-auto-generate",e)},[]),(0,r.useEffect)(()=>{if(!eU||!et||!t.trim()&&!eY||A)return;let e=$.current;if(e?.authRequired&&(!e.userId||e.userId===et)&&X.current!==e.requestId){X.current=e.requestId;let t=!1;try{t=sessionStorage.getItem("svgai_hero_signin_notice_request")===e.requestId,sessionStorage.setItem("svgai_hero_signin_notice_request",e.requestId)}catch{}t||J(e.requestId)}eq(!1),tD("auto_resume")},[eU,et,t,eY,tD,A]);let tT=(0,i.jsxs)("div",{className:"grid min-w-0 grid-cols-1 items-center gap-2 min-[420px]:grid-cols-[84px_minmax(0,1fr)] min-[420px]:gap-3",children:[(0,i.jsx)("span",{className:"text-xs font-medium text-gray-500",children:"Background"}),(0,i.jsx)("div",{className:"grid min-w-0 grid-cols-[0.7fr_1.1fr_1.2fr] rounded-lg bg-gray-100 p-1",role:"group","aria-label":"Background setting",children:[{value:"auto",label:"Auto",hint:"Use automatic background settings"},{value:"on",label:"Transparent",hint:"Remove background"},{value:"off",label:"Keep background",hint:"Keep the background in your design"}].map(e=>(0,i.jsx)("button",{type:"button","aria-pressed":ta===e.value,disabled:A||e2,title:e.hint,onClick:()=>ts(e.value),className:`min-h-10 min-w-0 rounded-md px-1.5 py-2 text-xs leading-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#FF7043]/40 disabled:cursor-not-allowed disabled:opacity-50 ${ta===e.value?"bg-white text-[#FF7043] shadow-sm":"text-gray-500 hover:text-gray-700"}`,children:e.label},e.value))})]}),tB=(0,r.useMemo)(()=>{let e=!!t.trim(),a=!!eY;return{...(0,G.fQ)(),...(0,G.gX)(),acquisition_flow_id:eJ||(0,G.Ay)(),signup_modal_variant:"homepage_generate",input_group:(0,G.k3)(e,a),has_prompt:e,prompt_length_bucket:(0,G.Lm)(t),has_uploaded_image:a,model:ej,output_aspect_ratio:"default",transparent_background:tr,transparent_background_mode:ta,dashboard_v2_homepage_models:!0}},[eG,ej,t,eJ,tr,eY,ta]),tH=(0,i.jsxs)("div",{className:"grid min-w-0 grid-cols-1 items-center gap-2 min-[420px]:grid-cols-[84px_minmax(0,1fr)] min-[420px]:gap-3",children:[(0,i.jsx)("span",{className:"text-xs font-medium text-gray-500",children:"Model"}),(0,i.jsx)("div",{className:"grid min-w-0 grid-cols-2 rounded-lg bg-gray-100 p-1",role:"group","aria-label":"Generation model",children:["classic","ultra"].map(e=>(0,i.jsxs)("button",{type:"button",onClick:()=>tI(e),disabled:A||e2,"aria-pressed":ej===e,className:`inline-flex min-h-10 min-w-0 items-center justify-center gap-1 rounded-md px-3 py-2 text-xs capitalize transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#FF7043]/40 disabled:opacity-50 ${ej===e?"bg-white text-gray-900 shadow-sm":"text-gray-500 hover:text-gray-700"}`,children:[e,"ultra"===e&&tN&&(0,i.jsx)(l.A,{className:"h-3 w-3","aria-label":"Upgrade required"})]},e))})]});return(0,i.jsxs)("section",{className:"homepage-hero-section relative overflow-hidden bg-[#fefcfb] py-3 sm:py-7 lg:py-8 xl:py-10 min-[2200px]:py-16 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!py-5 [@media_(max-height:430px)_and_(orientation:landscape)]:!py-0",children:[z&&(0,i.jsxs)("div",{className:"fixed inset-x-4 top-20 z-50 mx-auto flex max-w-md items-start gap-3 rounded-xl border border-emerald-100 bg-white px-4 py-3 shadow-lg",role:"status","aria-live":"polite",children:[(0,i.jsx)(d.A,{className:"mt-0.5 h-5 w-5 shrink-0 text-emerald-600","aria-hidden":"true"}),(0,i.jsxs)("div",{className:"min-w-0 flex-1",children:[(0,i.jsx)("p",{className:"text-sm font-medium text-[#18345F]",children:"Signed in successfully"}),A&&!K&&!Q&&(0,i.jsx)("p",{className:"mt-0.5 text-xs text-gray-500",children:v.busy?v.stage||"Preparing your SVG…":"Generating your SVG…"})]}),(0,i.jsx)("button",{type:"button",onClick:()=>J(null),"aria-label":"Dismiss sign-in notification",className:"-m-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-gray-400 hover:bg-gray-50 hover:text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-300",children:(0,i.jsx)(c.A,{className:"h-4 w-4","aria-hidden":"true"})})]}),(0,i.jsxs)("div",{className:"relative z-10 mx-auto w-full max-w-[1640px] px-5 sm:px-8 xl:px-14 min-[2200px]:max-w-[2200px] min-[2200px]:px-16 min-[3200px]:max-w-[2500px]",children:[(0,i.jsxs)("div",{className:"homepage-hero-grid grid grid-cols-1 items-start gap-8 min-[1536px]:grid-cols-[minmax(0,0.95fr)_minmax(560px,1.05fr)] min-[1536px]:gap-10 min-[2200px]:grid-cols-[minmax(0,0.9fr)_minmax(780px,1.1fr)] min-[2200px]:gap-20 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!gap-4",children:[(0,i.jsxs)("div",{className:"homepage-hero-copy mx-auto w-full max-w-[690px] min-[1536px]:mx-0 min-[1536px]:pt-10 min-[2200px]:max-w-[860px] min-[2200px]:pt-36 min-[3200px]:max-w-[940px] [@media_(max-height:430px)_and_(orientation:landscape)]:!pt-0",children:[(0,i.jsxs)("h1",{className:"homepage-hero-title mb-2 text-center text-[30px] font-bold leading-[1.02] text-[#06162F] max-[370px]:text-[29px] sm:mb-4 sm:text-[46px] md:text-[56px] min-[1536px]:!text-left min-[1536px]:text-[58px] min-[2200px]:text-[96px] min-[3200px]:text-[104px] [@media_(max-height:430px)_and_(orientation:landscape)]:!mb-2 [@media_(max-height:430px)_and_(orientation:landscape)]:!text-[34px]",children:[(0,i.jsxs)("span",{className:"sm:whitespace-nowrap",children:[(0,i.jsx)("span",{children:"AI "}),(0,i.jsx)("span",{className:"text-[#C73500]",children:"SVG Generator"})]}),(0,i.jsx)("span",{className:"homepage-hero-subtitle mt-2 block whitespace-nowrap text-[20px] font-bold leading-tight text-[#06162F] max-[370px]:text-[18px] sm:mt-4 sm:text-[30px] md:text-[34px] min-[1536px]:text-[34px] min-[2200px]:text-[48px] [@media_(max-height:430px)_and_(orientation:landscape)]:!mt-1 [@media_(max-height:430px)_and_(orientation:landscape)]:!text-[20px]",children:"Generate Editable SVGs With AI"})]}),(0,i.jsx)("p",{className:"homepage-hero-description mx-auto mb-4 max-w-[640px] text-center text-[13px] leading-[1.35] text-[#18345F] sm:mb-6 sm:text-[18px] min-[1536px]:mx-0 min-[1536px]:!text-left min-[1536px]:text-[20px] min-[2200px]:max-w-[780px] min-[2200px]:text-[23px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!mb-4 [@media_(max-height:430px)_and_(orientation:landscape)]:!mb-2 [@media_(max-height:430px)_and_(orientation:landscape)]:!text-[13px] [@media_(max-height:430px)_and_(orientation:landscape)]:!leading-[1.28]",children:"SVG AI is an AI SVG generator that turns a text prompt into a clean, editable SVG. Add an optional reference image to guide style. Use it as an AI SVG maker for illustrations, icons, logos, characters, patterns, stickers, web graphics, and custom vector designs — refine with AI edits and download."}),(0,i.jsxs)("div",{className:"p-0",children:[(0,i.jsxs)("div",{className:`hero-input-shell relative flex w-full min-w-0 overflow-visible rounded-lg border bg-white transition-all duration-200 ${!et?"border-[#FF6A3D]/80 shadow-[0_8px_18px_rgba(255,61,0,0.08)] hover:border-[#FF3D00] hover:shadow-[0_10px_22px_rgba(255,61,0,0.11)] focus-within:!border-[#FF3D00] focu

1s-within:!shadow-[0_0_0_3px_rgba(255,61,0,0.11),0_12px_26px_rgba(255,61,0,0.10)]":to?"border-gray-400 shadow-md":"border-gray-200 shadow-sm focus-within:!border-primary focus-within:!shadow-md hover:border-gray-300 hover:shadow-md"}`,"data-dragging":to?"true":"false","data-signed-out":et?"false":"true",onDragEnter:tM,onDragLeave:tV,onDragOver:tO,onDrop:tP,children:[(0,i.jsx)("div",{className:"hero-input-upload-slot flex shrink-0 items-stretch border-r border-gray-200",children:eY?(0,i.jsxs)("button",{type:"button",className:"hero-input-preview relative m-2 flex w-[82px] shrink-0 items-center justify-center rounded-lg bg-white p-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#FF7043]/40 disabled:cursor-not-allowed sm:w-[108px] [@media_(max-height:430px)_and_(orientation:landscape)]:!m-1 [@media_(max-height:430px)_and_(orientation:landscape)]:!w-[68px]",onClick:tL,disabled:A,title:"Remove reference image","aria-label":"Remove reference image",children:[(0,i.jsx)("img",{src:eY,alt:"Reference image preview",className:"h-[70px] max-h-full w-full object-contain sm:h-[88px] [@media_(max-height:430px)_and_(orientation:landscape)]:!h-[50px]"}),(0,i.jsx)("span",{className:"absolute -right-1 -top-1 flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 shadow-sm",children:(0,i.jsx)(c.A,{className:"h-3.5 w-3.5"})})]}):(0,i.jsxs)("button",{type:"button",onClick:()=>{e8.current="upload_button",e6.current?.click()},disabled:e2||A,className:"homepage-hero-upload hero-input-upload-button group flex cursor-pointer flex-col items-center justify-center gap-1 transition-all hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50","aria-label":"Upload an optional reference image",title:"Add optional reference image (PNG, JPG, WebP, SVG)",children:[e2?(0,i.jsx)(p.A,{className:"h-5 w-5 animate-spin text-gray-400"}):(0,i.jsxs)("svg",{className:"hero-input-upload-icon h-7 w-7 text-[#06162F] transition-colors group-hover:text-gray-700 sm:h-9 sm:w-9 [@media_(max-height:430px)_and_(orientation:landscape)]:!h-6 [@media_(max-height:430px)_and_(orientation:landscape)]:!w-6",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:[(0,i.jsx)("path",{d:"M0 0h24v24H0V0z",fill:"none"}),(0,i.jsx)("path",{d:"M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z"})]}),(0,i.jsx)("span",{className:"hero-input-upload-label",children:"Upload"})]})}),(0,i.jsx)("div",{ref:e4,className:"pointer-events-none invisible absolute left-0 top-0 whitespace-pre-wrap break-words","aria-hidden":"true"}),(0,i.jsx)(g.T,{id:"prompt-input",ref:e5,className:"homepage-hero-textarea min-h-[108px] min-w-0 flex-1 resize-none border-0 bg-transparent px-5 py-4 text-[15px] leading-snug text-[#18345F] caret-[#FF3D00] placeholder:text-[#8491AA] focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 sm:min-h-[126px] sm:px-6 sm:text-[18px] md:min-h-[132px] lg:min-h-[126px] lg:text-[16px] xl:min-h-[138px] xl:text-[18px] min-[2200px]:min-h-[220px] min-[2200px]:text-[20px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!min-h-[104px] [@media_(max-height:430px)_and_(orientation:landscape)]:!min-h-[74px] [@media_(max-height:430px)_and_(orientation:landscape)]:!py-3 [@media_(max-height:430px)_and_(orientation:landscape)]:!text-[15px]",placeholder:eY?"Describe how this reference should guide the SVG":"Describe the SVG you want to generate",value:t,readOnly:A,onKeyDown:e=>(0,C.uM)(e,A||e2||q.current,tD),"aria-keyshortcuts":"Enter",onChange:e=>{let t=e.target.value;o(t);let a=(0,G.Ay)();t.trim()&&!e$.current&&(e$.current=!0,(0,F.trackPostHogEvent)(G.nN.HERO_PROMPT_STARTED,{...(0,G.fQ)(),...(0,G.gX)(),acquisition_flow_id:a,input_group:(0,G.k3)(!!t.trim(),!!eY),has_prompt:!!t.trim(),prompt_length_bucket:(0,G.Lm)(t),has_uploaded_image:!!eY,model:ej,dashboard_v2_homepage_models:!0}),U("prompt_started")),tu&&(th(!1),tm(null)),t.trim()&&(0,_.e5)({transparentBackgroun

1dMode:ta,transparentBackground:tr,prompt:t,imagenAspectRatio:"classic"===ej?eE:void 0,nanoAspectRatio:"classic"!==ej?eI:void 0,dashboardOutputAspectRatio:"default",modelType:ej,uploadedImage:eY||void 0,uploadedFileName:e0||void 0,acquisitionFlowId:a})},"aria-label":"Enter text prompt for SVG generation",autoComplete:"off",spellCheck:"false"}),(0,i.jsx)("input",{ref:e6,id:"svg-reference-image",name:"reference-image","aria-label":"Optional reference image for SVG generation",type:"file",accept:"image/png,image/jpeg,image/jpg,image/webp,image/svg+xml,.svg",onChange:tC,className:"hidden"})]}),(0,i.jsxs)("div",{className:"px-1 mt-3",children:[(0,i.jsx)(R,{onSelectPrompt:tG,hasUploadedImage:!!eY,disabled:A||e2}),tg&&(0,i.jsxs)("div",{className:"mt-3 flex items-center gap-2 text-sm text-[#18345F] [@media_(max-height:430px)_and_(orientation:landscape)]:!mt-1 [@media_(max-height:430px)_and_(orientation:landscape)]:!text-xs",children:[(0,i.jsx)(s.A,{className:"h-4 w-4 shrink-0 text-[#FF3D00]"}),(0,i.jsx)("span",{children:"Add an image or enter a prompt to enable generation."})]}),(0,i.jsxs)("div",{className:"mt-3",children:[(0,i.jsxs)("button",{type:"button",onClick:()=>{let e=!eM;eV(e),(0,k.oB)(G.nN.HERO_OPTIONS_TOGGLED,{expanded:e,...(0,G.fQ)(),acquisition_flow_id:(0,G.Ay)(),is_authenticated:!!et,has_uploaded_image:!!eY})},"aria-expanded":eM,"aria-controls":"hero-generation-options",className:"inline-flex items-center gap-1.5 py-1 text-xs text-gray-500 transition-colors hover:text-gray-700",children:[(0,i.jsx)(m.A,{className:"h-3.5 w-3.5"})," Options",(0,i.jsx)(u.A,{className:`h-3.5 w-3.5 transition-transform ${eM?"rotate-180":""}`})]}),eM&&(0,i.jsxs)("div",{id:"hero-generation-options",className:"mt-2 min-w-0 space-y-3 rounded-xl border border-gray-100 bg-white/70 p-3 sm:p-4",children:[tH,tT,tE&&(0,i.jsxs)("div",{className:"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500",role:"status",children:[(0,i.jsx)("span",{children:"Ultra requires purchased credits."}),(0,i.jsx)(w(),{href:"/pricing?ref=hero_ultra",onClick:()=>(0,k.oB)(G.nN.HERO_MODEL_UPGRADE_CLICKED,{source:"hero_options"}),className:"font-medium text-[#FF7043] hover:underline",children:"View plans"})]})]})]}),!C.V7&&et&&eO&&(t.trim()||eY)&&eO.limit-eO.used<el(ej)&&!A?(0,i.jsx)(w(),{href:"/pricing",className:"mt-5 inline-block w-full rounded-lg border border-[#D93400]/20 bg-[#C73500] py-5 text-center text-xl font-semibold !text-white shadow-[0_2px_4px_rgba(15,23,42,0.10)] transition-colors duration-150 hover:bg-[#AF2D00] hover:shadow-[0_3px_7px_rgba(15,23,42,0.12)] focus:outline-none focus:ring-2 focus:ring-[#FF7043]/25 [&>*]:!text-white",children:(0,i.jsxs)("span",{className:"flex items-center justify-center !text-white",children:[(0,i.jsx)(s.A,{className:"mr-2 h-5 w-5 !text-white"}),(0,i.jsx)("span",{className:"!text-white",children:"Get Credits to Generate"})]})}):(0,i.jsx)("button",{ref:I,className:"homepage-hero-cta mt-3 min-h-[54px] w-full rounded-lg border border-[#D93400]/20 bg-[#C73500] py-3 text-[18px] font-semibold text-white shadow-[0_2px_4px_rgba(15,23,42,0.10)] transition-colors duration-150 hover:bg-[#AF2D00] hover:shadow-[0_3px_7px_rgba(15,23,42,0.12)] focus:outline-none focus:ring-2 focus:ring-[#FF7043]/25 disabled:cursor-not-allowed disabled:opacity-60 sm:mt-5 sm:min-h-[70px] sm:py-5 sm:text-xl lg:min-h-[66px] xl:min-h-[68px] min-[2200px]:min-h-[82px] min-[2200px]:text-2xl [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!mt-4 [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!min-h-[56px] [@media_(min-width:1280px)_and_(max-width:1535px)_and_(max-height:700px)]:!py-3 [@media_(max-height:430px)_and_(orientation:landscape)]:!mt-1 [@media_(max-height:430px)_and_(orientation:landscape)]:!min-h-[40px] [@media_(max-height:430px)_and_(orientation:landscape)]:!py-2 [@media_(max-height:430px)_and_(orientation:landscape)]:!text-[17px]",onClick:()=>void tD("manual"),disabled:A||e2,children:A?(0,i.jsxs)("span",{className:"flex flex-col items-center justify-center",children:[(0,i.jsxs)("span",{className:"flex items-center",children:[(0,i.jsx)(p.A,{className:"animate-spin mr-2 h-5 w-5"}),v.busy?v.stage:"Generating your SVG"]}),(0,i.jsx)("span",{className:"mt-1 text-xs font-normal opacity-90","aria-live":"off",children:S(tf)})]}):(0,i.jsxs)("span",{className:"flex items-center justify-center",children:[(0,i.jsx)(s.A,{className:"mr-2 h-5 w-5"}),"Generate SVG"]})}),A&&(0,i.jsx)("div",{className:"w-full h-1 bg-gray-200 rounded mt-2 overflow-hidden",role:"progressbar","aria-label":"Estimated SVG generation progress","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(t_),"aria-valuetext":S(tf),children:(0,i.jsx)("div",{className:"h-full bg-gradient-to-r from-[#FF7043] to-[#FFA726] transition-all duration-100 ease-linear",style:{width:`${t_}%`}})}),(K||Q)&&(0,i.jsx)("div",{className:"mt-2 text-sm text-red-600 bg-red-50 p-2.5 rounded-lg",children:K||Q})]})]})]}),(0,i.jsx)("div",{className:"homepage-hero-showcase w-full min-[2200px]:pt-20",children:(0,i.jsxs)("div",{className:"homepage-hero-showcase-inner mx-auto max-w-[790px] min-[2200px]:max-w-[1080px] min-[3200px]:max-w-[1180px]",children:[(0,i.jsx)("h2",{className:"homepage-hero-examples-title mb-4 text-center text-[19px] font-bold leading-tight text-[#06162F] sm:mb-8 sm:text-[24px] min-[1536px]:mb-8 min-[1536px]:text-[27px] min-[2200px]:text-[34px]",children:"SVG Examples You Can Generate"}),(0,i.jsx)("div",{className:"homepage-hero-examples-marquee relative overflow-hidden","aria-label":"SVG example categories",onPointerEnter:e=>te("examples",e.pointerType),children:(0,i.jsxs)("div",{className:"homepage-hero-examples-track flex w-max gap-3 sm:gap-4 min-[1536px]:gap-4 min-[2200px]:gap-6",children:[W.map((e,t)=>(0,i.jsx)(en,{example:e},`primary-${e.label}-${t}`)),W.map((e,t)=>(0,i.jsx)(en,{example:e},`duplicate-${e.label}-${t}`))]})}),(0,i.jsxs)("div",{className:"homepage-hero-workflow mt-8 sm:mt-9 min-[1536px]:mt-6",onPointerEnter:e=>te("workflow",e.pointerType),children:[(0,i.jsx)("h2",{className:"homepage-hero-workflow-title mb-6 text-center text-[20px] font-bold leading-tight text-[#06162F] sm:mb-7 sm:text-[22px] min-[1536px]:mb-5 min-[1536px]:text-[23px] min-[2200px]:text-[30px]",children:"From Text Prompt or Image Reference to Editable SVG"}),(0,i.jsx)("div",{className:"homepage-hero-workflow-grid grid grid-cols-2 gap-x-3 gap-y-4 sm:gap-4 xl:grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] xl:items-start xl:gap-2 min-[2200px]:gap-6",children:Z.map((e,t)=>(0,i.jsxs)("div",{className:"contents",children:[(0,i.jsxs)("div",{className:"min-w-0",children:[(0,i.jsx)("div",{className:"homepage-hero-workflow-card flex h-[142px] items-center justify-center rounded-lg border border-gray-200 bg-white shadow-[0_10px_26px_rgba(15,23,42,0.08)] sm:h-[176px] xl:h-[154px] min-[1400px]:h-[164px] min-[1700px]:h-[180px] min-[2200px]:h-[250px]",children:(0,i.jsx)(eo,{step:t})}),(0,i.jsxs)("div",{className:"homepage-hero-workflow-label mt-2 flex items-start gap-1.5 sm:mt-3 sm:gap-2",children:[(0,i.jsx)("span",{className:"flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-[#FF3D00] text-[12px] font-medium leading-none text-[#FF3D00] sm:h-6 sm:w-6 sm:text-[15px] xl:h-5 xl:w-5 xl:text-[12px] min-[1400px]:h-6 min-[1400px]:w-6 min-[1400px]:text-[15px]",children:t+1}

1),(0,i.jsx)("p",{className:"min-w-0 whitespace-normal break-words text-[13px] leading-tight text-[#06162F] min-[420px]:text-[14px] sm:text-[16px] xl:text-[13px] min-[1400px]:text-[14px] min-[1700px]:text-[16px] min-[2200px]:text-[20px]",children:e})]})]}),t<Z.length-1&&(0,i.jsx)("div",{className:"homepage-hero-workflow-arrow hidden h-[154px] items-center justify-center xl:flex min-[1400px]:h-[164px] min-[1700px]:h-[180px] min-[2200px]:h-[250px]",children:(0,i.jsx)(h.A,{className:"h-5 w-5 text-[#06162F] min-[1400px]:h-6 min-[1400px]:w-6 min-[1700px]:h-7 min-[1700px]:w-7 min-[2200px]:h-10 min-[2200px]:w-10","aria-hidden":"true"})})]},e))})]})]})})]}),(0,i.jsx)("div",{className:"homepage-hero-seo-links max-w-4xl mx-auto mt-16 mb-1 min-[1536px]:mt-24 min-[2200px]:mt-44",children:(0,i.jsxs)("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 text-center",children:[(0,i.jsxs)("div",{className:"p-2 bg-white rounded-lg border border-gray-100 shadow-sm",children:[(0,i.jsx)("h3",{className:"font-medium text-xs mb-0.5",children:"SVG Icon Generator"}),(0,i.jsx)("p",{className:"text-[11px] text-gray-600 mb-1",children:"Create SVG icons and small UI icon sets from text prompts."}),(0,i.jsxs)("button",{type:"button",className:"text-[#B93812] hover:underline text-[11px] inline-flex items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",onClick:()=>o("Dashboard icon set with analytics, user, settings, and notification symbols, consistent flat style, single accent color"),children:["Try SVG Icon Prompt",(0,i.jsx)(h.A,{className:"ml-1 h-2.5 w-2.5"})]})]}),(0,i.jsxs)("div",{className:"p-2 bg-white rounded-lg border border-gray-100 shadow-sm",children:[(0,i.jsx)("h3",{className:"font-medium text-xs mb-0.5",children:"SVG Logo Generator"}),(0,i.jsx)("p",{className:"text-[11px] text-gray-600 mb-1",children:"Generate logo marks and brand concepts as SVG files you can refine and download."}),(0,i.jsxs)("button",{type:"button",className:"text-[#B93812] hover:underline text-[11px] inline-flex items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",onClick:()=>o("Minimal eco logo 'TerraBloom' with sprouting seedling icon, fresh green and charcoal text, clean lines."),children:["Try SVG Logo Prompt",(0,i.jsx)(h.A,{className:"ml-1 h-2.5 w-2.5"})]})]}),(0,i.jsxs)("div",{className:"p-2 bg-white rounded-lg border border-gray-100 shadow-sm",children:[(0,i.jsx)("h3",{className:"font-medium text-xs mb-0.5",children:"Text Prompt to SVG"}),(0,i.jsx)("p",{className:"text-[11px] text-gray-600 mb-1",children:"Describe what you want — text prompt or optional image reference — and SVG AI generates an editable SVG."}),(0,i.jsxs)("button",{type:"button",className:"text-[#B93812] hover:underline text-[11px] inline-flex items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",onClick:()=>o("Launch Day typography graphic with crisp block lettering, simple spark accents, and a clean SVG-friendly layout"),children:["Try Text to SVG Prompt",(0,i.jsx)(h.A,{className:"ml-1 h-2.5 w-2.5"})]})]}),(0,i.jsxs)("div",{className:"p-2 bg-white rounded-lg border border-gray-100 shadow-sm",children:[(0,i.jsx)("h3",{className:"font-medium text-xs mb-0.5",children:"AI SVG Editor"}),(0,i.jsx)("p",{className:"text-[11px] text-gray-600 mb-1",children:"Refine SVGs with follow-up prompts and focused edits — color, layout, and details."}),(0,i.jsxs)("button",{type:"button",className:"text-[#B93812] hover:underline text-[11px] inline-flex items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",onClick:()=>o("Create a clean app badge, then refine it with warmer colors, bolder outlines, and fewer details"),children:["Try Editing Prompt",(0,i.jsx)(h.A,{className:"ml-1 h-2.5 w-2.5"})]})]})]})})]}),ei&&(0,i.jsx)(D,{isOpen:ei,onClose:()=>er(!1),generationsUsed:et?eO?.used||0:1,isSoftPrompt:em,onContinueAsGuest:void 0,isAuthenticated:!!et,isSubscribed:eL,preservePrompt:!0,source:"homepage"}),es&&(0,i.jsx)(T,{isOpen:es,onClose:e=>

1{ed(!1),C.V7&&!e&&((0,C.Rf)(),$.current=null,eq(!1))},analyticsContext:tB,redirectPath:(0,G.bG)(C.V7?C.BC:"/dashboard?preservePrompt=true&autogen=signup",eJ||(0,G.Ay)())}),ec&&(0,i.jsx)(B,{isOpen:!0,onClose:()=>ep(!1),triggerDelay:0,generationType:"svg",isOutOfCredits:!0})]})}},66474:(e,t,a)=>{"use strict";a.d(t,{A:()=>i});let i=(0,a(19946).A)("ChevronDown",[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]])},92138:(e,t,a)=>{"use strict";a.d(t,{A:()=>i});let i=(0,a(19946).A)("ArrowRight",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"m12 5 7 7-7 7",key:"xquz4c"}]])},93381:(e,t,a)=>{"use strict";a.d(t,{default:()=>n});var i=a(95155),r=a(34964),s=a(12115);function o({text:e,maxLength:t=60}){let[a,r]=(0,s.useState)(!1);if(e.length<=t)return(0,i.jsx)("span",{children:e});let o=a?e:`${e.substring(0,t)}...`;return(0,i.jsxs)("span",{className:"inline-flex items-center gap-1",children:[o,(0,i.jsx)("button",{className:"p-0 h-auto text-xs font-medium text-slate-700 hover:text-slate-900 bg-transparent border-none cursor-pointer",onClick:()=>r(!a),children:a?"See less":"See more"})]})}function n(){let[e,t]=(0,s.useState)(!1),[a,n]=(0,s.useState)(!1),[l,d]=(0,s.use

1State)(!1),c=[{id:"logos",label:"AI SVG Logos & Branding",shortLabel:"Logos"},{id:"illustrations",label:"AI SVG Illustrations & Art",shortLabel:"Illustrations"},{id:"icons",label:"AI SVG Icons & UI Elements",shortLabel:"Icons"}],p={logos:[{title:"Pet Care Logo",prompt:"Pet care logo with a paw print, house roof, heart, and readable wordmark",image:"/homepage-proof/2026-05/svg/logo-svg-generator-pet-care-logo.svg",alt:"Logo SVG generator use case with a pet care logo, paw, roof, heart, and wordmark"},{title:"Design Studio Logo",prompt:"Design studio logo with grid tiles, a spark mark, and a readable wordmark",image:"/homepage-proof/2026-05/svg/svg-logo-creator-design-studio-logo.svg",alt:"SVG logo creator use case for a design studio with grid tiles and spark mark"},{title:"Fintech Monogram",prompt:"Fintech monogram logo with a deep teal N mark and ledger-inspired geometry",image:"/homepage-proof/2026-05/svg/ai-svg-logo-generator-fintech-monogram.svg",alt:"AI SVG logo generator use case with a fintech monogram logo mark"},{title:"SaaS Checkmark Mark",prompt:"B2B SaaS logo mark with a polished checkmark, rounded frame, and crisp vector shape",image:"/homepage-proof/2026-05/svg/ai-svg-logo-generator-saas-checkmark-mark.svg",alt:"AI SVG logo generator use case with a polished SaaS checkmark logo mark"},{title:"Home Services Mark",prompt:"Home services logo mark with a roofline, location pin, and keyhole",image:"/homepage-proof/2026-05/svg/svg-ai-logo-generator-real-estate-mark.svg",alt:"SVG AI logo generator use case with a home roof, location pin, and keyhole mark"},{title:"Coffee Brand Mark",prompt:"Specialty coffee brand mark with a bold cup shape, bean detail, and clean badge form",image:"/homepage-proof/2026-05/svg/svg-logo-maker-coffee-brand-mark-alt.svg",alt:"SVG logo maker use case with a specialty coffee brand logo mark"},{title:"Fitness App Mark",prompt:"Fitness app logo mark with a mountain peak, heartbeat line, and motion arc",image:"/homepage-proof/2026-05/svg/svg-ai-logo-generator-fitness-mark-alt.svg",alt:"SVG AI logo generator example with a fitness app mountain and heartbeat logo mark"},{title:"Coffee Shop Logo",prompt:"Coffee shop logo with a cup, harbor wave, and simple readable brand layout",image:"/homepage-proof/2026-05/svg/svg-logo-maker-coffee-brand-logo.svg",alt:"SVG logo maker example with a clean coffee shop logo and readable brand layout"},{title:"SaaS Security Mark",prompt:"Minimal B2B SaaS security logo mark with a shield-check symbol",image:"/homepage-proof/2026-05/svg/svg-logo-generator-premium-saas-mark.svg",alt:"SVG logo generator example with a clean SaaS security shield-check logo mark"},{title:"Coffee Cup Logo",prompt:"Minimal coffee shop logo mark with a cup silhouette and coffee bean cutout",image:"/homepage-proof/2026-05/svg/svg-logo-maker-coffee-cup-mark.svg",alt:"SVG logo maker example with a clean coffee cup and bean logo mark"},{title:"Home Service Badge",prompt:"Local home service logo badge with a roof, checkmark, sparkle, and circular frame",image:"/homepage-proof/2026-05/svg/svg-logo-maker-local-service-badge.svg",alt:"SVG logo maker example with a local home service badge logo"},{title:"Eco Startup Logo",prompt:"Eco startup logo with a circular leaf arrow mark in green and lime",image:"/homepage-proof/2026-05/svg/logo-svg-generator-eco-startup-logo.svg",alt:"Logo SVG generator example with an eco startup circular leaf arrow logo"}],icons:[{title:"Analytics Icons",prompt:"Analytics icon set with a neural node, trend chart, database stack, and insight spark",image:"/homepage-proof/2026-05/svg/ai-svg-icon-generator-analytics-icons.svg",alt:"AI SVG icon generator use case with analytics and neural network icons"},{title:"Ecommerce Icons",prompt:"Ecommerce icon set with a shopping cart, package, credit card, and delivery truck",image:"/homepage-proof/2026-05/svg/svg-icon-maker-ecommerce-icons.svg",alt:"SVG icon maker use case with ecommerce cart package card and delivery icons"},{title:"Mobile App Icons",prompt:"Mobile app icon set with a calendar, chat bubble, map pin, and bookmark",image:"/homepage-proof/2026-05/svg/svg-icon-ai-mobile-app-icons.svg",alt:"SVG icon AI use case with mobile app icons for calendar chat map and bookmark"},{title:"Developer Tool Icons",prompt:"Developer tool icon set with code brackets, terminal, API plug, and cloud deploy",image:"/homepage-proof/2026-05/svg/svg-icon-generator-developer-tool-icons.svg",alt:"SVG icon generator AI use case with developer tool icons for c

1ode terminal API and cloud deploy"},{title:"Dashboard Icons",prompt:"Dashboard icon set with analytics, user, settings, and notification symbols",image:"/homepage-proof/2026-05/svg/svg-icon-generator-dashboard-icons.svg",alt:"SVG icon generator example with dashboard icons for analytics profile settings and notifications"},{title:"Security Badge",prompt:"Security badge icon with a shield, checkmark, and small lock shape",image:"/homepage-proof/2026-05/svg/create-svg-icon-security-badge.svg",alt:"Create SVG icon example with a security shield checkmark and lock badge"},{title:"Technology Icons",prompt:"Futuristic technology icon set with connected symbols and clean geometric lines",image:"/svg-examples/a-futuristic-technology-icon-set-including-symbols.svg",alt:"Futuristic technology icon set by AI SVG generator with modern tech symbols"},{title:"UI Outline Icons",prompt:"Outline UI icon set with user profile, settings, notification, and shopping cart",image:"/svg-examples/set-of-4-outline-style-ui-icons-user-profile-setti.svg",alt:"Set of outline UI icons created with AI for profile settings notification and cart"},{title:"Workstation Icon",prompt:"Minimal computer workstation icon for an office or productivity app",image:"/svg-examples/computer-workstation-icon.svg",alt:"Minimal computer workstation icon for a clean office interface"},{title:"Calendar Icons",prompt:"Productivity calendar icons showing simple organization tools",image:"/svg-examples/productivity-calendar-icons.svg",alt:"Productivity calendar icons for organizational apps and time management UI"},{title:"Library Book Icon",prompt:"Engraving style book icon for a library app with detailed vintage lines",image:"/svg-examples/engraving-style-book-icon-for-a-library-app-detail.svg",alt:"Engraving style book icon for library applications and literature interfaces"},{title:"Success Checkmark",prompt:"Simple checkmark icon inside a circle with clean outline style",image:"/svg-examples/simple-checkmark-icon-inside-a-circle-outline-styl.svg",alt:"Simple checkmark icon in a circle for confirmation or success states"}],illustrations:[{title:"Product Label Sticker",prompt:"Clean product label sticker for a specialty coffee bag with large ROAST lettering",image:"/homepage-proof/2026-05/svg/svg-creator-product-label-sticker.svg",alt:"SVG creator use case showing a clean ROAST product label sticker graphic"},{title:"Brand Pattern",prompt:"Premium brand pattern tile with geometric symbols, leaves, sparks, and dot clusters",image:"/homepage-proof/2026-05/svg/svg-maker-premium-brand-pattern.svg",alt:"SVG maker use case showing a clean geometric brand pattern on a white background"},{title:"Editable SVG Layout",prompt:"Website card layout with editable path nodes, color swatches, and clean vector handles",image:"/homepage-proof/2026-05/svg/svg-generator-online-data-graphic.svg",alt:"SVG generator online use case showing an editable website card layout with path nodes"},{title:"Launch Social Graphic",prompt:"Launch announcement social graphic with bold type, product cards, and clean vector accents",image:"/homepage-proof/2026-05/svg/svg-generator-online-launch-social-graphic.svg",alt:"SVG generator online use case with a launch announcement social graphic"},{title:"Product Helper Avatar",prompt:"Friendly product helper avatar with polished shapes and a professional app-style pose",image:"/homepage-proof/2026-05/svg/svg-creator-ai-helper-avatar.svg",alt:"SVG creator AI use case with a professional product helper avatar"},{title:"Typography Badge",prompt:"Clean typography badge with crisp lettering, balanced border, and simple decorative accents",image:"/homepage-proof/2026-05/svg/text-to-svg-generator-retro-badge.svg",alt:"Text to SVG generator use case with a clean typography badge graphic"},{title:"App Icon Graphic",prompt:"Mobile scheduling app icon with a calendar tile, checkmark, and polished rounded shape",image:"/homepage-proof/2026-05/svg/ai-svg-generator-mobile-app-icon.svg",alt:"AI SVG generator example showing a mobile scheduling app icon graphic"},{title:"Linocut Portrait",prompt:"Linocut style portrait of a woman reading a book under a tree",image:"/svg-examples/linocut-style-portrait-of-a-woman-reading-a-book-u.svg",alt:"Linocut style portrait of woman reading a book under a tree"},{title:"Inclusive Characters",prompt:"Diverse people illustrations for inclusive website and product design",image:"/svg-examples/diverse-people-illustrations.svg",alt:"Diverse people illustrations for inclusive design"},{title:"Life Cycle Infographic",prompt:"Educational infographic showing a circular life cycle with clean labeled steps",image:"/svg-examples/an-educational-infographic-showing-a-circular-life.svg",alt:"Educational infographic with a circular life cycle diagram"},{title:"Data Center Diagram",prompt:"Data center server infrastru

1cture diagram with clean technical shapes",image:"/svg-examples/data-center-server-infrastructure.svg",alt:"Data center server infrastructure diagram created as vector artwork"},{title:"Device Comparison",prompt:"Device model comparison illustration with aligned phone frames",image:"/svg-examples/iphone-models-illustration.svg",alt:"Device model comparison illustration with a clean lineup layout"},{title:"Sustainability Concept",prompt:"Renewable energy sustainability concept illustration with clean green technology symbols",image:"/svg-examples/renewable-energy-sustainability.svg",alt:"Renewable energy sustainability concept illustration"},{title:"AI Network Graphic",prompt:"AI startup neural network visualization with connected nodes and product-style geometry",image:"/svg-examples/ai-startup-neural-network.svg",alt:"AI startup neural network visualization created as vector artwork"},{title:"Wildlife Detail",prompt:"Close-up wildlife illustration of a tiger eye with intricate detail",image:"/svg-examples/eye-of-the-tiger.svg",alt:"Close-up tiger eye illustration with detailed wildlife vector artwork"}]},m=[{...p.logos[3],label:"SVG Logo"},{...p.icons[0],label:"SVG Icons"},{...p.illustrations[0],label:"SVG Illustration"},{...p.illustrations[5],label:"Text Graphic"}];return(0,i.jsxs)("section",{id:"use-cases",className:"py-16 md:py-24 bg-white relative overflow-hidden",children:[(0,i.jsx)("div",{className:"absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-slate-200 to-transparent opacity-50"}),(0,i.jsxs)("div",{className:"container mx-auto px-4 max-w-6xl",children:[(0,i.jsxs)("div",{className:"text-center mb-12 md:mb-16",children:[(0,i.jsx)("h2",{className:"text-3xl md:text-4xl font-extrabold text-slate-900 mb-4 tracking-tight",children:"Generate SVGs Across Logos, Icons, and Illustrations"}),(0,i.jsx)("p",{className:"mx-auto max-w-3xl text-base leading-7 text-slate-600",children:"Pick a category, then describe what you want. SVG AI generates editable SVGs for brand marks, product labels, UI icons, typography, illustrations, stickers, and reusable vector assets."})]}),(0,i.jsx)("div",{className:"mb-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",children:m.map(e=>(0,i.jsxs)("div",{className:"rounded-xl border border-slate-200 bg-white shadow-sm",children:[(0,i.jsx)("div",{className:"flex aspect-square items-center justify-center border-b border-slate-100 bg-slate-50 p-5",children:(0,i.jsx)("img",{src:e.image,alt:e.alt,width:180,height:180,className:"h-full w-full object-contain",loading:"lazy"})}),(0,i.jsxs)("div",{className:"p-4",children:[(0,i.jsx)("p",{className:"text-xs font-semibold uppercase tracking-wide text-[#B93812]",children:e.label}),(0,i.jsx)("h3",{className:"mt-1 text-sm font-bold text-slate-950",children:e.title}),(0,i.jsx)("p",{className:"mt-2 text-xs leading-5 text-slate-600",children:e.prompt})]})]},`${e.label}-${e.title}`))}),(0,i.jsxs)(r.Tabs,{defaultValue:"logos",className:"w-full",children:[(0,i.jsx)(r.TabsList,{className:"flex h-auto w-full max-w-3xl items-center justify-center rounded-full bg-slate-100/80 p-1.5 backdrop-blur-sm border border-slate-200/50 mx-auto mb-12",children:c.map(e=>(0,i.jsxs)(r.TabsTrigger,{value:e.id,className:"flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-full px-3 py-2.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-[#B93812] data-[state=active]:shadow-sm hover:text-[#9A3412]",children:[(0,i.jsx)("span",{className:"hidden md:inline",children:e.label}),(0,i.jsx)("span",{className:"md:hidden",children:e.shortLabel})]},e.id))}),c.map(s=>{var c;return(0,i.jsxs)(r.TabsContent,{value:s.id,forceMount:!0,className:"mt-0 focus-visible:outline-none focus-visible:ring-0 data-[state=inactive]:hidden",children:[(0,i.jsx)("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8",children:(c=s.id,("logos"===s.id?e:"icons"===s.id?a:l)?p[c]:p[c].slice(0,6)).map((e,t)=>(0,i.jsxs)("div",{className:"group relative bg-white rounded-2xl overflow-hidden border border-slate-200 hover:border-primary/20 shadow-sm hover:shadow-smooth transition-all duration-300 hover:-translate-y-1",children:[(0,i.jsx)("div",{className:"aspect-square bg-slate-50/50 flex items-center justify-center p-8 group-hover:bg-orange-50/30 transition-colors",children:(0,i.jsx)("div",{className:"relative w-full h-full transition-transform duration-500 group-hover:scale-110",children:(0,i.jsx)("img",{src:e.image,alt:e.alt,width:200,height:200,className:"object-contain w-full h-full drop-shadow-sm",loading:"lazy"})})}),(0,i.jsxs)("div",{className:"p-5",children:[e.title&&(0,i.jsx)("h3",{className:"text-base font-bold text-slate-900 mb-2",children:e.title}),(0,i.jsx)("p",{className:"text-xs font-semibold text-[#B93812] uppercase tracking-wider mb-2",children:"Example Prompt"}),(0,i.jsx)("div",{className:"text-sm text-slate-600 leading-relaxed min-h-[3rem]",children:(0,i.jsx)(o,{text:e.prompt,maxLength:60})})]})]},t))}),p[s.id].length>6&&(0,i.jsx)("div",{className:"mt-12 text-center",children:(0,i.jsx)("button",{onClick:()=>{"logos"===s.id&&t(!e),"icons"===s.id&&n(!a),"illustrations"===s.id&&d(!l)},className:"inline-flex items-center px-6 py-3 rounded-full border border-slate-200 bg-white text-sm font-semibold text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary shadow-sm hover:shadow transition-all",children:"logos"===s.id&&e||"icons"===s.id&&a||"illustrations"===s.id&&l?"Show Less":`View ${p[s.id].length-6} More ${s.label}`})})]},s.id)})]})]})]})}}},e=>{e.O(0,[4758,6436,6874,4026,6424,4134,6671,7651,5511,4386,7495,7807,7746,5333,7358],()=>e(e.s=52920)),_N_E=e.O()}]);