From ccca533db6b324d435585556f1abd614033cfed0 Mon Sep 17 00:00:00 2001
From: Matthias Puchstein <matthias@puchstein.bayern>
Date: Sat, 12 Jul 2025 12:32:58 +0200
Subject: [PATCH] added dreamy gradient styles to `index.css`, expanded
 `getBackgroundStyle` for gradient types, introduced `ChipCard` component,
 updated `Home` with `ChipCard`, and refined layouts with consistent paddings
 and shadows

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
---
 src/components/ChipCard.tsx         | 40 +++++++++++++++++++++
 src/components/DailyHighlights.tsx  | 17 +++++----
 src/components/DreamCard.tsx        | 30 ++++++++++------
 src/components/DreamCardCompact.tsx | 24 +++++++------
 src/components/DreamRecord.tsx      |  6 ++--
 src/components/Navbar.tsx           | 22 +++++++-----
 src/components/TopBar.tsx           | 15 +++++---
 src/index.css                       | 20 +++++++++++
 src/pages/Home.tsx                  | 39 ++++----------------
 src/styles/StyleUtils.ts            | 56 +++++++++++++++++++++++++++--
 10 files changed, 190 insertions(+), 79 deletions(-)
 create mode 100644 src/components/ChipCard.tsx

diff --git a/src/components/ChipCard.tsx b/src/components/ChipCard.tsx
new file mode 100644
index 0000000..01c4cff
--- /dev/null
+++ b/src/components/ChipCard.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import {NavLink} from 'react-router-dom';
+
+export const ChipCard: React.FC = () => {
+    return (
+        <NavLink to="/"
+                 className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] animate-fadeIn rounded-lg mb-4 floating">
+            <div
+                className="p-4 backdrop-blur-sm rounded-lg"
+                style={{
+                    background: 'var(--purple-gradient)',
+                    boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.2)',
+                    border: '1px solid rgba(166, 77, 255, 0.1)'
+                }}>
+                <div className="flex 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 dream-title">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>
+        </NavLink>
+    );
+};
diff --git a/src/components/DailyHighlights.tsx b/src/components/DailyHighlights.tsx
index 60c4f30..3485078 100644
--- a/src/components/DailyHighlights.tsx
+++ b/src/components/DailyHighlights.tsx
@@ -1,5 +1,5 @@
 import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights';
-import {getCardStyle, getTextStyle} from '../styles/StyleUtils';
+import {getTextStyle} from '../styles/StyleUtils';
 
 /**
  * HighlightCard component displays a single highlight item with a colored progress bar
@@ -13,9 +13,9 @@ const HighlightCard = ({label, percentage}: HighlightItemProps) => {
     return (
         <div
             className="mb-3 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] animate-fadeIn floating">
-            <div className="relative p-3 backdrop-blur-sm"
+            <div className="relative p-4 backdrop-blur-sm"
                  style={{
-                     background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.25), rgba(213, 0, 249, 0.25))',
+                     background: 'var(--purple-gradient)',
                      boxShadow: 'inset 0 0 15px rgba(166, 77, 255, 0.2)'
                  }}>
                 <div className="flex justify-between items-center mb-1">
@@ -51,15 +51,18 @@ const HighlightCard = ({label, percentage}: HighlightItemProps) => {
  */
 export const DailyHighlights = () => {
     return (
-        <div className={getCardStyle().className}
-             style={getCardStyle()}>
+        <div className="dreamy-card backdrop-blur-md mb-4"
+             style={{
+                 background: 'var(--pink-red-gradient)',
+                 animationDelay: '0.3s'
+             }}>
             <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-4 rounded-lg backdrop-blur-sm transition-all duration-300 hover:transform hover:scale-[1.01]"
                     style={{
-                        background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.15), rgba(213, 0, 249, 0.15))',
+                        background: 'var(--purple-gradient)',
                         boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.1)',
                         border: '1px solid rgba(166, 77, 255, 0.1)'
                     }}>
