Widget und Text Startseite

Widget erweitert mit Leerstand und Heizungsalter. Produktsäulen angepasst. Text auf Startseite fertiggestellt

src/components/design/content/ProduktVergleich.svelte

@@ -2,16 +2,15 @@
 	import { PRICES } from "#lib/constants";
 </script>
 
-<div class="mt-12 m-auto w-[90%] relative">
+<div class="mt-6 mb-6 m-auto w-[99%] relative">
 
 <div id="produktvergleich">
 
     <div class="saeule">
-        <div class="blue-top">
+        <div class="blue-top flex flex-row ">
-            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
+            <div><img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/></div>
             <div class="name">Verbrauchsausweis<br>Wohngebäude</div> 
         </div>   
-
         <div class="white box">
             <div class="variante">einfach</div>
             <div class="services"><div>Einfache Berechnung anhand von 3 Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als&nbsp;18&nbsp;Monate&nbsp;sein.</div><div class="check">✔</div></div>
@@ -38,10 +37,10 @@
     </div>
 
     <div class="saeule">
-        <div class="blue-top">
+        <div class="blue-top flex flex-row ">
-            <img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
+            <div><img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/></div>
-            <div class="name">Bedarfssausweis<br>Wohngebäude</div> 
+            <div class="name">Bedarfsausweis<br>Wohngebäude</div> 
-        </div>   
+        </div>  
 
         <div class="white box">
             <div class="variante">fundiert</div>
@@ -54,7 +53,7 @@
 
         <div class="orange">
             <div class="price">
-                ab <b>{PRICES.BedarfsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
+                <b>ab {PRICES.BedarfsausweisWohnen[0]} €</b> inkl. 19% MwSt.
             </div>
 
         </div>
@@ -79,13 +78,13 @@
 
 
 #produktvergleich{@apply 
-    grid grid-cols-[1fr] gap-y-3 gap-x-6
+    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;
+.saeule{@apply grid grid-rows-subgrid row-span-10 mb-8;
-img{@apply justify-self-center mb-1 w-[50%] }
+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}
@@ -97,20 +96,20 @@ img{@apply justify-self-center mb-1 w-[50%] }
 .variante{@apply w-fit text-black justify-self-end mr-4}
 .variante{font-size: clamp(15px, 4vh, 24px)}
 
-.services{@apply text-base py-4 grid grid-cols-[1fr_minmax(10px,50px)]}
+.services{@apply text-base py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
-.services:not(:last-child){@apply border-b-[1px] border-gray-200}
+.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-4 relative shadow-saeule ring-primary ring-1}
+.orange{@apply bg-primary text-white text-center rounded-md p-2 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-4 shadow-saeule ring-secondary ring-1}
+.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-md p-2 shadow-saeule ring-secondary ring-1}
 }
 
 }

src/components/design/content/WidgetCardTemplate.svelte

@@ -8,7 +8,7 @@
 	export let alt: string;
 </script>
 
-<div class="box card bg-white px-6 py-4 mb-5">
+<div class="box card bg-white px-6 py-4 mb-5 mt-5">
 	<div>
 		<h2>{name}</h2>
 		<hr class="mb-2" />
@@ -16,7 +16,7 @@
 		<div class="flex flex-row mb-2 mt-2 w-full items-end">
 			<div>
 				<img
-					class="w-[100%] !min-w-[100px]"
+					class="w-[50%] !min-w-[50px]"
 					{src}
 					{alt}
 				/>

src/components/widgets/WelcherAusweisWidget.svelte

@@ -8,6 +8,9 @@
 	let einheiten: string;
 	let sanierungsstatus: string;
 	let baujahr: string;
+	let heizungsAlter: string;
+	let leerStand: string;
+
 
 	const allowedTypes = [
 		"Einfamilienhaus",
@@ -26,11 +29,11 @@
 				allowedReason.includes(anlass) &&
 				allowedTypes.includes(gebaeudetyp) &&
 				(einheiten === "mehr als 4 Wohneinheiten" ||
-					sanierungsstatus === "saniert");
+					sanierungsstatus === "saniert") && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
 		} else {
 			showVerbrauchsausweis =
 				allowedReason.includes(anlass) &&
-				allowedTypes.includes(gebaeudetyp);
+				allowedTypes.includes(gebaeudetyp) && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
 		}
 	}
 </script>
@@ -40,20 +43,6 @@
 
 	<div id="OEA_input">
 		<div class="OEA_zeile1">
