332 lines
19 KiB
TypeScript
332 lines
19 KiB
TypeScript
import {FaCity, FaGraduationCap, FaLightbulb, FaMoneyBillWave, FaSmog, FaVolumeUp} from 'react-icons/fa';
|
|
import HeroSection from '../../components/dreamarchive/HeroSection';
|
|
import SectionHeader from '../../components/dreamarchive/SectionHeader';
|
|
import DreamyCard from '../../components/dreamarchive/DreamyCard';
|
|
import IconWithBackground from '../../components/dreamarchive/IconWithBackground';
|
|
|
|
export default function LivingConditions() {
|
|
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
|
{/* Hero Section */}
|
|
<HeroSection
|
|
containerTitle="Wie unsere Umgebung unsere Träume formt"
|
|
description="Entdecke, wie sozioökonomische Faktoren und Umweltbedingungen die Qualität, Intensität und Inhalte unserer Träume beeinflussen."
|
|
/>
|
|
|
|
{/* Socioeconomic Factors */}
|
|
<div className="mb-12">
|
|
<SectionHeader title="Sozioökonomische Faktoren"/>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{/* Urban vs Rural */}
|
|
<DreamyCard color="blue">
|
|
<div className="flex justify-center mb-4">
|
|
<IconWithBackground icon={<FaCity/>} color="blue"/>
|
|
</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>
|
|
</DreamyCard>
|
|
|
|
{/* Income Level */}
|
|
<DreamyCard color="emerald">
|
|
<div className="flex justify-center mb-4">
|
|
<IconWithBackground icon={<FaMoneyBillWave/>} color="emerald"/>
|
|
</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>
|
|
</DreamyCard>
|
|
|
|
{/* Education Level */}
|
|
<DreamyCard color="amber">
|
|
<div className="flex justify-center mb-4">
|
|
<IconWithBackground icon={<FaGraduationCap/>} color="amber"/>
|
|
</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>
|
|
</DreamyCard>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Environmental Factors */}
|
|
<div className="mb-12">
|
|
<SectionHeader title="Umweltfaktoren"/>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{/* Air Quality */}
|
|
<DreamyCard color="rose">
|
|
<div className="flex justify-center mb-4">
|
|
<IconWithBackground icon={<FaSmog/>} color="rose"/>
|
|
</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>
|
|
</DreamyCard>
|
|
|
|
{/* Noise Level */}
|
|
<DreamyCard color="purple">
|
|
<div className="flex justify-center mb-4">
|
|
<IconWithBackground icon={<FaVolumeUp/>} color="purple"/>
|
|
</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>
|
|
</DreamyCard>
|
|
|
|
{/* Light Pollution */}
|
|
<DreamyCard color="violet">
|
|
<div className="flex justify-center mb-4">
|
|
<IconWithBackground icon={<FaLightbulb/>} color="violet"/>
|
|
</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>
|
|
</DreamyCard>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Combined Impact */}
|
|
<div className="mb-12">
|
|
<SectionHeader title="Kombinierte Auswirkungen"/>
|
|
|
|
<DreamyCard color="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>
|
|
</DreamyCard>
|
|
</div>
|
|
|
|
{/* Practical Tips */}
|
|
<div className="mb-12">
|
|
<SectionHeader title="Praktische Tipps für bessere Träume"/>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<DreamyCard color="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>
|
|
</DreamyCard>
|
|
|
|
<DreamyCard color="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>
|
|
</DreamyCard>
|
|
</div>
|
|
</div>
|
|
</div>);
|
|
}
|