<!-- Error rendering component -->
<!-- Cannot read properties of undefined (reading 'includes') -->
<!-- TypeError: Cannot read properties of undefined (reading 'includes')
at Object.staticPath (/Users/antoniomatera/Sites/adb/node_modules/@frctl/handlebars/src/helpers/path.js:16:18)
at Object.helperWrapper (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/index.js:130:23)
at Object.<anonymous> (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/lib/utils.js:29:28)
at Object.wrapper (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
at eval (eval at createFunctionContext (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:11:118)
at Object.prog (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/runtime.js:268:12)
at Object.prepareAndResolveMarkers (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/index.js:92:17)
at Object.fn (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/lib/utils.js:29:28)
at Object.<anonymous> (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/helpers/if.js:29:22)
at Object.helperWrapper (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/index.js:130:23)
at Object.<anonymous> (/Users/antoniomatera/Sites/adb/node_modules/promised-handlebars/lib/utils.js:29:28)
at Object.wrapper (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/internal/wrapHelper.js:15:19)
at Object.eval [as main] (eval at createFunctionContext (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/compiler/javascript-compiler.js:262:23), <anonymous>:15:47)
at main (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/runtime.js:208:32)
at ret (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/runtime.js:212:12)
at ret (/Users/antoniomatera/Sites/adb/node_modules/handlebars/dist/cjs/handlebars/compiler/compiler.js:519:21) -->
<div class="c-teaser {{ modifier }}">
<div class="c-teaser__img" style="background-image: url({{ path bg-path }})" aria-hidden="true"></div>
<div class="c-teaser__content">
{{#if teaser-title }}
<div class="c-teaser__title">
<img src="{{ path logo-path }}" class="c-teaser__logo" alt="">
{{{ teaser-title }}}
</div>
{{/if}}
<div class="c-teaser__txt">
{{{ teaser-text }}}
</div>
{{#if teaser-cta }}
<div class="c-teaser__cta">
{{> @link teaser-cta }}
</div>
{{/if}}
</div>
</div>
{
"bg-path": "/images/teaser-innovability.png",
"teaser-text": "Tre parole che iniziano come la sigla che identifica il Marconi in tutto il mondo e che spiegano in modo sintetico l’obiettivo che la società persegue ogni giorno: una migliore qualità della vita per tutti. Del territorio in cui opera, dei passeggeri, dei dipendenti e dei fornitori.",
"teaser-title": "BLQ, Better Living Quality.",
"teaser-cta": {
"modifier": "c-link c-link--inverse",
"text": "Scopri di più",
"url": "#",
"svg": false
}
}
.c-teaser {
background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
margin-bottom: remify(32px);
position: relative;
overflow: hidden;
@include min-screen(bp(tablet)) {
display: flex;
align-items: center;
justify-content: space-between;
}
&:before {
content: '';
position: absolute;
z-index: 2;
width: 0;
height: 0;
top: 0;
left: 0;
opacity: 1;
z-index: 2;
background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
@include min-screen(bp(tablet)) {
width: 100%;
height: 100%;
background: transparent url(../../images/svgs/superhero-mask-wide.svg) no-repeat right 15vw top;
background-size: cover;
}
}
}
.c-teaser__img {
width: 100%;
min-height: remify(180px); // From 100px to 180px. Fixes #325.
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
@include min-screen(bp(tablet)) {
background-position: center center;
background-size: cover;
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
right: 0;
max-width: remify(600px);
// max-width: remify(400px);
// -webkit-clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
// clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}
}
.c-teaser__content {
padding: remify(16px);
position: relative;
z-index: 3;
@include min-screen(bp(tablet)) {
padding: remify(24px) remify(48px);
order: 1;
flex-grow: 1;
padding-right: 32vw;;
}
}
.c-teaser__title {
color: primary(night, 100);
@include font-scale(level-3);
font-weight: fw(bold);
margin-bottom: remify(16px);
}
.c-teaser__logo {
vertical-align: middle;
margin-right: remify(16px);
position: relative;
top: remify(-5px);
}
.c-teaser__txt {
color: primary(night, 100);
p {
@include min-screen(bp(tablet)) {
font-size: 150%;
}
}
small {
display: block;
margin-top: remify(32px);
}
a {
color: currentColor;
}
}
.c-teaser__cta {
margin-top: remify(32px);
}
No notes defined.