Merge pull request 'feat(storefront): add payment/carrier assets, CustomerConfidenceBooster, and footer enhancements' (#1) from feat/storefront into main

Reviewed-on: http://72.61.144.167:3000/admin/the-pet-loft/pulls/1
This commit was merged in pull request #1.
This commit is contained in:
2026-03-07 20:49:34 +00:00
23 changed files with 226 additions and 6 deletions

View File

@@ -1,6 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
/// <reference path="./.next/types/routes.d.ts" /> import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@@ -0,0 +1 @@
<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="⚙ as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#F6F8FA" d="M0 0h32v32H0z"></path><path d="M26.672 8H5.328c-.163 0-.327.002-.49.004a3.265 3.265 0 0 0-.49.043 1.56 1.56 0 0 0-1.148.837c-.076.149-.124.3-.153.464a3.442 3.442 0 0 0-.043.49L3 10.06v12.255c0 .164.002.328.004.492.004.163.014.328.043.489a1.562 1.562 0 0 0 .837 1.148c.149.076.3.124.464.153a3.3 3.3 0 0 0 .49.044l.223.003h21.877l.226-.003c.162-.005.326-.015.488-.044a1.65 1.65 0 0 0 .465-.153c.295-.15.534-.389.683-.683.074-.147.126-.304.153-.466.027-.161.041-.324.043-.488.002-.075.003-.149.003-.224l.001-.268V10.062c0-.075-.002-.15-.004-.225a3.243 3.243 0 0 0-.043-.489 1.567 1.567 0 0 0-1.3-1.301 3.274 3.274 0 0 0-.49-.043L26.938 8h-.266Z" fill="#000"></path><path d="M26.672 8.555h.262c.071 0 .143.002.215.004.123.003.27.009.405.034.118.022.217.053.312.103a1.004 1.004 0 0 1 .54.751c.025.134.032.28.035.405l.004.214v12.515c0 .07-.002.141-.004.212 0 .136-.012.272-.034.406a1.08 1.08 0 0 1-.102.311.996.996 0 0 1-.44.44c-.098.05-.202.084-.31.102a2.822 2.822 0 0 1-.404.035 8.19 8.19 0 0 1-.217.002H5.064c-.071 0-.143 0-.212-.002a2.832 2.832 0 0 1-.406-.035 1.087 1.087 0 0 1-.312-.102.995.995 0 0 1-.44-.44 1.09 1.09 0 0 1-.102-.312 2.744 2.744 0 0 1-.033-.405 10.392 10.392 0 0 1-.004-.213V10.066c0-.072.001-.143.004-.215.003-.124.01-.269.034-.405.018-.108.052-.213.102-.31a.998.998 0 0 1 .44-.441 1.11 1.11 0 0 1 .311-.103c.135-.02.27-.032.406-.033l.213-.004h21.607Z" fill="#fff"></path><path d="M10.098 13.599c.223-.28.373-.652.333-1.035-.325.016-.723.214-.953.494-.207.238-.39.628-.342.994.366.032.731-.183.962-.453Zm.33.524c-.531-.032-.984.302-1.237.302-.254 0-.643-.286-1.063-.278a1.567 1.567 0 0 0-1.331.81c-.571.983-.151 2.442.404 3.244.27.396.594.833 1.022.817.405-.016.564-.26 1.055-.26s.634.26 1.062.252c.444-.008.722-.396.991-.793.31-.453.437-.889.444-.913-.007-.007-.857-.333-.864-1.308-.007-.818.666-1.206.699-1.23-.382-.563-.976-.627-1.183-.642m4.626-1.106c1.155 0 1.959.796 1.959 1.955 0 1.162-.82 1.963-1.988 1.963h-1.278v2.032h-.924v-5.95h2.231Zm-1.307 3.143h1.06c.804 0 1.261-.433 1.261-1.184 0-.75-.457-1.18-1.257-1.18h-1.064v2.364Zm3.508 1.574c0-.759.581-1.224 1.612-1.282l1.187-.07v-.334c0-.482-.326-.771-.87-.771-.515 0-.837.247-.915.635h-.84c.049-.784.716-1.362 1.788-1.362 1.052 0 1.724.557 1.724 1.428v2.99h-.853v-.714h-.02c-.252.483-.802.788-1.37.788-.85 0-1.443-.528-1.443-1.308Zm2.8-.39v-.343l-1.069.065c-.53.037-.832.273-.832.644 0 .38.313.627.791.627.623 0 1.11-.428 1.11-.994Zm1.692 3.22v-.722c.066.017.215.017.289.017.413 0 .635-.174.771-.619 0-.009.078-.264.078-.268l-1.566-4.342h.965l1.098 3.53h.016l1.097-3.53h.94l-1.625 4.565c-.37 1.052-.8 1.39-1.699 1.39a3.699 3.699 0 0 1-.363-.021Z" fill="#000"></path></svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@@ -0,0 +1 @@
<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="⚙ as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#1C1C1E" d="M0 0h32v32H0z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M22.968 10.853c0 .856-.097 1.792-.283 2.666l.003-.002c1.747 1.328 2.78 3.345 2.78 5.48 0 3.86-3.305 7.003-7.363 7.003H8.25V11.004c0-1.925.844-3.786 2.316-5.104A7.537 7.537 0 0 1 15.6 4c.16 0 .322.006.481.014 3.795.228 6.887 3.296 6.887 6.84Zm-7.884 11.87h3.015c2.157 0 3.913-1.67 3.913-3.724 0-1.025-.434-1.95-1.136-2.624-1.33 2.412-3.228 4.493-5.792 6.349Zm4.27-10.117a9.985 9.985 0 0 0 .168-1.756c0-1.841-1.64-3.443-3.656-3.563a3.994 3.994 0 0 0-2.933 1.003c-.797.713-1.237 1.677-1.237 2.716v1.6h7.658Zm-1.255 2.666h-6.408v6.452c3.089-1.875 5.21-3.942 6.624-6.447-.07-.005-.145-.005-.216-.005Z" fill="#fff"></path></svg>

After

Width:  |  Height:  |  Size: 897 B

View File

@@ -0,0 +1 @@
<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="⚙ as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#016797" d="M0 0h32v32H0z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17.434 10.495v5.115h8.164a2.557 2.557 0 0 0 0-5.115h-8.164Zm-.697 5.115c-.046-1.006-.297-1.909-.72-2.675a5.076 5.076 0 0 0-2.007-2.007c-.852-.47-1.874-.728-3.019-.728H9.91c-1.145 0-2.166.258-3.018.728a5.076 5.076 0 0 0-2.007 2.007c-.471.853-.729 1.874-.729 3.019s.258 2.166.729 3.019A5.076 5.076 0 0 0 6.89 20.98c.852.47 1.873.728 3.018.728h1.082c1.145 0 2.167-.257 3.019-.728a5.076 5.076 0 0 0 2.007-2.007c.423-.766.674-1.669.72-2.675h-6.09v-.688h6.09Zm.697.688v5.115h8.164a2.557 2.557 0 0 0 0-5.115h-8.164Z" fill="#fff"></path></svg>

After

Width:  |  Height:  |  Size: 811 B

View File

@@ -0,0 +1 @@
<svg class="icon icon--full-color" viewBox="0 0 38 24" width="38" height="24" role="img" aria-labelledby="pi-discover" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="pi-discover">Discover</title><path fill="#000" opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path><path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32z" fill="#fff"></path><path d="M3.57 7.16H2v5.5h1.57c.83 0 1.43-.2 1.96-.63.63-.52 1-1.3 1-2.11-.01-1.63-1.22-2.76-2.96-2.76zm1.26 4.14c-.34.3-.77.44-1.47.44h-.29V8.1h.29c.69 0 1.11.12 1.47.44.37.33.59.84.59 1.37 0 .53-.22 1.06-.59 1.39zm2.19-4.14h1.07v5.5H7.02v-5.5zm3.69 2.11c-.64-.24-.83-.4-.83-.69 0-.35.34-.61.8-.61.32 0 .59.13.86.45l.56-.73c-.46-.4-1.01-.61-1.62-.61-.97 0-1.72.68-1.72 1.58 0 .76.35 1.15 1.35 1.51.42.15.63.25.74.31.21.14.32.34.32.57 0 .45-.35.78-.83.78-.51 0-.92-.26-1.17-.73l-.69.67c.49.73 1.09 1.05 1.9 1.05 1.11 0 1.9-.74 1.9-1.81.02-.89-.35-1.29-1.57-1.74zm1.92.65c0 1.62 1.27 2.87 2.9 2.87.46 0 .86-.09 1.34-.32v-1.26c-.43.43-.81.6-1.29.6-1.08 0-1.85-.78-1.85-1.9 0-1.06.79-1.89 1.8-1.89.51 0 .9.18 1.34.62V7.38c-.47-.24-.86-.34-1.32-.34-1.61 0-2.92 1.28-2.92 2.88zm12.76.94l-1.47-3.7h-1.17l2.33 5.64h.58l2.37-5.64h-1.16l-1.48 3.7zm3.13 1.8h3.04v-.93h-1.97v-1.48h1.9v-.93h-1.9V8.1h1.97v-.94h-3.04v5.5zm7.29-3.87c0-1.03-.71-1.62-1.95-1.62h-1.59v5.5h1.07v-2.21h.14l1.48 2.21h1.32l-1.73-2.32c.81-.17 1.26-.72 1.26-1.56zm-2.16.91h-.31V8.03h.33c.67 0 1.03.28 1.03.82 0 .55-.36.85-1.05.85z" fill="#231F20"></path><path d="M20.16 12.86a2.931 2.931 0 100-5.862 2.931 2.931 0 000 5.862z" fill="url(#pi-paint0_linear)"></path><path opacity=".65" d="M20.16 12.86a2.931 2.931 0 100-5.862 2.931 2.931 0 000 5.862z" fill="url(#pi-paint1_linear)"></path><path d="M36.57 7.506c0-.1-.07-.15-.18-.15h-.16v.48h.12v-.19l.14.19h.14l-.16-.2c.06-.01.1-.06.1-.13zm-.2.07h-.02v-.13h.02c.06 0 .09.02.09.06 0 .05-.03.07-.09.07z" fill="#231F20"></path><path d="M36.41 7.176c-.23 0-.42.19-.42.42 0 .23.19.42.42.42.23 0 .42-.19.42-.42 0-.23-.19-.42-.42-.42zm0 .77c-.18 0-.34-.15-.34-.35 0-.19.15-.35.34-.35.18 0 .33.16.33.35 0 .19-.15.35-.33.35z" fill="#231F20"></path><path d="M37 12.984S27.09 19.873 8.976 23h26.023a2 2 0 002-1.984l.024-3.02L37 12.985z" fill="#F48120"></path><defs><linearGradient id="pi-paint0_linear" x1="21.657" y1="12.275" x2="19.632" y2="9.104" gradientUnits="userSpaceOnUse"><stop stop-color="#F89F20"></stop><stop offset=".25" stop-color="#F79A20"></stop><stop offset=".533" stop-color="#F68D20"></stop><stop offset=".62" stop-color="#F58720"></stop><stop offset=".723" stop-color="#F48120"></stop><stop offset="1" stop-color="#F37521"></stop></linearGradient><linearGradient id="pi-paint1_linear" x1="21.338" y1="12.232" x2="18.378" y2="6.446" gradientUnits="userSpaceOnUse"><stop stop-color="#F58720"></stop><stop offset=".359" stop-color="#E16F27"></stop><stop offset=".703" stop-color="#D4602C"></stop><stop offset=".982" stop-color="#D05B2E"></stop></linearGradient></defs></svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@@ -0,0 +1 @@
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" class="⚙ as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#F5F6F8" d="M0 0h32v32H0z"></path><path fill="#3C4043" d="M15.135 16.453v3.008h-.954v-7.428h2.53c.641 0 1.188.214 1.636.642.457.427.686.95.686 1.566 0 .63-.229 1.153-.686 1.575-.443.423-.99.632-1.636.632h-1.576v.005Zm0-3.505v2.59h1.596c.378 0 .696-.13.944-.383.254-.253.383-.561.383-.91a1.24 1.24 0 0 0-.383-.9 1.238 1.238 0 0 0-.944-.392h-1.596v-.005Zm6.393 1.262c.706 0 1.263.19 1.67.567.408.378.612.895.612 1.551v3.133h-.91v-.706h-.04c-.392.581-.92.87-1.575.87-.562 0-1.03-.165-1.407-.498a1.587 1.587 0 0 1-.567-1.242c0-.527.199-.945.597-1.253.397-.313.93-.468 1.59-.468.567 0 1.034.105 1.397.314v-.22c0-.332-.129-.61-.392-.844a1.347 1.347 0 0 0-.925-.348c-.532 0-.954.223-1.263.676l-.84-.527c.462-.671 1.148-1.004 2.053-1.004Zm-1.233 3.69c0 .248.105.457.318.62.21.165.458.25.741.25.403 0 .76-.15 1.074-.448.313-.298.472-.646.472-1.049-.298-.234-.71-.353-1.242-.353-.388 0-.711.095-.97.278-.263.194-.393.428-.393.701ZM29 14.375l-3.182 7.318h-.984l1.183-2.56-2.098-4.758h1.039l1.511 3.649h.02l1.472-3.65H29Z"></path><path fill="#4285F4" d="M11.339 15.846a5 5 0 0 0-.08-.895h-4v1.64l2.304.001a1.974 1.974 0 0 1-.856 1.321v1.065h1.372c.8-.742 1.26-1.837 1.26-3.132Z"></path><path fill="#34A853" d="M8.707 17.913c-.381.258-.873.409-1.448.409-1.111 0-2.054-.75-2.392-1.758H3.453v1.097a4.26 4.26 0 0 0 3.806 2.346c1.15 0 2.117-.379 2.82-1.03l-1.372-1.064Z"></path><path fill="#FABB05" d="M4.735 15.75c0-.284.047-.558.133-.816v-1.097H3.453A4.236 4.236 0 0 0 3 15.749c0 .688.164 1.338.453 1.913l1.415-1.098a2.568 2.568 0 0 1-.133-.815Z"></path><path fill="#E94235" d="M7.258 13.177c.628 0 1.19.216 1.634.639l1.216-1.215a4.091 4.091 0 0 0-2.85-1.11 4.26 4.26 0 0 0-3.806 2.346l1.415 1.098c.338-1.01 1.28-1.758 2.391-1.758Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -0,0 +1 @@
<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="⚙ as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#FFA8CD" d="M0 0h32v32H0z"></path><path fill="#0B051D" d="M23.665 6h-4.342c0 3.571-2.185 6.771-5.506 9.057l-1.305.914V6H8v20h4.512v-9.914L19.975 26h5.506l-7.18-9.486c3.264-2.371 5.392-6.057 5.364-10.514Z"></path></svg>

After

Width:  |  Height:  |  Size: 410 B

View File

@@ -0,0 +1 @@
<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="⚙ as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#00D66F" d="M0 0h32v32H0z"></path><path fill="#011E0F" d="M15.144 6H10c1 4.18 3.923 7.753 7.58 10C13.917 18.246 11 21.82 10 26h5.144c1.275-3.867 4.805-7.227 9.142-7.914v-4.18c-4.344-.68-7.874-4.04-9.142-7.906Z"></path></svg>

After

Width:  |  Height:  |  Size: 416 B

View File

@@ -0,0 +1 @@
<svg class="icon icon--full-color" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-master"><title id="pi-master">Mastercard</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"></path><circle fill="#EB001B" cx="15" cy="12" r="7"></circle><circle fill="#F79E1B" cx="23" cy="12" r="7"></circle><path fill="#FF5F00" d="M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.3-3 3.4-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z"></path></svg>

After

Width:  |  Height:  |  Size: 637 B

View File

@@ -0,0 +1 @@
<svg aria-hidden="true" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="⚙ as-b2 as-z as-10 as-11 as-9a as-13 as-14 as-4q as-3 ⚙1q16c7l"><path fill="#191C1F" d="M0 0h32v32H0z"></path><path fill="#fff" d="M13.465 10.936H10V26h3.465V10.936Z"></path><path fill="#fff" d="M24.332 11.797C24.332 8.601 21.911 6 18.935 6H10v3.217h8.51c1.347 0 2.462 1.138 2.487 2.536.012.7-.232 1.36-.688 1.86-.456.5-1.066.776-1.717.776h-3.315c-.117 0-.213.102-.213.229v2.86a.24.24 0 0 0 .04.133L20.73 26h4.117l-5.638-8.412c2.84-.153 5.124-2.717 5.124-5.79Z"></path></svg>

After

Width:  |  Height:  |  Size: 591 B

View File

@@ -0,0 +1 @@
<svg class="icon icon--full-color" viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-visa"><title id="pi-visa">Visa</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"></path><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"></path><path d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z" fill="#142688"></path></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -7,6 +7,7 @@ import { RecentlyAddedSection } from "../components/sections/hompepage/products-
import { SpecialOffersSection } from "../components/sections/hompepage/products-sections/special-offers/SpecialOffersSection"; import { SpecialOffersSection } from "../components/sections/hompepage/products-sections/special-offers/SpecialOffersSection";
import { TopPicksSection } from "../components/sections/hompepage/products-sections/top-picks/TopPicsSection"; import { TopPicksSection } from "../components/sections/hompepage/products-sections/top-picks/TopPicsSection";
import { WishlistSection } from "../components/sections/hompepage/wishlist/WishlistSection"; import { WishlistSection } from "../components/sections/hompepage/wishlist/WishlistSection";
import { CustomerConfidenceBooster } from "../components/sections/CustomerConfidenceBooster";
import { Toast } from "@heroui/react"; import { Toast } from "@heroui/react";
export default function HomePage() { export default function HomePage() {
@@ -20,6 +21,7 @@ export default function HomePage() {
<RecentlyAddedSection /> <RecentlyAddedSection />
<SpecialOffersSection /> <SpecialOffersSection />
<TopPicksSection /> <TopPicksSection />
<CustomerConfidenceBooster />
<NewsletterSection /> <NewsletterSection />
</main> </main>
); );

View File

@@ -1,5 +1,24 @@
import Image from "next/image";
import { BrandLogo } from "@/components/layout/BrandLogo"; 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 = const linkClasses =
"text-sm text-[#3d5554] transition-colors hover:text-[#38a99f]"; "text-sm text-[#3d5554] transition-colors hover:text-[#38a99f]";
@@ -217,6 +236,61 @@ export function Footer() {
{/* Column 4 — Utility */} {/* Column 4 — Utility */}
<FooterColumn groups={utilityGroups} /> <FooterColumn groups={utilityGroups} />
</div> </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> </div>
{/* Copyright bar */} {/* Copyright bar */}
@@ -239,10 +313,10 @@ export function Footer() {
Privacy Policy Privacy Policy
</a> </a>
<a <a
href="/sitemap" href="/data-protection"
className="text-xs text-white/80 transition-colors hover:text-white" className="text-xs text-white/80 transition-colors hover:text-white"
> >
Site Map Data Protection
</a> </a>
</div> </div>
</div> </div>

View File

@@ -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>
);
}

View File

@@ -25,6 +25,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar";
import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState"; import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState";
import { ShopErrorState } from "@/components/shop/state/ShopErrorState"; import { ShopErrorState } from "@/components/shop/state/ShopErrorState";
import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton"; import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton";
import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster";
const SORT_OPTIONS: SortOption[] = [ const SORT_OPTIONS: SortOption[] = [
{ value: "newest", label: "Newest" }, { value: "newest", label: "Newest" },
@@ -192,6 +193,9 @@ export function PetCategoryPage({ slug }: { slug: PetCategorySlug }) {
}))} }))}
/> />
)} )}
<div className="mt-8">
<CustomerConfidenceBooster />
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -13,6 +13,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar";
import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState"; import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState";
import { ShopErrorState } from "@/components/shop/state/ShopErrorState"; import { ShopErrorState } from "@/components/shop/state/ShopErrorState";
import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton"; import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton";
import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster";
import { import {
filterStateFromSearchParams, filterStateFromSearchParams,
mergeFilterStateIntoSearchParams, mergeFilterStateIntoSearchParams,
@@ -162,6 +163,9 @@ export function RecentlyAddedPage() {
}))} }))}
/> />
)} )}
<div className="mt-8">
<CustomerConfidenceBooster />
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -14,6 +14,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar";
import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState"; import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState";
import { ShopErrorState } from "@/components/shop/state/ShopErrorState"; import { ShopErrorState } from "@/components/shop/state/ShopErrorState";
import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton"; import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton";
import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster";
import { import {
filterStateFromSearchParams, filterStateFromSearchParams,
filterStateToSearchParams, filterStateToSearchParams,
@@ -162,6 +163,9 @@ export function ShopIndexContent() {
}))} }))}
/> />
)} )}
<div className="mt-8">
<CustomerConfidenceBooster />
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -16,6 +16,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar";
import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState"; import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState";
import { ShopErrorState } from "@/components/shop/state/ShopErrorState"; import { ShopErrorState } from "@/components/shop/state/ShopErrorState";
import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton"; import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton";
import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster";
import { import {
filterStateFromSearchParams, filterStateFromSearchParams,
filterStateToSearchParams, filterStateToSearchParams,
@@ -209,6 +210,9 @@ export function SubCategoryPageContent({
}))} }))}
/> />
)} )}
<div className="mt-8">
<CustomerConfidenceBooster />
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -13,6 +13,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar";
import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState"; import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState";
import { ShopErrorState } from "@/components/shop/state/ShopErrorState"; import { ShopErrorState } from "@/components/shop/state/ShopErrorState";
import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton"; import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton";
import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster";
import { import {
filterStateFromSearchParams, filterStateFromSearchParams,
mergeFilterStateIntoSearchParams, mergeFilterStateIntoSearchParams,
@@ -168,6 +169,9 @@ export function TagShopPage({
}))} }))}
/> />
)} )}
<div className="mt-8">
<CustomerConfidenceBooster />
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -15,6 +15,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar";
import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState"; import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState";
import { ShopErrorState } from "@/components/shop/state/ShopErrorState"; import { ShopErrorState } from "@/components/shop/state/ShopErrorState";
import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton"; import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton";
import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster";
import { import {
PET_CATEGORY_SLUGS, PET_CATEGORY_SLUGS,
TOP_CATEGORY_SLUGS, TOP_CATEGORY_SLUGS,
@@ -247,6 +248,9 @@ export function TopCategoryPage({ slug }: { slug: TopCategorySlug }) {
}))} }))}
/> />
)} )}
<div className="mt-8">
<CustomerConfidenceBooster />
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -15,7 +15,7 @@
"moduleResolution": "node", "moduleResolution": "node",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"jsx": "preserve", "jsx": "react-jsx",
"plugins": [ "plugins": [
{ {
"name": "next" "name": "next"
@@ -24,14 +24,17 @@
"target": "ES2017", "target": "ES2017",
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["./src/*"] "@/*": [
"./src/*"
]
} }
}, },
"include": [ "include": [
"next-env.d.ts", "next-env.d.ts",
".next/types/**/*.ts", ".next/types/**/*.ts",
"**/*.ts", "**/*.ts",
"**/*.tsx" "**/*.tsx",
".next/dev/types/**/*.ts"
], ],
"exclude": [ "exclude": [
"node_modules" "node_modules"