https://convertex.ai/assets/Examples-BksUGMOU.js

1import{u as e,r as t,j as i,a as s,L as r,e as a}from"./index-CTUgqakz.js";import{u as o}from"./usePageMeta-BF1nj4XA.js";import{V as n,C as l,a as d,P as c,S as p}from"./hero-interactive-DZH5Rcqv.js";import{m as x}from"./proxy--AF1RYhV.js";import{A as m}from"./index-ChAGvo2U.js";import{u as h,a as u}from"./use-scroll-B-jCHJMt.js";import"./use-motion-value-Bin7rNAF.js";import"./use-spring-BwIyQN9G.js";function g({vimeoId:e,title:s,epoch:r,eager:a=!1}){const o=t.useRef(null),n=t.useRef(null),[l,d]=t.useState(a);return t.useEffect(()=>{if(a)return;const e=o.current;if(!e)return;const t=new IntersectionObserver(([e])=>{e.isIntersecting&&(d(!0),t.disconnect())},{rootMargin:"400px"});return t.observe(e),()=>t.disconnect()},[a]),t.useLayoutEffect(()=>{if(!l)return;const e=o.current;if(!e)return;const t=16/9,i=()=>{const i=n.current;if(!i)return;const{width:s,height:r}=e.getBoundingClientRect();0!==s&&0!==r&&(s/r>t?(i.style.width=`${s}px`,i.style.height=s/t+"px"):(i.style.height=`${r}px`,i.style.width=r*t+"px"))};i();const s=requestAnimationFrame(i),r=new ResizeObserver(i);return r.observe(e),()=>{cancelAnimationFrame(s),r.disconnect()}},[l,r]),i.jsxs("div",{ref:o,className:"absolute inset-0 overflow-hidden",children:[i.jsx("img",{src:`https://vumbnail.com/${e}.jpg`,alt:"","aria-hidden":!0,loading:"lazy",className:"absolute inset-0 w-full h-full object-cover"}),l&&i.jsx("iframe",{ref:n,src:`https://player.vimeo.com/video/${e}?background=1&autoplay=1&loop=1&byline=0&title=0&muted=1`,title:s,loading:"lazy",allow:"autoplay",className:"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full border-0 pointer-events-none"},`${e}-${r}`)]})}function b({videoUrl:e,onClose:s}){return t.useEffect(()=>{const e=e=>{"Escape"===e.key&&s()};return document.addEventListener("keydown",e),document.body.style.overflow="hidden",()=>{document.removeEventListener("keydown",e),document.body.style.overflow=""}},[s]),i.jsxs(x.div,{initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"fixed inset-0 z-[200] flex items-center justify-center p-4 sm:p-8",onClick:s,children:[i.jsx("div",{className:"absolute inset-0 bg-black/70 backdrop-blur-md"}),i.jsx("button",{onClick:s,className:"absolute top-5 right-5 z-10 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-sm flex items-center justify-center transition-colors duration-200",children:i.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M18 6L6 18M6 6l12 12"})})}),i.jsx(x.div,{initial:{scale:.92,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.92,opacity:0},transition:{duration:.35,ease:[.16,1,.3,1]},className:"relative z-10 w-full max-w-[1000px] rounded-2xl overflow-hidden shadow-[0_32px_80px_rgba(0,0,0,0.5)]",onClick:e=>e.stopPropagation(),children:i.jsx("div",{className:"relative aspect-video bg-[#0a0a0b]",children:i.jsx("iframe",{src:e,title:"Demo",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,className:"absolute inset-0 w-full h-full"})})})]})}function v(){const{user:o}=s(),{t:n}=e(),[l,d]=t.useState(!1),{scrollY:c}=h();u(c,"change",e=>d(e>50));const p=o?"https://app.convertex.ai/converter":"https://app.convertex.ai/signup",x=o?n.common.nav.backToApp:n.landing.nav.tryFree;return i.jsx("div",{className:"sticky z-50 transition-all duration-[600ms] ease-[cubic-bezier(0.16,1,0.3,1)] "+(l?"top-3":"top-0"),children:i.jsxs("div",{className:["mx-auto flex items-center justify-between rounded-2xl border","transition-all duration-[600ms] ease-[cubic-bezier(0.16,1,0.3,1)]",l?"max-w-[1100px] mt-3 bg-white/[0.06] backdrop-blur-xl border-white/[0.08] px-5 py-2.5 shadow-[0_1px_3px_rgba(0,0,0,0.2),0_4px_12px_rgba(0,0,0,0.15)]":"max-w-[1400px] px-6 sm:px-10 py-5 bg-[#0a0a0b]/70 backdrop-blur-lg border-transparent"].join(" "),children:[i.jsxs(r,{to:"/",className:"flex items-center gap-2.5",children:[i.jsx("img",{src:"/logo-convertex.png",alt:"",className:"w-7 h-7 rounded-[7px]"}),i.jsx("span",{className:"text-[1.1rem] font-semibold tracking-[-0.03em] text-white",children:"Convertex"})]}),i.jsxs("div",{className:"flex items-center gap-2",children:[i.jsx(a,{}),i.jsx("a",{href:p,className:"text-[0.84rem] font-semibold text-[#0a0a0b] bg-white hover:bg-white/90 px-5 py-[9px] rounded-full transition-all duration-200 hover:-translate-y-px hover:shadow-[0_2px_8px_rgba(255,255,255,0.12)]",children:x})]})]})})}function f(){const{locale:s,t:r}=e();o("fr"===s?"Cas d'usages":"Use cases");const[a,h]=t.useState(null),[u,f]=t.useState(null),[j,w]=t.useState("extension"),[y,k]=t.useState(0),C=t.useRef(null);t.useEffect(()=>{null!==C.current&&null===u&&k(e=>e+1),C.current=u},[u]);const N=r.landing.useCasesSection.workflows.items,L={extension:p.extension.svg,"claude-design":p["claude-design"].svg,figma:p.figma.svg,"library-ui":p["library-ui"].svg},I=[i.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[i.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),i.jsx("path",{d:"M3 9h18M9 21V9"})]}),i.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[i.jsx("path",{d:"M12 2L2 7l10 5 10-5-10-5z"}),i.jsx("path",{d:"M2 17l10 5 10-5"}),i.jsx("path",{d:"M2 12l10 5 10-5"})]}),i.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[i.jsx("path",{d:"M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"}),i.jsx("path",{d:"M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"})]}),i.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[i.jsx("path",{d:"M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"}),i.jsx("line",{x1:"3",y1:"6",x2:"21",y2:"6"}),i.jsx("path",{d:"M16 10a4 4 0 01-8 0"})]}),i.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[i.jsx("rect",{x:"3",y:"3",width:"7",height:"9",rx:"1"}),i.jsx("rect",{x:"14",y:"3",width:"7",height:"5",rx:"1"}),i.jsx("rect",{x:"14",y:"12",width:"7",height:"9",rx:"1"}),i.jsx("rect",{x:"3",y:"16",width:"7",height:"5",rx:"1"})]})],S={extension:r.landing.useCasesSection.cards.map((e,t)=>

1({icon:I[t],label:e.label,title:e.title,description:e.description,browserUrl:r.landing.useCasesSection.browserUrls[t],prompt:c[t],hasCapture:d[t],captureImage:l[t],vimeoId:n[t],videoUrl:`https://player.vimeo.com/video/${n[t]}?autoplay=1&loop=0&byline=0&title=0`})),"claude-design":r.landing.useCasesSection.claudeDesignCards.map(e=>({icon:p["claude-design"].svg,label:e.label,title:e.title,description:e.description,browserUrl:"claude.ai",prompt:"",hasCapture:!1,captureImage:"",vimeoId:e.vimeoId,videoUrl:`https://player.vimeo.com/video/${e.vimeoId}?autoplay=1&loop=0&byline=0&title=0`})),figma:r.landing.useCasesSection.figmaCards.map(e=>({icon:p.figma.svg,label:e.label,title:e.title,description:e.description,browserUrl:"figma.com",prompt:"",hasCapture:!1,captureImage:"",vimeoId:e.vimeoId,videoUrl:`https://player.vimeo.com/video/${e.vimeoId}?autoplay=1&loop=0&byline=0&title=0`})),"library-ui":r.landing.useCasesSection.libraryUiCards.map(e=>({icon:p["library-ui"].svg,label:e.label,title:e.title,description:e.description,browserUrl:"ui.aceternity.com",prompt:"",hasCapture:!1,captureImage:"",vimeoId:e.vimeoId,videoUrl:`https://player.vimeo.com/video/${e.vimeoId}?autoplay=1&loop=0&byline=0&title=0`}))}[j]??[];return i.jsxs("div",{className:"min-h-screen bg-[#0a0a0b]",children:[i.jsx(v,{}),i.jsx("section",{className:"py-16 sm:py-24 px-4 sm:px-6",children:i.jsxs("div",{className:"max-w-[1100px] mx-auto",children:[i.jsxs(x.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.6,ease:[.16,1,.3,1]},className:"text-center mb-12 sm:mb-16",children:[i.jsx("span",{className:"inline-block text-[0.7rem] font-bold tracking-[0.12em] uppercase bg-gradient-to-r from-[#4F46E5] to-[#9333EA] bg-clip-text text-transparent mb-4",children:r.landing.useCasesSection.badge}),i.jsxs("h1",{className:"text-[clamp(1.6rem,3.5vw,2.6rem)] leading-[1.15] font-semibold tracking-[-0.04em] text-white mb-5 max-w-[860px] mx-auto text-balance",children:[r.landing.useCasesSection.heading," ",i.jsx("span",{className:"bg-gradient-to-r from-[#4F46E5] via-[#9333EA] to-[#C026D3] bg-clip-text text-transparent",children:r.landing.useCasesSection.headingHighlight})," ",r.landing.useCasesSection.headingPost]}),i.jsx("p",{className:"text-[1rem] text-white/40 max-w-[520px] mx-auto",children:r.landing.useCasesSection.subtitle})]}),i.jsx("div",{className:"flex justify-center mb-10 sm:mb-14",children:i.jsx("div",{className:"inline-flex items-center bg-white/[0.04] border border-white/[0.06] rounded-full p-1 gap-1 relative max-w-full overflow-x-auto scrollbar-hide",children:N.map(e=>{const t=e.id===j;return i.jsxs("button",{onClick:()=>w(e.id),className:["relative z-10 shrink-0 flex items-center gap-1.5 sm:gap-2 px-3 sm:px-5 py-2 sm:py-2.5 rounded-full text-[0.78rem] sm:text-[0.85rem] font-medium transition-colors duration-300",t?"text-white":"text-white/40 hover:text-white/70"].join(" "),children:[t&&i.jsx(x.span,{layoutId:"examples-workflow-tab-indicator",className:"absolute inset-0 bg-white/[0.1] rounded-full shadow-[0_1px_0_rgba(255,255,255,0.05)_inset,0_1px_3px_rgba(0,0,0,0.3)]",transition:{type:"spring",stiffness:400,damping:30}}),i.jsx("span",{className:"relative z-10 hidden sm:block",children:L[e.id]}),i.jsx("span",{className:"relative z-10 whitespace-nowrap",children:e.label})]},e.id)})})}),i.jsx("div",{className:"flex flex-col gap-8",children:i.jsx(m,{mode:"popLayout",children:S.map((e,t)=>i.jsx(x.div,{layout:!0,initial:{opacity:0,y:40},animate:{opacity:1,y:0},exit:{opacity:0,y:-20},transition:{duration:.5,ease:[.16,1,.3,1],delay:.08*t},children:i.jsxs("div",{className:"bg-white/[0.03] backdrop-blur-sm rounded-2xl border border-white/[0.06] overflow-hidden flex flex-col lg:flex-row lg:min-h-[380px] hover:border-white/[0.1] transition-colors duration-300",children:[i.jsxs("div",{className:"flex flex-col justify-center p-6 sm:p-8 lg:p-12 lg:w-[460px] shrink-0",children:[i.jsxs("div",{className:"flex items-center gap-2 text-[0.78rem] font-medium text-white/40 mb-4",children:[i.jsx("span",{className:"text-[#9333EA]/70",children:e.icon}),i.jsx("span",{children:e.label})]}),i.jsx("h3",{className:"text-[1.35rem] md:text-[1.6rem] font-semibold tracking-[-0.03em] text-white leading-[1.2] mb-3",children:e.title}),i.jsx("p",{className:"text-[0.92rem] leading-[1.7] text-white/50 mb-6",children:e.description}),i.jsxs("div",{className:"flex items-center gap-2 flex-wrap",children:[e.hasCapture&&e.captureImage&&i.jsx("button",{onClick:async()=>{try{const t=await fetch(e.captureImage),i=await t.blob();await navigator.clipboard.write([new ClipboardItem({[i.type]:i})])}catch{await navigator.clipboard.writeText(window.location.origin+e.captureImage)}h(`capture-${e.vimeoId}`),setTimeout(()=>h(null),2e3)},className:"inline-flex items-center gap-1.5 text-[0.82rem] font-medium text-white/70 bg-white/[0.06] hover:bg-white/[0.1] active:scale-[0.98] px-4 py-2.5 rounded-[10px] transition-all duration-200",children:a===`capture-${e.vimeoId}`?i.jsxs(i.Fragment,{children:[i.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"#4CAF50",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M20 6L9 17l-5-5"})}),i.jsx("span",{className:"text-[#4CAF50]",children:r.landing.useCasesSection.captureCopied})]}):i.jsxs(i.Fragment,{children:[i.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[i.jsx("rect",{x:"9",y:"9",width:"13",height:"13",rx:"2",ry:"2"}),i.jsx("path",{d:"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"})]}),r.landing.useCasesSection.copyCapture]})}),e.prompt&&i.jsx("button",{onClick:()=>async function(e,t){await navigator.clipboard.writeText(e),h(`prompt-${t}`),setTimeout(()=>h(null),2e3)}(e.prompt,e.vimeoId),className:"inline-flex items-center gap-1.5 text-[0.82rem] font-medium text-white/70 bg-white/[0.06] hover:bg-white/[0.1] active:scale-[0.98] px-4 py-2.5 rounded-[10px] transition-all duration-200",children:a===`prompt-${e.vimeoId}`?i.jsxs(i.Fragment,{children:[i.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"#4CAF50",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M20 6L9 17l-5-5"})}),i.jsx("span",{className:"text-[#4CAF50]",children:r.landing.useCasesSection.promptCopied})]}):i.jsxs(i.Fragment,{children:[i.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[i.jsx("path",{d:"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"}),i.jsx("polyline",{points:"14,2 14,8 20,8"}),i.jsx("line",{x1:"16",y1:"13",x2:"8",y2:"13"}),i.jsx("line",{x1:"16",y1:"17",x2:"8",y2:"17"})]}),r.landing.useCasesSection.copyPrompt]})})]})]}),i.jsx("div",{className:"flex-1 relative border-t lg:border-t-0 lg:border-l border-white/[0.06]",children:i.jsxs("button",{onClick:()=>f(e.videoUrl),className:"w-full h-full min-h-[260px] lg:min-h-0 bg-[#0a0a0b] relative group/video cursor-pointer rounded-b-2xl lg:rou

1nded-bl-none lg:rounded-r-2xl overflow-hidden",children:[i.jsx(g,{vimeoId:e.vimeoId,title:e.title,epoch:y,eager:0===t}),i.jsx("div",{className:"absolute inset-0 bg-black/0 group-hover/video:bg-black/40 transition-all duration-300 flex items-center justify-center z-10",children:i.jsx("div",{className:"w-14 h-14 sm:w-16 sm:h-16 rounded-full bg-white/90 shadow-[0_8px_32px_rgba(0,0,0,0.3)] flex items-center justify-center opacity-0 group-hover/video:opacity-100 scale-90 group-hover/video:scale-100 transition-all duration-300",children:i.jsxs("svg",{width:"22",height:"22",viewBox:"0 0 24 24",fill:"none",className:"ml-1",children:[i.jsx("polygon",{points:"6,3 20,12 6,21",fill:"url(#play-grad-ex)"}),i.jsx("defs",{children:i.jsxs("linearGradient",{id:"play-grad-ex",x1:"6",y1:"3",x2:"20",y2:"12",children:[i.jsx("stop",{offset:"0%",stopColor:"#4F46E5"}),i.jsx("stop",{offset:"100%",stopColor:"#9333EA"})]})})]})})}),i.jsx("div",{className:"absolute bottom-4 left-1/2 -translate-x-1/2 opacity-0 group-hover/video:opacity-100 transition-opacity duration-300 z-10",children:i.jsx("span",{className:"text-[0.72rem] font-medium text-white/90 bg-black/40 backdrop-blur-sm px-3 py-1 rounded-full border border-white/[0.1]",children:r.landing.useCasesSection.clickForDemo})})]})})]})},`${j}-${e.vimeoId}`))})})]})}),i.jsx(m,{children:null!==u&&i.jsx(b,{videoUrl:u,onClose:()=>f(null)})})]})}export{f as default};