restructured DreamArchive by introducing detailed subroutes and dedicated pages (WorldwideEvents, CulturalLandscapes, etc.), added ScrollToTop for improved UX, and removed deprecated Archive component.
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
89
src/App.tsx
89
src/App.tsx
@@ -4,84 +4,20 @@ import Navbar from './components/Navbar';
|
|||||||
import TopBar from './components/TopBar';
|
import TopBar from './components/TopBar';
|
||||||
import SplashScreen from './components/SplashScreen';
|
import SplashScreen from './components/SplashScreen';
|
||||||
import {BrowserRouter, Route, Routes, useLocation} from 'react-router-dom';
|
import {BrowserRouter, Route, Routes, useLocation} from 'react-router-dom';
|
||||||
import {formatDateSimple} from './utils/DateUtils';
|
|
||||||
import Feed from "./pages/Feed.tsx";
|
import Feed from "./pages/Feed.tsx";
|
||||||
import DreamPage from "./pages/DreamPage.tsx";
|
import DreamPage from "./pages/DreamPage.tsx";
|
||||||
import ProfilePage from "./pages/ProfilePage.tsx";
|
import ProfilePage from "./pages/ProfilePage.tsx";
|
||||||
import Home from "./pages/Home.tsx";
|
import Home from "./pages/Home.tsx";
|
||||||
import Overview from "./pages/Overview.tsx";
|
import Overview from "./pages/Overview.tsx";
|
||||||
import ChipOverview from "./pages/ChipOverview.tsx";
|
import ChipOverview from "./pages/ChipOverview.tsx";
|
||||||
|
import DreamArchiveIndex from "./pages/dreamarchive/DreamArchiveIndex.tsx";
|
||||||
function Archive() {
|
import WorldwideEvents from "./pages/dreamarchive/WorldwideEvents.tsx";
|
||||||
return (
|
import CulturalLandscapes from "./pages/dreamarchive/CulturalLandscapes.tsx";
|
||||||
<div className="p-4">
|
import LivingConditions from "./pages/dreamarchive/LivingConditions.tsx";
|
||||||
<h1 className="dreamy-text text-3xl md:text-4xl mb-6">Dream Archive</h1>
|
import Technology from "./pages/dreamarchive/Technology.tsx";
|
||||||
|
import UserDreams from "./pages/dreamarchive/UserDreams.tsx";
|
||||||
<div className="mb-6 flex flex-col sm:flex-row gap-4">
|
import ResearchLive from "./pages/dreamarchive/ResearchLive.tsx";
|
||||||
<div className="flex-1">
|
import ScrollToTop from "./components/ScrollToTop.tsx";
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search dreams..."
|
|
||||||
className="w-full p-3 rounded-lg focus:outline-none"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--container)',
|
|
||||||
color: 'var(--text)',
|
|
||||||
borderColor: 'var(--accent-soft)',
|
|
||||||
boxShadow: '0 2px 8px var(--shadow)'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<select
|
|
||||||
className="w-full p-3 rounded-lg focus:outline-none"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--container)',
|
|
||||||
color: 'var(--text)',
|
|
||||||
borderColor: 'var(--accent-soft)',
|
|
||||||
boxShadow: '0 2px 8px var(--shadow)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<option>All Dreams</option>
|
|
||||||
<option>Last Week</option>
|
|
||||||
<option>Last Month</option>
|
|
||||||
<option>Last Year</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
{[1, 2, 3].map((item) => (
|
|
||||||
<div key={item} className="card">
|
|
||||||
<div className="flex justify-between items-start mb-2">
|
|
||||||
<h3 className="text-xl font-bold" style={{ color: 'var(--accent)' }}>
|
|
||||||
Dream #{item}
|
|
||||||
</h3>
|
|
||||||
<span style={{ color: 'var(--text-muted)' }}>
|
|
||||||
{formatDateSimple(new Date())}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="mb-4">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
||||||
Vivamus lacinia, nunc eu tincidunt faucibus...
|
|
||||||
</p>
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<button
|
|
||||||
className="px-4 py-2 rounded-lg transition-transform hover:scale-105"
|
|
||||||
style={{
|
|
||||||
background: 'var(--accent-gradient)',
|
|
||||||
color: 'white'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
View Details
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
@@ -97,6 +33,7 @@ export default function App() {
|
|||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
|
<ScrollToTop/>
|
||||||
<AppContent/>
|
<AppContent/>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
</div>
|
</div>
|
||||||
@@ -119,7 +56,13 @@ function AppContent() {
|
|||||||
<Route path="/home" element={<Home/>}/>
|
<Route path="/home" element={<Home/>}/>
|
||||||
<Route path="/feed" element={<Feed/>}/>
|
<Route path="/feed" element={<Feed/>}/>
|
||||||
<Route path="/chip" element={<ChipOverview/>}/>
|
<Route path="/chip" element={<ChipOverview/>}/>
|
||||||
<Route path="/archive" element={<Archive/>}/>
|
<Route path="/dreamarchive" element={<DreamArchiveIndex/>}/>
|
||||||
|
<Route path="/dreamarchive/worldwide-events" element={<WorldwideEvents/>}/>
|
||||||
|
<Route path="/dreamarchive/cultural-landscapes" element={<CulturalLandscapes/>}/>
|
||||||
|
<Route path="/dreamarchive/living-conditions" element={<LivingConditions/>}/>
|
||||||
|
<Route path="/dreamarchive/technology" element={<Technology/>}/>
|
||||||
|
<Route path="/dreamarchive/user-dreams" element={<UserDreams/>}/>
|
||||||
|
<Route path="/dreamarchive/research-live" element={<ResearchLive/>}/>
|
||||||
<Route path="/profile" element={<ProfilePage/>}/>
|
<Route path="/profile" element={<ProfilePage/>}/>
|
||||||
<Route path="/dream/:id" element={<DreamPage/>}/>
|
<Route path="/dream/:id" element={<DreamPage/>}/>
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import {getBackgroundStyle} from '../styles/StyleUtils';
|
|||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
return (<>
|
return (<>
|
||||||
<nav
|
<nav
|
||||||
className="fixed bottom-0 left-0 right-0 flex justify-around py-4 z-10 backdrop-blur-md"
|
className="fixed bottom-0 left-0 right-0 flex justify-around py-4 z-50 backdrop-blur-md"
|
||||||
style={{
|
style={{
|
||||||
background: 'var(--accent-gradient)',
|
background: 'var(--accent-gradient)',
|
||||||
boxShadow: '0 -2px 10px var(--shadow)'
|
boxShadow: '0 -2px 10px var(--shadow)'
|
||||||
@@ -18,7 +18,7 @@ export default function Navbar() {
|
|||||||
<FaMicrochip className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
|
<FaMicrochip className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
<div className="w-16 md:w-20"></div>
|
<div className="w-16 md:w-20"></div>
|
||||||
<NavLink to="/archive" className="transition-transform hover:scale-110">
|
<NavLink to="/dreamarchive" className="transition-transform hover:scale-110">
|
||||||
<FaGlobeEurope className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
|
<FaGlobeEurope className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
<NavLink to="/profile" className="transition-transform hover:scale-110">
|
<NavLink to="/profile" className="transition-transform hover:scale-110">
|
||||||
@@ -28,7 +28,7 @@ export default function Navbar() {
|
|||||||
|
|
||||||
<NavLink
|
<NavLink
|
||||||
to="/feed"
|
to="/feed"
|
||||||
className="microphone-button fixed bottom-6 left-1/2 transform -translate-x-1/2 p-4 md:p-5 rounded-full z-20 transition-transform hover:scale-110 floating"
|
className="microphone-button fixed bottom-6 left-1/2 transform -translate-x-1/2 p-4 md:p-5 rounded-full z-60 transition-transform hover:scale-110 floating"
|
||||||
style={getBackgroundStyle('cta')}
|
style={getBackgroundStyle('cta')}
|
||||||
>
|
>
|
||||||
<FaList className="w-8 h-8 md:w-10 md:h-10 text-white"/>
|
<FaList className="w-8 h-8 md:w-10 md:h-10 text-white"/>
|
||||||
|
|||||||
15
src/components/ScrollToTop.tsx
Normal file
15
src/components/ScrollToTop.tsx
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
// src/components/ScrollToTop.tsx
|
||||||
|
import {useEffect} from 'react';
|
||||||
|
import {useLocation} from 'react-router-dom';
|
||||||
|
|
||||||
|
const ScrollToTop: React.FC = () => {
|
||||||
|
const {pathname} = useLocation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
}, [pathname]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ScrollToTop;
|
||||||
306
src/pages/dreamarchive/CulturalLandscapes.tsx
Normal file
306
src/pages/dreamarchive/CulturalLandscapes.tsx
Normal file
@@ -0,0 +1,306 @@
|
|||||||
|
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
|
||||||
|
import {FaGlobeAfrica, FaGlobeAsia, FaGlobeEurope, FaHandshake} from 'react-icons/fa';
|
||||||
|
import {NavLink} from 'react-router-dom';
|
||||||
|
|
||||||
|
export default function CulturalLandscapes() {
|
||||||
|
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<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">
|
||||||
|
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Kulturelle
|
||||||
|
Traumlandschaften</h1>
|
||||||
|
<p className="text-lg sm:text-xl dreamy-text">Traumcharakteristika verschiedener Kulturen und
|
||||||
|
Gesellschaften</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||||
|
style={{animationDelay: '0.2s'}}>
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||||
|
<h2 className="dream-title text-xl sm:text-2xl">Kulturelle Unterschiede im Traumerleben</h2>
|
||||||
|
</div>
|
||||||
|
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||||
|
Entdecke, wie kulturelle Hintergründe und gesellschaftliche Strukturen die Traumthemen,
|
||||||
|
-emotionen und -narrative beeinflussen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Research Highlight */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Forschung von David Samson (University of
|
||||||
|
Toronto)</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
{/* BaYaka */}
|
||||||
|
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('violet')}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-4 bg-violet-500/20 rounded-full">
|
||||||
|
<FaGlobeAfrica className="text-violet-600 dark:text-violet-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">BaYaka</h3>
|
||||||
|
<p className="text-sm mb-2 text-center">(Demokratische Republik Kongo)</p>
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<h4 className="font-bold mb-2">Traumstruktur</h4>
|
||||||
|
<p className="text-sm">Träume beginnen mit Bedrohungen, enden mit Gemeinschaftsrettung</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Die BaYaka-Gemeinschaft zeigt ein einzigartiges Muster: Ihre Träume beginnen oft mit
|
||||||
|
persönlichen Bedrohungen, entwickeln sich aber zu Szenarien, in denen die Gemeinschaft
|
||||||
|
zusammenkommt, um das Problem zu lösen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hadza */}
|
||||||
|
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('amber')}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-4 bg-amber-500/20 rounded-full">
|
||||||
|
<FaHandshake className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">Hadza</h3>
|
||||||
|
<p className="text-sm mb-2 text-center">(Tansania)</p>
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<h4 className="font-bold mb-2">Traumstruktur</h4>
|
||||||
|
<p className="text-sm">Starke soziale Bindungen reflektieren sich in kooperativen
|
||||||
|
Traumlösungen</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Die Hadza-Gemeinschaft, bekannt für ihre egalitäre Sozialstruktur, zeigt in ihren Träumen
|
||||||
|
häufig Szenarien, in denen Probleme durch Zusammenarbeit und gegenseitige Unterstützung
|
||||||
|
gelöst werden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Western Societies */}
|
||||||
|
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('blue')}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-4 bg-blue-500/20 rounded-full">
|
||||||
|
<FaGlobeEurope className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">Westliche Gesellschaften</h3>
|
||||||
|
<p className="text-sm mb-2 text-center">(Europa & Nordamerika)</p>
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<h4 className="font-bold mb-2">Traumstruktur</h4>
|
||||||
|
<p className="text-sm">Fokus auf individuellen Stress, weniger soziale Unterstützung</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Im Gegensatz zu indigenen Gemeinschaften zeigen Träume in westlichen Gesellschaften oft
|
||||||
|
einen Fokus auf individuelle Probleme und Lösungen, mit weniger Betonung auf
|
||||||
|
gemeinschaftlicher Unterstützung.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Regional Dream Characteristics */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Regionale Traumcharakteristika</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||||
|
{/* Northern Europe */}
|
||||||
|
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('blue')}>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="p-4 bg-blue-500/20 rounded-full mr-4">
|
||||||
|
<FaGlobeEurope className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold dreamy-text">Nordeuropa</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
|
||||||
|
style={{width: '67%'}}></div>
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
|
||||||
|
67% Träume über Isolation und Dunkelheit
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-1 text-right" style={getTextStyle('muted')}>Saisonale Effekte
|
||||||
|
deutlich erkennbar</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
In nordeuropäischen Ländern zeigt sich ein deutlicher Einfluss der langen, dunklen Winter
|
||||||
|
auf die Traumthemen. Isolation und Dunkelheit dominieren, besonders während der
|
||||||
|
Wintermonate.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mediterranean */}
|
||||||
|
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('amber')}>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="p-4 bg-amber-500/20 rounded-full mr-4">
|
||||||
|
<FaGlobeEurope className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold dreamy-text">Mittelmeerraum</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-amber-500 dark:bg-amber-600 rounded-full"
|
||||||
|
style={{width: '58%'}}></div>
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
|
||||||
|
58% Soziale Träume
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-amber-500 dark:bg-amber-600 rounded-full"
|
||||||
|
style={{width: '42%'}}></div>
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
|
||||||
|
42% Familienthemen
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Im Mittelmeerraum spiegeln Träume die starke soziale und familiäre Orientierung der Kultur
|
||||||
|
wider. Gemeinschaftliche Aktivitäten und Familientreffen sind häufige Traumthemen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{/* East Asia */}
|
||||||
|
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('emerald')}>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="p-4 bg-emerald-500/20 rounded-full mr-4">
|
||||||
|
<FaGlobeAsia className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold dreamy-text">Ostasien</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-emerald-500 dark:bg-emerald-600 rounded-full"
|
||||||
|
style={{width: '71%'}}></div>
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
|
||||||
|
71% Träume über Leistung und gesellschaftliche Erwartungen
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
In ostasiatischen Kulturen reflektieren Träume häufig den gesellschaftlichen Druck und
|
||||||
|
Leistungserwartungen. Prüfungssituationen, beruflicher Erfolg und soziale Anerkennung sind
|
||||||
|
wiederkehrende Themen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sub-Saharan Africa */}
|
||||||
|
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('purple')}>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="p-4 bg-purple-500/20 rounded-full mr-4">
|
||||||
|
<FaGlobeAfrica className="text-purple-600 dark:text-purple-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold dreamy-text">Afrika (Subsahara)</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="relative h-6 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
|
||||||
|
style={{width: '84%'}}></div>
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 w-full h-full flex items-center justify-center text-xs font-bold">
|
||||||
|
84% Träume mit Gemeinschaftsunterstützung
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
In vielen subsaharischen Kulturen zeigen Träume eine starke Betonung von Gemeinschaft und
|
||||||
|
gegenseitiger Unterstützung. Traumlösungen beinhalten fast immer die Hilfe von
|
||||||
|
Familienmitgliedern oder der Gemeinschaft.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cultural Comparison */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Kultureller Vergleich: Traumthemen</h2>
|
||||||
|
|
||||||
|
<div className="dreamy-card rounded-xl p-6" style={getBackgroundStyle('rose')}>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th className="text-left p-2">Traumthema</th>
|
||||||
|
<th className="text-center p-2">Westliche Gesellschaften</th>
|
||||||
|
<th className="text-center p-2">Ostasien</th>
|
||||||
|
<th className="text-center p-2">Indigene Gemeinschaften</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr className="bg-white/10 dark:bg-black/10">
|
||||||
|
<td className="p-2 font-bold">Angstträume</td>
|
||||||
|
<td className="text-center p-2">Persönliches Versagen, Verlust</td>
|
||||||
|
<td className="text-center p-2">Soziale Ablehnung, Scham</td>
|
||||||
|
<td className="text-center p-2">Naturgefahren, Ressourcenmangel</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className="p-2 font-bold">Soziale Träume</td>
|
||||||
|
<td className="text-center p-2">Fokus auf enge Freunde, Partner</td>
|
||||||
|
<td className="text-center p-2">Familiäre Hierarchie, Respekt</td>
|
||||||
|
<td className="text-center p-2">Gesamte Gemeinschaft, Ahnen</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="bg-white/10 dark:bg-black/10">
|
||||||
|
<td className="p-2 font-bold">Erfolgsträume</td>
|
||||||
|
<td className="text-center p-2">Individuelle Leistung, Anerkennung</td>
|
||||||
|
<td className="text-center p-2">Familienstolz, Gruppenleistung</td>
|
||||||
|
<td className="text-center p-2">Gemeinschaftlicher Erfolg, Teilen</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className="p-2 font-bold">Spirituelle Träume</td>
|
||||||
|
<td className="text-center p-2">Selten, abstrakt</td>
|
||||||
|
<td className="text-center p-2">Ahnenverehrung, Harmonie</td>
|
||||||
|
<td className="text-center p-2">Häufig, konkrete Führung</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="bg-white/10 dark:bg-black/10">
|
||||||
|
<td className="p-2 font-bold">Problemlösung</td>
|
||||||
|
<td className="text-center p-2">Individuell, technologisch</td>
|
||||||
|
<td className="text-center p-2">Hierarchisch, kollektiv</td>
|
||||||
|
<td className="text-center p-2">Gemeinschaftlich, naturbezogen</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm mt-4" style={getTextStyle('normal')}>
|
||||||
|
Diese Tabelle zeigt die kulturellen Unterschiede in der Ausprägung verschiedener Traumthemen.
|
||||||
|
Während westliche Gesellschaften einen stärkeren Fokus auf individuelle Aspekte legen, betonen
|
||||||
|
ostasiatische und indigene Kulturen stärker gemeinschaftliche und kollektive Elemente.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Links */}
|
||||||
|
<div className="flex flex-wrap justify-between items-center">
|
||||||
|
<NavLink to="/dreamarchive/worldwide-events"
|
||||||
|
className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
|
||||||
|
style={getBackgroundStyle('blue')}>
|
||||||
|
<span className="mr-2">←</span> Zurück zu Weltweiten Ereignissen
|
||||||
|
</NavLink>
|
||||||
|
<NavLink to="/dreamarchive/living-conditions"
|
||||||
|
className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
|
||||||
|
style={getBackgroundStyle('emerald')}>
|
||||||
|
Weiter zu Lebensbedingungen & Traumqualität <span className="ml-2">→</span>
|
||||||
|
</NavLink>
|
||||||
|
</div>
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
145
src/pages/dreamarchive/DreamArchiveIndex.tsx
Normal file
145
src/pages/dreamarchive/DreamArchiveIndex.tsx
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
import {NavLink} from 'react-router-dom';
|
||||||
|
import {FaFlask, FaGlobeEurope, FaHome, FaMicrochip, FaUser, FaUsers} from 'react-icons/fa';
|
||||||
|
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
|
||||||
|
|
||||||
|
export default function DreamArchiveIndex() {
|
||||||
|
return (
|
||||||
|
<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<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">
|
||||||
|
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Dream Archive</h1>
|
||||||
|
<p className="text-lg sm:text-xl dreamy-text">Globale Traumforschung und Datenvisualisierung</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||||
|
style={{animationDelay: '0.2s'}}>
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||||
|
<h2 className="dream-title text-xl sm:text-2xl">Entdecke die Welt der Träume</h2>
|
||||||
|
</div>
|
||||||
|
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||||
|
Erkunde die Zusammenhänge zwischen weltweiten Ereignissen und Traummustern, kulturelle
|
||||||
|
Unterschiede und technologische Fortschritte in der Traumforschung.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Archive Pages Grid */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||||||
|
{/* Worldwide Events */}
|
||||||
|
<NavLink to="/dreamarchive/worldwide-events" className="no-underline h-full">
|
||||||
|
<div
|
||||||
|
className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
|
||||||
|
style={{...getBackgroundStyle('purple'), animationDelay: '0.5s'}}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-4 bg-purple-500/20 rounded-full">
|
||||||
|
<FaGlobeEurope className="text-purple-600 dark:text-purple-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">
|
||||||
|
Weltweite Ereignisse
|
||||||
|
</h3>
|
||||||
|
<p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Erforsche die Korrelation zwischen globalen Ereignissen und Traumreaktionen
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
{/* Cultural Landscapes */}
|
||||||
|
<NavLink to="/dreamarchive/cultural-landscapes" className="no-underline h-full">
|
||||||
|
<div
|
||||||
|
className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
|
||||||
|
style={{...getBackgroundStyle('blue'), animationDelay: '0.6s'}}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-4 bg-blue-500/20 rounded-full">
|
||||||
|
<FaUsers className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">
|
||||||
|
Kulturelle Traumlandschaften
|
||||||
|
</h3>
|
||||||
|
<p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Vergleiche Traumcharakteristika verschiedener Kulturen und Regionen
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
{/* Living Conditions */}
|
||||||
|
<NavLink to="/dreamarchive/living-conditions" className="no-underline h-full">
|
||||||
|
<div
|
||||||
|
className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
|
||||||
|
style={{...getBackgroundStyle('emerald'), animationDelay: '0.7s'}}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-4 bg-emerald-500/20 rounded-full">
|
||||||
|
<FaHome className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">
|
||||||
|
Lebensbedingungen & Traumqualität
|
||||||
|
</h3>
|
||||||
|
<p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Entdecke wie sozioökonomische und Umweltfaktoren Träume beeinflussen
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
{/* Technology */}
|
||||||
|
<NavLink to="/dreamarchive/technology" className="no-underline h-full">
|
||||||
|
<div
|
||||||
|
className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
|
||||||
|
style={{...getBackgroundStyle('amber'), animationDelay: '0.8s'}}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-4 bg-amber-500/20 rounded-full">
|
||||||
|
<FaMicrochip className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">
|
||||||
|
Technologie & Traumforschung
|
||||||
|
</h3>
|
||||||
|
<p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Erfahre mehr über neueste Entwicklungen in der Traumforschungstechnologie
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
{/* User Dreams */}
|
||||||
|
<NavLink to="/dreamarchive/user-dreams" className="no-underline h-full">
|
||||||
|
<div
|
||||||
|
className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
|
||||||
|
style={{...getBackgroundStyle('rose'), animationDelay: '0.9s'}}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-4 bg-rose-500/20 rounded-full">
|
||||||
|
<FaUser className="text-rose-600 dark:text-rose-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">
|
||||||
|
Deine Träume im Kontext
|
||||||
|
</h3>
|
||||||
|
<p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Sieh wie deine Träume im Vergleich zur globalen Traumdatenbank stehen
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
{/* Research Live */}
|
||||||
|
<NavLink to="/dreamarchive/research-live" className="no-underline h-full">
|
||||||
|
<div
|
||||||
|
className="dreamy-card rounded-xl p-6 floating h-full flex flex-col"
|
||||||
|
style={{...getBackgroundStyle('violet'), animationDelay: '1.0s'}}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-4 bg-violet-500/20 rounded-full">
|
||||||
|
<FaFlask className="text-violet-600 dark:text-violet-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">
|
||||||
|
Traumforschung Live
|
||||||
|
</h3>
|
||||||
|
<p className="text-center text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Aktuelle Studien, Citizen Science und Interviews mit Forschern
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</NavLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
366
src/pages/dreamarchive/LivingConditions.tsx
Normal file
366
src/pages/dreamarchive/LivingConditions.tsx
Normal file
@@ -0,0 +1,366 @@
|
|||||||
|
import {getBackgroundStyle} from '../../styles/StyleUtils';
|
||||||
|
import {FaCity, FaGraduationCap, FaLightbulb, FaMoneyBillWave, FaSmog, FaVolumeUp} from 'react-icons/fa';
|
||||||
|
import {NavLink} from 'react-router-dom';
|
||||||
|
|
||||||
|
export default function LivingConditions() {
|
||||||
|
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<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">
|
||||||
|
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Lebensbedingungen &
|
||||||
|
Traumqualität</h1>
|
||||||
|
<p className="text-lg sm:text-xl dreamy-text">Der Einfluss von Umgebung und Lebensumständen auf
|
||||||
|
unsere Träume</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||||
|
style={{animationDelay: '0.2s'}}>
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||||
|
<h2 className="dream-title text-xl sm:text-2xl">Wie unsere Umgebung unsere Träume formt</h2>
|
||||||
|
</div>
|
||||||
|
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||||
|
Entdecke, wie sozioökonomische Faktoren und Umweltbedingungen die Qualität, Intensität und
|
||||||
|
Inhalte unserer Träume beeinflussen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Socioeconomic Factors */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Sozioökonomische Faktoren</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
{/* Urban vs Rural */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-3 bg-blue-500/20 rounded-full">
|
||||||
|
<FaCity className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Urbane vs. Rurale Träume</h3>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<div className="flex justify-between items-center mb-2">
|
||||||
|
<span className="text-sm font-bold">Stadtbewohner:</span>
|
||||||
|
<span className="text-sm">+43%</span>
|
||||||
|
</div>
|
||||||
|
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
|
||||||
|
style={{width: '43%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-2">Träume von Verkehr und Menschenmengen</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm">
|
||||||
|
Stadtbewohner träumen 43% häufiger von Verkehr, Menschenmengen und urbanen Umgebungen als
|
||||||
|
Menschen in ländlichen Gebieten. Ihre Träume enthalten auch mehr technologische Elemente und
|
||||||
|
soziale Interaktionen mit Fremden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Income Level */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-3 bg-emerald-500/20 rounded-full">
|
||||||
|
<FaMoneyBillWave className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Einkommensniveau</h3>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<div className="flex justify-between items-center mb-2">
|
||||||
|
<span className="text-sm font-bold">Höhere Einkommen:</span>
|
||||||
|
<span className="text-sm">-31%</span>
|
||||||
|
</div>
|
||||||
|
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-emerald-500 dark:bg-emerald-600 rounded-full"
|
||||||
|
style={{width: '31%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-2">Weniger Angstträume</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm">
|
||||||
|
Menschen mit höherem Einkommen berichten von 31% weniger Angstträumen im Vergleich zu
|
||||||
|
Personen mit niedrigerem Einkommen. Finanzielle Sicherheit korreliert mit positiveren
|
||||||
|
Traumthemen und besserer Schlafqualität.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Education Level */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-3 bg-amber-500/20 rounded-full">
|
||||||
|
<FaGraduationCap className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Bildungsgrad</h3>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<h4 className="font-bold mb-2 text-center">Komplexität der Traumnarration</h4>
|
||||||
|
<div className="flex items-center justify-center space-x-2">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="h-16 w-4 bg-gray-200 dark:bg-gray-700 rounded-t-full relative">
|
||||||
|
<div
|
||||||
|
className="absolute bottom-0 left-0 right-0 bg-amber-500 dark:bg-amber-600 rounded-t-full"
|
||||||
|
style={{height: '40%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-1">Grundschule</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="h-16 w-4 bg-gray-200 dark:bg-gray-700 rounded-t-full relative">
|
||||||
|
<div
|
||||||
|
className="absolute bottom-0 left-0 right-0 bg-amber-500 dark:bg-amber-600 rounded-t-full"
|
||||||
|
style={{height: '60%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-1">Sekundar</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="h-16 w-4 bg-gray-200 dark:bg-gray-700 rounded-t-full relative">
|
||||||
|
<div
|
||||||
|
className="absolute bottom-0 left-0 right-0 bg-amber-500 dark:bg-amber-600 rounded-t-full"
|
||||||
|
style={{height: '85%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-1">Universität</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm">
|
||||||
|
Universitätsabsolventen zeigen komplexere Traumnarrationen mit mehr Details, Charakteren und
|
||||||
|
Handlungssträngen. Bildung korreliert mit der Fähigkeit, Träume detaillierter zu erinnern
|
||||||
|
und zu beschreiben.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Environmental Factors */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Umweltfaktoren</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
{/* Air Quality */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('rose')}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-3 bg-rose-500/20 rounded-full">
|
||||||
|
<FaSmog className="text-rose-600 dark:text-rose-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Luftqualität</h3>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<div className="flex justify-between items-center mb-2">
|
||||||
|
<span className="text-sm font-bold">Schlechte Luftqualität:</span>
|
||||||
|
<span className="text-sm">+28%</span>
|
||||||
|
</div>
|
||||||
|
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div className="absolute top-0 left-0 h-full bg-rose-500 dark:bg-rose-600 rounded-full"
|
||||||
|
style={{width: '28%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-2">Mehr Albträume</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm">
|
||||||
|
Schlechte Luftqualität führt zu 28% mehr Albträumen und beeinträchtigt die Schlafqualität.
|
||||||
|
Studien zeigen, dass Luftverschmutzung die REM-Schlafphasen verkürzt und zu fragmentierteren
|
||||||
|
Träumen führt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Noise Level */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-3 bg-purple-500/20 rounded-full">
|
||||||
|
<FaVolumeUp className="text-purple-600 dark:text-purple-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Lärmpegel</h3>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<h4 className="font-bold mb-2 text-center">REM-Phasen Dauer</h4>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<div className="text-right w-1/2">
|
||||||
|
<p className="text-xs mb-1">Ruhige Umgebung</p>
|
||||||
|
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded-full relative">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 right-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
|
||||||
|
style={{width: '90%'}}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-1/2">
|
||||||
|
<p className="text-xs mb-1">Laute Umgebung</p>
|
||||||
|
<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded-full relative">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
|
||||||
|
style={{width: '60%'}}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm">
|
||||||
|
Städtische Lärmbelastung fragmentiert Träume durch kürzere REM-Phasen. Selbst wenn der Lärm
|
||||||
|
nicht zum Aufwachen führt, beeinflusst er die Traumkontinuität und -qualität negativ.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Light Pollution */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('violet')}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-3 bg-violet-500/20 rounded-full">
|
||||||
|
<FaLightbulb className="text-violet-600 dark:text-violet-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Lichtverschmutzung</h3>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<h4 className="font-bold mb-2 text-center">Melatonin-Produktion</h4>
|
||||||
|
<div className="relative pt-1">
|
||||||
|
<div className="flex mb-2 items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<span
|
||||||
|
className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full bg-violet-200 text-violet-800">
|
||||||
|
Niedrig
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<span
|
||||||
|
className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full bg-violet-200 text-violet-800">
|
||||||
|
Hoch
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200 dark:bg-gray-700">
|
||||||
|
<div style={{width: "30%"}}
|
||||||
|
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-violet-500 dark:bg-violet-600">
|
||||||
|
<span className="text-[0.5rem] text-white">Hohe Lichtverschmutzung</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200 dark:bg-gray-700">
|
||||||
|
<div style={{width: "75%"}}
|
||||||
|
className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-violet-500 dark:bg-violet-600">
|
||||||
|
<span className="text-[0.5rem] text-white">Geringe Lichtverschmutzung</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm">
|
||||||
|
Reduzierte Melatonin-Produktion durch Lichtverschmutzung beeinflusst die Traumintensität.
|
||||||
|
Menschen in Gebieten mit geringer Lichtverschmutzung berichten von lebhafteren und
|
||||||
|
intensiveren Träumen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Combined Impact */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Kombinierte Auswirkungen</h2>
|
||||||
|
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('pink-red')}>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold mb-4 dreamy-text">Optimale vs. Suboptimale Bedingungen</h3>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<h4 className="font-bold mb-2">Optimale Bedingungen</h4>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-1">
|
||||||
|
<li>Ruhige, natürliche Umgebung</li>
|
||||||
|
<li>Gute Luftqualität</li>
|
||||||
|
<li>Minimale Lichtverschmutzung</li>
|
||||||
|
<li>Finanzielle Sicherheit</li>
|
||||||
|
<li>Ausgewogene Work-Life-Balance</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Suboptimale Bedingungen</h4>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-1">
|
||||||
|
<li>Laute, urbane Umgebung</li>
|
||||||
|
<li>Schlechte Luftqualität</li>
|
||||||
|
<li>Hohe Lichtverschmutzung</li>
|
||||||
|
<li>Finanzielle Unsicherheit</li>
|
||||||
|
<li>Chronischer Stress</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold mb-4 dreamy-text">Auswirkungen auf Traumqualität</h3>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<h4 className="font-bold mb-2">Optimale Bedingungen führen zu:</h4>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-1">
|
||||||
|
<li>Längeren REM-Phasen</li>
|
||||||
|
<li>Lebhafteren Träumen</li>
|
||||||
|
<li>Besserer Traumerinnerung</li>
|
||||||
|
<li>Positiveren Traumthemen</li>
|
||||||
|
<li>Höherer Wahrscheinlichkeit für luzide Träume</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Suboptimale Bedingungen führen zu:</h4>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-1">
|
||||||
|
<li>Fragmentierten REM-Phasen</li>
|
||||||
|
<li>Häufigeren Albträumen</li>
|
||||||
|
<li>Schlechterer Traumerinnerung</li>
|
||||||
|
<li>Stressbeladenen Traumthemen</li>
|
||||||
|
<li>Unterbrochenem Schlaf</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm mt-6">
|
||||||
|
Die Kombination verschiedener Umwelt- und sozioökonomischer Faktoren hat einen kumulativen
|
||||||
|
Effekt auf die Traumqualität. Die Verbesserung einzelner Faktoren kann bereits zu einer
|
||||||
|
signifikanten Verbesserung der Traumqualität führen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Practical Tips */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Praktische Tipps für bessere Träume</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||||
|
<h3 className="text-lg font-bold mb-3 dreamy-text">Umweltfaktoren optimieren</h3>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-2">
|
||||||
|
<li>Verwende Verdunkelungsvorhänge, um Lichtverschmutzung zu reduzieren</li>
|
||||||
|
<li>Nutze Luftreiniger für bessere Luftqualität im Schlafzimmer</li>
|
||||||
|
<li>Setze Ohrstöpsel oder weißes Rauschen gegen Lärmbelästigung ein</li>
|
||||||
|
<li>Halte die Schlafzimmertemperatur zwischen 16-18°C</li>
|
||||||
|
<li>Vermeide blaues Licht von Bildschirmen mindestens eine Stunde vor dem Schlafengehen</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
|
||||||
|
<h3 className="text-lg font-bold mb-3 dreamy-text">Lebensstil-Anpassungen</h3>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-2">
|
||||||
|
<li>Etabliere eine regelmäßige Schlafenszeit und Aufwachzeit</li>
|
||||||
|
<li>Praktiziere Entspannungstechniken vor dem Schlafengehen</li>
|
||||||
|
<li>Führe ein Traumtagebuch, um die Traumerinnerung zu verbessern</li>
|
||||||
|
<li>Reduziere Stress durch regelmäßige Bewegung und Meditation</li>
|
||||||
|
<li>Vermeide schwere Mahlzeiten, Alkohol und Koffein vor dem Schlafengehen</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Links */}
|
||||||
|
<div className="flex flex-wrap justify-between items-center">
|
||||||
|
<NavLink to="/dreamarchive/cultural-landscapes" className="dreamy-card p-3 inline-flex items-center">
|
||||||
|
<span className="mr-2">←</span> Zurück zu Kulturellen Traumlandschaften
|
||||||
|
</NavLink>
|
||||||
|
<NavLink to="/dreamarchive/technology" className="dreamy-card p-3 inline-flex items-center">
|
||||||
|
Weiter zu Technologie & Traumforschung <span className="ml-2">→</span>
|
||||||
|
</NavLink>
|
||||||
|
</div>
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
565
src/pages/dreamarchive/ResearchLive.tsx
Normal file
565
src/pages/dreamarchive/ResearchLive.tsx
Normal file
@@ -0,0 +1,565 @@
|
|||||||
|
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
|
||||||
|
import {
|
||||||
|
FaCalendarAlt,
|
||||||
|
FaClipboardCheck,
|
||||||
|
FaFlask,
|
||||||
|
FaGlobeAmericas,
|
||||||
|
FaUniversity,
|
||||||
|
FaUserMd,
|
||||||
|
FaUsers,
|
||||||
|
FaVideo
|
||||||
|
} from 'react-icons/fa';
|
||||||
|
import {NavLink} from 'react-router-dom';
|
||||||
|
|
||||||
|
export default function ResearchLive() {
|
||||||
|
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<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">
|
||||||
|
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Traumforschung Live</h1>
|
||||||
|
<p className="text-lg sm:text-xl dreamy-text">Aktuelle Studien, Citizen Science und
|
||||||
|
Forscher-Interviews</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||||
|
style={{animationDelay: '0.2s'}}>
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||||
|
<h2 className="dream-title text-xl sm:text-2xl">Sei Teil der Traumforschung</h2>
|
||||||
|
</div>
|
||||||
|
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||||
|
Entdecke laufende Forschungsprojekte, nimm an Studien teil und lerne von führenden
|
||||||
|
Traumforschern aus der ganzen Welt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Current Studies */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Aktuelle Studien</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{/* Study 1 */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="p-3 bg-purple-500/20 rounded-full mr-4">
|
||||||
|
<FaFlask className="text-purple-600 dark:text-purple-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold dreamy-text">Traumkontinuität während der Pandemie</h3>
|
||||||
|
<p className="text-xs" style={getTextStyle('muted')}>Universität Zürich, Schweiz</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<div className="flex justify-between mb-2">
|
||||||
|
<span className="text-sm font-bold">Status:</span>
|
||||||
|
<span
|
||||||
|
className="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">Aktiv</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between mb-2">
|
||||||
|
<span className="text-sm font-bold">Teilnehmer:</span>
|
||||||
|
<span className="text-sm">1,245 / 2,000</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm font-bold">Enddatum:</span>
|
||||||
|
<span className="text-sm">31. Dezember 2024</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm mb-4">
|
||||||
|
Diese Langzeitstudie untersucht, wie sich Träume während und nach der COVID-19-Pandemie
|
||||||
|
verändert haben und ob Traumthemen mit realen Ereignissen korrelieren.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="w-full py-2 px-4 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors">
|
||||||
|
Teilnehmen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Study 2 */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="p-3 bg-blue-500/20 rounded-full mr-4">
|
||||||
|
<FaFlask className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold dreamy-text">Luzide Träume und Kreativität</h3>
|
||||||
|
<p className="text-xs" style={getTextStyle('muted')}>Stanford University, USA</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<div className="flex justify-between mb-2">
|
||||||
|
<span className="text-sm font-bold">Status:</span>
|
||||||
|
<span
|
||||||
|
className="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">Aktiv</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between mb-2">
|
||||||
|
<span className="text-sm font-bold">Teilnehmer:</span>
|
||||||
|
<span className="text-sm">876 / 1,000</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm font-bold">Enddatum:</span>
|
||||||
|
<span className="text-sm">15. März 2025</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm mb-4">
|
||||||
|
Diese Studie untersucht den Zusammenhang zwischen der Fähigkeit, luzide Träume zu erleben,
|
||||||
|
und kreativen Problemlösungsfähigkeiten im Wachzustand.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
|
||||||
|
Teilnehmen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
|
||||||
|
{/* Study 3 */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="p-3 bg-emerald-500/20 rounded-full mr-4">
|
||||||
|
<FaFlask className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold dreamy-text">Traumemotionen und mentale Gesundheit</h3>
|
||||||
|
<p className="text-xs" style={getTextStyle('muted')}>Universität Wien, Österreich</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<div className="flex justify-between mb-2">
|
||||||
|
<span className="text-sm font-bold">Status:</span>
|
||||||
|
<span
|
||||||
|
className="text-sm bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 px-2 py-0.5 rounded-full">Fast voll</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between mb-2">
|
||||||
|
<span className="text-sm font-bold">Teilnehmer:</span>
|
||||||
|
<span className="text-sm">1,890 / 2,000</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm font-bold">Enddatum:</span>
|
||||||
|
<span className="text-sm">30. September 2024</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm mb-4">
|
||||||
|
Diese Studie erforscht die Beziehung zwischen emotionalen Mustern in Träumen und
|
||||||
|
verschiedenen Aspekten der psychischen Gesundheit im Wachzustand.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="w-full py-2 px-4 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg transition-colors">
|
||||||
|
Teilnehmen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Study 4 */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="p-3 bg-amber-500/20 rounded-full mr-4">
|
||||||
|
<FaFlask className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold dreamy-text">Kulturübergreifende Traumsymbole</h3>
|
||||||
|
<p className="text-xs" style={getTextStyle('muted')}>University of Tokyo, Japan</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<div className="flex justify-between mb-2">
|
||||||
|
<span className="text-sm font-bold">Status:</span>
|
||||||
|
<span
|
||||||
|
className="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">Aktiv</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between mb-2">
|
||||||
|
<span className="text-sm font-bold">Teilnehmer:</span>
|
||||||
|
<span className="text-sm">3,456 / 10,000</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm font-bold">Enddatum:</span>
|
||||||
|
<span className="text-sm">31. Dezember 2025</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm mb-4">
|
||||||
|
Diese globale Studie sammelt Traumsymbole aus verschiedenen Kulturen, um universelle und
|
||||||
|
kulturspezifische Traumelemente zu identifizieren.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
className="w-full py-2 px-4 bg-amber-500 hover:bg-amber-600 text-white rounded-lg transition-colors">
|
||||||
|
Teilnehmen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Citizen Science */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Citizen Science: Mitmachen bei der
|
||||||
|
Traumforschung</h2>
|
||||||
|
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('violet')}>
|
||||||
|
<div className="flex items-center mb-6">
|
||||||
|
<div className="p-3 bg-violet-500/20 rounded-full mr-4">
|
||||||
|
<FaUsers className="text-violet-600 dark:text-violet-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold dreamy-text">Wie du zur Wissenschaft beitragen kannst</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||||
|
{/* Project 1 */}
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<div className="flex justify-center mb-3">
|
||||||
|
<div className="p-2 bg-violet-500/20 rounded-full">
|
||||||
|
<FaClipboardCheck className="text-violet-600 dark:text-violet-400" size={20}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4 className="font-bold mb-2 text-center">Globales Traumtagebuch</h4>
|
||||||
|
<p className="text-sm">
|
||||||
|
Teile deine Träume in der weltweit größten Traumdatenbank und hilf Forschern, Muster zu
|
||||||
|
erkennen.
|
||||||
|
</p>
|
||||||
|
<div className="mt-3 text-center">
|
||||||
|
<button
|
||||||
|
className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
|
||||||
|
Beitragen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Project 2 */}
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<div className="flex justify-center mb-3">
|
||||||
|
<div className="p-2 bg-violet-500/20 rounded-full">
|
||||||
|
<FaGlobeAmericas className="text-violet-600 dark:text-violet-400" size={20}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4 className="font-bold mb-2 text-center">Traumkarte</h4>
|
||||||
|
<p className="text-sm">
|
||||||
|
Hilf bei der Erstellung einer interaktiven Weltkarte, die zeigt, wie Träume je nach
|
||||||
|
Region variieren.
|
||||||
|
</p>
|
||||||
|
<div className="mt-3 text-center">
|
||||||
|
<button
|
||||||
|
className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
|
||||||
|
Beitragen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Project 3 */}
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<div className="flex justify-center mb-3">
|
||||||
|
<div className="p-2 bg-violet-500/20 rounded-full">
|
||||||
|
<FaCalendarAlt className="text-violet-600 dark:text-violet-400" size={20}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4 className="font-bold mb-2 text-center">30-Tage-Challenge</h4>
|
||||||
|
<p className="text-sm">
|
||||||
|
Nimm an der 30-Tage-Traumaufzeichnungs-Challenge teil und erhalte personalisierte
|
||||||
|
Analysen.
|
||||||
|
</p>
|
||||||
|
<div className="mt-3 text-center">
|
||||||
|
<button
|
||||||
|
className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
|
||||||
|
Beitragen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm">
|
||||||
|
Citizen Science-Projekte ermöglichen es jedem, zur Traumforschung beizutragen. Deine Teilnahme
|
||||||
|
hilft Wissenschaftlern, größere und vielfältigere Datensätze zu sammeln, was zu robusteren
|
||||||
|
Forschungsergebnissen führt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Researcher Interviews */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Forscher-Interviews</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{/* Interview 1 */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||||
|
<div className="flex items-start mb-4">
|
||||||
|
<div className="p-3 bg-blue-500/20 rounded-full mr-4 mt-1">
|
||||||
|
<FaUserMd className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold dreamy-text">Dr. Sarah Merton</h3>
|
||||||
|
<p className="text-xs mb-1" style={getTextStyle('muted')}>Harvard University, USA</p>
|
||||||
|
<p className="text-sm mb-3">Expertin für Traumkognition und neuronale Korrelate des
|
||||||
|
Träumens</p>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||||
|
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
className="w-12 h-12 rounded-full bg-blue-500/80 flex items-center justify-center cursor-pointer">
|
||||||
|
<div
|
||||||
|
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-1">
|
||||||
|
<li>Neueste Erkenntnisse zur Traumkognition</li>
|
||||||
|
<li>Wie das Gehirn Traumnarrative konstruiert</li>
|
||||||
|
<li>Die Rolle von REM-Schlaf bei der Gedächtniskonsolidierung</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Interview 2 */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
|
||||||
|
<div className="flex items-start mb-4">
|
||||||
|
<div className="p-3 bg-emerald-500/20 rounded-full mr-4 mt-1">
|
||||||
|
<FaUserMd className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold dreamy-text">Prof. Dr. Markus Weber</h3>
|
||||||
|
<p className="text-xs mb-1" style={getTextStyle('muted')}>Max-Planck-Institut,
|
||||||
|
Deutschland</p>
|
||||||
|
<p className="text-sm mb-3">Pionier in der Erforschung luzider Träume und
|
||||||
|
Traumkontrolle</p>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||||
|
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
className="w-12 h-12 rounded-full bg-emerald-500/80 flex items-center justify-center cursor-pointer">
|
||||||
|
<div
|
||||||
|
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-1">
|
||||||
|
<li>Techniken zur Induktion luzider Träume</li>
|
||||||
|
<li>Therapeutische Anwendungen von Traumkontrolle</li>
|
||||||
|
<li>Ethische Fragen in der Traummanipulation</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
|
||||||
|
{/* Interview 3 */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
|
||||||
|
<div className="flex items-start mb-4">
|
||||||
|
<div className="p-3 bg-amber-500/20 rounded-full mr-4 mt-1">
|
||||||
|
<FaUserMd className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold dreamy-text">Dr. Yuki Tanaka</h3>
|
||||||
|
<p className="text-xs mb-1" style={getTextStyle('muted')}>Kyoto University, Japan</p>
|
||||||
|
<p className="text-sm mb-3">Spezialistin für kulturelle Traumforschung und vergleichende
|
||||||
|
Traumanalyse</p>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||||
|
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
className="w-12 h-12 rounded-full bg-amber-500/80 flex items-center justify-center cursor-pointer">
|
||||||
|
<div
|
||||||
|
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-1">
|
||||||
|
<li>Kulturelle Unterschiede in Traumsymbolen</li>
|
||||||
|
<li>Einfluss von Mythen und Folklore auf Träume</li>
|
||||||
|
<li>Universelle vs. kulturspezifische Traumelemente</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Interview 4 */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('rose')}>
|
||||||
|
<div className="flex items-start mb-4">
|
||||||
|
<div className="p-3 bg-rose-500/20 rounded-full mr-4 mt-1">
|
||||||
|
<FaUserMd className="text-rose-600 dark:text-rose-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold dreamy-text">Dr. Elena Rodriguez</h3>
|
||||||
|
<p className="text-xs mb-1" style={getTextStyle('muted')}>Universidad de Barcelona,
|
||||||
|
Spanien</p>
|
||||||
|
<p className="text-sm mb-3">Forscherin im Bereich Traumtherapie und emotionale
|
||||||
|
Verarbeitung</p>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||||
|
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
className="w-12 h-12 rounded-full bg-rose-500/80 flex items-center justify-center cursor-pointer">
|
||||||
|
<div
|
||||||
|
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-1">
|
||||||
|
<li>Traumbasierte Therapieansätze</li>
|
||||||
|
<li>Verarbeitung traumatischer Erlebnisse im Traum</li>
|
||||||
|
<li>Emotionale Regulation durch gezielte Traumarbeit</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Upcoming Events */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Kommende Veranstaltungen</h2>
|
||||||
|
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th className="text-left p-2">Datum</th>
|
||||||
|
<th className="text-left p-2">Veranstaltung</th>
|
||||||
|
<th className="text-left p-2">Ort</th>
|
||||||
|
<th className="text-left p-2">Typ</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr className="bg-white/10 dark:bg-black/10">
|
||||||
|
<td className="p-2">15. Juli 2024</td>
|
||||||
|
<td className="p-2">Internationale Konferenz für Traumforschung</td>
|
||||||
|
<td className="p-2">Berlin, Deutschland</td>
|
||||||
|
<td className="p-2">
|
||||||
|
<span
|
||||||
|
className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs px-2 py-0.5 rounded-full">
|
||||||
|
Konferenz
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className="p-2">3. August 2024</td>
|
||||||
|
<td className="p-2">Workshop: Luzide Träume für Anfänger</td>
|
||||||
|
<td className="p-2">Online</td>
|
||||||
|
<td className="p-2">
|
||||||
|
<span
|
||||||
|
className="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs px-2 py-0.5 rounded-full">
|
||||||
|
Workshop
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="bg-white/10 dark:bg-black/10">
|
||||||
|
<td className="p-2">22. September 2024</td>
|
||||||
|
<td className="p-2">Symposium: Träume und psychische Gesundheit</td>
|
||||||
|
<td className="p-2">Wien, Österreich</td>
|
||||||
|
<td className="p-2">
|
||||||
|
<span
|
||||||
|
className="bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-200 text-xs px-2 py-0.5 rounded-full">
|
||||||
|
Symposium
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td className="p-2">10. Oktober 2024</td>
|
||||||
|
<td className="p-2">Webinar: Neueste Technologien in der Traumforschung</td>
|
||||||
|
<td className="p-2">Online</td>
|
||||||
|
<td className="p-2">
|
||||||
|
<span
|
||||||
|
className="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-xs px-2 py-0.5 rounded-full">
|
||||||
|
Webinar
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="bg-white/10 dark:bg-black/10">
|
||||||
|
<td className="p-2">5. November 2024</td>
|
||||||
|
<td className="p-2">Traumforschung 2025: Ausblick und Trends</td>
|
||||||
|
<td className="p-2">Paris, Frankreich</td>
|
||||||
|
<td className="p-2">
|
||||||
|
<span
|
||||||
|
className="bg-rose-100 dark:bg-rose-900 text-rose-800 dark:text-rose-200 text-xs px-2 py-0.5 rounded-full">
|
||||||
|
Konferenz
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 text-center">
|
||||||
|
<button
|
||||||
|
className="py-2 px-4 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors">
|
||||||
|
Alle Veranstaltungen anzeigen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Newsletter Signup */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||||
|
<div className="flex flex-col md:flex-row items-center">
|
||||||
|
<div className="mb-4 md:mb-0 md:mr-6 md:w-2/3">
|
||||||
|
<h3 className="text-xl font-bold mb-2 dreamy-text">Bleib auf dem Laufenden</h3>
|
||||||
|
<p className="text-sm mb-4">
|
||||||
|
Abonniere unseren Newsletter, um über neue Studien, Veranstaltungen und Durchbrüche in
|
||||||
|
der Traumforschung informiert zu bleiben.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="Deine E-Mail-Adresse"
|
||||||
|
className="flex-1 p-2 rounded-lg mb-2 sm:mb-0 sm:mr-2 focus:outline-none"
|
||||||
|
style={{backgroundColor: 'var(--container)', color: 'var(--text)'}}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
className="py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
|
||||||
|
Abonnieren
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="md:w-1/3 flex justify-center">
|
||||||
|
<div className="p-4 bg-blue-500/20 rounded-full">
|
||||||
|
<FaUniversity className="text-blue-600 dark:text-blue-400" size={48}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Links */}
|
||||||
|
<div className="flex flex-wrap justify-between items-center">
|
||||||
|
<NavLink to="/dreamarchive/user-dreams" className="dreamy-card p-3 inline-flex items-center">
|
||||||
|
<span className="mr-2">←</span> Zurück zu Deinen Träumen im Kontext
|
||||||
|
</NavLink>
|
||||||
|
<NavLink to="/dreamarchive" className="dreamy-card p-3 inline-flex items-center">
|
||||||
|
Zurück zur Übersicht <span className="ml-2">→</span>
|
||||||
|
</NavLink>
|
||||||
|
</div>
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
396
src/pages/dreamarchive/Technology.tsx
Normal file
396
src/pages/dreamarchive/Technology.tsx
Normal file
@@ -0,0 +1,396 @@
|
|||||||
|
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
|
||||||
|
import {FaBrain, FaChartBar, FaChartPie, FaLaptopCode, FaMicrochip, FaRobot, FaVrCardboard} from 'react-icons/fa';
|
||||||
|
import {NavLink} from 'react-router-dom';
|
||||||
|
|
||||||
|
export default function Technology() {
|
||||||
|
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<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">
|
||||||
|
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Technologie &
|
||||||
|
Traumforschung</h1>
|
||||||
|
<p className="text-lg sm:text-xl dreamy-text">Neueste Entwicklungen in der
|
||||||
|
Traumforschungstechnologie</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||||
|
style={{animationDelay: '0.2s'}}>
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||||
|
<h2 className="dream-title text-xl sm:text-2xl">Die Zukunft der Traumforschung</h2>
|
||||||
|
</div>
|
||||||
|
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||||
|
Entdecke bahnbrechende Technologien, die uns helfen, Träume besser zu verstehen, zu analysieren
|
||||||
|
und sogar zu steuern.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Latest Developments */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Neueste Entwicklungen</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
{/* EEG-based Dream Detection */}
|
||||||
|
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('blue')}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-4 bg-blue-500/20 rounded-full">
|
||||||
|
<FaBrain className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">EEG-basierte Traumdetektion</h3>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<div className="flex justify-between items-center mb-2">
|
||||||
|
<span className="text-sm font-bold">Genauigkeit:</span>
|
||||||
|
<span className="text-sm">85%</span>
|
||||||
|
</div>
|
||||||
|
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
|
||||||
|
style={{width: '85%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-2 text-center">Automatische Traumerkennung</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Moderne EEG-Technologie kann mit 85% Genauigkeit erkennen, wann eine Person träumt und in
|
||||||
|
welcher Traumphase sie sich befindet. Dies ermöglicht gezielte Traumforschung und
|
||||||
|
-intervention.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* DreamNet Framework */}
|
||||||
|
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('purple')}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-4 bg-purple-500/20 rounded-full">
|
||||||
|
<FaLaptopCode className="text-purple-600 dark:text-purple-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">DreamNet-Framework</h3>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<div className="flex justify-between items-center mb-2">
|
||||||
|
<span className="text-sm font-bold">Genauigkeit:</span>
|
||||||
|
<span className="text-sm">99%</span>
|
||||||
|
</div>
|
||||||
|
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
|
||||||
|
style={{width: '99%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-2 text-center">Multimodale Traumanalyse</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Das DreamNet-Framework kombiniert EEG-Daten, Augenbewegungen, Herzfrequenz und
|
||||||
|
Körpertemperatur für eine präzise Traumanalyse. KI-Algorithmen interpretieren diese Daten
|
||||||
|
und erstellen detaillierte Traumprofile.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Lucid Dreaming Control */}
|
||||||
|
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('emerald')}>
|
||||||
|
<div className="flex justify-center mb-4">
|
||||||
|
<div className="p-4 bg-emerald-500/20 rounded-full">
|
||||||
|
<FaVrCardboard className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">Lucid Dreaming Control</h3>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<h4 className="font-bold mb-2 text-center">Virtuelle Autosteuerung</h4>
|
||||||
|
<p className="text-xs text-center mb-2">durch Traum-Muskelbewegungen</p>
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<div
|
||||||
|
className="relative w-24 h-24 rounded-full bg-emerald-100 dark:bg-emerald-900 flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
className="absolute w-16 h-16 rounded-full bg-emerald-200 dark:bg-emerald-800 flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
className="absolute w-8 h-8 rounded-full bg-emerald-500 dark:bg-emerald-600 flex items-center justify-center text-white">
|
||||||
|
<FaRobot size={16}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Bahnbrechende Forschung ermöglicht es Personen in luziden Träumen, durch subtile
|
||||||
|
Augenbewegungen und Muskelsignale mit der Außenwelt zu kommunizieren und sogar virtuelle
|
||||||
|
Objekte zu steuern.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dream Type Classification */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Traumtypen-Klassifikation</h2>
|
||||||
|
|
||||||
|
<div className="dreamy-card rounded-xl p-6" style={getBackgroundStyle('rose')}>
|
||||||
|
<div className="flex items-center justify-center mb-6">
|
||||||
|
<div className="p-4 bg-rose-500/20 rounded-full mr-3">
|
||||||
|
<FaChartPie className="text-rose-600 dark:text-rose-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold dreamy-text">Globale Verteilung der Traumtypen</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||||
|
<div>
|
||||||
|
{/* Pie Chart Visualization (Mock) */}
|
||||||
|
<div className="relative w-full aspect-square max-w-xs mx-auto">
|
||||||
|
<div className="absolute inset-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
|
||||||
|
|
||||||
|
{/* Angstträume: 34% */}
|
||||||
|
<div className="absolute inset-0 rounded-full bg-red-500 dark:bg-red-600" style={{
|
||||||
|
clipPath: 'polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 75% 75%)'
|
||||||
|
}}></div>
|
||||||
|
|
||||||
|
{/* Soziale Träume: 28% */}
|
||||||
|
<div className="absolute inset-0 rounded-full bg-blue-500 dark:bg-blue-600" style={{
|
||||||
|
clipPath: 'polygon(50% 50%, 75% 75%, 50% 100%, 0% 100%, 0% 50%)'
|
||||||
|
}}></div>
|
||||||
|
|
||||||
|
{/* Sexuelle Träume: 12% */}
|
||||||
|
<div className="absolute inset-0 rounded-full bg-pink-500 dark:bg-pink-600" style={{
|
||||||
|
clipPath: 'polygon(50% 50%, 0% 50%, 0% 0%, 25% 0%)'
|
||||||
|
}}></div>
|
||||||
|
|
||||||
|
{/* Flugträume: 18% */}
|
||||||
|
<div className="absolute inset-0 rounded-full bg-purple-500 dark:bg-purple-600" style={{
|
||||||
|
clipPath: 'polygon(50% 50%, 25% 0%, 50% 0%)'
|
||||||
|
}}></div>
|
||||||
|
|
||||||
|
{/* Verfolgungsträume: 8% */}
|
||||||
|
<div className="absolute inset-0 rounded-full bg-orange-500 dark:bg-orange-600" style={{
|
||||||
|
clipPath: 'polygon(50% 50%, 50% 100%, 25% 100%)'
|
||||||
|
}}></div>
|
||||||
|
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
className="w-16 h-16 rounded-full bg-white dark:bg-gray-900 flex items-center justify-center text-sm font-bold">
|
||||||
|
100%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-4 h-4 bg-red-500 dark:bg-red-600 mr-2"></div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm font-bold">Angstträume</span>
|
||||||
|
<span className="text-sm">34%</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-red-500 dark:bg-red-600 rounded-full"
|
||||||
|
style={{width: '34%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-1" style={getTextStyle('muted')}>Global
|
||||||
|
durchschnittlich</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2"></div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm font-bold">Soziale Träume</span>
|
||||||
|
<span className="text-sm">28%</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
|
||||||
|
style={{width: '28%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-1" style={getTextStyle('muted')}>Kulturelle
|
||||||
|
Variationen</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-4 h-4 bg-pink-500 dark:bg-pink-600 mr-2"></div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm font-bold">Sexuelle Träume</span>
|
||||||
|
<span className="text-sm">12%</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-pink-500 dark:bg-pink-600 rounded-full"
|
||||||
|
style={{width: '12%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-1" style={getTextStyle('muted')}>Altersabhängig</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-4 h-4 bg-purple-500 dark:bg-purple-600 mr-2"></div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm font-bold">Flugträume</span>
|
||||||
|
<span className="text-sm">18%</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
|
||||||
|
style={{width: '18%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-1"
|
||||||
|
style={getTextStyle('muted')}>Persönlichkeitsabhängig</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-4 h-4 bg-orange-500 dark:bg-orange-600 mr-2"></div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-sm font-bold">Verfolgungsträume</span>
|
||||||
|
<span className="text-sm">8%</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-orange-500 dark:bg-orange-600 rounded-full"
|
||||||
|
style={{width: '8%'}}></div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs mt-1" style={getTextStyle('muted')}>Stresskorreliert</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm" style={getTextStyle('normal')}>
|
||||||
|
Moderne KI-Algorithmen können Träume basierend auf ihrem Inhalt, emotionalen Ton und narrativen
|
||||||
|
Strukturen klassifizieren. Diese Klassifikation hilft Forschern, Muster in großen
|
||||||
|
Traumdatensätzen zu erkennen und kulturübergreifende Vergleiche anzustellen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Future Technologies */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Zukunftstechnologien</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{/* Dream Recording */}
|
||||||
|
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('violet')}>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="p-4 bg-violet-500/20 rounded-full mr-4">
|
||||||
|
<FaMicrochip className="text-violet-600 dark:text-violet-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold dreamy-text">Traumaufzeichnung</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<h4 className="font-bold mb-2">Visuelle Rekonstruktion von Träumen</h4>
|
||||||
|
<p className="text-sm">
|
||||||
|
Forscher arbeiten an Technologien, die visuelle Inhalte aus Träumen rekonstruieren
|
||||||
|
können, indem sie Hirnaktivitätsmuster in visuelle Darstellungen umwandeln.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Die nächste Generation von Traumtechnologie zielt darauf ab, Träume als Video aufzuzeichnen
|
||||||
|
und abzuspielen. Erste Prototypen können bereits einfache visuelle Elemente aus der
|
||||||
|
Hirnaktivität während des Träumens rekonstruieren.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dream Sharing */}
|
||||||
|
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('amber')}>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="p-4 bg-amber-500/20 rounded-full mr-4">
|
||||||
|
<FaChartBar className="text-amber-600 dark:text-amber-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold dreamy-text">Traumaustausch</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<h4 className="font-bold mb-2">Gemeinsame Traumwelten</h4>
|
||||||
|
<p className="text-sm">
|
||||||
|
Experimentelle Technologien ermöglichen es zwei oder mehr Personen, ähnliche
|
||||||
|
Traumszenarien zu erleben und in begrenztem Umfang miteinander zu interagieren.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm flex-grow" style={getTextStyle('normal')}>
|
||||||
|
Forscher entwickeln Methoden, um Träume zwischen Individuen zu teilen oder sogar gemeinsame
|
||||||
|
Traumwelten zu schaffen. Diese Technologie könnte revolutionäre Anwendungen in Therapie,
|
||||||
|
Kreativität und zwischenmenschlicher Kommunikation haben.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ethical Considerations */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Ethische Überlegungen</h2>
|
||||||
|
|
||||||
|
<div className="dreamy-card rounded-xl p-6" style={getBackgroundStyle('blue')}>
|
||||||
|
<h3 className="text-xl font-bold mb-4 dreamy-text">Wichtige ethische Fragen</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Privatsphäre</h4>
|
||||||
|
<p className="text-sm">
|
||||||
|
Wem gehören Traumdaten? Wie können wir sicherstellen, dass die intimsten Gedanken einer
|
||||||
|
Person geschützt bleiben?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Manipulation</h4>
|
||||||
|
<p className="text-sm">
|
||||||
|
Könnte Traumtechnologie für Werbung, Propaganda oder andere Formen der Beeinflussung
|
||||||
|
missbraucht werden?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Identität</h4>
|
||||||
|
<p className="text-sm">
|
||||||
|
Wie beeinflussen Traummanipulationen unser Selbstverständnis und unsere persönliche
|
||||||
|
Entwicklung?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Zugang</h4>
|
||||||
|
<p className="text-sm">
|
||||||
|
Wer hat Zugang zu fortschrittlicher Traumtechnologie? Könnte dies zu neuen sozialen
|
||||||
|
Ungleichheiten führen?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm" style={getTextStyle('normal')}>
|
||||||
|
Mit der rasanten Entwicklung der Traumtechnologie müssen wir auch die ethischen Implikationen
|
||||||
|
sorgfältig betrachten. Forscher und Ethiker arbeiten gemeinsam an Richtlinien für
|
||||||
|
verantwortungsvolle Traumforschung und -technologie.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Links */}
|
||||||
|
<div className="flex flex-wrap justify-between items-center">
|
||||||
|
<NavLink to="/dreamarchive/living-conditions"
|
||||||
|
className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
|
||||||
|
style={getBackgroundStyle('emerald')}>
|
||||||
|
<span className="mr-2">←</span> Zurück zu Lebensbedingungen & Traumqualität
|
||||||
|
</NavLink>
|
||||||
|
<NavLink to="/dreamarchive/user-dreams"
|
||||||
|
className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
|
||||||
|
style={getBackgroundStyle('rose')}>
|
||||||
|
Weiter zu Deinen Träumen im Kontext <span className="ml-2">→</span>
|
||||||
|
</NavLink>
|
||||||
|
</div>
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
427
src/pages/dreamarchive/UserDreams.tsx
Normal file
427
src/pages/dreamarchive/UserDreams.tsx
Normal file
@@ -0,0 +1,427 @@
|
|||||||
|
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
|
||||||
|
import {FaChartLine, FaRegCommentDots, FaRegLightbulb, FaUser} from 'react-icons/fa';
|
||||||
|
import {NavLink} from 'react-router-dom';
|
||||||
|
import {MockUserMap} from '../../data/MockUsers';
|
||||||
|
|
||||||
|
export default function UserDreams() {
|
||||||
|
const currentUser = MockUserMap.get(4); // Neo Quantum
|
||||||
|
|
||||||
|
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<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">
|
||||||
|
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Deine Träume im
|
||||||
|
Kontext</h1>
|
||||||
|
<p className="text-lg sm:text-xl dreamy-text">Einordnung deiner Träume in die globale
|
||||||
|
Traumdatenbank</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||||
|
style={{animationDelay: '0.2s'}}>
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||||
|
<h2 className="dream-title text-xl sm:text-2xl">Hallo, {currentUser?.name || 'Neo'}</h2>
|
||||||
|
</div>
|
||||||
|
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||||
|
Entdecke, wie sich deine Träume im Vergleich zur globalen Traumdatenbank verhalten und wie sie
|
||||||
|
sich im Laufe der Zeit verändert haben.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* User Profile Overview */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Dein Traumprofil</h2>
|
||||||
|
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
|
||||||
|
<div className="flex flex-col md:flex-row items-center mb-6">
|
||||||
|
<div className="mb-4 md:mb-0 md:mr-6">
|
||||||
|
{currentUser?.profilePicture ? (<img
|
||||||
|
src={`/assets/profiles/${currentUser.profilePicture}`}
|
||||||
|
alt={currentUser.name}
|
||||||
|
className="w-24 h-24 rounded-full object-cover border-4 border-purple-300 dark:border-purple-700"
|
||||||
|
/>) : (<div
|
||||||
|
className="w-24 h-24 rounded-full bg-purple-200 dark:bg-purple-800 flex items-center justify-center">
|
||||||
|
<FaUser className="text-purple-600 dark:text-purple-400" size={32}/>
|
||||||
|
</div>)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center md:text-left">
|
||||||
|
<h3 className="text-xl font-bold mb-2 dreamy-text">{currentUser?.name || 'Neo Quantum'}</h3>
|
||||||
|
<p className="text-sm mb-1" style={getTextStyle()}>Traumaufzeichnungen: <span
|
||||||
|
className="font-bold">42</span></p>
|
||||||
|
<p className="text-sm mb-1" style={getTextStyle()}>Aktive Tage: <span
|
||||||
|
className="font-bold">{currentUser?.streakDays || 14}</span></p>
|
||||||
|
<p className="text-sm" style={getTextStyle()}>Mitglied seit: <span
|
||||||
|
className="font-bold">März 2023</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 mt-4 md:mt-0 md:ml-6">
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2 text-center">Deine häufigsten Traumthemen</h4>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between text-xs mb-1">
|
||||||
|
<span>Fliegen</span>
|
||||||
|
<span>32%</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
|
||||||
|
style={{width: '32%'}}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between text-xs mb-1">
|
||||||
|
<span>Technologie</span>
|
||||||
|
<span>28%</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
|
||||||
|
style={{width: '28%'}}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between text-xs mb-1">
|
||||||
|
<span>Kreativität</span>
|
||||||
|
<span>24%</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-emerald-500 dark:bg-emerald-600 rounded-full"
|
||||||
|
style={{width: '24%'}}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Global Comparison */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Vergleich mit globaler Traumdatenbank</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{/* Dream Emotions */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="p-3 bg-blue-500/20 rounded-full mr-4">
|
||||||
|
<FaRegCommentDots className="text-blue-600 dark:text-blue-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold dreamy-text">Traumemotionen</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between items-center mb-1">
|
||||||
|
<span className="text-sm font-bold">Positive Emotionen</span>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span className="text-xs mr-2">Global: 42%</span>
|
||||||
|
<span className="text-xs font-bold">Du: 58%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-gray-400 dark:bg-gray-600 rounded-full"
|
||||||
|
style={{width: '42%'}}></div>
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full border-r-2 border-white dark:border-gray-900"
|
||||||
|
style={{width: '58%'}}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between items-center mb-1">
|
||||||
|
<span className="text-sm font-bold">Negative Emotionen</span>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span className="text-xs mr-2">Global: 38%</span>
|
||||||
|
<span className="text-xs font-bold">Du: 22%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-gray-400 dark:bg-gray-600 rounded-full"
|
||||||
|
style={{width: '38%'}}></div>
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-red-500 dark:bg-red-600 rounded-full border-r-2 border-white dark:border-gray-900"
|
||||||
|
style={{width: '22%'}}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between items-center mb-1">
|
||||||
|
<span className="text-sm font-bold">Neutrale Emotionen</span>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span className="text-xs mr-2">Global: 20%</span>
|
||||||
|
<span className="text-xs font-bold">Du: 20%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-gray-400 dark:bg-gray-600 rounded-full"
|
||||||
|
style={{width: '20%'}}></div>
|
||||||
|
<div
|
||||||
|
className="absolute top-0 left-0 h-full bg-yellow-500 dark:bg-yellow-600 rounded-full border-r-2 border-white dark:border-gray-900"
|
||||||
|
style={{width: '20%'}}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm mt-4">
|
||||||
|
Im Vergleich zum globalen Durchschnitt hast du deutlich mehr positive und weniger negative
|
||||||
|
Emotionen in deinen Träumen. Dies könnte auf ein höheres Wohlbefinden oder eine
|
||||||
|
optimistischere Grundeinstellung hindeuten.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dream Themes */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
|
||||||
|
<div className="flex items-center mb-4">
|
||||||
|
<div className="p-3 bg-emerald-500/20 rounded-full mr-4">
|
||||||
|
<FaRegLightbulb className="text-emerald-600 dark:text-emerald-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold dreamy-text">Traumthemen</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-3 rounded-lg text-center">
|
||||||
|
<h4 className="font-bold mb-1 text-sm">Deine Top-Themen</h4>
|
||||||
|
<ol className="text-xs text-left list-decimal list-inside">
|
||||||
|
<li>Fliegen (32%)</li>
|
||||||
|
<li>Technologie (28%)</li>
|
||||||
|
<li>Kreativität (24%)</li>
|
||||||
|
<li>Reisen (10%)</li>
|
||||||
|
<li>Musik (6%)</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-3 rounded-lg text-center">
|
||||||
|
<h4 className="font-bold mb-1 text-sm">Globale Top-Themen</h4>
|
||||||
|
<ol className="text-xs text-left list-decimal list-inside">
|
||||||
|
<li>Fallen (28%)</li>
|
||||||
|
<li>Verfolgung (22%)</li>
|
||||||
|
<li>Fliegen (18%)</li>
|
||||||
|
<li>Prüfungen (16%)</li>
|
||||||
|
<li>Verlust (14%)</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-3 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2 text-sm text-center">Einzigartige Aspekte deiner
|
||||||
|
Träume</h4>
|
||||||
|
<ul className="text-xs list-disc list-inside space-y-1">
|
||||||
|
<li>Deine Träume enthalten 55% mehr technologische Elemente als der Durchschnitt
|
||||||
|
</li>
|
||||||
|
<li>Du träumst 78% häufiger vom Fliegen als die meisten Menschen</li>
|
||||||
|
<li>Kreative Problemlösung tritt in deinen Träumen 3x häufiger auf</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm mt-4">
|
||||||
|
Deine Traumthemen unterscheiden sich deutlich vom globalen Durchschnitt. Während viele
|
||||||
|
Menschen von Ängsten und Sorgen träumen, fokussieren sich deine Träume mehr auf positive
|
||||||
|
Erfahrungen und kreative Exploration.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dream Changes Over Time */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Persönliche Traumveränderung über Zeit</h2>
|
||||||
|
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('rose')}>
|
||||||
|
<div className="flex items-center mb-6">
|
||||||
|
<div className="p-3 bg-rose-500/20 rounded-full mr-4">
|
||||||
|
<FaChartLine className="text-rose-600 dark:text-rose-400" size={28}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold dreamy-text">Entwicklung deiner Traumthemen</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Timeline Chart (Mock) */}
|
||||||
|
<div className="mb-6 overflow-x-auto">
|
||||||
|
<div className="min-w-[600px]">
|
||||||
|
<div className="relative h-60">
|
||||||
|
{/* X-Axis (Time) */}
|
||||||
|
<div
|
||||||
|
className="absolute bottom-0 left-0 right-0 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 flex justify-between text-xs"
|
||||||
|
style={getTextStyle('muted')}>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="mt-2">März 2023</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="mt-2">Juni 2023</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="mt-2">Sept 2023</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="mt-2">Dez 2023</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="mt-2">März 2024</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="mt-2">Heute</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Y-Axis (Percentage) */}
|
||||||
|
<div className="absolute top-0 bottom-0 left-0 w-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="absolute top-0 bottom-0 left-0 flex flex-col justify-between text-xs"
|
||||||
|
style={getTextStyle('muted')}>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="absolute left-0 top-0 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="transform -translate-y-1/2 -translate-x-full mr-1">100%</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="absolute left-0 top-1/4 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="transform -translate-y-1/2 -translate-x-full mr-1">75%</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="absolute left-0 top-2/4 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="transform -translate-y-1/2 -translate-x-full mr-1">50%</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="absolute left-0 top-3/4 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="transform -translate-y-1/2 -translate-x-full mr-1">25%</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
className="absolute left-0 bottom-0 w-2 h-px bg-gray-300 dark:bg-gray-600"></div>
|
||||||
|
<div className="transform -translate-y-1/2 -translate-x-full mr-1">0%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Data Lines */}
|
||||||
|
{/* Fliegen (purple) */}
|
||||||
|
<svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||||
|
<polyline
|
||||||
|
points="0,70 20,65 40,50 60,40 80,30 100,20"
|
||||||
|
fill="none"
|
||||||
|
stroke="#8b5cf6"
|
||||||
|
strokeWidth="2"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Technologie (blue) */}
|
||||||
|
<svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||||
|
<polyline
|
||||||
|
points="0,80 20,75 40,70 60,60 80,50 100,30"
|
||||||
|
fill="none"
|
||||||
|
stroke="#3b82f6"
|
||||||
|
strokeWidth="2"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Kreativität (green) */}
|
||||||
|
<svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
|
||||||
|
<polyline
|
||||||
|
points="0,85 20,80 40,75 60,65 80,55 100,35"
|
||||||
|
fill="none"
|
||||||
|
stroke="#10b981"
|
||||||
|
strokeWidth="2"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Legend */}
|
||||||
|
<div className="absolute top-0 right-0 bg-white/50 dark:bg-black/50 p-2 rounded-lg">
|
||||||
|
<div className="flex items-center mb-1">
|
||||||
|
<div className="w-3 h-3 bg-purple-500 mr-2"></div>
|
||||||
|
<span className="text-xs">Fliegen</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center mb-1">
|
||||||
|
<div className="w-3 h-3 bg-blue-500 mr-2"></div>
|
||||||
|
<span className="text-xs">Technologie</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-3 h-3 bg-emerald-500 mr-2"></div>
|
||||||
|
<span className="text-xs">Kreativität</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
|
||||||
|
<h4 className="font-bold mb-2">Schlüsselerkenntnisse</h4>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-1">
|
||||||
|
<li>Deine Träume vom Fliegen haben im letzten Jahr um 60% zugenommen</li>
|
||||||
|
<li>Technologiebezogene Träume sind seit Dezember 2023 um 40% gestiegen</li>
|
||||||
|
<li>Kreative Elemente in deinen Träumen haben sich verdoppelt</li>
|
||||||
|
<li>Angstträume haben um 45% abgenommen</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm">
|
||||||
|
Die Analyse deiner Traumdaten über Zeit zeigt eine deutliche Entwicklung hin zu positiveren und
|
||||||
|
kreativeren Traumthemen. Diese Veränderung könnte mit persönlichem Wachstum, veränderten
|
||||||
|
Lebensumständen oder bewusster Traumarbeit zusammenhängen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Personalized Recommendations */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Personalisierte Empfehlungen</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('violet')}>
|
||||||
|
<h3 className="text-lg font-bold mb-3 dreamy-text">Für deine Traumarbeit</h3>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-2">
|
||||||
|
<li>Experimentiere mit luziden Träumen, da deine Flugträume ein guter Ausgangspunkt sind
|
||||||
|
</li>
|
||||||
|
<li>Führe ein detaillierteres Traumtagebuch, um Muster in deinen technologiebezogenen
|
||||||
|
Träumen zu erkennen
|
||||||
|
</li>
|
||||||
|
<li>Probiere geführte Meditationen vor dem Schlafengehen, um deine kreativen Träume zu
|
||||||
|
verstärken
|
||||||
|
</li>
|
||||||
|
<li>Teile deine Traumgeschichten in der Community, um neue Perspektiven zu gewinnen</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
|
||||||
|
<h3 className="text-lg font-bold mb-3 dreamy-text">Basierend auf deinem Profil</h3>
|
||||||
|
<ul className="list-disc list-inside text-sm space-y-2">
|
||||||
|
<li>Entdecke unsere Sammlung von Flugträumen aus verschiedenen Kulturen</li>
|
||||||
|
<li>Nimm an unserem Workshop "Kreativität im Traum" teil</li>
|
||||||
|
<li>Teste unsere neue Funktion zur Traumvisualisierung</li>
|
||||||
|
<li>Verbinde dich mit anderen Träumern, die ähnliche Interessen an Technologie und
|
||||||
|
Innovation haben
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Links */}
|
||||||
|
<div className="flex flex-wrap justify-between items-center">
|
||||||
|
<NavLink to="/dreamarchive/technology" className="dreamy-card p-3 inline-flex items-center">
|
||||||
|
<span className="mr-2">←</span> Zurück zu Technologie & Traumforschung
|
||||||
|
</NavLink>
|
||||||
|
<NavLink to="/dreamarchive/research-live" className="dreamy-card p-3 inline-flex items-center">
|
||||||
|
Weiter zu Traumforschung Live <span className="ml-2">→</span>
|
||||||
|
</NavLink>
|
||||||
|
</div>
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
242
src/pages/dreamarchive/WorldwideEvents.tsx
Normal file
242
src/pages/dreamarchive/WorldwideEvents.tsx
Normal file
@@ -0,0 +1,242 @@
|
|||||||
|
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
|
||||||
|
import {FaFire, FaFlag, FaVirus} from 'react-icons/fa';
|
||||||
|
import {NavLink} from 'react-router-dom';
|
||||||
|
|
||||||
|
export default function WorldwideEvents() {
|
||||||
|
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<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">
|
||||||
|
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Weltweite Ereignisse &
|
||||||
|
Traumreaktionen</h1>
|
||||||
|
<p className="text-lg sm:text-xl dreamy-text">Korrelation zwischen globalen Ereignissen und
|
||||||
|
Traummustern</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
|
||||||
|
style={{animationDelay: '0.2s'}}>
|
||||||
|
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
|
||||||
|
<h2 className="dream-title text-xl sm:text-2xl">Signifikante Ereignisse 2020-2025</h2>
|
||||||
|
</div>
|
||||||
|
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
|
||||||
|
Entdecke, wie weltweite Ereignisse wie die COVID-19 Pandemie, Klimawandel-Ereignisse und
|
||||||
|
geopolitische Spannungen die Traumlandschaft beeinflusst haben.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Interactive Timeline (Mock) */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Zeitlinie der Ereignisse</h2>
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-purple-300 dark:bg-purple-700 opacity-50"></div>
|
||||||
|
|
||||||
|
{/* Timeline Items */}
|
||||||
|
<div className="relative z-10">
|
||||||
|
{/* 2020 */}
|
||||||
|
<div className="mb-12 flex items-center">
|
||||||
|
<div className="w-1/2 pr-8 text-right">
|
||||||
|
<h3 className="text-xl font-bold mb-2 dreamy-text">2020</h3>
|
||||||
|
<p className="text-sm" style={getTextStyle()}>Beginn der COVID-19 Pandemie</p>
|
||||||
|
</div>
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
|
||||||
|
style={{background: 'var(--accent-gradient)'}}></div>
|
||||||
|
<div className="w-1/2 pl-8">
|
||||||
|
<div className="dreamy-card p-4">
|
||||||
|
<p className="text-sm mb-2" style={getTextStyle()}>40% Anstieg der Traumhäufigkeit
|
||||||
|
während Lockdown</p>
|
||||||
|
<p className="text-xs" style={getTextStyle('muted')}>Basierend auf 1.622 Teilnehmern
|
||||||
|
in Italien</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 2021 */}
|
||||||
|
<div className="mb-12 flex items-center">
|
||||||
|
<div className="w-1/2 pr-8 text-right">
|
||||||
|
<div className="dreamy-card p-4">
|
||||||
|
<p className="text-sm mb-2" style={getTextStyle()}>23% mehr Träume über Feuer und
|
||||||
|
Flucht</p>
|
||||||
|
<p className="text-xs" style={getTextStyle('muted')}>Korreliert mit Waldbränden in
|
||||||
|
Australien und Kalifornien</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
|
||||||
|
style={{background: 'var(--accent-gradient)'}}></div>
|
||||||
|
<div className="w-1/2 pl-8">
|
||||||
|
<h3 className="text-xl font-bold mb-2 dreamy-text">2021</h3>
|
||||||
|
<p className="text-sm" style={getTextStyle()}>Klimawandel-Ereignisse intensivieren
|
||||||
|
sich</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 2022 */}
|
||||||
|
<div className="mb-12 flex items-center">
|
||||||
|
<div className="w-1/2 pr-8 text-right">
|
||||||
|
<h3 className="text-xl font-bold mb-2 dreamy-text">2022</h3>
|
||||||
|
<p className="text-sm" style={getTextStyle()}>Beginn des Konflikts in der Ukraine</p>
|
||||||
|
</div>
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
|
||||||
|
style={{background: 'var(--accent-gradient)'}}></div>
|
||||||
|
<div className="w-1/2 pl-8">
|
||||||
|
<div className="dreamy-card p-4">
|
||||||
|
<p className="text-sm mb-2" style={getTextStyle()}>Erhöhte Angstträume in
|
||||||
|
europäischen Nachbarländern</p>
|
||||||
|
<p className="text-xs" style={getTextStyle('muted')}>Besonders in Polen, Rumänien
|
||||||
|
und den baltischen Staaten</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 2023 */}
|
||||||
|
<div className="mb-12 flex items-center">
|
||||||
|
<div className="w-1/2 pr-8 text-right">
|
||||||
|
<div className="dreamy-card p-4">
|
||||||
|
<p className="text-sm mb-2" style={getTextStyle()}>Verstärkte Träume über Jobverlust
|
||||||
|
und finanzielle Sorgen</p>
|
||||||
|
<p className="text-xs" style={getTextStyle('muted')}>Korreliert mit globaler
|
||||||
|
Wirtschaftskrise</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
|
||||||
|
style={{background: 'var(--accent-gradient)'}}></div>
|
||||||
|
<div className="w-1/2 pl-8">
|
||||||
|
<h3 className="text-xl font-bold mb-2 dreamy-text">2023</h3>
|
||||||
|
<p className="text-sm" style={getTextStyle()}>Wirtschaftliche Instabilität</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 2024-2025 */}
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-1/2 pr-8 text-right">
|
||||||
|
<h3 className="text-xl font-bold mb-2 dreamy-text">2024-2025</h3>
|
||||||
|
<p className="text-sm" style={getTextStyle()}>Extreme Wetterereignisse nehmen zu</p>
|
||||||
|
</div>
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
|
||||||
|
style={{background: 'var(--accent-gradient)'}}></div>
|
||||||
|
<div className="w-1/2 pl-8">
|
||||||
|
<div className="dreamy-card p-4">
|
||||||
|
<p className="text-sm mb-2" style={getTextStyle()}>Verstärkte Wasserträume in von
|
||||||
|
Überschwemmungen betroffenen Regionen</p>
|
||||||
|
<p className="text-xs" style={getTextStyle('muted')}>Hitzewellen führten zu
|
||||||
|
fragmentierten Träumen durch veränderte Schlafmuster</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Detailed Event Sections */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold mb-6 dream-title">Detaillierte Ereignisanalyse</h2>
|
||||||
|
|
||||||
|
{/* COVID-19 Section */}
|
||||||
|
<div className="dreamy-card mb-8 p-6" style={getBackgroundStyle('purple')}>
|
||||||
|
<div className="flex flex-col md:flex-row items-center mb-4">
|
||||||
|
<div className="p-3 bg-purple-500/20 rounded-full mb-4 md:mb-0 md:mr-4">
|
||||||
|
<FaVirus className="text-purple-600 dark:text-purple-400" size={32}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold dreamy-text">COVID-19 Pandemie (2020-2022)</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Traumhäufigkeit</h4>
|
||||||
|
<p className="text-sm">1.622 Teilnehmer in Italien berichteten einen 40% Anstieg der
|
||||||
|
Traumhäufigkeit während des Lockdowns</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Emotionale Auswirkungen</h4>
|
||||||
|
<p className="text-sm">Negative Traumemotionen korrelierten direkt mit
|
||||||
|
Schlafqualitätsverschlechterung</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Häufige Themen</h4>
|
||||||
|
<p className="text-sm">Isolation, Krankheit, Verlust von Kontrolle</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm">
|
||||||
|
Die COVID-19 Pandemie hatte einen signifikanten Einfluss auf die Traumlandschaft weltweit.
|
||||||
|
Studien zeigen, dass Menschen während der Lockdown-Phasen häufiger und intensiver träumten,
|
||||||
|
wobei negative Emotionen und Ängste dominierten.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Climate Change Section */}
|
||||||
|
<div className="dreamy-card mb-8 p-6" style={getBackgroundStyle('emerald')}>
|
||||||
|
<div className="flex flex-col md:flex-row items-center mb-4">
|
||||||
|
<div className="p-3 bg-emerald-500/20 rounded-full mb-4 md:mb-0 md:mr-4">
|
||||||
|
<FaFire className="text-emerald-600 dark:text-emerald-400" size={32}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold dreamy-text">Klimawandel-Ereignisse (2021-2025)</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Waldbrände</h4>
|
||||||
|
<p className="text-sm">Waldbrände in Australien/Kalifornien führten zu 23% mehr Träumen über
|
||||||
|
Feuer und Flucht</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Überschwemmungen</h4>
|
||||||
|
<p className="text-sm">Überschwemmungen in Europa führten zu verstärkten Wasserträumen in
|
||||||
|
betroffenen Regionen</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Hitzewellen</h4>
|
||||||
|
<p className="text-sm">Veränderte Schlafmuster durch Hitzewellen führten zu fragmentierten
|
||||||
|
Träumen</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm">
|
||||||
|
Klimawandel-Ereignisse spiegeln sich deutlich in den Traummustern wider. Besonders bemerkenswert
|
||||||
|
ist, dass Menschen in direkt betroffenen Regionen häufiger von den spezifischen
|
||||||
|
Naturkatastrophen träumen, die sie erlebt haben.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Geopolitical Tensions Section */}
|
||||||
|
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
|
||||||
|
<div className="flex flex-col md:flex-row items-center mb-4">
|
||||||
|
<div className="p-3 bg-blue-500/20 rounded-full mb-4 md:mb-0 md:mr-4">
|
||||||
|
<FaFlag className="text-blue-600 dark:text-blue-400" size={32}/>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold dreamy-text">Geopolitische Spannungen (2022-2025)</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Konflikt in der Ukraine</h4>
|
||||||
|
<p className="text-sm">Erhöhte Angstträume in europäischen Nachbarländern, besonders in
|
||||||
|
Polen, Rumänien und den baltischen Staaten</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
|
||||||
|
<h4 className="font-bold mb-2">Wirtschaftskrise</h4>
|
||||||
|
<p className="text-sm">Verstärkte Träume über Jobverlust und finanzielle Sorgen,
|
||||||
|
korrelierend mit globaler wirtschaftlicher Instabilität</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm">
|
||||||
|
Geopolitische Spannungen und Konflikte haben einen messbaren Einfluss auf die Traumlandschaft,
|
||||||
|
wobei die Nähe zum Konfliktgebiet die Intensität der Traumreaktionen beeinflusst.
|
||||||
|
Wirtschaftliche Unsicherheit spiegelt sich in Träumen über finanzielle Sorgen wider.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Links */}
|
||||||
|
<div className="flex flex-wrap justify-between items-center">
|
||||||
|
<NavLink to="/dreamarchive" className="dreamy-card p-3 inline-flex items-center">
|
||||||
|
<span className="mr-2">←</span> Zurück zur Übersicht
|
||||||
|
</NavLink>
|
||||||
|
<NavLink to="/dreamarchive/cultural-landscapes" className="dreamy-card p-3 inline-flex items-center">
|
||||||
|
Weiter zu Kulturellen Traumlandschaften <span className="ml-2">→</span>
|
||||||
|
</NavLink>
|
||||||
|
</div>
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user