src/components/design/content/ProduktUebersichtVerbrauchsausweisWohnen.svelte

@@ -0,0 +1,84 @@
+<script>
+import { PRICES } from "#lib/constants";
+export let bullets;
+export let title;
+
+bullets = [
+    ["Prüfung durch Dipl. Ing.<br>Registrierung beim DiBt<br>rechtssicher nach GEG",true, true, true],
+    ["Originalausweis als PDF per E-Mail<br>Originalausweis per Post (zubuchbar)",true, true, true],
+    ["Bearbeitung innerhalb 24 Stunden<br>Selbsteingabe",true, true, false],
+    ["Same day service (zubuchbar)",true, true, false],
+    ["Fotoupload<br>Dokumentenupload<br>(Verbrauchsabrechnungen)",true, true, true],
+    ["automatische Vorprüfung<br>Live Vorschau direkt bei Eingabe<br>Live Vorschauausweis vorab<br>Vorschauausweis per E-Mail<br>dynamische Eingabehilfe",true, true, false],
+    ["Prüfanmerkungen per E-Mail",true, true, false],
+    ["persönlicher Support",false, true, true],
+    ["telefonische Beratung<br>persönlicher Energieberater",false, false, true],
+]
+
+
+</script>
+
+<h1>Produktübersicht: <span class="text-secondary">Verbrauchsausweis Wohngebäude</span></h1>
+<h3>Verbrauchsausweis Leistungen und Preise in der Übersicht:</h3>
+
+<hr>
+<br>
+
+<div class="max-w-[320px]" id="ProduktUebersichtVerbrauchsausweisWohnen">
+
+<div class="w-[80%] sm:mx-auto grid grid-cols-[1fr_min-content_min-content_min-content]">
+    
+<div class="grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center text-[1.25rem]"> 
+    <div class="justify-self-start pl-2"><b>Leistung</b></div><div><b>online</b></div><div><b>premium</b></div><div><b>offline</b></div>      
+</div>
+
+{#each bullets as [bullet,online,premium,offline]}
+<div class="bullet grid grid-cols-subgrid col-span-4 py-4 border-b-[1px] justify-items-center items-center">
+    <div class="justify-self-start pl-2">{@html bullet}</div>
+    <div class:check={online} class:check-no={!online}>{online ? "✔" : "✘"}</div>
+    <div class:check={premium} class:check-no={!premium}>{premium ? "✔" : "✘"}</div>
+    <div class:check={offline} class:check-no={!offline}>{offline ? "✔" : "✘"}</div>
+</div>
+{/each}
+
+<div class="grid grid-cols-subgrid col-span-4 py-4 border-b-[0px] justify-items-center items-center text-[1.25rem]"> 
+    <div class="justify-self-start pl-2">Preis inkl. MwSt.</div>
+    <div><b>{PRICES.VerbrauchsausweisWohnen[0].toFixed(2)}&nbsp;€</b></div>
+    <div><b>{PRICES.VerbrauchsausweisWohnen[1].toFixed(2)}&nbsp;€</b></div>
+    <div><b>{PRICES.VerbrauchsausweisWohnen[2].toFixed(2)}&nbsp;€</b></div>      
+</div>
+
+<div class="grid grid-cols-subgrid col-span-4 py-4 border-b-[0px] justify-items-center items-center text-[1rem]"> 
+    <div class="justify-self-start pl-2"></div>
+    <button class="bestellbutton" type="button">sofort<br>bestellen</button>
+    <button class="bestellbutton" type="button">sofort<br>bestellen</button>
+    <button class="bestellbutton" type="button">sofort<br>bestellen</button> 
+</div>
+
+</div>
+
+
+
+</div>
+
+<style lang="postcss">
+
+.bestellbutton{@apply px-4 mx-2 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap font-bold
+    hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary;}
+
+
+
+
+.bullet{@apply text-[0.75rem] sm:text-[1rem]}
+.bullet:nth-child(even){@apply bg-blue-100/40}
+.bullet:nth-child(2){@apply !border-t-[6px]}
+.bullet:nth-child(10){@apply !border-b-[6px]}
+
+.check {
+		@apply text-[1.5rem] font-bold text-green-700;
+	}
+	.check-no {
+		@apply text-[1.5rem] font-bold text-red-700;
+	}
+
+</style>

src/components/design/content/WidgetCardTemplate.svelte

@@ -3,7 +3,8 @@
 	export let name: string;
 	export let variant: string;
 	export let services: [string, boolean][];
-	export let href: string;
+	export let href_buy: string;
+	export let href_overview: string;
 	export let src: string;
 	export let alt: string;
 	export let empfehlung: string;
@@ -57,12 +58,12 @@
 
 			<div class="sumCent buttoncols">	
 			<a
-				{href}
+				href="{href_buy}"
 				class="buttoncol">jetzt&nbsp;online erstellen</a
 			>
 
 			<a
-				{href}
+				href="{href_overview}"
 				class="buttoncol">Produktübersicht</a
 			>
 

src/components/widgets/WelcherAusweisWidget_1.svelte

@@ -180,7 +180,8 @@ $: {
 						["Ungenau durch individuelles Heizverhalten.", false],
 						["Wird nicht immer bei den Banken akzeptiert.", false]
 					]}
-					href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
+					href_buy="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
+					href_overview="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/produkt-uebersicht/"
 					empfehlung="nein"
 				></WidgetCardTemplate>
 				</div>

src/pages/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/produkt-uebersicht.astro

@@ -0,0 +1,14 @@
+---
+import Layout from "#layouts/Layout.astro";
+import ProduktUebersichtVerbrauchsausweisWohnen from "#components/design/content/ProduktUebersichtVerbrauchsausweisWohnen.svelte";
+---
+
+<Layout title="Verbrauchsausweis Produktübersicht">
+
+<ProduktUebersichtVerbrauchsausweisWohnen>
+
+</ProduktUebersichtVerbrauchsausweisWohnen>
+
+
+
+</Layout>