@@ -78,7 +81,7 @@ export const DailyHighlights = () => {
                 <div
                     className="p-4 rounded-lg backdrop-blur-sm transition-all duration-300 hover:transform hover:scale-[1.01]"
                     style={{
-                        background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.15), rgba(213, 0, 249, 0.15))',
+                        background: 'var(--violet-gradient)',
                         boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.1)',
                         border: '1px solid rgba(166, 77, 255, 0.1)'
                     }}>
diff --git a/src/components/DreamCard.tsx b/src/components/DreamCard.tsx
index 7b2bb31..9252845 100644
--- a/src/components/DreamCard.tsx
+++ b/src/components/DreamCard.tsx
@@ -3,7 +3,7 @@ import Dream from '../types/Dream';
 import type User from "../types/User.ts";
 import {NavLink} from "react-router-dom";
 import {useEffect, useState} from "react";
-import {getAccentStyle, getTextStyle} from '../styles/StyleUtils';
+import {getTextStyle} from '../styles/StyleUtils';
 import {formatDateWithTime} from '../utils/DateUtils';
 
 interface DreamCardProps {
@@ -24,19 +24,23 @@ export default function DreamCard({dream, user, animationDelay = 0}: DreamCardPr
     }, [animationDelay]);
 
     return (<NavLink key={dream.id} to={`/dream/${dream.id}`}>
-        <li className={`dream-card card mb-4 transition-all duration-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
-            <div className="flex rounded items-center mb-3">
+        <li className={`dreamy-card backdrop-blur-md mb-4 transition-all duration-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}
+            style={{
+                background: 'var(--purple-gradient)',
+                animationDelay: `${animationDelay * 0.2}s`
+            }}>
+            <div className="flex rounded items-center mb-4">
                 <div className="relative">
                     <img
                         src={`/assets/profiles/${user?.profilePicture}`}
                         alt={user?.name}
-                        className="w-12 h-12 rounded-full border-2 border-accent-soft"
-                        style={{borderColor: 'var(--accent-soft)'}}
+                        className="w-12 h-12 rounded-full border-2"
+                        style={{borderColor: 'var(--accent-soft)', boxShadow: '0 0 10px var(--shadow)'}}
                     />
-                    <div className="absolute -bottom-1 -right-1 w-4 h-4 bg-accent rounded-full"
-                         style={getAccentStyle()}></div>
+                    <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full"
+                         style={{background: 'var(--accent-gradient)'}}></div>
                 </div>
-                <span className="ml-4 font-semibold text-left">{user?.name} <span className="text-text-muted">hat geträumt:</span></span>
+                <span className="ml-4 font-semibold text-left">{user?.name} <span style={getTextStyle('muted')}>hat geträumt:</span></span>
             </div>
             <h2 className="title text-left dreamy-text text-lg">
                 {dream.title}
@@ -46,14 +50,18 @@ export default function DreamCard({dream, user, animationDelay = 0}: DreamCardPr
                     || (dream.input.inputType === 'audio' && dream.input.transcript)
                     || (dream.input.inputType === 'image' && dream.input.description)}
             </p>
-            <div className="flex justify-between items-center mt-3">
+            <div className="flex justify-between items-center mt-4">
                 <p className="timestamp text-left" style={getTextStyle('muted')}>
                     {formatDateWithTime(dream.date)}
                 </p>
                 <div className="flex space-x-2">
                     {/* Display dream type as a tag */}
-                    <span className="px-2 py-1 text-xs rounded-full bg-accent-soft text-text"
-                          style={getAccentStyle(true)}>
+                    <span className="px-2 py-1 text-xs rounded-full"
+                          style={{
+                              background: 'var(--accent-gradient)',
+                              color: 'white',
+                              boxShadow: '0 2px 5px var(--shadow)'
+                          }}>
                         {dream.input.inputType}
                     </span>
                 </div>
diff --git a/src/components/DreamCardCompact.tsx b/src/components/DreamCardCompact.tsx
index 3a8fac8..90fbe1c 100644
--- a/src/components/DreamCardCompact.tsx
+++ b/src/components/DreamCardCompact.tsx
@@ -15,36 +15,40 @@ export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCa
         <NavLink to={`/dream/${dream.id}`}
                  className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] animate-fadeIn rounded-lg mb-4 floating">
             <div
