feat(ui): abstract HoverShineOverlay and apply globally

Former-commit-id: 302718a9d517720d6fd5eb66a7728eff8f3ffe95
This commit is contained in:
2026-05-07 14:38:27 +02:00
parent 876171e8ac
commit 484343b29e
137 changed files with 255 additions and 221 deletions

View File

@@ -5,6 +5,7 @@ import Image from 'next/image';
import { motion } from 'framer-motion';
import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/Button';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
interface CompetenceBentoGridProps {
badge?: string;
@@ -110,6 +111,7 @@ 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" />
<HoverShineOverlay shineColor="via-white/30" />
<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>
@@ -143,6 +145,8 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
</>
)}
<HoverShineOverlay />
<div className="relative z-10 p-8 flex flex-col justify-end h-full text-white">
{item.tag && (
<span className="inline-block px-3 py-1 bg-primary/20 backdrop-blur-md rounded-full text-xs font-bold uppercase tracking-wider text-primary-light mb-3 w-fit border border-primary/30">

View File

@@ -4,6 +4,7 @@ import * as React from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import Image from 'next/image';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
export interface Reference {
id: string;
@@ -126,6 +127,8 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300 pointer-events-none" />
<HoverShineOverlay />
<div className="absolute bottom-6 left-8 right-8 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500 pointer-events-none">
<span className="inline-block py-1.5 px-4 rounded-full bg-primary/30 backdrop-blur-md text-white text-xs font-bold uppercase tracking-widest mb-3 border border-primary/50">
{ref.category}

View File

@@ -3,6 +3,7 @@
import * as React from 'react';
import { motion, Variants } from 'framer-motion';
import Image from 'next/image';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
interface SubCompanyTilesProps {
badge?: string;
@@ -127,9 +128,7 @@ export function SubCompanyTiles(props: SubCompanyTilesProps) {
}`} />
{/* Premium Shine Sweep Effect (Industrial Reflection) */}
{!isCurrent && (
<div className="absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-[-20deg] group-hover:left-[100%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none" />
)}
{!isCurrent && <HoverShineOverlay />}
{/* Current Site Indicator Badge */}
{isCurrent && (