From 8b1016b1aa87d621c30452ed3ff7daf999dbcd3b Mon Sep 17 00:00:00 2001
From: LOUIS POTEVIN <louis.potevin@legrand.com>
Date: Wed, 27 May 2026 13:23:26 +0200
Subject: [PATCH] feat: add multiple notification types to the Notifications
 section

---
 src/pages/index.astro | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1eac1b4..c357c23 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -15,10 +15,19 @@ import Notification from '../components/Notifications/notification.astro';
     <h1>Nova Design System</h1>
     <section>
       <h2>Notifications — Error / Warning / Success / Info</h2>
-      <div style="max-width: 400px;">
+      <div style="max-width: 400px; display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
         <Notification type="error">
             An error occurred during the operation. Please try again.
         </Notification>
+        <Notification type="success">
+            The operation was completed successfully.
+        </Notification>
+        <Notification type="warning">
+            A warning occurred during the operation. Please check the details.
+        </Notification>
+        <Notification type="info">
+            Information about the operation.
+        </Notification>
       </div>
     </section>
     <section>
@@ -173,7 +182,12 @@ import Notification from '../components/Notifications/notification.astro';
   </main>
 </Layout>
 
-<style>
+<style lang="scss" scoped>
+
+  body {
+    background-color: var(--nds-background);
+    color: var(--nds-text);
+  }
   main {
     max-width: 900px;
     margin: 0 auto;
@@ -218,6 +232,7 @@ import Notification from '../components/Notifications/notification.astro';
     display: flex;
     align-items: center;
     gap: var(--nds-spacing-lg);
+    color: var(--nds-text);
   }
 
   .icon-name {