-                className="py-1.5 px-2 backdrop-blur-sm"
+                className="p-4 backdrop-blur-sm rounded-lg"
                 style={{
                     animationDelay: `${index * 0.1}s`,
-                    background: 'linear-gradient(135deg, rgba(166, 77, 255, 0.15), rgba(213, 0, 249, 0.15))',
-                    boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.1)',
-                    border: '1px solid rgba(166, 77, 255, 0.1)',
-                    borderRadius: '0.5rem'
+                    background: 'var(--purple-gradient)',
+                    boxShadow: '0 8px 20px var(--shadow), inset 0 0 10px rgba(166, 77, 255, 0.2)',
+                    border: '1px solid rgba(166, 77, 255, 0.1)'
                 }}>
                 <div className="flex items-center justify-between mb-1">
                     {showUser && user && (
                         <div className="pl-2" style={{width: '90px', minWidth: '90px'}}>
                             <div className="flex items-center">
                                 <div
-                                    className="w-6 h-6 rounded-full mr-1.5 flex items-center justify-center overflow-hidden bg-[var(--accent-soft)] border border-[var(--accent)]">
+                                    className="w-6 h-6 rounded-full mr-1.5 flex items-center justify-center overflow-hidden border-2"
+                                    style={{
+                                        background: 'var(--accent-gradient)',
+                                        borderColor: 'var(--accent-soft)',
+                                        boxShadow: '0 2px 5px var(--shadow)'
+                                    }}>
                                     {user.profilePicture ? (
                                         <img src={`/assets/profiles/${user.profilePicture}`}
                                              alt={user.name} className="w-full h-full object-cover"/>
                                     ) : (
                                         <span
-                                            className="text-xs text-[var(--text)]">{user.name.charAt(0)}</span>
+                                            className="text-xs text-white">{user.name.charAt(0)}</span>
                                     )}
                                 </div>
                                 <span
-                                    className="font-medium text-xs text-[var(--text)]">{user.name}</span>
+                                    className="font-medium text-xs dreamy-text">{user.name}</span>
                             </div>
                         </div>
                     )}
                     <div className="flex-1 text-center">
-                        <h4 className="font-medium text-[var(--accent)] text-xs leading-tight">{dream.title}</h4>
-                        <p className="text-xs text-[var(--text-muted)] mt-0.5">
+                        <h4 className="font-medium dream-title text-xs leading-tight">{dream.title}</h4>
+                        <p className="text-xs text-[var(--text-muted)] mt-0.5 opacity-80">
                             {formatDateSimple(dream.date)}
                         </p>
                     </div>
