Sanierungsfahrplan Übersicht Istzustand fertiggestellt

src/components/design/content/SanierungsFahrplanIstTemplate.svelte

@@ -0,0 +1,83 @@
+
+<div class="beam">
+  <img class="skalaBeam" src="/images/sanierungsfahrplan/skalaEnergieEffizienz.svg" alt="Skala Energieeffizienz"/>
+</div>
+
+<div class="wrapper">
+    <!-- Wände -->
+    <div class="card">
+      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconWaende.svg" alt="Hausiconwände"/>
+      <div class="card-subtitle">*inklusive Kellerwänden</div>
+    </div>
+    <!-- Dach -->
+    <div class="card">
+      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconDach.svg" alt="Hausicondach"/>
+      <div class="card-subtitle">inklusive Kellerwänden</div>
+    </div>
+    <!-- Lüftung -->
+    <div class="card">
+      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconLueftung.svg" alt="Hausiconlüftung"/>
+      <div class="card-subtitle"></div>
+    </div>
+    <!-- Fenster -->
+    <div class="card">
+      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconFenster.svg" alt="Hausiconfenster"/>
+      <div class="card-subtitle">inklusive Dachfenster</div>
+    </div>
+    <!-- Ihr Haus heute -->
+    <div class="card">
+      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconHaus.svg" alt="Hausicon"/>
+      <div class="card-subtitle"></div>
+    </div>
+    <!-- Warmwasser -->
+    <div class="card">
+      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconWarmwasser.svg" alt="Hausiconwarmwasser"/>
+      <div class="card-subtitle"></div>
+    </div>
+    <!-- Boden -->
+    <div class="card">
+      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconBoden.svg" alt="Hausiconboden"/>
+      <div class="card-subtitle">unterer Gebäudeabschluss</div>
+    </div>
+    <!-- Heizung -->
+    <div class="card">
+      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconHeizung.svg" alt="Hausiconheizung"/>
+      <div class="card-subtitle"></div>
+    </div>
+    <!-- Warmwasserverteilung -->
+    <div class="card">
+      <img class="hausIcon" src="/images/sanierungsfahrplan/hausIconWarmwasserVerteilung.svg" alt="Hausiconwarmwasserverteilung"/>
+      <div class="card-subtitle">inkl. Speicherung und Übergabe</div>
+    </div>
+    <div class="card">
+    </div>
+  </div>
+
+<style lang="scss">
+
+.beam {
+  @apply items-center justify-center p-12 m-6;
+}  
+  
+.skalaBeam {
+  @apply w-full;}
+
+
+.wrapper {
+  @apply grid grid-cols-3 gap-6 items-center justify-center px-10 m-6 py-10;
+}
+
+.card {
+  @apply bg-white flex flex-col items-center 
+  justify-center text-center;
+}
+
+.card-subtitle {
+  @apply w-full text-sm text-gray-600 h-5;
+}
+
+.hausIcon {
+  @apply w-full;}
+
+
+</style>

src/components/design/sidebars/cards/cardNavigation.svelte

@@ -136,7 +136,7 @@ if(innerWidth>1024){
   </div>
 
   <div class="nav-element">
-    <a class="no-dropdown nav-element-child" href="/sanierungsfahrplan-anfragen">Sanierungsfahrplan (iSFP)</a>
+    <a class="no-dropdown nav-element-child" href="/sanierungsfahrplan">Sanierungsfahrplan (iSFP)</a>
     </div>
 
   <div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">Produkte & Preise</div>

src/pages/sanierungsfahrplan/index.astro

@@ -0,0 +1,15 @@
+---
+import Layout from "#layouts/Layout.astro";
+import SanierungsFahrplanIstTemplate from "#components/design/content/SanierungsFahrplanIstTemplate.svelte";
+
+---
+
+<Layout title="Sanierungsfahrplan">
+
+    <h1>Ihr Haus heute - energetischer Istzustand</h1>
+
+    <h2>Überblick zum energetischen Istzustand und Sanierungsbedarf ihres Hauses</h2>
+
+    <SanierungsFahrplanIstTemplate />
+
+</Layout>