mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

feat(ui): add EU Funding Badge to global layout
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 26s
Details
Build & Deploy / 🧪 QA (push) Successful in 1m24s
Details
Build & Deploy / 🏗️ Build (push) Successful in 2m32s
Details
Build & Deploy / 🔔 Notify (push) Has been cancelled
Details
Build & Deploy / 🚀 Deploy (push) Successful in 30s
Details
Build & Deploy / 🧪 Post-Deploy Verification (push) Has started running
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-06-15 15:29:23 +02:00
parent a47d378521
commit 11b9e4630b
2 changed files with 46 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/layout.tsx
View File

@@ -19,6 +19,7 @@ import { TransitionProvider } from '@/components/providers/TransitionProvider';
import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter'; import { PageTransitionShutter } from '@/components/providers/PageTransitionShutter';
import { InitialLoader } from '@/components/providers/InitialLoader'; import { InitialLoader } from '@/components/providers/InitialLoader';
import { CorporateBackground } from '@/components/decorations/CorporateBackground'; import { CorporateBackground } from '@/components/decorations/CorporateBackground';
import { EUFundingBadge } from '@/components/decorations/EUFundingBadge';
const inter = Inter({ const inter = Inter({
subsets: ['latin'], subsets: ['latin'],
@@ -202,6 +203,7 @@ export default async function Layout(props: {
<PageTransitionShutter /> <PageTransitionShutter />
<SkipLink /> <SkipLink />
<Header navLinks={navLinks} /> <Header navLinks={navLinks} />
<EUFundingBadge />
<MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} /> <MobileBottomNav navLinks={navLinks} currentLocale={safeLocale} />
<main <main

44
components/decorations/EUFundingBadge.tsx Normal file
View File

@@ -0,0 +1,44 @@
'use client';
import { motion } from 'framer-motion';
export function EUFundingBadge() {
return (
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.8, ease: [0.16, 1, 0.3, 1] }}
className="fixed top-24 right-4 md:right-6 lg:right-8 z-40 pointer-events-none select-none"
>
<div className="bg-white p-2.5 rounded-sm shadow-[0_8px_30px_rgba(0,0,0,0.12)] border border-neutral-200/60 flex flex-col items-center w-[110px] sm:w-[130px]">
{/* EU Flag */}
<svg viewBox="0 0 810 540" xmlns="http://www.w3.org/2000/svg" className="w-full h-auto">
<path d="M0 0h810v540H0z" fill="#003399"/>
<g fill="#fc0" transform="translate(405 270)">
<use href="#eu-star" y="-180"/>
<use href="#eu-star" y="180"/>
<use href="#eu-star" x="-180"/>
<use href="#eu-star" x="180"/>
<use href="#eu-star" x="-155.885" y="-90"/>
<use href="#eu-star" x="155.885" y="90"/>
<use href="#eu-star" x="-155.885" y="90"/>
<use href="#eu-star" x="155.885" y="-90"/>
<use href="#eu-star" x="-90" y="-155.885"/>
<use href="#eu-star" x="90" y="155.885"/>
<use href="#eu-star" x="-90" y="155.885"/>
<use href="#eu-star" x="90" y="-155.885"/>
</g>
<defs>
<path id="eu-star" d="m0-30 7.053 21.708H29.39L10.36 7.64l7.054 21.709L0 15.692l-17.414 13.657 7.054-21.71L-29.39-8.292h22.337z"/>
</defs>
</svg>
{/* Text */}
<div className="mt-2 text-center w-full">
<span className="block text-[9.5px] sm:text-[11.5px] font-bold text-[#003399] leading-[1.25] tracking-tight font-sans">
Kofinanziert von der<br />Europäischen Union
</span>
</div>
</div>
</motion.div>
);
}