366 lines
21 KiB
TypeScript
366 lines
21 KiB
TypeScript
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>);
|
|
} |