From 27558b3e0927219bc3bf363e323c80950d0176dc Mon Sep 17 00:00:00 2001
From: Matthias Puchstein <matthias@puchstein.bayern>
Date: Sat, 5 Jul 2025 00:12:48 +0200
Subject: [PATCH] reworked the startpage

---
 src/assets/logo.svg |   8 +-
 src/assets/text.svg |   2 +-
 src/pages/Home.tsx  | 260 ++++++++++++++++++++++++++++++++++++++++----
 3 files changed, 245 insertions(+), 25 deletions(-)

diff --git a/src/assets/logo.svg b/src/assets/logo.svg
index bcd4c73..8b83e1c 100644
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1,13 +1,13 @@
-<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
     <defs>
         <linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="50%">
             <stop offset="0%" stop-color="darkorchid" />
             <stop offset="100%" stop-color="darkslateblue" />
         </linearGradient>
         <mask id="moonMask">
-            <circle cx="100" cy="100" r="50" fill="white" />
-            <circle cx="150" cy="10" r="45" fill="black" transform="rotate(-30 272 100)" />
+            <circle cx="60" cy="60" r="50" fill="white" />
+            <circle cx="75" cy="45" r="45" fill="black"/>
         </mask>
     </defs>
-    <circle cx="100" cy="100" r="50" fill="url(#moonGradient)" mask="url(#moonMask)" />
+    <circle cx="60" cy="60" r="50" fill="url(#moonGradient)" mask="url(#moonMask)" />
 </svg>
diff --git a/src/assets/text.svg b/src/assets/text.svg
index 5d04166..5041dee 100644
--- a/src/assets/text.svg
+++ b/src/assets/text.svg
@@ -1,4 +1,4 @@
-<svg width="500" height="150" viewBox="0 0 500 150" xmlns="http://www.w3.org/2000/svg">
+<svg width="250" height="100" viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
     <defs>
         <style type="text/css">
             @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&amp;display=swap');
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index a22f9f1..88caeea 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,3 +1,23 @@
+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 logo from "../assets/logo.svg";
+import text from "../assets/text.svg";
+
 interface HomeProps {
     isLoggedIn: boolean;
     handleLogin: () => void;
@@ -7,31 +27,231 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
 
     if (isLoggedIn) {
         return (<div>
-                <h1>Hallo Neo!</h1>
-            </div>)
+            <h1>Hallo Neo!</h1>
+        </div>)
     }
