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
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
This commit is contained in:
@@ -8,20 +8,33 @@ 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-[220px] md:w-[320px] h-[220px] md:h-[320px] 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%)',
|
||||
maskImage: 'linear-gradient(225deg, black 15%, transparent 65%)',
|
||||
WebkitMaskImage: 'linear-gradient(225deg, black 15%, transparent 65%)',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/assets/eu-flag-perspective.png"
|
||||
alt="European Union Background"
|
||||
fill
|
||||
className="object-cover object-top opacity-70"
|
||||
priority
|
||||
/>
|
||||
{/* Background Flag with Scaling to fill the corner */}
|
||||
<div className="absolute inset-0 w-full h-full scale-[1.3] origin-top-right opacity-90">
|
||||
<Image
|
||||
src="/assets/eu-flag-perspective.png"
|
||||
alt="European Union Background"
|
||||
fill
|
||||
className="object-cover object-center"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Text overlaid on the flag */}
|
||||
<div className="absolute top-0 right-0 p-4 md:p-6 flex flex-col items-end text-right z-10 drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]">
|
||||
<span className="block text-[8px] md:text-[10px] font-bold text-white/90 tracking-wide leading-snug">
|
||||
Kofinanziert von der
|
||||
</span>
|
||||
<span className="block text-[10px] md:text-[12px] font-extrabold text-white tracking-wider leading-snug uppercase">
|
||||
Europäischen Union
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user