RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling refactor

Browse Source
This commit is contained in:
augmentedpotato
2026-04-18 16:12:43 -06:00
committed by Harkamal Randhawa
parent 049c39984b
commit 077d147498
21 changed files with 829 additions and 4509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web/components/Footer.js
View File

@@ -1,54 +1,50 @@
import Link from "next/link";
import Image from "next/image";
const linkCls = "text-[#2f2f2f] no-underline text-[0.95rem] opacity-85 transition-opacity hover:opacity-100 hover:underline";
export default function Footer() {
return (
<footer className="site-footer">
<div className="footer-container">
<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="footer-brand">
<Image
src="/logo_simple.png"
alt="Leon's Pet Store logo"
width={50}
height={50}
className="footer-logo"
/>
<p className="footer-tagline">
<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 className="footer-section">
<h3 className="footer-heading">Quick Links</h3>
<ul className="footer-links">
<li><Link href="/">Home</Link></li>
<li><Link href="/adopt">Adopt a Pet</Link></li>
<li><Link href="/products">Online Store</Link></li>
<li><Link href="/appointments">Schedule an Appointment</Link></li>
<li><Link href="/ai-chat">AI Assistant</Link></li>
<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 className="footer-section">
<h3 className="footer-heading">Company</h3>
<ul className="footer-links">
<li><Link href="/about">About Us</Link></li>
<li><Link href="/contact">Contact Us</Link></li>
<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 className="footer-section">
<h3 className="footer-heading">Contact</h3>
<ul className="footer-links footer-contact">
<li>(403) 123-4567</li>
<li>support@leonspetstore.com</li>
<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="footer-bottom">
<div className="border-t border-[rgba(47,47,47,0.2)] text-center px-8 py-4 text-[0.85rem] opacity-80">
<p>&copy; {new Date().getFullYear()} Leon&apos;s Pet Store. All rights reserved.</p>
</div>
</footer>