usulpro
/
banatie-service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: responsive footer

This commit is contained in:
Oleg Proskurin 2025-12-18 23:47:36 +07:00
parent 12cfeeda18
commit f37ae00177
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
apps/landing/src/components/shared/Footer.tsx
View File

@ -7,9 +7,10 @@ import banatieLogo from '@/app/_assets/banatie-logo-horisontal.png';
export const Footer = () => { export const Footer = () => {
return ( return (
<footer className="relative z-10 border-t border-white/10 backdrop-blur-sm"> <footer className="relative z-10 border-t border-white/10 backdrop-blur-sm">
<div className="max-w-7xl mx-auto px-6 pt-12 pb-4"> <div className="max-w-7xl mx-auto px-4 sm:px-6 pt-8 sm:pt-10 md:pt-12 pb-4">
<div className="flex flex-col md:flex-row justify-between items-center gap-6"> <div className="flex flex-col md:flex-row justify-between items-center gap-6 md:gap-8">
<div className="h-16 flex items-center"> {/* Logo - responsive sizing */}
<div className="h-10 sm:h-12 md:h-14 lg:h-16 flex items-center">
<Image <Image
src={banatieLogo} src={banatieLogo}
alt="Banatie Logo" alt="Banatie Logo"
@ -19,19 +20,26 @@ export const Footer = () => {
className="h-full w-auto object-contain" className="h-full w-auto object-contain"
/> />
</div> </div>
<div className="flex gap-8 text-sm text-gray-400">
{footerLinks.map((link) => ( {/* Navigation - grid on mobile, row on desktop */}
<a <nav aria-label="Footer navigation">
key={link.label} <div className="grid grid-cols-2 gap-x-4 gap-y-3 sm:flex sm:flex-wrap sm:justify-center sm:gap-6 md:gap-8 text-sm text-gray-400">
href={link.href} {footerLinks.map((link) => (
className="hover:text-white transition-colors" <a
> key={link.label}
{link.label} href={link.href}
</a> className="hover:text-white transition-colors text-center sm:text-left"
))} >
</div> {link.label}
</a>
))}
</div>
</nav>
</div>
<div className="mt-8 md:mt-10 text-center text-sm text-gray-500">
{footerCopyright}
</div> </div>
<div className="mt-8 text-center text-sm text-gray-500">{footerCopyright}</div>
</div> </div>
</footer> </footer>
); );