97 lines
2.6 KiB
Svelte
97 lines
2.6 KiB
Svelte
<script>
|
|
import { PRICES } from "#lib/constants";
|
|
</script>
|
|
|
|
<div id="card-VA-promo" class="box card bg-white px-6 py-4 mb-5">
|
|
<div class="">
|
|
<h2>Verbrauchsausweis Wohngebäude</h2>
|
|
<hr class="mb-2" />
|
|
|
|
<div class="flex flex-row mb-2 mt-2 w-full items-end">
|
|
<div>
|
|
<img
|
|
class="w-[100%] !min-w-[100px]"
|
|
src="/images/right-sidebar/UMBE_wohngebaeude.svg"
|
|
alt="Wohnhaus Verbrauchsausweis"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">
|
|
ab<span class="promo pl-2"
|
|
>{PRICES.VerbrauchsausweisWohnen[0]}</span
|
|
>€
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="white">
|
|
<div class="variante">einfach</div>
|
|
<div class="services">
|
|
<div>3 Jahresverbräuche der Heizung benötigt.</div>
|
|
<div class="check">✔</div>
|
|
</div>
|
|
<div class="services">
|
|
<div>Zulässig bei Vermietung oder Verkauf.</div>
|
|
<div class="check">✔</div>
|
|
</div>
|
|
<div class="services">
|
|
<div>Unzulässig bei unsanierten Gebäuden vor 1978.</div>
|
|
<div class="check-no">✘</div>
|
|
</div>
|
|
<div class="services">
|
|
<div>Ungenau durch individuelles Heizverhalten.</div>
|
|
<div class="check-no">✘</div>
|
|
</div>
|
|
<div class="services">
|
|
<div>Wird nicht immer bei den Banken akzeptiert.</div>
|
|
<div class="check-no">✘</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row flex-wrap justify-center">
|
|
<a
|
|
href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
|
id="link-VA-promo"
|
|
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
|
hover:bg-primary
|
|
">jetzt online erstellen</a
|
|
>
|
|
|
|
<a
|
|
href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
|
id="link-VA-promo"
|
|
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
|
hover:bg-primary
|
|
">zur Produktübersicht</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
#card-VA-promo {
|
|
.white {
|
|
@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6;
|
|
}
|
|
|
|
.variante {
|
|
@apply w-fit text-black justify-self-end mr-3;
|
|
}
|
|
.variante {
|
|
@apply text-2xl;
|
|
}
|
|
|
|
.services {
|
|
@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)];
|
|
}
|
|
.services:not(:last-child) {
|
|
@apply border-b-[1px] border-gray-200;
|
|
}
|
|
.check {
|
|
@apply justify-self-end font-bold text-green-700;
|
|
}
|
|
.check-no {
|
|
@apply justify-self-end font-bold text-red-700;
|
|
}
|
|
}
|
|
</style>
|