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

feat: implement responsive container utility and enhance layout styles across components; update Carousel and Gallery for improved structure and consistency

This commit is contained in:
Norbert Maciaszek 2025-08-18 15:27:28 +02:00
parent e891b37384
commit fd1240252d
17 changed files with 353 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/aktor/[id]/page.tsx
View File

@ -16,22 +16,30 @@ export default async function Page({
const personDetails = await TMDB.getPersonDetails(actorId); const personDetails = await TMDB.getPersonDetails(actorId);
return ( return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 pb-16"> <div className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 py-0.5">
<ActorHero personDetails={personDetails} /> <ActorHero personDetails={personDetails} />
<Gallery images={personDetails.images.profiles} heading="Galeria" /> <Gallery images={personDetails.images.profiles} heading="Galeria" />
<section className="blocks">
<div className="container"> <div className="container">
<Carousel <Carousel
heading={`Filmy z udziałem ${personDetails.name}`} heading={`Filmy z udziałem ${personDetails.name}`}
icon={<FaStar />} icon={<FaStar />}
colors="purple" colors="purple"
> >
{personDetails.movie_credits.cast.map((movie) => { {personDetails.movie_credits.cast
.sort(
(a, b) =>
new Date(b.release_date).getTime() -
new Date(a.release_date).getTime()
)
.map((movie) => {
const convertedMovie = convertToMovie(movie); const convertedMovie = convertToMovie(movie);
if (!convertedMovie) return null; if (!convertedMovie) return null;
return <MovieCard key={movie.id} {...convertedMovie} />; return <MovieCard key={movie.id} {...convertedMovie} />;
})} })}
</Carousel> </Carousel>
</div> </div>
</section>
</div> </div>
); );
} }

4
src/app/film/[id]/page.tsx
View File

@ -12,10 +12,10 @@ export default async function Page({
const movieDetails = await TMDB.getMovieDetails(movieId); const movieDetails = await TMDB.getMovieDetails(movieId);
return ( return (
<div className="min-h-screen mt-16"> <>
<HeroMovie movieDetails={movieDetails} /> <HeroMovie movieDetails={movieDetails} />
<MovieCast movieDetails={movieDetails} /> <MovieCast movieDetails={movieDetails} />
<RecommendedMovies movies={movieDetails.recommendations} /> <RecommendedMovies movies={movieDetails.recommendations} />
</div> </>
); );
} }

42
src/app/globals.css
View File

