gitadmin/moviebox
1
0
Fork 0
Code Issues Pull Requests Actions 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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,16 +49,12 @@ export const Search = () => {
return (
<>
<Button
theme="glass"
size="small"
theme="secondary"
size="icon"
className="group relative"
onClick={() => setIsSearchOpen(!isSearchOpen)}
>
<IoSearch
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>
<IoSearch className="text-white" />
</Button>
{isSearchOpen && (
@@ -71,14 +67,11 @@ export const Search = () => {
{/* Close button */}
<Button
theme="glass"
size="small"
size="icon"
className="absolute top-6 right-6 z-10 group hover:!bg-red-500/50"
onClick={handleClose}
>
<IoClose
size={24}
className="text-white transition-transform duration-300 group-hover:rotate-90"
/>
<IoClose className="text-white transition-transform duration-300 group-hover:rotate-90" />
</Button>
<div className="relative min-h-full flex flex-col py-20" ref={ref}>

26
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 { Search } from "./components/Search";
import { usePathname } from "next/navigation";
import { Button } from "@/components/atoms/Button";
const links = [
{
@@ -33,7 +34,7 @@ export const Navbar = () => {
return (
<>
{/* 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 */}
<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>
@@ -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="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">
{/* Logo */}
<Link
@@ -95,19 +96,18 @@ export const Navbar = () => {
<Search />
{/* Mobile Menu Button */}
<button
<Button
theme="glass"
size="icon"
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 ? (
<HiX className="w-5 h-5 text-white" />
) : (
<HiMenuAlt3 className="w-5 h-5 text-white" />
)}
</div>
<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>
{isMobileMenuOpen ? (
<HiX className="text-white" />
) : (
<HiMenuAlt3 className="text-white" />
)}
</Button>
</div>
</div>
</div>