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) {
const footerLinks = [
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
{ label: "Contact", href: "#" },
{ label: "Privacy", href: "/privacy-policy" },
{ label: "Terms", href: "/terms-and-conditions" },
{ label: "Contact", href: "/contact" },
];
return (
<footer
className={`w-full py-8 border-t bg-[#faf8f5] ${className}`}
style={{ borderColor: "#6b8f71/20" }}
className={`w-full py-12 border-t border-[#e8e4dc] bg-[#faf8f5] ${className}`}
>
<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">
{/* Logo + Copyright */}
<div className="flex items-center gap-3">
<div
className="w-8 h-8 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"
<div className="flex flex-col sm:flex-row items-center justify-between gap-8">
{/* Logo + Tagline */}
<div className="flex flex-col items-center sm:items-start gap-1">
<div className="flex items-center gap-2.5">
<div
className="w-7 h-7 rounded-full flex items-center justify-center"
style={{ backgroundColor: "#1a4d2e" }}
>
<path
d="M13 2L4.5 13.5H11.5L10.5 22L19 10.5H12L13 2Z"
fill="#faf8f5"
stroke="#faf8f5"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
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>
<span
className="text-sm"
className="text-xs mt-1"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
color: "#1a1a1a",
opacity: 0.7,
color: "#9a9590",
}}
>
© 2025 Route Commerce. All rights reserved.
Fresh produce, delivered fresh.
</span>
</div>
{/* Links */}
<nav className="flex items-center gap-6">
<nav className="flex items-center gap-8">
{footerLinks.map((link) => (
<a
key={link.label}
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={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
color: "#6b8f71",
letterSpacing: "0.08em",
}}
>
{link.label}
</a>
))}
</nav>
{/* Copyright */}
<span
className="text-xs"
style={{
fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
color: "#b5b0a8",
}}
>
© 2025
</span>
</div>
</div>
</footer>