https://www.fwd.co.id/_next/static/chunks/7921.794aa7727ca2f585.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7921],{79516:(e,t,n)=>{n.d(t,{z:()=>F});var i=n(89051),o=n(20312),a=n(28616),r=n(16402),l=n(25336),c=n(14218),s=n(41368),d=n(35695),p=n(60004),u=n(55198),m=n(20367),h=n(97049),x=n(78937),f=n(59903),g=n(52542),v=n(45342),b=n(18416),w=n(16948),E=n(18968),y=n(2182);n(13026),n(16471),n(14770),n(43724),n(84033),n(6836),n(10087),n(90324);var k=(0,o.A)(function(e){return{imageContainer:{cursor:"pointer",borderRadius:"16px",position:"relative",overflow:"hidden","& picture":{height:"100%"}},slider:{"& .slick-list":{overflow:"visible"}},arrowContainer:(0,i._)({position:"absolute",display:"none",columnGap:"32px"},e.breakpoints.up("md"),{display:"flex"}),chevronIcon:{cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",width:"52px",height:"52px",borderRadius:"100%",backgroundColor:"#FFF",boxShadow:"0px 2px 4px rgba(0, 0, 0, 0.2)",color:x.wu.orange,"&:hover":{opacity:.9},"& svg":{width:"28px",height:"28px"}},actionText:{marginTop:"10px",cursor:"pointer",display:"flex",width:"100%",columnGap:"10px",alignItems:"center",color:x.wu.orange,"&:hover":{opacity:.8}},carouselItemTitle:{color:"#183028",fontWeight:700,display:"-webkit-box","-webkit-line-clamp":2,"-webkit-box-orient":"vertical",overflow:"hidden",textOverflow:"ellipsis"},carouselItemTextContainer:(0,i._)((0,i._)({},e.breakpoints.down("sm"),{width:"calc(100vw - 94px) !important"}),e.breakpoints.down("xs"),{width:"calc(100vw - 52px) !important"})}}),C={appear:1e3,exit:0,enter:1e3};function A(e){var t,n,o,a=e.responsive,r=void 0===a||a,l=(t=(0,f.u)(),n=(0,p.useMemo)(function(){return"md"===t||"lg"==t?[0,!0,1,1]:"sm"===t||"xs"===t?[0,!1,1,-1]:[1,!0,1,2]},[t]),[(o=(0,i.c)(n,4))[0],o[1],o[2],o[3]]),c=(0,i.c)(l,4),s=c[0],d=c[1],u=c[2],m=c[3],h=(0,p.useMemo)(function(){return r?(0,i.a)((0,i.a)({},e),{},{slider:(0,i.a)((0,i.a)({},e.slider),{},{properties:(0,i.a)({activeSlideOffsetIndex:s,showArrows:d,slidesToShow:u,arrowPositionSlideIndex:m},e.slider.properties)})}):e},[e,r,s,d,u]);return p.createElement(P,h)}function P(e){var t=e.images,n=void 0===t?[]:t,o=e.slider,r=void 0===o?{}:o,l=e.onClickAction,c=e.actionText,s=void 0===c?"Play":c,d=e.rtl,u=void 0!==d&&d;e.gtmPushEvent,e.socialProps;var m=r.settings,x=r.properties,f=void 0===x?{}:x,g=f.slideWidth,v=void 0===g?181:g,b=f.slideHeight,w=void 0===b?229:b,E=f.activeSlideOffsetIndex,y=void 0===E?0:E;f.showArrows;var C=f.slidesToShow,A=void 0===C?n.length-1:C,P=f.arrowPositionSlideIndex,_=void 0===P?1:P,S=A>n.length?n.length:A,I=(0,p.useState)(u?n.length-1:0),F=(0,i.c)(I,2),R=F[0],B=F[1],M=k(),z=(0,p.createRef)(),W=(0,p.useMemo)(function(){return n.length},[n]),j=(0,i.a)({dots:!0,infinite:!0,speed:500,slidesToShow:S,slidesToScroll:1,draggable:!0,lazyLoad:!1,centerMode:!1,swipeToSlide:!0,swipe:!0,initialSlide:0,arrows:!1,rtl:u,beforeChange:function(e,t){return B(t)}},m);function H(e){if(u){for(var t,i,o,a=(n.length-1-R+y)%n.length,r=0;r<W;r++)if(e===((a-y)%W+r)%W)return void(null==(i=z.current)||i.slickGoTo(R-(r-y)));null==(o=z.current)||o.slickGoTo(R+1)}else for(var l=0;l<W;l++)if(e===(R+l)%W)return void(null==(t=z.current)||t.slickGoTo(R+l-y))}return p.createElement(a.A,{style:{width:"calc(".concat(W," * ").concat(v,"px + (16px * ").concat(W-1,"))"),overflow:"hidden",position:u?"absolute":"relative",right:0}},p.createElement(a.A,{style:{width:"calc(".concat(S," * ").concat(v,"px + (16px * ").concat(S,"))"),position:"relative"}},p.createElement(h.A,(0,i.f)({},j,{ref:z,className:M.slider}),n.map(function(e,t){var i=(R+y)%n.length===t,o=(n.length-1-R+y)%n.length===t;return p.createElement(T,{key:t,isActiveItem:u?o:i,onSlideClick:H,index:t,onClickAction:l,actionText:s,styleProps:{slideHeight:w,slideWidth:v},item:e})}))),p.createElement(N,{styleProps:{top:"calc(".concat(w,"px - 26px)"),left:u?"auto":"calc(".concat(v*_,"px + (16px * ").concat(_,") + 17px)"),right:u?"calc(".concat(v*_,"px + (16px * ").concat(_,"))"):"auto"},onClickArrow:function(e){var t;null==(t=z.current)||t.slickGoTo(R+(e?1:-1))}}))}function N(e){var t=e.styleProps,n=e.onClickArrow,i=t.top,o=t.right,r=t.left,l=k();return p.createElement(a.A,{className:l.arrowContainer,style:{to

