added mock daily highlights, new dream entries, and enhanced personalized home page layout and functionality
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
24
src/data/MockDailyHighlights.ts
Normal file
24
src/data/MockDailyHighlights.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
/**
|
||||||
|
* Mock data for daily highlights on the home page
|
||||||
|
* Contains top dream topics and mood categories with their percentages
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Top dream topics with percentages
|
||||||
|
export const topDreamTopics = [
|
||||||
|
{label: "Fliegen", percentage: 28},
|
||||||
|
{label: "Verfolgung", percentage: 22},
|
||||||
|
{label: "Wasser", percentage: 17}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Primary mood categories with percentages
|
||||||
|
export const primaryMoodCategories = [
|
||||||
|
{label: "Neugier", percentage: 35},
|
||||||
|
{label: "Freude", percentage: 30},
|
||||||
|
{label: "Angst", percentage: 20},
|
||||||
|
{label: "Überraschung", percentage: 15}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
topDreamTopics,
|
||||||
|
primaryMoodCategories
|
||||||
|
};
|
||||||
@@ -77,6 +77,43 @@ export const mockDreams: Dream[] = [new Dream({
|
|||||||
interpretation: 'The floating city symbolizes ambition and the desire to rise above limitations. The sunrise and golden light represent hope and new beginnings.',
|
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',
|
image: 'floating_city_ai.png',
|
||||||
},
|
},
|
||||||
|
}), new Dream({
|
||||||
|
id: 9, userId: 4, title: 'Quantenreise', date: new Date('2025-07-04T01:15:00Z'), 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: new Date('2025-07-05T02:30:00Z'), 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: new Date('2025-07-06T03:45:00Z'), 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: new Date('2025-07-07T04:20:00Z'), 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',
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -1,255 +1,276 @@
|
|||||||
import {BsMoonStars, BsStars} from 'react-icons/bs';
|
import {useState} from 'react';
|
||||||
import {
|
import {mockDreams} from '../data/MockDreams';
|
||||||
FaBed,
|
import {MockUserMap} from '../data/MockUsers';
|
||||||
FaBook,
|
import {getSortedDreamsByDate} from '../data/DreamUtils';
|
||||||
FaBrain,
|
import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights';
|
||||||
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";
|
|
||||||
|
|
||||||
interface HomeProps {
|
export default function Home() {
|
||||||
isLoggedIn: boolean;
|
const [inputMode, setInputMode] = useState<'text' | 'drawing'>('text');
|
||||||
handleLogin: () => void;
|
const currentUser = MockUserMap.get(4); // Neo Quantum
|
||||||
}
|
const currentDate = new Date();
|
||||||
|
const formattedDate = currentDate.toLocaleDateString('de-DE', {
|
||||||
|
weekday: 'long',
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
});
|
||||||
|
|
||||||
export default function Home({isLoggedIn, handleLogin}: HomeProps) {
|
// Get personal dreams (latest 3 for user ID 4)
|
||||||
|
const personalDreams = getSortedDreamsByDate(
|
||||||
|
mockDreams.filter(dream => dream.userId === 4)
|
||||||
|
).slice(0, 3);
|
||||||
|
|
||||||
if (isLoggedIn) {
|
// Get friends' dreams (latest 5 from other users)
|
||||||
return (<div>
|
const friendsDreams = getSortedDreamsByDate(
|
||||||
<h1>Hallo Neo!</h1>
|
mockDreams.filter(dream => dream.userId !== 4)
|
||||||
</div>)
|
).slice(0, 5);
|
||||||
}
|
|
||||||
|
|
||||||
return (<div className="p-4 pb-20 max-w-6xl mx-auto relative overflow-hidden">
|
return (
|
||||||
{/* Floating Background Elements */}
|
<div className="p-4 dream-container backdrop-blur-md bg-opacity-30"
|
||||||
<div className="absolute inset-0 pointer-events-none">
|
style={{backgroundColor: 'transparent', boxShadow: '0 10px 30px var(--shadow)'}}>
|
||||||
<div className="absolute top-10 left-10 text-purple-200 opacity-30">
|
{/* Welcome Card */}
|
||||||
<FaCloud size={40}/>
|
<div className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01]"
|
||||||
|
style={{backgroundColor: 'var(--card)', color: 'var(--text)'}}>
|
||||||
|
<h1 className="text-2xl font-bold mb-2 dream-title">Hallo Neo!</h1>
|
||||||
|
<p className="text-sm" style={{color: 'var(--text-muted)'}}>{formattedDate}</p>
|
||||||
|
<p className="mt-2" style={{color: 'var(--text)'}}>Willkommen zurück in deiner Traumwelt.</p>
|
||||||
</div>
|
</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 */}
|
{/* Streak Notification */}
|
||||||
<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 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">
|
|
||||||
<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
|
<div
|
||||||
className="card 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"
|
className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] floating"
|
||||||
style={{animationDelay: '0.5s'}}>
|
style={{
|
||||||
<div className="flex justify-center mb-4">
|
background: 'var(--accent-gradient)',
|
||||||
<div className="p-3 sm:p-4 bg-purple-500/20 rounded-full">
|
color: 'white',
|
||||||
<FaBrain className="text-purple-600 dark:text-purple-400" size={28} />
|
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3)'
|
||||||
|
}}>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="mr-3">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||||
|
d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold">Traum-Streak: {currentUser?.streakDays} Tage</h3>
|
||||||
|
<p className="text-sm">Beeindruckend! Du hältst deine Traum-Aufzeichnungen konstant bei.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
|
|
||||||
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>
|
</div>
|
||||||
|
|
||||||
{/* Multimediale Traumerfassung */}
|
{/* Input Card */}
|
||||||
<div
|
<div className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01]"
|
||||||
className="card 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={{backgroundColor: 'var(--card)', color: 'var(--text)'}}>
|
||||||
style={{animationDelay: '1s'}}>
|
<div className="flex justify-between items-center mb-3">
|
||||||
<div className="flex justify-center mb-4">
|
<h3 className="font-bold dream-title">Neuer Traum</h3>
|
||||||
<div className="p-3 sm:p-4 bg-blue-500/20 rounded-full">
|
<div className="flex rounded-lg overflow-hidden" style={{border: '1px solid var(--accent-soft)'}}>
|
||||||
<FaMicrophone className="text-blue-600 dark:text-blue-400" size={28} />
|
<button
|
||||||
|
className={`px-3 py-1 text-sm transition-all duration-200`}
|
||||||
|
onClick={() => setInputMode('text')}
|
||||||
|
style={{
|
||||||
|
backgroundColor: inputMode === 'text' ? 'var(--accent)' : 'transparent',
|
||||||
|
color: inputMode === 'text' ? 'white' : 'var(--text)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Text
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`px-3 py-1 text-sm transition-all duration-200`}
|
||||||
|
onClick={() => setInputMode('drawing')}
|
||||||
|
style={{
|
||||||
|
backgroundColor: inputMode === 'drawing' ? 'var(--accent)' : 'transparent',
|
||||||
|
color: inputMode === 'drawing' ? 'white' : 'var(--text)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Zeichnung
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
|
|
||||||
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 */}
|
{inputMode === 'text' ? (
|
||||||
<div
|
<textarea
|
||||||
className="card 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"
|
className="w-full p-3 rounded-lg mb-3 transition-all duration-200"
|
||||||
style={{animationDelay: '1.5s'}}>
|
rows={4}
|
||||||
<div className="flex justify-center mb-4">
|
placeholder="Beschreibe deinen Traum..."
|
||||||
<div className="p-3 sm:p-4 bg-violet-500/20 rounded-full">
|
style={{
|
||||||
<FaVrCardboard className="text-violet-600 dark:text-violet-400" size={28} />
|
backgroundColor: 'var(--bg)',
|
||||||
</div>
|
color: 'var(--text)',
|
||||||
</div>
|
border: '1px solid var(--accent-soft)'
|
||||||
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
|
}}
|
||||||
VR-Traumreisen
|
></textarea>
|
||||||
</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="card 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" style={{color: 'var(--accent)'}}>
|
|
||||||
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="card 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" style={{color: 'var(--accent)'}}>
|
|
||||||
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="card 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" style={{color: 'var(--accent)'}}>
|
|
||||||
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 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-3xl p-6 sm:p-8 md:p-12">
|
|
||||||
<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
|
<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">
|
className="w-full h-40 rounded-lg mb-3 flex items-center justify-center border-2 border-dashed transition-all duration-200"
|
||||||
<FaBed className="text-white" size={24} />
|
style={{
|
||||||
|
backgroundColor: 'var(--bg)',
|
||||||
|
borderColor: 'var(--accent-soft)'
|
||||||
|
}}>
|
||||||
|
<p style={{color: 'var(--text-muted)'}}>Zeichne deinen Traum hier (Canvas-Platzhalter)</p>
|
||||||
</div>
|
</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="flex justify-between">
|
||||||
<div className="relative mt-12 sm:mt-16">
|
<div className="flex space-x-2">
|
||||||
<div
|
<button className="p-2 rounded-full transition-all duration-200 hover:transform hover:scale-110"
|
||||||
className="card p-6 sm:p-8 md:p-12 text-center bg-gradient-to-br from-pink-600 via-violet-600 to-purple-600 border-none overflow-hidden">
|
style={{backgroundColor: 'var(--accent-soft)', color: 'var(--text)'}}>
|
||||||
<div className="relative z-10">
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
||||||
<div className="flex flex-col sm:flex-row justify-center items-center mb-4 sm:mb-6">
|
stroke="currentColor">
|
||||||
<FaStar className="text-yellow-300 mb-2 sm:mb-0 sm:mr-3" size={24} />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||||
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white">Wo Träume Realität werden</h2>
|
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
|
||||||
<FaStar className="text-yellow-300 mt-2 sm:mt-0 sm:ml-3 hidden sm:block" size={24} />
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button className="p-2 rounded-full transition-all duration-200 hover:transform hover:scale-110"
|
||||||
|
style={{backgroundColor: 'var(--accent-soft)', color: 'var(--text)'}}>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||||
|
d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</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">
|
<button className="px-4 py-2 rounded-lg transition-all duration-200 hover:transform hover:scale-105"
|
||||||
Lass dich von KI-gestützter Traumdeutung, VR-Erlebnissen und personalisierten
|
style={{background: 'var(--accent-gradient)', color: 'white'}}>
|
||||||
Einsichten in eine tiefere Welt deines Unterbewusstseins führen
|
Senden
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
className="dreamy-button flex items-center mx-auto text-sm sm:text-base"
|
|
||||||
onClick={handleLogin}
|
|
||||||
>
|
|
||||||
<FaMoon className="mr-2 sm:mr-3" size={18} />
|
|
||||||
Lass die Magie beginnen!
|
|
||||||
<HiSparkles className="ml-2 sm:ml-3" size={18} />
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Personal Feed */}
|
||||||
|
<div className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01]"
|
||||||
|
style={{backgroundColor: 'var(--card)', color: 'var(--text)'}}>
|
||||||
|
<h3 className="font-bold mb-3 dream-title">Deine letzten Träume</h3>
|
||||||
|
{personalDreams.length > 0 ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{personalDreams.map((dream, index) => (
|
||||||
|
<div key={dream.id}
|
||||||
|
className="p-3 rounded-lg transition-all duration-300 hover:transform hover:scale-[1.02]"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg)',
|
||||||
|
boxShadow: '0 4px 15px var(--shadow)',
|
||||||
|
animationDelay: `${index * 0.1}s`
|
||||||
|
}}>
|
||||||
|
<h4 className="font-medium" style={{color: 'var(--accent)'}}>{dream.title}</h4>
|
||||||
|
<p className="text-sm" style={{color: 'var(--text-muted)'}}>
|
||||||
|
{dream.date.toLocaleDateString('de-DE')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm" style={{color: 'var(--text-muted)'}}>
|
||||||
|
Du hast noch keine Träume aufgezeichnet. Starte jetzt!
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Friends Feed */}
|
||||||
|
<div className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01]"
|
||||||
|
style={{backgroundColor: 'var(--card)', color: 'var(--text)'}}>
|
||||||
|
<h3 className="font-bold mb-3 dream-title">Träume von Freunden</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{friendsDreams.map((dream, index) => {
|
||||||
|
const dreamUser = MockUserMap.get(dream.userId);
|
||||||
|
return (
|
||||||
|
<div key={dream.id}
|
||||||
|
className="p-3 rounded-lg transition-all duration-300 hover:transform hover:scale-[1.02]"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--bg)',
|
||||||
|
boxShadow: '0 4px 15px var(--shadow)',
|
||||||
|
animationDelay: `${index * 0.1}s`
|
||||||
|
}}>
|
||||||
|
<div className="flex items-center mb-1">
|
||||||
|
<div
|
||||||
|
className="w-6 h-6 rounded-full mr-2 flex items-center justify-center overflow-hidden"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--accent-soft)',
|
||||||
|
border: '1px solid var(--accent)'
|
||||||
|
}}>
|
||||||
|
{dreamUser?.profilePicture ? (
|
||||||
|
<img src={`/assets/profiles/${dreamUser.profilePicture}`}
|
||||||
|
alt={dreamUser.name} className="w-full h-full object-cover"/>
|
||||||
|
) : (
|
||||||
|
<span className="text-xs"
|
||||||
|
style={{color: 'var(--text)'}}>{dreamUser?.name.charAt(0)}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span className="font-medium text-sm"
|
||||||
|
style={{color: 'var(--text)'}}>{dreamUser?.name}</span>
|
||||||
|
</div>
|
||||||
|
<h4 className="font-medium" style={{color: 'var(--accent)'}}>{dream.title}</h4>
|
||||||
|
<p className="text-sm" style={{color: 'var(--text-muted)'}}>
|
||||||
|
{dream.date.toLocaleDateString('de-DE')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Daily Highlights */}
|
||||||
|
<div className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01]"
|
||||||
|
style={{backgroundColor: 'var(--card)', color: 'var(--text)'}}>
|
||||||
|
<h3 className="font-bold mb-3 dream-title">Tägliche Highlights</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="p-3 rounded-lg"
|
||||||
|
style={{backgroundColor: 'var(--bg)', boxShadow: '0 4px 15px var(--shadow)'}}>
|
||||||
|
<h4 className="font-medium mb-2" style={{color: 'var(--accent)'}}>Top Traumthemen</h4>
|
||||||
|
<ul className="list-disc pl-5 mb-4">
|
||||||
|
{topDreamTopics.map((topic, index) => (
|
||||||
|
<li key={index}
|
||||||
|
className="text-sm mb-1 transition-all duration-300 hover:transform hover:translate-x-1"
|
||||||
|
style={{color: 'var(--text)'}}>
|
||||||
|
<span style={{color: 'var(--accent-soft)'}}>{topic.label}:</span> {topic.percentage}%
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 rounded-lg"
|
||||||
|
style={{backgroundColor: 'var(--bg)', boxShadow: '0 4px 15px var(--shadow)'}}>
|
||||||
|
<h4 className="font-medium mb-2" style={{color: 'var(--accent)'}}>Stimmungskategorien</h4>
|
||||||
|
<ul className="list-disc pl-5">
|
||||||
|
{primaryMoodCategories.map((mood, index) => (
|
||||||
|
<li key={index}
|
||||||
|
className="text-sm mb-1 transition-all duration-300 hover:transform hover:translate-x-1"
|
||||||
|
style={{color: 'var(--text)'}}>
|
||||||
|
<span style={{color: 'var(--accent-soft)'}}>{mood.label}:</span> {mood.percentage}%
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ad Banner */}
|
||||||
|
<div
|
||||||
|
className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] floating"
|
||||||
|
style={{
|
||||||
|
background: 'linear-gradient(135deg, var(--accent), var(--accent-dark))',
|
||||||
|
color: 'white',
|
||||||
|
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3)'
|
||||||
|
}}>
|
||||||
|
<div className="flex flex-col sm:flex-row items-center">
|
||||||
|
<div className="mb-4 sm:mb-0 sm:mr-4 transition-all duration-300 hover:transform hover:rotate-12">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16" fill="none" viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1}
|
||||||
|
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold text-lg mb-1">ReMind Sensor-Gerät</h3>
|
||||||
|
<p className="text-sm mb-2">Verbessere deine Traumerfahrung mit unserem Sensor mit EEG,
|
||||||
|
Bewegungserkennung und Vitalzeichen-Überwachung.</p>
|
||||||
|
<div
|
||||||
|
className="mb-3 inline-block px-2 py-1 text-xs font-bold rounded transition-all duration-300 hover:transform hover:scale-105"
|
||||||
|
style={{backgroundColor: 'var(--accent-soft)', color: 'var(--text)'}}>
|
||||||
|
Pro-Funktionen: VR-Räume, Automatische Traumerkennung und Aufzeichnung
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user