_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[32],{t1mo:function(t,e,i){"use strict";i.r(e);i("bAY4");var o=i("4IMT"),n=i.n(o),c=i("H+61"),s=i("UlJF"),a=i("+Css"),r=i("7LId"),l=i("VIvw"),p=i("iHvq"),d=i("cpVT"),h=i("EcpT"),u=i("IP2g"),b=i("YFqc"),g=i.n(b),j=i("q1tI"),m=i.n(j),f=i("vOnD"),x=i("lCwK"),w=i("k7Sn"),O=i("nKUr");function v(t){var e=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,o=Object(p.a)(t);if(e){var n=Object(p.a)(this).constructor;i=Reflect.construct(o,arguments,n)}else i=o.apply(this,arguments);return Object(l.a)(this,i)}}var y=function(t){Object(r.a)(i,t);var e=v(i);function i(){var t;Object(c.a)(this,i);for(var o=arguments.length,n=new Array(o),s=0;s<o;s++)n[s]=arguments[s];return t=e.call.apply(e,[this].concat(n)),Object(d.a)(Object(a.a)(t),"state",{isYoutubeOpen:!1}),Object(d.a)(Object(a.a)(t),"_toggleYoutubeModal",(function(){t.setState((function(t){return{isYoutubeOpen:!t.isYoutubeOpen}}))})),t}return Object(s.a)(i,[{key:"render",value:function(){var t=this.props,e=t.pageLoading,i=t.t,o=this.state.isYoutubeOpen,c=[{image:"/static/images/howto/howto-step-1.png",icon:h.q,title:i("step1.title"),subtitle:i("step1.subtitle")},{image:"/static/images/howto/howto-step-2.png",icon:h.j,title:i("step2.title"),subtitle:i("step2.subtitle")},{image:"/static/images/howto/howto-step-3.png",icon:h.c,title:i("step3.title"),subtitle:i("step3.subtitle")},{image:"/static/images/howto/howto-step-4.png",icon:h.b,title:i("step4.title"),subtitle:i("step4.subtitle")}];return Object(O.jsxs)(x.f,{pageLoading:e,children:[Object(O.jsx)(_,{children:Object(O.jsx)(x.a,{children:Object(O.jsxs)("div",{className:"howto-container",children:[Object(O.jsxs)("div",{className:"desc",children:[Object(O.jsx)("h1",{children:i("title")}),Object(O.jsx)("p",{className:"_ffml-base",children:i("detail")}),Object(O.jsx)(g.a,{href:"/home",as:"/",children:Object(O.jsx)("a",{children:Object(O.jsx)(n.a,{children:i("button")})})})]}),Object(O.jsx)("div",{className:"video",onClick:this._toggleYoutubeModal,children:Object(O.jsx)("img",{src:"/static/images/howto/howto-video.jpg",alt:"howto"})})]})})}),Object(O.jsx)(x.a,{children:Object(O.jsxs)(N,{children:[c.map((function(t,e){return Object(O.jsxs)("div",{className:"step",children:[Object(O.jsx)("div",{className:"step-image",children:Object(O.jsx)("img",{src:t.image,alt:"step"})}),Object(O.jsxs)("div",{className:"step-content",children:[Object(O.jsx)("div",{className:"icon",children:Object(O.jsx)(u.a,{icon:t.icon,style:{fontSize:32}})}),Object(O.jsxs)("div",{className:"desc",children:[Object(O.jsx)("h1",{children:t.title}),Object(O.jsx)("p",{className:"_ffml-base",children:t.subtitle})]})]})]},"howto-step-".concat(e))})),Object(O.jsx)("div",{className:"button-footer",children:Object(O.jsx)(g.a,{href:"/home",as:"/",children:Object(O.jsx)("a",{children:Object(O.jsx)(n.a,{type:"primary",children:i("submit")})})})})]})}),o&&Object(O.jsx)(x.o,{link:"https://www.youtube.com/embed/EcCRxbQsj3A",closeModal:this._toggleYoutubeModal})]})}}]),i}(m.a.Component);e.default=Object(w.withTranslation)("howto")(y);var _=f.c.div.withConfig({displayName:"howto__StyledHowToHeader",componentId:"sc-lgs5np-0"})(["height:500px;background-image:url('/static/images/howto/howto-bg-header.jpg');background-size:cover;background-position:bottom;margin-bottom:100px;.howto-container{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;color:white;.desc{> h1{font-size:var(--font-size-3);color:white;}.ant-btn{color:#00cdac;border-color:#00cdac;}}.video{cursor:pointer;> img{width:100%;}}}@media only screen and (max-width:1023px){height:unset;margin-bottom:40px;.howto-container{grid-template-columns:1fr;gap:64px;.desc{text-align:center;> h1{margin-top:24px;font-size:var(--font-size-4);}}}}"]),N=f.c.div.withConfig({displayName:"howto__StyledHowTo",componentId:"sc-lgs5np-1"})([".button-footer{margin:64px 0;text-align:center;}.step{display:grid;grid-template-columns:1fr 1fr;gap:24px;&-image{text-align:center;}&-content{padding-top:40px;display:flex;.icon{width:64px;margin-top:24px;text-align:center;color:#fd8124;}.desc{flex:1;padding:0 16px;> h1{font-size:var(--font-size-3);color:var(--color-primary);margin-top:16px;}}}}@media only screen and (max-width:1023px){.step{grid-template-columns:1fr;&-image{display:none;}&-content{padding-top:12px;.icon{margin-top:16px;}.desc{padding:0;> h1{font-size:var(--font-size-4);}}}}}"])},yxXA:function(t,e,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/howto",function(){return i("t1mo")}])}},[["yxXA",2,1,12,11,10,13,0,3,6,5,4,7,8,9,14,15]]]);