feat(ui): redesign EU flag with perspective image and gradient fade mask

components/blocks/CertificatesBlock.tsx

@@ -68,31 +68,7 @@ const defaultCertificates: Certificate[] = [
     type: 'tax',
     date: '13.02.2025',
   },
-  {
+
-    title: 'Unbedenklichkeit IHK',
-    description: 'Industrie- und Handelskammer',
-    type: 'general',
-  },
-  {
-    title: 'Unbedenklichkeit HWK',
-    description: 'Handwerkskammer',
-    type: 'general',
-  },
-  {
-    title: 'Handelsregisterauszug',
-    description: 'Amtsgericht Cottbus',
-    type: 'general',
-  },
-  {
-    title: 'Gewerbe-Anmeldung',
-    description: 'Stadt Guben',
-    type: 'general',
-  },
-  {
-    title: 'Gewerbezentralregister',
-    description: 'Auskunft aus dem Register',
-    type: 'general',
-  },
 ];
 
 export function CertificatesBlock({ badge, title, description, certificates = defaultCertificates, hideHeader = false }: CertificatesBlockProps) {

components/decorations/EUFundingBadge.tsx

@@ -1,44 +1,27 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 
 export function EUFundingBadge() {
   return (
     <motion.div 
-      initial={{ opacity: 0, x: 20 }}
+      initial={{ opacity: 0 }}
-      animate={{ opacity: 1, x: 0 }}
+      animate={{ opacity: 1 }}
-      transition={{ duration: 0.8, delay: 0.8, ease: [0.16, 1, 0.3, 1] }}
+      transition={{ duration: 2, 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"
+      className="absolute top-0 right-0 w-[350px] md:w-[550px] h-[350px] md:h-[550px] z-0 pointer-events-none select-none"
+      style={{
+        maskImage: 'radial-gradient(ellipse at top right, black 10%, transparent 70%)',
+        WebkitMaskImage: 'radial-gradient(ellipse at top right, black 10%, transparent 70%)',
+      }}
     >
-      <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]">
+      <Image
-        {/* EU Flag */}
+        src="/assets/eu-flag-perspective.png"
-        <svg viewBox="0 0 810 540" xmlns="http://www.w3.org/2000/svg" className="w-full h-auto">
+        alt="European Union Background"
-          <path d="M0 0h810v540H0z" fill="#003399"/>
+        fill
-          <g fill="#fc0" transform="translate(405 270)">
+        className="object-cover object-top opacity-50 mix-blend-screen"
-            <use href="#eu-star" y="-180"/>
+        priority
-            <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>
   );
 }

content/de/karriere.mdx

@@ -5,13 +5,14 @@ excerpt: "Werden Sie Teil eines dynamischen Teams und bauen Sie mit uns die Infr
 layout: "fullBleed"
 ---
 
-<HomeHero 
+<HeroSection 
   badge="Karriere"
   title="Zukunft bauen"
-  description="Suchen Sie eine neue Herausforderung in einem zukunftssicheren Markt? Bei E-TIB arbeiten wir täglich daran, Deutschland zu vernetzen und die Energiewende voranzutreiben."
+  subtitle="Suchen Sie eine neue Herausforderung in einem zukunftssicheren Markt? Bei E-TIB arbeiten wir täglich daran, Deutschland zu vernetzen und die Energiewende voranzutreiben."
-  videoUrl="/assets/videos/web/hero-kabelpflug.mp4"
+  backgroundImage={{ url: '/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-28.jpg' }}
-  linkText="Offene Stellen"
+  alignment="center"
-  linkHref="#stellen"
+  ctaLabel="Offene Stellen"
+  ctaHref="#stellen"
 />
 
 <JobListingBlock showFairs={false} showJobs={true} />

content/en/karriere.mdx

@@ -5,13 +5,14 @@ excerpt: "Become part of a dynamic team and help us build the infrastructure of
 layout: "fullBleed"
 ---
 
-<HomeHero 
+<HeroSection 
   badge="Careers"
   title="Build the Future"
-  description="Are you looking for a new challenge in a future-proof market? At E-TIB, we work daily to network Germany and drive the energy transition forward."
+  subtitle="Are you looking for a new challenge in a future-proof market? At E-TIB, we work daily to network Germany and drive the energy transition forward."
-  videoUrl="/assets/videos/web/hero-kabelpflug.mp4"
+  backgroundImage={{ url: '/assets/photos/Etib_E-tib_Tiefbau_Guben_Netzanbindung_Energie-28.jpg' }}
-  linkText="Open Positions"
+  alignment="center"
-  linkHref="#stellen"
+  ctaLabel="Open Positions"
+  ctaHref="#stellen"
 />
 
 <JobListingBlock showFairs={false} showJobs={true} />