Compare commits

...

3 Commits

Author SHA1 Message Date
04599827f9 feat(ui): add actual EU flag image and update path to webp
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 25s
Build & Deploy / 🧪 QA (push) Successful in 1m33s
Build & Deploy / 🏗️ Build (push) Successful in 2m57s
Build & Deploy / 🚀 Deploy (push) Successful in 30s
Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 56s
Build & Deploy / 🔔 Notify (push) Successful in 2s
2026-06-15 16:47:54 +02:00
5368f1a64d feat(ui): smooth radial fade on EU badge and setup custom image path
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 26s
Build & Deploy / 🧪 QA (push) Successful in 1m25s
Build & Deploy / 🏗️ Build (push) Has been cancelled
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
2026-06-15 16:45:40 +02:00
241c97e346 feat(ui): refine EU badge into subtle triangular corner fade with text
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 27s
Build & Deploy / 🧪 QA (push) Successful in 1m25s
Build & Deploy / 🏗️ Build (push) Successful in 2m56s
Build & Deploy / 🚀 Deploy (push) Successful in 30s
Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 57s
Build & Deploy / 🔔 Notify (push) Successful in 3s
2026-06-15 16:34:50 +02:00
2 changed files with 25 additions and 11 deletions

View File

@@ -8,20 +8,34 @@ export function EUFundingBadge() {
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 2, ease: [0.16, 1, 0.3, 1] }}
className="absolute top-0 right-0 w-[350px] md:w-[550px] h-[350px] md:h-[550px] z-[40] pointer-events-none select-none"
transition={{ duration: 1.5, ease: [0.16, 1, 0.3, 1] }}
className="absolute top-0 right-0 w-[260px] md:w-[380px] h-[260px] md:h-[380px] z-[40] pointer-events-none select-none overflow-hidden"
style={{
maskImage: 'radial-gradient(ellipse at top right, black 10%, transparent 70%)',
WebkitMaskImage: 'radial-gradient(ellipse at top right, black 10%, transparent 70%)',
// Perfekter weicher Fade, der sicherstellt, dass harte Kanten komplett unsichtbar werden
maskImage: 'radial-gradient(100% 100% at top right, black 10%, rgba(0,0,0,0.8) 30%, transparent 70%)',
WebkitMaskImage: 'radial-gradient(100% 100% at top right, black 10%, rgba(0,0,0,0.8) 30%, transparent 70%)',
}}
>
<Image
src="/assets/eu-flag-perspective.png"
alt="European Union Background"
fill
className="object-cover object-top opacity-70"
priority
/>
{/* Background Flag */}
<div className="absolute inset-0 w-full h-full opacity-95">
<Image
src="/assets/eu-flag.webp"
alt="European Union Background"
fill
className="object-cover object-top"
priority
/>
</div>
{/* Text overlaid on the flag */}
<div className="absolute top-0 right-0 p-5 md:p-8 flex flex-col items-end text-right z-10 drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]">
<span className="block text-[9px] md:text-[11px] font-bold text-white/90 tracking-wide leading-snug drop-shadow-md">
Kofinanziert von der
</span>
<span className="block text-[11px] md:text-[13px] font-extrabold text-white tracking-wider leading-snug uppercase drop-shadow-md">
Europäischen Union
</span>
</div>
</motion.div>
);
}

BIN
public/assets/eu-flag.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB