Berita & Layanan
28 April 2022
Share This Article :
Konsistensi AXA Mandiri dalam memberikan produk dan layanan yang berkualitas kepada karyawan, hingga nasabah kembali mendapatkan apresiasi. Berbagai program pengembangan kualitas sumber daya manusia mendapatkan predikat The Best HR Management for The Outstanding Excellent Strategies, Values, and Programs to Develop Competent HR (Category Life Insurance) pada ajang Indonesia Human Resource Awards 2022 besutan media Warta Ekonomi.
Sementara, upaya dan strategi Perusahaan dengan penetrasi tajam pada inovasi untuk peningkatan kualitas pelayanan bagi nasabah khususnya melalui kanal digital, diganjar 4 penghargaan pada 11th Infobank Digital Brand Awards 2022. Salah satunya adalah Golden Trophy atas prestasi AXA Mandiri yang meraih penghargaan ini selama 5 tahun berturut-turut.
Selain itu, AXA Mandiri juga memborong 6 penghargaan atas produk unitlink yang dinilai memiliki kinerja terbaik pada ajang Media Asuransi Unitlink Awards 2022. Pencapaian ini tak lepas dari kontribusi AXA Mandirian yang Yakin Bisa menjalankan fokus dan strategi perusahaan dengan integritas tinggi dalam mewujudkan tujuan perusahaan.
Ibu Elisabeth Evati Dewi, Chief Human Capital AXA Mandiri menerima penghargaan The Best HR Management for The Outstanding Excellent Strategies, Values, and Programs to Develop Competent HR (Category Life Insurance) yang diserahkan secara daring oleh Bapak Muhamad Ihsan, CEO & Chief Editor wartaekonomi.co.id.
Bapak Uke Giri Utama Direktur AXA Mandiri menerima penghargaan Golden Trophy The Best Digital Brand Awards 2018 - 2022 Perusahaan Asuransi Jiwa yang diserahkan secara langsung oleh Bapak Eko B. Supriyanto, Chairman Infobank Media Group.
Bapak Aayush Poddar, Direktur AXA Mandiri memberikan sambutan pada ajang Media Asuransi Unitlink Awards 2022.
The following has evaluated to null or missing: ==> dynamicElement.element("dynamic-content") [in template "1415598#1415646#1876017277" at line 30, column 39] ---- Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign Category = dynamicElement.ele... [in template "1415598#1415646#1876017277" at line 30, column 19] ----
1<#assign base_url = "/web/amfs/" />
2
3<section class="slider-section CX-main CX-card-media-new media simple">
4 <div class="container CX-wrapper">
5 <div class="box-title">
6 <h3 class="font-publico">Pilih Artikel Terkait</h3>
7 </div>
8 <div class="media-slider" aria-label="Media carousel">
9 <#if entries?has_content>
10 <#assign no = 0 />
11 <#list entries as curEntry>
12 <#assign no = no + 1 />
13 <#assign renderer = curEntry.getAssetRenderer() />
14 <#assign className = renderer.getClassName() />
15
16 <#if className == "com.liferay.journal.model.JournalArticle">
17 <#assign journalArticle = renderer.getArticle() />
18 <#assign document = saxReaderUtil.read(journalArticle.getContentByLocale(locale.toString())) />
19 <#assign rootElement = document.getRootElement() />
20
21 <#assign date = journalArticle.getDisplayDate() />
22 <#assign displayDate = dateUtil.getDate(date, "dd MMM yyyy", locale) />
23 <#assign displayTime = dateUtil.getDate(date?time, "HH:mm", locale) />
24
25 <#-- Ambil Category & ImageBackground -->
26 <#assign Category = "" />
27 <#assign ImageBackground = "" />
28 <#list rootElement.elements() as dynamicElement>
29 <#if "Category" == dynamicElement.attributeValue("field-reference")>
30 <#assign Category = dynamicElement.element("dynamic-content").getText() />
31 </#if>
32 <#if "ImageBackground" == dynamicElement.attributeValue("field-reference")>
33 <#assign ImageBackground = dynamicElement.element("dynamic-content").getStringValue() />
34 </#if>
35 </#list>
36
37 <#assign catSlug = stringUtil.replace(Category?lower_case, " ", "-") />
38
39 <div class="box-card-outer vp-fadeinup delayp${no} <#if Category?has_content>tag-${catSlug}</#if>">
40 <div class="box-card-inner">
41
42 <#-- Gambar background -->
43 <#if ImageBackground?has_content>
44 <#assign image_json = jsonFactoryUtil.createJSONObject(ImageBackground) />
45 <#assign path_image = "/documents/" />
46 <#assign image_groupid = image_json.getString("groupId") + "/" />
47 <#assign image_fileEntryId = image_json.getString("fileEntryId") + "/" />
48 <#assign image_name = stringUtil.replace(image_json.getString("name"), " ", "%20") />
49 <#assign image_uuid = "/" + image_json.getString("uuid") + "/" />
50 <#assign full_image = path_image + image_groupid + image_fileEntryId + image_name + image_uuid />
51
52 <a href="${assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, curEntry, true)}" data-senna-off="true">
53 <div class="img-background" style="background-image:url(${full_image});"></div>
54 </a>
55 </#if>
56
57 <#-- Konten card versi sederhana -->
58 <div class="box-card-item">
59 <#-- Tag kategori -->
60 <#if Category?has_content>
61 <div class="box-tag-media font-opensans"><p>${Category}</p></div>
62 </#if>
63 <div class="text">
64 <h4 class="font-publico">
65 <a href="${assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, curEntry, true)}" data-senna-off="true">${curEntry.getTitle(locale)}</a></h4>
66 <#list rootElement.elements() as dynamicElement>
67 <#if "ShortDescription" == dynamicElement.attributeValue("field-reference")>
68 <#assign ShortDescription = dynamicElement.element("dynamic-content").getText() />
69 <p class="font-opensans">${ShortDescription}</p>
70 </#if>
71 </#list>
72 <div class="date">
73 <span>${displayDate}</span>
74 </div>
75 </div>
76 </div>
77 </div>
78 </div>
79 </#if>
80 </#list>
81 </#if>
82 </div>
83 </div>
84</section>
85
86<style lang="scss">
87
88 .slider-section.CX-main.CX-card-media-new.media.simple {
89 background: #E2EFFF;
90 }
91
92.container.CX-wrapper {
93 position: relative;
94}
95
96 .box-title {
97 h3 {
98 font-size: 28px;
99 text-align: center;
100 color: #00008F;
101 font-weight: 700;
102 padding-top: 20px;
103 margin-bottom: 25px;
104 }
105}
106
107.media-slider {
108 position: relative;
109
110 .slick-list {
111 width: 1100px;
112 margin: 0 auto;
113 margin-bottom: 40px;
114
115 .slick-track {
116 opacity: 1;
117 width: 4037px;
118 transform: translate3d(-1101px, 0px, 0px);
119 margin-bottom: 50px;
120
121 .box-card-outer {
122 width: 383px;
123 height: 480px;
124 transition: opacity 0.3s ease;
125
126 .box-card-inner {
127 text-align: left;
128 transition: transform 0.3s ease;
129 margin: 10px;
130 min-width: 280px;
131 position: relative;
132 //display: flex;
133 //flex-direction: column;
134 align-items: stretch;
135
136 &:hover {
137 transform: translateY(-4px);
138 }
139
140 .img-background {
141 //width: 100%;
142 padding-top: 56.25%;
143 background-size: cover;
144 background-position: center right;
145 border-radius: 8px;
146 width: 320px;
147 height: 256.79px;
148
149 }
150
151 .media-body,
152 .box-card-item {
153 //padding: 15px;
154
155 h3,
156 h4 {
157 font-weight: 700;
158 font-size: 18px;
159 margin: 10px 0;
160 color: #00008F;
161 transition: color 0.3s ease;
162
163 a {
164 color: inherit;
165 text-decoration: none;
166
167 &:hover {
168 color: #FCB600;
169 text-decoration: underline;
170 }
171 }
172 }
173
174 .box-tag-media {
175 border: 1px solid;
176 margin-top: 10px;
177 border-radius: 16px;
178 background: #FCB501;
179 color: #FCB501;
180 display: inline-block;
181 padding: 4px 12px;
182
183 p {
184 align-items: center;
185 margin: 0 auto;
186 text-align: center;
187 font-size: 15px;
188 color: #000;
189 }
190 }
191
192 .text {
193 a {
194 font-size: 16px;
195 -webkit-line-clamp: 2;
196 -webkit-box-orient: vertical;
197 overflow: hidden;
198 text-overflow: ellipsis;
199 white-space: normal;
200 word-break: break-word;
201 max-height: calc(1.3em * 2);
202 display: -webkit-box;
203 }
204 }
205
206 p {
207 color: #353535;
208 font-size: 14px;
209 margin: 6px 0;
210 -webkit-line-clamp: 2;
211 -webkit-box-orient: vertical;
212 overflow: hidden;
213 text-overflow: ellipsis;
214 white-space: normal;
215 word-break: break-word;
216 max-height: calc(1.3em * 2);
217 display: -webkit-box;
218 }
219
220 .date {
221 span {
222 font-size: 12px;
223 color: #000;
224 font-weight: 600;
225 }
226 }
227 }
228 }
229 }
230
231 }
232 }
233
234 .slick-slide {
235 padding: 10px;
236 }
237
238 .slick-prev,
239 .slick-next {
240 z-index: 99;
241 height: 36px;
242 width: 36px;
243 background-color: #00008F;
244 border-radius: 50%;
245 opacity: .25;
246 transition: background-color .3s ease, opacity .3s ease;
247
248 &:before {
249 font-family: "Font Awesome\ 5 Pro";
250 font-size: 15px;
251 color: #FFFFFF;
252 position: relative;
253 }
254
255 &:hover {
256 background-color: #FCB600;
257 opacity: 1;
258 }
259 }
260
261 .slick-prev {
262 left: 5px;
263
264 &:before {
265 content: '\f053';
266 }
267 }
268
269 .slick-next {
270 right: 5px;
271
272 &:before {
273 content: '\f054';
274 }
275 }
276
277 .slick-dots {
278 display: flex !important;
279 justify-content: center;
280 gap: 6px;
281 align-items: center;
282 margin-top: 18px;
283
284 li {
285 margin: 0;
286 width: 16px;
287 transition: width 0.3s ease;
288
289 button {
290 width: 100%;
291 height: 5px;
292 background-color: transparent;
293 border: 1px solid #00008F;
294 border-radius: 5px;
295 padding: 0;
296 cursor: pointer;
297 transition: background-color 0.3s ease;
298
299 &::before {
300 content: "";
301 }
302
303 &:hover {
304 background-color: #a9a9a9;
305 }
306 }
307
308 &.slick-active {
309 width: 36px;
310
311 button {
312 background-color: #00008F;
313 }
314 }
315 }
316 }
317
318 &.no-fade .slick-slide {
319 opacity: 1 !important;
320 }
321}
322
323@media (max-width: 1024px) {
324 .media-slider {
325 .slick-prev {
326 display: none !important;
327 }
328 }
329
330 .media-slider {
331 .slick-next {
332 display: none !important;
333 }
334 }
335}
336
337@media (max-width: 768px) {
338 .CX-main.CX-card-media-new.media {
339 padding: 0 !important;
340 }
341
342 .box-title {
343 h3 {
344 font-size: 24px;
345 margin-bottom: 30px;
346 }
347 }
348 .media-slider {
349 .slick-prev {
350 display: none !important;
351 }
352 .slick-next {
353 display: none !important;
354 }
355 .slick-slide {
356 padding: 0;
357 }
358
359 .slick-list {
360 .slick-track {
361 .box-card-outer {
362 width: 320px;
363 height: 360px;
364 .box-card-inner {
365 width: 287px;
366
367 .img-background {
368 width: 100%;
369 height: 192px;
370 padding: 0;
371 }
372
373 .media-body {
374 h3 {
375 font-size: 16px;
376 }
377 h4 {
378 font-size: 16px;
379 }
380 }
381
382 .box-card-item {
383 .text {
384 width: 100%;
385 h4 {
386 font-size: 16px;
387 }
388 }
389
390 .box-tag-media {
391 p {
392 font-size: 12px;
393 }
394
395 .date {
396 span {
397 font-size: 11px;
398 }
399 }
400 }
401 }
402 }
403 }
404 }
405 }
406 }
407}
408
409.slider-section.CX-main.CX-card-media-new.media.simple {
410 position: relative;
411}
412
413</style>
414
415<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
416<script>
417 $(function () {
418 const $slider = $('.media-slider');
419
420 // Inisialisasi Slick
421 $slider.slick({
422 slidesToShow: 3,
423 dots: true,
424 arrows: true,
425 infinite: true,
426 centerMode: false,
427 centerPadding: '0px',
428 lazyLoad: 'ondemand',
429 responsive: [
430 {
431 breakpoint: 1024,
432 settings: {
433 slidesToShow: 2,
434 centerMode: false,
435 centerPadding: '0px'
436 }
437 },
438 {
439 breakpoint: 768,
440 settings: {
441 slidesToShow: 1,
442 centerMode: true,
443 centerPadding: '50px'
444 }
445 },
446 {
447 breakpoint: 400,
448 settings: {
449 slidesToShow: 1,
450 centerMode: true,
451 centerPadding: '25px'
452 }
453 },
454 {
455 breakpoint: 375,
456 settings: {
457 slidesToShow: 1,
458 centerMode: true,
459 centerPadding: '0px'
460 }
461 }
462 ]
463 });
464
465 function fixSlickOpacity() {
466 const totalSlides = $slider.find('.slick-slide').not('.slick-cloned').length;
467 const slick = $slider.slick('getSlick');
468 const currentShow = slick.options.slidesToShow || 1;
469
470 if (totalSlides <= currentShow) {
471 $slider.addClass('no-fade');
472 } else {
473 $slider.removeClass('no-fade');
474 }
475 }
476
477 setTimeout(fixSlickOpacity, 100);
478 $slider.on('setPosition afterChange breakpoint', fixSlickOpacity);
479 });
480</script>