1p:void 0===i?0:i,right:void 0===o?0:o,left:void 0===r?0:r}},p.createElement(a.A,{onClick:function(){return n(!1)},className:l.chevronIcon},p.createElement(g.N,{icon:"chevron-left"})),p.createElement(a.A,{onClick:function(){return n(!0)},className:l.chevronIcon},p.createElement(g.N,{icon:"chevron-right"})))}function T(e){var t=e.index,n=e.styleProps,o=e.item,c=e.onClickAction,s=e.actionText,d=e.isActiveItem,u=e.onSlideClick,m=n.slideHeight,h=n.slideWidth,f=k();return p.createElement(a.A,{key:t},p.createElement(a.A,{key:"slider-".concat(t),className:f.imageContainer,style:{height:"".concat(m,"px"),width:"".concat(h,"px"),border:d?"4px solid ".concat(x.wu.orange):"none"},onClick:function(){return u(t)}},p.createElement(v.P,{media:(0,i.a)((0,i.a)({},o.media),{},{aspectRatio:{mobile:"2-1",desktop:"2-1",tablet:"2-1"}}),hasBorderRadius:!1,critical:!0,objectFit:"cover"})),p.createElement(a.A,{style:{position:"relative",minHeight:"102px"}},p.createElement(r.A,{in:d,timeout:C,style:{position:"absolute",width:d?"200px":0},className:f.carouselItemTextContainer},p.createElement(a.A,{style:{padding:"10px 0"}},p.createElement(l.A,{variant:"body1",className:f.carouselItemTitle},o.title),p.createElement(a.A,{className:f.actionText,onClick:function(){return c(o,t)}},p.createElement(l.A,{variant:"body1",style:{fontWeight:800}},s),p.createElement(g.N,{icon:"play-button",style:{width:"20px",height:"20px"}}))))))}var _=(0,o.A)(function(e){return{root:(0,i._)({marginTop:"85px",position:"relative",display:"flex",alignItems:"center"},e.breakpoints.down("md"),{height:"unset !important",marginTop:"0px",marginBottom:"32px"}),content:(0,i._)({display:"flex",flexDirection:"column",position:"absolute"},e.breakpoints.down("md"),{position:"unset"}),subtitle:{marginBottom:"0px",flex:1},subtitleSmall:{fontSize:"16px"},subtitlePictureContainer:(0,i._)((0,i._)((0,i._)((0,i._)({width:"100%"},"width","40px"),"height","40px"),"padding","5px"),"& img",{objectFit:"contain"}),subtitlePicture:{backgroundSize:"contain"},subtitleContainer:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"16px"}}});function S(e){var t=e.title,n=e.subTitle,o=e.subTitlePicture,a=e.description,r=e.styleProps,l=_();return p.createElement(c.A,{item:!0,sm:12,lg:5,spacing:2,className:l.root,style:{height:r.height}},p.createElement(u.B,{className:l.content},p.createElement(u.B,{className:l.subtitleContainer},o&&p.createElement(u.B,{className:l.subtitlePictureContainer},p.createElement(v.P,{media:(0,i.a)((0,i.a)({},o.media),{},{aspectRatio:{mobile:"1-1",tablet:"1-1",desktop:"1-1"}}

1),hasBorderRadius:!1,hideFallbackImage:!1,className:l.subtitlePicture})),n&&p.createElement(E.T,{variant:"h4",component:"h4",className:(0,d.default)(l.subtitle,(0,i._)({},l.subtitleSmall,!!o))},n)),p.createElement(E.T,{variant:"h2",style:{fontWeight:700}},t),p.createElement(E.T,{variant:"body1",style:{fontWeight:300}},a)))}var I=(0,o.A)(function(e){return{underlay:(0,i._)((0,i._)({backgroundColor:"#FEF9F4",position:"absolute",top:0,left:"105px",width:"100vw",height:"100%",zIndex:-1},e.breakpoints.down("lg"),{left:"-32px",width:"200%"}),e.breakpoints.down("md"),{left:"-32px",width:"200%"}),underlayleft:{right:"105px",left:"auto"},gridTextContainer:(0,i._)({zIndex:1},e.breakpoints.down("md"),{height:"fit-content"}),imageCarouselContainer:(0,i._)({position:"relative",width:"100%",padding:"85px 0 40px 0"},e.breakpoints.down("md"),{padding:"48px 0px 30px"})}}),F=(0,y.w)(function(e){var t=e.title,n=e.subTitle,o=e.subTitlePicture,a=e.description,r=e.orientation,l=void 0===r?"right":r,h=e.videos,g=e.gtmPushEvent,v=e.socialProps,E=e.actionText,y=void 0===E?"Play now":E,k=I(),C=(0,p.useRef)(),P=(0,p.useRef)(),N=(0,p.useState)(!1),T=(0,i.c)(N,2),_=T[0],F=T[1],R=(0,p.useState)(-1),B=(0,i.c)(R,2),M=B[0],z=B[1],W=(0,f.u)(),j=(0,p.useMemo)(function(){return"xs"===W||"sm"===W||"md"===W?[167,211]:[210,266]},[W]),H=(0,i.c)(j,2),G=H[0],L=H[1],O=(0,s.A)("(max-width:".concat(x.fi.values.lg,"px)")),D=(0,p.useMemo)(function(){return"left"===l&&!O},[l,O]),V=(0,p.useMemo)(function(){return D?"row-reverse":"row"},[D]);return p.createElement(u.B,{style:{width:"100%",backgroundColor:"#FFF",overflow:"hidden",padding:"32px 0 32px 0"}},p.createElement(m.C,{fixed:!0,style:{display:"flex",columnGap:"32px"}},p.createElement(c.A,{container:!0,display:"flex",direction:V,justifyContent:"space-between",className:k.gridTextContainer},p.createElement(S,{title:t,subTitle:n,subTitlePicture:o,description:a,styleProps:{top:89,slideHeight:L,height:L}}),p.createElement(c.A,{item:!0,sm:12,lg:6,spacing:1},p.createElement(u.B,{style:{position:"relative",display:"flex",alignItems:"center"}},p.createElement(u.B,{style:{maxWidth:"100%",width:"100%"}},p.createElement(u.B,{className:(0,d.default)(k.underlay,(0,i._)({},k.underlayleft,D))}),p.createElement(u.B,{className:k.imageCarouselContainer},p.createElement(u.B,{style:{position:"relative",height:D?"".concat(L+89,"px"):"auto"}},p.createElement(A,{gtmPushEvent:g,rtl:D,actionText:y,images:h.map(function(e){return{title:e.title,description:e.description,videoUrl:e.url,media:e.thumbnail.media}}),slider:{settings:{dots:!1},properties:{slideWidth:G,slideHeight:L}},responsive:!0,onClickAction:function(e,t){z(t),F(!0),(0,b.P)({event:"navigation",event_action:"button_click",event_label:y},g)}})))))))),p.createElement(w.V,{isModalOpen:_,modalRef:C,iframeRef:P,onCloseModal:function(){F(!1)},videos:h,activeVideoIndex:M,gtmPushEvent:g,socialProps:v}))})},96232:(e,t,n)=>{n.d(t,{R:()=>A});var i=n(89051),o=n(20312),a=n(28616),r=n(25336),l=n(60004),c=n(45342),s=n(35695),d=n(78937),p=n(52542),u=n(97049),m=n(5006),h=n(20367),x=n(16948),f=n(2182);n(13026),n(16471),n(14770),n(43724),n(84033),n(6836),n(10087),n(90324);var g=(0,o.A)(function(e){return{card:(0,i._)((0,i._)((0,i._)({width:"288px",borderRadius:"16px",overflow:"hidden",background:"#FFF"},e.breakpoints.down("lg"),{width:"288px"}),e.breakpoints.down("md"),{width:"288px"}),e.breakpoints.down("sm"),{width:"288px"}),cardPicture:{width:"100%",height:"190px",position:"relative","& picture":{height:"100%"}},videoLengthString:{position:"absolute",right:"8px",bottom:"8px",borderRadius:"4px",padding:"3px 8px",backgroundColor:"#0007",fontSize:"14px"},cardContent:{display:"flex",padding:"16px",flexDirection:"column",justifyContent:"space-between",gap:"10px",height:"141px"},videoTitle:{fontSize:"20px",fontWeight:800,display:"-webkit-box","-webkit-line-clamp":3,"-webkit-box-orient":"vertical",overflow:"hidden",textOverflow:"ellipsis"},typoPlayButton:{color:d.wu.orange,fontWeight:700},textPlayButton:{marginTop:"4px",cursor:"pointer",display:"flex",width:"100%",columnGap:"10px",alignItems:"center",justifyContent:"start"}}});function v(e){var t=e.video,n=e.videoDuration,o=e.videoActionText,u=e.onClickFunc,m=e.videoIndex,h=g();return l.createElement(a.A,{className:h.card},l.createElement(a.A,{className:h.cardPicture},l.createElement(c.P,{media:(0,i.a)((0,i.a)({},t.thumbnail.media),{},{aspectRatio:{mobile:"2-1",desktop:"2-1",tablet:"2-1"}}),hasBorderRadius:!1,critical:!0,objectFit:"cover"}),n&&l.createElement(a.A,{className:h.videoLengthString},l.createElement(r.A,{style:{color:"#FFF"}},n))),l.createElement(a.A,{className:h.cardContent},l.createElement(r.A,{className:h.videoTitle},t.title),l.createElement(a.A,{color:d.wu.orange,className:(0,s.default)(h.textPlayButton),onClick:function(){u&&u(m)}},l.createElement(r.A,{variant:"body1",color:"secondary",className:h.typoPlayButton},o),l.createElement(p.N,{icon:"play-button",fill:d.wu.orange}))))}var b=(0,o.A)(function(e){return{container:(0,i._)({height:"38px",width:"100%",display:"flex",alignItems:"end",justifyContent:"center",gap:"8px"},e.breakpoints.up("md"),{display:"none"}),circle:{backgroundColor:"#B3B6B8",width:"6px",height:"6px",borderRadius:"3px",transition:"all 0.5s"},activeCircle:{backgroundColor:"#E87722",width:"24px"}}});function w(e){var t=e.length,n=e.activeElIndex,o=(0,l.useMemo)(function(){return Array(t).fill(0)},[t]),r=b();return l.createElement(a.A,{className:r.container},o.map(function(e,t){return l.createElement(a.A,{className:(0,s.default)(r.circle,(0,i._)({},r.activeCircle,t===n))})}))}var E=(0,o.A)(function(e){return{container:{},slider:{"& .slick-list":(0,i._)({overflow:"visible"},e.breakpoints.down("sm"),{width:"300px"}),"& .slick-track":{display:"flex","& .slick-slide":{display:"flex",alignItems:"center"}}},sliderShort:{"& .slick-track .slick-slide":(0,i._)((0,i._)((0,i._)({width:"calc(288px + 16px) !important"},e.breakpoints.down("lg"),{width:"calc(288px + 16px) !important"}),e.breakpoints.down("md"),{width:"calc(288px + 16px) !important"}),e.breakpoints.down("sm"),{width:"calc(288px + 16px) !important"})},chevronIcon:{cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",width:"40px",height:"40px",borderRadius:"100%",backgroundColor:"#FFF",boxShadow:"0px 2px 4px rgba(0, 0, 0, 0.2)",color:d.wu.orange,"&:hover":{opacity:.9},"& svg":{width:"28px",height:"28px"}},chevronLeftContainer:(0,i._)({position:"absolute",height:"100%",width:"40px",left:"-46px",top:0,display:"flex",alignItems:"center",zIndex:1},e.breakpoints.down("sm"),{display:"none"}),chevronRightContainer:(0,i._)((0,i._)((0,i._)({position:"absolute",height:"100%",width:"40px",right:"-28px",top:0,display:"flex",alignItems:"center",zIndex:1},e.breakpoints.down("xl"),{}),e.breakpoints.down("md"),{right:"-8px"}),e.breakpoints.down("sm"),{display:"none"}),leftHidePannel:(0,i._)({position:"absolute",height:"100%",width:"1000%",left:"calc(-1000% - 0px)",top:0},e.breakpoints.down("sm"),{display:"none"}),rightHidePannel:(0,i._)({position:"absolute",height:"100%",width:"1000%",right:"calc(-1000% + 18px)",top:0},e.breakpoints.down("sm"),{display:"none"})}}),y="#FEF9F4";function k(e){var t=e.videos,n=e.videoActionText,o=e.onClickFunc,r=E(),c=(0,l.useState)(!1),d=(0,i.c)(c,2),h=d[0],x=d[1],f=(0,l.createRef)(),g=(0,l.useState)(0),b=(0,i.c)(g,2),k=b[0],C=b[1],A=(0,l.useState)(4),P=(0,i.c)(A,2),N=P[0],T=P[1],_={dots:!1,infinite:!0,speed:500,slidesToShow:N>t.length?t.length:N,slidesToScroll:1,draggable:!0,lazyLoad:!1,swipeToSlide:!0,swipe:!0,initialSlide:0,arrows:!1,centerMode:!1,adaptiveWidth:!1,beforeChange:function(e,t){return C(t)}};function S(e){var t;null==(t=f.current)||t.slickGoTo(k+(e?1:-1))}var I=function(e){var t=(0,l.useState)(!1),n=(0,i.c)(t,2),o=n[0],a=n[1],r=(0,l.useState)([]),c=(0,i.c)(r,2),s=c[0],d=c[1];function p(){return(p=(0,i.i)((0,i.j)().mark(function t(){return(0,i.j)().wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return a(!0),t.next=3,Promise.all(e.map(function(e){var t;return t=e.url,new Promise(function(e){var n=document.createElement("video");n.preload="metadata",n.onloadedmetadata=function(){window.URL.revokeObjectURL(n.src),e(function(e){if(e<60){var t=Math.round(e);return"0:".concat(t>=10?t:"0"+t)}var n=Math.round(e%60);return"".concat(Math.floor(e/60),":").concat(n>=10?n:"0"+n)}(n.duration))},n.src=t})}));case 3:d(t.sent),a(!1);case 6:case"end":return t.stop()}},t)}))).apply(this,arguments)}return(0,l.useEffect)(function(){o||function(){p.apply(this,arguments)}()},[e]),[s,o]}(t),F=(0,i.c)(I,1)[0];return l.createElement(a.A,{className:r.container},l.createElement(m.Ay,{handleHeight:!0,handleWidth:!0,onResize:function(e){var n=4;e<928&&(n=3),e<=656&&(n=2),e<=552&&(n=1),T(n),x(n<t.length)},render:function(){return l.createElement(a.A,{style:{position:"relative"}}

1,l.createElement(u.A,(0,i.f)({},_,{className:(0,s.default)(r.slider,(0,i._)({},r.sliderShort,N>t.length)),ref:f}),t.map(function(e,t){var i=F[t];return l.createElement(v,{videoIndex:t,video:e,videoDuration:i,videoActionText:n,onClickFunc:o})})),l.createElement(l.Fragment,null,h&&l.createElement(a.A,{className:r.chevronLeftContainer},l.createElement(a.A,{onClick:function(){return S(!1)},className:r.chevronIcon},l.createElement(p.N,{icon:"chevron-left"}))),h&&l.createElement(a.A,{className:r.chevronRightContainer,style:{}},l.createElement(a.A,{onClick:function(){return S(!0)},className:r.chevronIcon},l.createElement(p.N,{icon:"chevron-right"}))),l.createElement(a.A,{style:{backgroundColor:y},className:r.leftHidePannel}),l.createElement(a.A,{style:{backgroundColor:y},className:r.rightHidePannel})))}}),l.createElement(w,{length:t.length,activeElIndex:k}))}var C=(0,o.A)(function(){return{section:{backgroundColor:"#FEF9F4",width:"100%",overflow:"hidden",padding:"64px 0 68px 0"},title:{fontWeight:700},textContainer:{marginBottom:"32px",fontSize:"20px"},subtitle:{marginBottom:"0px",flex:1},subtitleSmall:{fontSize:"16px"},subtitlePictureContainer:(0,i._)((0,i._)((0,i._)((0,i._)({width:"100%"},"width","40px"),"height","40px"),"padding","5px"),"& img",{objectFit:"contain"}),subtitlePicture:{backgroundSize:"contain"},subtitleContainer:{display:"flex",alignItems:"center",gap:"8px",marginBottom:"16px"}}}),A=(0,f.w)(function(e){var t=C(),n=e.videos,o=e.title,d=e.subTitle,p=e.subTitlePicture,u=e.description,m=e.actionText,f=e.gtmPushEvent,g=e.socialProps,v=(0,l.useState)(!1),b=(0,i.c)(v,2),w=b[0],E=b[1],y=(0,l.useState)(-1),A=(0,i.c)(y,2),P=A[0],N=A[1],T=(0,l.useRef)(),_=(0,l.useRef)();return l.createElement(a.A,null,l.createElement(a.A,{className:t.section},l.createElement(h.C,{fixed:!0,style:{columnGap:"32px"}},l.createElement(a.A,{className:t.subtitleContainer},p&&l.createElement(a.A,{className:t.subtitlePictureContainer},l.createElement(c.P,{media:(0,i.a)((0,i.a)({},p.media),{},{aspectRatio:{mobile:"1-1",tablet:"1-1",desktop:"1-1"}}

1),hasBorderRadius:!1,hideFallbackImage:!1,className:t.subtitlePicture})),d&&l.createElement(r.A,{variant:"h4",component:"h4",className:(0,s.default)(t.subtitle,(0,i._)({},t.subtitleSmall,!!p))},d)),l.createElement(a.A,null,l.createElement(r.A,{variant:"h2",className:t.title},o)),l.createElement(a.A,{className:t.textContainer,dangerouslySetInnerHTML:{__html:u}}),l.createElement(k,{videos:n,videoActionText:m,onClickFunc:function(e){N(e),E(!0)}}))),l.createElement(x.V,{isModalOpen:w,modalRef:T,iframeRef:_,onCloseModal:function(){E(!1)},videos:n,activeVideoIndex:P,gtmPushEvent:f,socialProps:g}))})}}]);
2//# sourceMappingURL=7921.794aa7727ca2f585.js.map