feat(ui): add AnimatedGlossyBorder and refine industrial interactions

2026-05-13 10:23:47 +02:00
parent 7d6a52e1c6
commit 2cb0b50193
15 changed files with 224 additions and 54 deletions
--- a/.npmrc
+++ b/.npmrc
@@ -1,7 +1,7 @@
-@mintel:registry=https://npm.infra.mintel.me
-//npm.infra.mintel.me/:_authToken=YTJlYzk0ZDk1MzRiMTRmNmQxZWNkMTBkNmFhNTg4Y2I6MWVkMjdjNzE3NDVkMzhmMmQ4MDEyODEwNmJjZmQyYTkwMjY3M2VjZA==
-//npm.infra.mintel.me/:always-auth=true
-//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=YTJlYzk0ZDk1MzRiMTRmNmQxZWNkMTBkNmFhNTg4Y2I6MWVkMjdjNzE3NDVkMzhmMmQ4MDEyODEwNmJjZmQyYTkwMjY3M2VjZA==
+@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm
+//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=3b9e7c4da038461efd0c6fd006d432d2ace5cb14
 //git.infra.mintel.me/api/packages/mmintel/npm/:always-auth=true
-//registry.infra.mintel.me/api/packages/mmintel/npm/:_authToken=YTJlYzk0ZDk1MzRiMTRmNmQxZWNkMTBkNmFhNTg4Y2I6MWVkMjdjNzE3NDVkMzhmMmQ4MDEyODEwNmJjZmQyYTkwMjY3M2VjZA==
+//registry.infra.mintel.me/api/packages/mmintel/npm/:_authToken=3b9e7c4da038461efd0c6fd006d432d2ace5cb14
 //registry.infra.mintel.me/api/packages/mmintel/npm/:always-auth=true
+//npm.infra.mintel.me/:_authToken=3b9e7c4da038461efd0c6fd006d432d2ace5cb14
+//npm.infra.mintel.me/:always-auth=true
--- a/app/[locale]/template.tsx
+++ b/app/[locale]/template.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+export default function Template({ children }: { children: React.ReactNode }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20, filter: 'blur(10px)' }}
+      animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+      transition={{ 
+        duration: 0.7, 
+        ease: [0.16, 1, 0.3, 1],
+      }}
+      className="w-full h-full"
+    >
+      {children}
+    </motion.div>
+  );
+}
--- a/components/blocks/BenefitGrid.tsx
+++ b/components/blocks/BenefitGrid.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { motion, Variants } from 'framer-motion';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
+import { LogoArcs } from '@/components/ui/LogoArcs';

 export interface BenefitItem {
  id: string;
@@ -100,13 +101,32 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
          whileInView="visible"
          viewport={{ once: true, margin: "-50px" }}
        >
-          {benefits.map((benefit) => (
-            <motion.div
-              key={benefit.id}
-              variants={itemVariants}
-              className="group relative overflow-hidden bg-neutral-50/50 border border-neutral-200/60 rounded-3xl p-8 transition-all duration-500 hover:bg-white hover:border-primary/30 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:-translate-y-1"
-            >
-              <HoverShineOverlay shineColor="via-primary/5" />
+          {benefits.map((benefit, index) => {
+            const bgPositionClasses = [
+              "-bottom-[30%] -right-[30%]",
+              "-top-[30%] -left-[30%]",
+              "-bottom-[30%] -left-[30%]"
+            ];
+            const animationClasses = [
+              "animate-[spin_60s_linear_infinite]",
+              "animate-[spin_80s_linear_infinite]",
+              "animate-[spin_100s_linear_infinite]"
+            ];
+            const positionClass = bgPositionClasses[index % bgPositionClasses.length];
+            const animationClass = animationClasses[index % animationClasses.length];
+
+            return (
+              <motion.div
+                key={benefit.id}
+                variants={itemVariants}
+                className="group relative overflow-hidden bg-neutral-50/50 border border-neutral-200/60 rounded-3xl p-8 transition-all duration-500 hover:bg-white hover:border-primary/30 hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)] hover:-translate-y-1"
+              >
+                <HoverShineOverlay shineColor="via-primary/5" />
+                
+                {/* Subtle Background Logo Arcs */}
+                <div className={`absolute ${positionClass} w-[120%] h-[120%] z-0 opacity-0 group-hover:opacity-[0.03] transition-opacity duration-1000 pointer-events-none mix-blend-multiply`}>
+                  <LogoArcs className={`w-full h-full text-primary ${animationClass}`} />
+                </div>
              
              <div className="relative z-10 flex items-start gap-4">
                <div className="relative shrink-0 w-12 h-12 flex items-center justify-center bg-primary/10 text-primary rounded-xl transition-all duration-500 group-hover:bg-primary group-hover:text-white group-hover:scale-110 group-hover:-rotate-3">
@@ -125,7 +145,8 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
                </div>
              </div>
            </motion.div>
-          ))}
+          );
+        })}
        </motion.div>
      </div>
    </section>
--- a/components/blocks/CompetenceBentoGrid.tsx
+++ b/components/blocks/CompetenceBentoGrid.tsx
@@ -6,8 +6,9 @@ import { motion } from 'framer-motion';
 import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
-
+import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';
 import { Container } from '@/components/ui/Container';
+import { LogoArcs } from '@/components/ui/LogoArcs';

 interface CompetenceBentoGridProps {
  badge?: string;
@@ -113,7 +114,14 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                  className={gridClasses}
                >
                  <div className="absolute top-0 right-0 w-32 h-32 bg-primary/30 blur-3xl rounded-full -mr-10 -mt-10 group-hover:bg-primary/50 transition-colors duration-500" />
+                  
+                  {/* Subtle Background Logo Arcs */}
+                  <div className={`absolute -bottom-[30%] -right-[30%] w-[120%] h-[120%] z-0 opacity-10 group-hover:opacity-20 transition-opacity duration-1000 pointer-events-none mix-blend-overlay`}>
+                    <LogoArcs className={`w-full h-full text-white animate-[spin_60s_linear_infinite]`} />
+                  </div>
+
                  <HoverShineOverlay shineColor="via-white/30" />
+                  <AnimatedGlossyBorder color="white" className="opacity-0 group-hover:opacity-100 transition-opacity duration-700" borderWidth={1} />
                  <h4 className="font-bold text-xl md:text-2xl relative z-10 leading-snug">{item.title}</h4>
                  {item.description && <p className="text-white/60 text-sm mt-3 relative z-10">{item.description}</p>}
                </motion.div>
@@ -148,6 +156,12 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
                )}
                
                <HoverShineOverlay />