@ -46,18 +46,30 @@
@custom-variant hover-any (&:hover); @custom-variant hover-any (&:hover);
@utility container {
margin: 0 auto;
padding: 0 15px;
width: 100%;
max-width: 100%;
@variant sm {
max-width: 640px;
}
@variant lg {
max-width: 860px;
}
@variant xl {
max-width: 1280px;
}
}
@layer base { @layer base {
body { body {
@apply bg-hippie-blue-950 text-text; @apply bg-hippie-blue-950 text-text;
} }
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.container-fluid { .container-fluid {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -71,6 +83,22 @@
margin: 0 -15px; margin: 0 -15px;
} }
.blocks {
margin: 32px 0;
@variant lg {
margin: 64px 0;
}
}
.blockp {
padding: 32px 0;
@variant lg {
padding: 64px 0;
}
}
a { a {
@apply transition-colors; @apply transition-colors;
} }

4
src/app/layout.tsx
View File

@ -34,9 +34,7 @@ export default async function RootLayout({
<GlobalStoreProvider> <GlobalStoreProvider>
<AuroraBackground /> <AuroraBackground />
<Navbar /> <Navbar />
<main className="relative pt-16 lg:pt-20 [&>:last-child]:mb-0"> <main className="relative">{children}</main>
{children}
</main>
</GlobalStoreProvider> </GlobalStoreProvider>
</body> </body>
</html> </html>

38
src/app/odkrywaj/page.tsx
View File

@ -47,63 +47,41 @@ export default async function Home() {
<> <>
<Hero movies={heroMovies} autoRotate /> <Hero movies={heroMovies} autoRotate />
<div className="container py-16 space-y-16"> <section className="blocks">
<section>
<Carousel heading="Teraz w kinach" icon={<FaPlay />}> <Carousel heading="Teraz w kinach" icon={<FaPlay />}>
{nowPlayingMovies.map((movie) => ( {nowPlayingMovies.map((movie) => (
<MovieCard <MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
key={movie.id}
{...movie}
simpleToggle
layout="aurora"
/>
))} ))}
</Carousel> </Carousel>
</section> </section>
<section> <section className="blocks">
<Carousel <Carousel
heading="Nadchodzące filmy" heading="Nadchodzące filmy"
icon={<FaCalendar />} icon={<FaCalendar />}
colors="blue" colors="blue"
> >
{upcomingMovies.map((movie) => ( {upcomingMovies.map((movie) => (
<MovieCard <MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
key={movie.id}
{...movie}
simpleToggle
layout="aurora"
/>
))} ))}
</Carousel> </Carousel>
</section> </section>
<section> <section className="blocks">
<Carousel heading="Popularne filmy" icon={<FaFire />} colors="red"> <Carousel heading="Popularne filmy" icon={<FaFire />} colors="red">
{popularMovies.map((movie) => ( {popularMovies.map((movie) => (
<MovieCard <MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
key={movie.id}
{...movie}
simpleToggle
layout="aurora"
/>
))} ))}
</Carousel> </Carousel>
</section> </section>
<section> <section className="blocks">
<Carousel heading="Trendy dnia" icon={<FaChartLine />} colors="green"> <Carousel heading="Trendy dnia" icon={<FaChartLine />} colors="green">
{trendingMovies.map((movie) => ( {trendingMovies.map((movie) => (
<MovieCard <MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
key={movie.id}
{...movie}
simpleToggle
layout="aurora"
/>
))} ))}
</Carousel> </Carousel>
</section> </section>
</div>
<div className="p-2 text-center text-xs text-gray-500"> <div className="p-2 text-center text-xs text-gray-500">
<p>Ostatnia aktualizacja: {lastModified}</p> <p>Ostatnia aktualizacja: {lastModified}</p>

7
src/components/atoms/Button/index.tsx
View File

@ -7,7 +7,7 @@ type Props = {
children: React.ReactNode; children: React.ReactNode;
className?: string; className?: string;
theme?: Theme; theme?: Theme;
size?: "small" | "medium" | "large"; size?: "small" | "medium" | "large" | "icon";
onClick?: () => void; onClick?: () => void;
href?: string; href?: string;
gradient?: { gradient?: {
@ -31,7 +31,7 @@ export const Button: FC<Props> = ({
return ( return (
<Component <Component
className={`flex items-center justify-center gap-2 cursor-pointer text-white rounded-xl font-semibold shadow-2xl transition-all duration-300 hover:scale-105 className={`flex items-center justify-center gap-2 cursor-pointer text-white rounded-xl font-semibold shadow-2xl transition-colors duration-300
bg-gradient-to-r ${buttonColor?.from} ${buttonColor?.to} cursor-pointer ${sizes[size]} ${className}`} bg-gradient-to-r ${buttonColor?.from} ${buttonColor?.to} cursor-pointer ${sizes[size]} ${className}`}
onClick={onClick} onClick={onClick}
{...(href && { href })} {...(href && { href })}
@ -45,6 +45,7 @@ const sizes = {
small: "px-4 py-2 text-sm", small: "px-4 py-2 text-sm",
medium: "px-8 py-4 text-lg", medium: "px-8 py-4 text-lg",
large: "px-12 py-6 text-xl", large: "px-12 py-6 text-xl",
icon: "p-3 [&>*]:w-5 [&>*]:h-5",
}; };
const colors = { const colors = {
@ -57,7 +58,7 @@ const colors = {
to: "to-pink-600 hover:to-pink-500", to: "to-pink-600 hover:to-pink-500",
}, },
glass: { glass: {
from: "from-white/15 via-white/8 to-white/12", from: "from-white/15 via-white/8 to-white/12 border border-white/20",
to: "to-white/15 hover:to-white/10", to: "to-white/15 hover:to-white/10",
}, },
rose: { rose: {

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

@ -48,7 +48,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
: "from-red-400 to-pink-400"; : "from-red-400 to-pink-400";
return ( return (
<article className="group relative w-full overflow-hidden rounded-2xl"> <article className="group relative w-full overflow-hidden rounded-2xl max-w-[300px] mx-auto">
{/* Aurora background effect */} {/* 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-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> <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>

14
src/components/molecules/ActorHero/index.tsx
View File

@ -55,7 +55,7 @@ export const ActorHero: FC<Props> = ({ personDetails }) => {
}; };
return ( return (
<section className="pt-16 pb-8"> <section className="blocks">
<div className="relative"> <div className="relative">
{/* Navigation */} {/* Navigation */}
<div className="absolute top-0 left-0 right-0 z-20 px-6"> <div className="absolute top-0 left-0 right-0 z-20 px-6">
@ -63,12 +63,11 @@ export const ActorHero: FC<Props> = ({ personDetails }) => {
</div> </div>
{/* Main content */} {/* Main content */}
<div className="relative z-10 px-6 lg:px-8 mt-16"> <div className="container">
<div className="max-w-7xl mx-auto">
<div className="flex flex-col lg:flex-row gap-8"> <div className="flex flex-col lg:flex-row gap-8">
{/* Profile photo */} {/* Profile photo */}
<div className="flex-shrink-0"> <div className="flex-shrink-0 text-center">
<div className="relative group"> <div className="relative group inline-block">
<img <img
src={ src={
personDetails.profile_path personDetails.profile_path
@ -197,9 +196,7 @@ export const ActorHero: FC<Props> = ({ personDetails }) => {
} }
const { label, icon, url } = const { label, icon, url } =
externalIdsMap[ externalIdsMap[key as keyof typeof externalIdsMap];
key as keyof typeof externalIdsMap
];
return ( return (
<a <a
key={key} key={key}
@ -222,7 +219,6 @@ export const ActorHero: FC<Props> = ({ personDetails }) => {
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
); );
}; };

16
src/components/molecules/Carousel/index.tsx
View File

@ -15,6 +15,7 @@ type Props = {
heading?: string; heading?: string;
icon?: ReactNode; icon?: ReactNode;
colors?: keyof typeof colorsMap; colors?: keyof typeof colorsMap;
fluid?: boolean;
}; };
export const Carousel: FC<Props> = ({ export const Carousel: FC<Props> = ({
@ -24,6 +25,7 @@ export const Carousel: FC<Props> = ({
heading, heading,
icon, icon,
colors = "yellow", colors = "yellow",
fluid = false,
}) => { }) => {
const { const {
itemsPerView = 4, itemsPerView = 4,
@ -66,17 +68,19 @@ export const Carousel: FC<Props> = ({
); );
return ( return (
<div> <div className={`${fluid ? "max-w-full px-4" : "container"}`}>
<div className="flex items-center justify-between mb-8"> <div className="flex items-center justify-between mb-8 flex-wrap">
{heading && ( {heading && (
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{icon && ( {icon && (
<div className={`p-2 rounded-lg ${colorsMap[colors]}`}> <div
className={`hidden sm:block p-2 rounded-lg ${colorsMap[colors]}`}
>
{icon} {icon}
</div> </div>
)} )}
<h2 <h2
className={`text-3xl font-bold ${colorsMap[colors]} bg-clip-text text-transparent`} className={`text-3xl font-bold ${colorsMap[colors]} bg-clip-text text-transparent text-center sm:text-left`}
> >
{heading} {heading}
</h2> </h2>
@ -84,7 +88,7 @@ export const Carousel: FC<Props> = ({
)} )}
{totalPages > 1 && ( {totalPages > 1 && (
<div className="flex gap-2"> <div className="flex gap-2 mx-auto mt-4 sm:mt-0 sm:mr-0 sm:ml-auto">
<button <button
onClick={prevPage} onClick={prevPage}
className={`cursor-pointer p-3 rounded-full ${colorsMap[colors]} text-white transition-all duration-300`} className={`cursor-pointer p-3 rounded-full ${colorsMap[colors]} text-white transition-all duration-300`}
@ -116,7 +120,7 @@ export const Carousel: FC<Props> = ({
{totalPages > 1 && ( {totalPages > 1 && (
<div className="flex justify-center mt-8"> <div className="flex justify-center mt-8">
<div className="flex gap-2"> <div className="flex gap-2 flex-wrap justify-center">
{Array.from({ length: totalPages }, (_, i) => ( {Array.from({ length: totalPages }, (_, i) => (
<button <button
key={i} key={i}

6
src/components/molecules/Gallery/index.tsx
View File

@ -43,9 +43,8 @@ export const Gallery: FC<Props> = ({
}; };
return ( return (
<section className="py-16"> <section className="blocks">
<div className="px-6 lg:px-8"> <div className="container">
<div className="max-w-7xl mx-auto">
{heading && ( {heading && (
<div className="flex items-center gap-3 mb-8"> <div className="flex items-center gap-3 mb-8">
<div className="p-2 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500"> <div className="p-2 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500">
@ -108,7 +107,6 @@ export const Gallery: FC<Props> = ({
</div> </div>
)} )}
</div> </div>
</div>
</section> </section>
); );
}; };

6
src/components/molecules/HeroMovie/index.tsx
View File

@ -75,7 +75,7 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
}; };
return ( return (
<section className="my-16"> <section className="blocks">
<div className="relative"> <div className="relative">
{/* Navigation */} {/* Navigation */}
<div className="absolute top-0 left-0 right-0 z-20 px-6"> <div className="absolute top-0 left-0 right-0 z-20 px-6">
@ -83,8 +83,8 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
</div> </div>
{/* Main content */} {/* Main content */}
<div className="relative z-10 px-6 lg:px-8"> <div className="relative z-10">
<div className="max-w-7xl mx-auto"> <div className="container">
<div className="flex flex-col lg:flex-row gap-8"> <div className="flex flex-col lg:flex-row gap-8">
{/* Movie poster */} {/* Movie poster */}
<div className="flex-shrink-0"> <div className="flex-shrink-0">

6
src/components/molecules/MovieCast/index.tsx
View File

@ -23,14 +23,14 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
}).format(amount); }).format(amount);
return ( return (
<section className="px-6 lg:px-8 py-16"> <section className="blocks">
<div className="max-w-7xl mx-auto"> <div className="container mx-auto">
<div className="grid lg:grid-cols-3 gap-12"> <div className="grid lg:grid-cols-3 gap-12">
{/* Cast */} {/* Cast */}
{mainCast.length > 0 && ( {mainCast.length > 0 && (
<div className="lg:col-span-2"> <div className="lg:col-span-2">
<h2 className="text-2xl font-bold text-white mb-6">Obsada</h2> <h2 className="text-2xl font-bold text-white mb-6">Obsada</h2>
<div className="grid grid-cols-2 md:grid-cols-4 gap-6"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
{mainCast.map((actor) => ( {mainCast.map((actor) => (
<Link <Link
key={actor.id} key={actor.id}

6
src/components/molecules/MovieList/index.tsx
View File

@ -78,8 +78,8 @@ export const MovieList: FC<Props> = ({
} }
return ( return (
<section className="my-4 md:my-10"> <section className="blocks">
<div className={`${fluid ? "max-w-full" : "container"}`}> <div className={`${fluid ? "max-w-full px-4" : "container"}`}>
{heading && ( {heading && (
<div className="row"> <div className="row">
<div className="col-12 md:col-10 flex gap-2 items-center"> <div className="col-12 md:col-10 flex gap-2 items-center">
@ -103,7 +103,7 @@ export const MovieList: FC<Props> = ({
)} )}
{filteredMovies.length > 0 && ( {filteredMovies.length > 0 && (
<div <div
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-6 gap-3 sm:gap-6 mt-8 justify-center" className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-6 gap-3 sm:gap-6 mt-8 justify-center"
ref={parent} ref={parent}
> >
{sortedMovies.map((movie) => ( {sortedMovies.map((movie) => (

14
src/components/molecules/RecommendedMovies/index.tsx
View File

@ -13,15 +13,20 @@ export const RecommendedMovies: FC<Props> = ({ movies }) => {
if (!movies.results.length) return null; if (!movies.results.length) return null;
return ( return (
<section className="py-16 bg-gradient-to-br from-slate-900/50 to-slate-800/50"> <section className="blockp bg-gradient-to-br from-slate-900/50 to-slate-800/50">
<div className="px-6 lg:px-8"> <div className="container">
<div className="max-w-7xl mx-auto">
<Carousel <Carousel
heading="Rekomendowane filmy" heading="Rekomendowane filmy"
icon={<FaStar />} icon={<FaStar />}
colors="yellow" colors="yellow"
> >
{movies.results.map((movie) => ( {movies.results
.sort(
(a, b) =>
new Date(b.release_date).getTime() -
new Date(a.release_date).getTime()
)
.map((movie) => (
<MovieCard <MovieCard
key={movie.id} key={movie.id}
layout="aurora" layout="aurora"
@ -45,7 +50,6 @@ export const RecommendedMovies: FC<Props> = ({ movies }) => {
))} ))}
</Carousel> </Carousel>
</div> </div>
</div>
</section> </section>
); );
}; };

2
src/components/molecules/SimilarMovies/index.tsx
View File

@ -32,7 +32,7 @@ export const SimilarMovies: FC<Props> = ({ movies }) => {
return ( return (
<section className="py-16"> <section className="py-16">
<div className="px-6 lg:px-8"> <div className="px-6 lg:px-8">
<div className="max-w-7xl mx-auto"> <div className="container mx-auto">
<div className="flex items-center justify-between mb-8"> <div className="flex items-center justify-between mb-8">
<h2 className="text-3xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent"> <h2 className="text-3xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
Podobne filmy Podobne filmy

17
src/components/organisms/Navbar/components/Search/index.tsx
View File

@ -49,16 +49,12 @@ export const Search = () => {
return ( return (
<> <>
<Button <Button
theme="glass" theme="secondary"
size="small" size="icon"
className="group relative" className="group relative"
onClick={() => setIsSearchOpen(!isSearchOpen)} onClick={() => setIsSearchOpen(!isSearchOpen)}
> >
<IoSearch <IoSearch className="text-white" />
size={20}
className="text-white transition-transform duration-300 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</Button> </Button>
{isSearchOpen && ( {isSearchOpen && (
@ -71,14 +67,11 @@ export const Search = () => {
{/* Close button */} {/* Close button */}
<Button <Button
theme="glass" theme="glass"
size="small" size="icon"
className="absolute top-6 right-6 z-10 group hover:!bg-red-500/50" className="absolute top-6 right-6 z-10 group hover:!bg-red-500/50"
onClick={handleClose} onClick={handleClose}
> >
<IoClose <IoClose className="text-white transition-transform duration-300 group-hover:rotate-90" />
size={24}
className="text-white transition-transform duration-300 group-hover:rotate-90"
/>
</Button> </Button>
<div className="relative min-h-full flex flex-col py-20" ref={ref}> <div className="relative min-h-full flex flex-col py-20" ref={ref}>

20
src/components/organisms/Navbar/index.tsx
View File

@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import { HiMenuAlt3, HiX, HiSparkles } from "react-icons/hi"; import { HiMenuAlt3, HiX, HiSparkles } from "react-icons/hi";
import { Search } from "./components/Search"; import { Search } from "./components/Search";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { Button } from "@/components/atoms/Button";
const links = [ const links = [
{ {
@ -33,7 +34,7 @@ export const Navbar = () => {
return ( return (
<> <>
{/* Main Navbar */} {/* Main Navbar */}
<header className="fixed top-0 w-full z-50 transition-all duration-300"> <header className="sticky top-0 w-full z-50 transition-all duration-300">
{/* Aurora background effect */} {/* 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-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-600/15 via-blue-600/10 to-teal-600/15"></div>
@ -43,7 +44,7 @@ export const Navbar = () => {
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-400/50 to-transparent"></div> <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-400/50 to-transparent"></div>
<div className="relative"> <div className="relative">
<div className="container mx-auto px-4"> <div className=" mx-auto px-4 max-w-[1500px]">
<div className="flex items-center justify-between h-16 lg:h-20"> <div className="flex items-center justify-between h-16 lg:h-20">
{/* Logo */} {/* Logo */}
<Link <Link
@ -95,19 +96,18 @@ export const Navbar = () => {
<Search /> <Search />
{/* Mobile Menu Button */} {/* Mobile Menu Button */}
<button <Button
theme="glass"
size="icon"
onClick={toggleMobileMenu} onClick={toggleMobileMenu}
className="md:hidden relative p-3 rounded-xl bg-gradient-to-br from-white/15 to-white/5 border border-white/20 transition-all duration-300 hover:bg-gradient-to-br hover:from-white/25 hover:to-white/10 hover:scale-105 shadow-lg" className="md:hidden"
> >
<div className="w-6 h-6 flex items-center justify-center">
{isMobileMenuOpen ? ( {isMobileMenuOpen ? (
<HiX className="w-5 h-5 text-white" /> <HiX className="text-white" />
) : ( ) : (
<HiMenuAlt3 className="w-5 h-5 text-white" /> <HiMenuAlt3 className="text-white" />
)} )}
</div> </Button>
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-xl opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
</button>
</div> </div>
</div> </div>
</div> </div>