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

@@ -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) => [

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,7 +371,8 @@ const ComfortHubPage = () => {
       </AnimatePresence>
 
       {/* Global CSS for experience mode */}
-      <style jsx global>{`
+      <style dangerouslySetInnerHTML={{
+        __html: `
           .experience-mode {
             background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460);
             transition: background 1s ease;
@@ -385,7 +386,8 @@ const ComfortHubPage = () => {
           .experience-mode .dark\\:bg-gray-800 {
             background: rgba(30, 30, 60, 0.8) !important;
           }
-      `}</style>
+        `
+      }} />
     </div>
   );
 };