62 lines
2.6 KiB
JavaScript
62 lines
2.6 KiB
JavaScript
/*
|
|
* Site footer with quick links, company info, and contact details.
|
|
*
|
|
* Author: Shiv
|
|
* Date: April 2026
|
|
*/
|
|
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
//Shared CSS class for footer links
|
|
const linkCls = "text-[#2f2f2f] no-underline text-[0.95rem] opacity-85 transition-opacity hover:opacity-100 hover:underline";
|
|
|
|
//Site footer with quick links, company links, and contact info
|
|
export default function Footer() {
|
|
return (
|
|
<footer className="bg-[#e68672] text-[#2f2f2f] mt-16 rounded-t-[10px]">
|
|
<div className="max-w-[1200px] mx-auto px-8 pt-12 pb-8 grid [grid-template-columns:2fr_1fr_1fr_1fr] gap-8 max-[900px]:[grid-template-columns:1fr_1fr] max-[550px]:grid-cols-1">
|
|
|
|
<div className="max-[900px]:[grid-column:1/-1]">
|
|
<Image src="/logo_simple.png" alt="Leon's Pet Store logo" width={50} height={50} className="rounded-full mb-3" />
|
|
<p className="text-[0.95rem] leading-relaxed opacity-90 max-w-[260px]">
|
|
Your neighbourhood pet store!
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-base font-bold mb-4 uppercase tracking-[0.05em]">Quick Links</h3>
|
|
<ul className="list-none p-0 m-0 flex flex-col gap-2">
|
|
<li><Link href="/" className={linkCls}>Home</Link></li>
|
|
<li><Link href="/adopt" className={linkCls}>Adopt a Pet</Link></li>
|
|
<li><Link href="/products" className={linkCls}>Online Store</Link></li>
|
|
<li><Link href="/appointments" className={linkCls}>Schedule an Appointment</Link></li>
|
|
<li><Link href="/ai-chat" className={linkCls}>AI Assistant</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-base font-bold mb-4 uppercase tracking-[0.05em]">Company</h3>
|
|
<ul className="list-none p-0 m-0 flex flex-col gap-2">
|
|
<li><Link href="/about" className={linkCls}>About Us</Link></li>
|
|
<li><Link href="/contact" className={linkCls}>Contact Us</Link></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-base font-bold mb-4 uppercase tracking-[0.05em]">Contact</h3>
|
|
<ul className="list-none p-0 m-0 flex flex-col gap-2">
|
|
<li className="text-[0.95rem] opacity-85">(403) 123-4567</li>
|
|
<li className="text-[0.95rem] opacity-85">support@leonspetstore.com</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="border-t border-[rgba(47,47,47,0.2)] text-center px-8 py-4 text-[0.85rem] opacity-80">
|
|
<p>© {new Date().getFullYear()} Leon's Pet Store. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|