https://www.materialretail.com/_next/static/chunks/pages/email-templates-40272bd410395313.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8533],{7471:function(e,t,l){(window.__NEXT_P=window.__NEXT_P||[]).push(["/email-templates",function(){return l(4341)}])},4874:function(e,t,l){"use strict";l.d(t,{Z:function(){return w}});var s=l(5893),a=l(6140),i=l(2873),n=l(749),r=l(1594),o=l(2238),c=l(3093),d=l(5820),x=l(574),m=l(5675),h=l.n(m),u=l(7294),f=l(5338),p=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(0===e)return"0 Bytes";let l=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],s=Math.floor(Math.log(e)/Math.log(1024)),a=parseFloat((e/Math.pow(1024,s)).toFixed(t<0?0:t));return("Bytes"===l[s]||"KB"===l[s])&&(a=Math.round(a)),a+" "+l[s]},g=(e,t)=>{};let b={enter:e=>({x:e>0?1e3:-1e3,opacity:0}),center:{x:0,opacity:1},exit:e=>({x:e<0?1e3:-1e3,opacity:0})};function w(e){let{fileId:t,images:l,changeFileId:m,closeModal:w,navigation:j,currentImage:v,direction:N}=e;l=l||[];let[y,k]=(0,u.useState)(!1),Z=l.findIndex(e=>e.id===t),C=(0,f.QS)({onSwipedLeft:()=>{Z<l.length-1&&m(l[Z+1].id)},onSwipedRight:()=>{Z>0&&m(l[Z-1].id)},trackMouse:!0}),_=l.length?l.find(e=>e.id===t):v,z="".concat(_.url,"?tr=w-").concat(600,",q-80"),S=function(e){var t,l;let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{mobile:!1};g("Email template download",{filename:e.name,mobile:null==s?void 0:s.mobile}),t=e.url,(l=e.name)||(l=t.split("\\").pop().split("/").pop()),fetch(t,{headers:new Headers({Origin:location.origin}),mode:"cors"}).then(e=>e.blob()).then(e=>{var t,s;let a;t=window.URL.createObjectURL(e),s=l,(a=document.createElement("a")).download=s,a.href=t,document.body.appendChild(a),a.click(),a.remove()}).catch(e=>console.error(e))};return(0,s.jsx)(c.A,{transition:{x:{type:"spring",stiffness:300,damping:30},opacity:{duration:.2}},children:(0,s.jsxs)("div",{className:"relative z-50 aspect-[1/2] flex w-2/3 sm:w-1/2 md:w-1/2 lg:w-1/3 xl:w-[28%] 2xl:w-1/4 h-full max-w-7xl items-center wide:h-full xl:taller-than-854:h-auto",...C,children:[(0,s.jsx)("div",{className:"w-full overflow-hidden z-10 lg:z-20",children:(0,s.jsx)("div",{className:"relative aspect-[1/2] flex flex-col items-center justify-center",children:(0,s.jsx)(d.M,{initial:!1,custom:N,children:(0,s.jsx)(x.E.div,{custom:N,variants:b,initial:"enter",animate:"center",exit:"exit",className:"absolute",children:(0,s.jsx)(h(),{src:z,width:600,height:1200,priority:!0,alt:_.alt,onLoadingComplete:()=>k(!0)})},Z)})})}),(0,s.jsx)("div",{className:"hidden xl:block fixed right-0 lg:w-80 3xl:w-96 mx-auto bg-black bg-opacity-50 h-full z-10",children:y&&(0,s.jsxs)("div",{className:"relative h-full w-full",children:[(0,s.jsxs)("div",{className:"pt-24 pb-6 px-5",children:[(0,s.jsx)("div",{className:"text-white font-medium h-16",children:_.title}),(0,s.jsx)("div",{className:"text-white/80 text-sm h-28",children:_.description}),(0,s.jsx)("table",{className:"text-white/80 text-sm w-full",children:(0,s.jsxs)("tbody",{children:[_.tags&&_.tags.length>0&&(0,s.jsxs)("tr",{children:[(0,s.jsx)("td",{className:"text-white/50 text-sm py-1 w-[100px]",children:"Tags:"}),(0,s.jsx)("td",{children:_.tags.join(", ")})]}),(0,s.jsxs)("tr",{children:[(0,s.jsx)("td",{className:"text-white/50 text-sm py-1 w-[100px]",children:"Dimensions:"}),(0,s.jsxs)("td",{children:["".concat(_.width.toString())," x ","".concat(_.height.toString(),"px")]})]}),(0,s.jsxs)("tr",{children:[(0,s.jsx)("td",{className:"text-white/50 text-sm py-1 w-[100px]",children:"Size:"}),(0,s.jsx)("td",{children:p(_.size)})]})]})})]}),(0,s.jsx)("div",{className:"flex items-center gap-2 px-5 pb-3 text-white",children:(0,s.jsxs)("button",{onClick:()=>S(_,{mobile:!1}),className:"flex gap-3 items-center justify-center font-display font-bold rounded-lg bg-primary/70 w-full p-2 text-white/90 backdrop-blur-lg transition hover:bg-primary/90 hover:text-white",title:"Download fullsize version",children:["Download",(0,s.jsx)(a.Z,{className:"h-5 w-5"})]})}),j&&(0,s.jsxs)("div",{className:"flex px-5 gap-3",children:[(0,s.jsxs)("button",{className:"flex gap-2 items-center justify-center font-display font-bold rounded-lg disabled:opacity-40 hover:disabled:bg-black/50 hover:disabled:text-white/80 w-full bg-black/50 p-2 text-white/80 backdrop-blur-lg transition hover:bg-black/75 hover:text-white focus:outline-none",style:{transform:"translate3d(0, 0, 0)"},onClick:()=>m(l[Z-1].id),disabled:Z<=0,children:[(0,s.jsx)(i.Z,{className:"h-5"}),"Previous"]}),(0,s.jsxs)("button",{className:"flex gap-2 items-center justify-center font-display font-bold rounded-lg disabled:opacity-40 hover:disabled:bg-black/50 hover:disabled:text-white/80 w-full bg-black/50 p-2 text-white/80 backdrop-blur-lg transition hover:bg-black/75 hover:text-white focus:outline-none",style:{transform:"translate3d(0, 0, 0)"},onClick:()=>m(l[Z+1].id),disabled:Z>=l.length-1,children:["Next",(0,s.jsx)(n.Z,{className:"h-5"})]})]}),(0,s.jsx)("div",{className:"absolute top-0 right-0 flex items-center gap-2 p-3 text-white",children:(0,s.jsxs)("button",{onClick:()=>w(),className:"font-display font-bold rounded-lg flex items-center gap-x-2 bg-black/50 py-2 px-3 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white",children:["View all",j?(0,s.jsx)(r.Z,{className:"h-5"}):(0,s.jsx)(o.Z,{className:"h-5"})]})})]})}),(0,s.jsx)("div",{className:"fixed xl:hidden top-0 left-0 right-0 px-3 py-3 bg-black bg-opacity-50 z-10",children:y&&(0,s.jsxs)("div",{className:"relative h-full w-full",children:[(0,s.jsxs)("div",{className:"flex gap-2 pb-2",children:[(0,s.jsx)("div",{className:"flex-1 text-white font-medium whitespace-nowrap overflow-ellipsis overflow-hidden",children:_.title}),(0,s.jsx)("div",{className:"flex flex-none w-8 items-center gap-2 text-white whitespace-nowrap",children:(0,s.jsx)("button",{onClick:()=>w(),className:"rounded-md flex items-center gap-x-2 bg-black/50 p-2 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white",children:j?(0,s.jsx)(r.Z,{className:"h-4"}):(0,s.jsx)(o.Z,{className:"h-4"})})})]}),(0,s.jsxs)("div",{className:"flex gap-2 items-center",children:[(0,s.jsx)("div",{className:"flex items-center gap-2 text-white",children:(0,s.jsxs)("button",{onClick:()=>S(_,{mobile:!0}),className:"rounded-md flex gap-2 text-xs bg-black/50 p-2 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white",title:"Download fullsize version",children:[(0,s.jsx)("div",{children:"Download"}),(0,s.jsx)(a.Z,{className:"h-4 w-4"})]})}),(0,s.jsx)("div",{className:"text-white/75 text-xs",children:p(_.size)})]})]})})]})})}},1922:function(e,t,l){"use strict";l.d(t,{Z:function(){return i}});var s=l(5893),a=l(8997);function i(e){let{text:t,onClick:l,theme:i="default",size:n="large",disabled:r,className:o,ref:c,...d}=e;return(0,s.jsx)("button",{ref:c,onClick:l,disabled:r,className:(0,a.cn)("block shrink-0 rounded-2xl uppercase font-display font-bold text-center focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-contentContainer-less",...{primary:["bg-primary","text-white","border","border-black","hover:bg-indigo-600","focus:ring-indigo-300","focus:ring-offset-gray-900"],default:["bg-white","text-primary","border","border-black"]}[i],...{xl:["text-lg","py-6","px-4","w-full","sm:w-fit"],large:["text-sm","py-4","lg:py-5","px-2","lg:px-4","w-full","sm:w-fit"],default:["text-sm","py-4","lg:py-5","px-2","lg:px-4","w-full","sm:w-fit"]}[n],o),...d,children:t})}},6814:function(e,t,l){"use strict";l.d(t,{Z:function(){return i}});var s=l(5893),a=l(512);function i(e){let{isH1:t,isH2:l,isH3:i,text:n,className:r}=e,o=(0,a.Z)(["font-display font-bold leading-none tracking-tighter break-words text-3xl lg:text-5xl 2xl:text-[68px]",r]);return t?(0,s.jsx)("h1",{className:o,children:n}):l?(0,s.jsx)("h2",{className:o,children:n}):i?(0,s.jsx)("h3",{className:o,children:n}):(0,s.jsx)("p",{className:o,children:n})}},8399:function(e,t,l){"use strict";l.d(t,{Z:function(){return i}});var s=l(5893),a=l(8997);function i(e){let{text:t,className:l}=e,i=(0,a.cn)([..."font-display text-lg lg:text-lg 2xl:text-2xl text-gray-700 tracking-tight".split(" "),...l?l.split(" "):[]]);return(0,s.jsx)("p",{className:i,children:t})}},1086:function(e,t,l){"use strict";l.d(t,{Z:function(){return i}});var s=l(5893),a=l(512);function i(e){let{isH1:t=!1,isH2:l=!1,isH3:i=!1,text:n,className:r}=e,o=(0,a.Z)(["font-display text-primary text-lg lg:text-lg font-bold uppercase leading-none tracking-tighter",r]);return t?(0,s.jsx)("h1",{className:o,children:n}):l?(0,s.jsx)("h2",{className:o,children:n}):i?(0,s.jsx)("h3",{className:o,children:n}):(0,s.jsx)("p",{className:o,children:n})}},5853:function(e,t,l){"use strict";l.d(t,{Z:function(){return d}});var s=l(5893),a=l(512),i=l(839);function n(e){let{preview:t}=e;return t?(0,s.jsx)("div",{className:(0,a.Z)("border-b",{"bg-accent-7 border-accent-7 text-white":t,"bg-accent-1 border-accent-2":!t}),children:(0,s.jsx)(i.Z,{children:(0,s.jsxs)("div",{className:"py-2 text-center text-sm",children:["This is a page preview."," ",(0,s.jsx)("a",{href:"/api/exit-preview",className:"underline hover:text-cyan duration-200 transition-colors",children:"Click here"})," ","to exit preview mode."]})})}):null}var r=l(8485),o=l(2782),c=l(7331);function d(e){let{preview:t,children:l,isHome:i,footerClassName:d,primaryCTA:x}=e;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o.Z,{}),(0,s.jsxs)("div",{className:(0,a.Z)(["relative",i?"max-h-screen sm:overflow-y-scroll sm:snap-y sm:snap-proximity":""]),children:[i?(0,s.jsx)("div",{className:"absolute inset-0",children:(0,s.jsx)("img",{className:"w-full h-full object-cover object-[center_-200px] lg:object-bottom",src:"/img/home_hero.jpg"})}):(0,s.jsx)("div",{className:"absolute min-h-screen w-full z-[-1]",children:(0,s.jsx)("img",{className:"w-full h-full object-cover object-left-bottom",src:"/img/gradients/hero_bg_gradient.jpg"})}),(0,s.jsxs)("div",{className:"max-w-[1440px] mx-auto",children:[(0,s.jsx)(n,{preview:t}),(0,s.jsx)(c.Z,{isHome:i,primaryCTA:x}),(0,s.jsx)("main",{children:l}),(0,s.jsx)(r.Z,{containerClassName:d})]})]})]})}},9425:function(e,t,l){"use strict";l.d(t,{h:function(){return a}});let{useGlobalState:s}=(0,l(9755).r)({photoToScrollTo:null}),a=()=>s("photoToScrollTo")},4341:function(e,t,l){"use strict";l.r(t),l.d(t,{__N_SSG:function(){return M},default:function(){return q}});var s=l(5893),a=l(1664),i=l.n(a),n=l(7294),r=l(5675),o=l.n(r),c=l(1163),d=l(9547),x=l(1594),m=l(8997);let h=d.fC,u=d.xz,f=e=>{let{className:t,...l}=e;return(0,s.jsx)(d.h_,{className:(0,m.cn)(t),...l})};f.displayName=d.h_.displayName;let p=n.forwardRef((e,t)=>

