https://www.focastock.com/_app/immutable/nodes/64.CHMUuORD.js

1import"../chunks/DsnmJJEf.js";import"../chunks/69_IOA4Y.js";import{c as re,f as y,a as i,g as s,s as r,e as a,b as v,q as ae,aB as oe,n as K,r as t,t as I}from"../chunks/bP0nuir6.js";import{s as x}from"../chunks/Ci-X_kMW.js";import{i as se}from"../chunks/DPn6KBIp.js";import{e as D,a as ie,s as ne,i as F}from"../chunks/D9T1tjbj.js";import{c as E}from"../chunks/Cm_-scQq.js";import{S as le}from"../chunks/RD18TsjS.js";import{H as ce}from"../chunks/DejCTjd9.js";import{S as L}from"../chunks/DzZ-LdyB.js";import{S as O}from"../chunks/CyaE53gA.js";import{C as de}from"../chunks/B2gCe7r8.js";import{B as R}from"../chunks/J8OgXC8K.js";import{P as Q}from"../chunks/CdNWopbX.js";import{L as W}from"../chunks/CG3Zmt_5.js";import{A as me}from"../chunks/Duw7inmU.js";import{S as V}from"../chunks/CGnnZPXz.js";import{C as Z}from"../chunks/C8vV9gJZ.js";import{D as ee}from"../chunks/DglZ82fk.js";import{I as pe}from"../chunks/DDXgFKgd.js";import{Y as ve}from"../chunks/D2RQ3dxb.js";import{F as ue}from"../chunks/Hahzy64L.js";import{L as fe,T as ge}from"../chunks/CG-jTfhD.js";import{I as he}from"../chunks/CJLlEh4F.js";import{S as be}from"../chunks/8rkCuUnS.js";import{G as _e}from"../chunks/Diw94QW_.js";import{M as xe}from"../chunks/Cpig2loU.js";import{L as ye}from"../chunks/C8kk_uSt.js";import{T as $e}from"../chunks/CDWK4YvQ.js";import{I as ke,s as we}from"../chunks/BfKxQ4VD.js";import{l as ze,b as Se}from"../chunks/DXgkfp3-.js";import{P as Ce}from"../chunks/B90qllgs.js";import{S as Pe}from"../chunks/CPwFRA5H.js";function Te(G,S){const N=ze(S,["children","$$slots","$$events","$$legacy"]);const C=[["path",{d:"m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"}],["path",{d:"M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"}],["circle",{cx:"13",cy:"7",r:"1",fill:"currentColor"}],["rect",{x:"8",y:"2",width:"14",height:"14",rx:"2"}]];ke(G,Se({name:"images"},()=>N,{get iconNode(){return C},children:(Y,A)=>{var $=re(),P=y($);we(P,S,"default",{}),i(Y,$)},$$slots:{default:!0}}))}var Ie=v("<!> Start from Template",1),De=v("<!> <!>",1),Fe=v('<a class="group flex flex-col items-center gap-3 p-5 sm:p-6 rounded-xl bg-surface border border-line-subtle hover:border-line hover:shadow-lg transition-all"><div><!></div> <div class="text-center"><p class="text-sm font-bold text-text-primary leading-tight"> </p> <p class="text-xs text-text-tertiary mt-1"> </p></div></a>'),Le=v("<!> Browse All Templates <!>",1),Ge=v('<!> <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-10"></div> <div class="flex justify-center mt-8"><!></div>',1),Ne=v('<div class="hidden md:block absolute top-8 left-[55%] w-[calc(100%-10%)] h-px border-t-2 border-dashed border-line"></div>'),Ye=v('<div class="relative text-center"><!> <div class="relative inline-flex items-center justify-center size-16 rounded-feature bg-brand text-white mb-5 shadow-lg "><!> <span class="absolute -top-2 -right-2 size-6 rounded-full bg-surface border-2 border-brand text-brand text-xs font-semibold flex items-center justify-center"> </span></div> <h3 class="text-lg font-bold text-text-primary mb-2"> </h3> <p class="text-sm text-text-secondary max-w-xs mx-auto leading-relaxed"> </p></div>'),Ae=v('<!> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-10 mt-12"></div>',1),Be=v('<div class="group p-6 rounded-xl bg-surface border border-line-subtle hover:border-primary/40 transition-all hover:shadow-md"><div class="size-11 rounded-lg bg-brand-soft flex items-center justify-center mb-4 group-hover:bg-primary/15 transition-colors"><!></div> <h3 class="text-base font-bold text-text-primary mb-1.5"> </h3> <p class="text-sm text-text-secondary leading-relaxed"> </p></div>'),je=v('<!> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 mt-12"></div>',1),qe=v('<div class="flex items-center gap-2"><!> <span class="text-sm font-medium text-text-primary"> </span></div>'),Ee=v('<div class="flex flex-wrap items-center justify-center gap-x-8 gap-y-3 py-4"></div>'),Oe=v('<!> <div class="w-full"><!> <!> <!> <!> <!> <!></div>',1);function $t(G){const S=[{icon:W,title:"Pre-made Templates",description:"Instagram posts, stories, YouTube thumbnails, Facebook covers, and more — start with ready-made layouts you can customize fast."},{icon:$e,title:"Advanced Typography",description:"100+ fonts with full control over size, alignment, spacing, and effects for pixel-perfect text."}

1,{icon:Te,title:"Built-in Photo Library",description:"Thousands of free stock photos licensed for commercial use, searchable right inside the editor."},{icon:Q,title:"Icon Library",description:"Curated icons you can recolor and resize to match any design, from minimalist to bold."},{icon:Ce,title:"Image Effects",description:"Brightness, contrast, saturation, blur, filters — studio-level adjustments with instant preview."},{icon:Pe,title:"Shapes & Elements",description:"Rectangles, circles, lines, and freeform shapes with full control over fills, outlines, and opacity."}],N=[{icon:pe,title:"Instagram Posts & Stories",sizes:"1080×1080 · 1080×1920",href:"/canvas/graphic/templates",color:"bg-surface-subtle",iconColor:"text-pink-600"},{icon:ve,title:"YouTube Thumbnails & Covers",sizes:"1280×720 · 2560×1440",href:"/canvas/graphic/templates",color:"bg-surface-subtle",iconColor:"text-error"},{icon:ue,title:"Facebook Posts & Covers",sizes:"1200×630 · 820×312",href:"/canvas/graphic/templates",color:"bg-surface-subtle",iconColor:"text-blue-600"},{icon:fe,title:"LinkedIn Banners",sizes:"1584×396 · 1104×736",href:"/canvas/graphic/templates",color:"bg-surface-subtle",iconColor:"text-sky-600"},{icon:ge,title:"X / Twitter Posts",sizes:"1012×506 · 1500×500",href:"/canvas/graphic/templates",color:"bg-surface-subtle/50",iconColor:"text-text-primary"},{icon:he,title:"Pinterest Pins",sizes:"735×1102",href:"/canvas/graphic/templates",color:"bg-surface-subtle",iconColor:"text-rose-600"},{icon:be,title:"TikTok & Reels",sizes:"1080×1920",href:"/canvas/graphic/templates",color:"bg-surface-subtle",iconColor:"text-violet-600"},{icon:_e,title:"Blog & Website Graphics",sizes:"1200×630 · 1920×1080",href:"/canvas/graphic/templates",color:"bg-surface-subtle",iconColor:"text-emerald-600"}],C=[{number:"1",icon:xe,title:"Pick a Format",description:"Choose a social media template or start blank with any custom size."},{number:"2",icon:ye,title:"Design Your Graphic",description:"Drag and drop photos, icons, text, and shapes. Customize colors and effects."},{number:"3",icon:ee,title:"Download & Post",description:"Export as high-quality PNG or JPG. Ready for Instagram, YouTube, Facebook, and beyond."}],Y=["100% free — no hidden paywalls","No account required to start","Commercial use included","No watermarks, ever"];var A=Oe(),$=y(A);le($,{title:"FOCA Canvas — Free Online Graphic Design Editor",description:"Create social media graphics, YouTube thumbnails, Instagram posts, and more with FOCA's free drag-and-drop editor. Templates, stock photos, and powerful tools — no sign-up required."});var P=r($,2),H=a(P);{const f=n=>{var m=De(),l=y(m);R(l,{href:"/canvas/graphic/templates",variant:"primary",size:"lg",children:(o,c)=>{var e=Ie(),d=y(e);W(d,{class:"size-5 mr-2"}),K(),i(o,e)},$$slots:{default:!0}});var u=r(l,2);R(u,{href:"/canvas/graphic/templates",variant:"outline",size:"lg",children:(o,c)=>{K();var e=ae("Start from Scratch");i(o,e)},$$slots:{default:!0}}),i(n,m)};let k=oe(()=>[{icon:V,text:"100% Free"},{icon:Z,text:"Commercial Use"},{icon:ee,text:"No Watermarks"}]);ce(H,{variant:"landing",title:"Create Stunning Social Graphics",highlightedWord:"Social Graphics",subtitle:"Free drag-and-drop editor with templates, stock photos, and pro tools. Design Instagram posts, YouTube thumbnails, Facebook covers, and more — no sign-up needed.",get icon(){return Q},get stats(){return s(k)},actions:f,$$slots:{actions:!0}})}var M=r(H,2);L(M,{background:"default",padding:"lg",children:(f,k)=>{var n=Ge(),m=y(n);O(m,{title:"Start with the Right Size",subtitle:"Pick a platform and start designing — we'll set the perfect dimensions for you.",align:"center"});var l=r(m,2);D(l,5,()=>N,F,(c,e)=>{var d=Fe(),p=a(d),g=a(p);E(g,()=>s(e).icon,(T,j)=>{j(T,{get class(){return`size-6 ${s(e).iconColor??""}`}})}),t(p);var h=r(p,2),b=a(h),w=a(b,!0);t(b);var _=r(b,2),B=a(_,!0);t(_),t(h),t(d),I(()=>{ie(d,"href",s(e).href),ne(p,1,`size-12 rounded-xl ${s(e).color??""} flex items-center justify-center group-hover:scale-110 transition-transform`),x(w,s(e).title),x(B,s(e).sizes)}),i(c,d)}),t(l);var u=r(l,2),o=a(u);R(o,{href:"/canvas/graphic/templates",variant:"outline",size:"md",children:(c,e)=>{var d=Le(),p=y(d);W(p,{class:"size-4 mr-2"});var g=r(p,2);me(g,{class:"size-4 ml-2"}),i(c,d)},$$slots:{default:!0}}),t(u),i(f,n)},$$slots:{default:!0}});var J=r(M,2);L(J,{background:"muted",padding:"lg",children:(f,k)=>{var n=Ae(),m=y(n);O(m,{title:"Design in 3 Steps",subtitle:"Go from blank canvas to finished graphic in under a minute.",align:"center"});var l=r(m,2);D(l,5,()=>C,F,(u,o,c)=>{var e=Ye(),d=a(e);{var p=z=>{var q=Ne();i(z,q)};se(d,z=>{c<C.length-1&&z(p)})}var g=r(d,2),h=a(g);E(h,()=>s(o).icon,(z,q)=>{q(z,{class:"size-7"})});var b=r(h,2),w=a(b,!0);t(b),t(g);var _=r(g,2),B=a(_,!0);t(_);var T=r(_,2),j=a(T,!0);t(T),t(e),I(()=>{x(w,s(o).number),x(B,s(o).title),x(j,s(o).description)}),i(u,e)}),t(l),i(f,n)},$$slots:{default:!0}});var U=r(J,2);L(U,{background:"default",padding:"lg",children:(f,k)=>{var n=je(),m=y(n);O(m,{eyebrow:"EDITOR TOOLS",title:"Everything You Need, Nothing You Don't",subtitle:"Design tools built for speed and simplicity. No experience required.",align:"center",get icon(){return V}});var l=r(m,2);D(l,5,()=>S,F,(u,o)=>{var c=Be(),e=a(c),d=a(e);E(d,()=>s(o).icon,(w,_)=>{_(w,{class:"size-5 text-brand"})}),t(e);var p=r(e,2),g=a(p,!0);t(p);var h=r(p,2),b=a(h,!0);t(h),t(c),I(()=>{x(g,s(o).title),x(b,s(o).description)}),i(u,c)}),t(l),i(f,n)},$$slots:{default:!0}});var X=r(U,2);L(X,{background:"muted",padding:"sm",children:(f,k)=>{var n=Ee();D(n,5,()=>Y,F,(m,l)=>{var u=qe(),o=a(u);Z(o,{class:"size-4 text-brand flex-shrink-0"});var c=r(o,2),e=a(c,!0);t(c),t(u),I(()=>x(e,s(l))),i(m,u)}),t(n),i(f,n)},$$slots:{default:!0}});var te=r(X,2);de(te,{title:"Ready to Design?",subtitle:"No sign-up required. Pick a template and start creating in seconds.",primaryAction:{label:"Browse Templates",href:"/canvas/graphic/templates"},secondaryAction:{label:"Start from Scratch",href:"/canvas/graphic/templates"},theme:"gradient"}),t(P),i(G,A)}export{$t as component};