gitadmin/moviebox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove blur effects from AuroraBackground and various components for improved performance and visual clarity

Browse Source
This commit is contained in:
Norbert Maciaszek
2025-08-21 18:23:29 +02:00
parent 9051d4887c
commit a440debaff
8 changed files with 102 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/atoms/MovieCard/layouts/AuroraLayout.tsx
View File

@@ -49,23 +49,13 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
return (
<article className="group relative w-full overflow-hidden rounded-2xl max-w-[300px] mx-auto">
{/* Aurora background effect */}
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-teal-900/20 opacity-60"></div>
<div className="absolute inset-0 bg-gradient-to-tr from-pink-500/10 via-transparent to-cyan-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-1000"></div>
{/* Main card container */}
<div className="grid relative h-full bg-gradient-to-br from-slate-800/95 via-slate-850/97 to-slate-900/95 border border-slate-700/50 shadow-2xl shadow-purple-500/10 group-hover:shadow-purple-500/20 transition-all duration-500">
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-cyan-500/5 opacity-80"></div>
{/* Image section with sophisticated overlay */}
<figure
className="relative overflow-hidden"
style={{
aspectRatio: "342/513",
}}
>
<figure className="relative overflow-hidden aspect-[4/3] lg:aspect-[342/513]">
<Link href={`/film/${id}`}>
<img
className="w-full h-full object-cover transition-all duration-700 group-hover:scale-110 group-hover:brightness-110 bg-gradient-to-b from-purple-600/50 to-emerald-600"
className="w-full h-full object-cover transition-all duration-700 hover:scale-110 hover:brightness-110 bg-gradient-to-b from-purple-600/50 to-emerald-600"
src={`http://image.tmdb.org/t/p/w342${poster_path}`}
alt={title}
/>
@@ -73,7 +63,6 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
{/* Gradient overlays for depth */}
<div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/20 to-transparent pointer-events-none" />
<div className="absolute inset-0 bg-gradient-to-r from-purple-600/20 via-transparent to-cyan-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
{/* Floating rating badge */}
{!!vote_average && (
@@ -158,15 +147,12 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
{/* Content section with glowing effects */}
<div className="relative p-6 flex flex-col justify-between">
{/* Subtle glow effect */}
<div className="absolute inset-0 bg-gradient-to-t from-purple-500/5 to-transparent pointer-events-none"></div>
<div className="relative z-10">
<Link href={`/film/${id}`}>
<h3 className="font-bold text-xl leading-tight mb-3 transition-colors duration-500 hover:text-secondary flex items-center gap-2">
{title}
</h3>
<p className="text-sm text-gray-400 line-clamp-2 leading-relaxed opacity-80 group-hover:opacity-100 transition-colors duration-300 hover:text-secondary">
<p className="text-sm text-gray-400 line-clamp-2 leading-relaxed opacity-80 transition-colors duration-300 hover:text-secondary">
{overview}
</p>
</Link>