let junie rework the theme one more time
This commit is contained in:
@@ -30,7 +30,7 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
|
||||
</div>)
|
||||
}
|
||||
|
||||
return (<div className="p-4 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-10 left-10 text-purple-200 opacity-30">
|
||||
@@ -45,20 +45,20 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
|
||||
</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="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-48 mb-4"/>
|
||||
<img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
|
||||
</div>
|
||||
<p className="text-xl dreamy-text">Träume analysieren, Gesellschaft verstehen</p>
|
||||
<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 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 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-8 text-lg font-light">
|
||||
<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>
|
||||
@@ -68,17 +68,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
|
||||
<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"
|
||||
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"
|
||||
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 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-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
|
||||
<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-gray-700 font-light">
|
||||
<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>
|
||||
@@ -86,17 +86,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
|
||||
|
||||
{/* 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"
|
||||
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={{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 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-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
|
||||
<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-gray-700 font-light">
|
||||
<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>
|
||||
@@ -104,17 +104,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
|
||||
|
||||
{/* 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"
|
||||
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"
|
||||
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 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-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
|
||||
<h3 className="text-lg sm:text-xl font-bold mb-2 sm:mb-3 text-center" style={{color: 'var(--accent)'}}>
|
||||
VR-Traumreisen
|
||||
</h3>
|
||||
<p className="text-center text-gray-700 font-light">
|
||||
<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>
|
||||
@@ -122,17 +122,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
|
||||
|
||||
{/* Traumarchiv */}
|
||||
<div
|
||||
className="card backdrop-blur-md bg-gradient-to-br from-emerald-100/50 to-teal-100/50 border border-emerald-200/30"
|
||||
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-4 bg-emerald-500/20 rounded-full">
|
||||
<FaBook className="text-emerald-600" size={32}/>
|
||||
<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-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
|
||||
<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-gray-700 font-light">
|
||||
<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>
|
||||
@@ -140,17 +140,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
|
||||
|
||||
{/* Traumstatistiken */}
|
||||
<div
|
||||
className="card backdrop-blur-md bg-gradient-to-br from-amber-100/50 to-orange-100/50 border border-amber-200/30"
|
||||
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-4 bg-amber-500/20 rounded-full">
|
||||
<FaChartBar className="text-amber-600" size={32}/>
|
||||
<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-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
|
||||
<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-gray-700 font-light">
|
||||
<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>
|
||||
@@ -158,17 +158,17 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
|
||||
|
||||
{/* Schlafrhythmus */}
|
||||
<div
|
||||
className="card backdrop-blur-md bg-gradient-to-br from-rose-100/50 to-pink-100/50 border border-rose-200/30"
|
||||
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-4 bg-rose-500/20 rounded-full">
|
||||
<FaMoon className="text-rose-600" size={32}/>
|
||||
<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-xl font-bold mb-3 text-center" style={{color: '#7C3AED'}}>
|
||||
<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-gray-700 font-light">
|
||||
<p className="text-center text-sm sm:text-base" style={{color: 'var(--text)'}}>
|
||||
Verstehe deine Schlafrhythmen und wie sie deine
|
||||
Traumlandschaften formen
|
||||
</p>
|
||||
@@ -177,49 +177,49 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
|
||||
|
||||
{/* 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">
|
||||
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 mx-auto mb-4" size={40}/>
|
||||
<h2 className="dream-title text-3xl">Deine magische Traumreise</h2>
|
||||
<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 md:grid-cols-4 gap-8 mt-8">
|
||||
<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-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
|
||||
<FaBed className="text-white" size={28}/>
|
||||
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-3 dreamy-text">1. Träumen</h4>
|
||||
<p className="text-sm font-light">
|
||||
<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-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
|
||||
<FaPen className="text-white" size={28}/>
|
||||
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-3 dreamy-text">2. Einfangen</h4>
|
||||
<p className="text-sm font-light">
|
||||
<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-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
|
||||
<FaRobot className="text-white" size={28}/>
|
||||
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-3 dreamy-text">3. Verzaubern</h4>
|
||||
<p className="text-sm font-light">
|
||||
<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-20 h-20 flex items-center justify-center mx-auto mb-6 shadow-lg">
|
||||
<FaEye className="text-white" size={28}/>
|
||||
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-3 dreamy-text">4. Erleben</h4>
|
||||
<p className="text-sm font-light">
|
||||
<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>
|
||||
@@ -227,29 +227,29 @@ export default function Home({isLoggedIn, handleLogin}: HomeProps) {
|
||||
</div>
|
||||
|
||||
{/* Dreamy CTA Section */}
|
||||
<div className="relative mt-16">
|
||||
<div className="relative mt-12 sm: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">
|
||||
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">
|
||||
<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 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-xl text-purple-100 mb-10 font-light max-w-2xl mx-auto">
|
||||
<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>
|
||||
<button
|
||||
className="dreamy-button flex items-center mx-auto"
|
||||
className="dreamy-button flex items-center mx-auto text-sm sm:text-base"
|
||||
onClick={handleLogin}
|
||||
>
|
||||
<FaMoon className="mr-3" size={24}/>
|
||||
<FaMoon className="mr-2 sm:mr-3" size={18} />
|
||||
Lass die Magie beginnen!
|
||||
<HiSparkles className="ml-3" size={24}/>
|
||||
<HiSparkles className="ml-2 sm:ml-3" size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user