mpuchstein/REMind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-12 12:32:58 +02:00
parent 153f5fd146
commit ccca533db6
10 changed files with 190 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/ChipCard.tsx Normal file
View File

@@ -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>
);
};

17
src/components/DailyHighlights.tsx
View File

@@ -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)'
}}>

30
src/components/DreamCard.tsx
View File

@@ -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>

24
src/components/DreamCardCompact.tsx
View File

@@ -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>

6
src/components/DreamRecord.tsx
View File

@@ -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)'

22
src/components/Navbar.tsx
View File

@@ -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>

15
src/components/TopBar.tsx
View File

@@ -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>)}

20
src/index.css
View File

@@ -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 {

39
src/pages/Home.tsx
View File

@@ -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>
)
;

56
src/styles/StyleUtils.ts
View File

@@ -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)'};