style: remove text gradients and centered badges

This commit is contained in:
DanielS
2026-07-14 23:42:28 +02:00
parent 7119383139
commit fb61f5f396
5 changed files with 14 additions and 28 deletions

View File

@@ -34,3 +34,8 @@ python3 .agents/skills/uiux-designer/scripts/search.py "<keyword>" --domain <dom
### Step 4: Stack Guidelines ### Step 4: Stack Guidelines
python3 .agents/skills/uiux-designer/scripts/search.py "<keyword>" --stack html-tailwind python3 .agents/skills/uiux-designer/scripts/search.py "<keyword>" --stack html-tailwind
## Anti-AI-Design Guidelines
- **NO Centered Badges/Pills**: Do NOT place centered badges or pills (e.g. "CASPOS Lizenz-Portal" or "Ablauf") above main headings. They look like generic, low-quality AI-generated templates.
- **NO Text Gradients**: Avoid text gradients (e.g. `bg-gradient-to-r ... bg-clip-text text-transparent`) on headings. Use flat colors (like `text-white` or solid brand colors).

View File

@@ -16,7 +16,7 @@ export default function Datenschutz() {
<div className="inline-flex p-3 bg-blue-500/10 rounded-xl text-blue-400"> <div className="inline-flex p-3 bg-blue-500/10 rounded-xl text-blue-400">
<Lock className="w-6 h-6" /> <Lock className="w-6 h-6" />
</div> </div>
<h1 className="text-4xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-100 to-slate-400"> <h1 className="text-4xl font-extrabold tracking-tight text-white">
Datenschutzerklärung Datenschutzerklärung
</h1> </h1>
<p className="text-slate-400">Informationen über die Verarbeitung Ihrer personenbezogenen Daten.</p> <p className="text-slate-400">Informationen über die Verarbeitung Ihrer personenbezogenen Daten.</p>

View File

@@ -16,7 +16,7 @@ export default function Impressum() {
<div className="inline-flex p-3 bg-blue-500/10 rounded-xl text-blue-400"> <div className="inline-flex p-3 bg-blue-500/10 rounded-xl text-blue-400">
<Shield className="w-6 h-6" /> <Shield className="w-6 h-6" />
</div> </div>
<h1 className="text-4xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-100 to-slate-400"> <h1 className="text-4xl font-extrabold tracking-tight text-white">
Impressum Impressum
</h1> </h1>
<p className="text-slate-400">Angaben gemäß § 5 TMG.</p> <p className="text-slate-400">Angaben gemäß § 5 TMG.</p>

View File

@@ -110,27 +110,14 @@ export function HomeClient({ initialUser }: HomeClientProps) {
variants={containerVariants} variants={containerVariants}
className="container max-w-6xl mx-auto flex flex-col items-center text-center space-y-8" className="container max-w-6xl mx-auto flex flex-col items-center text-center space-y-8"
> >
{/* Badge */}
<motion.div
variants={itemVariants}
className="inline-flex items-center gap-2 rounded-full bg-blue-500/10 border border-blue-500/20 px-4 py-1.5 text-xs sm:text-sm text-blue-400 font-semibold tracking-wide backdrop-blur-md shadow-[0_0_15px_rgba(59,130,246,0.1)]"
>
<motion.div
animate={{ opacity: [0.5, 1, 0.5] }}
transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
>
<Zap className="w-3.5 h-3.5 text-blue-400 fill-blue-400/20" />
</motion.div>
CASPOS Lizenz-Portal
</motion.div>
{/* Headline */} {/* Headline */}
<div className="space-y-4 max-w-4xl"> <div className="space-y-4 max-w-4xl">
<motion.h1 <motion.h1
variants={itemVariants} variants={itemVariants}
className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl/tight bg-clip-text text-transparent bg-gradient-to-b from-white via-slate-100 to-slate-400" className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl/tight text-white"
> >
CASPOS Software <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-indigo-400 to-purple-500 font-black">Lizenzen & Module</span> CASPOS Software <span className="text-blue-500 font-black">Lizenzen & Module</span>
</motion.h1> </motion.h1>
<motion.p <motion.p
variants={itemVariants} variants={itemVariants}
@@ -223,10 +210,7 @@ export function HomeClient({ initialUser }: HomeClientProps) {
<div className="absolute top-1/4 right-0 w-[400px] h-[400px] bg-indigo-600/5 blur-[120px] rounded-full -z-10 pointer-events-none" /> <div className="absolute top-1/4 right-0 w-[400px] h-[400px] bg-indigo-600/5 blur-[120px] rounded-full -z-10 pointer-events-none" />
<div className="text-center space-y-3 mb-16"> <div className="text-center space-y-3 mb-16">
<div className="inline-flex items-center gap-1.5 text-xs font-bold text-indigo-400 uppercase tracking-widest bg-indigo-500/10 border border-indigo-500/20 px-3 py-1 rounded-full"> <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-white">
<Sparkles className="w-3 h-3" />CASPOS Sites
</div>
<h2 className="text-3xl sm:text-4xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-100 to-slate-400">
Workspace-Zentrale Workspace-Zentrale
</h2> </h2>
<p className="text-slate-400 max-w-[600px] mx-auto text-sm sm:text-base"> <p className="text-slate-400 max-w-[600px] mx-auto text-sm sm:text-base">
@@ -296,10 +280,7 @@ export function HomeClient({ initialUser }: HomeClientProps) {
<section className="w-full py-16 md:py-24 border-t border-slate-900 bg-slate-950/30"> <section className="w-full py-16 md:py-24 border-t border-slate-900 bg-slate-950/30">
<div className="container max-w-5xl mx-auto px-4"> <div className="container max-w-5xl mx-auto px-4">
<div className="text-center space-y-3 mb-16"> <div className="text-center space-y-3 mb-16">
<div className="inline-flex items-center gap-1.5 text-xs font-bold text-blue-400 uppercase tracking-widest bg-blue-500/10 border border-blue-500/20 px-3 py-1 rounded-full"> <h2 className="text-2xl sm:text-3xl font-bold tracking-tight text-center text-white">
<Activity className="w-3 h-3" /> Ablauf
</div>
<h2 className="text-2xl sm:text-3xl font-bold tracking-tight text-center bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-200 to-slate-400">
Wie funktioniert die Bereitstellung? Wie funktioniert die Bereitstellung?
</h2> </h2>
</div> </div>

View File

@@ -111,8 +111,8 @@ export function SetupWizard() {
{/* Step Indicator Header */} {/* Step Indicator Header */}
<div className="flex items-center justify-between mb-8 px-2"> <div className="flex items-center justify-between mb-8 px-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-xl font-bold tracking-tight text-gradient bg-gradient-to-r from-blue-400 to-indigo-400">CASPOS</span> <span className="text-xl font-bold tracking-tight text-blue-400">CASPOS</span>
<span className="text-xs px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/20 font-medium">Initialisierung</span> <span className="text-xs px-2.5 py-0.5 rounded-full bg-slate-900 text-slate-400 border border-slate-800 font-medium">Initialisierung</span>
</div> </div>
<div className="flex gap-1.5"> <div className="flex gap-1.5">
{[1, 2, 3].map((s) => ( {[1, 2, 3].map((s) => (