mpuchstein/REMind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added dark theme support for logo text in Overview and ChipOverview, included new logotext_dark.svg, and implemented a theme observer; updated ChipCard navigation logic for correct routing

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-13 02:41:21 +02:00
parent 36bb04cfa9
commit 95bc368ebb
4 changed files with 97 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/ChipOverview.tsx
View File

@@ -15,9 +15,38 @@ import {
FaUsers,
} from 'react-icons/fa';
import {HiSparkles} from 'react-icons/hi';
import {useEffect, useState} from 'react';
import logotext from "../assets/logotext.svg";
import logotext_dark from "../assets/logotext_dark.svg";
export default function ChipOverview() {
const [isDarkTheme, setIsDarkTheme] = useState(false);
useEffect(() => {
// Initialize theme state
const updateThemeState = () => {
const theme = document.documentElement.getAttribute('data-theme');
setIsDarkTheme(theme === 'dark');
};
// Set initial state
updateThemeState();
// Create observer to watch for theme changes
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.attributeName === 'data-theme') {
updateThemeState();
}
});
});
// Start observing
observer.observe(document.documentElement, {attributes: true});
// Cleanup
return () => observer.disconnect();
}, []);
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Floating Background Elements */}
<div className="absolute inset-0 pointer-events-none">
@@ -36,7 +65,11 @@ export default function ChipOverview() {
<div className="text-center mb-12 sm:mb-16 relative z-10">
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
<div className="flex items-center justify-around">
<img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
{isDarkTheme ? (
<img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
) : (
<img src={logotext_dark} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
)}
</div>
<p className="text-lg sm:text-xl dreamy-text">Bahnbrechende Traumtechnologie</p>
</div>

46
src/pages/Overview.tsx
View File

@@ -15,10 +15,39 @@ import {
FaVrCardboard,
} from 'react-icons/fa';
import {HiSparkles} from 'react-icons/hi';
import logotext from "../assets/logotext.svg";
import {NavLink} from 'react-router-dom';
import {useEffect, useState} from 'react';
import logotext from '../assets/logotext.svg'
import logotext_dark from '../assets/logotext_dark.svg'
export default function Overview() {
const [isDarkTheme, setIsDarkTheme] = useState(false);
useEffect(() => {
// Initialize theme state
const updateThemeState = () => {
const theme = document.documentElement.getAttribute('data-theme');
setIsDarkTheme(theme === 'dark');
};
// Set initial state
updateThemeState();
// Create observer to watch for theme changes
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.attributeName === 'data-theme') {
updateThemeState();
}
});
});
// Start observing
observer.observe(document.documentElement, {attributes: true});
// Cleanup
return () => observer.disconnect();
}, []);
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Floating Background Elements */}
<div className="absolute inset-0 pointer-events-none">
@@ -37,7 +66,11 @@ export default function Overview() {
<div className="text-center mb-12 sm:mb-16 relative z-10">
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
<div className="flex items-center justify-around">
<img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
{isDarkTheme ? (
<img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
) : (
<img src={logotext_dark} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
)}
</div>
<p className="text-lg sm:text-xl dreamy-text">Träume analysieren, Gesellschaft verstehen</p>
</div>
@@ -55,7 +88,8 @@ export default function Overview() {
</p>
</div>
</div>
{/* Main Features Grid - Dreamy Cards */}
{/* Main Features Grid - Dreamy Cards */
}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
{/* KI-Traumdeutung */}
<div
@@ -166,7 +200,8 @@ export default function Overview() {
</div>
</div>
{/* Dreamy Workflow Section */}
{/* Dreamy Workflow Section */
}
<div
className="dream-container floating mb-16 backdrop-blur-lg bg-gradient-to-br from-pink-500/30 to-red-400/30 dark:from-pink-800/30 dark:to-red-900/30 rounded-xl sm:rounded-2xl md:rounded-3xl p-6 sm:p-8 md:p-12"
style={{animationDelay: '3.2s'}}>
@@ -218,7 +253,8 @@ export default function Overview() {
</div>
</div>
{/* Dreamy CTA Section */}
{/* Dreamy CTA Section */
}
<div className="relative mt-12 sm:mt-16">
<div
className="dreamy-card rounded-xl sm:rounded-2xl p-6 sm:p-8 md:p-12 text-center floating bg-gradient-to-br from-pink-600 via-violet-600 to-purple-600 border-none overflow-hidden"