-			<div class="OEA_item1">
-				<div class="OEA_title1">Gebäudetyp</div>
-				<select
-					class="OEA_auswahl1"
-					bind:value={gebaeudetyp}
-				>
-					<option selected disabled>bitte auswählen</option>
-					<option value="Einfamilienhaus">Einfamilienhaus</option>
-					<option value="Zweifamilienhaus">Zweifamilienhaus</option>
-					<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
-					<option value="Gewerbegebäude">Gewerbegebäude</option>
-					<option value="Mischgebäude">Mischgebäude</option>
-				</select>
-			</div>
 
 			<div class="OEA_item2">
 				<div class="OEA_title1">Anlass</div>
@@ -72,6 +61,35 @@
 					<option value="sonstiges">sonstiges z.B. Bank</option>
 				</select>
 			</div>
+
+			<div class="OEA_item1">
+				<div class="OEA_title1">Gebäudetyp</div>
+				<select
+					class="OEA_auswahl1"
+					bind:value={gebaeudetyp}
+				>
+					<option selected disabled>bitte auswählen</option>
+					<option value="Einfamilienhaus">Einfamilienhaus</option>
+					<option value="Zweifamilienhaus">Zweifamilienhaus</option>
+					<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
+					<option value="Gewerbegebäude">Gewerbegebäude</option>
+					<option value="Mischgebäude">Mischgebäude</option>
+				</select>
+			</div>
+
+			<div class="OEA_item2">
+				<div class="OEA_title1">Sanierungsstand</div>
+				<select
+					class="OEA_auswahl2"
+					bind:value={sanierungsstatus}
+				>
+					<option selected disabled>bitte auswählen</option>
+					<option value="saniert">saniert</option>
+					<option value="neubau">Neubau</option>
+					<option value="unsaniert">unsaniert</option>
+				</select>
+			</div>
+
 		</div>
 
 		<div class="OEA_zeile2">
@@ -87,6 +105,18 @@
 				</select>
 			</div>
 
+				<div class="OEA_item3">
+					<div class="OEA_title2">Heizungsalter</div>
+					<select
+						class="OEA_auswahl2"
+						bind:value={heizungsAlter}
+					>
+						<option value=">= 3" selected disabled>bitte auswählen</option>
+						<option value="< 3">jünger als 3 Jahre</option>
+						<option value=">= 3">3 Jahre oder älter</option>
+					</select>
+				</div>
+
 			<div class="OEA_item4">
 				<div class="OEA_title2">Wohneinheiten</div>
 				<select
@@ -103,17 +133,22 @@
 				</select>
 			</div>
 
-			<div class="OEA_item5">
+			<div class="OEA_item4">
-				<div class="OEA_title2">Sanierungsstatus</div>
+				<div class="OEA_title2">Leerstand</div>
 				<select
 					class="OEA_auswahl2"
-					bind:value={sanierungsstatus}
+					bind:value={leerStand}
 				>
-					<option selected disabled>bitte auswählen</option>
+					<option value="bis 30" selected disabled>bitte auswählen</option>
-					<option value="saniert">saniert</option>
+					<option value="bis 30"
-					<option value="unsaniert">unsaniert</option>
+						>bis 30%</option
+					>
+					<option value="mehr als 30"
+						>mehr als 30%</option
+					>
 				</select>
 			</div>
+
 		</div>
 
 		<div class="OEA_zeile3">
@@ -187,6 +222,30 @@
 				</div>
 			{/if}
 
