Logement Simulator

No notes defined.

<div class="sds-sectionForm__item -hasStickyMobileBtn sds-box -insetLg sds-stackMd">
    <div class="sds-sectionForm__itemBody sds-stackMd">
        <div class="row row-sm align-items-center">
            <div class="col-md-5">
                <img class="img-fluid d-block mx-auto" src="https://design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-simugood.svg" alt="">
            </div>
            <div class="col-md-7">
                <div class="h2">
                    Super, votre projet semble réalisable.
                </div>
            </div>
        </div>
        <div class="row row-sm flex-md-row-reverse">
            <div class="col-md-6">
                <div class="sds-stackMd sticky-top" id="housingSimulatorResults">
                    <div class="h4">Exemples de mensualités du prêt*</div>
                    <div class="sds-stackMd">
                        <div class="sds-simulatorResultCard sds-box -elevated">
                            <div class="sds-simulatorResultCard__header">
                                <div class="sds-textSemiBold sds-textHelper">
                                    Taux variable (1,8%)
                                </div>
                                <div class="sds-amount -positive -amountXl">
                                    <span class="sds-amount__value">{+#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                    <span class="sds-amount__frequency">
                                        / mois
                                    </span>

                                </div>
                            </div>
                            <p class="sds-textHelper">Soit 3.990 € / mois avec vos charges mensuelles existantes</p>
                            <p class="sds-textHelper">TAEG: 3.76%</p>
                        </div>
                        <div class="sds-simulatorResultCard sds-box -elevated">
                            <div class="sds-simulatorResultCard__header">
                                <div class="sds-textSemiBold sds-textHelper">
                                    Taux variable (1,8%)
                                </div>
                                <div class="sds-amount -positive -amountXl">
                                    <span class="sds-amount__value">{+#.###,##}</span>

                                    <span class="sds-amount__currency"></span>

                                    <span class="sds-amount__frequency">
                                        / mois
                                    </span>

                                </div>
                            </div>
                            <p class="sds-textHelper">Soit 3.990 € / mois avec vos charges mensuelles existantes</p>
                            <p class="sds-textHelper">TAEG: 3.76%</p>
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="button" class="sds-btn -btnSecondary -btnSmall -collapseTrigger">

                            <span class="sds-icon sds-icon-paperplane"></span>

                            <span class="sds-btn__text">Envoyer données</span>

                        </button>
                    </div>
                    <p class="sds-formDisclaimer">
                        (*) mensualités indicatives calculées sur base des données saisies.<br>(**) Vous pouvez ajouter une assurance solde restant dû (ASRD) pour vous protéger. Simulation indicative pour 60% de montant total assuré. <a href=''>Rendez-vous sur lalux</a>
                    </p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="sds-stackMd">
                    <div class="h4">Résultat simulation</div>
                    <div>
                        <div class="form-group">
                            <div class="sds-label">
                                Montant

                            </div>
                            <div class="sds-amount -amountXl -secondary100">
                                <span class="sds-amount__value">335,30</span>

                                <span class="sds-amount__currency"></span>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="sds-label -form">
                                Apport personnel

                            </label>
                            <div class="sds-input -hasShadow">
                                <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">

                                <div class="sds-input__shadowInput form-control" aria-hidden="true">
                                    <div class="sds-input__shadowValue">
                                        4000
                                    </div>
                                    <div class="sds-input__shadowCurrency"></div>
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="sds-label -form">
                                Durée du prêt

                            </label>
                            <div class="sds-input -hasShadow">
                                <input id="" class="sds-input form-control" type="number" placeholder="0" value="30">

                                <div class="sds-input__shadowInput form-control" aria-hidden="true">
                                    <div class="sds-input__shadowValue">
                                        30
                                    </div>
                                    <div class="sds-input__shadowCurrency">
                                        ans
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <div class="collapse" id="simulationDetail">
                                <div class="sds-inputRecap">
                                    <div class="row row-xs">
                                        <div class="col-12">
                                            <label for="" class="sds-label -form">
                                                Montant du bien immobilier

                                            </label>
                                            <div class="sds-input -hasShadow">
                                                <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">

                                                <div class="sds-input__shadowInput form-control" aria-hidden="true">
                                                    <div class="sds-input__shadowValue">
                                                        4000
                                                    </div>
                                                    <div class="sds-input__shadowCurrency"></div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <label for="" class="sds-label -form">
                                                Montant des travaux

                                            </label>
                                            <div class="sds-input -hasShadow">
                                                <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">

                                                <div class="sds-input__shadowInput form-control" aria-hidden="true">
                                                    <div class="sds-input__shadowValue">
                                                        4000
                                                    </div>
                                                    <div class="sds-input__shadowCurrency"></div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <label for="" class="sds-label -form">
                                                Apport personnel

                                            </label>
                                            <div class="sds-input -hasShadow">
                                                <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">

                                                <div class="sds-input__shadowInput form-control" aria-hidden="true">
                                                    <div class="sds-input__shadowValue">
                                                        4000
                                                    </div>
                                                    <div class="sds-input__shadowCurrency"></div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="row align-items-stretch">
                                                <div class="col-5 d-flex flex-column">
                                                    <label for="test" class="sds-label -form flex-grow-1">
                                                        Frais d'enrgeistrement

                                                        <a href="#!" tabindex="0" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                                            <span class="sds-icon sds-icon-infocirclefill"></span>
                                                        </a>

                                                    </label>
                                                    <div class="sds-input -hasShadow">
                                                        <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000" readonly>

                                                        <div class="sds-input__shadowInput form-control" aria-hidden="true">
                                                            <div class="sds-input__shadowValue">
                                                                4000
                                                            </div>
                                                            <div class="sds-input__shadowCurrency"></div>
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="col align-self-end">
                                                    <div class="sds-inputRecap__operation">
                                                        -
                                                    </div>
                                                </div>
                                                <div class="col-5 d-flex flex-column">
                                                    <label for="test" class="sds-label -form flex-grow-1">
                                                        Crédit d'impôt

                                                        <a href="#!" tabindex="0" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                                            <span class="sds-icon sds-icon-infocirclefill"></span>
                                                        </a>

                                                    </label>
                                                    <div class="sds-input -hasShadow">
                                                        <input id="test" class="sds-input form-control" type="number" placeholder="0" value="4000">

                                                        <div class="sds-input__shadowInput form-control" aria-hidden="true">
                                                            <div class="sds-input__shadowValue">
                                                                4000
                                                            </div>
                                                            <div class="sds-input__shadowCurrency"></div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <label for="test" class="sds-label -form">
                                                Autres frais lirés au projet

                                                <a href="#!" tabindex="0" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                                    <span class="sds-icon sds-icon-infocirclefill"></span>
                                                </a>

                                            </label>
                                            <div class="sds-input -hasShadow">
                                                <input id="" class="sds-input form-control" type="number" placeholder="0" value="4000" readonly>

                                                <div class="sds-input__shadowInput form-control" aria-hidden="true">
                                                    <div class="sds-input__shadowValue">
                                                        4000
                                                    </div>
                                                    <div class="sds-input__shadowCurrency"></div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="sds-inputRecap__total">
                                        <div class="sds-label">
                                            Coût du projet

                                        </div>
                                        <div class="sds-amount -amountLg">
                                            <span class="sds-amount__value">335,30</span>

                                            <span class="sds-amount__currency"></span>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="sds-housingSimulator__updateHint -shown js-housingSimulator__updateHint">
                                <a href="#housingSimulatorResults" class="sds-btn -btnCta -btnCtaHighlight">

                                    <span class="sds-icon sds-icon-arrowtop"></span>

                                    <span class="sds-btn__text">Nouvelles mensualités</span>

                                </a>
                            </div>
                        </div>
                        <div class="form-group text-center">
                            <button type="button" class="sds-btn -btnSecondary -btnSmall -collapseTrigger -collapseTrigger" data-toggle="collapse" data-target="#simulationDetail">

                                <span class="sds-icon sds-icon-plus"></span>

                                <span class="sds-btn__text">Afficher les détails du calcul</span>

                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row row-sm sds-exceptionStackXxl">
            <div class="col-12">
                <p class="sds-formDisclaimer">
                    La présente simulation est uniquement fournie à titre indicatif et n'engage nullement Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de faire une demande en ligne.
                </p>
            </div>
        </div>
    </div>
    <div class="sds-sectionForm__itemFooter">
        <div class="sds-btnGroup">
            <button type="button" class="sds-btn -btnSecondary -btnInverse">

                <span class="sds-btn__text">Retour</span>

            </button>
            <div class="sds-sectionForm__stickyFooterBtn -shown">
                <div class="d-md-none">
                    <button type="button" class="sds-btn -btnSecondary">

                        <span class="sds-btn__text">Débuter ma demande de projet</span>

                    </button>
                </div>
                <div class="d-none d-md-block">
                    <button type="button" class="sds-btn -btnSecondary -btnInverse">

                        <span class="sds-btn__text">Débuter ma demande de projet</span>

                    </button>
                </div>
            </div>
            <button type="button" class="sds-btn -btnPrimary">

                <span class="sds-btn__text">Débuter ma demande de prêt</span>

            </button>
        </div>
    </div>
</div>
<div class="{{ namespace }}sectionForm__item -hasStickyMobileBtn {{ namespace }}box -insetLg {{ namespace }}stackMd{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}sectionForm__itemBody {{ namespace }}stackMd">
		<div class="row row-sm align-items-center">
			<div class="col-md-5">
				<img class="img-fluid d-block mx-auto" src="{{ ("https://design.spuerkeess.lu/media"+ illustrationsSDSPath + svg750xPath + "/hero/sdsillu-simugood.svg") }}" alt="">
			</div>
			<div class="col-md-7">
				<div class="h2">
					Super, votre projet semble réalisable.
				</div>
			</div>
		</div>
		<div class="row row-sm flex-md-row-reverse">
			<div class="col-md-6">
				<div class="{{ namespace }}stackMd sticky-top" id="housingSimulatorResults">
					<div class="h4">Exemples de mensualités du prêt*</div>
					<div class="{{ namespace }}stackMd">
						{% render "@snet-simulator-result-card" %}
						{% render "@snet-simulator-result-card" %}
					</div>
					<div class="text-center">
						{% render "@btn-secondary--icon-left-collapse-trigger",{
							icon: "icon-paperplane",
							text: "Envoyer données"
						},true %}
					</div>
					{% render "@form-disclaimer--link" %}
				</div>
			</div>
			<div class="col-md-6">
				<div class="{{ namespace }}stackMd">
					<div class="h4">Résultat simulation</div>
					<div>
						<div class="form-group">
							{% render "@label--div",{text: "Montant"},true %}
							{% render "@amount--xtra-large-secondary-100" %}
						</div>
						<div class="form-group">
							{% render "@label--form",{text: "Apport personnel"},true %}
							{% render "@input--shadow",{
								value: "4000"
							},true %}
						</div>
						<div class="form-group">
							{% render "@label--form",{text: "Durée du prêt"},true %}
							{% render "@input--shadow",{
								value: "30",
								valueType: "ans"
							},true %}
						</div>
						<div class="form-group">
							<div class="collapse" id="simulationDetail">
								{% render "@snet-input-recap" %}
							</div>
							<div class="{{ namespace }}housingSimulator__updateHint -shown js-housingSimulator__updateHint">
								{% render "@btn-highlight--icon-left",{
									eltType: "a",
									href: "#housingSimulatorResults",
									icon: "icon-arrowtop",
									text: "Nouvelles mensualités"
								},true %}
							</div>
						</div>
						<div class="form-group text-center">
							{% render "@btn-secondary--icon-left-collapse-trigger",{
								icon: "icon-plus",
								text: "Afficher les détails du calcul",
								classes: ["-collapseTrigger"],
								attrs: {
									"data-toggle": "collapse",
									"data-target": "#simulationDetail"
								}
							},true %}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row row-sm {{ namespace }}exceptionStackXxl">
			<div class="col-12">
				{% render "@form-disclaimer" %}
			</div>
		</div>
	</div>
	<div class="{{ namespace }}sectionForm__itemFooter">
		<div class="{{ namespace }}btnGroup">
			{% render '@btn-secondary-inverse', {text: "Retour"}, true %}
			<div class="{{ namespace }}sectionForm__stickyFooterBtn -shown">
				<div class="d-md-none">
					{% render '@btn-secondary', {text: "Débuter ma demande de projet"}, true %}
				</div>
				<div class="d-none d-md-block">
					{% render '@btn-secondary-inverse', {text: "Débuter ma demande de projet"}, true %}
				</div>
			</div>
			{% render '@btn-primary',{text: "Débuter ma demande de prêt"}, true %}
		</div>
	</div>
</div>