Produktvergleich Gewerbe

src/components/design/content/ProduktVergleichGewerbe.svelte

@@ -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>

src/pages/index.astro

@@ -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
@@ -46,7 +47,10 @@ 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>		 	
+<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>