admin/the-pet-loft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(storefront): add payment/carrier assets, CustomerConfidenceBooster, and footer enhancements

Browse Source 
- 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>
This commit is contained in:
ianshaloom
2026-03-05 14:48:02 +03:00
parent cc15338ad9
commit a5e61d02fd
23 changed files with 226 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
apps/storefront/src/components/layout/footer/Footer.tsx
View File

@@ -1,5 +1,24 @@
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]";
@@ -217,6 +236,61 @@ export function Footer() {
{/* 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 */}
@@ -239,10 +313,10 @@ export function Footer() {
Privacy Policy
</a>
<a
href="/sitemap"
href="/data-protection"
className="text-xs text-white/80 transition-colors hover:text-white"
>
Site Map
Data Protection
</a>
</div>
</div>