georges/menassit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introduce a 'Comfort Hub' page with interactive elements and custom styling

Browse Source 
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
This commit is contained in:
ghaddaditw
2025-06-08 08:30:34 +00:00
parent 8eb85f160f
commit 691f087e2a
2 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/layout/Sidebar.tsx
+6
View File
@@ -77,6 +77,12 @@ const getNavigation = (t: any) => [
href: "/themes", href: "/themes",
icon: Palette, icon: Palette,
}, },
{
name: t('navigation.comfort', 'Comfort Hub'),
href: "/comfort",
icon: Heart,
badge: "NEW", // Highlight this new feature
},
]; ];
const getManagementNavigation = (t: any) => [ const getManagementNavigation = (t: any) => [
client/src/pages/ComfortHubPage.tsx
+16 -14
View File
@@ -356,7 +356,7 @@ const ComfortHubPage = () => {
y: Math.random() * window.innerHeight y: Math.random() * window.innerHeight
}} }}
animate={{ animate={{
y: [null, -20, null], y: [-20, 0, -20],
opacity: [0.4, 0.8, 0.4] opacity: [0.4, 0.8, 0.4]
}} }}
transition={{ transition={{
@@ -371,21 +371,23 @@ const ComfortHubPage = () => {
</AnimatePresence> </AnimatePresence>
{/* Global CSS for experience mode */} {/* Global CSS for experience mode */}
<style jsx global>{` <style dangerouslySetInnerHTML={{
.experience-mode { __html: `
background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460); .experience-mode {
transition: background 1s ease; background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460);
} transition: background 1s ease;
}
.experience-mode .bg-white { .experience-mode .bg-white {
background: rgba(255, 255, 255, 0.05) !important; background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
.experience-mode .dark\\:bg-gray-800 { .experience-mode .dark\\:bg-gray-800 {
background: rgba(30, 30, 60, 0.8) !important; background: rgba(30, 30, 60, 0.8) !important;
} }
`}</style> `
}} />
</div> </div>
); );
}; };