No notes defined.
<!-- Error rendering component -->
<!-- (unknown path)
Error: Could not render component '@spk-document-list-item--sunken' - component not found. -->
<!-- Template render error: (unknown path)
Error: Could not render component '@spk-document-list-item--sunken' - component not found.
at Object._prettifyError (/Users/apart/Documents/projects/spuerkeess-design-system/node_modules/nunjucks/src/lib.js:32:11)
at /Users/apart/Documents/projects/spuerkeess-design-system/node_modules/nunjucks/src/environment.js:464:19
at eval (eval at _compile (/Users/apart/Documents/projects/spuerkeess-design-system/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:115:12)
at eval (eval at _compile (/Users/apart/Documents/projects/spuerkeess-design-system/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:428:13)
at /Users/apart/Documents/projects/spuerkeess-design-system/node_modules/@frctl/nunjucks/src/extensions/render.js:47:25
at process.processTicksAndRejections (node:internal/process/task_queues:105:5) -->
{% extends "@spk-page-layout" %}
{% block header %}
{% render "@spk-header--main" %}
{% endblock %}
{% block mainTop %}
<section class="{{ namespace }}section -sectionSunken">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
{% render "@spk-comparison-table--buttons" %}
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section -sectionSunken -sectionInverted">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container {{ namespace }}stackLg">
{% render "@spk-contextual-links--accordion" %}
{# {% render "@spk-contextual-links--inverted" %}#}
{% render "@spk-contextual-links" %}
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
{% render "@checkbox" %}
<div class="{{ namespace }}stackLg">
<div class="h4">La société est-elle domiciliée?</div>
<ul class="list-unstyled {{ namespace }}stackMd">
<li>
{% render "@radio",{inputName: "step-1-soc-dom", id: "radio-step-1-soc-dom-1", text: "Oui", checked: true},true %}
</li>
<li>
{% render "@radio",{inputName: "step-1-soc-dom", id: "radio-step-1-soc-dom-2", text: "Non"},true %}
</li>
</ul>
</div>
<div class="{{ namespace }}section__textColor">
<p>text inside content section</p>
{% render "@input--hint" %}
{% render "@select" %}
{% render "@spk-advanced-select-item" %}
{% render "@spk-advanced-select" %}
</div>
<div class="{{ namespace }}stackLg">
{% render "@btn-secondary" %}
{% render "@btn-secondary-inverse" %}
<div class="{{ namespace }}box -insetLg {{ namespace }}stackLg">
<p>text inside box</p>
{% render "@btn-secondary" %}
{% render "@btn-secondary-inverse" %}
{% render "@btn-primary" %}
</div>
</div>
</div>
</div>
</div>
</section>
<div class="frame-type-apartbcee_highlightedarticles">
<section class="{{ namespace }}section">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="{{ namespace }}stack3xl">
<div class="container">
{% render "@hero-heading" %}
</div>
<div class="container">
{% render "@spk-highlighted-article-list" %}
</div>
</div>
</div>
</div>
</section>
</div>
<section class="{{ namespace }}section -sectionSunken -sectionInverted">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="{{ namespace }}stack3xl">
<div class="container">
{% render "@spk-spot-select-list--default" %}
</div>
<div class="container">
{% render "@range" %}
</div>
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
{% render '@spk-content-box--info-outline',{
eltType: "div"
}, true %}
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="{{ namespace }}stackXl">
{% render "@heading--h2-subtext",{
text: "Vous souhaitez effectuer une simulation, prendre un rendez-vous ou consulter un document ?",
subText: "Spuerkeess vous propose un éventail d'outils digitaux."
},true %}
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
{% render '@spk-icon-link-box' %}
</div>
<div class="col-12 col-md-6 col-lg-3">
{% render '@spk-icon-link-box' %}
</div>
<div class="col-12 col-md-6 col-lg-3">
{% render '@spk-icon-link-box' %}
</div>
<div class="col-12 col-md-6 col-lg-3">
{% render '@spk-icon-link-box' %}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section -sectionSunken">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
{# {% render "@spk-comparison-table" %}#}
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section -sectionSunken">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
{% render "@spk-quote" %}
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section -sectionSunken">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="{{ namespace }}stackXl">
<div class="h2">Comment pouvons-nous vous accompagner ?</div>
{% render "@spk-decision-help" %}
</div>
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-sm-6">
<img class="img-fluid"
src="https://design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-relaxingsofa.svg"
alt="">
</div>
<div class="col-12 col-sm-6">
<div class="{{ namespace }}stackXxl">
<div class="{{ namespace }}stackXl">
<div class="h3">Trois raisons pour devenir client</div>
{% render "@spk-feature-icon-box-list",{
rowModifiers: []
},true %}
</div>
<div class="{{ namespace}}btnGroup">
{% render "@btn-secondary",{
eltType: "a",
text: "Je centralise mes finances"
},true %}
{% render "@btn-primary",{
eltType: "a",
text: "Je deviens client"
},true %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="{{ namespace }}stackXl">
{% render "@heading--h2-subtext",{
text: "Optez pour l’expertise de Spuerkeess",
subText: "Devenez client depuis votre smartphone - c’est facile et rapide"
},true %}
{% render '@spk-new-mobile-version' %}
</div>
</div>
</div>
</div>
</section>
{% render "@spk-page-cover" %}
<section class="{{ namespace }}section -sectionSunken">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="row align-items-stretch-immediate-typo3">
<div class="col-12 col-lg-4">
<div class="frame-default">
{% render "@spk-picture-link-box--vertical" %}
</div>
</div>
<div class="col-12 col-lg-4">
<div class="frame-default">
{% render "@spk-picture-link-box--vertical" %}
</div>
</div>
<div class="col-12 col-lg-4">
<div class="frame-default">
{% render "@spk-picture-link-box--vertical" %}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% render "@spk-related-articles" %}
<section class="{{ namespace }}section -sectionSunken">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="{{ namespace }}section__textColor">
<p>text inside content section</p>
</div>
<div class="{{ namespace }}stackLg">
{% render "@btn-secondary" %}
{% render "@btn-secondary-inverse" %}
<div class="{{ namespace }}box -insetLg {{ namespace }}stackLg">
<p>text inside box</p>
{% render "@btn-secondary" %}
{% render "@btn-secondary-inverse" %}
</div>
<div class="{{ namespace }}box -insetLg -boxSunken {{ namespace }}stackLg">
<p>text inside box</p>
{% render "@btn-secondary" %}
{% render "@btn-secondary-inverse" %}
</div>
</div>
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section -sectionSunken -sectionInverted">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="{{ namespace }}section__textColor">
<p>text inside content section</p>
</div>
<div class="{{ namespace }}stackLg">
{% render "@btn-secondary" %}
{% render "@btn-secondary-inverse" %}
<div class="{{ namespace }}box -insetLg {{ namespace }}stackLg">
<p>text inside box</p>
{% render "@btn-secondary" %}
{% render "@btn-secondary-inverse" %}
</div>
</div>
{% render '@spk-content-box' %}
{% render '@spk-content-box--link' %}
{% render '@spk-content-box--info' %}
{% render '@spk-content-box--important' %}
{% render '@spk-content-box--success' %}
{% render '@spk-content-box--warning' %}
{% render '@spk-content-box--link' %}
{% render '@spk-document-list-item--sunken' %}
<div class="sds-box -insetLg">
<form action="">
<label class="sds-label" for="">Test</label>
</form>
</div>
</div>
</div>
</div>
</section>
<div data-theme="retail-light">
{% render "@spk-lease-slider" %}
</div>
{% endblock %}
{% block main %}
{# {% render "@spk-modal-base--popup" %}#}
<section class="{{ namespace }}section" id="couponGrid">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-md-6">
<div class="{{ namespace }}stackXl">
{% render "@spk-coupon" %}
{% render "@spk-coupon" %}
</div>
</div>
<div class="col-12 col-md-6 col-lg-5">
<div class="position-sticky {{ namespace }}stickyMd" data-reacts-to-headroom>
{% render "@spk-coupon-partner" %}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="row align-items-stretch-immediate-typo3">
<div class="col-12 col-lg-4">
<div class="frame-default">
{% render "@spk-icon-link-box--social" %}
</div>
</div>
<div class="col-12 col-lg-4">
<div class="frame-default">
{% render "@spk-links-icon-box" %}
</div>
</div>
<div class="col-12 col-lg-4">
<div class="frame-default">
{% render "@spk-picture-link-box" %}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section" id="#porductFeatureDetails">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
{% render "@spk-product-feature-details" %}
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section -sectionSunken">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="row align-items-stretch-immediate">
<div class="col-12 col-lg-4">
{% render "@spk-product-column--spot-footer" %}
</div>
<div class="col-12 col-lg-4">
{% render "@spk-product-column--spot-footer-img-top" %}
</div>
<div class="col-12 col-lg-4">
{% render "@spk-product-column--spot-footer-img-small-top" %}
</div>
</div>
<div class="row align-items-stretch-immediate">
<div class="col-12 col-lg-4">
{% render "@spk-product-column" %}
</div>
<div class="col-12 col-lg-4">
{% render "@spk-product-column--small-img" %}
</div>
<div class="col-12 col-lg-4">
{% render "@spk-product-column--no-img" %}
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block contactFooter %}
{% render "@spk-contact-footer" %}
{% endblock %}
{% block footer %}
{% render "@footer" %}
<div class="{{ namespace }}box -insetLg {{ namespace }}boxShadowActive" style="background: white !important; margin: auto; position: fixed; z-index: 10000000; bottom: 16px; left:0; right: 0; max-width: 400px; width: 100%">
<div class="{{ namespace }}btnGroup">
<select id="themeSelect" style="width: 50%;">
<option value="retail">Retail</option>
<option value="private">Private</option>
<option value="axxess">Axxess</option>
<option value="tweenz">Tweenz</option>
</select>
<select id="modeSelect" style="width: 50%;">
<option value="light">Light Mode</option>
<option value="dark">Dark Mode</option>
</select>
</div>
<script>
const themeSelect = document.getElementById('themeSelect');
const modeSelect = document.getElementById('modeSelect');
const body = document.body;
themeSelect.addEventListener('change', () => {
const newTheme = themeSelect.value;
document.documentElement.setAttribute('data-brand', newTheme);
});
modeSelect.addEventListener('change', () => {
const newMode = modeSelect.value;
document.documentElement.setAttribute('data-mode', newMode);
});
</script>
</div>
{% endblock %}
{% block misc %}
{# {% render "@spk-search-modal" %}#}
{% endblock %}