-    return (<div className="p-4">
-            <h1 className="dreamy-text text-3xl md:text-4xl mb-6">Welcome to REMind</h1>
-            <p className="mb-8 text-lg">Your dreamy journey to better sleep and dream tracking</p>
 
-            <div className="dream-container">
-                <h2 className="dream-title">Track Your Dreams</h2>
-                <p className="mb-4">Record and analyze your dreams with our intuitive interface</p>
-                <button className="dreamy-button" onClick={handleLogin}>
-                    Get Started
-                </button>
+    return (<div className="p-4 max-w-6xl mx-auto relative overflow-hidden">
+        {/* Floating Background Elements */}
+        <div className="absolute inset-0 pointer-events-none">
+            <div className="absolute top-10 left-10 text-purple-200 opacity-30">
+                <FaCloud size={40}/>
+            </div>
+            <div className="absolute top-32 right-20 text-purple-300 opacity-20">
+                <BsStars size={30}/>
+            </div>
+            <div className="absolute bottom-40 left-32 text-purple-200 opacity-25">
+                <BsMoonStars size={35}/>
+            </div>
+        </div>
+
+        {/* Hero Section */}
+        <div className="text-center mb-16 relative z-10">
+            <div className="animate-pulse flex flex-col items-center mb-12">
+                <div className="flex items-center justify-around">
+                    <img src={logo} alt="REMind Logo" className="h-32 w-32"/>
+                    <img src={text} alt="REMind Text" className="h-48"/>
+                </div>
+                <p className="text-xl dreamy-text">Träume analysieren, Gesellschaft verstehen</p>
+            </div>
+            <div className="dream-container max-w-3xl mx-auto backdrop-blur-sm bg-white/10 rounded-3xl p-8">
+                <div className="flex justify-center items-center mb-4">
+                    <HiSparkles className="text-yellow-400 mr-2" size={24}/>
+                    <h2 className="dream-title text-2xl">Träume sammeln • KI verstehen • VR erleben</h2>
+                    <HiSparkles className="text-yellow-400 ml-2" size={24}/>
+                </div>
+                <p className="mb-8 text-lg font-light">
+                    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="card floating backdrop-blur-md bg-gradient-to-br from-purple-100/50 to-pink-100/50 border border-purple-200/30"
+                style={{animationDelay: '0.5s'}}>
+                <div className="flex justify-center mb-4">
+                    <div className="p-4 bg-purple-500/20 rounded-full">
+                        <FaBrain className="text-purple-600" size={32}/>
+                    </div>
+                </div>
+                <h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
+                    KI-Traumdeutung
+                </h3>
+                <p className="text-center text-gray-700 font-light">
+                    Deine Träume werden von KI entschlüsselt -
+                    Symbole erkannt, Emotionen analysiert, Bedeutungen offenbart
+                </p>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
-                <div className="card floating">
-                    <h3 className="text-xl font-bold mb-2" style={{color: 'var(--accent)'}}>Dream Journal
-                    </h3>
-                    <p>Keep track of all your dreams in one place</p>
+            {/* Multimediale Traumerfassung */}
+            <div
+                className="card floating backdrop-blur-md bg-gradient-to-br from-blue-100/50 to-indigo-100/50 border border-blue-200/30"
+                style={{animationDelay: '1s'}}>
+                <div className="flex justify-center mb-4">
+                    <div className="p-4 bg-blue-500/20 rounded-full">
+                        <FaMicrophone className="text-blue-600" size={32}/>
+                    </div>
                 </div>
-                <div className="card" style={{animationDelay: '2s'}}>
-                    <h3 className="text-xl font-bold mb-2" style={{color: 'var(--accent)'}}>Sleep Analysis</h3>
-                    <p>Understand your sleep patterns better</p>
+                <h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
+                    Träume einfangen
+                </h3>
+                <p className="text-center text-gray-700 font-light">
+                    Sprich deine Träume in der Nacht, zeichne traumhafte Skizzen
+                    oder schreibe poetische Beschreibungen
+                </p>
+            </div>
+
+            {/* VR-Traumwelten */}
+            <div
+                className="card floating backdrop-blur-md bg-gradient-to-br from-violet-100/50 to-purple-100/50 border border-violet-200/30"
+                style={{animationDelay: '1.5s'}}>
+                <div className="flex justify-center mb-4">
+                    <div className="p-4 bg-violet-500/20 rounded-full">
+                        <FaVrCardboard className="text-violet-600" size={32}/>
+                    </div>
+                </div>
+                <h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
+                    VR-Traumreisen
+                </h3>
+                <p className="text-center text-gray-700 font-light">
+                    Betritt deine Träume als begehbare Welten -
+                    schwebe durch Erinnerungen, berühre Traumsymbole
+                </p>
+            </div>
+
+            {/* Traumarchiv */}
+            <div
+                className="card backdrop-blur-md bg-gradient-to-br from-emerald-100/50 to-teal-100/50 border border-emerald-200/30"
+                style={{animationDelay: '2s'}}>
+                <div className="flex justify-center mb-4">
+                    <div className="p-4 bg-emerald-500/20 rounded-full">
+                        <FaBook className="text-emerald-600" size={32}/>
+                    </div>
+                </div>
+                <h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
+                    Traumschatzkammer
+                </h3>
+                <p className="text-center text-gray-700 font-light">
+                    Deine Traumsammlung wächst - durchsuchbar nach Gefühlen,
+                    Symbolen und magischen Momenten
+                </p>
+            </div>
+
+            {/* Traumstatistiken */}
+            <div
+                className="card backdrop-blur-md bg-gradient-to-br from-amber-100/50 to-orange-100/50 border border-amber-200/30"
+                style={{animationDelay: '2.5s'}}>
+                <div className="flex justify-center mb-4">
+                    <div className="p-4 bg-amber-500/20 rounded-full">
+                        <FaChartBar className="text-amber-600" size={32}/>
+                    </div>
+                </div>
+                <h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
+                    Traummuster
+                </h3>
+                <p className="text-center text-gray-700 font-light">
+                    Entdecke die geheimen Muster deiner Nachtreisen -
+                    welche Träume kehren zurück?
+                </p>
+            </div>
+
+            {/* Schlafrhythmus */}
+            <div
+                className="card backdrop-blur-md bg-gradient-to-br from-rose-100/50 to-pink-100/50 border border-rose-200/30"
+                style={{animationDelay: '3s'}}>
+                <div className="flex justify-center mb-4">
+                    <div className="p-4 bg-rose-500/20 rounded-full">
+                        <FaMoon className="text-rose-600" size={32}/>
+                    </div>
+                </div>
+                <h3 className="text-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
+                    Schlafzyklen
+                </h3>
+                <p className="text-center text-gray-700 font-light">
+                    Verstehe deine Schlafrhythmen und wie sie deine
+                    Traumlandschaften formen
+                </p>
+            </div>
+        </div>
+
+        {/* Dreamy Workflow Section */}
+        <div
+            className="dream-container mb-16 backdrop-blur-lg bg-gradient-to-br from-pink-500/30 to-red-400/30 rounded-3xl p-12">
+            <div className="text-center">
+                <FaHeart className="text-pink-500 mx-auto mb-4" size={40}/>
+                <h2 className="dream-title text-3xl">Deine magische Traumreise</h2>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mt-8">
+                <div className="text-center">
+                    <div
+                        className="bg-gradient-to-br from-purple-400 to-purple-600 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
+                        <FaBed className="text-white" size={28}/>
+                    </div>
+                    <h4 className="font-bold mb-3 dreamy-text">1. Träumen</h4>
+                    <p className="text-sm font-light">
+                        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-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
+                        <FaPen className="text-white" size={28}/>
+                    </div>
+                    <h4 className="font-bold mb-3 dreamy-text">2. Einfangen</h4>
+                    <p className="text-sm font-light">
+                        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-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
+                        <FaRobot className="text-white" size={28}/>
+                    </div>
+                    <h4 className="font-bold mb-3 dreamy-text">3. Verzaubern</h4>
+                    <p className="text-sm font-light">
+                        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-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
+                        <FaEye className="text-white" size={28}/>
+                    </div>
+                    <h4 className="font-bold mb-3 dreamy-text">4. Erleben</h4>
+                    <p className="text-sm font-light">
+                        Tauche ein in deine VR-Traumwelten und entdecke dich selbst
+                    </p>
                 </div>
             </div>
-        </div>);
+        </div>
+
+        {/* Dreamy CTA Section */}
+        <div className="relative mt-16">
+            <div
+                className="card p-12 text-center bg-gradient-to-br from-pink-600 via-violet-600 to-purple-600 border-none overflow-hidden">
+                <div className="relative z-10">
+                    <div className="flex justify-center items-center mb-6">
+                        <FaStar className="text-yellow-300 mr-3" size={32}/>
+                        <h2 className="text-4xl font-bold text-white">Wo Träume Realität werden</h2>
+                        <FaStar className="text-yellow-300 ml-3" size={32}/>
+                    </div>
+                    <p className="text-xl text-purple-100 mb-10 font-light 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>
+                    <button
+                        className="dreamy-button flex items-center mx-auto"
+                        onClick={handleLogin}
+                    >
+                        <FaMoon className="mr-3" size={24}/>
+                        Lass die Magie beginnen!
+                        <HiSparkles className="ml-3" size={24}/>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>)
 }
\ No newline at end of file