From 691f087e2a7b99e86c6c393f1f3fce8418d25137 Mon Sep 17 00:00:00 2001
From: ghaddaditw <40211818-ghaddaditw@users.noreply.replit.com>
Date: Sun, 8 Jun 2025 08:30:34 +0000
Subject: [PATCH] Introduce a 'Comfort Hub' page with interactive elements and
 custom styling

Adds ComfortHubPage with animated elements and applies experience-mode CSS.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c5f0c281-8dd8-4846-b452-4a07bcd21062
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/270bd931-20d6-43b9-86f5-205c84550245.jpg
---
 client/src/components/layout/Sidebar.tsx |  6 +++++
 client/src/pages/ComfortHubPage.tsx      | 34 +++++++++++++-----------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/client/src/components/layout/Sidebar.tsx b/client/src/components/layout/Sidebar.tsx
index 34f255f..7e12795 100644
--- a/client/src/components/layout/Sidebar.tsx
+++ b/client/src/components/layout/Sidebar.tsx
@@ -77,6 +77,12 @@ const getNavigation = (t: any) => [
     href: "/themes",
     icon: Palette,
   },
+  {
+    name: t('navigation.comfort', 'Comfort Hub'),
+    href: "/comfort",
+    icon: Heart,
+    badge: "NEW", // Highlight this new feature
+  },
 ];
 
 const getManagementNavigation = (t: any) => [
diff --git a/client/src/pages/ComfortHubPage.tsx b/client/src/pages/ComfortHubPage.tsx
index 78fcc0c..5e269b3 100644
--- a/client/src/pages/ComfortHubPage.tsx
+++ b/client/src/pages/ComfortHubPage.tsx
@@ -356,7 +356,7 @@ const ComfortHubPage = () => {
                   y: Math.random() * window.innerHeight
                 }}
                 animate={{
-                  y: [null, -20, null],
+                  y: [-20, 0, -20],
                   opacity: [0.4, 0.8, 0.4]
                 }}
                 transition={{
@@ -371,21 +371,23 @@ const ComfortHubPage = () => {
       </AnimatePresence>
 
       {/* Global CSS for experience mode */}
-      <style jsx global>{`
-        .experience-mode {
-          background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460);
-          transition: background 1s ease;
-        }
-        
-        .experience-mode .bg-white {
-          background: rgba(255, 255, 255, 0.05) !important;
-          backdrop-filter: blur(10px);
-        }
-        
-        .experience-mode .dark\\:bg-gray-800 {
-          background: rgba(30, 30, 60, 0.8) !important;
-        }
-      `}</style>
+      <style dangerouslySetInnerHTML={{
+        __html: `
+          .experience-mode {
+            background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460);
+            transition: background 1s ease;
+          }
+          
+          .experience-mode .bg-white {
+            background: rgba(255, 255, 255, 0.05) !important;
+            backdrop-filter: blur(10px);
+          }
+          
+          .experience-mode .dark\\:bg-gray-800 {
+            background: rgba(30, 30, 60, 0.8) !important;
+          }
+        `
+      }} />
     </div>
   );
 };