Merge pull request #235 from IBCornelsen/Jens

Bestellprozess Energieausweis hinzugefügt, Navigation erweitert
This commit is contained in:
Jens Cornelsen
2024-12-19 16:42:45 +01:00
committed by GitHub
3 changed files with 132 additions and 16 deletions

View File

@@ -93,7 +93,7 @@ if(innerWidth>1024){
<nav id="cardNavigation" class="cardNavigation box hidden relative ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5">
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">Angebote</div>
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">Eingabeformulare</div>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
@@ -110,7 +110,28 @@ if(innerWidth>1024){
<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis erstellen</a></li>
<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis erstellen</a></li>
<li><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe erstellen</a></li>
<li><a href="/energieausweis-erstellen/bedarfsausweis-gewerbe/">Bedarfsausweis Gewerbe erstellen</a></li>
</ul>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan-anfragen">Sanierungsfahrplan anfragen</a>
</div>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
{#if innerWidth > 1023}
<a href={undefined} class="nav-element-child" >Angebot anfragen<span class="dd-symbol-clone"></span><span class="dd-symbol"></span></a>
{:else}
<a href={undefined} class="nav-element-child">Angebot anfragen<span class="dd-symbol-clone"></span><span class="dd-symbol"></span></a>
{/if}
<ul class="dropdown-content energieasusweis-erstellen">
{#if innerWidth < 1023}
<li><a href="/energieausweis-erstellen">Angebot anfragen</a></li>
{/if}
<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Bedarfsausweis Gewerbe anfragen</a></li>
<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">GEG Nachweis Wohnen anfragen</a></li>
<li><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">GEG Nachweis Gewerbe anfragen</a></li>
</ul>
</div>
@@ -155,6 +176,9 @@ if(innerWidth>1024){
</ul>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan">Sanierungsfahrplan</a>
</div>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
@@ -169,21 +193,36 @@ if(innerWidth>1024){
</ul>
</div>
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">Service</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/energieausweis-aussteller">Energieberater finden</a>
</div>
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">FAQ & Hilfe</div>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
<a href="{'/faq'}" class="nav-element-child">FAQ Energieausweise<span class="dd-symbol-clone"></span><span class="dd-symbol"></span></a>
<ul class="dropdown-content faq">
{#if innerWidth < 1023}
<li><a href="/faq">FAQ Energieausweise</a></li>
{/if}
<li><a href="/faq/allgemeines-18599/">Allgemeines zur Berechnungsmethode und Norm DIN 18599</a></li>
<li><a href="/faq/erstellung-energieausweise/">Erstellung und Bearbeitung von Energieausweisen</a></li>
<li><a href="/faq/formulareingabe/">Eingabefehler und Korrekturen</a></li>
</ul>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
{#if innerWidth > 1023}
<a href="/bestellprozess-energieausweis" class="nav-element-child" >Bestellprozess Energieausweis<span class="dd-symbol-clone"></span><span class="dd-symbol"></span></a>
{:else}
<a href="/bestellprozess-energieausweis" class="nav-element-child">Bestellprozess Energieausweis<span class="dd-symbol-clone"></span><span class="dd-symbol"></span></a>
{/if}
<ul class="dropdown-content energieasusweis-erstellen">
{#if innerWidth < 1023}
<li><a href="/bestellprozess-energieausweis">Bestellprozess Energieausweis</a></li>
{/if}
<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Merkblatt Verbrauchsausweis Wohnen</a></li>
<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Merkblatt Bedarfsausweis Wohnen</a></li>
<li><a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Merkblatt Verbrauchsausweis Gewerbe</a></li>
</ul>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/faq">FAQ</a>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/glossar">Glossar</a>
</div>
@@ -191,9 +230,7 @@ if(innerWidth>1024){
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/enev-zusammenfassung">EnEV Zusammenfassung - Archiv</a>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/energieausweis-aussteller">Energieausweis Aussteller</a>
</div>
<div class="nav-element">
<a class="no-dropdown nav-element-child" href="/kundenbewertungen">Kundenbewertungen</a>
</div>

View File

@@ -0,0 +1,79 @@
---
import Layout from "#layouts/Layout.astro";
---
<Layout title="Bestellprozess Energieausweis">
<h1>Bestellprozess Energieausweis</h1>
<div class="bestellprozess space-y-10 p-6 bg-gray-100 rounded-lg shadow-lg">
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 1: Online-Check</h2>
<p class="text-gray-600">Beginnen Sie mit unserem <a href="welcher-energieausweis">Online-Check</a> um festzustellen, welcher Energieausweis für Ihr Gebäude geeignet ist.</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 2: Auswahl des passenden Energieausweises</h2>
<p class="text-gray-600">Basierend auf den Ergebnissen wird Ihnen der passende Energieausweis angezeigt. Wenn sowohl Verbrauchsausweis als auch Bedarfsausweis möglich sind, empfehlen wir den Bedarfsausweis.</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 3: Eingabeformular aufrufen</h2>
<p class="text-gray-600">
Klicken Sie auf "jetzt online erstellen", um zum Eingabeformular für den Energieausweis zu gelangen. Hier sehen Sie alle erforderlichen Informationen auf einen Blick. Eine Zusammenfassung der benötigten Daten und Merkblätter finden Sie hier: <a href="#" class="text-blue-500 underline">Merkblätter Energieausweis</a>.
</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 4: Dateneingabe und Fotos hochladen</h2>
<p class="text-gray-600">Geben Sie die nötigen Gebäudedaten ein und laden Sie Fotos hoch. Angaben zum Sanierungsstand sind wichtig, um passende Modernisierungsempfehlungen zu erhalten. Bei Problemen können Sie über den <span class="font-medium">"Hilfe"</span>-Button unseren Offline-Service anfordern.</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 5: Eingaben überprüfen</h2>
<p class="text-gray-600">Nutzen Sie die Vorschaufunktion für den Ansichtsausweis und das Datenblatt, die im Formular unten rechts aufrufbar sind. Der Anzeigebalken zu den Energiekennwerten wird während der Eingabe live aktualisiert.</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 6: Kundendaten eingeben und Vorprüfung</h2>
<p class="text-gray-600">Klicken Sie auf <span class="font-medium">"Weiter"</span>, um Ihre Kundendaten einzugeben und eine automatische Vorprüfung durchzuführen. Falls Punkte unvollständig sind, können Sie über <span class="font-medium">"zurück"</span> Ihre Eingaben korrigieren.</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 7: Konto erstellen oder einloggen</h2>
<p class="text-gray-600">Sollten Sie noch kein Konto besitzen, wird automatisch ein Kundenkonto für Sie erstellt. Bestehende Kunden werden gebeten, sich einzuloggen, falls noch nicht geschehen.</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 8: Kaufabschluss und Zusatzservices</h2>
<p class="text-gray-600">Nach einer kurzen Zusammenfassung können Sie den Kauf abschließen. Hier haben Sie auch die Möglichkeit, Zusatzservices wie Postversand, Same-Day-Service oder eine Energieeffizienzberatung zu buchen.</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 9: Bezahlung</h2>
<p class="text-gray-600">Wählen Sie eine der angebotenen Bezahlmethoden, wie Rechnung, PayPal, Giropay, Sofortüberweisung oder Kreditkarte.</p>
</div>
<div class="step border-b border-gray-300 pb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">Schritt 10: Bestellung abschließen</h2>
<p class="text-gray-600">
Bestätigen Sie die AGB und die Datenschutzerklärung, und klicken Sie auf <span class="font-medium">"kostenpflichtig bestellen"</span>, um den Bestellvorgang abzuschließen.
</p>
</div>
<div class="confirmation mt-8 bg-white p-6 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Nach der Bestellung erhalten Sie:</h3>
<ul class="list-disc ml-6 text-gray-600 space-y-2">
<li>Eine Bestellbestätigung auf dem Bildschirm und per E-Mail.</li>
<li>Den Ansichtsausweis per E-Mail.</li>
<li>Das Datenblatt zur Prüfung in einer separaten E-Mail.</li>
</ul>
<p class="text-gray-600 mt-4">Der Energieausweis wird frühestens 12 Stunden nach Bestellung (außer beim Same-Day-Service) von uns geprüft. Sie können vor der Ausstellung noch Korrekturen vornehmen, falls erforderlich.</p>
</div>
</div>
</Layout>