You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
6.2 KiB
107 lines
6.2 KiB
<div class="stepper"
|
|
x-data="{ ...stepper, step: {{data.step}}, value: { ...stepper.value, kind: '{{data.kind}}', {% if data.kind %} {{data.kind}}: { ...stepper.value.{{data.kind}}, eigenkapital: {{data.eigenk}}, kaufpreis: {{data.kaufpreis}} } {% endif %} }, sprite: '{{sprite|raw}}' }"
|
|
{% if data.step == 1 %} x-init="slideTo(null, {{data.step}})" {% endif %}>
|
|
|
|
<div class="step">
|
|
<div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div>
|
|
</div>
|
|
|
|
<form @submit.prevent="submit" novalidate>
|
|
|
|
<div x-ref="slider" class="slider" x-on:resize.debounce.window="$refs.slider.scrollLeft = $refs.slider.scrollWidth / slides.length * active">
|
|
<div>
|
|
<h2 class="desktop">Das beste <span>Finanzierungsangebot</span> finden!</h2>
|
|
<h2 class="mobil">Kostenloses Finanzierungsangebot einholen</span></h2>
|
|
<p class="finanz-angebot">Als unabhängiger Finanzberater ermitteln wir bei hunderten Anbietern das passende Angebot für Sie und prüfen Ihre Finanzierung kostenlos bei der Bank innerhalb 48 Stunden!
|
|
</p>
|
|
<h4 class="sub-was">Schritt 1 von 3:</h4>
|
|
<h3 class="was-finanzieren">Was möchten Sie finanzieren?</h3>
|
|
<div class="radio-grid">
|
|
<template x-for="ckind in kinds">
|
|
<label>
|
|
<input @change="slideTo($event, step+1)" type="radio" name="kind" :value="ckind.value" x-model="value.kind">
|
|
<span>
|
|
<span>
|
|
<img :src="'/wp-content/plugins/rck-stepper/assets/svg/'+ckind.icon+'.svg'" :class="'icon-'+ckind.icon">
|
|
</span>
|
|
<span x-text="ckind.label"></span>
|
|
</span>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
{% include 'vorhaben.twig.htm' with {
|
|
'kind': "bau",
|
|
bezahlt: true,
|
|
second: {label: 'Baukosten', value: 'baukosten'},
|
|
main: {label: 'Grundstückspreis', value: 'grundstueckspreis'}
|
|
} %}
|
|
|
|
{% include 'vorhaben.twig.htm' with {
|
|
'kind': "kauf",
|
|
bezahlt: false,
|
|
second: {label: 'Modernisierung', value: 'modernisierung'},
|
|
main: {label: 'Kaufpreis', value: 'kaufpreis'}
|
|
} %}
|
|
|
|
<div x-show="value.kind == 'anschluss'">
|
|
<h4 class="sub-was-second">Schritt 2 von 3:</h4>
|
|
<h2 class="gradient" style="padding-top:0;">Das Vorhaben in Zahlen</h2>
|
|
|
|
<div class="form-container">
|
|
<div class="form-grid">
|
|
<label>Objektwert <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
|
|
<div class="open-popup">aktueller Verkehrswert, evtl. Gutachten (bei RCK erhältlich).</div>
|
|
</span></label>
|
|
<input type="tel" {{cprop('value.anschluss.objektwert', 'currency') | raw}}>
|
|
<span class="unit">€</span>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<div class="form-grid">
|
|
<label>Umschuldung <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
|
|
<div class="open-popup">aktuell noch neu zu finanzierende Restschuld.</div>
|
|
</span></label>
|
|
<input type="tel" {{cprop('value.anschluss.umschuldung', 'currency') | raw}}>
|
|
<span class="unit">€</span>
|
|
<span class="comment">Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an.</span>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<div class="form-grid">
|
|
<label>Kapitalbeschaffung <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
|
|
<div class="open-popup">z.B. für Modernisierung, Reparaturen, Sauna, Klimaanlage.</div>
|
|
</span></label>
|
|
<input type="tel" {{cprop('value.anschluss.zuskap', 'currency') | raw}}>
|
|
<span class="unit">€</span>
|
|
</div>
|
|
<div class="separator primary"></div>
|
|
<div class="form-grid">
|
|
<div class="darlehen-name"><span class="yellow-darlehen">=</span>Darlehensbetrag <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
|
|
<div class="open-popup">der Betrag, der durch die Bank finanziert wird.</div>
|
|
</span></div>
|
|
<div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)" class="text-right darlehen-zahl"></div>
|
|
</div>
|
|
<div class="separator gray"></div>
|
|
<div class="button-row">
|
|
<button @click="slideTo($event, step-1)" type="button" class="zurueck-step">Zurück</button>
|
|
<button @click="slideTo($event, step+1)" type="button" class="weiter-step">Weiter zum letzten Schritt</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include 'daten.twig.htm' %}
|
|
|
|
<div>
|
|
<div class="form-container fertig-container">
|
|
<div class="fertig-step">
|
|
Vielen Dank für Ihre Anfrage!<br>
|
|
Unsere Experten werden sich in den nächsten 48 Stunden bei Ihnen melden.<br>
|
|
In der Zwischenzeit können Sie sich gerne weitere Informationen zum Thema <a href="/baufinanzierung/">Baufinanzierung</a> einholen oder unser <a href="/team/">Team</a> kennenlernen.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|