clean: minimal, modern footer design

- Redesigned landing page footer with cleaner layout
- Added subtle tagline 'Fresh produce, delivered fresh'
- Links now use uppercase + letter-spacing for refined look
- Better spacing (py-12 vs py-8) and gap management
- Official page links instead of hash anchors
- Copyright on separate line for better hierarchy
- Consistent with overall minimal aesthetic
This commit is contained in:
2026-06-02 16:00:37 +00:00
parent 47ac74329f
commit f55f0551f9
+54 -33
View File
@@ -214,69 +214,90 @@ interface FooterProps {
export function Footer({ className = "" }: FooterProps) { export function Footer({ className = "" }: FooterProps) {
const footerLinks = [ const footerLinks = [
{ label: "Privacy", href: "#" }, { label: "Privacy", href: "/privacy-policy" },
{ label: "Terms", href: "#" }, { label: "Terms", href: "/terms-and-conditions" },
{ label: "Contact", href: "#" }, { label: "Contact", href: "/contact" },
]; ];
return ( return (
<footer <footer
className={`w-full py-8 border-t bg-[#faf8f5] ${className}`} className={`w-full py-12 border-t border-[#e8e4dc] bg-[#faf8f5] ${className}`}
style={{ borderColor: "#6b8f71/20" }}
> >
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col sm:flex-row items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row items-center justify-between gap-8">
{/* Logo + Copyright */} {/* Logo + Tagline */}
<div className="flex items-center gap-3"> <div className="flex flex-col items-center sm:items-start gap-1">
<div <div className="flex items-center gap-2.5">
className="w-8 h-8 rounded-full flex items-center justify-center" <div
style={{ backgroundColor: "#1a4d2e" }} className="w-7 h-7 rounded-full flex items-center justify-center"
> style={{ backgroundColor: "#1a4d2e" }}
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
> >
<path <svg
d="M13 2L4.5 13.5H11.5L10.5 22L19 10.5H12L13 2Z" width="14"
fill="#faf8f5" height="14"
stroke="#faf8f5" viewBox="0 0 24 24"
strokeWidth="1.5" fill="none"
strokeLinecap="round" xmlns="http://www.w3.org/2000/svg"
strokeLinejoin="round" >
/> <path
</svg> d="M13 2L4.5 13.5H11.5L10.5 22L19 10.5H12L13 2Z"
fill="#faf8f5"
stroke="#faf8f5"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
<span
className="text-sm font-medium tracking-tight"
style={{
fontFamily: "'Cormorant Garamond', Georgia, serif",
color: "#1a1a1a",
}}
>
Route Commerce
</span>
</div> </div>
<span <span
className="text-sm" className="text-xs mt-1"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
color: "#1a1a1a", color: "#9a9590",
opacity: 0.7,
}} }}
> >
© 2025 Route Commerce. All rights reserved. Fresh produce, delivered fresh.
</span> </span>
</div> </div>
{/* Links */} {/* Links */}
<nav className="flex items-center gap-6"> <nav className="flex items-center gap-8">
{footerLinks.map((link) => ( {footerLinks.map((link) => (
<a <a
key={link.label} key={link.label}
href={link.href} href={link.href}
className="text-sm font-medium transition-opacity hover:opacity-70" className="text-xs font-medium uppercase tracking-wider transition-colors hover:text-[#1a4d2e]"
style={{ style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif", fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
color: "#6b8f71", color: "#6b8f71",
letterSpacing: "0.08em",
}} }}
> >
{link.label} {link.label}
</a> </a>
))} ))}
</nav> </nav>
{/* Copyright */}
<span
className="text-xs"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
color: "#b5b0a8",
}}
>
© 2025
</span>
</div> </div>
</div> </div>
</footer> </footer>