+                <AnimatedGlossyBorder color="white" className="opacity-0 group-hover:opacity-100 transition-opacity duration-700" borderWidth={1} />
+                
+                {/* Subtle Background Logo Arcs */}
+                <div className="absolute -top-[30%] -left-[30%] w-[120%] h-[120%] z-0 opacity-0 group-hover:opacity-[0.05] transition-opacity duration-1000 pointer-events-none mix-blend-overlay">
+                  <LogoArcs className={`w-full h-full text-white animate-[spin_80s_linear_infinite]`} />
+                </div>
                
                <div className="relative z-10 p-8 flex flex-col justify-end h-full text-white">
                  {item.tag && (
--- a/components/blocks/SubCompanyTiles.tsx
+++ b/components/blocks/SubCompanyTiles.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import { motion, Variants } from 'framer-motion';
 import Image from 'next/image';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
+import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';

 interface SubCompanyTilesProps {
  badge?: string;
@@ -49,6 +50,7 @@ const itemVariants: Variants = {
 };

 import { usePathname } from 'next/navigation';
+import { LogoArcs } from '@/components/ui/LogoArcs';

 export function SubCompanyTiles(props: SubCompanyTilesProps) {
  const { data } = props;
@@ -91,6 +93,19 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
            const isEtib = company.title.includes('E-TIB');
            const isIng = company.title.includes('Ingenieur');
            const isNemo = company.title.includes('NEMO');
+
+            const bgPositionClasses = [
+              "-bottom-[30%] -right-[30%]",
+              "-top-[30%] -left-[30%]",
+              "-bottom-[30%] -left-[30%]"
+            ];
+            const animationClasses = [
+              "animate-[spin_60s_linear_infinite]",
+              "animate-[spin_80s_linear_infinite]",
+              "animate-[spin_100s_linear_infinite]"
+            ];
+            const positionClass = bgPositionClasses[index % bgPositionClasses.length];
+            const animationClass = animationClasses[index % animationClasses.length];
            
            return (
              <motion.div 
@@ -126,10 +141,22 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
                      ? 'bg-gradient-to-t from-[#0a192f]/90 via-[#0a192f]/60 to-[#0a192f]/40' 
                      : 'bg-gradient-to-t from-[#0a192f]/90 via-[#0a192f]/60 to-[#0a192f]/40 group-hover:from-primary/90 group-hover:to-primary/20'
                  }`} />
+
+                  {/* Subtle Background Logo Arcs */}
+                  <div className={`absolute ${positionClass} w-[120%] h-[120%] z-10 opacity-[0.02] group-hover:opacity-[0.08] transition-opacity duration-1000 pointer-events-none mix-blend-overlay`}>
+                    <LogoArcs className={`w-full h-full text-white ${animationClass}`} />
+                  </div>
                  
                  {/* Premium Shine Sweep Effect (Industrial Reflection) */}
                  <HoverShineOverlay shineColor="via-white/30" />
                  
+                  {/* Glossy Animated Border */}
+                  <AnimatedGlossyBorder 
+                    color={isCurrent ? "primary" : "white"} 
+                    className={`transition-opacity duration-700 ${isCurrent ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`} 
+                    borderWidth={1} 
+                  />
+                  
                  {/* Current Site Indicator Badge */}
                  {isCurrent && (
                    <div className="absolute top-6 right-6 z-20">
--- a/components/decorations/CorporateBackground.tsx
+++ b/components/decorations/CorporateBackground.tsx
@@ -2,24 +2,7 @@

 import React, { useRef, useEffect } from 'react';
 import { motion, useScroll, useTransform, useSpring } from 'framer-motion';
-
-// Reusable SVG component that precisely mimics the overlapping, sweeping arcs of the E-TIB logo.
-const LogoArcs = ({ className }: { className?: string }) => (
-  <svg 
-    className={className} 
-    viewBox="0 0 200 200" 
-    fill="none" 
-    xmlns="http://www.w3.org/2000/svg"
-    stroke="currentColor"
-  >
-    {/* Outer ring */}
-    <circle cx="100" cy="100" r="90" strokeWidth="1.5" />
-    {/* Middle thicker ring */}
-    <circle cx="92" cy="108" r="78" strokeWidth="3.5" />
-    {/* Inner ring */}
-    <circle cx="84" cy="116" r="66" strokeWidth="1.5" />
-  </svg>
-);
+import { LogoArcs } from '@/components/ui/LogoArcs';

 function MagneticRing({ 
  children, 
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -125,7 +125,7 @@ export function Header({ navLinks }: HeaderProps) {
                <TransitionLink 
                  key={link.url}
                  href={mappedUrl} 
-                  className={`relative font-bold text-xs lg:text-sm uppercase tracking-widest transition-colors duration-300 group py-2 ${
+                  className={`relative font-bold text-xs lg:text-sm uppercase tracking-widest transition-colors duration-300 group py-2 select-none ${
                    isSolidMode 
                      ? (isActive ? 'text-primary' : 'text-text-primary hover:text-primary')
                      : (isActive ? 'text-white' : 'text-white/80 hover:text-white')
@@ -162,7 +162,7 @@ export function Header({ navLinks }: HeaderProps) {
              {/* Contact Button Desktop Only */}
              <TransitionLink
                href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
-                className={`relative hidden md:inline-flex ml-2 px-7 py-2.5 rounded-full font-bold text-xs lg:text-sm uppercase tracking-widest transition-all duration-500 overflow-hidden group/cta isolate ${
+                className={`relative hidden md:inline-flex ml-2 px-7 py-2.5 rounded-full font-bold text-xs lg:text-sm uppercase tracking-widest transition-all duration-500 overflow-hidden group/cta isolate select-none ${
                  isSolidMode
                    ? 'bg-primary text-white shadow-lg shadow-primary/20 hover:shadow-primary/40 hover:-translate-y-0.5 border border-transparent'
                    : 'bg-white/10 text-white backdrop-blur-md border border-white/30 hover:bg-white/20 hover:-translate-y-0.5 hover:shadow-[0_0_20px_rgba(255,255,255,0.2)]'
--- a/components/layout/LanguageSwitcher.tsx
+++ b/components/layout/LanguageSwitcher.tsx
@@ -33,7 +33,7 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
              key={loc.code}
              href={getSwitchedUrl(loc.code)}
              transitionMessage={currentLocale === loc.code ? undefined : `LANG_SWITCH:${currentLocObj.flag}:${loc.flag}`}
-              className={`group relative overflow-hidden flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
+              className={`group relative overflow-hidden flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 select-none ${
                currentLocale === loc.code
                  ? 'bg-primary/10 text-primary border border-primary/20'
                  : 'text-text-secondary hover:bg-neutral-50 border border-transparent'
@@ -83,7 +83,7 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
            key={loc.code}
            href={getSwitchedUrl(loc.code)}
            transitionMessage={isActive ? undefined : `LANG_SWITCH:${currentLocObj.flag}:${loc.flag}`}
-            className={`relative z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all duration-300 ${linkClass}`}
+            className={`relative z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all duration-300 select-none ${linkClass}`}
            aria-label={`Switch to ${loc.fullLabel}`}
          >
            <span className="text-sm" aria-hidden="true">{loc.flag}</span>
--- a/components/layout/MobileBottomNav.tsx
+++ b/components/layout/MobileBottomNav.tsx
@@ -72,7 +72,7 @@ export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProp
            <TransitionLink 
              key={item.label}
              href={mappedUrl}
-              className={`relative flex flex-col items-center justify-center w-full min-h-[44px] py-1 transition-colors duration-300 ${
+              className={`relative flex flex-col items-center justify-center w-full min-h-[44px] py-1 transition-colors duration-300 select-none ${
                isActive ? 'text-primary' : 'text-neutral-500 hover:text-neutral-900'
              }`}
            >
--- a/components/providers/TransitionProvider.tsx
+++ b/components/providers/TransitionProvider.tsx
@@ -1,7 +1,7 @@
 'use client';

-import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
-import { useRouter } from 'next/navigation';
+import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';

 interface TransitionContextType {
  isTransitioning: boolean;
@@ -15,13 +15,39 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
  const [isTransitioning, setIsTransitioning] = useState(false);
  const [transitionMessage, setTransitionMessage] = useState<string | null>(null);
  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // We use a ref to track transition state without triggering the route change effect when it turns true
+  const isTransitioningRef = React.useRef(isTransitioning);
+  useEffect(() => {
+    isTransitioningRef.current = isTransitioning;
+  }, [isTransitioning]);
+
+  // Watch for route changes to complete the transition
+  useEffect(() => {
+    if (isTransitioningRef.current) {
+      // The route has actually changed in the browser, or at least the RSC payload arrived
+      const timer = setTimeout(() => {
+        setIsTransitioning(false);
+        setTimeout(() => setTransitionMessage(null), 300);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [pathname, searchParams]); // Run when pathname or search parameters change

  const startTransition = useCallback((href: string, message: string | null = null) => {
    // Wenn wir bereits navigieren, nichts tun
    if (isTransitioning) return;
    
+    // Normalize paths to avoid false mismatches (e.g. /de vs /de/)
+    const currentPath = typeof window !== 'undefined' ? window.location.pathname.replace(/\/$/, '') || '/' : '';
+    const targetPath = href.split('?')[0].replace(/\/$/, '') || '/';
+    const currentSearch = typeof window !== 'undefined' ? window.location.search : '';
+    const targetSearch = href.includes('?') ? '?' + href.split('?')[1] : '';
+
    // Aktuelle URL prüfen, falls es dieselbe ist, nicht navigieren
-    if (typeof window !== 'undefined' && window.location.pathname === href) {
+    if (currentPath === targetPath && currentSearch === targetSearch) {
       // Optional: Wir könnten weich nach oben scrollen
       window.scrollTo({ top: 0, behavior: 'smooth' });
       return;
@@ -34,13 +60,16 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
    setTimeout(() => {
      router.push(href);
      
-      // Den Shutter wieder einfahren lassen, nachdem die Seite gewechselt hat
-      // Next.js Route-Changes sind fast sofort da, aber wir geben dem Cache kurz Zeit
+      // Fallback: If for some reason the route doesn't change after 5 seconds, open the shutter anyway
      setTimeout(() => {
-        setIsTransitioning(false);
-        // Message etwas verzögert zurücksetzen, damit es während dem Ausblenden nicht verschwindet
-        setTimeout(() => setTransitionMessage(null), 300);
-      }, 300);
+        setIsTransitioning((current) => {
+          if (current) {
+            setTimeout(() => setTransitionMessage(null), 300);
+            return false;
+          }
+          return current;
+        });
+      }, 5000);
    }, 700);
  }, [isTransitioning, router]);

--- a/components/ui/AnimatedGlossyBorder.tsx
+++ b/components/ui/AnimatedGlossyBorder.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { cn } from './utils';
+
+interface AnimatedGlossyBorderProps {
+  className?: string;
+  borderWidth?: 1 | 2;
+  opacity?: number;
+  color?: 'white' | 'primary';
+}
+
+export function AnimatedGlossyBorder({ 
+  className, 
+  borderWidth = 1,
+  color = 'white'
+}: AnimatedGlossyBorderProps) {
+  const isWhite = color === 'white';
+  const glowColor = isWhite ? 'rgba(255,255,255,0.6)' : 'rgba(17,124,97,0.6)';
+  
+  const gradientColors = isWhite 
+    ? 'transparent 0%, rgba(255,255,255,0.1) 15%, rgba(255,255,255,0.85) 25%, rgba(255,255,255,0.1) 35%, transparent 50%, transparent 50%, rgba(255,255,255,0.1) 65%, rgba(255,255,255,0.85) 75%, rgba(255,255,255,0.1) 85%, transparent 100%'
+    : 'transparent 0%, rgba(17,124,97,0.1) 15%, rgba(17,124,97,0.85) 25%, rgba(17,124,97,0.1) 35%, transparent 50%, transparent 50%, rgba(17,124,97,0.1) 65%, rgba(17,124,97,0.85) 75%, rgba(17,124,97,0.1) 85%, transparent 100%';
+
+  return (
+    <div 
+      className={cn('absolute inset-0 pointer-events-none rounded-[inherit] z-20 mix-blend-overlay', className)}
+      style={{ filter: `drop-shadow(0 0 6px ${glowColor}) drop-shadow(0 0 2px ${glowColor})` }}
+    >
+      <div 
+        className="absolute inset-0 rounded-[inherit]"
+        style={{
+          border: `${borderWidth}px solid transparent`,
+          WebkitMask: 'linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)',
+          WebkitMaskComposite: 'xor',
+          maskComposite: 'exclude'
+        }}
+      >
+        <div 
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[250%] aspect-square animate-[spin_8s_linear_infinite]"
+          style={{
+            background: `conic-gradient(from 0deg, ${gradientColors})`
+          }}
+        />
+      </div>
+    </div>
+  );
+}
--- a/components/ui/Badge.tsx
+++ b/components/ui/Badge.tsx
@@ -10,7 +10,7 @@ export function Badge({ children, className, variant = 'primary' }: { children:
  };
  
  return (
-    <span className={cn('inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider', variants[variant], className)}>
+    <span className={cn('inline-flex items-center px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider select-none', variants[variant], className)}>
      {children}
    </span>
  );
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { TransitionLink } from '@/components/ui/TransitionLink';
+import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';
 import { cn } from './utils';

 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -19,7 +20,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 }

 export const buttonBaseStyles =
-  'inline-flex items-center justify-center whitespace-nowrap rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate';
+  'inline-flex items-center justify-center whitespace-nowrap rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate select-none';

 export const buttonVariantsMap = {
  primary: 'bg-primary text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
@@ -58,13 +59,23 @@ export function getButtonClasses(variant: keyof typeof buttonVariantsMap = 'prim
 }

 export function ButtonOverlay({ variant = 'primary' }: { variant?: keyof typeof buttonVariantsMap }) {
+  const isWhiteBg = variant === 'white' || variant === 'outline' || variant === 'ghost';
+
  return (
-    <span
-      className={cn(
-        'absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent to-transparent skew-x-[-20deg] group-hover/btn:left-[100%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none',
-        buttonShineColorsMap[variant]
+    <>
+      <span
+        className={cn(
+          'absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent to-transparent skew-x-[-20deg] group-hover/btn:left-[100%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none',
+          buttonShineColorsMap[variant]
+        )}
+      />
+      {!isWhiteBg && (
+        <AnimatedGlossyBorder 
+          color="white" 
+          className="opacity-40 group-hover/btn:opacity-100 transition-opacity duration-700" 
+        />
      )}
-    />
+    </>
  );
 }

--- a/components/ui/Label.tsx
+++ b/components/ui/Label.tsx
@@ -9,7 +9,7 @@ export function Label({ className, ...props }: LabelProps) {
  return (
    <label
      className={cn(
-        'text-[10px] md:text-xs font-extrabold text-primary uppercase tracking-widest',
+        'text-[10px] md:text-xs font-extrabold text-primary uppercase tracking-widest select-none',
        className
      )}
      {...props}
--- a/components/ui/LogoArcs.tsx
+++ b/components/ui/LogoArcs.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+// Reusable SVG component that precisely mimics the overlapping, sweeping arcs of the E-TIB logo.
+// The circles are offset along a diagonal to bunch together at the bottom-left and spread apart at the top-right.
+export const LogoArcs = ({ className }: { className?: string }) => (
+  <svg 
+    className={className} 
+    viewBox="0 0 200 200" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+  >
+    {/* Outer ring */}
+    <circle cx="100" cy="100" r="90" strokeWidth="1.5" />
+    {/* Middle thicker ring */}
+    <circle cx="92" cy="108" r="78" strokeWidth="3.5" />
+    {/* Inner ring */}
+    <circle cx="84" cy="116" r="66" strokeWidth="1.5" />
+  </svg>
+);