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/pages/ComfortHubPage.tsx
+18 -16
View File
@@ -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>
);
};