src/components/design/content/InfoPopup.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+   
+    let showPopup = true;
+    let popupContent = null;
+  
+    function closePopup() {
+      showPopup = false;
+      popupContent = null;
+    }
+  
+</script>
+  
+    {#if showPopup}
+    <div class="popup-overlay">
+      <div class="popup-content" on:keydown|stopPropagation on:keyup|stopPropagation on:keypress|stopPropagation>
+        <button class="close-button" on:click={closePopup}>X</button>
+        <div class="popup-title">Wichtige Info zur Neuentwicklung</div>
+        <div class="popup-body">
+            <p>
+                Wie seit längerem angekündigt ist es jetzt endlich soweit. Seit dem <b>07.04.2025</b> ist unser neues System online. Das <strong>Front- und Backend wurde komplett neu entwickelt</strong> und folgende Neuerungen wurden durchgeführt:
+            </p>
+            <ul class="popup-list">
+                <li>Intuitivere Benutzerführung durch dynamische Infoslides</li>
+                <li>Optimierung des Bestellprozesses</li>
+                <li>Neues Widget <a href="/welcher-energieausweis/">"Welcher Energieausweis?"</a> zur Benutzerführung. Es werden jetzt alle <b>Energieausweise und GEG-Berechnungen</b> für Wohnen und Gewerbe abgebildet.</li>
+                <li>Das <b>Widget wird in Ihrem Branding</b> (Farbe und Schriftart) wenn gewünscht zur Verfügung gestellt (entweder als Code oder iframe).</li>
+                <li>Implementierung der <b>DIN18599</b> für Wohngebäude inkl. Darstellung aller Rechenschritte gem. DIN18599 Formblättern.</li>
+                <li>Erweiterung der FAQ's und Arbeitsmaterialien</li>
+                <li>API Schnittstelle</li>
+                <li><b>Kundendashboard</b> mit Gebäudeübersicht und Ausweisübersicht pro Gebäude. Hier können aus früheren Ausweisen neue Ausweise per Klick erstellt werden. Oder weiterführende GEG-Berechnungen auf Grundlage der bestehenden Daten.</li>
+            </ul>
+            <p>
+                Wir freuen uns, Ihnen die neuen Funktionen ab sofort zur Verfügung zu stellen. Das neue System ist <strong>responsive</strong> und kann auf allen Endgeräten genutzt werden. Im Zuge der Neuentwicklung haben wir auch die <strong>Preise</strong> angepasst. Diese sind ab dem <b>06.04.2025</b> gültig.<br><br>
+                <b>Sprechen Sie uns doch gerne an falls Sie an einer Kooperation interessiert sind.</b> Wir freuen uns auf Ihr Feedback!
+            </p>
+        </div>
+
+        <style>
+           
+        </style>
+       
+      </div>
+    </div>
+    {/if}
+  
+  <style lang="scss">
+    .popup-body {
+                font-size: 1rem;
+                line-height: 1.5;
+                margin-bottom: 1rem;
+            }
+
+            .popup-list {
+                list-style-type: disc;
+                margin-left: 1.5rem;
+                padding-left: 0.5rem;
+            }
+
+            .popup-list li {
+                margin-bottom: 0.5rem;
+            } 
+ 
+  .popup-overlay {
+    @apply fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center;
+  }
+  
+  .popup-content {
+    @apply w-3/4 bg-white p-4 rounded-lg shadow-lg relative;
+  }
+  
+  .close-button {
+    @apply absolute top-3 right-3 bg-secondary text-white rounded-full p-2 cursor-pointer;
+  }
+  
+  .popup-title {
+    @apply top-6 left-8 text-3xl font-bold mb-2;
+  }

src/pages/index.astro

@@ -4,6 +4,7 @@ import ProduktVergleich from "#components/design/content/ProduktVergleich.svelte
 import ProduktVergleichGewerbe from "#components/design/content/ProduktVergleichGewerbe.svelte";
 import WelcherAusweisWidget from "#components/widgets/ibcornelsen/WelcherAusweisWidget_ibcornelsen.svelte";
 import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.svelte";
+import InfoPopup from "#components/design/content/InfoPopup.svelte";
 
 ---
 
@@ -195,6 +196,7 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
 					]}
 				></TextboxCardTemplate>
 
+<InfoPopup></InfoPopup>
 
 </Layout>