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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user