IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Produktvergleich Gewerbe

Browse Source
This commit is contained in:
Jens Cornelsen
2024-12-17 02:22:16 +01:00
parent 0c165326d1
commit 567bd4019d
2 changed files with 126 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/design/content/ProduktVergleichGewerbe.svelte
View File

@@ -0,0 +1,117 @@
<script>
import { PRICES } from "#lib/constants";
</script>
<div class="mt-6 mb-6 m-auto w-[99%] relative">
<div id="produktvergleich">
<div class="saeule">
<div class="blue-top flex flex-row ">
<div><img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/></div>
<div class="name">Verbrauchsausweis<br>Gewerbe</div>
</div>
<div class="white box">
<div class="variante">einfach</div>
<div class="services"><div>Einfache Berechnungsmethode anhand von 3 Jahresverbräuchen der Heizung und des Gebäudestroms.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig bei Vermietung und Verkauf.</div><div class="check">✔</div></div>
<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet.</div><div class="check-no">✘</div></div>
<div class="services"><div>Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.</div><div class="check-no">✘</div></div>
</div>
<div class="orange">
<div class="price">
ab <b> {PRICES.VerbrauchsausweisGewerbe[0]} </b>€ inkl. 19% MwSt.
</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt online erstellen</div>
</div>
<div class="blue-bottom">
<div class="cta">zur Produktübersicht</div>
</div>
</div>
<div class="saeule">
<div class="blue-top flex flex-row ">
<div><img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/></div>
<div class="name">Bedarfsausweis<br>Gewerbe</div>
</div>
<div class="white box">
<div class="variante">fundiert</div>
<div class="services"><div>Mehrzonenmodell nach DIN 18599 mit Erfassung der Gebäudegeometrie, UWerte der Außenbauteile sowie dem
Wirkungsgrad der eingebauten Anlagentechnik.</div><div class="check">✔</div></div>
<div class="services"><div>Zulässig bei Vermietung, Verkauf, Modernisierung und Neubau.</div><div class="check">✔</div></div>
<div class="services"><div>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</div><div class="check">✔</div></div>
<div class="services"><div>Fundierte vergleichbare Berechnung die bei den Banken für die Finanzierungsunterlagen immer akzeptiert wird.</div><div class="check">✔</div></div>
</div>
<div class="orange">
<div class="price">
<b>ab {PRICES.BedarfsausweisGewerbe[0]} €</b> inkl. 19% MwSt.
</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt online anfragen</div>
</div>
<div class="blue-bottom">
<div class="cta">zur Produktübersicht</div>
</div>
</div>
</div>
</div>
<style lang="scss">
#produktvergleich{@apply
grid grid-cols-[1fr] gap-y-1 gap-x-3
lg:grid-cols-2
xl:grid-cols-2;
.saeule{@apply grid grid-rows-subgrid row-span-10 mb-8;
img{@apply justify-self-center mb-1 w-[75%] }
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4 shadow-saeule ring-secondary ring-1}
.name{@apply w-full}
.name{font-size: clamp(15px, 3vh, 18px)}
.white{@apply text-center text-black p-4 grid grid-rows-subgrid row-span-6 shadow-saeule}
.variante{@apply w-fit text-black justify-self-end mr-4}
.variante{font-size: clamp(15px, 4vh, 24px)}
.services{@apply text-base py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
.services:not(:last-child){@apply border-b-[1px] border-gray-400}
.check{@apply self-center font-bold text-green-700}
.check-no{@apply self-center font-bold text-red-700}
.orange{@apply bg-primary text-white text-center rounded-md p-1 relative shadow-saeule ring-primary ring-1}
.price{font-size: clamp(15px, 3vh, 28px)}
.blue-bottom, .check, .check-no{font-size: clamp(15px, 3vh, 24px)}
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-md p-1 shadow-saeule ring-secondary ring-1}
}
}
</style>

12
src/pages/index.astro
View File

@@ -1,13 +1,14 @@
---
import Layout from "#layouts/Layout.astro";
import ProduktVergleich from "#content/ProduktVergleich.svelte";
import ProduktVergleichGewerbe from "#content/ProduktVergleichGewerbe.svelte";
import WelcherAusweisWidget from "#widgets/WelcherAusweisWidget.svelte";
import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.svelte";
---
<Layout title="Energieausweis online erstellen - Online Energieausweis">
<article>
<h1>Ihr Partner für Energieausweise und GEG Nachweise</h1>
<p>Ob für <span>Vermietung, Verkauf, Modernisierung, Neubau</span> oder zur <span>Vorlage bei Ihrer Bank</span> -
wir erstellen den passenden <span>Energieausweis</span> oder <span>GEG-Nachweis</span> für Ihr Objekt.
@@ -15,11 +16,11 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
für Hauseigentümer, Bauherren, Makler und Verwalter.</p>
<br>
<h2>Machen Sie hier den <span>online Check</span> welcher Energieausweis der Richtige für Sie ist:</h2>
<article>
<WelcherAusweisWidget client:load/>
<article>
<br>
<h2>Erfüllen Sie die gesetzlichen Vorgaben des <span>GEG 2024</span>. Mit uns profitieren Sie von:</h2>
<p>
@@ -27,7 +28,7 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
Langjähriger Erfahrung <span class="text-green-700;">✔</span>&nbsp;&nbsp;&nbsp;
Schneller <span>online Erstellung </span><span class="text-green-700;">✔</span>
</p>
</article>
<br>
<h2>GEG gilt ab 1. Mai 2021 und löst die EnEV ab</h2>
<TextboxCardTemplate
@@ -47,6 +48,9 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
<ProduktVergleich />
<h2>Übersicht <span class="font-bold">Verbrauchsausweis</span> und <span class="font-bold">Bedarfsausweis</span> für Gewerbegebäude:</h2>
<ProduktVergleichGewerbe />
<br>
<h2>Was ist ein Energieausweis?</h2>