feat(storefront): add payment/carrier assets, CustomerConfidenceBooster, and footer enhancements
- 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:
@@ -0,0 +1,107 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Customer confidence booster: trust badges (Free Shipping, Easy Returns, Secure Checkout).
|
||||
* Rendered below product grids on shop pages and homepage. PetPaws theme, mobile-first.
|
||||
*/
|
||||
export function CustomerConfidenceBooster() {
|
||||
const items: { title: string; subheading: string; icon: React.ReactNode }[] = [
|
||||
{
|
||||
title: "Free Shipping",
|
||||
subheading: "No extra costs (T&C apply)",
|
||||
icon: (
|
||||
<svg
|
||||
className="size-8 shrink-0"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden
|
||||
>
|
||||
<path d="M5 18H3c-.6 0-1-.4-1-1V7c0-.6.4-1 1-1h10c.6 0 1 .4 1 1v2" />
|
||||
<path d="M19 10h2l-1.5 4.5L18 10h2" />
|
||||
<path d="M14 10h4" />
|
||||
<path d="M2 14h15.5" />
|
||||
<circle cx="7" cy="18" r="2" />
|
||||
<path d="M9 18h6" />
|
||||
<circle cx="17" cy="18" r="2" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Easy Returns",
|
||||
subheading: "Return with ease",
|
||||
icon: (
|
||||
<svg
|
||||
className="size-8 shrink-0"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden
|
||||
>
|
||||
<path d="M16 3h5v5" />
|
||||
<path d="M8 3H3v5" />
|
||||
<path d="M12 22v-8.3a4 4 0 0 0-1.2-2.9L3 7" />
|
||||
<path d="m3 7 7.8 7.8a4 4 0 0 1 1.2 2.9V22" />
|
||||
<path d="M21 7l-7.8 7.8a4 4 0 0 1-1.2 2.9V12" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Secure Checkout",
|
||||
subheading: "Secure payment",
|
||||
icon: (
|
||||
<svg
|
||||
className="size-8 shrink-0"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden
|
||||
>
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
aria-label="Why shop with us"
|
||||
className="w-full border border-[#d9e8e7] bg-gradient-to-r from-[#e8f7f6] to-[#f0f8f7] px-4 py-6 md:px-6 md:py-8 m-16 max-w-7xl mx-auto rounded-xl"
|
||||
>
|
||||
<div className="mx-auto grid w-full max-w-4xl grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 md:gap-8">
|
||||
{items.map(({ title, subheading, icon }) => (
|
||||
<div
|
||||
key={title}
|
||||
className="flex flex-col items-center gap-3 text-center"
|
||||
>
|
||||
<div
|
||||
className="flex size-12 items-center justify-center rounded-full bg-white text-[#236f6b] shadow-sm ring-1 ring-[#d9e8e7]"
|
||||
aria-hidden
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span
|
||||
className="block font-[family-name:var(--font-fraunces)] text-base font-semibold text-[#1a2e2d] md:text-lg"
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
<span className="block text-sm text-[#3d5554]">
|
||||
{subheading}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user