+			{#if allowedReason.includes(anlass) == false && allowedTypesGewerbe.includes(gebaeudetyp)}
+				<div
+					class="OEA_item6 result"
+					transition:fade={{ duration: 1000 }}
+				>
+				<WidgetCardTemplate
+					name="GEG-Nachweis Gewerbe"
+					price={PRICES.BedarfsausweisGewerbe[0]}
+					src="/images/right-sidebar/UMBE_gewerbegebaeude.svg"
+					alt="Gewerbe Bedarfsausweis"
+					variant="Bauvorlage"
+					services={[
+						
+						["xxx", true],
+						["xxx", true],
+						["xxx", false],
+						["xxx", false],
+					]}
+					href="/energieausweis-erstellen/bedarfsausweis-gewerbe/" 
+				></WidgetCardTemplate>
+				
+				</div>
+			{/if}
+
 			{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
 				<div
 					class="OEA_item6 result"
@@ -256,7 +315,7 @@
 			}
 
 			.OEA_zeile3 {
-				@apply flex flex-row space-x-4 pt-6 items-start justify-center;
+				@apply flex flex-row space-x-4 items-start justify-center;
 			}
 
 			.OEA_item6 {

src/pages/index.astro

@@ -1,14 +1,60 @@
 ---
 import Layout from "#layouts/Layout.astro";
 import ProduktVergleich from "#content/ProduktVergleich.svelte";
+import WelcherAusweisWidget from "#widgets/WelcherAusweisWidget.svelte";
 
 ---
 
 <Layout title="Energieausweis online erstellen - Online Energieausweis">
+<article>
+	<h1>Ihr Partner für Energieausweise und GEG Nachweise</h1>
+	<p>Ob für <span class="font-bold">Vermietung, Verkauf, Modernisierung, Neubau</span> oder zur <span class="font-bold">Vorlage bei Ihrer Bank</span> - 
+		wir erstellen den passenden <span class="font-bold">Energieausweis</span> oder <span class="font-bold">GEG-Nachweis</span> für Ihr Objekt.
+		 Mit <span class="font-bold">18 Jahren Erfahrung</span> sind wir der richtige Ansprechpartner
+		 für Hauseigentümer, Bauherren, Makler und Verwalter.</p>
+		 <h2>Machen Sie hier den <span class="font-bold">online Check</span> welcher Energieausweis der Richtige für Sie ist:</h2>
+<article>		 
+		 
+	<WelcherAusweisWidget client:load/>
+	
+<article>
+	<h2>Erfüllen Sie die gesetzlichen Vorgaben des <span class="font-bold">GEG 2024</span>. Mit uns profitieren Sie von:</h2>		 
+		<ul>
+			<li>Rechtssicherer Bearbeitung</li>
+			<li>Langjähriger Erfahrung</li>
+			<li>Schneller und preiswerter <span class="font-bold">Online Erstellung</span>.</li>
+		</ul>
+</article>
+
+<h2>Übersicht <span class="font-bold">Verbrauchsausweis</span> und <span class="font-bold">Bedarfsausweis</span> für Wohngebäude:</h2>		 
+
+	<ProduktVergleich />
+
+<h2>Übersicht <span class="font-bold">Verbrauchsausweis</span> und <span class="font-bold">Bedarfsausweis</span> für Gewerbegebäude:</h2>		 	
+
+
+<article>
+
+	<h2 class="text-2xl font-semibold text-blue-600 mb-4">Erhöhte Sorgfaltspflichten und neue Anforderungen</h2>
+	<ul class="list-disc list-inside mb-6">
+		<li class="mb-2">
+			<span class="font-semibold">Erhöhte Sorgfaltspflicht:</span> Zur Einschätzung von Modernisierungsempfehlungen sind jetzt Fotos relevanter Gebäudebereiche erforderlich. Dazu zählen Dach, Fenster, Heizung und Außenwand. Diese Maßnahmen sorgen für präzisere Bewertungen und Modernisierungsvorschläge.
+		</li>
+		<li class="mb-2">
+			<span class="font-semibold">Primärenergiefaktoren gemäß GEG (§22):</span> Die Primärenergiefaktoren sind nun gesetzlich im Gebäudeenergiegesetz geregelt. Das schafft mehr Transparenz und Nachvollziehbarkeit bei der Ermittlung des Gebäudekennwerts. Auch die Nutzung von Biogas aus dem Erdgasnetz wird nun angemessen berücksichtigt.
+		</li>
+		<li class="mb-2">
+			<span class="font-semibold">Berücksichtigung von Photovoltaik:</span> Die lokal erzeugte Energie durch PV-Anlagen wird besser berücksichtigt. Bis zu 45 % des Jahres-Primärenergiebedarfs können durch selbst erzeugten Strom abgezogen werden. Das fördert die Nutzung erneuerbarer Energien und reduziert den Gesamtenergiebedarf.
+		</li>
+		<li class="mb-2">
+			<span class="font-semibold">Verpflichtende CO2-Angaben:</span> Im Energieausweis müssen nun verpflichtend die CO2-Emissionen des Gebäudes angegeben werden. Diese neue Regelung erhöht die Transparenz hinsichtlich der Klimawirkung und unterstützt Eigentümer bei der Planung nachhaltiger Maßnahmen.
+		</li>
+	</ul>
+
+</article>
+
 
-	<h1>Unsere Ausweise im Detail:</h1>
 
-	<!-- <ProduktVergleich /> -->
 </Layout>
 
 

src/pages/index_1.astro

@@ -1,13 +0,0 @@
----
-import Layout from "#layouts/Layout_1.astro";
-
----
-
-<Layout title="Energieausweis online erstellen - Online Energieausweis">
-	<h1>Energieausweis online erstellen</h1>
-	<!-- <BannerPrice client:load /> -->
-</Layout>
-
-
-
-

src/style/global.css

@@ -75,6 +75,9 @@ article {
 	h3 {@apply text-xl font-normal mb-2;}
 	
 	a {@apply text-blue-700 font-medium text-lg;}
+	p {@apply text-lg font-normal mb-2;}
+	li {@apply text-lg font-normal ;}
+	ul {@apply list-disc list-inside mb-3;}
 	
 }