diff --git a/src/components/DreamRecord.tsx b/src/components/DreamRecord.tsx
index 06ac538..d1ad8f0 100644
--- a/src/components/DreamRecord.tsx
+++ b/src/components/DreamRecord.tsx
@@ -7,7 +7,7 @@ export function DreamRecord() {
     return (
         <div className={getCardStyle().className}
              style={getCardStyle()}>
-            <div className="flex justify-between items-center mb-3">
+            <div className="flex justify-between items-center mb-4">
                 <h3 className="font-bold dream-title">Neuer Traum</h3>
                 <div className="flex rounded-lg overflow-hidden" style={{border: '1px solid var(--accent-soft)'}}>
                     <button
@@ -29,7 +29,7 @@ export function DreamRecord() {
 
             {inputMode === 'text' ? (
                 <textarea
-                    className="w-full p-3 rounded-lg mb-3 transition-all duration-200"
+                    className="w-full p-4 rounded-lg mb-4 transition-all duration-200"
                     rows={4}
                     placeholder="Beschreibe deinen Traum..."
                     style={{
@@ -40,7 +40,7 @@ export function DreamRecord() {
                 ></textarea>
             ) : (
                 <div
-                    className="w-full h-40 rounded-lg mb-3 flex items-center justify-center border-2 border-dashed transition-all duration-200"
+                    className="w-full h-40 rounded-lg mb-4 flex items-center justify-center border-2 border-dashed transition-all duration-200"
                     style={{
                         ...getBackgroundStyle('normal'),
                         borderColor: 'var(--accent-soft)'
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 9241d5e..505b98e 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,31 +1,35 @@
 import {NavLink} from 'react-router-dom';
 import {FaList, FaMicrochip, FaUser} from "react-icons/fa6";
-import {FaArchive, FaHome} from "react-icons/fa";
+import {FaGlobeEurope, FaHome} from "react-icons/fa";
+import {getBackgroundStyle} from '../styles/StyleUtils';
 
 export default function Navbar() {
     return (<>
             <nav
-                className="fixed bottom-0 left-0 right-0 flex justify-around py-4 z-10"
-                style={{backgroundColor: 'var(--accent-dark)', boxShadow: '0 -2px 10px var(--shadow)'}}>
+                className="fixed bottom-0 left-0 right-0 flex justify-around py-4 z-10 backdrop-blur-md"
+                style={{
+                    background: 'var(--accent-gradient)',
+                    boxShadow: '0 -2px 10px var(--shadow)'
+                }}>
                 <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)'}}/>
+                    <FaHome className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
                 </NavLink>
                 <NavLink to="/" className="transition-transform hover:scale-110">
-                    <FaMicrochip className="w-6 h-6 md:w-8 md:h-8" style={{color: 'var(--accent-soft)'}}/>
+                    <FaMicrochip className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
                 </NavLink>
                 <div className="w-16 md:w-20"></div>
                 <NavLink to="/archive" className="transition-transform hover:scale-110">
-                    <FaArchive className="w-6 h-6 md:w-8 md:h-8" style={{color: 'var(--accent-soft)'}}/>
+                    <FaGlobeEurope className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
                 </NavLink>
                 <NavLink to="/profile" className="transition-transform hover:scale-110">
-                    <FaUser className="w-6 h-6 md:w-8 md:h-8" style={{color: 'var(--accent-soft)'}}/>
+                    <FaUser className="w-6 h-6 md:w-8 md:h-8 text-white opacity-90 hover:opacity-100"/>
                 </NavLink>
             </nav>
 
             <NavLink
                 to="/feed"
-                className="microphone-button fixed bottom-6 left-1/2 transform -translate-x-1/2 p-4 md:p-5 rounded-full z-20 transition-transform hover:scale-110"
-                style={{boxShadow: '0 4px 15px var(--shadow)'}}
+                className="microphone-button fixed bottom-6 left-1/2 transform -translate-x-1/2 p-4 md:p-5 rounded-full z-20 transition-transform hover:scale-110 floating"
+                style={getBackgroundStyle('cta')}
             >
                 <FaList className="w-8 h-8 md:w-10 md:h-10 text-white"/>
             </NavLink>
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 010f828..9fba08b 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react';
 import logotext from "../assets/logotext.svg";
 import {NavLink} from "react-router-dom";
-import {getBackgroundStyle, getTextStyle} from '../styles/StyleUtils';
+import {getBackgroundStyle} from '../styles/StyleUtils';
 
 export default function TopBar() {
     const [visible, setVisible] = useState(true);
@@ -71,16 +71,21 @@ export default function TopBar() {
 
             <button
                 onClick={toggleTheme}
-                className="p-2 rounded-full focus:outline-none transition-transform hover:scale-110"
+                className="p-2 rounded-full focus:outline-none transition-transform hover:scale-110 floating"
                 aria-label="Toggle theme"
-                style={getBackgroundStyle('card')}
+                style={{
+                    background: 'rgba(255, 255, 255, 0.2)',
+                    backdropFilter: 'blur(10px)',
+                    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.2)',
+                    animationDelay: '0.5s'
+                }}
             >
                 {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={getTextStyle('accent')}>
+                                  viewBox="0 0 24 24" stroke="white">
                     <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={getTextStyle('accent')}>
+                                viewBox="0 0 24 24" stroke="white">
                     <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>)}
diff --git a/src/index.css b/src/index.css
index 514878b..1567e9a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,6 +13,16 @@
     --shadow: rgba(166, 77, 255, 0.2);
     --text-shadow: rgba(0, 0, 0, 0.5);
 
+    /* Additional dreamy gradients from Overview page */
+    --purple-gradient: linear-gradient(135deg, rgba(166, 77, 255, 0.35), rgba(213, 0, 249, 0.35));
+    --blue-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(79, 70, 229, 0.35));
+    --violet-gradient: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(124, 58, 237, 0.35));
+    --emerald-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(20, 184, 166, 0.35));
+    --amber-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(249, 115, 22, 0.35));
+    --rose-gradient: linear-gradient(135deg, rgba(244, 63, 94, 0.35), rgba(236, 72, 153, 0.35));
+    --pink-red-gradient: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(239, 68, 68, 0.3));
+    --cta-gradient: linear-gradient(135deg, #ec4899, #8b5cf6, #a855f7);
+
     font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
     line-height: 1.5;
     font-weight: 400;
@@ -39,6 +49,16 @@
     --accent-dark: #6a0dad;
     --shadow: rgba(196, 144, 255, 0.3);
     --text-shadow: rgba(255, 255, 255, 0.5);
+
+    /* Dark theme dreamy gradients */
+    --purple-gradient: linear-gradient(135deg, rgba(166, 77, 255, 0.3), rgba(213, 0, 249, 0.3));
+    --blue-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(79, 70, 229, 0.3));
+    --violet-gradient: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(124, 58, 237, 0.3));
+    --emerald-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(20, 184, 166, 0.3));
+    --amber-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(249, 115, 22, 0.3));
+    --rose-gradient: linear-gradient(135deg, rgba(244, 63, 94, 0.3), rgba(236, 72, 153, 0.3));
+    --pink-red-gradient: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(239, 68, 68, 0.25));
+    --cta-gradient: linear-gradient(135deg, #ec4899, #8b5cf6, #a855f7);
 }
 
 .border-background {
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index d54dfb4..5a1e720 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -7,6 +7,7 @@ import {NavLink} from 'react-router-dom';
 import {DreamRecord} from "../components/DreamRecord.tsx";
 import {DreamCardCompact} from "../components/DreamCardCompact.tsx";
 import {DailyHighlights} from "../components/DailyHighlights.tsx";
+import {ChipCard} from "../components/ChipCard.tsx";
 
 export default function Home() {
     const currentUser = MockUserMap.get(4); // Neo Quantum
@@ -57,8 +58,8 @@ export default function Home() {
 
             {/* Personal Feed */}
             <NavLink to='/feed'
-                     className="block mb-3 transition-all duration-300 hover:transform hover:scale-[1.01] bg-gradient-to-br from-[rgba(166,77,255,0.35)] to-[rgba(213,0,249,0.35)] backdrop-blur-md rounded-xl shadow-lg dreamy-card">
-                <div className="p-3">
+                     className="block mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] bg-gradient-to-br from-[rgba(166,77,255,0.35)] to-[rgba(213,0,249,0.35)] backdrop-blur-md rounded-xl shadow-lg dreamy-card">
+                <div className="p-4">
                     <h3 className="font-bold mb-2 dream-title text-base">Deine letzten Träume</h3>
                     {personalDreams.length > 0 ? (
                         <div className="space-y-2">
@@ -80,8 +81,8 @@ export default function Home() {
 
             {/* Friends Feed */}
             <NavLink to='/feed'
-                     className="block mb-3 transition-all duration-300 hover:transform hover:scale-[1.01] bg-gradient-to-br from-[rgba(166,77,255,0.35)] to-[rgba(213,0,249,0.35)] backdrop-blur-md rounded-xl shadow-lg dreamy-card">
-                <div className="p-3">
+                     className="block mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] bg-gradient-to-br from-[rgba(166,77,255,0.35)] to-[rgba(213,0,249,0.35)] backdrop-blur-md rounded-xl shadow-lg dreamy-card">
+                <div className="p-4">
                     <h3 className="font-bold mb-2 dream-title text-base">Träume von Freunden</h3>
                     <div className="space-y-2">
                         {friendsDreams.map((dream, index) => {
@@ -105,34 +106,8 @@ export default function Home() {
                 <DailyHighlights/>
             </NavLink>
 
-            {/* Ad Banner */
-            }
-            <div
-                className={getCardStyle(true).className}
-                style={getBackgroundStyle('gradient')}>
-                <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>
+            {/* Ad Banner */}
+            <ChipCard/>
         </div>
     )
         ;
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index e6d80ed..ebb181e 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -56,7 +56,10 @@ export const getTextStyle = (type: 'normal' | 'muted' | 'accent' = 'normal') =>
  * @param type - The type of background (normal, card, gradient)
  * @returns Object with style properties
  */
-export const getBackgroundStyle = (type: 'normal' | 'card' | 'gradient' | 'accent-gradient' | 'topbar' = 'normal') => {
+export const getBackgroundStyle = (
+    type: 'normal' | 'card' | 'gradient' | 'accent-gradient' | 'topbar' |
+        'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta' = 'normal'
+) => {
     switch (type) {
         case 'card':
             return {backgroundColor: 'var(--bg)', boxShadow: '0 4px 15px var(--shadow)'};
@@ -75,7 +78,56 @@ export const getBackgroundStyle = (type: 'normal' | 'card' | 'gradient' | 'accen
         case 'topbar':
             return {
                 background: 'var(--accent-gradient)',
-                boxShadow: '0 2px 10px var(--shadow)'
+                boxShadow: '0 2px 10px var(--shadow)',
+                backdropFilter: 'blur(10px)'
+            };
+        case 'purple':
+            return {
+                background: 'var(--purple-gradient)',
+                color: 'var(--text)',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.2)'
+            };
+        case 'blue':
+            return {
+                background: 'var(--blue-gradient)',
+                color: 'var(--text)',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(59, 130, 246, 0.2)'
+            };
+        case 'violet':
+            return {
+                background: 'var(--violet-gradient)',
+                color: 'var(--text)',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(139, 92, 246, 0.2)'
+            };
+        case 'emerald':
+            return {
+                background: 'var(--emerald-gradient)',
+                color: 'var(--text)',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(16, 185, 129, 0.2)'
+            };
+        case 'amber':
+            return {
+                background: 'var(--amber-gradient)',
+                color: 'var(--text)',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(245, 158, 11, 0.2)'
+            };
+        case 'rose':
+            return {
+                background: 'var(--rose-gradient)',
+                color: 'var(--text)',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(244, 63, 94, 0.2)'
+            };
+        case 'pink-red':
+            return {
+                background: 'var(--pink-red-gradient)',
+                color: 'var(--text)',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(236, 72, 153, 0.2)'
+            };
+        case 'cta':
+            return {
+                background: 'var(--cta-gradient)',
+                color: 'white',
+                boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(236, 72, 153, 0.3)'
             };
         default:
             return {backgroundColor: 'var(--bg)'};