1{let{className:l,...a}=e;return(0,s.jsx)(d.aV,{ref:t,className:(0,m.cn)("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",l),...a})});p.displayName=d.aV.displayName;let g=n.forwardRef((e,t)=>{let{className:l,children:a,...i}=e;return(0,s.jsxs)(f,{children:[(0,s.jsx)(p,{}),(0,s.jsxs)(d.VY,{ref:t,className:(0,m.cn)("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",l),...i,children:[a,(0,s.jsxs)(d.x8,{className:"absolute right-12 top-8 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",children:[(0,s.jsx)(x.Z,{className:"h-8 w-8"}),(0,s.jsx)("span",{className:"sr-only",children:"Close"})]})]})]})});g.displayName=d.VY.displayName;let b=e=>{let{className:t,...l}=e;return(0,s.jsx)("div",{className:(0,m.cn)("flex flex-col space-y-1.5 text-center sm:text-left",t),...l})};b.displayName="DialogHeader";let w=e=>{let{className:t,...l}=e;return(0,s.jsx)("div",{className:(0,m.cn)("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",t),...l})};w.displayName="DialogFooter";let j=n.forwardRef((e,t)=>{let{className:l,...a}=e;return(0,s.jsx)(d.Dx,{ref:t,className:(0,m.cn)("text-lg font-semibold leading-none tracking-tight",l),...a})});j.displayName=d.Dx.displayName;let v=n.forwardRef((e,t)=>{let{className:l,...a}=e;return(0,s.jsx)(d.dk,{ref:t,className:(0,m.cn)("text-sm text-muted-foreground",l),...a})});v.displayName=d.dk.displayName;var N=l(839),y=l(5853),k=l(9425),Z=l(8073),C=l(574),_=l(461),z=l(4874),S=l(9093);function D(e){let{images:t,onClose:l}=e,a=(0,n.useRef)(),i=(0,c.useRouter)(),{fileId:r}=i.query,o=t.findIndex(e=>e.id===r),[d,x]=(0,n.useState)(0),[m,h]=(0,n.useState)(r);function u(){i.push(S.qC.ROOT,void 0,{shallow:!0}),l()}function f(e){t.findIndex(t=>t.id===e)>o?x(1):x(-1),h(e),i.push({query:{fileId:e}},S.qC.DETAIL.replace(":fileId",e),{shallow:!0})}return(0,_.Z)("ArrowRight",()=>{o+1<t.length&&f(t[o+1].id)}),(0,_.Z)("ArrowLeft",()=>{o>0&&f(t[o-1].id)}),(0,s.jsxs)(Z.V,{static:!0,open:!0,onClose:u,initialFocus:a,className:"fixed inset-0 z-10 flex items-center justify-center",children:[(0,s.jsx)(Z.V.Overlay,{ref:a,as:C.E.div,className:"fixed inset-0 z-30 bg-black/70 backdrop-blur-2xl",initial:{opacity:0}

1,animate:{opacity:1}},"backdrop"),(0,s.jsx)(z.Z,{fileId:m.toString(),direction:d,images:t,changeFileId:f,closeModal:u,navigation:!0})]})}var E=l(1922),R=l(2782),T=l(1086),B=l(6814),I=l(8399),M=!0;function q(e){let{emailTemplates:t,preview:l}=e,{fileId:a}=(0,c.useRouter)().query,[r,d]=(0,k.h)(),x=(0,n.useRef)(null);return(0,n.useEffect)(()=>{r&&!a&&(x.current.scrollIntoView({block:"center"}),d(null))},[a,r,d]),(0,s.jsxs)(y.Z,{preview:l,children:[(0,s.jsx)(R.Z,{title:"Email templates | Free email templates for marketing campaigns",description:"A collection of free email templates for you to use in your own email campaigns. Check back often for new templates. Download and use them in your email marketing campaigns today."}),(0,s.jsx)("div",{children:(0,s.jsxs)(N.Z,{children:[(0,s.jsxs)("div",{className:"flex flex-col items-center gap-y-8 mx-auto px-4 pt-14 xl:pt-20 sm:px-6 lg:px-8 pb-8 sm:pb-8 lg:pb-4 xl:pb-4",children:[(0,s.jsx)(T.Z,{isH1:!0,text:"Email templates",className:"text-center"}),(0,s.jsx)(B.Z,{isH2:!0,text:"Free email campaign templates",className:"text-center max-w-4xl"}),(0,s.jsx)(I.Z,{text:"Download a template to use in your own email marketing campaigns today, and check back often for new templates.",className:"text-center max-w-3xl"})]}),(0,s.jsx)("div",{className:"flex flex-wrap justify-center mb-8",children:(0,s.jsxs)(h,{children:[(0,s.jsx)(u,{asChild:!0,children:(0,s.jsx)(E.Z,{text:"How to use"})}),(0,s.jsxs)(g,{className:"p-12 sm:max-w-xl bg-white border rounded-3xl sm:rounded-5xl border-black shadow-contentContainer",children:[(0,s.jsxs)(b,{children:[(0,s.jsx)(j,{className:"font-display mb-4 text-xl",children:"How to use these images"}),(0,s.jsx)(v,{children:(0,s.jsxs)("ul",{className:"list-none flex flex-col gap-y-5",children:[(0,s.jsxs)("li",{children:[(0,s.jsx)("div",{className:"text-lg font-semibold leading-none tracking-tight font-display mb-2",children:"1. Find"}),(0,s.jsx)("div",{children:"Browse the collection for an image you want to use for your own email campaign."})]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("div",{className:"text-lg font-semibold leading-none tracking-tight font-display mb-2",children:"2. Download"}),(0,s.jsx)("div",{children:"Click the download button to download the file onto your computer or phone."})]}),(0,s.jsxs)("li",{children:[(0,s.jsx)("div",{className:"text-lg font-semibold leading-none tracking-tight font-display mb-2",children:"3. Upload"}),(0,s.jsx)("div",{children:"Log into your email service provider of choice (Mailchimp, Klaviyo, Shopify etc), create your campaign and upload your downloaded image to create your email."})]})]})})]}),(0,s.jsx)(w,{children:(0,s.jsx)(u,{asChild:!0,children:(0,s.jsx)(E.Z,{text:"Close",type:"button"})})})]})]})}),(0,s.jsxs)("main",{className:"mx-auto max-w-[1960px] p-4",children:[a&&(0,s.jsx)(D,{images:t,onClose:()=>{d(a)}}),(0,s.jsx)("div",{className:"grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",children:t.map(e=>{let{id:t,url:l,alt:a,blurDataUrl:n}=e;return(0,s.jsx)(i(),{href:"".concat(S.qC.ROOT,"?fileId=").concat(t),as:S.qC.DETAIL.replace(":fileId",String(t)),ref:t===r?x:null,shallow:!0,className:"after:content group relative block w-full cursor-zoom-in after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:shadow-highlight",children:(0,s.jsx)(o(),{alt:a,className:"transform rounded-2xl brightness-90 transition will-change-auto group-hover:brightness-110",style:{transform:"translate3d(0, 0, 0)"},placeholder:"blur",blurDataURL:n,src:"".concat(l,"?tr=w-300,h-430,q-80,fo-top"),width:300,height:450,sizes:"(max-width: 640px) 100vw, (max-width: 1280px) 50vw, (max-width: 1536px) 33vw, 25vw"})},t)})})]})]})})]})}}},function(e){e.O(0,[7800,1664,1720,5675,574,8073,6865,9547,7711,2504,2888,9774,179],function(){return e(e.s=7471)}),_N_E=e.O()}]);