ianshaloom
a5e61d02fd
- Add payment method SVGs (Visa, Mastercard, Apple Pay, Google Pay, Klarna, Link, Revolut Pay, Billie, Cartes, Discover) - Add carrier images (DPD, Evri) - Add CustomerConfidenceBooster section component - Enhance Footer with payment methods and carrier display - Wire CustomerConfidenceBooster into shop pages (PetCategory, RecentlyAdded, ShopIndex, SubCategory, Tag, TopCategory) and home page - Update tsconfig.json Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
327 lines
12 KiB
TypeScript
327 lines
12 KiB
TypeScript
import Image from "next/image";
|
|
import { BrandLogo } from "@/components/layout/BrandLogo";
|
|
|
|
const carriers = [
|
|
{ name: "DPD", src: "/images/carriers/dpd.png", width: 30, height: 15 },
|
|
{ name: "Evri", src: "/images/carriers/evri.png", width: 30, height: 15 },
|
|
];
|
|
|
|
const paymentMethods = [
|
|
{ name: "Visa", src: "/images/payment-methods/visa_card.svg" },
|
|
{ name: "Mastercard", src: "/images/payment-methods/master_card.svg" },
|
|
{ name: "Discover", src: "/images/payment-methods/discovery_card.svg" },
|
|
{ name: "Apple Pay", src: "/images/payment-methods/apple_pay.svg" },
|
|
{ name: "Google Pay", src: "/images/payment-methods/google_pay.svg" },
|
|
{ name: "Link", src: "/images/payment-methods/link.svg" },
|
|
{ name: "Revolut Pay", src: "/images/payment-methods/revoult_pay.svg" },
|
|
{ name: "Billie", src: "/images/payment-methods/billie.svg" },
|
|
{ name: "Cartes", src: "/images/payment-methods/cartes.svg" },
|
|
{ name: "Klarna", src: "/images/payment-methods/klarna.svg" },
|
|
];
|
|
|
|
const linkClasses =
|
|
"text-sm text-[#3d5554] transition-colors hover:text-[#38a99f]";
|
|
|
|
function FacebookIcon() {
|
|
return (
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function InstagramIcon() {
|
|
return (
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function TwitterIcon() {
|
|
return (
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const shopLinks = [
|
|
{ label: "All Products", href: "/shop" },
|
|
{ label: "Dog Food", href: "/shop/dogs/dry-food" },
|
|
{ label: "Cat Food", href: "/shop/cats/dry-food" },
|
|
{ label: "Treats & Snacks", href: "/shop/dogs/treats" },
|
|
{ label: "Toys", href: "/shop/dogs/toys" },
|
|
{ label: "Beds & Baskets", href: "/shop/dogs/beds-and-baskets" },
|
|
{ label: "Grooming & Care", href: "/shop/dogs/grooming-and-care" },
|
|
{ label: "Leads & Collars", href: "/shop/dogs/leads-and-collars" },
|
|
{ label: "Bowls & Feeders", href: "/shop/dogs/bowls-and-feeders" },
|
|
{ label: "Flea & Worming", href: "/shop/dogs/flea-tick-and-worming-treatments" },
|
|
{ label: "Clothing", href: "/shop/dogs/clothing" },
|
|
];
|
|
|
|
const specialtyGroups = [
|
|
{
|
|
heading: "Brands",
|
|
links: [
|
|
{ label: "Almo Nature", href: "/brands/almo-nature" },
|
|
{ label: "Applaws", href: "/brands/applaws" },
|
|
{ label: "Arden Grange", href: "/brands/arden-grange" },
|
|
{ label: "Shop All", href: "/shop" },
|
|
],
|
|
},
|
|
{
|
|
heading: "Accessories",
|
|
links: [
|
|
{ label: "Crates & Travel", href: "/shop/dogs/crates-and-travel-accessories" },
|
|
{ label: "Kennels & Gates", href: "/shop/dogs/kennels-flaps-and-gates" },
|
|
{ label: "Trees & Scratching", href: "/shop/cats/trees-and-scratching-posts" },
|
|
],
|
|
},
|
|
];
|
|
|
|
const engagementGroups = [
|
|
{
|
|
heading: "Community",
|
|
links: [
|
|
{ label: "Adopt a Pet", href: "/community/adopt" },
|
|
{ label: "Pet Pharmacy", href: "/pharmacy" },
|
|
{ label: "Pet Services", href: "/services" },
|
|
],
|
|
},
|
|
{
|
|
heading: "Promotions",
|
|
links: [
|
|
{ label: "Special Offers", href: "/shop/sale" },
|
|
{ label: "Top Picks", href: "/shop/top-picks" },
|
|
{ label: "What's New", href: "/shop/recently-added" },
|
|
],
|
|
},
|
|
];
|
|
|
|
const utilityGroups = [
|
|
{
|
|
heading: "Content",
|
|
links: [
|
|
{ label: "Blog", href: "/blog" },
|
|
{ label: "Tips & Tricks", href: "/tips" },
|
|
{ label: "Pet Guides", href: "/guides" },
|
|
],
|
|
},
|
|
{
|
|
heading: "Support",
|
|
links: [
|
|
{ label: "Order Tracking", href: "/account/orders" },
|
|
{ label: "Shipping Info", href: "/support/shipping" },
|
|
{ label: "Returns & Refunds", href: "/support/returns" },
|
|
{ label: "FAQs", href: "/support/faqs" },
|
|
],
|
|
},
|
|
{
|
|
heading: "Company",
|
|
links: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Contact Us", href: "/contact" },
|
|
{ label: "Careers", href: "/careers" },
|
|
],
|
|
},
|
|
];
|
|
|
|
function FooterColumn({
|
|
groups,
|
|
}: {
|
|
groups: { heading: string; links: { label: string; href: string }[] }[];
|
|
}) {
|
|
return (
|
|
<div className="space-y-5">
|
|
{groups.map((group) => (
|
|
<div key={group.heading}>
|
|
<h4 className="mb-2 text-sm font-semibold text-[#236f6b]">
|
|
{group.heading}
|
|
</h4>
|
|
<ul className="space-y-1.5">
|
|
{group.links.map((link) => (
|
|
<li key={link.label}>
|
|
<a href={link.href} className={linkClasses}>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Footer() {
|
|
return (
|
|
<footer className="mt-auto w-full max-w-full overflow-x-hidden">
|
|
{/* Main footer */}
|
|
<div className="border-t border-[#e8f7f6] bg-white">
|
|
<div className="mx-auto grid min-w-0 max-w-[1400px] grid-cols-1 gap-10 px-4 py-12 sm:grid-cols-2 lg:grid-cols-[240px_1fr_1fr_1fr_1fr] lg:px-6">
|
|
{/* Brand & Social */}
|
|
<div className="space-y-6">
|
|
<div>
|
|
<BrandLogo
|
|
size={30}
|
|
textClassName="font-[family-name:var(--font-fraunces)] text-xl font-bold tracking-tight text-[#236f6b]"
|
|
/>
|
|
<p className="mt-3 text-sm leading-relaxed text-[#3d5554]">
|
|
Your trusted partner for premium pet supplies. Healthy pets,
|
|
happy homes — from nutrition to play, we've got it all.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3" suppressHydrationWarning>
|
|
<a
|
|
suppressHydrationWarning
|
|
href="https://facebook.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Facebook"
|
|
className="flex h-9 w-9 items-center justify-center rounded-full bg-[#f0f8f7] text-[#3d5554] transition-colors hover:bg-[#e8f7f6] hover:text-[#236f6b]"
|
|
>
|
|
<FacebookIcon />
|
|
</a>
|
|
<a
|
|
suppressHydrationWarning
|
|
href="https://instagram.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Instagram"
|
|
className="flex h-9 w-9 items-center justify-center rounded-full bg-[#f0f8f7] text-[#3d5554] transition-colors hover:bg-[#e8f7f6] hover:text-[#236f6b]"
|
|
>
|
|
<InstagramIcon />
|
|
</a>
|
|
<a
|
|
suppressHydrationWarning
|
|
href="https://twitter.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Twitter / X"
|
|
className="flex h-9 w-9 items-center justify-center rounded-full bg-[#f0f8f7] text-[#3d5554] transition-colors hover:bg-[#e8f7f6] hover:text-[#236f6b]"
|
|
>
|
|
<TwitterIcon />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Column 1 — Shop */}
|
|
<div>
|
|
<h4 className="mb-3 text-sm font-semibold text-[#236f6b]">Shop</h4>
|
|
<ul className="space-y-1.5">
|
|
{shopLinks.map((link) => (
|
|
<li key={link.label}>
|
|
<a href={link.href} className={linkClasses}>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<a
|
|
href="/special-offers"
|
|
className="mt-3 inline-block text-sm font-semibold text-[#f2705a] transition-colors hover:text-[#e05a42]"
|
|
>
|
|
Sale
|
|
</a>
|
|
</div>
|
|
|
|
{/* Column 2 — Specialty */}
|
|
<FooterColumn groups={specialtyGroups} />
|
|
|
|
{/* Column 3 — Engagement */}
|
|
<FooterColumn groups={engagementGroups} />
|
|
|
|
{/* Column 4 — Utility */}
|
|
<FooterColumn groups={utilityGroups} />
|
|
</div>
|
|
|
|
{/* Carrier partners + Payment methods */}
|
|
<section
|
|
className="border-t border-[#e8f7f6] px-4 py-6 lg:px-6"
|
|
aria-label="Delivery and payment options"
|
|
>
|
|
<div className="mx-auto flex min-w-0 max-w-[1400px] flex-col gap-6 md:flex-row md:items-center md:justify-between">
|
|
{/* Delivery partners — left */}
|
|
<div className="flex flex-col items-center gap-3 sm:flex-row sm:justify-center sm:gap-6 md:justify-start">
|
|
<p className="text-xs font-medium text-[#3d5554]">
|
|
DELIVERY PARTNERS
|
|
</p>
|
|
<div className="flex flex-wrap items-center justify-center gap-6 md:justify-start">
|
|
{carriers.map((carrier) => (
|
|
<span
|
|
key={carrier.name}
|
|
className="flex items-center justify-center rounded px-3 py-2"
|
|
title={carrier.name}
|
|
>
|
|
<Image
|
|
src={carrier.src}
|
|
alt={carrier.name}
|
|
width={carrier.width}
|
|
height={carrier.height}
|
|
className="h-5 w-auto object-contain md:h-6"
|
|
/>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{/* Payment methods — right */}
|
|
<div className="flex flex-col items-center gap-3 sm:flex-row sm:justify-center sm:gap-4 md:justify-end">
|
|
<p className="text-xs font-medium text-[#3d5554]">
|
|
PAYMENT METHODS
|
|
</p>
|
|
<div className="flex flex-wrap items-center justify-center gap-3 md:justify-end">
|
|
{paymentMethods.map((method) => (
|
|
<span
|
|
key={method.name}
|
|
className="flex items-center justify-center px-2 "
|
|
title={method.name}
|
|
>
|
|
<Image
|
|
src={method.src}
|
|
alt={method.name}
|
|
width={30}
|
|
height={15}
|
|
className="h-6 w-auto max-w-10 object-contain md:h-7"
|
|
/>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{/* Copyright bar */}
|
|
<div className="w-full max-w-full bg-[#236f6b]">
|
|
<div className="mx-auto flex min-w-0 max-w-[1400px] flex-wrap items-center justify-between gap-3 px-4 py-4 lg:px-6">
|
|
<p className="text-xs text-white/80">
|
|
© {new Date().getFullYear()} The Pet Loft. All rights reserved.
|
|
</p>
|
|
<div className="flex items-center gap-6">
|
|
<a
|
|
href="/terms"
|
|
className="text-xs text-white/80 transition-colors hover:text-white"
|
|
>
|
|
Terms of Use
|
|
</a>
|
|
<a
|
|
href="/privacy"
|
|
className="text-xs text-white/80 transition-colors hover:text-white"
|
|
>
|
|
Privacy Policy
|
|
</a>
|
|
<a
|
|
href="/data-protection"
|
|
className="text-xs text-white/80 transition-colors hover:text-white"
|
|
>
|
|
Data Protection
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|