reworked layout and styles, added new overview page and improved theme handling

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

src/App.css

@@ -65,6 +65,9 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: bold;
+    text-rendering: geometricPrecision;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .dreamy-border {

src/App.tsx

@@ -3,11 +3,12 @@ import {useState} from 'react';
 import Navbar from './components/Navbar';
 import TopBar from './components/TopBar';
 import SplashScreen from './components/SplashScreen';
-import {BrowserRouter, Route, Routes} from 'react-router-dom';
+import {BrowserRouter, Route, Routes, useLocation} from 'react-router-dom';
 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";
 
 function Record() {
     return (
@@ -116,16 +117,9 @@ function Archive() {
 
 export default function App() {
     const [isLoading, setIsLoading] = useState(true);
-    const [isLoggedIn, setIsLoggedIn] = useState(localStorage.getItem('loggedIn') === 'true' || false);
 
-    const handleLogin = () => {
-        setIsLoggedIn(true);
-        localStorage.setItem('loggedIn', 'true');
-    }
     const handleSplashFinished = () => {
         setIsLoading(false);
-        setIsLoggedIn(false);
-        localStorage.setItem('loggedIn', 'false');
     };
 
     if (isLoading) {
@@ -135,23 +129,34 @@ export default function App() {
     return (
         <div className="App">
             <BrowserRouter>
-                <div className="pb-16 pt-8 min-h-screen">
-                    <TopBar/>
-                    <div className="mx-auto w-full max-w-lg px-4 sm:px-6 md:max-w-2xl lg:max-w-4xl">
-                        <Navbar isLoggedIn={isLoggedIn}/>
-                        <div className="mt-16 mb-20">
-                            <Routes>
-                                <Route path="/" element={<Home isLoggedIn={isLoggedIn} handleLogin={handleLogin}/>}/>
-                                <Route path="/feed" element={<Feed/>}/>
-                                <Route path="/record" element={<Record/>}/>
-                                <Route path="/archive" element={<Archive/>}/>
-                                <Route path="/profile" element={<ProfilePage/>}/>
-                                <Route path="/dream/:id" element={<DreamPage/>}/>
-                            </Routes>
-                        </div>
-                    </div>
-                </div>
+                <AppContent/>
             </BrowserRouter>
         </div>
     );
 }
+
+// Separate component to use useLocation hook
+function AppContent() {
+    const location = useLocation();
+    const isOverviewPage = location.pathname === '/';
+
+    return (
+        <div className="pb-16 pt-8 min-h-screen">
+            <TopBar/>
+            <div className="mx-auto w-full max-w-lg px-4 sm:px-6 md:max-w-2xl lg:max-w-4xl">
+                {!isOverviewPage && <Navbar/>}
+                <div className={isOverviewPage ? "" : "mt-16 mb-20"}>
+                    <Routes>
+                        <Route path="/" element={<Overview/>}/>
+                        <Route path="/home" element={<Home/>}/>
+                        <Route path="/feed" element={<Feed/>}/>
+                        <Route path="/record" element={<Record/>}/>
+                        <Route path="/archive" element={<Archive/>}/>
+                        <Route path="/profile" element={<ProfilePage/>}/>
+                        <Route path="/dream/:id" element={<DreamPage/>}/>
+                    </Routes>
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/Navbar.tsx

@@ -1,19 +1,12 @@
 import {NavLink} from 'react-router-dom';
 import {FaArchive, FaHome, FaList, FaMicrophone, FaUser} from "react-icons/fa";
 
-interface NavbarProps {
-    isLoggedIn: boolean;
-}
-
-export default function Navbar({isLoggedIn}: NavbarProps) {
-    if (!isLoggedIn && localStorage.getItem('loggedIn') !== 'true') return (
-        <></>
-    )
+export default function Navbar() {
     return (<>
             <nav
                 className="fixed bottom-0 left-0 right-0 flex justify-around py-4 z-10"
                 style={{backgroundColor: 'var(--accent-dark)', boxShadow: '0 -2px 10px var(--shadow)'}}>
-                <NavLink to="/" className="transition-transform hover:scale-110">
+                <NavLink to="/home" className="transition-transform hover:scale-110">
                     <FaHome className="w-6 h-6 md:w-8 md:h-8" style={{color: 'var(--accent-soft)'}}/>
                 </NavLink>
                 <NavLink to="/feed" className="transition-transform hover:scale-110">

src/components/TopBar.tsx

@@ -1,96 +1,93 @@
-import { useEffect, useState } from 'react';
+import {useEffect, useState} from 'react';
 import logotext from "../assets/logotext.svg";
+import {NavLink} from "react-router-dom";
 
 export default function TopBar() {
-  const [visible, setVisible] = useState(true);
-  const [lastScrollY, setLastScrollY] = useState(0);
-  const [darkMode, setDarkMode] = useState(false);
+    const [visible, setVisible] = useState(true);
+    const [lastScrollY, setLastScrollY] = useState(0);
+    const [darkMode, setDarkMode] = useState(false);
 
-  // Function to update theme meta tag
-  const updateThemeColor = (isDark: boolean) => {
-    const themeColor = isDark ? '#c490ff' : '#6a0dad';
-    const metaThemeColor = document.querySelector('meta[name="theme-color"]');
-    if (metaThemeColor) {
-      metaThemeColor.setAttribute('content', themeColor);
-    }
-  };
-
-  // Initialize theme based on user preference or system preference
-  useEffect(() => {
-    const isDarkMode = localStorage.getItem('darkMode') === 'true' || 
-                      window.matchMedia('(prefers-color-scheme: dark)').matches;
-    setDarkMode(isDarkMode);
-    document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
-    updateThemeColor(isDarkMode);
-  }, []);
-
-  // Function to toggle theme
-  const toggleTheme = () => {
-    const newDarkMode = !darkMode;
-    setDarkMode(newDarkMode);
-    document.documentElement.setAttribute('data-theme', newDarkMode ? 'dark' : 'light');
-    localStorage.setItem('darkMode', newDarkMode.toString());
-    updateThemeColor(newDarkMode);
-  };
-
-  useEffect(() => {
-    const handleScroll = () => {
-      const currentScrollY = window.scrollY;
-
-      // Hide the topbar when scrolling down, show when scrolling up
-      if (currentScrollY > lastScrollY && currentScrollY > 50) {
-        setVisible(false);
-      } else {
-        setVisible(true);
-      }
-
-      setLastScrollY(currentScrollY);
+    // Function to update theme meta tag
+    const updateThemeColor = (isDark: boolean) => {
+        const themeColor = isDark ? '#c490ff' : '#6a0dad';
+        const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+        if (metaThemeColor) {
+            metaThemeColor.setAttribute('content', themeColor);
+        }
     };
 
-    window.addEventListener('scroll', handleScroll, { passive: true });
+    // Initialize theme based on user preference or system preference
+    useEffect(() => {
+        const isDarkMode = localStorage.getItem('darkMode') === 'true' || window.matchMedia('(prefers-color-scheme: dark)').matches;
+        setDarkMode(isDarkMode);
+        document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
+        updateThemeColor(isDarkMode);
+    }, []);
 
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
+    // Function to toggle theme
+    const toggleTheme = () => {
+        const newDarkMode = !darkMode;
+        setDarkMode(newDarkMode);
+        document.documentElement.setAttribute('data-theme', newDarkMode ? 'dark' : 'light');
+        localStorage.setItem('darkMode', newDarkMode.toString());
+        updateThemeColor(newDarkMode);
     };
-  }, [lastScrollY]);
 
-  return (
-    <div 
-      className={`fixed top-0 left-0 right-0 py-2 md:py-3 px-3 md:px-4 flex items-center transition-transform duration-300 z-20 ${
-        visible ? 'transform-none' : 'transform -translate-y-full'
-      }`}
-      style={{ 
-        background: 'var(--accent-gradient)',
-        boxShadow: '0 2px 10px var(--shadow)'
-      }}
+    useEffect(() => {
+        const handleScroll = () => {
+            const currentScrollY = window.scrollY;
+
+            // Hide the topbar when scrolling down, show when scrolling up
+            if (currentScrollY > lastScrollY && currentScrollY > 50) {
+                setVisible(false);
+            } else {
+                setVisible(true);
+            }
+
+            setLastScrollY(currentScrollY);
+        };
+
+        window.addEventListener('scroll', handleScroll, {passive: true});
+
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, [lastScrollY]);
+
+    return (<div
+        className={`fixed top-0 left-0 right-0 py-2 md:py-3 px-3 md:px-4 flex items-center transition-transform duration-300 z-20 ${visible ? 'transform-none' : 'transform -translate-y-full'}`}
+        style={{
+            background: 'var(--accent-gradient)', boxShadow: '0 2px 10px var(--shadow)'
+        }}
     >
-      <div className="flex items-center justify-between w-full max-w-6xl mx-auto">
-        <div className="flex items-center">
-          <div className="p-1 rounded-lg" style={{ backgroundColor: 'rgba(255, 255, 255, 0.15)', backdropFilter: 'blur(4px)' }}>
-            <img src={logotext} alt="REMind Logo and Text" className="h-16"/>
-          </div>
-        </div>
+        <div className="flex items-center justify-between w-full max-w-6xl mx-auto">
+            <div className="flex items-center">
+                <div className="p-1 rounded-lg"
+                     style={{backgroundColor: 'rgba(255, 255, 255, 0.15)', backdropFilter: 'blur(4px)'}}>
+                    <NavLink to='/home'>
+                        <img src={logotext} alt="REMind Logo and Text" className="h-16"/>
+                    </NavLink>
+                </div>
+            </div>
 
-        <button 
-          onClick={toggleTheme}
-          className="p-2 rounded-full focus:outline-none transition-transform hover:scale-110"
-          aria-label="Toggle theme"
-          style={{ 
-            backgroundColor: 'var(--card)',
-            boxShadow: '0 2px 8px var(--shadow)'
-          }}
-        >
-          {darkMode ? (
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: 'var(--accent)' }}>
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-            </svg>
-          ) : (
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: 'var(--accent-dark)' }}>
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-            </svg>
-          )}
-        </button>
-      </div>
-    </div>
-  );
+            <button
+                onClick={toggleTheme}
+                className="p-2 rounded-full focus:outline-none transition-transform hover:scale-110"
+                aria-label="Toggle theme"
+                style={{
+                    backgroundColor: 'var(--card)', boxShadow: '0 2px 8px var(--shadow)'
+                }}
+            >
+                {darkMode ? (<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 md:h-6 md:w-6" fill="none"
+                                  viewBox="0 0 24 24" stroke="currentColor" style={{color: 'var(--accent)'}}>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                          d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
+                </svg>) : (<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 md:h-6 md:w-6" fill="none"
+                                viewBox="0 0 24 24" stroke="currentColor" style={{color: 'var(--accent-dark)'}}>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                          d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+                </svg>)}
+            </button>
+        </div>
+    </div>);
 }

src/data/DreamUtils.ts

@@ -0,0 +1,10 @@
+import Dream from '../types/Dream';
+
+/**
+ * Sorts dreams by date in descending order (newest first)
+ * @param dreams - Array of dreams to sort
+ * @returns Sorted array of dreams
+ */
+export const getSortedDreamsByDate = (dreams: Dream[]): Dream[] => {
+    return [...dreams].sort((a, b) => b.date.getTime() - a.date.getTime());
+};

src/index.css

@@ -240,6 +240,9 @@ button:focus-visible {
   -webkit-text-fill-color: transparent;
   margin-bottom: 0.5rem;
   text-shadow: 0 1px 2px var(--text-shadow);
+    text-rendering: geometricPrecision;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .dream-container {
@@ -282,15 +285,15 @@ button:focus-visible {
   border-radius: 12px;
   padding: 1.25em;
   color: var(--text);
-  backdrop-filter: blur(5px);
-  box-shadow: 0 0 15px var(--shadow);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3);
   transition: all 0.3s ease;
   border: none;
 }
 
 .dreamy-card:hover {
   transform: translateY(-5px);
-  box-shadow: 0 10px 25px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3);
+    box-shadow: 0 15px 35px var(--shadow), inset 0 0 20px rgba(166, 77, 255, 0.3);
 }
 
 /* Animations */
@@ -299,7 +302,7 @@ button:focus-visible {
     transform: translateY(0);
   }
   50% {
-    transform: translateY(-10px);
+      transform: translateY(-5px);
   }
   100% {
     transform: translateY(0);

src/pages/Feed.tsx

@@ -4,9 +4,10 @@ import Dream from '../types/Dream';
 import type User from "../types/User.ts";
 import {MockUserMap} from "../data/MockUsers.ts";
 import DreamCard from "../components/DreamCard";
+import {getSortedDreamsByDate} from "../data/DreamUtils";
 
 export default function Feed() {
-    const sortedDreams = [...mockDreams].sort((a, b) => b.date.getTime() - a.date.getTime());
+    const sortedDreams = getSortedDreamsByDate(mockDreams);
     return (
         <div className="page p-4 space-y-6">
             <div className="feed-container">

src/pages/Overview.tsx

@@ -0,0 +1,252 @@
+import {BsMoonStars, BsStars} from 'react-icons/bs';
+import {
+    FaBed,
+    FaBook,
+    FaBrain,
+    FaChartBar,
+    FaCloud,
+    FaEye,
+    FaHeart,
+    FaMicrophone,
+    FaMoon,
+    FaPen,
+    FaRobot,
+    FaStar,
+    FaVrCardboard,
+} 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 Overview() {
+    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">
+            <div className="absolute top-20 left-0 text-purple-200 opacity-30">
+                <FaCloud size={40}/>
+            </div>
+            <div className="absolute top-60 right-5 text-purple-300 opacity-20">
+                <BsStars size={30}/>
+            </div>
+            <div className="absolute bottom-10 left-32 text-purple-200 opacity-25">
+                <BsMoonStars size={35}/>
+            </div>
+        </div>
+
+        {/* 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">
+                <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"/>
+                </div>
+                <p className="text-lg sm:text-xl dreamy-text">Träume analysieren, Gesellschaft verstehen</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">
+                    <HiSparkles className="text-yellow-400 mb-2 sm:mb-0 sm:mr-2" size={20}/>
+                    <h2 className="dream-title text-xl sm:text-2xl">Träume sammeln • KI verstehen • VR erleben</h2>
+                    <HiSparkles className="text-yellow-400 mt-2 sm:mt-0 sm:ml-2 hidden sm:block" size={20}/>
+                </div>
+                <p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
+                    Verwandle deine nächtlichen Reisen in interaktive Traumlandschaften
+                    mit KI-gestützter Analyse und immersiven VR-Erlebnissen
+                </p>
+            </div>
+        </div>
+        {/* 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
+                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-purple-100/50 to-pink-100/50 border border-purple-200/30 dark:bg-gradient-to-br dark:from-purple-900/30 dark:to-pink-900/30 dark:border-purple-700/30"
+                style={{animationDelay: '0.5s'}}>
+                <div className="flex justify-center mb-4">
+                    <div className="p-3 sm:p-4 bg-purple-500/20 rounded-full">
+                        <FaBrain className="text-purple-600 dark:text-purple-400" size={28}/>
+                    </div>
+                </div>
+                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
+                    KI-Traumdeutung
+                </h3>
+                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
+                    Deine Träume werden von KI entschlüsselt -
+                    Symbole erkannt, Emotionen analysiert, Bedeutungen offenbart
+                </p>
+            </div>
+
+            {/* Multimediale Traumerfassung */}
+            <div
+                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-blue-100/50 to-indigo-100/50 border border-blue-200/30 dark:bg-gradient-to-br dark:from-blue-900/30 dark:to-indigo-900/30 dark:border-blue-700/30"
+                style={{animationDelay: '1s'}}>
+                <div className="flex justify-center mb-4">
+                    <div className="p-3 sm:p-4 bg-blue-500/20 rounded-full">
+                        <FaMicrophone className="text-blue-600 dark:text-blue-400" size={28}/>
+                    </div>
+                </div>
+                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
+                    Träume einfangen
+                </h3>
+                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
+                    Sprich deine Träume in der Nacht, zeichne traumhafte Skizzen
+                    oder schreibe poetische Beschreibungen
+                </p>
+            </div>
+
+            {/* VR-Traumwelten */}
+            <div
+                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-violet-100/50 to-purple-100/50 border border-violet-200/30 dark:bg-gradient-to-br dark:from-violet-900/30 dark:to-purple-900/30 dark:border-violet-700/30"
+                style={{animationDelay: '1.5s'}}>
+                <div className="flex justify-center mb-4">
+                    <div className="p-3 sm:p-4 bg-violet-500/20 rounded-full">
+                        <FaVrCardboard className="text-violet-600 dark:text-violet-400" size={28}/>
+                    </div>
+                </div>
+                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
+                    VR-Traumreisen
+                </h3>
+                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
+                    Betritt deine Träume als begehbare Welten -
+                    schwebe durch Erinnerungen, berühre Traumsymbole
+                </p>
+            </div>
+
+            {/* Traumarchiv */}
+            <div
+                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-emerald-100/50 to-teal-100/50 border border-emerald-200/30 dark:bg-gradient-to-br dark:from-emerald-900/30 dark:to-teal-900/30 dark:border-emerald-700/30"
+                style={{animationDelay: '2s'}}>
+                <div className="flex justify-center mb-4">
+                    <div className="p-3 sm:p-4 bg-emerald-500/20 rounded-full">
+                        <FaBook className="text-emerald-600 dark:text-emerald-400" size={28}/>
+                    </div>
+                </div>
+                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
+                    Traumschatzkammer
+                </h3>
+                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
+                    Deine Traumsammlung wächst - durchsuchbar nach Gefühlen,
+                    Symbolen und magischen Momenten
+                </p>
+            </div>
+
+            {/* Traumstatistiken */}
+            <div
+                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-amber-100/50 to-orange-100/50 border border-amber-200/30 dark:bg-gradient-to-br dark:from-amber-900/30 dark:to-orange-900/30 dark:border-amber-700/30"
+                style={{animationDelay: '2.5s'}}>
+                <div className="flex justify-center mb-4">
+                    <div className="p-3 sm:p-4 bg-amber-500/20 rounded-full">
+                        <FaChartBar className="text-amber-600 dark:text-amber-400" size={28}/>
+                    </div>
+                </div>
+                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
+                    Traummuster
+                </h3>
+                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
+                    Entdecke die geheimen Muster deiner Nachtreisen -
+                    welche Träume kehren zurück?
+                </p>
+            </div>
+
+            {/* Schlafrhythmus */}
+            <div
+                className="dreamy-card rounded-xl sm:rounded-2xl p-4 sm:p-6 floating backdrop-blur-md bg-gradient-to-br from-rose-100/50 to-pink-100/50 border border-rose-200/30 dark:bg-gradient-to-br dark:from-rose-900/30 dark:to-pink-900/30 dark:border-rose-700/30"
+                style={{animationDelay: '3s'}}>
+                <div className="flex justify-center mb-4">
+                    <div className="p-3 sm:p-4 bg-rose-500/20 rounded-full">
+                        <FaMoon className="text-rose-600 dark:text-rose-400" size={28}/>
+                    </div>
+                </div>
+                <h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center dreamy-text">
+                    Schlafzyklen
+                </h3>
+                <p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
+                    Verstehe deine Schlafrhythmen und wie sie deine
+                    Traumlandschaften formen
+                </p>
+            </div>
+        </div>
+
+        {/* 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'}}>
+            <div className="text-center">
+                <FaHeart className="text-pink-500 dark:text-pink-400 mx-auto mb-4" size={32}/>
+                <h2 className="dream-title text-2xl sm:text-3xl">Deine magische Traumreise</h2>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 mt-6 sm:mt-8">
+                <div className="text-center">
+                    <div
+                        className="bg-gradient-to-br from-purple-400 to-purple-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
+                        <FaBed className="text-white" size={24}/>
+                    </div>
+                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">1. Träumen</h4>
+                    <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
+                        In der Nacht zeichnen deine Sensoren sanft deine Traumreisen auf
+                    </p>
+                </div>
+                <div className="text-center">
+                    <div
+                        className="bg-gradient-to-br from-blue-400 to-blue-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
+                        <FaPen className="text-white" size={24}/>
+                    </div>
+                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">2. Einfangen</h4>
+                    <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
+                        Beim Erwachen flüsterst du deine Träume in die App
+                    </p>
+                </div>
+                <div className="text-center">
+                    <div
+                        className="bg-gradient-to-br from-violet-400 to-violet-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
+                        <FaRobot className="text-white" size={24}/>
+                    </div>
+                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">3. Verzaubern</h4>
+                    <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
+                        KI-Magie verwandelt deine Worte in Bilder, Klänge und Bedeutungen
+                    </p>
+                </div>
+                <div className="text-center">
+                    <div
+                        className="bg-gradient-to-br from-pink-400 to-pink-600 rounded-full w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center mx-auto mb-4 sm:mb-6 shadow-lg">
+                        <FaEye className="text-white" size={24}/>
+                    </div>
+                    <h4 className="font-bold mb-2 sm:mb-3 dreamy-text text-base sm:text-lg">4. Erleben</h4>
+                    <p className="text-xs sm:text-sm" style={{color: 'var(--text)'}}>
+                        Tauche ein in deine VR-Traumwelten und entdecke dich selbst
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        {/* 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"
+                style={{animationDelay: '3.5s'}}>
+                <div className="relative z-10">
+                    <div className="flex flex-col sm:flex-row justify-center items-center mb-4 sm:mb-6">
+                        <FaStar className="text-yellow-300 mb-2 sm:mb-0 sm:mr-3" size={24}/>
+                        <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white">Wo Träume Realität
+                            werden</h2>
+                        <FaStar className="text-yellow-300 mt-2 sm:mt-0 sm:ml-3 hidden sm:block" size={24}/>
+                    </div>
+                    <p className="text-base sm:text-lg md:text-xl text-purple-100 mb-6 sm:mb-8 md:mb-10 max-w-2xl mx-auto">
+                        Lass dich von KI-gestützter Traumdeutung, VR-Erlebnissen und personalisierten
+                        Einsichten in eine tiefere Welt deines Unterbewusstseins führen
+                    </p>
+                    <div className="flex justify-center w-full">
+                        <NavLink
+                            to='/home'
+                            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'}}
+                        >
+                            <FaMoon className="mr-2 sm:mr-3" size={18}/>
+                            Lass die Magie beginnen!
+                            <HiSparkles className="ml-2 sm:ml-3" size={18}/>
+                        </NavLink>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>)
+}