expanded and updated README.md to include detailed project overview, features breakdown, technical stack, usage guide, project structure, and educational context for improved clarity and documentation quality.

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>

README.md

@@ -1,92 +1,269 @@
-<img src="https://r2cdn.perplexity.ai/pplx-full-logo-primary-dark%402x.png" class="logo" width="120"/>
+# REMind - Dream Analysis & VR Experience Platform
 
-# REMind (Mockup Demo)
+![Project Status](https://img.shields.io/badge/Status-University%20Project%20Demo-orange)
+![License](https://img.shields.io/badge/License-AGPL--3.0-blue)
+![TypeScript](https://img.shields.io/badge/TypeScript-95.2%25-blue)
 
-🚧 **This is a MOCKUP / DEMO APPLICATION for a university project – no real backend, AI features, or data storage.** 🚧
+> **🚧 IMPORTANT: This is a MOCKUP/DEMO APPLICATION for a university project**  
+> **No real backend, AI features, or data storage. All functionality is simulated for demonstration purposes.**
 
-REMind is an interactive, front-end prototype that showcases dream journaling, AI-powered analysis (simulated), and immersive VR demonstrations. Built with React, TypeScript, Vite, and Tailwind CSS, it’s designed for demos and concept validation only.
+## Project Overview
 
-## Features (all mockup/demo only)
+REMind is an innovative interactive prototype that explores the intersection of dream analysis, artificial intelligence,
+and virtual reality. The application demonstrates how modern technology could revolutionize dream journaling and
+interpretation through immersive experiences and intelligent analysis.
 
-- **(Mockup)** Dream Journal
+**Project Aim:** To showcase the potential of combining dream journaling with AI-powered analysis and VR visualization,
-  Record dreams as text entries, voice memos, or sketches—UI only, no persistence.
+creating an engaging platform for understanding the subconscious mind and exploring the societal implications of dream
-- **(Mockup)** AI Analysis
+research.
-  Simulated “Here the AI would analyze your dream…” step with instant, hard-coded interpretations, symbol recognition, and emotion tagging.
-- **(Mockup)** Personal Archive
-  Browse and filter past mock entries by date, symbols, emotions, or tags.
-- **(Mockup)** Statistics \& Trends
-  Visualize frequent symbols, emotional patterns, and simulated sleep-cycle correlations using dummy data.
-- **(Mockup)** VR Dreamscapes
-  Enter 3D scenes built with React Three Fiber—explore thematic environments (labyrinths, dark rooms) in browser-based VR mode.
-- **Responsive Design**
-  Works on desktop browsers(design optimized for mobile) and mobile devices. Ideal for QR-code launches at demos.
 
-## Tech Stack
+## ✨ Key Features
 
-- **Framework:** React + TypeScript
+### 🌙 Multi-Modal Dream Recording
-- **Bundler:** Vite
-- **Styling:** Tailwind CSS
-- **Routing:** React Router Dom
-- **Icons:** React Icons
-- **3D \& VR:** @react-three/fiber
-- **Linting:** ESLint
 
-## Getting Started
+- **Text Input**: Write detailed dream descriptions with rich formatting
+- **Voice Recording**: Record dream narratives with audio transcription
+- **Image Upload**: Upload dream sketches, drawings, or related images
+- **Biometric Integration**: Simulate EEG, heart rate, and movement data from sleep tracking devices
 
-> **Note:** This repository contains only a front-end prototype with hard-coded mock data. There is no production backend or AI service.
+### 🤖 AI-Powered Analysis (Simulated)
 
-1. Clone the repo
+- **Symbol Recognition**: Identify and categorize dream symbols
+- **Emotion Detection**: Analyze emotional patterns and mood indicators
+- **Interpretation Engine**: Generate personalized dream interpretations
+- **Pattern Analysis**: Detect recurring themes and symbols across dreams
 
-```bash
+### 🎮 VR Dreamscapes
-git clone https://gitea.puchstein.bayern/mpuchstein/REMind.git
-cd REMind
-```
 
-2. Install dependencies
+- **3D Visualization**: Transform dreams into immersive 3D environments
+- **Neural Network Visualization**: Interactive neural network representations for biometric data
+- **VR Experience**: WebXR-enabled virtual reality exploration
+- **Responsive Controls**: Support for both VR headsets and desktop interaction
 
-```bash
+### 📊 Advanced Analytics
-npm install
-```
 
-3. Run development server
+- **EEG Visualization**: Real-time brainwave pattern charts (Alpha, Beta, Theta, Delta)
+- **Vital Signs Monitoring**: Heart rate and HRV trend analysis
+- **Movement Tracking**: Sleep movement pattern visualization
+- **Statistical Dashboard**: Comprehensive dream pattern analysis
 
-```bash
+### 🗂️ Dream Archive & Management
-npm run dev
-```
 
-Open `http://localhost:5173` in your browser. 4. Build for production (static demo)
+- **Personal Library**: Organized collection of all dream entries
+- **Search & Filter**: Advanced filtering by date, symbols, emotions, and tags
+- **Social Features**: Share dreams with friends and community
+- **Daily Highlights**: Curated dream insights and patterns
 
-```bash
+### 🌐 Community Features
-npm run build
-npm run preview
-```
 
-## Project Structure
+- **Dream Archive**: Explore categorized dream collections
+- **Research Integration**: Live research data visualization
+- **Cultural Landscapes**: Dreams categorized by cultural themes
+- **Worldwide Events**: Global dream pattern analysis
+
+## 🛠️ Technology Stack
+
+### Frontend Framework
+
+- **React 19.1.0** - Modern React with latest features
+- **TypeScript** - Type-safe development
+- **Vite 7.0.0** - Fast build tool and development server
+
+### Styling & UI
+
+- **Tailwind CSS 4.1.11** - Utility-first CSS framework
+- **CSS Variables** - Dynamic theming system
+- **Responsive Design** - Mobile-first approach
+
+### 3D & VR
+
+- **Three.js 0.178.0** - 3D graphics library
+- **@react-three/fiber 9.2.0** - React Three.js renderer
+- **@react-three/drei 10.5.1** - Three.js helpers
+- **@react-three/xr 6.6.19** - WebXR integration
+- **webxr-polyfill 2.0.3** - VR compatibility
+
+### Data Visualization
+
+- **D3.js 7.9.0** - Advanced data visualization
+- **Custom Chart Components** - EEG, vitals, and movement charts
+
+### Navigation & Routing
+
+- **React Router DOM 7.6.3** - Client-side routing
+- **React Icons 5.5.0** - Comprehensive icon library
+
+### Development Tools
+
+- **ESLint** - Code linting and formatting
+- **TypeScript ESLint** - TypeScript-specific linting
+- **Vite Plugin React** - React integration
+
+## 📁 Project Structure
 
 ```
-.
+REMind/
-├── public/              # Static assets
+├── public/                    # Static assets (favicon, etc.)
 ├── src/
-│   ├── assets/          # Images, fonts
+│   ├── assets/               # Images, logos, fonts
-│   ├── components/      # Reusable React components
+│   ├── components/           # Reusable UI components
-│   ├── data/            # Mock data (dream entries, analysis)
+│   │   ├── DreamCard.tsx     # Dream display component
-│   ├── pages/           # Route-driven pages
+│   │   ├── DreamRecord.tsx   # Dream recording interface
-│   ├── types/           # TypeScript types/interfaces
+│   │   ├── DreamVR.tsx       # VR visualization component
-│   ├── App.tsx          # Root component
+│   │   ├── DreamCharts.tsx   # Data visualization components
-│   ├── index.css        # Tailwind setup
+│   │   ├── Navbar.tsx        # Navigation component
-│   └── main.tsx         # Entry point
+│   │   └── ...
-├── index.html           # HTML template
+│   ├── data/                 # Mock data for demonstration
-├── package.json         # Scripts & dependencies
+│   │   ├── MockDreams.ts     # Sample dream entries
-├── tsconfig.app.json    # TS config for app
+│   │   ├── MockUsers.ts      # User data
-├── vite.config.ts       # Vite config
+│   │   └── ...
-└── README.md            # This file
+│   ├── pages/                # Route-driven page components
+│   │   ├── Home.tsx          # Main dashboard
+│   │   ├── Feed.tsx          # Dream feed
+│   │   ├── DreamPage.tsx     # Individual dream view
+│   │   ├── Overview.tsx      # Landing page
+│   │   └── dreamarchive/     # Archive pages
+│   ├── types/                # TypeScript type definitions
+│   │   ├── Dream.ts          # Dream data structures
+│   │   └── User.ts           # User data structures
+│   ├── utils/                # Utility functions
+│   ├── styles/               # Styling utilities
+│   ├── App.tsx               # Root component
+│   ├── main.tsx              # Application entry point
+│   └── index.css             # Global styles
+├── docs/                     # Documentation
+│   └── poster.pdf            # Project presentation poster
+├── package.json              # Dependencies and scripts
+├── tsconfig.app.json         # TypeScript configuration
+├── vite.config.ts            # Vite configuration
+└── README.md                 # This file
 ```
 
-## Usage \& Demo
+## 🚀 Getting Started
 
-- **Start Dream Journal** — click “🌙 Lass die Magie beginnen” to open the mock dream entry form.
+### Prerequisites
-- **AI Analysis** — submit an entry to see the “mock” interpretation card.
-- **Browse Archive** — filter mock entries by symbol, emotion, or date.
-- **VR Mode** — click VR Demo to load an immersive 3D scene in your browser.
 
-**Reminder:** REMind is a design-and-concept prototype only. Enjoy exploring the features—no real data or AI integration under the hood!
+- Node.js 18+
+- npm or yarn package manager
+
+### Installation
+
+1. **Clone the repository**
+   ```bash
+   git clone https://gitea.puchstein.bayern/mpuchstein/REMind.git
+   cd REMind
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+3. **Start development server**
+   ```bash
+   npm run dev
+   ```
+
+4. **Open in browser**
+   ```
+   http://localhost:5173
+   ```
+
+### Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run lint` - Run ESLint
+
+## 🎯 Usage Guide
+
+### Getting Started
+
+1. **Landing Page**: Visit the overview page to understand the application concept
+2. **Begin Journey**: Click "Lass die Magie beginnen" to start the dream recording experience
+3. **Record Dreams**: Use various input methods (text, voice, image, biometric)
+4. **AI Analysis**: View simulated AI interpretations and insights
+5. **VR Experience**: Explore dreams in virtual reality environments
+6. **Archive Exploration**: Browse and filter through dream collections
+
+### Key Navigation
+
+- **Home** (`/home`) - Personal dashboard with recent dreams
+- **Feed** (`/feed`) - Community dream sharing
+- **Record** (`/record`) - Dream input interface
+- **Dream Archive** (`/dreamarchive`) - Categorized dream collections
+- **Profile** (`/profile`) - User settings and statistics
+
+### Input Types
+
+- **Text**: Write detailed dream descriptions
+- **Audio**: Record voice memos with transcription
+- **Image**: Upload dream-related visuals
+- **Chip**: Biometric data from sleep tracking devices
+
+## 🔮 Demo Features
+
+### Simulated AI Analysis
+
+- **Symbol Recognition**: Identifies dream symbols like "water," "flying," "animals"
+- **Emotion Tagging**: Categorizes emotions as "fear," "joy," "anxiety," "peace"
+- **Interpretation**: Generates psychological insights and meanings
+- **Pattern Detection**: Highlights recurring themes across dreams
+
+### VR Visualization
+
+- **Neural Networks**: Interactive 3D representations of brain activity
+- **Dreamscapes**: Immersive environments based on dream content
+- **Data Visualization**: 3D charts and graphs for biometric data
+- **WebXR Support**: Compatible with VR headsets and desktop browsers
+
+### Data Analytics
+
+- **EEG Patterns**: Brainwave analysis during sleep (Alpha, Beta, Theta, Delta)
+- **Vital Signs**: Heart rate and heart rate variability trends
+- **Movement Data**: Sleep movement and restlessness patterns
+- **Statistical Insights**: Long-term pattern analysis and correlations
+
+## ⚠️ Important Notes
+
+### Assets Not Included
+
+- **Media Files**: Dream images, audio files, and videos are not included in the repository
+- **Mock Data**: All displayed content uses placeholder data for demonstration
+- **External Resources**: Some images and media are referenced but not stored in the repository
+
+### Limitations
+
+- **No Backend**: All data is stored locally in browser memory
+- **No AI Integration**: Analysis results are pre-generated mock responses
+- **No Data Persistence**: Data is lost when browser is refreshed
+- **Demo Purpose Only**: Not intended for production use
+
+## 🎓 Educational Context
+
+This project was developed as a university demonstration to explore:
+
+- **Human-Computer Interaction**: Innovative interfaces for dream recording
+- **Data Visualization**: Advanced techniques for complex data representation
+- **Virtual Reality**: Immersive experiences for psychological content
+- **AI Integration**: Simulated machine learning for content analysis
+- **User Experience**: Intuitive design for sensitive personal data
+
+## 🤝 Contributing
+
+This is a university project demo and not actively maintained for production use. However, feedback and suggestions are
+welcome for educational purposes.
+
+## 📄 License
+
+This project is licensed under the AGPL-3.0 License - see the LICENSE file for details.
+
+## 🔗 Repository
+
+[View on Gitea](https://gitea.puchstein.bayern/mpuchstein/REMind)
+
+---
+
+**Disclaimer**: REMind is a prototype demonstration created for educational purposes. All AI features, data analysis,
+and interpretations are simulated and should not be used for actual psychological or medical analysis.

package.json

@@ -10,20 +10,30 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-three/drei": "^10.5.1",
+    "@react-three/fiber": "^9.2.0",
+    "@react-three/xr": "^6.6.19",
     "@tailwindcss/vite": "^4.1.11",
+    "d3": "^7.9.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.6.3",
     "react-slick": "^0.30.3",
     "slick-carousel": "^1.8.1",
-    "tailwindcss": "^4.1.11"
+    "tailwindcss": "^4.1.11",
+    "three": "^0.178.0",
+    "webxr-polyfill": "^2.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",
+    "@types/d3": "^7.4.3",
+    "@types/node": "^24.0.14",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/react-slick": "^0.23.13",
+    "@types/three": "^0.178.1",
+    "@types/webxr": "^0.5.22",
     "@vitejs/plugin-react": "^4.5.2",
     "eslint": "^9.29.0",
     "eslint-plugin-react-hooks": "^5.2.0",

src/App.css

@@ -97,3 +97,37 @@
     box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(255, 255, 255, 0.3);
     opacity: 1;
 }
+
+/* Carousel controls styling */
+.carousel-container .slick-prev,
+.carousel-container .slick-next {
+    z-index: 10;
+    width: 40px;
+    height: 40px;
+    background: rgba(166, 77, 255, 0.7);
+    border-radius: 50%;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    transition: all 0.3s ease;
+}
+
+.carousel-container .slick-prev {
+    left: 20px;
+}
+
+.carousel-container .slick-next {
+    right: 20px;
+}
+
+.carousel-container .slick-prev:hover,
+.carousel-container .slick-next:hover {
+    background: rgba(166, 77, 255, 0.9);
+}
+
+.carousel-container .slick-prev:before,
+.carousel-container .slick-next:before {
+    font-size: 20px;
+    opacity: 1;
+}

src/App.tsx

@@ -4,84 +4,21 @@ import Navbar from './components/Navbar';
 import TopBar from './components/TopBar';
 import SplashScreen from './components/SplashScreen';
 import {BrowserRouter, Route, Routes, useLocation} from 'react-router-dom';
-import {formatDateSimple} from './utils/DateUtils';
 import Feed from "./pages/Feed.tsx";
 import DreamPage from "./pages/DreamPage.tsx";
 import ProfilePage from "./pages/ProfilePage.tsx";
 import Home from "./pages/Home.tsx";
 import Overview from "./pages/Overview.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 
+import {DreamRecord} from "./components/DreamRecord.tsx";
-                        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() {
     const [isLoading, setIsLoading] = useState(true);
@@ -97,12 +34,20 @@ export default function App() {
     return (
         <div className="App">
             <BrowserRouter>
+                <ScrollToTop/>
                 <AppContent/>
             </BrowserRouter>
         </div>
     );
 }
 
+function Record() {
+    return (
+        <div className="page p-4 space-y-6">
+            <DreamRecord/>
+        </div>)
+}
+
 // Separate component to use useLocation hook
 function AppContent() {
     const location = useLocation();
@@ -119,7 +64,14 @@ function AppContent() {
                         <Route path="/home" element={<Home/>}/>
                         <Route path="/feed" element={<Feed/>}/>
                         <Route path="/chip" element={<ChipOverview/>}/>
-                        <Route path="/archive" element={<Archive/>}/>
+                        <Route path="/record" element={<Record/>}/>
+                        <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="/dream/:id" element={<DreamPage/>}/>
                     </Routes>

src/assets/logotext_dark.svg

@@ -0,0 +1,21 @@
+<svg width="400" height="120" viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0" stop-color="#a64dff"/>
+            <stop offset="100" stop-color="#6a0dad"/>
+        </linearGradient>
+        <mask id="moonMask">
+            <circle cx="60" cy="60" r="50" fill="white"/>
+            <circle cx="75" cy="40" r="45" fill="black"/>
+        </mask>
+        <style type="text/css">
+            @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&amp;display=swap');
+        </style>
+    </defs>
+    <circle cx="60" cy="60" r="60" fill="url(#moonGradient)" mask="url(#moonMask)"/>
+    <text x="250" y="60%" dominant-baseline="middle" text-anchor="middle"
+          font-family="'Raleway', sans-serif" font-size="70" fill="black" letter-spacing="2"
+          style="text-shadow: 0 0 5px rgba(0,0,0,0.3);">
+        REMind
+    </text>
+</svg>

src/components/ChipCard.tsx

@@ -3,7 +3,7 @@ import {NavLink} from 'react-router-dom';
 
 export const ChipCard: React.FC = () => {
     return (
-        <NavLink to="/"
+        <NavLink to="/chip"
                  className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] animate-fadeIn rounded-lg mb-4 floating">
             <div
                 className="p-4 backdrop-blur-sm rounded-lg"

src/components/DreamCard.tsx

@@ -5,6 +5,7 @@ import {NavLink} from "react-router-dom";
 import {useEffect, useState} from "react";
 import {getTextStyle} from '../styles/StyleUtils';
 import {formatDateWithTime} from '../utils/DateUtils';
+import {FaMicrochip} from 'react-icons/fa6';
 
 interface DreamCardProps {
     dream: Dream;
@@ -24,11 +25,17 @@ export default function DreamCard({dream, user, animationDelay = 0}: DreamCardPr
     }, [animationDelay]);
 
     return (<NavLink key={dream.id} to={`/dream/${dream.id}`}>
-        <li className={`dreamy-card backdrop-blur-md mb-4 transition-all duration-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}
+        <li className={`dreamy-card backdrop-blur-md mb-4 transition-all duration-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'} relative`}
             style={{
                 background: 'var(--purple-gradient)',
                 animationDelay: `${animationDelay * 0.2}s`
             }}>
+            {dream.input.inputType === 'chip' && (
+                <div className="absolute top-6 right-10 w-10 h-10 flex items-center justify-center rounded-full"
+                     style={{background: 'var(--accent-gradient)', boxShadow: '0 0 5px var(--shadow)'}}>
+                    <FaMicrochip className="w-6 h-6 md:w-8 md:h-8 text-pink-300 opacity-90 hover:opacity-100"/>
+                </div>
+            )}
             <div className="flex rounded items-center mb-4">
                 <div className="relative">
                     <img
@@ -48,22 +55,25 @@ export default function DreamCard({dream, user, animationDelay = 0}: DreamCardPr
             <p className="mt-2 line-clamp-2 text-left" style={getTextStyle()}>
                 {(dream.input.inputType === 'text' && dream.input.input)
                     || (dream.input.inputType === 'audio' && dream.input.transcript)
-                    || (dream.input.inputType === 'image' && dream.input.description)}
+                    || (dream.input.inputType === 'image' && dream.input.description)
+                    || (dream.input.inputType === 'chip' && dream.input.text)}
             </p>
             <div className="flex justify-between items-center mt-4">
                 <p className="timestamp text-left" style={getTextStyle('muted')}>
                     {formatDateWithTime(dream.date)}
                 </p>
                 <div className="flex space-x-2">
-                    {/* Display dream type as a tag */}
+                    {/* Display dream tags */}
-                    <span className="px-2 py-1 text-xs rounded-full"
+                    {dream.tags.map((tag, index) => (
-                          style={{
+                        <span key={index} className="px-2 py-1 text-xs rounded-full"
-                              background: 'var(--accent-gradient)',
+                              style={{
-                              color: 'white',
+                                  background: 'var(--accent-gradient)',
-                              boxShadow: '0 2px 5px var(--shadow)'
+                                  color: 'white',
-                          }}>
+                                  boxShadow: '0 2px 5px var(--shadow)'
-                        {dream.input.inputType}
+                              }}>
-                    </span>
+                            {tag}
+                        </span>
+                    ))}
                 </div>
             </div>
         </li>

src/components/DreamCardCompact.tsx

@@ -2,6 +2,7 @@ import {NavLink} from 'react-router-dom';
 import {formatDateSimple} from '../utils/DateUtils';
 import Dream from '../types/Dream';
 import User from '../types/User';
+import {FaMicrochip} from 'react-icons/fa6';
 
 interface DreamCardCompactProps {
     dream: Dream;
@@ -22,9 +23,15 @@ export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCa
                     boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.2)',
                     border: '1px solid rgba(166, 77, 255, 0.1)'
                 }}>
-                <div className="flex items-center justify-between mb-1">
+                {dream.input.inputType === 'chip' && (
+                    <div className="absolute bottom-2 right-2 w-10 h-10 flex items-center justify-center rounded-full"
+                         style={{background: 'var(--accent-gradient)', boxShadow: '0 0 5px var(--shadow)'}}>
+                        <FaMicrochip className="w-6 h-6 md:w-8 md:h-8 text-pink-300 opacity-90 hover:opacity-100"/>
+                    </div>
+                )}
+                <div className="flex flex-col mb-1">
                     {showUser && user && (
-                        <div className="pl-2" style={{width: '120px', minWidth: '120px'}}>
+                        <div className="flex justify-center mb-2">
                             <div className="flex items-center">
                                 <div
                                     className="w-8 h-8 rounded-full mr-2 flex items-center justify-center overflow-hidden border-2"
@@ -46,14 +53,12 @@ export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCa
                             </div>
                         </div>
                     )}
-                    <div className="flex-1 text-center">
+                    <div className="text-center">
                         <h4 className="font-medium dream-title text-xs leading-tight">{dream.title}</h4>
                         <p className="text-xs text-[var(--text-muted)] mt-0.5 opacity-80">
                             {formatDateSimple(dream.date)}
                         </p>
                     </div>
-                    {/* Add an empty div to balance the layout when user is shown */}
-                    {showUser && user && <div className="invisible" style={{width: '120px', minWidth: '120px'}}></div>}
                 </div>
             </div>
         </NavLink>

src/components/DreamCharts.tsx

@@ -0,0 +1,350 @@
+import React, {useEffect, useRef} from 'react';
+import * as d3 from 'd3';
+import type {ChipInput} from '../types/Dream';
+
+// EEG Chart Component
+export const EEGChart: React.FC<{ chipInput: ChipInput }> = ({chipInput}) => {
+    const chartRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!chartRef.current) return;
+
+        const eegData = [
+            {name: 'Alpha', values: chipInput.eeg.alpha},
+            {name: 'Beta', values: chipInput.eeg.beta},
+            {name: 'Theta', values: chipInput.eeg.theta},
+            {name: 'Delta', values: chipInput.eeg.delta}
+        ];
+
+        // Function to render the chart
+        const renderChart = () => {
+            if (!chartRef.current) return;
+            
+            // Clear previous chart
+            d3.select(chartRef.current).selectAll('*').remove();
+
+            const margin = {top: 20, right: 20, bottom: 30, left: 50};
+            const width = chartRef.current.clientWidth - margin.left - margin.right;
+            const height = chartRef.current.clientHeight - margin.top - margin.bottom;
+
+            const svg = d3.select(chartRef.current)
+                .append('svg')
+                .attr('width', width + margin.left + margin.right)
+                .attr('height', height + margin.top + margin.bottom)
+                .append('g')
+                .attr('transform', `translate(${margin.left},${margin.top})`);
+
+            // X scale
+            const x = d3.scaleLinear()
+                .domain([0, chipInput.eeg.alpha.length - 1])
+                .range([0, width]);
+
+            // Y scale
+            const y = d3.scaleLinear()
+                .domain([0, d3.max(eegData.flatMap(d => d.values)) || 50])
+                .range([height, 0]);
+
+            // Line generator
+            const line = d3.line<number>()
+                .x((_d, i) => x(i))
+                .y(d => y(d))
+                .curve(d3.curveMonotoneX);
+
+            // Color scale
+            const color = d3.scaleOrdinal<string>()
+                .domain(eegData.map(d => d.name))
+                .range(['#8884d8', '#82ca9d', '#ffc658', '#ff8042']);
+
+            // Add X axis
+            svg.append('g')
+                .attr('transform', `translate(0,${height})`)
+                .call(d3.axisBottom(x))
+                .selectAll('text')
+                .style('fill', 'var(--text)');
+
+            // Add Y axis
+            svg.append('g')
+                .call(d3.axisLeft(y))
+                .selectAll('text')
+                .style('fill', 'var(--text)');
+
+            // Add lines
+            eegData.forEach(d => {
+                svg.append('path')
+                    .datum(d.values)
+                    .attr('fill', 'none')
+                    .attr('stroke', color(d.name))
+                    .attr('stroke-width', 1.5)
+                    .attr('d', line);
+            });
+
+            // Add legend at the top right
+            const legendItemHeight = 20; // Height allocated for each legend item
+
+            const legend = svg.append('g')
+                .attr('font-family', 'sans-serif')
+                .attr('font-size', 10)
+                .attr('text-anchor', 'end')
+                .selectAll('g')
+                .data(eegData)
+                .enter().append('g')
+                .attr('transform', (_d, i) => `translate(${width},${i * legendItemHeight + 10})`);
+
+            legend.append('rect')
+                .attr('x', -15)
+                .attr('width', 15)
+                .attr('height', 15)
+                .attr('fill', d => color(d.name));
+
+            legend.append('text')
+                .attr('x', -20)
+                .attr('y', 7.5)
+                .attr('dy', '0.32em')
+                .style('fill', 'var(--text)')
+                .text(d => d.name);
+        };
+
+        // Initial render
+        renderChart();
+
+        // Handle resize
+        const handleResize = () => {
+            if (!chartRef.current) return;
+            renderChart();
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [chipInput]);
+
+    return <div ref={chartRef} className="w-full h-64 border border-gray-200 rounded-lg p-2"></div>;
+};
+
+// Vitals Chart Component
+export const VitalsChart: React.FC<{ chipInput: ChipInput }> = ({chipInput}) => {
+    const chartRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!chartRef.current) return;
+
+        const vitalsData = [
+            {name: 'Puls', values: chipInput.puls},
+            {name: 'HRV', values: chipInput.hrv}
+        ];
+
+        // Function to render the chart
+        const renderChart = () => {
+            if (!chartRef.current) return;
+            
+            // Clear previous chart
+            d3.select(chartRef.current).selectAll('*').remove();
+
+            const margin = {top: 20, right: 20, bottom: 30, left: 50};
+            const width = chartRef.current.clientWidth - margin.left - margin.right;
+            const height = chartRef.current.clientHeight - margin.top - margin.bottom;
+
+            const svg = d3.select(chartRef.current)
+                .append('svg')
+                .attr('width', width + margin.left + margin.right)
+                .attr('height', height + margin.top + margin.bottom)
+                .append('g')
+                .attr('transform', `translate(${margin.left},${margin.top})`);
+
+            // X scale
+            const x = d3.scaleLinear()
+                .domain([0, chipInput.puls.length - 1])
+                .range([0, width]);
+
+            // Y scale
+            const minValue = d3.min(vitalsData.flatMap(d => d.values)) || 0;
+            const maxValue = d3.max(vitalsData.flatMap(d => d.values)) || 100;
+            const y = d3.scaleLinear()
+                .domain([Math.max(0, minValue - 10), maxValue + 10])
+                .range([height, 0]);
+
+            // Line generator
+            const line = d3.line<number>()
+                .x((_d, i) => x(i))
+                .y(d => y(d))
+                .curve(d3.curveMonotoneX);
+
+            // Color scale
+            const color = d3.scaleOrdinal<string>()
+                .domain(vitalsData.map(d => d.name))
+                .range(['#ff6b6b', '#48dbfb']);
+
+            // Add X axis
+            svg.append('g')
+                .attr('transform', `translate(0,${height})`)
+                .call(d3.axisBottom(x))
+                .selectAll('text')
+                .style('fill', 'var(--text)');
+
+            // Add Y axis
+            svg.append('g')
+                .call(d3.axisLeft(y))
+                .selectAll('text')
+                .style('fill', 'var(--text)');
+
+            // Add lines
+            vitalsData.forEach(d => {
+                svg.append('path')
+                    .datum(d.values)
+                    .attr('fill', 'none')
+                    .attr('stroke', color(d.name))
+                    .attr('stroke-width', 1.5)
+                    .attr('d', line);
+            });
+
+            // Add legend at the top right
+            const legendItemHeight = 20; // Height allocated for each legend item
+
+            const legend = svg.append('g')
+                .attr('font-family', 'sans-serif')
+                .attr('font-size', 10)
+                .attr('text-anchor', 'end')
+                .selectAll('g')
+                .data(vitalsData)
+                .enter().append('g')
+                .attr('transform', (_d, i) => `translate(${width},${i * legendItemHeight + 10})`);
+
+            legend.append('rect')
+                .attr('x', -15)
+                .attr('width', 15)
+                .attr('height', 15)
+                .attr('fill', d => color(d.name));
+
+            legend.append('text')
+                .attr('x', -20)
+                .attr('y', 7.5)
+                .attr('dy', '0.32em')
+                .style('fill', 'var(--text)')
+                .text(d => d.name);
+        };
+
+        // Initial render
+        renderChart();
+
+        // Handle resize
+        const handleResize = () => {
+            if (!chartRef.current) return;
+            renderChart();
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [chipInput]);
+
+    return <div ref={chartRef} className="w-full h-64 border border-gray-200 rounded-lg p-2"></div>;
+};
+
+// Movement Chart Component
+export const MovementChart: React.FC<{ chipInput: ChipInput }> = ({chipInput}) => {
+    const chartRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!chartRef.current) return;
+
+        const bewegungData = [
+            {name: 'Bewegung', values: chipInput.bewegung.map(v => v * 100)} // Scale movement for better visibility
+        ];
+
+        // Function to render the chart
+        const renderChart = () => {
+            if (!chartRef.current) return;
+            
+            // Clear previous chart
+            d3.select(chartRef.current).selectAll('*').remove();
+
+            const margin = {top: 20, right: 20, bottom: 30, left: 50};
+            const width = chartRef.current.clientWidth - margin.left - margin.right;
+            const height = chartRef.current.clientHeight - margin.top - margin.bottom;
+
+            const svg = d3.select(chartRef.current)
+                .append('svg')
+                .attr('width', width + margin.left + margin.right)
+                .attr('height', height + margin.top + margin.bottom)
+                .append('g')
+                .attr('transform', `translate(${margin.left},${margin.top})`);
+
+            // X scale
+            const x = d3.scaleLinear()
+                .domain([0, chipInput.bewegung.length - 1])
+                .range([0, width]);
+
+            // Y scale
+            const y = d3.scaleLinear()
+                .domain([0, d3.max(bewegungData[0].values) || 100])
+                .range([height, 0]);
+
+            // Line generator
+            const line = d3.line<number>()
+                .x((_d, i) => x(i))
+                .y(d => y(d))
+                .curve(d3.curveMonotoneX);
+
+            // Color scale
+            const color = '#1dd1a1'; // Use the same color as before for consistency
+
+            // Add X axis
+            svg.append('g')
+                .attr('transform', `translate(0,${height})`)
+                .call(d3.axisBottom(x))
+                .selectAll('text')
+                .style('fill', 'var(--text)');
+
+            // Add Y axis
+            svg.append('g')
+                .call(d3.axisLeft(y))
+                .selectAll('text')
+                .style('fill', 'var(--text)');
+
+            // Add line
+            svg.append('path')
+                .datum(bewegungData[0].values)
+                .attr('fill', 'none')
+                .attr('stroke', color)
+                .attr('stroke-width', 1.5)
+                .attr('d', line);
+
+            // Add legend at the top right
+            const legendItemHeight = 20; // Height allocated for each legend item
+
+            const legend = svg.append('g')
+                .attr('font-family', 'sans-serif')
+                .attr('font-size', 10)
+                .attr('text-anchor', 'end')
+                .selectAll('g')
+                .data(bewegungData)
+                .enter().append('g')
+                .attr('transform', (_d, i) => `translate(${width},${i * legendItemHeight + 10})`);
+
+            legend.append('rect')
+                .attr('x', -15)
+                .attr('width', 15)
+                .attr('height', 15)
+                .attr('fill', () => color);
+
+            legend.append('text')
+                .attr('x', -20)
+                .attr('y', 7.5)
+                .attr('dy', '0.32em')
+                .style('fill', 'var(--text)')
+                .text(d => d.name);
+        };
+
+        // Initial render
+        renderChart();
+
+        // Handle resize
+        const handleResize = () => {
+            if (!chartRef.current) return;
+            renderChart();
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [chipInput]);
+
+    return <div ref={chartRef} className="w-full h-64 border border-gray-200 rounded-lg p-2"></div>;
+};

src/components/DreamVR.tsx

@@ -0,0 +1,249 @@
+import React, {useMemo, useRef} from 'react';
+import {Canvas, useFrame} from '@react-three/fiber';
+import {createXRStore, useXR, XR} from '@react-three/xr';
+import {OrbitControls, PerspectiveCamera} from '@react-three/drei';
+import * as THREE from 'three';
+import type Dream from '../types/Dream';
+
+// Neural Node component representing a synapse in the neural network
+const NeuralNode = ({position, color, scale, pulseSpeed, pulseIntensity}: {
+    position: [number, number, number], color: string, scale: number, pulseSpeed: number, pulseIntensity: number
+}) => {
+    const nodeRef = useRef<THREE.Mesh>(null);
+    const initialScale = scale;
+
+    useFrame(({clock}) => {
+        if (nodeRef.current) {
+            // Create a pulsing effect
+            const pulse = Math.sin(clock.getElapsedTime() * pulseSpeed) * pulseIntensity + 1;
+            nodeRef.current.scale.set(initialScale * pulse, initialScale * pulse, initialScale * pulse);
+        }
+    });
+
+    return (<mesh ref={nodeRef} position={position}>
+        <sphereGeometry args={[scale, 8, 8]}/>
+        <meshStandardMaterial color={color} emissive={color} emissiveIntensity={0.2}/>
+    </mesh>);
+};
+
+// Neural Connection component representing connections between synapses
+const NeuralConnection = ({start, end, color, thickness, pulseSpeed, pulseIntensity}: {
+    start: [number, number, number],
+    end: [number, number, number],
+    color: string,
+    thickness: number,
+    pulseSpeed: number,
+    pulseIntensity: number
+}) => {
+    const connectionRef = useRef<THREE.Mesh>(null);
+
+    // Create a cylinder between two points
+    const direction = useMemo(() => {
+        return new THREE.Vector3(end[0] - start[0], end[1] - start[1], end[2] - start[2]);
+    }, [start, end]);
+
+    const length = useMemo(() => direction.length(), [direction]);
+
+    // Calculate rotation to align cylinder with direction
+    useMemo(() => {
+        const normalizedDirection = direction.clone().normalize();
+        const quaternion = new THREE.Quaternion();
+        quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), // Default cylinder orientation
+            normalizedDirection);
+        return new THREE.Matrix4().makeRotationFromQuaternion(quaternion);
+    }, [direction]);
+    // Calculate position (midpoint between start and end)
+    const position = useMemo(() => {
+        return [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2, (start[2] + end[2]) / 2] as [number, number, number];
+    }, [start, end]);
+
+    useFrame(({clock}) => {
+        if (connectionRef.current) {
+            // Create a pulsing effect for the connection
+            const pulse = Math.sin(clock.getElapsedTime() * pulseSpeed + (start[0] + start[1] + start[2])) * pulseIntensity + 1;
+            connectionRef.current.scale.set(thickness * pulse, length / 2, thickness * pulse);
+        }
+    });
+
+    return (<mesh ref={connectionRef} position={position}>
+        <cylinderGeometry args={[thickness, thickness, length]}/>
+        <meshStandardMaterial color={color} emissive={color} emissiveIntensity={0.1}/>
+    </mesh>);
+};
+
+// Neural Network component that generates nodes and connections
+const NeuralNetwork = ({dream}: { dream: Dream }) => {
+    // Generate nodes and connections based on dream data
+    const nodes = useMemo(() => {
+        if (dream.input.inputType !== 'chip') return [];
+
+        const chipInput = dream.input;
+        const nodeCount = 50; // Number of nodes to generate
+        const nodes = [];
+
+        // Use EEG data to influence node positions and properties
+        for (let i = 0; i < nodeCount; i++) {
+            const alphaValue = chipInput.eeg.alpha[i % chipInput.eeg.alpha.length] / 50;
+            const betaValue = chipInput.eeg.beta[i % chipInput.eeg.beta.length] / 50;
+            const thetaValue = chipInput.eeg.theta[i % chipInput.eeg.theta.length] / 50;
+
+            // Calculate position based on EEG values
+            const x = (Math.random() - 0.5) * 20 + alphaValue * 10;
+            const y = (Math.random() - 0.5) * 20 + betaValue * 10;
+            const z = (Math.random() - 0.5) * 20 + thetaValue * 10;
+
+            // Determine color based on dominant wave
+            let color;
+            const dominantWave = Math.max(alphaValue, betaValue, thetaValue);
+            if (dominantWave === alphaValue) {
+                color = '#8884d8'; // Alpha - purple
+            } else if (dominantWave === betaValue) {
+                color = '#82ca9d'; // Beta - green
+            } else {
+                color = '#ffc658'; // Theta - yellow
+            }
+
+            // Scale based on pulse data
+            const scale = 0.2 + (chipInput.puls[i % chipInput.puls.length] / 200);
+
+            // Pulse speed and intensity based on HRV and movement
+            const pulseSpeed = 1 + (chipInput.hrv[i % chipInput.hrv.length] / 35);
+            const pulseIntensity = 0.1 + (chipInput.bewegung[i % chipInput.bewegung.length] * 2);
+
+            nodes.push({
+                position: [x, y, z] as [number, number, number], color, scale, pulseSpeed, pulseIntensity
+            });
+        }
+
+        return nodes;
+    }, [dream]);
+
+    // Generate connections between nodes
+    const connections = useMemo(() => {
+        if (dream.input.inputType !== 'chip') return [];
+
+        const connections = [];
+        const connectionCount = nodes.length * 2; // Each node connects to ~2 others
+
+        for (let i = 0; i < connectionCount; i++) {
+            const startNodeIndex = i % nodes.length;
+            // Connect to a nearby node (not completely random)
+            const endNodeIndex = (startNodeIndex + 1 + Math.floor(Math.random() * 5)) % nodes.length;
+
+            if (startNodeIndex !== endNodeIndex) {
+                connections.push({
+                    start: nodes[startNodeIndex].position,
+                    end: nodes[endNodeIndex].position,
+                    color: nodes[startNodeIndex].color,
+                    thickness: 0.05 + Math.random() * 0.05,
+                    pulseSpeed: nodes[startNodeIndex].pulseSpeed,
+                    pulseIntensity: nodes[startNodeIndex].pulseIntensity
+                });
+            }
+        }
+
+        return connections;
+    }, [nodes, dream]);
+
+    return (<>
+            {/* Render all nodes */}
+        {nodes.map((node, index) => (<NeuralNode
+            key={index}
+                    position={node.position}
+                    color={node.color}
+                    scale={node.scale}
+                    pulseSpeed={node.pulseSpeed}
+                    pulseIntensity={node.pulseIntensity}
+        />))}
+
+            {/* Render all connections */}
+        {connections.map((connection, index) => (<NeuralConnection
+            key={index}
+                    start={connection.start}
+                    end={connection.end}
+                    color={connection.color}
+                    thickness={connection.thickness}
+                    pulseSpeed={connection.pulseSpeed}
+                    pulseIntensity={connection.pulseIntensity}
+        />))}
+    </>);
+};
+
+// Camera Controls component that handles XR and non-XR states
+const CameraControls = () => {
+    const {session} = useXR();
+
+    // Only enable OrbitControls when NOT in VR session
+    if (session) {
+        return null; // Let XR handle camera in VR mode
+    }
+
+    return (<OrbitControls
+        enablePan={true}
+        enableZoom={true}
+        enableRotate={true}
+        enableDamping={true}
+        dampingFactor={0.05}
+        minDistance={5}
+        maxDistance={50}
+        maxPolarAngle={Math.PI}
+        minPolarAngle={0}
+    />);
+};
+
+// Main DreamVR component
+interface DreamVRProps {
+    dream: Dream;
+    height?: string;
+}
+
+// Create XR store outside the component to avoid recreation on each render
+const store = createXRStore();
+
+const DreamVR: React.FC<DreamVRProps> = ({dream, height = '500px'}) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // Only render VR for dream with chip input type
+    if (dream.input.inputType !== 'chip') {
+        return (<div className="flex items-center justify-center h-full text-gray-500">
+            VR-Visualisierung ist nur für Träume mit Chip-Eingabe verfügbar.
+        </div>);
+    }
+
+    return (<div ref={containerRef} className="relative w-full" style={{height}}>
+            {/* VR Entry Button */}
+        <button
+            onClick={() => store.enterVR()}
+            className="absolute top-4 right-4 z-10 p-2 bg-white/20 backdrop-blur-sm rounded-full text-white hover:bg-white/30 transition-colors"
+            aria-label="Enter VR"
+        >
+            🥽 VR
+        </button>
+
+        <Canvas camera={{position: [0, 0, 10], fov: 60}}>
+                <XR store={store}>
+                    {/* Camera setup */}
+                    <PerspectiveCamera makeDefault position={[0, 0, 10]}/>
+
+                    {/* Camera Controls - only active outside VR */}
+                    <CameraControls/>
+
+                    {/* Lighting */}
+                    <ambientLight intensity={0.2}/>
+                    <pointLight position={[10, 10, 10]} intensity={0.8}/>
+                    <pointLight position={[-10, -10, -10]} intensity={0.4}/>
+
+                    {/* Neural network visualization */}
+                    <NeuralNetwork dream={dream}/>
+
+                    {/* Background */}
+                    <mesh scale={[100, 100, 100]}>
+                        <sphereGeometry args={[1, 32, 32]}/>
+                        <meshBasicMaterial color="#000012" side={THREE.BackSide}/>
+                    </mesh>
+                </XR>
+            </Canvas>
+    </div>);
+};
+
+export default DreamVR;

src/components/Navbar.tsx

@@ -1,12 +1,12 @@
 import {NavLink} from 'react-router-dom';
-import {FaList, FaMicrochip, FaUser} from "react-icons/fa6";
+import {FaMicrochip, FaMicrophone, FaUser} from "react-icons/fa6";
 import {FaGlobeEurope, FaHome} from "react-icons/fa";
 import {getBackgroundStyle} from '../styles/StyleUtils';
 
 export default function Navbar() {
     return (<>
             <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={{
                     background: 'var(--accent-gradient)',
                     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"/>
                 </NavLink>
                 <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"/>
                 </NavLink>
                 <NavLink to="/profile" className="transition-transform hover:scale-110">
@@ -27,11 +27,11 @@ export default function Navbar() {
             </nav>
 
             <NavLink
-                to="/feed"
+                to="/record"
-                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')}
             >
-                <FaList className="w-8 h-8 md:w-10 md:h-10 text-white"/>
+                <FaMicrophone className="w-8 h-8 md:w-10 md:h-10 text-white"/>
             </NavLink>
         </>
     );

src/components/ScrollToTop.tsx

@@ -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;

src/components/dreamarchive/DreamyCard.tsx

@@ -0,0 +1,28 @@
+import type {ReactNode} from 'react';
+import React from 'react';
+import {getBackgroundStyle} from '../../styles/StyleUtils';
+
+interface DreamyCardProps {
+    children: ReactNode;
+    color?: 'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta';
+    className?: string;
+    padding?: string;
+}
+
+export const DreamyCard: React.FC<DreamyCardProps> = ({
+                                                          children,
+                                                          color = 'purple',
+                                                          className = '',
+                                                          padding = 'p-6'
+                                                      }) => {
+    return (
+        <div
+            className={`dreamy-card ${padding} ${className}`}
+            style={getBackgroundStyle(color)}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default DreamyCard;

src/components/dreamarchive/HeroSection.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface HeroSectionProps {
+    title?: string;
+    subtitle?: string;
+    containerTitle: string;
+    description: string;
+}
+
+export const HeroSection: React.FC<HeroSectionProps> = ({containerTitle, description}) => {
+    return (
+        <div className="text-center mb-12 sm:mb-16 relative z-10">
+            <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">{containerTitle}</h2>
+                </div>
+                <p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
+                    {description}
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default HeroSection;

src/components/dreamarchive/IconWithBackground.tsx

@@ -0,0 +1,27 @@
+import type {ReactElement} from 'react';
+import React from 'react';
+
+interface IconWithBackgroundProps {
+    icon: ReactElement;
+    color: string;
+    size?: number;
+    className?: string;
+}
+
+export const IconWithBackground: React.FC<IconWithBackgroundProps> = ({
+                                                                          icon,
+                                                                          color,
+                                                                          size = 28,
+                                                                          className = ''
+                                                                      }) => {
+    return (
+        <div className={`p-3 bg-${color}-500/20 rounded-full ${className}`}>
+            {React.cloneElement(icon, {
+                className: `text-${color}-600 dark:text-${color}-400`,
+                size: size
+            } as React.SVGProps<SVGSVGElement>)}
+        </div>
+    );
+};
+
+export default IconWithBackground;

src/components/dreamarchive/ResearcherInterviewCard.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {FaUserMd} from 'react-icons/fa';
+import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
+import IconWithBackground from './IconWithBackground';
+import VideoPlayer from './VideoPlayer';
+
+interface ResearcherInterviewCardProps {
+    interview: {
+        id: number;
+        name: string;
+        institution: string;
+        specialty: string;
+        topics: string[];
+        color: 'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta';
+        videoId: string;
+    };
+}
+
+export const ResearcherInterviewCard: React.FC<ResearcherInterviewCardProps> = ({interview}) => {
+    return (
+        <div className="dreamy-card p-6" style={getBackgroundStyle(interview.color)}>
+            <div className="flex items-start mb-4">
+                <IconWithBackground
+                    icon={<FaUserMd/>}
+                    color={interview.color}
+                    size={28}
+                    className="mr-4 mt-1"
+                />
+                <div>
+                    <h3 className="text-lg font-bold dreamy-text">{interview.name}</h3>
+                    <p className="text-xs mb-1" style={getTextStyle('muted')}>{interview.institution}</p>
+                    <p className="text-sm mb-3">{interview.specialty}</p>
+
+                    <VideoPlayer color={interview.color}/>
+
+                    <h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
+                    <ul className="list-disc list-inside text-sm space-y-1">
+                        {interview.topics.map((topic, index) => (
+                            <li key={index}>{topic}</li>
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ResearcherInterviewCard;

src/components/dreamarchive/SectionHeader.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface SectionHeaderProps {
+    title: string;
+    className?: string;
+}
+
+export const SectionHeader: React.FC<SectionHeaderProps> = ({title, className = ''}) => {
+    return (
+        <h2 className={`text-2xl font-bold mb-6 dream-title ${className}`}>{title}</h2>
+    );
+};
+
+export default SectionHeader;

src/components/dreamarchive/StudyCard.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import {FaFlask} from 'react-icons/fa';
+import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
+import IconWithBackground from './IconWithBackground';
+
+interface StudyCardProps {
+    study: {
+        id: number;
+        title: string;
+        institution: string;
+        status: string;
+        statusColor: string;
+        participants?: {
+            current: number;
+            target: number;
+        };
+        endDate: string;
+        description: string;
+        color: 'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta';
+    };
+}
+
+export const StudyCard: React.FC<StudyCardProps> = ({study}) => {
+    return (
+        <div className="dreamy-card p-6 flex flex-col h-full" style={getBackgroundStyle(study.color)}>
+            <div className="flex items-center mb-4">
+                <IconWithBackground
+                    icon={<FaFlask/>}
+                    color={study.color}
+                    size={28}
+                    className="mr-4"
+                />
+                <div>
+                    <h3 className="text-lg font-bold dreamy-text">{study.title}</h3>
+                    <p className="text-xs" style={getTextStyle('muted')}>{study.institution}</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-${study.statusColor}-100 dark:bg-${study.statusColor}-900 text-${study.statusColor}-800 dark:text-${study.statusColor}-200 px-2 py-0.5 rounded-full`}>
+                        {study.status}
+                    </span>
+                </div>
+                {study.participants && (
+                    <div className="flex justify-between mb-2">
+                        <span className="text-sm font-bold">Teilnehmer:</span>
+                        <span className="text-sm">
+                        {study.participants.current.toLocaleString()} / {study.participants.target.toLocaleString()}
+                    </span>
+                    </div>
+                )}
+                <div className="flex justify-between">
+                    <span className="text-sm font-bold">Enddatum:</span>
+                    <span className="text-sm">{study.endDate}</span>
+                </div>
+            </div>
+
+            <p className="text-sm mb-4">
+                {study.description}
+            </p>
+
+            <button
+                className={`w-full py-2 px-4 bg-${study.color}-500 hover:bg-${study.color}-600 text-white rounded-lg transition-colors mt-auto`}>
+                Teilnehmen
+            </button>
+        </div>
+    );
+};
+
+export default StudyCard;

src/components/dreamarchive/VideoPlayer.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {FaVideo} from 'react-icons/fa';
+
+interface VideoPlayerProps {
+    color: string;
+}
+
+export const VideoPlayer: React.FC<VideoPlayerProps> = ({color}) => {
+    return (
+        <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-${color}-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>
+    );
+};
+
+export default VideoPlayer;

src/data/MockDreams.ts

@@ -1,4 +1,4 @@
-import Dream, {type ImageInput, type TextInput} from '../types/Dream.ts';
+import Dream, {type AudioInput, type ChipInput, type ImageInput, type TextInput} from '../types/Dream.ts';
 
 // Function to generate a random date between July 3rd, 2025 and July 16th, 2025
 function getRandomDateInRange() {
@@ -8,122 +8,239 @@ function getRandomDateInRange() {
     return new Date(randomTime);
 }
 
-export const mockDreams: Dream[] = [new Dream({
+export const mockDreams: Dream[] = [
-    id: 1, userId: 1, title: 'Mitternachtsbibliothek', date: getRandomDateInRange(), input: {
+    // Traum 1
-        inputType: 'text',
+    new Dream({
-        input: 'Ich wanderte um Mitternacht in eine riesige Bibliothek, in der jedes Buch sanft leuchtete. Als ich eines aus dem Regal zog, flüsterten seine Seiten mir Geheimnisse zu.',
+        id: 1,
-    } as TextInput, ai: {
+        userId: 1,
-        interpretation: 'Dieses Bild symbolisiert den Wunsch nach Wissen und die Faszination für ungelüftete Geheimnisse. Die leuchtenden Bücher stehen für Inspiration und Erkenntnis, während die nächtliche Atmosphäre auf Introspektion und das Unbewusste hinweist.',
+        title: 'Mitternachtsbibliothek',
-        image: '01.png',
+        date: new Date('2025-07-17T03:25:57Z'),
-        video: '01.mp4',
+        tags: ['Wissen', 'Geheimnisse', 'Inspiration'],
-        audio: '01.mp3',
+        input: {
-    }
+            inputType: 'text',
-}), new Dream({
+            input: 'Ich wanderte um Mitternacht in eine riesige Bibliothek, in der jedes Buch sanft leuchtete. Als ich eines aus dem Regal zog, flüsterten seine Seiten mir Geheimnisse zu.'
-    id: 2, userId: 2, title: 'Unterwasserkonzert', date: getRandomDateInRange(), input: {
+        } as TextInput,
-        inputType: 'text',
+        ai: {
-        input: 'Ich besuchte ein Konzert unter dem Ozean. Die Musiker waren Delfine, die Melodien anklickten, während Korallenpolypen im Takt zum Rhythmus mit Licht pulsierten.',
+            interpretation: 'Dieses Bild symbolisiert den Wunsch nach Wissen und die Faszination für ungelüftete Geheimnisse. Die leuchtenden Bücher stehen für Inspiration und Erkenntnis, während die nächtliche Atmosphäre auf Introspektion und das Unbewusste hinweist.',
-    } as TextInput, ai: {
+            image: '01.png',
-        interpretation: 'Das Unterwasserkonzert kann als Ausdruck von Kreativität und Harmonie gedeutet werden. Delfine symbolisieren Intelligenz und Spielfreude, Korallenlicht verweist auf emotionale Schwingungen und die Verbindung zum Inneren.',
+            video: '01.mp4',
-        image: '02.png',
+            audio: '01.mp3'
-        video: '02.mp4',
+        }
-    }
+    }),
-}), new Dream({
-    id: 3, userId: 3, title: 'Wüstenzug', date: getRandomDateInRange(), input: {
-        inputType: 'text',
-        input: 'Ein Dampflok-Express tuckerte über goldene Dünen unter einem violetten Himmel. Passagiere winkten, während Kamele mit Laternen neben den Schienen herliefen.',
-    } as TextInput, ai: {
-        interpretation: 'Der Wüstenzug steht für eine Reise durch unbewusste Räume und persönliche Herausforderungen (Dünen). Der violette Himmel deutet auf Spiritualität hin, während die Laternen der Kamele Hoffnung und Wegweisung symbolisieren.',
-        image: '03.png',
-        video: '03.mp4',
-    }
-}), new Dream({
-    id: 4, userId: 1, title: 'Schwebende Teeparty', date: getRandomDateInRange(), input: {
-        inputType: 'text',
-        input: 'Ich saß mit Freunden auf einer Wolke zu einer Teeparty. Jede Tasse war mit Sternenstaub gefüllt, und der Himmel um uns herum schimmerte in pastelligen Regenbogenfarben.',
-    } as TextInput, ai: {
-        interpretation: 'Diese Szene steht für Geborgenheit und Gemeinschaft auf einer höheren Ebene. Der Sternenstaub in den Tassen symbolisiert geteilte Träume, die pastelligen Regenbögen zeigen eine optimistische Grundstimmung und Leichtigkeit.',
-        image: '04.png'
-    }
-}), new Dream({
-    id: 5, userId: 2, title: 'Spiegelgarten', date: getRandomDateInRange(), input: {
-        inputType: 'text',
-        input: 'Ich erkundete einen Garten aus Spiegeln, in denen jeweils eine andere Kindheitserinnerung reflektiert wurde. Als ich einen berührte, hörte ich entferntes Lachen durch das Glas hallen.',
-    } as TextInput, ai: {
-        interpretation: 'Der Spiegelgarten repräsentiert Selbsterkenntnis und Rückblick auf die eigene Vergangenheit. Jeder Spiegel steht für ein Fragment der Erinnerung, das entfernte Lachen deutet auf positive Prägungen und emotionale Verankerung hin.',
-        image: '05.png',
-        audio: '05.mp3'
-    }
-}), new Dream({
-    id: 6, userId: 1, title: 'Crystal Forest', date: getRandomDateInRange(), input: {
-        inputType: 'image',
-        img: 'crystal_forest.jpg',
-        imgAlt: 'A glowing forest made of crystals under a starry sky',
-        description: 'I wandered through a glowing forest where every tree was made of shimmering crystal, reflecting thousands of stars above.',
-    } as ImageInput, ai: {
-        interpretation: 'The crystal forest represents clarity and the search for inner truth. The reflections of stars symbolize inspiration and the connection between your dreams and aspirations.',
-        audio: 'crystal_forest.mp3',
-        image: 'crystal_forest_ai.png',
-    },
-}), new Dream({
-    id: 7, userId: 2, title: 'Mirror Lake', date: getRandomDateInRange(), input: {
-        inputType: 'image',
-        img: 'mirror_lake.jpg',
-        imgAlt: 'A perfectly still lake reflecting the moon and clouds',
-        description: 'I stood at the edge of a silent lake, its surface so calm it looked like a perfect mirror, reflecting the moon and drifting clouds.',
-    } as ImageInput, ai: {
-        interpretation: 'The mirror lake suggests self-reflection and emotional calm. The moon and clouds indicate subconscious thoughts and the ever-changing nature of your feelings.',
-        video: 'mirror_lake_ai.mp4',
-        image: 'mirror_lake_ai.png',
-    },
-}), new Dream({
-    id: 8, userId: 3, title: 'Floating City', date: getRandomDateInRange(), input: {
-        inputType: 'image',
-        img: 'floating_city.jpg',
-        imgAlt: 'A futuristic city floating above the clouds at sunrise',
-        description: 'I explored a futuristic city that floated above the clouds, with golden sunlight streaming through transparent walkways.',
-    } as ImageInput, ai: {
-        interpretation: 'The floating city symbolizes ambition and the desire to rise above limitations. The sunrise and golden light represent hope and new beginnings.',
-        image: 'floating_city_ai.png',
-    },
-}), new Dream({
-    id: 9, userId: 4, title: 'Quantenreise', date: getRandomDateInRange(), input: {
-        inputType: 'text',
-        input: 'Ich reiste durch einen Tunnel aus pulsierenden Datenströmen. Jede Berührung löste neue Realitäten aus, die sich wie Fraktale vor mir entfalteten.',
-    } as TextInput, ai: {
-        interpretation: 'Die Quantenreise symbolisiert deine Faszination für Möglichkeiten und Parallelwelten. Die Datenströme repräsentieren Informationsverarbeitung und Entscheidungsfindung in deinem Unterbewusstsein.',
-        image: 'quantum_journey.png',
-        video: 'quantum_journey.mp4',
-    }
-}), new Dream({
-    id: 10, userId: 4, title: 'Neuronales Netzwerk', date: getRandomDateInRange(), input: {
-        inputType: 'text',
-        input: 'Ich befand mich in einem riesigen neuronalen Netzwerk, wo Gedanken als leuchtende Impulse zwischen synaptischen Verbindungen tanzten. Ich konnte sie mit meinen Händen formen und lenken.',
-    } as TextInput, ai: {
-        interpretation: 'Das neuronale Netzwerk spiegelt dein Interesse an künstlicher Intelligenz und dem menschlichen Bewusstsein wider. Die Fähigkeit, Gedanken zu formen, deutet auf deinen Wunsch nach Kontrolle über deine mentalen Prozesse hin.',
-        image: 'neural_network.png',
-        audio: 'neural_network.mp3',
-    }
-}), new Dream({
-    id: 11, userId: 4, title: 'Digitaler Garten', date: getRandomDateInRange(), input: {
-        inputType: 'image',
-        img: 'digital_garden.jpg',
-        imgAlt: 'Ein Garten aus leuchtenden Codezeilen und holografischen Pflanzen',
-        description: 'Ich pflegte einen Garten, in dem Pflanzen aus Codezeilen und Algorithmen wuchsen. Jede Blüte entfaltete sich zu einer neuen Technologie.',
-    } as ImageInput, ai: {
-        interpretation: 'Der digitale Garten verkörpert deine kreative Verbindung von Natur und Technologie. Er zeigt, wie du Innovation als organischen, wachsenden Prozess betrachtest.',
-        image: 'digital_garden_ai.png',
-    }
-}), new Dream({
-    id: 12, userId: 4, title: 'Zeitschleife', date: getRandomDateInRange(), input: {
-        inputType: 'text',
-        input: 'Ich erlebte denselben Tag immer wieder, konnte aber jedes Mal kleine Änderungen vornehmen. Mit jeder Iteration wurde die Realität komplexer und unvorhersehbarer.',
-    } as TextInput, ai: {
-        interpretation: 'Die Zeitschleife reflektiert deine Gedanken über Kausalität und die Auswirkungen kleiner Entscheidungen. Sie symbolisiert auch den Wunsch, Fehler zu korrigieren und verschiedene Möglichkeiten zu erkunden.',
-        image: 'time_loop.png',
-        audio: 'time_loop.mp3',
-    }
-}),
 
-];
+    // Traum 2
+    new Dream({
+        id: 2,
+        userId: 2,
+        title: 'Unterwasserkonzert',
+        date: getRandomDateInRange(),
+        tags: ['Kreativität', 'Harmonie', 'Ozean'],
+        input: {
+            inputType: 'audio',
+            transcript: 'Ich besuchte ein Konzert unter dem Ozean. Die Musiker waren Delfine, die Melodien anklickten, während Korallenpolypen im Takt zum Rhythmus mit Licht pulsierten.',
+            audio: 'in_02.mp3'
+        } as AudioInput,
+        ai: {
+            interpretation: 'Das Unterwasserkonzert kann als Ausdruck von Kreativität und Harmonie gedeutet werden. Delfine symbolisieren Intelligenz und Spielfreude, Korallenlicht verweist auf emotionale Schwingungen und die Verbindung zum Inneren.',
+            image: '02.png',
+            audio: '02.mp3',
+            video: '02.mp4'
+        }
+    }),
 
-export default mockDreams;
+    // Traum 3
+    new Dream({
+        id: 3,
+        userId: 3,
+        title: 'Wüstenzug',
+        date: getRandomDateInRange(),
+        tags: ['Reise', 'Herausforderung', 'Spiritualität'],
+        input: {
+            inputType: 'image',
+            description: 'Ein Dampflok-Express tuckerte über goldene Dünen unter einem violetten Himmel. Passagiere winkten, während Kamele mit Laternen neben den Schienen herliefen.',
+            img: 'in_03.png',
+            imgAlt: ''
+        } as ImageInput,
+        ai: {
+            interpretation: 'Der Wüstenzug steht für eine Reise durch unbewusste Räume und persönliche Herausforderungen (Dünen). Der violette Himmel deutet auf Spiritualität hin, während die Laternen der Kamele Hoffnung und Wegweisung symbolisieren.',
+            image: '03.png',
+            video: '03.mp4',
+            audio: '03.mp3'
+        }
+    }),
+
+    // Traum 4
+    new Dream({
+        id: 4,
+        userId: 1,
+        title: 'Schwebende Teeparty',
+        date: getRandomDateInRange(),
+        tags: ['Gemeinschaft', 'Geborgenheit', 'Leichtigkeit'],
+        input: {
+            inputType: 'audio',
+            transcript: 'Ich saß mit Freunden auf einer Wolke zu einer Teeparty. Jede Tasse war mit Sternenstaub gefüllt, und der Himmel um uns herum schimmerte in pastelligen Regenbogenfarben.',
+            audio: 'in_04.mp3',
+        } as AudioInput,
+        ai: {
+            interpretation: 'Diese Szene steht für Geborgenheit und Gemeinschaft auf einer höheren Ebene. Der Sternenstaub in den Tassen symbolisiert geteilte Träume, die pastelligen Regenbögen zeigen eine optimistische Grundstimmung und Leichtigkeit.',
+            image: '04.png',
+            audio: '04.mp3',
+            video: '04.mp4'
+        }
+    }),
+
+    // Traum 5
+    new Dream({
+        id: 5,
+        userId: 2,
+        title: 'Spiegelgarten',
+        date: getRandomDateInRange(),
+        tags: ['Selbsterkenntnis', 'Erinnerung', 'Vergangenheit'],
+        input: {
+            inputType: 'text',
+            input: 'Ich erkundete einen Garten aus Spiegeln, in denen jeweils eine andere Kindheitserinnerung reflektiert wurde. Als ich einen berührte, hörte ich entferntes Lachen durch das Glas hallen.'
+        } as TextInput,
+        ai: {
+            interpretation: 'Der Spiegelgarten repräsentiert Selbsterkenntnis und Rückblick auf die eigene Vergangenheit. Jeder Spiegel steht für ein Fragment der Erinnerung, das entfernte Lachen deutet auf positive Prägungen und emotionale Verankerung hin.',
+            image: '05.png',
+            audio: '05.mp3',
+            video: '05.mp4'
+        }
+    }),
+
+    // Traum 9 (userId 4)
+    new Dream({
+        id: 9,
+        userId: 4,
+        title: 'Quantenreise',
+        date: getRandomDateInRange(),
+        tags: ['Faszination', 'Parallelwelten', 'Informationsverarbeitung'],
+        input: {
+            inputType: 'text',
+            input: 'Ich reiste durch einen Tunnel aus pulsierenden Datenströmen. Jede Berührung löste neue Realitäten aus, die sich wie Fraktale vor mir entfalteten.'
+        } as TextInput,
+        ai: {
+            interpretation: 'Die Quantenreise symbolisiert deine Faszination für Möglichkeiten und Parallelwelten. Die Datenströme repräsentieren Informationsverarbeitung und Entscheidungsfindung in deinem Unterbewusstsein.',
+            image: '09.png',
+            audio: '09.mp3',
+            video: '09.mp4'
+        }
+    }),
+
+    // Traum 10 (userId 4)
+    new Dream({
+        id: 10,
+        userId: 4,
+        title: 'Neuronales Netzwerk',
+        date: new Date('2025-07-17T05:28:57Z'),
+        tags: ['KI', 'Bewusstsein', 'Kontrolle'],
+        input: {
+            inputType: 'chip',
+            text: 'Du hast von einem riesigen neuronalen Netzwerk, wo Gedanken als leuchtende Impulse zwischen synaptischen Verbindungen tanzten, geträumt.',
+            eeg: {
+                alpha: [
+                    21.49, 19.59, 21.94, 24.57, 19.30, 19.30, 24.74, 22.30, 18.59, 21.63,
+                    18.61, 18.60, 20.73, 14.26, 14.83, 18.31, 16.96, 20.94, 17.28, 15.76,
+                    24.40, 19.32, 20.20, 15.73, 18.37, 20.33, 16.55, 21.13, 18.20, 19.12,
+                    18.19, 25.56, 19.96, 16.83, 22.47, 16.34, 20.63, 14.12, 16.02, 20.59,
+                    22.22, 20.51, 19.65, 19.10, 15.56, 17.84, 18.62, 23.17, 21.03, 14.71,
+                    20.97, 18.84, 17.97, 21.84, 23.09, 22.79, 17.48, 19.07, 20.99, 22.93
+                ],
+                beta: [
+                    9.04, 9.63, 7.79, 7.61, 11.63, 12.71, 9.86, 12.01, 10.72, 8.71,
+                    10.72, 13.08, 9.93, 13.13, 5.00, 11.64, 10.17, 9.40, 10.18, 6.02,
+                    9.56, 10.71, 12.96, 8.96, 8.38, 8.99, 11.83, 10.66, 8.94, 11.03,
+                    10.19, 11.94, 8.60, 9.34, 9.22, 7.07, 10.59, 10.52, 10.01, 9.53,
+                    7.17, 9.16, 9.31, 8.40, 9.68, 10.81, 13.77, 10.35, 10.52, 9.85,
+                    6.16, 9.95, 10.12, 14.93, 9.62, 10.60, 9.93, 7.66, 12.29, 11.50
+                ],
+                theta: [
+                    33.96, 25.45, 37.01, 22.99, 32.93, 40.00, 25.05, 27.17, 30.50, 27.48,
+                    22.25, 30.34, 24.69, 32.37, 25.40, 37.75, 26.08, 28.39, 34.07, 23.85,
+                    31.14, 36.54, 21.96, 30.92, 31.30, 33.91, 23.82, 23.40, 32.61, 31.48,
+                    31.25, 31.73, 26.60, 31.16, 31.47, 26.43, 39.33, 32.37, 24.04, 33.28,
+                    25.13, 33.94, 35.79, 25.90, 34.82, 32.06, 34.11, 39.48, 28.77, 26.23,
+                    25.55, 25.92, 29.61, 31.71, 31.38, 34.13, 30.07, 37.27, 28.68, 40.00
+                ],
+                delta: [
+                    43.75, 34.86, 33.57, 42.89, 38.66, 44.28, 42.84, 39.56, 34.92, 30.91,
+                    37.32, 45.14, 41.28, 32.53, 41.04, 42.31, 34.70, 40.92, 40.35, 33.14,
+                    42.15, 43.36, 46.50, 46.32, 31.73, 34.37, 43.09, 43.08, 43.09, 50.00,
+                    43.43, 46.81, 45.72, 43.91, 38.11, 44.55, 35.36, 38.58, 37.09, 40.49,
+                    50.00, 30.00, 44.12, 30.32, 37.17, 46.53, 40.39, 33.53, 35.71, 44.08,
+                    35.62, 41.30, 40.27, 36.09, 50.00, 43.80, 30.00, 41.12, 36.03, 45.11
+                ]
+            },
+            puls: [
+                62.62, 64.66, 66.51, 67.60, 61.40, 64.00, 63.58, 63.04, 70.00, 66.21,
+                61.22, 67.75, 70.00, 68.10, 60.44, 63.55, 68.80, 62.88, 66.33, 67.32,
+                62.22, 64.82, 60.00, 61.93, 64.24, 61.26, 69.90, 60.71, 63.68, 65.39,
+                69.32, 60.69, 68.49, 65.03, 62.06, 66.39, 65.60, 63.20, 65.21, 63.84,
+                65.34, 66.99, 69.76, 61.29, 70.00, 60.00, 64.54, 66.76, 65.84, 63.13,
+                64.38, 63.52, 63.23, 67.55, 66.07, 62.92, 67.70, 65.92, 67.44, 66.89
+            ],
+            hrv: [
+                60.61, 57.89, 60.71, 57.86, 67.10, 62.59, 69.24, 60.96, 52.74, 56.56,
+                66.48, 59.99, 54.13, 57.87, 70.00, 63.01, 55.81, 62.69, 58.96, 54.70,
+                66.05, 63.33, 65.91, 70.00, 56.49, 61.42, 56.00, 70.00, 65.76, 62.36,
+                51.29, 64.13, 53.40, 56.55, 70.00, 56.49, 54.68, 61.99, 61.65, 59.49,
+                55.21, 57.25, 51.71, 64.89, 47.64, 70.00, 53.67, 49.43, 54.72, 62.67,
+                62.80, 70.00, 67.82, 54.10, 57.76, 59.14, 54.51, 56.71, 56.74, 52.09
+            ],
+            bewegung: [
+                0.20, 0.30, 0.14, 0.19, 0.22, 0.11, 0.17, 0.15, 0.16, 0.07,
+                0.15, 0.20, 0.30, 0.25, 0.37, 0.07, 0.24, 0.17, 0.37, 0.07,
+                0.07, 0.09, 0.00, 0.10, 0.07, 0.17, 0.18, 0.34, 0.25, 0.09,
+                0.06, 0.20, 0.02, 0.33, 0.27, 0.10, 0.00, 0.29, 0.14, 0.27,
+                0.00, 0.09, 0.15, 0.15, 0.10, 0.21, 0.04, 0.14, 0.16, 0.20,
+                0.22, 0.04, 0.00, 0.28, 0.18, 0.08, 0.31, 0.16, 0.27, 0.16
+            ]
+        } as ChipInput,
+        ai: {
+            interpretation: 'Das neuronale Netzwerk spiegelt dein Interesse an künstlicher Intelligenz und dem menschlichen Bewusstsein wider. Die Fähigkeit, Gedanken zu formen, deutet auf deinen Wunsch nach Kontrolle über deine mentalen Prozesse hin.',
+            audio: '10.mp3',
+            image: '10.png',
+            video: '10.mp4'
+        }
+    }),
+
+    // Traum 11 (userId 4)
+    new Dream({
+        id: 11,
+        userId: 4,
+        title: 'Digitaler Garten',
+        date: getRandomDateInRange(),
+        tags: ['Natur', 'Technologie', 'Innovation'],
+        input: {
+            inputType: 'image',
+            img: 'in_11.png',
+            imgAlt: 'Ein Garten aus leuchtenden Codezeilen und holografischen Pflanzen',
+            description: 'Leuchtende, halb-transparente Pflanzen mit holografischen Mustern wachsen in einem futuristischen Garten, in dem organische Formen und digitale Technologien harmonisch verschmelzen. Farbenfrohe Lichter ziehen sich an den Ästen entlang und schaffen eine friedliche, zukunftsweisende Atmosphäre.'
+        } as ImageInput,
+        ai: {
+            interpretation: 'Der digitale Garten verkörpert deine kreative Verbindung von Natur und Technologie. Er zeigt, wie du Innovation als organischen, wachsenden Prozess betrachtest.',
+            audio: '11.mp3',
+            image: '11.png',
+            video: '11.mp4'
+        }
+    }),
+
+    // Traum 12 (userId 4)
+    new Dream({
+        id: 12,
+        userId: 4,
+        title: 'Zeitschleife',
+        date: getRandomDateInRange(),
+        tags: ['Kausalität', 'Entscheidungen', 'Realität'],
+        input: {
+            inputType: 'text',
+            input: 'Ich erlebte denselben Tag immer wieder, konnte aber jedes Mal kleine Änderungen vornehmen. Mit jeder Iteration wurde die Realität komplexer und unvorhersehbarer.'
+        } as TextInput,
+        ai: {
+            interpretation: 'Die Zeitschleife reflektiert deine Gedanken über Kausalität und die Auswirkungen kleiner Entscheidungen. Sie symbolisiert auch den Wunsch, Fehler zu korrigieren und verschiedene Möglichkeiten zu erkunden.',
+            audio: '12.mp3',
+            image: '12.png',
+            video: '12.mp4'
+        }
+    })
+];

src/data/MockResearchLive.ts

@@ -0,0 +1,144 @@
+// Updated MockResearchLive.ts
+
+type ColorType = 'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta';
+
+interface Study {
+    id: number;
+    title: string;
+    institution: string;
+    status: string;
+    statusColor: string;
+    participants?: { current: number; target: number };
+    endDate: string;
+    description: string;
+    color: ColorType;
+}
+
+interface CitizenScienceProject {
+    id: number;
+    title: string;
+    icon: string;
+    description: string;
+    optedIn: boolean;
+}
+
+interface Event {
+    id: number;
+    date: string;
+    title: string;
+    location: string;
+    type: string;
+    typeColor: string;
+}
+
+export const currentStudies: Study[] = [
+    {
+        id: 1,
+        title: "Kulturübergreifende Traumsymbole",
+        institution: "University of Tokyo, Japan",
+        status: "Aktiv",
+        statusColor: "green",
+        participants: {current: 3456, target: 10000},
+        endDate: "31. Dezember 2025",
+        description:
+            "Diese globale Studie sammelt Traumsymbole aus verschiedenen Kulturen, um universelle und kulturspezifische Traumelemente zu identifizieren.",
+        color: "amber",
+    },
+    {
+        id: 2,
+        title: "Time course of the lucid dream experience",
+        institution: "Organization for Lucid Dream Studies",
+        status: "Laufend",
+        statusColor: "green",
+        endDate: "April 2026",
+        description:
+            "Untersuchung, wann und wie Träume in luzide Träume übergehen und was danach geschieht.",
+        color: "violet",
+    },
+    {
+        id: 3,
+        title: "Reality monitoring & state test reliability",
+        institution: "Organization for Lucid Dream Studies",
+        status: "Laufend",
+        statusColor: "green",
+        endDate: "August 2027",
+        description:
+            "Vergleich von Reality-Monitoring-Fehlern und Traum-Wach-Verwechslungen in Bezug auf die Häufigkeit luzider Träume.",
+        color: "pink-red",
+    },
+    {
+        id: 4,
+        title: "Rapid Eye Movement Restoration and Enhancement for Sleep-deprived Trauma-adaptation",
+        institution: "University of Wisconsin–Madison, USA",
+        status: "Laufend",
+        statusColor: "green",
+        endDate: "31. August 2025",
+        description:
+            "Untersuchung, ob gezielte REM-Schlaf-Wiederherstellung und -Förderung bei schlafentzugbedingten Traumafolgestörungen die Symptome lindert und die Erholung verbessert.",
+        color: "emerald",
+    },
+];
+
+export const citizenScienceProjects: CitizenScienceProject[] = [
+    {
+        id: 1,
+        title: "Globales Traumtagebuch",
+        icon: "FaClipboardCheck",
+        description:
+            "Teile deine Träume in der weltweit größten Traumdatenbank und hilf Forschern, Muster zu erkennen.",
+        optedIn: true,
+    },
+    {
+        id: 2,
+        title: "Traumkarte",
+        icon: "FaGlobeEurope",
+        description:
+            "Hilf bei der Erstellung einer interaktiven Weltkarte, die zeigt, wie Träume je nach Region variieren.",
+        optedIn: false,
+    },
+    {
+        id: 3,
+        title: "Kulturelle Traumlandschaften",
+        icon: "FaUsers",
+        description:
+            "Teile deine demographischen Daten und hilf bei der Untersuchung der Auswirkung von Kultur aufs Träumen.",
+        optedIn: false,
+    }
+];
+
+export const upcomingEvents: Event[] = [
+    {
+        id: 1,
+        date: "16. August 2025",
+        title: "Regional Dream Conference",
+        location: "Ort wird noch bekanntgegeben",
+        type: "Konferenz",
+        typeColor: "emerald",
+    },
+    {
+        id: 2,
+        date: "26. September 2025 – 27. September 2025",
+        title: "Regional Dream Conference",
+        location: "Bridgewater State University, USA",
+        type: "Konferenz",
+        typeColor: "emerald",
+    },
+    {
+        id: 3,
+        date: "10. Oktober 2025 – 12. Oktober 2025",
+        title: "Internationale Jahreskonferenz der IASD",
+        location: "Ort wird noch bekanntgegeben",
+        type: "Konferenz",
+        typeColor: "emerald",
+    },
+];
+
+export default {
+    currentStudies,
+    citizenScienceProjects,
+    upcomingEvents
+} as {
+    currentStudies: Study[];
+    citizenScienceProjects: CitizenScienceProject[];
+    upcomingEvents: Event[];
+};

src/data/MockUserDreams.ts

@@ -0,0 +1,111 @@
+/**
+ * Mock data for the UserDreams page
+ * Contains user dream profile statistics and comparisons
+ */
+
+// User's most frequent dream themes
+export const userDreamThemes = [
+    {theme: "Fliegen", percentage: 32, color: "purple"},
+    {theme: "Technologie", percentage: 28, color: "blue"},
+    {theme: "Kreativität", percentage: 24, color: "emerald"}
+];
+
+// Global comparison data for dream emotions
+export const dreamEmotionsComparison = {
+    positive: {
+        global: 42,
+        user: 58,
+        color: "blue"
+    },
+    negative: {
+        global: 38,
+        user: 22,
+        color: "red"
+    },
+    neutral: {
+        global: 20,
+        user: 20,
+        color: "yellow"
+    }
+};
+
+// Dream themes comparison data
+export const dreamThemesComparison = {
+    userTopThemes: [
+        {theme: "Fliegen", percentage: 32},
+        {theme: "Technologie", percentage: 28},
+        {theme: "Kreativität", percentage: 24},
+        {theme: "Reisen", percentage: 10},
+        {theme: "Musik", percentage: 6}
+    ],
+    globalTopThemes: [
+        {theme: "Fallen", percentage: 28},
+        {theme: "Verfolgung", percentage: 22},
+        {theme: "Fliegen", percentage: 18},
+        {theme: "Prüfungen", percentage: 16},
+        {theme: "Verlust", percentage: 14}
+    ]
+};
+
+// Unique aspects of user's dreams
+export const uniqueDreamAspects = [
+    "Deine Träume enthalten 55% mehr technologische Elemente als der Durchschnitt",
+    "Du träumst 78% häufiger vom Fliegen als die meisten Menschen",
+    "Kreative Problemlösung tritt in deinen Träumen 3x häufiger auf"
+];
+
+// Dream theme timeline data
+export const dreamThemeTimeline = {
+    timePoints: ["März 2023", "Juni 2023", "Sept 2023", "Dez 2023", "März 2024", "Heute"],
+    themes: [
+        {
+            name: "Fliegen",
+            color: "#8b5cf6", // purple
+            dataPoints: [70, 65, 50, 40, 30, 20] // y-values (0-100)
+        },
+        {
+            name: "Technologie",
+            color: "#3b82f6", // blue
+            dataPoints: [80, 75, 70, 60, 50, 30]
+        },
+        {
+            name: "Kreativität",
+            color: "#10b981", // emerald
+            dataPoints: [85, 80, 75, 65, 55, 35]
+        }
+    ]
+};
+
+// Key insights from dream analysis
+export const dreamInsights = [
+    "Deine Träume vom Fliegen haben im letzten Jahr um 60% zugenommen",
+    "Technologiebezogene Träume sind seit Dezember 2023 um 40% gestiegen",
+    "Kreative Elemente in deinen Träumen haben sich verdoppelt",
+    "Angstträume haben um 45% abgenommen"
+];
+
+// Personalized recommendations
+export const dreamRecommendations = {
+    forDreamWork: [
+        "Experimentiere mit luziden Träumen, da deine Flugträume ein guter Ausgangspunkt sind",
+        "Führe ein detaillierteres Traumtagebuch, um Muster in deinen technologiebezogenen Träumen zu erkennen",
+        "Probiere geführte Meditationen vor dem Schlafengehen, um deine kreativen Träume zu verstärken",
+        "Teile deine Traumgeschichten in der Community, um neue Perspektiven zu gewinnen"
+    ],
+    basedOnProfile: [
+        "Entdecke unsere Sammlung von Flugträumen aus verschiedenen Kulturen",
+        "Nimm an unserem Workshop \"Kreativität im Traum\" teil",
+        "Teste unsere neue Funktion zur Traumvisualisierung",
+        "Verbinde dich mit anderen Träumern, die ähnliche Interessen an Technologie und Innovation haben"
+    ]
+};
+
+export default {
+    userDreamThemes,
+    dreamEmotionsComparison,
+    dreamThemesComparison,
+    uniqueDreamAspects,
+    dreamThemeTimeline,
+    dreamInsights,
+    dreamRecommendations
+};

src/data/MockWorldwideEvents.ts

@@ -0,0 +1,106 @@
+/**
+ * Mock data for the WorldwideEvents page
+ * Contains timeline events and detailed event analysis data
+ */
+
+// Timeline events data
+export const timelineEvents = [
+    {
+        year: "2020",
+        event: "Beginn der COVID-19 Pandemie",
+        dreamEffect: "40% Anstieg der Traumhäufigkeit während Lockdown",
+        dreamEffectDetail: "Basierend auf 1.622 Teilnehmern in Italien"
+    },
+    {
+        year: "2021",
+        event: "Klimawandel-Ereignisse intensivieren sich",
+        dreamEffect: "23% mehr Träume über Feuer und Flucht",
+        dreamEffectDetail: "Korreliert mit Waldbränden in Australien und Kalifornien"
+    },
+    {
+        year: "2022",
+        event: "Beginn des Konflikts in der Ukraine",
+        dreamEffect: "Erhöhte Angstträume in europäischen Nachbarländern",
+        dreamEffectDetail: "Besonders in Polen, Rumänien und den baltischen Staaten"
+    },
+    {
+        year: "2023",
+        event: "Wirtschaftliche Instabilität",
+        dreamEffect: "Verstärkte Träume über Jobverlust und finanzielle Sorgen",
+        dreamEffectDetail: "Korreliert mit globaler Wirtschaftskrise"
+    },
+    {
+        year: "2024-2025",
+        event: "Extreme Wetterereignisse nehmen zu",
+        dreamEffect: "Verstärkte Wasserträume in von Überschwemmungen betroffenen Regionen",
+        dreamEffectDetail: "Hitzewellen führten zu fragmentierten Träumen durch veränderte Schlafmuster"
+    }
+];
+
+// Detailed event analysis data
+export const detailedEvents = [
+    {
+        id: 1,
+        title: "COVID-19 Pandemie (2020-2022)",
+        icon: "FaVirus",
+        color: "purple",
+        details: [
+            {
+                title: "Traumhäufigkeit",
+                description: "1.622 Teilnehmer in Italien berichteten einen 40% Anstieg der Traumhäufigkeit während des Lockdowns"
+            },
+            {
+                title: "Emotionale Auswirkungen",
+                description: "Negative Traumemotionen korrelierten direkt mit Schlafqualitätsverschlechterung"
+            },
+            {
+                title: "Häufige Themen",
+                description: "Isolation, Krankheit, Verlust von Kontrolle"
+            }
+        ],
+        summary: "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."
+    },
+    {
+        id: 2,
+        title: "Klimawandel-Ereignisse (2021-2025)",
+        icon: "FaFire",
+        color: "emerald",
+        details: [
+            {
+                title: "Waldbrände",
+                description: "Waldbrände in Australien/Kalifornien führten zu 23% mehr Träumen über Feuer und Flucht"
+            },
+            {
+                title: "Überschwemmungen",
+                description: "Überschwemmungen in Europa führten zu verstärkten Wasserträumen in betroffenen Regionen"
+            },
+            {
+                title: "Hitzewellen",
+                description: "Veränderte Schlafmuster durch Hitzewellen führten zu fragmentierten Träumen"
+            }
+        ],
+        summary: "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."
+    },
+    {
+        id: 3,
+        title: "Geopolitische Spannungen (2022-2025)",
+        icon: "FaFlag",
+        color: "blue",
+        details: [
+            {
+                title: "Konflikt in der Ukraine",
+                description: "Erhöhte Angstträume in europäischen Nachbarländern, besonders in Polen, Rumänien und den baltischen Staaten"
+            },
+            {
+                title: "Wirtschaftskrise",
+                description: "Verstärkte Träume über Jobverlust und finanzielle Sorgen, korrelierend mit globaler wirtschaftlicher Instabilität"
+            }
+        ],
+        summary: "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."
+    }
+];
+
+export default {
+    timelineEvents,
+    detailedEvents
+};

src/pages/ChipOverview.tsx

@@ -13,14 +13,11 @@ import {
     FaUniversity,
     FaUserMd,
     FaUsers,
-    FaWifi
 } from 'react-icons/fa';
 import {HiSparkles} from 'react-icons/hi';
-import logotext from "../assets/logotext.svg";
-import {NavLink} from 'react-router-dom';
 
 export default function ChipOverview() {
-    return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
+    return (<div className="p-4 pb-20 max-w-6xl mx-auto relative overflow-hidden">
         {/* Floating Background Elements */}
         <div className="absolute inset-0 pointer-events-none">
             <div className="absolute top-20 left-0 text-purple-200 opacity-30">
@@ -38,7 +35,7 @@ export default function ChipOverview() {
         <div className="text-center mb-12 sm:mb-16 relative z-10">
             <div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
                 <div className="flex items-center justify-around">
-                    <img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
+                    <h1 className="text-9xl sm:text-7xl font-bold text-purple-500 dark:text-purple-400">REMsense</h1>
                 </div>
                 <p className="text-lg sm:text-xl dreamy-text">Bahnbrechende Traumtechnologie</p>
             </div>
@@ -358,17 +355,17 @@ export default function ChipOverview() {
                         Datenschutz
                         in einem revolutionären Traumerfassungssystem
                     </p>
-                    <div className="flex justify-center w-full">
+                    {/*<div className="flex justify-center w-full">*/}
-                        <NavLink
+                    {/*    <NavLink*/}
-                            to='/home'
+                    {/*        to='/'*/}
-                            className="dreamy-button inline-flex items-center justify-center text-center mx-auto text-sm sm:text-base px-6 py-3 rounded-full font-medium shadow-lg"
+                    {/*        className="dreamy-button inline-flex items-center justify-center text-center mx-auto text-sm sm:text-base px-6 py-3 rounded-full font-medium shadow-lg"*/}
-                            style={{minWidth: '200px'}}
+                    {/*        style={{minWidth: '200px'}}*/}
-                        >
+                    {/*    >*/}
-                            <FaWifi className="mr-2 sm:mr-3" size={18}/>
+                    {/*        <FaWifi className="mr-2 sm:mr-3" size={18}/>*/}
-                            Mehr über die Technologie
+                    {/*        Mehr über die Technologie*/}
-                            <HiSparkles className="ml-2 sm:ml-3" size={18}/>
+                    {/*        <HiSparkles className="ml-2 sm:ml-3" size={18}/>*/}
-                        </NavLink>
+                    {/*    </NavLink>*/}
-                    </div>
+                    {/*</div>*/}
                 </div>
             </div>
         </div>

src/pages/DreamPage.tsx

@@ -6,9 +6,14 @@ import MockUsers from '../data/MockUsers';
 import User from '../types/User';
 import type Dream from "../types/Dream.ts";
 import {formatDateNumeric, formatDateWithTime} from '../utils/DateUtils';
-import Slider from 'react-slick';
+import {lazy, Suspense} from 'react';
-import 'slick-carousel/slick/slick.css';
+
-import 'slick-carousel/slick/slick-theme.css';
+// Lazy load components
+const DreamVR = lazy(() => import('../components/DreamVR'));
+const SliderComponent = lazy(() => import('react-slick'));
+const EEGChart = lazy(() => import('../components/DreamCharts').then(module => ({default: module.EEGChart})));
+const VitalsChart = lazy(() => import('../components/DreamCharts').then(module => ({default: module.VitalsChart})));
+const MovementChart = lazy(() => import('../components/DreamCharts').then(module => ({default: module.MovementChart})));
 
 export default function DreamPage() {
     const {id} = useParams<{ id: string }>();
@@ -17,6 +22,7 @@ export default function DreamPage() {
     const dream: Dream | undefined = mockDreams.find(d => d.id === Number(id));
     const user: User | undefined = dream ? MockUsers.find(u => u.id === dream.userId) : undefined;
 
+
     if (!dream) {
         return (<div className="page p-4">
             <button
@@ -64,14 +70,74 @@ export default function DreamPage() {
                 <div className="flex items-center mb-4">
                     <span className="font-medium dreamy-text">Traum-Beschreibung</span>
                 </div>
-                {(dream.input.inputType === 'image' || dream.input.inputType === 'audio') && (
+
-                    <div className="flex justify-center mb-1">
+                {dream.input.inputType === 'image' && (
-                        {dream.input.inputType === 'audio' && (<audio></audio>)}
+                    <div className="flex flex-col sm:flex-row gap-4 mb-4">
-                        {dream.input.inputType === 'image' && (<img alt={dream.input.imgAlt}></img>)}
+                        <div className="sm:w-1/3">
-                    </div>)}
+                            <img
-                <p className="leading-relaxed text-base sm:text-lg">
+                                src={`/assets/dreams/images/${dream.input.img}`}
-                    {(dream.input.inputType === 'text' && dream.input.input) || (dream.input.inputType === 'audio' && dream.input.transcript) || (dream.input.inputType === 'image' && dream.input.description)}
+                                alt={dream.input.imgAlt}
-                </p>
+                                className="w-full rounded-lg shadow-lg object-cover"
+                            />
+                        </div>
+                        <div className="sm:w-2/3">
+                            <p className="leading-relaxed text-base sm:text-lg">
+                                {dream.input.description}
+                            </p>
+                        </div>
+                    </div>
+                )}
+
+                {dream.input.inputType === 'audio' && (
+                    <div className="flex flex-col gap-4 mb-4">
+                        <div className="w-full">
+                            <audio
+                                controls
+                                src={`/assets/dreams/audio/${dream.input.audio}`}
+                                className="w-full"
+                            >
+                                Ihr Browser unterstützt das Audio-Element nicht.
+                            </audio>
+                        </div>
+                        <div className="w-full">
+                            <p className="leading-relaxed text-base sm:text-lg">
+                                {dream.input.transcript}
+                            </p>
+                        </div>
+                    </div>
+                )}
+
+                {dream.input.inputType === 'text' && (
+                    <p className="leading-relaxed text-base sm:text-lg">
+                        {dream.input.input}
+                    </p>
+                )}
+
+                {dream.input.inputType === 'chip' && (
+                    <div className="flex flex-col gap-4">
+                        <p className="leading-relaxed text-base sm:text-lg">
+                            {dream.input.text}
+                        </p>
+                        <Suspense fallback={<div
+                            className="w-full h-64 mt-4 border border-gray-200 rounded-lg p-2 flex justify-center items-center">
+                            <p>Lade EEG-Daten...</p>
+                        </div>}>
+                            <EEGChart chipInput={dream.input}/>
+                        </Suspense>
+                        <Suspense fallback={<div
+                            className="w-full h-64 mt-4 border border-gray-200 rounded-lg p-2 flex justify-center items-center">
+                            <p>Lade Vitaldaten...</p>
+                        </div>}>
+                            <VitalsChart chipInput={dream.input}/>
+                        </Suspense>
+                        <Suspense fallback={<div
+                            className="w-full h-64 mt-4 border border-gray-200 rounded-lg p-2 flex justify-center items-center">
+                            <p>Lade Bewegungsdaten...</p>
+                        </div>}>
+                            <MovementChart chipInput={dream.input}/>
+                        </Suspense>
+                    </div>
+                )}
             </div>
 
             {dream.ai?.interpretation && dream.ai.interpretation !== '' && (<div
@@ -91,33 +157,42 @@ export default function DreamPage() {
                     <div className="flex items-center mb-4">
                         <span className="font-medium dreamy-text">KI-Medien</span>
                     </div>
-                    <Slider
+                    <Suspense fallback={<div className="flex justify-center items-center h-[70vh]">
-                        dots={true}
+                        <p>Lade Medien-Karussell...</p>
-                        infinite={true}
+                    </div>}>
-                        speed={500}
+                        <SliderComponent
-                        slidesToShow={1}
+                            dots={true}
-                        slidesToScroll={1}
+                            infinite={true}
-                        className="max-w-full mx-auto"
+                            speed={500}
-                    >
+                            slidesToShow={1}
-                        <div className="flex justify-center px-2">
+                            slidesToScroll={1}
-                            <img
+                            className="max-w-full mx-auto carousel-container"
-                                src={`/assets/dreams/images/${dream.ai.image}`}
+                            onInit={() => {
-                                alt="KI-generiertes Traumbild"
+                                import('slick-carousel/slick/slick.css');
-                                className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
+                                import('slick-carousel/slick/slick-theme.css');
-                                style={{maxHeight: '70vh'}}
+                            }}
-                            />
+                        >
-                        </div>
+                            <div className="flex justify-center px-2">
-                        <div className="flex justify-center px-2">
+                                <img
-                            <video
+                                    src={`/assets/dreams/images/${dream.ai.image}`}
-                                controls
+                                    alt="KI-generiertes Traumbild"
-                                src={`/assets/dreams/videos/${dream.ai.video}`}
+                                    className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
-                                className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
+                                    style={{maxHeight: '70vh'}}
-                                style={{maxHeight: '70vh'}}
+                                />
-                            >
+                            </div>
-                                Ihr Browser unterstützt das Video-Element nicht.
+                            <div className="flex justify-center px-2">
-                            </video>
+                                <video
-                        </div>
+                                    controls
-                    </Slider>
+                                    loop
+                                    src={`/assets/dreams/videos/${dream.ai.video}`}
+                                    className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
+                                    style={{maxHeight: '70vh'}}
+                                >
+                                    Ihr Browser unterstützt das Video-Element nicht.
+                                </video>
+                            </div>
+                        </SliderComponent>
+                    </Suspense>
                 </div>)}
 
             {/* Show KI-Bild alone if video doesn't exist */}
@@ -145,6 +220,7 @@ export default function DreamPage() {
                     <div className="flex justify-center">
                         <video
                             controls
+                            loop
                             src={`/assets/dreams/videos/${dream.ai.video}`}
                             className="max-w-full w-full rounded-lg shadow-lg object-contain mx-auto"
                             style={{maxHeight: '70vh'}}
@@ -172,6 +248,20 @@ export default function DreamPage() {
                 </div>
             </div>)}
 
+            {/* VR Visualization */}
+            {(dream.id === 10 || dream.input.inputType === 'chip') && (
+                <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
+                    <div className="flex items-center mb-4">
+                        <span className="font-medium dreamy-text">VR-Visualisierung</span>
+                    </div>
+                    <Suspense fallback={<div className="flex justify-center items-center h-[600px]">
+                        <p>Lade VR-Visualisierung...</p>
+                    </div>}>
+                        <DreamVR dream={dream} height="600px"/>
+                    </Suspense>
+                </div>
+            )}
+
             <div className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6">
                 <h2 className="text-lg font-semibold mb-3 dreamy-text">Details</h2>
                 <div className="space-y-3" style={{color: 'var(--text-muted)'}}>
@@ -183,7 +273,22 @@ export default function DreamPage() {
                         <span className="font-medium mb-1 sm:mb-0">Datum</span>
                         <span>
                             {formatDateNumeric(dream.date)}
-                          </span>
+                        </span>
+                    </div>
+                    <div className="flex flex-col sm:flex-row sm:justify-between">
+                        <span className="font-medium mb-1 sm:mb-0">Tags</span>
+                        <div className="flex flex-wrap gap-2">
+                            {dream.tags.map((tag, index) => (
+                                <span key={index} className="px-2 py-1 text-xs rounded-full"
+                                      style={{
+                                          background: 'var(--accent-gradient)',
+                                          color: 'white',
+                                          boxShadow: '0 2px 5px var(--shadow)'
+                                      }}>
+                                    {tag}
+                                </span>
+                            ))}
+                        </div>
                     </div>
                 </div>
             </div>

src/pages/Home.tsx

@@ -4,7 +4,6 @@ import {getSortedDreamsByDate} from '../utils/DreamUtils.ts';
 import {getBackgroundStyle, getCardStyle, getTextStyle} from '../styles/StyleUtils';
 import {formatDateFull} from '../utils/DateUtils';
 import {NavLink} from 'react-router-dom';
-import {DreamRecord} from "../components/DreamRecord.tsx";
 import {DreamCardCompact} from "../components/DreamCardCompact.tsx";
 import {DailyHighlights} from "../components/DailyHighlights.tsx";
 import {ChipCard} from "../components/ChipCard.tsx";
@@ -25,8 +24,7 @@ export default function Home() {
     ).slice(0, 5);
 
     return (
-        <div className="p-4 dream-container backdrop-blur-md bg-opacity-30"
+        <div className="page p-4 space-y-6">
-             style={{backgroundColor: 'transparent', boxShadow: '0 10px 30px var(--shadow)'}}>
             {/* Welcome Card */}
             <div className={getCardStyle().className}
                  style={getCardStyle()}>
@@ -54,7 +52,7 @@ export default function Home() {
                 </div>
             </div>
 
-            <DreamRecord/>
+            {/*<DreamRecord/>*/}
 
             {/* Personal Feed */}
             <NavLink to='/feed'
@@ -102,7 +100,7 @@ export default function Home() {
             </NavLink>
 
             {/* Daily Highlights */}
-            <NavLink to='/archive'>
+            <NavLink to='/dreamarchive/user-dreams'>
                 <DailyHighlights/>
             </NavLink>
 

src/pages/Overview.tsx

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

src/pages/ProfilePage.tsx

@@ -13,57 +13,60 @@ const ProfilePage: React.FC = () => {
 
   return (
     <div className="page p-4 pb-20">
+        {/* Profile Card */}
         <div
-            className="dreamy-border rounded-xl p-6 max-w-md mx-auto overflow-hidden"
+            className="dreamy-border rounded-xl p-6 max-w-md mx-auto overflow-hidden mb-10"
             style={{
                 background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25))',
                 backdropFilter: 'blur(10px)',
                 boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2)'
             }}>
-        {/* Profile Picture */}
+            {/* Profile Picture */}
             <div className="w-28 h-28 sm:w-36 sm:h-36 rounded-full overflow-hidden mb-6 mx-auto relative"
                  style={{
                      background: 'var(--accent-gradient)',
                      padding: '4px',
                      boxShadow: '0 0 15px var(--shadow)'
                  }}>
-          <img 
+                <img
-            src={profileUser ? `/assets/profiles/${profileUser.profilePicture}` : `https://ui-avatars.com/api/?name=${defaultName}&background=random&color=fff&size=128`} 
+                    src={profileUser ? `/assets/profiles/${profileUser.profilePicture}` : `https://ui-avatars.com/api/?name=${defaultName}&background=random&color=fff&size=128`}
-            alt={profileUser ? profileUser.name : defaultName}
+                    alt={profileUser ? profileUser.name : defaultName}
-            className="w-full h-full object-cover rounded-full"
+                    className="w-full h-full object-cover rounded-full"
-          />
+                />
-        </div>
-
-        {/* User Information */}
-        <div className="text-center w-full">
-            <h2 className="text-xl sm:text-2xl mb-2 break-words dreamy-text font-bold">{profileUser ? profileUser.name : defaultName}</h2>
-            <p className="text-text-muted mb-8 break-words">{profileUser ? profileUser.email : defaultEmail}</p>
-
-            <div className="grid grid-cols-2 gap-6 mt-6 text-center">
-                <div
-                    className="dreamy-border rounded-lg p-4"
-                    style={{
-                        background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
-                        boxShadow: '0 0 15px var(--shadow)',
-                        backdropFilter: 'blur(5px)'
-                    }}
-                >
-                    <p className="dreamy-text text-2xl sm:text-3xl font-bold">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
-                    <p className="text-sm sm:text-base font-medium" style={{color: 'var(--text)'}}>Dreams</p>
             </div>
-                <div
-                    className="dreamy-border rounded-lg p-4"
-                    style={{
-                        background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
-                        boxShadow: '0 0 15px var(--shadow)',
-                        backdropFilter: 'blur(5px)'
-                    }}
-                >
-                    <p className="dreamy-text text-2xl sm:text-3xl font-bold">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
-                    <p className="text-sm sm:text-base font-medium" style={{color: 'var(--text)'}}>Days Streak</p>
-            </div>
-          </div>
 
+            {/* User Information */}
+            <div className="text-center w-full">
+                <h2 className="text-xl sm:text-2xl mb-2 break-words dreamy-text font-bold">{profileUser ? profileUser.name : defaultName}</h2>
+                <p className="text-text-muted mb-8 break-words">{profileUser ? profileUser.email : defaultEmail}</p>
+
+                <div className="grid grid-cols-2 gap-6 mt-6 text-center">
+                    <div
+                        className="dreamy-border rounded-lg p-4"
+                        style={{
+                            background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
+                            boxShadow: '0 0 15px var(--shadow)',
+                            backdropFilter: 'blur(5px)'
+                        }}
+                    >
+                        <p className="dreamy-text text-2xl sm:text-3xl font-bold">{profileUser ? profileUser.dreamCount : defaultDreamCount}</p>
+                        <p className="text-sm sm:text-base font-medium" style={{color: 'var(--text)'}}>Dreams</p>
+                    </div>
+                    <div
+                        className="dreamy-border rounded-lg p-4"
+                        style={{
+                            background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
+                            boxShadow: '0 0 15px var(--shadow)',
+                            backdropFilter: 'blur(5px)'
+                        }}
+                    >
+                        <p className="dreamy-text text-2xl sm:text-3xl font-bold">{profileUser ? profileUser.streakDays : defaultStreakDays}</p>
+                        <p className="text-sm sm:text-base font-medium" style={{color: 'var(--text)'}}>Days Streak</p>
+                    </div>
+                </div>
+            </div>
+
+            {/* Account Settings (moved back into profile card) */}
             <div className="mt-10">
                 <h3 className="dreamy-text text-lg mb-4 font-bold">Account Settings</h3>
                 <div
@@ -84,8 +87,8 @@ const ProfilePage: React.FC = () => {
                                       opacity: '0.9',
                                       boxShadow: 'inset 0 0 5px rgba(166, 77, 255, 0.5)'
                                   }}></span>
-                </label>
+                        </label>
-              </div>
+                    </div>
                     <div className="flex justify-between items-center py-3 flex-wrap">
                         <span className="mr-2 font-medium" style={{color: 'var(--text)'}}>Privacy</span>
                         <label className="relative inline-block w-12 h-6">
@@ -96,14 +99,58 @@ const ProfilePage: React.FC = () => {
                                       opacity: '0.9',
                                       boxShadow: 'inset 0 0 5px rgba(166, 77, 255, 0.5)'
                                   }}></span>
-                </label>
+                        </label>
-              </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {/* Project Information Card */}
+        <div
+            className="dreamy-border rounded-xl p-6 max-w-md mx-auto overflow-hidden"
+            style={{
+                background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25))',
+                backdropFilter: 'blur(10px)',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2)'
+            }}>
+            <h3 className="dreamy-text text-lg mb-4 font-bold text-center">Project Information</h3>
+            <div
+                className="dreamy-border rounded-lg p-5 text-left"
+                style={{
+                    background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35))',
+                    boxShadow: '0 0 15px var(--shadow)',
+                    backdropFilter: 'blur(5px)'
+                }}
+            >
+                <div className="py-2 border-b border-purple-100/30">
+                    <p className="font-medium mb-1" style={{color: 'var(--text)'}}>Gitea Link:</p>
+                    <a
+                        href="https://gitea.puchstein.bayern/mpuchstein/REMind"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-sm break-words hover:underline"
+                        style={{color: 'var(--accent)'}}
+                    >
+                        https://gitea.puchstein.bayern/mpuchstein/REMind
+                    </a>
+                </div>
+                <div className="py-2 border-b border-purple-100/30">
+                    <p className="font-medium mb-1" style={{color: 'var(--text)'}}>Gruppenmitglieder:</p>
+                    <p className="text-sm">Kim Anhäuser, Matthias Puchstein, Anya Zell</p>
+                </div>
+                <div className="py-2 border-b border-purple-100/30">
+                    <p className="font-medium mb-1" style={{color: 'var(--text)'}}>Modul:</p>
+                    <p className="text-sm">Einführung in die Text und Medienanalyse bei Prof. Dr. Rettiner und Dr. phil.
+                        Ripoll</p>
+                </div>
+                <div className="py-2">
+                    <p className="font-medium mb-1" style={{color: 'var(--text)'}}>Genutzte AI:</p>
+                    <p className="text-sm">Perplexity, Junie, Veo, Imgen, Suno</p>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
     </div>
   );
 };
 
-export default ProfilePage;
+export default ProfilePage;

src/pages/dreamarchive/CulturalLandscapes.tsx

@@ -0,0 +1,291 @@
+import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
+import {FaGlobeAfrica, FaGlobeAsia, FaGlobeEurope, FaHandshake} from 'react-icons/fa';
+
+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>
+    </div>);
+}

src/pages/dreamarchive/DreamArchiveIndex.tsx

@@ -0,0 +1,141 @@
+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="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>
+    );
+}

src/pages/dreamarchive/LivingConditions.tsx

@@ -0,0 +1,331 @@
+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>);
+}

src/pages/dreamarchive/ResearchLive.tsx

@@ -0,0 +1,138 @@
+import {FaCalendarAlt, FaClipboardCheck, FaGlobeEurope, FaUsers} from 'react-icons/fa';
+import mockResearchLive from '../../data/MockResearchLive';
+import HeroSection from '../../components/dreamarchive/HeroSection';
+import SectionHeader from '../../components/dreamarchive/SectionHeader';
+import DreamyCard from '../../components/dreamarchive/DreamyCard';
+import StudyCard from '../../components/dreamarchive/StudyCard';
+import IconWithBackground from '../../components/dreamarchive/IconWithBackground';
+
+export default function ResearchLive() {
+    return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
+        {/* Hero Section */}
+        <HeroSection
+            containerTitle="Sei Teil der Traumforschung"
+            description="Entdecke laufende Forschungsprojekte, nimm an Studien teil und lerne von führenden Traumforschern aus der ganzen Welt."
+        />
+
+        {/* Citizen Science */}
+        <div className="mb-12">
+            <DreamyCard color="violet">
+                <div className="flex items-center mb-6">
+                    <IconWithBackground
+                        icon={<FaCalendarAlt/>}
+                        color="violet"
+                        size={28}
+                        className="mr-4"
+                    />
+                    <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">
+                    {mockResearchLive.citizenScienceProjects.map((project) => {
+                        // Dynamically determine which icon component to use
+                        let IconComponent;
+                        switch (project.icon) {
+                            case 'FaClipboardCheck':
+                                IconComponent = FaClipboardCheck;
+                                break;
+                            case 'FaGlobeEurope':
+                                IconComponent = FaGlobeEurope;
+                                break;
+                            case 'FaUsers':
+                                IconComponent = FaUsers;
+                                break;
+                            default:
+                                IconComponent = FaClipboardCheck;
+                        }
+
+                        return (<div key={project.id}
+                                     className="bg-white/20 dark:bg-black/20 p-4 rounded-lg flex flex-col min-h-[200px]">
+                            <div className="flex justify-center mb-3">
+                                <div className="p-2 bg-violet-500/20 rounded-full">
+                                    <IconComponent className="text-violet-600 dark:text-violet-400" size={20}/>
+                                </div>
+                            </div>
+                            <h4 className="font-bold mb-2 text-center">{project.title}</h4>
+                            <p className="text-sm flex-grow">
+                                {project.description}
+                            </p>
+                            <div className="mt-3 text-center">
+                                {project.optedIn ? (
+                                    <button
+                                        className="py-1 px-3 text-white text-xs rounded-lg transition-colors">
+                                        Danke!
+                                    </button>) : (
+                                    <button
+                                        className="py-1 px-3 dreamy-button text-green 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>
+            </DreamyCard>
+        </div>
+
+
+        {/* Current Studies */}
+        <div className="mb-12">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {mockResearchLive.currentStudies.slice(0, 2).map((study) => (
+                    <StudyCard key={study.id} study={study}/>))}
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
+                {mockResearchLive.currentStudies.slice(2, 4).map((study) => (
+                    <StudyCard key={study.id} study={study}/>))}
+            </div>
+        </div>
+
+        {/* Upcoming Events */}
+        <div className="mb-12">
+            <SectionHeader title="Kommende Veranstaltungen"/>
+
+            <DreamyCard color="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>
+                        {mockResearchLive.upcomingEvents.map((event, index) => (
+                            <tr key={event.id} className={index % 2 === 0 ? "bg-white/10 dark:bg-black/10" : ""}>
+                                <td className="p-2">{event.date}</td>
+                                <td className="p-2">{event.title}</td>
+                                <td className="p-2">{event.location}</td>
+                                <td className="p-2">
+                                        <span
+                                            className={`bg-${event.typeColor}-100 dark:bg-${event.typeColor}-900 text-${event.typeColor}-800 dark:text-${event.typeColor}-200 text-xs px-2 py-0.5 rounded-full`}>
+                                          {event.type}
+                                        </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>
+            </DreamyCard>
+        </div>
+    </div>);
+}

src/pages/dreamarchive/Technology.tsx

@@ -0,0 +1,558 @@
+import {getTextStyle} from '../../styles/StyleUtils';
+import {FaBrain, FaChartBar, FaChartPie, FaLaptopCode, FaMicrochip, FaRobot, FaVrCardboard} 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';
+import {useEffect, useRef} from 'react';
+import * as d3 from 'd3';
+
+// Dream types data with percentages and colors
+const dreamTypesData = [
+    {type: "Angstträume", percentage: 34, color: "#ef4444", darkColor: "#dc2626", note: "Global durchschnittlich"},
+    {type: "Soziale Träume", percentage: 28, color: "#3b82f6", darkColor: "#2563eb", note: "Kulturelle Variationen"},
+    {type: "Flugträume", percentage: 18, color: "#a855f7", darkColor: "#9333ea", note: "Persönlichkeitsabhängig"},
+    {type: "Sexuelle Träume", percentage: 12, color: "#ec4899", darkColor: "#db2777", note: "Altersabhängig"},
+    {type: "Verfolgungsträume", percentage: 8, color: "#f97316", darkColor: "#ea580c", note: "Stresskorreliert"}
+];
+
+// D3.js Pie Chart Component
+function D3PieChart() {
+    const svgRef = useRef<SVGSVGElement>(null);
+    const tooltipRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    useEffect(() => {
+        if (!svgRef.current || !tooltipRef.current || !containerRef.current) return;
+
+        // Clear any existing SVG content
+        d3.select(svgRef.current).selectAll("*").remove();
+
+        // Set up dimensions
+        const width = svgRef.current.clientWidth;
+        const height = svgRef.current.clientHeight;
+        const margin = 10;
+        const radius = Math.min(width, height) / 2 - margin;
+
+        // Create SVG
+        const svg = d3.select(svgRef.current)
+            .attr("width", width)
+            .attr("height", height)
+            .append("g")
+            .attr("transform", `translate(${width / 2}, ${height / 2})`);
+
+        // Create pie generator
+        const pie = d3.pie<typeof dreamTypesData[0]>()
+            .value(d => d.percentage)
+            .sort(null);
+
+        // Create arc generator
+        const arc = d3.arc<d3.PieArcDatum<typeof dreamTypesData[0]>>()
+            .innerRadius(0)
+            .outerRadius(radius);
+
+        // Get tooltip element
+        const tooltip = d3.select(tooltipRef.current);
+
+        // Function to show tooltip
+        const showTooltip = (event: MouseEvent | TouchEvent, d: d3.PieArcDatum<typeof dreamTypesData[0]>) => {
+            const data = d.data;
+
+            // Set tooltip content
+            tooltip.html(`
+                <div class="font-bold">${data.type}</div>
+                <div>${data.percentage}%</div>
+                <div class="text-xs opacity-75">${data.note}</div>
+            `);
+
+            // Make tooltip visible
+            tooltip
+                .style("opacity", 1)
+                .style("visibility", "visible");
+
+            // Position tooltip
+            const containerRect = containerRef.current!.getBoundingClientRect();
+            let x, y;
+
+            if (event instanceof MouseEvent) {
+                x = event.clientX - containerRect.left;
+                y = event.clientY - containerRect.top;
+            } else {
+                // TouchEvent
+                const touch = (event as TouchEvent).touches[0];
+                x = touch.clientX - containerRect.left;
+                y = touch.clientY - containerRect.top;
+            }
+
+            // Adjust position to avoid going off the container
+            const tooltipRect = tooltipRef.current!.getBoundingClientRect();
+            if (x + tooltipRect.width > containerRect.width) {
+                x = x - tooltipRect.width;
+            }
+            if (y + tooltipRect.height > containerRect.height) {
+                y = y - tooltipRect.height;
+            }
+
+            tooltip
+                .style("left", `${x + 10}px`)
+                .style("top", `${y + 10}px`);
+        };
+
+        // Function to hide tooltip
+        const hideTooltip = () => {
+            tooltip
+                .style("opacity", 0)
+                .style("visibility", "hidden");
+        };
+
+        // Create pie chart with event handlers
+        svg.selectAll("path")
+            .data(pie(dreamTypesData))
+            .enter()
+            .append("path")
+            .attr("d", arc)
+            .attr("fill", d => isDarkMode ? d.data.darkColor : d.data.color)
+            .attr("stroke", "white")
+            .style("stroke-width", "1px")
+            .style("cursor", "pointer")
+            // Desktop hover events
+            .on("mouseover", function (event, d) {
+                // Calculate centroid for this arc to ensure zoom is centered properly
+                const centroid = arc.centroid(d);
+                const x = centroid[0];
+                const y = centroid[1];
+
+                d3.select(this).transition().duration(200)
+                    .attr("opacity", 0.8)
+                    .attr("stroke-width", "2px")
+                    // Apply zoom transformation centered on the arc's centroid
+                    .attr("transform", `translate(${x},${y}) scale(1.05) translate(${-x},${-y})`);
+                showTooltip(event, d);
+            })
+            .on("mouseout", function () {
+                d3.select(this).transition().duration(200)
+                    .attr("opacity", 1)
+                    .attr("stroke-width", "1px")
+                    .attr("transform", null); // Completely remove the transform to reset zoom
+                hideTooltip();
+            })
+            // Mobile/touch events
+            .on("touchstart", function (event, d) {
+                // Stop propagation to prevent document touchstart from firing
+                event.stopPropagation();
+                // Prevent default to avoid any browser handling
+                event.preventDefault();
+
+                // Store a reference to the element without using 'this'
+                const element = event.currentTarget;
+
+                // Calculate centroid for this arc to ensure zoom is centered properly
+                const centroid = arc.centroid(d);
+                const x = centroid[0];
+                const y = centroid[1];
+
+                // Visual feedback
+                d3.select(element).transition().duration(200)
+                    .attr("opacity", 0.8)
+                    .attr("stroke-width", "2px")
+                    // Apply zoom transformation centered on the arc's centroid
+                    .attr("transform", `translate(${x},${y}) scale(1.05) translate(${-x},${-y})`);
+
+                // Show tooltip
+                showTooltip(event, d);
+
+                // Add a temporary touchend handler to reset the visual state
+                // but keep the tooltip visible
+                document.addEventListener("touchend", function () {
+                    d3.select(element).transition().duration(200)
+                        .attr("opacity", 1)
+                        .attr("stroke-width", "1px")
+                        .attr("transform", null); // Completely remove the transform to reset zoom
+                }, {once: true});
+            })
+            .on("click", function (event, d) {
+                event.stopPropagation();
+                showTooltip(event, d);
+            });
+
+        // Add center circle
+        svg.append("circle")
+            .attr("cx", 0)
+            .attr("cy", 0)
+            .attr("r", radius * 0.4)
+            .attr("fill", isDarkMode ? "#1f2937" : "#ffffff")
+            .attr("stroke", isDarkMode ? "#374151" : "#e5e7eb")
+            .style("stroke-width", "1px");
+
+        // Add center text
+        svg.append("text")
+            .attr("text-anchor", "middle")
+            .attr("dy", "0.35em")
+            .attr("class", "text-sm font-bold")
+            .attr("fill", isDarkMode ? "#e5e7eb" : "#1f2937")
+            .text("100%");
+
+        // Create a function to handle document touchstart that doesn't immediately hide the tooltip
+        const handleDocumentTouchStart = (event: TouchEvent) => {
+            // Only hide the tooltip if the touch is outside the pie chart segments
+            const paths = svg.selectAll("path").nodes();
+            const touchTarget = document.elementFromPoint(
+                event.touches[0].clientX,
+                event.touches[0].clientY
+            );
+
+            // Don't hide if touching a pie segment
+            if (paths.some(path => path === touchTarget)) {
+                return;
+            }
+
+            hideTooltip();
+        };
+
+        // Add click event to document to hide tooltip when clicking outside
+        document.addEventListener("click", hideTooltip);
+        document.addEventListener("touchstart", handleDocumentTouchStart);
+
+        // Cleanup event listeners on unmount
+        return () => {
+            document.removeEventListener("click", hideTooltip);
+            document.removeEventListener("touchstart", handleDocumentTouchStart);
+        };
+    }, [isDarkMode]);
+
+    return (
+        <div ref={containerRef} className="relative w-full aspect-square max-w-xs mx-auto">
+            <svg ref={svgRef} className="w-full h-full"></svg>
+            <div
+                ref={tooltipRef}
+                className="absolute pointer-events-none bg-white dark:bg-gray-800 p-2 rounded shadow-lg text-sm z-10 transition-opacity duration-200"
+                style={{
+                    opacity: 0,
+                    visibility: 'hidden',
+                    maxWidth: '150px',
+                    border: '1px solid',
+                    borderColor: isDarkMode ? 'rgba(75, 85, 99, 0.5)' : 'rgba(229, 231, 235, 0.5)'
+                }}
+            ></div>
+        </div>
+    );
+}
+
+export default function Technology() {
+    return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
+        {/* Hero Section */}
+        <HeroSection
+            containerTitle="Die Zukunft der Traumforschung"
+            description="Entdecke bahnbrechende Technologien, die uns helfen, Träume besser zu verstehen, zu analysieren und sogar zu steuern."
+        />
+
+        {/* Latest Developments */}
+        <div className="mb-12">
+            <SectionHeader title="Neueste Entwicklungen"/>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {/* EEG-based Dream Detection */}
+                <DreamyCard color="blue" className="h-full flex flex-col">
+                    <div className="flex justify-center mb-4">
+                        <IconWithBackground icon={<FaBrain/>} color="blue"/>
+                    </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>
+                </DreamyCard>
+
+                {/* DreamNet Framework */}
+                <DreamyCard color="purple" className="h-full flex flex-col">
+                    <div className="flex justify-center mb-4">
+                        <IconWithBackground icon={<FaLaptopCode/>} color="purple"/>
+                    </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>
+                </DreamyCard>
+
+                {/* Lucid Dreaming Control */}
+                <DreamyCard color="emerald" className="h-full flex flex-col">
+                    <div className="flex justify-center mb-4">
+                        <IconWithBackground icon={<FaVrCardboard/>} color="emerald"/>
+                    </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>
+                </DreamyCard>
+            </div>
+        </div>
+
+        {/* Dream Type Classification */}
+        <div className="mb-12">
+            <SectionHeader title="Traumtypen-Klassifikation"/>
+
+            <DreamyCard color="rose">
+                <div className="flex items-center justify-center mb-6">
+                    <IconWithBackground icon={<FaChartPie/>} color="rose" className="mr-3"/>
+                    <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>
+                        {/* D3.js Pie Chart */}
+                        <D3PieChart/>
+                    </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-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-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-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>
+            </DreamyCard>
+        </div>
+
+        {/* Future Technologies */}
+        <div className="mb-12">
+            <SectionHeader title="Zukunftstechnologien"/>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Dream Recording */}
+                <DreamyCard color="violet" className="h-full flex flex-col">
+                    <div className="flex items-center mb-4">
+                        <IconWithBackground icon={<FaMicrochip/>} color="violet" className="mr-4"/>
+                        <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>
+                </DreamyCard>
+
+                {/* Dream Sharing */}
+                <DreamyCard color="amber" className="h-full flex flex-col">
+                    <div className="flex items-center mb-4">
+                        <IconWithBackground icon={<FaChartBar/>} color="amber" className="mr-4"/>
+                        <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>
+                </DreamyCard>
+            </div>
+        </div>
+
+        {/* Ethical Considerations */}
+        <div className="mb-12">
+            <SectionHeader title="Ethische Überlegungen"/>
+
+            <DreamyCard color="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>
+            </DreamyCard>
+        </div>
+    </div>);
+}

src/pages/dreamarchive/UserDreams.tsx

@@ -0,0 +1,353 @@
+import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
+import {FaChartLine, FaRegCommentDots, FaRegLightbulb, FaUser} from 'react-icons/fa';
+import {MockUserMap} from '../../data/MockUsers';
+import mockUserDreams from '../../data/MockUserDreams';
+
+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">
+                                {mockUserDreams.userDreamThemes.map((item, index) => (
+                                    <div key={index}>
+                                        <div className="flex justify-between text-xs mb-1">
+                                            <span>{item.theme}</span>
+                                            <span>{item.percentage}%</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-${item.color}-500 dark:bg-${item.color}-600 rounded-full`}
+                                                style={{width: `${item.percentage}%`}}></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: {mockUserDreams.dreamEmotionsComparison.positive.global}%</span>
+                                    <span
+                                        className="text-xs font-bold">Du: {mockUserDreams.dreamEmotionsComparison.positive.user}%</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: `${mockUserDreams.dreamEmotionsComparison.positive.global}%`}}></div>
+                                <div
+                                    className={`absolute top-0 left-0 h-full bg-${mockUserDreams.dreamEmotionsComparison.positive.color}-500 dark:bg-${mockUserDreams.dreamEmotionsComparison.positive.color}-600 rounded-full border-r-2 border-white dark:border-gray-900`}
+                                    style={{width: `${mockUserDreams.dreamEmotionsComparison.positive.user}%`}}></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: {mockUserDreams.dreamEmotionsComparison.negative.global}%</span>
+                                    <span
+                                        className="text-xs font-bold">Du: {mockUserDreams.dreamEmotionsComparison.negative.user}%</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: `${mockUserDreams.dreamEmotionsComparison.negative.global}%`}}></div>
+                                <div
+                                    className={`absolute top-0 left-0 h-full bg-${mockUserDreams.dreamEmotionsComparison.negative.color}-500 dark:bg-${mockUserDreams.dreamEmotionsComparison.negative.color}-600 rounded-full border-r-2 border-white dark:border-gray-900`}
+                                    style={{width: `${mockUserDreams.dreamEmotionsComparison.negative.user}%`}}></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: {mockUserDreams.dreamEmotionsComparison.neutral.global}%</span>
+                                    <span
+                                        className="text-xs font-bold">Du: {mockUserDreams.dreamEmotionsComparison.neutral.user}%</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: `${mockUserDreams.dreamEmotionsComparison.neutral.global}%`}}></div>
+                                <div
+                                    className={`absolute top-0 left-0 h-full bg-${mockUserDreams.dreamEmotionsComparison.neutral.color}-500 dark:bg-${mockUserDreams.dreamEmotionsComparison.neutral.color}-600 rounded-full border-r-2 border-white dark:border-gray-900`}
+                                    style={{width: `${mockUserDreams.dreamEmotionsComparison.neutral.user}%`}}></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">
+                                    {mockUserDreams.dreamThemesComparison.userTopThemes.map((item, index) => (
+                                        <li key={index}>{item.theme} ({item.percentage}%)</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">
+                                    {mockUserDreams.dreamThemesComparison.globalTopThemes.map((item, index) => (
+                                        <li key={index}>{item.theme} ({item.percentage}%)</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">
+                                {mockUserDreams.uniqueDreamAspects.map((aspect, index) => (
+                                    <li key={index}>{aspect}</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')}>
+                                {mockUserDreams.dreamThemeTimeline.timePoints.map((timePoint, index) => (
+                                    <div className="text-center" key={index}>
+                                        <div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
+                                        <div className="mt-2">{timePoint}</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 */}
+                            {mockUserDreams.dreamThemeTimeline.themes.map((theme, index) => {
+                                // Convert dataPoints to SVG points format
+                                // Each point is a percentage of the way across (x) and a percentage of the way down (y)
+                                const points = theme.dataPoints.map((point, i) => {
+                                    const x = (i / (theme.dataPoints.length - 1)) * 100;
+                                    return `${x},${point}`;
+                                }).join(' ');
+
+                                return (
+                                    <svg key={index} className="absolute inset-0" viewBox="0 0 100 100"
+                                         preserveAspectRatio="none">
+                                        <polyline
+                                            points={points}
+                                            fill="none"
+                                            stroke={theme.color}
+                                            strokeWidth="2"
+                                        />
+                                    </svg>
+                                );
+                            })}
+
+                            {/* Legend */}
+                            <div className="absolute top-0 right-0 bg-white/50 dark:bg-black/50 p-2 rounded-lg">
+                                {mockUserDreams.dreamThemeTimeline.themes.map((theme, index) => (
+                                    <div key={index} className="flex items-center mb-1">
+                                        <div className="w-3 h-3 mr-2" style={{backgroundColor: theme.color}}></div>
+                                        <span className="text-xs">{theme.name}</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">
+                        {mockUserDreams.dreamInsights.map((insight, index) => (
+                            <li key={index}>{insight}</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">
+                        {mockUserDreams.dreamRecommendations.forDreamWork.map((recommendation, index) => (
+                            <li key={index}>{recommendation}</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">
+                        {mockUserDreams.dreamRecommendations.basedOnProfile.map((recommendation, index) => (
+                            <li key={index}>{recommendation}</li>
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>);
+}

src/pages/dreamarchive/WorldwideEvents.tsx

@@ -0,0 +1,118 @@
+import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
+import {FaFire, FaFlag, FaVirus} from 'react-icons/fa';
+import mockWorldwideEvents from '../../data/MockWorldwideEvents';
+import HeroSection from '../../components/dreamarchive/HeroSection';
+import SectionHeader from '../../components/dreamarchive/SectionHeader';
+
+export default function WorldwideEvents() {
+    return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
+        {/* Hero Section */}
+        <HeroSection
+            containerTitle="Signifikante Ereignisse 2020-2025"
+            description="Entdecke, wie weltweite Ereignisse wie die COVID-19 Pandemie, Klimawandel-Ereignisse und geopolitische Spannungen die Traumlandschaft beeinflusst haben."
+        />
+
+        {/* Interactive Timeline (Mock) */}
+        <div className="mb-12">
+            <SectionHeader title="Zeitlinie der Ereignisse"/>
+            <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">
+                    {mockWorldwideEvents.timelineEvents.map((event, index) => {
+                        const isEven = index % 2 === 0;
+                        const isLast = index === mockWorldwideEvents.timelineEvents.length - 1;
+
+                        return (
+                            <div key={index} className={`${!isLast ? 'mb-12' : ''} flex items-center`}>
+                                <div className="w-1/2 pr-8 text-right">
+                                    {isEven ? (
+                                        <>
+                                            <h3 className="text-xl font-bold mb-2 dreamy-text">{event.year}</h3>
+                                            <p className="text-sm" style={getTextStyle()}>{event.event}</p>
+                                        </>
+                                    ) : (
+                                        <div className="dreamy-card p-4">
+                                            <p className="text-sm mb-2" style={getTextStyle()}>{event.dreamEffect}</p>
+                                            <p className="text-xs"
+                                               style={getTextStyle('muted')}>{event.dreamEffectDetail}</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">
+                                    {isEven ? (
+                                        <div className="dreamy-card p-4">
+                                            <p className="text-sm mb-2" style={getTextStyle()}>{event.dreamEffect}</p>
+                                            <p className="text-xs"
+                                               style={getTextStyle('muted')}>{event.dreamEffectDetail}</p>
+                                        </div>
+                                    ) : (
+                                        <>
+                                            <h3 className="text-xl font-bold mb-2 dreamy-text">{event.year}</h3>
+                                            <p className="text-sm" style={getTextStyle()}>{event.event}</p>
+                                        </>
+                                    )}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+
+        {/* Detailed Event Sections */}
+        <div className="mb-12">
+            <SectionHeader title="Detaillierte Ereignisanalyse"/>
+
+            {mockWorldwideEvents.detailedEvents.map((event, index) => {
+                // Dynamically determine which icon component to use
+                let IconComponent;
+                switch (event.icon) {
+                    case 'FaVirus':
+                        IconComponent = FaVirus;
+                        break;
+                    case 'FaFire':
+                        IconComponent = FaFire;
+                        break;
+                    case 'FaFlag':
+                        IconComponent = FaFlag;
+                        break;
+                    default:
+                        IconComponent = FaVirus;
+                }
+
+                const isLast = index === mockWorldwideEvents.detailedEvents.length - 1;
+
+                return (
+                    <div key={event.id} className={`dreamy-card ${!isLast ? 'mb-8' : ''} p-6`}
+                         style={getBackgroundStyle(event.color as 'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta')}>
+                        <div className="flex flex-col md:flex-row items-center mb-4">
+                            <div className={`p-3 bg-${event.color}-500/20 rounded-full mb-4 md:mb-0 md:mr-4`}>
+                                <IconComponent className={`text-${event.color}-600 dark:text-${event.color}-400`}
+                                               size={32}/>
+                            </div>
+                            <h3 className="text-xl font-bold dreamy-text">{event.title}</h3>
+                        </div>
+
+                        <div className={`grid grid-cols-1 md:grid-cols-${event.details.length} gap-4 mb-4`}>
+                            {event.details.map((detail, detailIndex) => (
+                                <div key={detailIndex} className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
+                                    <h4 className="font-bold mb-2">{detail.title}</h4>
+                                    <p className="text-sm">{detail.description}</p>
+                                </div>
+                            ))}
+                        </div>
+
+                        <p className="text-sm">
+                            {event.summary}
+                        </p>
+                    </div>
+                );
+            })}
+        </div>
+    </div>);
+}

src/types/Dream.ts

@@ -16,12 +16,27 @@ export type AudioInput = {
     transcript: string;
 }
 
+export type ChipInput = {
+    inputType: "chip";
+    text: string;
+    eeg: {
+        alpha: number[];
+        beta: number[];
+        theta: number[];
+        delta: number[];
+    }
+    puls: number[];
+    hrv: number[];
+    bewegung: number[];
+}
+
 export default class Dream{
     id: number;
     userId: number;
     title: string;
     date: Date;
-    input: TextInput | ImageInput | AudioInput;
+    tags: string[];
+    input: TextInput | ImageInput | AudioInput | ChipInput;
     ai?:{
         interpretation: string;
         image?: string;
@@ -29,13 +44,17 @@ export default class Dream{
         video?: string;
         models?: string;
     }
+    vr?: {
+        models: never;
+    }
 
     constructor(params: {
         id: number;
         userId: number;
         title: string;
         date: Date;
-        input: TextInput | ImageInput | AudioInput;
+        tags: string[];
+        input: TextInput | ImageInput | AudioInput | ChipInput;
         ai: {
             interpretation: string;
             image?: string;
@@ -48,6 +67,7 @@ export default class Dream{
         this.userId = params.userId;
         this.title = params.title;
         this.date = params.date;
+        this.tags = params.tags;
         this.input = params.input;
         this.ai= params.ai;
     }

vite.config.ts

@@ -8,4 +8,34 @@ export default defineConfig({
         react(),
         tailwindcss()
     ],
+    build: {
+        rollupOptions: {
+            output: {
+                manualChunks: {
+                    // Group Three.js related libraries
+                    'three-bundle': [
+                        'three',
+                        '@react-three/fiber',
+                        '@react-three/drei',
+                        'three-stdlib'
+                    ],
+                    // D3 visualization library
+                    'd3': ['d3'],
+                    // Slider related libraries
+                    'slider': [
+                        'react-slick',
+                        'slick-carousel'
+                    ],
+                    // React and related libraries
+                    'react-vendor': [
+                        'react',
+                        'react-dom',
+                        'react-router-dom'
+                    ]
+                }
+            }
+        },
+        // Increase the warning limit to avoid unnecessary warnings
+        chunkSizeWarningLimit: 1000
+    }
 })