diff options
Diffstat (limited to 'frontend/src/components/footer.tsx')
| -rw-r--r-- | frontend/src/components/footer.tsx | 16 |
1 files changed, 8 insertions, 8 deletions
diff --git a/frontend/src/components/footer.tsx b/frontend/src/components/footer.tsx index d64167f..62ebf94 100644 --- a/frontend/src/components/footer.tsx +++ b/frontend/src/components/footer.tsx @@ -274,18 +274,18 @@ export function Footer() { {/* Bottom Footer */} <div className="border-t dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800"> <div className="container mx-auto px-4 py-6"> - <div className="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0 lg:gap-8"> + <div className="flex flex-col space-y-4 lg:flex-row lg:justify-between lg:items-center lg:space-y-0 lg:gap-8"> {/* Left: Copyright and Legal Links */} - <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-6 text-center sm:text-left"> + <div className="flex flex-col items-center space-y-3 sm:space-y-2 text-center lg:items-start lg:text-left"> <p className="text-sm text-muted-foreground"> © {new Date().getFullYear()} blcklst. All rights reserved. </p> - <div className="flex space-x-4"> + <div className="flex flex-wrap justify-center lg:justify-start gap-x-4 gap-y-2"> {footerLinks.legal.map((link) => ( <Link key={link.name} href={link.href} - className="text-xs text-muted-foreground hover:text-foreground transition-colors" + className="text-xs text-muted-foreground hover:text-foreground transition-colors whitespace-nowrap" > {link.name} </Link> @@ -294,13 +294,13 @@ export function Footer() { </div> {/* Right: Payment Methods */} - <div className="flex items-center space-x-2"> - <span className="text-xs text-muted-foreground mr-2">We accept:</span> - <div className="flex space-x-1"> + <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-2"> + <span className="text-xs text-muted-foreground text-center sm:text-left whitespace-nowrap">We accept:</span> + <div className="flex flex-wrap justify-center sm:justify-start gap-1 max-w-full"> {["Visa", "Mastercard", "AmEx", "PayPal", "Apple Pay"].map((method) => ( <div key={method} - className="bg-white dark:bg-neutral-700 border dark:border-neutral-600 rounded px-2 py-1 text-xs font-medium text-foreground" + className="bg-white dark:bg-neutral-700 border dark:border-neutral-600 rounded px-1.5 py-1 text-[10px] sm:text-xs font-medium text-foreground whitespace-nowrap flex-shrink-0" > {method} </div> |