refactor: remove blur effects from AuroraBackground and various components for improved performance and visual clarity
This commit is contained in:
Norbert Maciaszek
parent
9051d4887c
commit
a440debaff
|
|
@ -5,15 +5,8 @@ import {
|
|||
getUpcomingMovies,
|
||||
} from "@/lib/tmdb/server";
|
||||
import { Hero } from "@/components/organisms/Hero";
|
||||
import { Carousel } from "@/components/molecules/Carousel";
|
||||
import { MovieCard } from "@/components/atoms/MovieCard";
|
||||
import {
|
||||
FaCalendar,
|
||||
FaChartLine,
|
||||
FaFire,
|
||||
FaPlay,
|
||||
FaStar,
|
||||
} from "react-icons/fa";
|
||||
import { FaCalendar, FaChartLine, FaFire, FaPlay } from "react-icons/fa";
|
||||
import { MovieList } from "@/components/molecules/MovieList";
|
||||
|
||||
// 12 hours
|
||||
export const revalidate = 43200;
|
||||
|
|
@ -48,39 +41,43 @@ export default async function Home() {
|
|||
<Hero movies={heroMovies} autoRotate />
|
||||
|
||||
<section className="blocks">
|
||||
<Carousel heading="Teraz w kinach" icon={<FaPlay />}>
|
||||
{nowPlayingMovies.map((movie) => (
|
||||
<MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
|
||||
))}
|
||||
</Carousel>
|
||||
<MovieList
|
||||
overrideMovies={nowPlayingMovies}
|
||||
heading="Teraz w kinach"
|
||||
loadMore
|
||||
icon={<FaPlay />}
|
||||
colors="blue"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="blocks">
|
||||
<Carousel
|
||||
<MovieList
|
||||
overrideMovies={upcomingMovies}
|
||||
heading="Nadchodzące filmy"
|
||||
loadMore
|
||||
icon={<FaCalendar />}
|
||||
colors="blue"
|
||||
>
|
||||
{upcomingMovies.map((movie) => (
|
||||
<MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
|
||||
))}
|
||||
</Carousel>
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="blocks">
|
||||
<Carousel heading="Popularne filmy" icon={<FaFire />} colors="red">
|
||||
{popularMovies.map((movie) => (
|
||||
<MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
|
||||
))}
|
||||
</Carousel>
|
||||
<MovieList
|
||||
overrideMovies={popularMovies}
|
||||
heading="Popularne filmy"
|
||||
loadMore
|
||||
icon={<FaFire />}
|
||||
colors="red"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="blocks">
|
||||
<Carousel heading="Trendy dnia" icon={<FaChartLine />} colors="green">
|
||||
{trendingMovies.map((movie) => (
|
||||
<MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
|
||||
))}
|
||||
</Carousel>
|
||||
<MovieList
|
||||
overrideMovies={trendingMovies}
|
||||
heading="Trendy dnia"
|
||||
loadMore
|
||||
icon={<FaChartLine />}
|
||||
colors="green"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<div className="p-2 text-center text-xs text-gray-500">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -7,19 +7,19 @@ export const AuroraBackground = () => {
|
|||
{/* Static aurora effects */}
|
||||
<div className="absolute inset-0 opacity-40">
|
||||
{/* Top-left aurora glow */}
|
||||
<div className="absolute top-0 left-0 w-96 h-96 bg-gradient-radial from-purple-500/20 via-purple-500/5 to-transparent blur-3xl"></div>
|
||||
<div className="absolute top-0 left-0 w-96 h-96 bg-gradient-radial from-purple-500/20 via-purple-500/5 to-transparent"></div>
|
||||
|
||||
{/* Top-right aurora glow */}
|
||||
<div className="absolute top-20 right-0 w-80 h-80 bg-gradient-radial from-cyan-500/15 via-cyan-500/3 to-transparent blur-3xl"></div>
|
||||
<div className="absolute top-20 right-0 w-80 h-80 bg-gradient-radial from-cyan-500/15 via-cyan-500/3 to-transparent"></div>
|
||||
|
||||
{/* Center aurora wave */}
|
||||
<div className="absolute top-1/3 left-1/3 w-[600px] h-40 bg-gradient-to-r from-transparent via-pink-500/10 to-transparent blur-2xl transform rotate-12"></div>
|
||||
<div className="absolute top-1/3 left-1/3 w-[600px] h-40 bg-gradient-to-r from-transparent via-pink-500/10 to-transparent transform rotate-12"></div>
|
||||
|
||||
{/* Bottom aurora glow */}
|
||||
<div className="absolute bottom-0 left-1/4 w-96 h-64 bg-gradient-radial from-teal-500/15 via-teal-500/3 to-transparent blur-3xl"></div>
|
||||
<div className="absolute bottom-0 left-1/4 w-96 h-64 bg-gradient-radial from-teal-500/15 via-teal-500/3 to-transparent"></div>
|
||||
|
||||
{/* Right side accent */}
|
||||
<div className="absolute top-1/2 right-20 w-32 h-96 bg-gradient-to-b from-transparent via-purple-400/8 to-transparent blur-2xl transform -rotate-12"></div>
|
||||
<div className="absolute top-1/2 right-20 w-32 h-96 bg-gradient-to-b from-transparent via-purple-400/8 to-transparent transform -rotate-12"></div>
|
||||
</div>
|
||||
|
||||
{/* Gradient mesh overlay for content readability */}
|
||||
|
|
|
|||
|
|
@ -87,12 +87,12 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
|
|||
<div className="container">
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
{/* Movie poster */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="relative group">
|
||||
<div className="flex-shrink-0 text-center">
|
||||
<div className="relative group inline-block">
|
||||
<img
|
||||
src={`https://image.tmdb.org/t/p/w500${movieDetails.poster_path}`}
|
||||
alt={movieDetails.title}
|
||||
className="w-80 h-auto rounded-2xl shadow-2xl shadow-purple-500/20 group-hover:shadow-purple-500/40 transition-all duration-500"
|
||||
className="w-80 h-auto rounded-2xl shadow-2xl shadow-purple-500/20"
|
||||
/>
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-purple-600/20 to-transparent opacity-100" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
|
|||
|
||||
{/* Hover overlay with link indication */}
|
||||
<div className="absolute inset-0 bg-purple-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
||||
<div className="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-white text-sm font-medium">
|
||||
<div className="bg-white/20 px-3 py-1 rounded-full text-white text-sm font-medium">
|
||||
Zobacz profil
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
"use client";
|
||||
import { FC, useState } from "react";
|
||||
import { FC, ReactNode, useState } from "react";
|
||||
import { MovieCard } from "@/components/atoms/MovieCard";
|
||||
import { Movie } from "@/types/global";
|
||||
import { useGlobalStore } from "@/app/store/globalStore";
|
||||
import { Dropdown } from "@/components/atoms/Dropdown";
|
||||
import { useAutoAnimate } from "@formkit/auto-animate/react";
|
||||
import { Button } from "@/components/atoms/Button";
|
||||
|
||||
type Props = {
|
||||
heading?: string;
|
||||
icon?: ReactNode;
|
||||
colors?: keyof typeof colorsMap;
|
||||
|
||||
overrideMovies?: Movie[];
|
||||
|
||||
filterSeen?: 0 | 1;
|
||||
|
|
@ -19,10 +23,14 @@ type Props = {
|
|||
showFilters?: boolean;
|
||||
sort?: "title" | "releaseDate" | "popularity";
|
||||
sortDirection?: "asc" | "desc";
|
||||
|
||||
loadMore?: boolean;
|
||||
};
|
||||
|
||||
export const MovieList: FC<Props> = ({
|
||||
heading,
|
||||
icon,
|
||||
colors = "white",
|
||||
overrideMovies,
|
||||
filterSeen,
|
||||
filterFavorites,
|
||||
|
|
@ -32,15 +40,17 @@ export const MovieList: FC<Props> = ({
|
|||
showFilters = true,
|
||||
sort = "releaseDate",
|
||||
sortDirection = "asc",
|
||||
loadMore = false,
|
||||
}) => {
|
||||
const { movies: storeMovies } = useGlobalStore();
|
||||
const movies = overrideMovies || storeMovies;
|
||||
|
||||
const [filter, setFilter] = useState<"title" | "releaseDate" | "popularity">(
|
||||
sort
|
||||
);
|
||||
const [loaded, setLoaded] = useState(loadMore ? 4 : movies.length);
|
||||
const [parent] = useAutoAnimate();
|
||||
|
||||
const movies = overrideMovies || storeMovies;
|
||||
|
||||
const filteredMovies = movies.filter((movie) => {
|
||||
let result = true;
|
||||
const today = new Date();
|
||||
|
|
@ -73,6 +83,8 @@ export const MovieList: FC<Props> = ({
|
|||
return 0;
|
||||
});
|
||||
|
||||
sortedMovies = sortedMovies.slice(0, loaded);
|
||||
|
||||
if (sortDirection === "desc") {
|
||||
sortedMovies = sortedMovies.reverse();
|
||||
}
|
||||
|
|
@ -81,21 +93,30 @@ export const MovieList: FC<Props> = ({
|
|||
<section className="blocks">
|
||||
<div className={`${fluid ? "max-w-full px-4" : "container"}`}>
|
||||
{heading && (
|
||||
<div className="row">
|
||||
<div className="col-12 md:col-10 flex gap-2 items-center">
|
||||
{showFilters && (
|
||||
<Dropdown
|
||||
items={[
|
||||
{ label: "Tytuł", value: "title" },
|
||||
{ label: "Data premiery", value: "releaseDate" },
|
||||
{ label: "Popularność", value: "popularity" },
|
||||
]}
|
||||
defaultValue={filter}
|
||||
callback={(value) => setFilter(value as "title")}
|
||||
/>
|
||||
)}
|
||||
<h2 className="text-2xl font-bold">{heading}</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{icon && (
|
||||
<div
|
||||
className={`hidden sm:block p-2 rounded-lg ${colorsMap[colors]}`}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
)}
|
||||
{showFilters && !icon && (
|
||||
<Dropdown
|
||||
items={[
|
||||
{ label: "Tytuł", value: "title" },
|
||||
{ label: "Data premiery", value: "releaseDate" },
|
||||
{ label: "Popularność", value: "popularity" },
|
||||
]}
|
||||
defaultValue={filter}
|
||||
callback={(value) => setFilter(value as "title")}
|
||||
/>
|
||||
)}
|
||||
<h2
|
||||
className={`text-3xl font-bold ${colorsMap[colors]} bg-clip-text text-transparent text-center sm:text-left`}
|
||||
>
|
||||
{heading}
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
{filteredMovies.length === 0 && (
|
||||
|
|
@ -111,7 +132,27 @@ export const MovieList: FC<Props> = ({
|
|||
))}
|
||||
</div>
|
||||
)}
|
||||
{loadMore && filteredMovies.length > loaded && (
|
||||
<div className="flex justify-center mt-10">
|
||||
<Button theme="teal" onClick={() => setLoaded(movies.length)}>
|
||||
Pokaż więcej
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
const colorsMap = {
|
||||
white: "bg-gradient-to-r from-white to-gray-300",
|
||||
yellow: "bg-gradient-to-r from-yellow-400 to-orange-400",
|
||||
blue: "bg-gradient-to-r from-blue-400 to-purple-400",
|
||||
green: "bg-gradient-to-r from-green-400 to-teal-400",
|
||||
red: "bg-gradient-to-r from-red-400 to-pink-400",
|
||||
purple: "bg-gradient-to-r from-purple-400 to-pink-400",
|
||||
orange: "bg-gradient-to-r from-orange-400 to-yellow-400",
|
||||
pink: "bg-gradient-to-r from-pink-400 to-purple-400",
|
||||
teal: "bg-gradient-to-r from-teal-400 to-green-400",
|
||||
gray: "bg-gradient-to-r from-gray-400 to-gray-400",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -60,9 +60,7 @@ export const Search = () => {
|
|||
{isSearchOpen && (
|
||||
<div className="fixed inset-0 z-[60] overflow-y-auto">
|
||||
{/* Aurora Background */}
|
||||
<div className="fixed inset-0 bg-gradient-to-br from-purple-900/98 via-blue-900/98 to-teal-900/98"></div>
|
||||
<div className="fixed inset-0 bg-gradient-to-tr from-slate-900/95 via-slate-800/90 to-slate-900/95"></div>
|
||||
<div className="fixed inset-0 bg-gradient-to-tr from-pink-500/20 via-transparent to-cyan-500/20 animate-pulse"></div>
|
||||
<div className="fixed inset-0 bg-gradient-to-tr from-purple-900/98 via-blue-900/98 to-teal-900/98 brightness-75"></div>
|
||||
|
||||
{/* Close button */}
|
||||
<Button
|
||||
|
|
@ -87,7 +85,7 @@ export const Search = () => {
|
|||
|
||||
{/* Enhanced Search Input */}
|
||||
<div className="relative max-w-2xl mx-auto">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-2xl blur-xl"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-2xl"></div>
|
||||
<div className="relative bg-gradient-to-br from-white/15 via-white/8 to-white/12 border border-white/20 rounded-2xl p-2 shadow-2xl shadow-purple-500/10">
|
||||
<SearchInput
|
||||
className="w-full px-3 bg-transparent border-none text-lg lg:text-xl placeholder-gray-400 text-white focus:outline-none"
|
||||
|
|
@ -104,7 +102,7 @@ export const Search = () => {
|
|||
<div className="text-center py-20">
|
||||
<div className="relative inline-block">
|
||||
<Spinner />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-30 blur-lg animate-pulse"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-30 animate-pulse"></div>
|
||||
</div>
|
||||
<p className="text-gray-300 mt-4 text-lg">Szukam filmów...</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,8 +37,6 @@ export const Navbar = () => {
|
|||
<header className="sticky top-0 w-full z-50 transition-all duration-300">
|
||||
{/* Aurora background effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-slate-900/95 via-slate-800/98 to-slate-900/95"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-600/15 via-blue-600/10 to-teal-600/15"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-transparent to-cyan-500/10"></div>
|
||||
|
||||
{/* Border glow */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-400/50 to-transparent"></div>
|
||||
|
|
@ -57,7 +55,7 @@ export const Navbar = () => {
|
|||
alt="MovieBox"
|
||||
className="w-10 h-10 lg:w-12 lg:h-12 transition-all duration-300 group-hover:brightness-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-md"></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<h1 className="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300 group-hover:from-purple-200 group-hover:to-cyan-200 transition-all duration-300">
|
||||
|
|
|
|||
Loading…
Reference in New Issue