42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import Image from 'next/image';
|
|
|
|
export function EUFundingBadge() {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
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-0 pointer-events-none select-none overflow-hidden"
|
|
style={{
|
|
// 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%)',
|
|
}}
|
|
>
|
|
{/* 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 pt-8 pr-8 md:pt-12 md:pr-12 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>
|
|
);
|
|
}
|