https://mstudio.ai/build/assets/LearnPage.DydZ_rm7.js

1import{r as g}from"./rolldown-runtime.C1f3BsDW.js";import"./inertia.BE4YqsTM.js";import"./http.DWpeO7Ui.js";import{I as R,Ln as C,Qr as D,hr as O,lr as E,nt as M,sn as F,ut as h}from"./icons.ChOq_Y4q.js";import{t as H}from"./react-core.CAMe6Z4j.js";import"./utils.CgzVjNgC.js";import"./state.L8kQliOB.js";import{i as V,jt as l,tt as $}from"./entry-client.DX3aUoe5.js";import"./dist.CoNAZqlp.js";import"./dist.DxccqHSW.js";import"./dist.D4237Rk6.js";import"./dist.BhzTvz6X.js";import"./dist.B-JETxGF.js";import"./dist.zmknLG-d.js";import"./es2015.Cr2X04_P.js";import"./dist.DbqQa_sy.js";import"./dialog.Bb7MGeDP.js";import"./dist.C1cc-Zbw.js";import"./badge.CK53iWwP.js";import"./dropdown-menu.D1MnQ7U0.js";import{n as q}from"./DemoTutorialModal.n7nzQPTB.js";import{t as z}from"./lenis.DZFFtZ8G.js";import{t as G}from"./SEO.gPDL2mFy.js";import"./useRoute.D5WEuP_a.js";import"./useStartCreatingHref.BVwqKiRT.js";import"./gsap.BxN_RF7A.js";import{t as Q}from"./RevealOnScroll.Bzi3Q9FE.js";import"./logo.7ZVhR9ER.js";import{t as U}from"./Footer.Ccp81B1O.js";import{t as B}from"./Header.C54sFzrK.js";import{a as J,i as K,o as W,t as X}from"./MarketingHero.CGOgM9co.js";/* empty css                   */import{n as Y,r as Z}from"./TemplateStarterGrid.CjoYNLMR.js";var r=g(D(),1),e=g(H(),1),f=Object.values(q);const ee=({guides:o,categories:c,initialSearch:se=""})=>{const{user:b}=V();b?.is_impersonating;const[a,j]=(0,r.useState)(f[0]),[y,v]=(0,r.useState)(!1),{templates:N,loading:w}=Z(),[n,S]=(0,r.useState)([]),[k,d]=(0,r.useState)(!0),[_,te]=(0,r.useState)(Array.isArray(o)?o:[]),[re,ae]=(0,r.useState)(Array.isArray(c)?c:[]),[m,le]=(0,r.useState)(null),[x,ie]=(0,r.useState)(null),[i,oe]=(0,r.useState)(""),[A,u]=(0,r.useState)(null),[ce,p]=(0,r.useState)(!1);(0,r.useEffect)(()=>{(async()=>{d(!0);try{const t=await fetch("/api/v1/demo/projects");t.ok&&S((await t.json()).projects?.slice(0,6)??[])}catch(t){console.error("Failed to load demo projects",t)}finally{d(!1)}})()},[]),(0,r.useEffect)(()=>{const s=setTimeout(()=>{i.length>=2?I(i):u(null)},300);return()=>clearTimeout(s)},[i]);const I=async s=>{p(!0);try{u((await $.search(s)).data.data)}catch(t){console.error("Search failed:",t)}finally{p(!1)}},T=s=>{j(s),v(!0)},L=s=>{window.open(`/dashboard/new?format=${encodeURIComponent(s)}`,"_blank")};return(A??_).filter(s=>!(m&&s.category!==m||x&&s.difficulty!==x)),(0,e.jsxs)("div",{className:"theme-marketing min-h-screen bg-background",children:[(0,e.jsx)(z,{root:!0}),(0,e.jsx)(G,{title:"Learn & Tutorials",description:"Master AI filmmaking with our step-by-step video courses, starter templates, showcase examples, and detailed guides.",keywords:"M Studio guides, AI storyboard tutorials, video production tips, filmmaking workflow, AI video generation",ogImage:"https://assets.modelslab.ai/generations/df36a236-73d3-4b91-9395-449fcd51d48c.webp"}),(0,e.jsx)(B,{variant:"blur"}),(0,e.jsxs)("main",{id:"main-content",className:l("relative overflow-x-hidden pb-20 pt-0"),children:[(0,e.jsxs)("section",{className:l(X,"pb-8 sm:pb-8 lg:pb-8"),children:[(0,e.jsx)(K,{}),(0,e.jsxs)("div",{className:"relative z-10 mx-auto flex max-w-screen-2xl flex-col items-center text-center",children:[(0,e.jsx)(W,{accent:"M Studio tutorials",size:"hub",className:"mt-0",children:"Learn AI filmmaking with"}),(0,e.jsx)(J,{className:"mx-auto",children:"Go from a simple idea to a fully produced film. Follow our structured video course, kickstart your workspace with template presets, or explore community examples."})]})]}),(0,e.jsx)("section",{className:"px-4 py-8 sm:px-6 lg:px-8",children:(0,e.jsxs)("div",{className:"mx-auto max-w-screen-2xl",children:[(0,e.jsxs)(Q,{variant:"up",className:"mb-6",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2 mb-2",children:[(0,e.jsx)(O,{className:"h-5 w-5 text-primary animate-pulse"}),(0,e.jsx)("h2",{className:"text-xl font-bold tracking-tight text-foreground sm:text-2xl",children:"Step-by-step video course"})]}),(0,e.jsx)("p",{className:"text-sm text-muted-foreground",children:"Click a tutorial step on the right to play the lesson inline."})]}),(0,e.jsxs)("div",{className:"grid grid-cols-1 gap-6 lg:grid-cols-3",children:[(0,e.jsxs)("div",{className:"lg:col-span-2 flex flex-col gap-4",children:[(0,e.jsx)("div",{className:"relative aspect-video w-full overflow-hidden rounded-2xl bg-black shadow-2xl border border-border/40",children:(0,e.jsx)("iframe",{src:`https://www.youtube.com/embed/${a.id}?autoplay=${y?1:0}&rel=0`,title:a.title,className:"h-full w-full absolute inset-0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0})}),(0,e.jsxs)("div",{className:"bg-card/30 border border-border/40 rounded-xl p-4 md:p-5 backdrop-blur-sm",children:[(0,e.jsx)("div",{className:"flex items-center gap-2",children:(0,e.jsxs)("span",{className:"inline-flex items-center justify-center h-6 px-2.5 rounded-full bg-primary/10 text-primary text-xs font-semibold uppercase",children:["Part ",a.part]})}),(0,e.jsx)("h3",{className:"mt-2 text-lg font-bold text-foreground sm:text-xl",children:a.title}),(0,e.jsx)("p",{className:"mt-2 text-sm text-muted-foreground leading-relaxed",children:a.description})]})]}),(0,e.jsx)("div",{className:"flex flex-col gap-2.5 max-h-[500px] lg:max-h-none overflow-y-auto pr-1",children:f.map(s=>{const t=a.id===s.id,P=`https://img.youtube.com/vi/${s.id}/mqdefault.jpg`;return(0,e.jsxs)("button",{onClick:()=>T(s),className:l("w-full flex gap-3 p-2.5 rounded-xl text-left border transition-all duration-200","hover:bg-card/60 hover:shadow-md outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",t?"bg-primary/5 border-primary/45 shadow-sm shadow-primary/5":"bg-card/25 border-border/30"),children:[(0,e.jsxs)("div",{className:"relative aspect-video w-24 sm:w-28 shrink-0 overflow-hidden rounded-lg bg-black/40",children:[(0,e.jsx)("img",{src:P,alt:s.title,className:"h-full w-full object-cover opacity-85 hover:opacity-100 transition-opacity",loading:"lazy"}),t&&(0,e.jsx)("div",{className:"absolute inset-0 bg-primary/10 flex items-center justify-center",children:(0,e.jsx)(h,{className:"h-5 w-5 text-primary fill-primary"})})]}),(0,e.jsxs)("div",{className:"flex flex-col justify-center min-w-0",children:[(0,e.jsxs)("span",{className:"text-[10px] uppercase font-bold tracking-wider text-primary/70",children:["Part ",s.part]}),(0,e.jsx)("h4",{className:l("mt-0.5 font-bold text-xs sm:text-sm line-clamp-1 truncate text-foreground",t&&"text-primary"),children:s.title}),(0,e.jsx)("p",{className:"mt-1 text-[11px] text-muted-foreground line-clamp-2",children:s.description})]})]},s.id)})})]})]})}),(0,e.jsx)("section",{className:"px-4 py-10 sm:px-6 lg:px-8 border-t border-border/30 bg-card/10",children:(0,e.jsxs)("div",{className:"mx-auto max-w-screen-2xl",children:[(0,e.jsxs)("div",{className:"mb-8",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2 mb-2",children:[(0,e.jsx)(M,{className:"h-5 w-5 text-primary"}),(0,e.jsx)("h2",{className:"text-xl font-bold tracking-tight text-foreground sm:text-2xl",children:"Start from a template"})]}),(0,e.jsx)("p",{className:"text-sm text-muted-foreground",children:"Start your film from a template. Answer a few questions and M Studio writes the script and draws every shot."})]}),w?(0,e.jsx)("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",children:[...Array(3)].map((s,t)=>(0,e.jsx)("div",{className:"h-44 animate-pulse rounded-xl bg-card/30"},t))}):(0,e.jsx)(Y,{templates:N,onSelect:s=>L(s.slug),limit:6})]})}),(0,e.jsx)("section",{className:"px-4 py-10 sm:px-6 lg:px-8 border-t border-border/30",children:(0,e.jsxs)("div",{className:"mx-auto max-w-screen-2xl",children:[(0,e.jsxs)("div",{className:"mb-8",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2 mb-2",children:[(0,e.jsx)(R,{className:"h-5 w-5 text-primary"}),(0,e.jsx)("h2",{className:"text-xl font-bold tracking-tight text-foreground sm:text-2xl",children:"Films made in M Studio"})]}),(0,e.jsx)("p",{className:"text-sm text-muted-foreground",children:"Real storyboards and finished films made entirely in M Studio."})]}),k?(0,e.jsx)("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",children:[...Array(3)].map((s,t)=>(0,e.jsx)("div",{className:"aspect-video animate-pulse rounded-xl bg-card/30"},t))}):n.length===0?(0,e.jsx)("div",{className:"text-center py-10 border border-dashed border-border/40 rounded-2xl bg-card/10",children:(0,e.jsx)("p",{className:"text-sm text-muted-foreground",children:"No example films to show right now."})}):(0,e.jsx)("div",{className:"grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3",children:n.map(s=>(0,e.jsxs)("a",{href:s.playback_url,target:"_blank",rel:"noreferrer",className:"group block overflow-hidden rounded-xl border border-border/40 bg-card/25 hover:bg-card/45 hover:border-primary/30 transition-all duration-200",children:[(0,e.jsxs)("div",{className:"relative aspect-video w-full overflow-hidden bg-black/40",children:[s.thumbnail?(0,e.jsx)("img",{src:s.thumbnail,alt:s.name,className:"h-full w-full object-cover transition-transform duration-500 group-hover:scale-103",loading:"lazy"}):(0,e.jsx)("div",{className:"flex h-full w-full items-center justify-center",children:(0,e.jsx)(C,{className:"h-8 w-8 text-muted-foreground

1/30"})}),(0,e.jsx)("div",{className:"absolute inset-0 flex items-center justify-center bg-black/0 transition-colors group-hover:bg-black/25",children:(0,e.jsx)("div",{className:"flex h-10 w-10 scale-90 items-center justify-center rounded-full bg-white/20 opacity-0 backdrop-blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100",children:(0,e.jsx)(h,{className:"ml-0.5 h-5 w-5 text-white fill-white"})})})]}),(0,e.jsxs)("div",{className:"p-4",children:[(0,e.jsx)("h4",{className:"font-bold text-sm text-foreground line-clamp-1 truncate group-hover:text-primary transition-colors",children:s.name}),s.description&&(0,e.jsx)("p",{className:"mt-1 text-xs text-muted-foreground line-clamp-2",children:s.description}),(0,e.jsxs)("div",{className:"mt-3 flex items-center gap-3 text-[11px] text-muted-foreground font-medium",children:[s.frames_count>0&&(0,e.jsxs)("span",{className:"flex items-center gap-1",children:[(0,e.jsx)(F,{className:"h-3.5 w-3.5"}),s.frames_count," panels"]}),s.duration_formatted&&(0,e.jsxs)("span",{className:"flex items-center gap-1",children:[(0,e.jsx)(E,{className:"h-3.5 w-3.5"}),s.duration_formatted]})]})]})]},s.id))})]})})]}),(0,e.jsx)(U,{})]})};var qe=ee;export{ee as LearnPage,qe as default};