diff --git a/apps/storefront/next-env.d.ts b/apps/storefront/next-env.d.ts index 830fb59..c4b7818 100644 --- a/apps/storefront/next-env.d.ts +++ b/apps/storefront/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -/// +import "./.next/dev/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/apps/storefront/public/images/carriers/dpd.png b/apps/storefront/public/images/carriers/dpd.png new file mode 100644 index 0000000..e5d54d8 Binary files /dev/null and b/apps/storefront/public/images/carriers/dpd.png differ diff --git a/apps/storefront/public/images/carriers/evri.png b/apps/storefront/public/images/carriers/evri.png new file mode 100644 index 0000000..19fc885 Binary files /dev/null and b/apps/storefront/public/images/carriers/evri.png differ diff --git a/apps/storefront/public/images/payment-methods/apple_pay.svg b/apps/storefront/public/images/payment-methods/apple_pay.svg new file mode 100644 index 0000000..1cc1bcb --- /dev/null +++ b/apps/storefront/public/images/payment-methods/apple_pay.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/storefront/public/images/payment-methods/billie.svg b/apps/storefront/public/images/payment-methods/billie.svg new file mode 100644 index 0000000..5954735 --- /dev/null +++ b/apps/storefront/public/images/payment-methods/billie.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/storefront/public/images/payment-methods/cartes.svg b/apps/storefront/public/images/payment-methods/cartes.svg new file mode 100644 index 0000000..374570d --- /dev/null +++ b/apps/storefront/public/images/payment-methods/cartes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/storefront/public/images/payment-methods/discovery_card.svg b/apps/storefront/public/images/payment-methods/discovery_card.svg new file mode 100644 index 0000000..6e54ddb --- /dev/null +++ b/apps/storefront/public/images/payment-methods/discovery_card.svg @@ -0,0 +1 @@ +Discover \ No newline at end of file diff --git a/apps/storefront/public/images/payment-methods/google_pay.svg b/apps/storefront/public/images/payment-methods/google_pay.svg new file mode 100644 index 0000000..4e86af4 --- /dev/null +++ b/apps/storefront/public/images/payment-methods/google_pay.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/storefront/public/images/payment-methods/klarna.svg b/apps/storefront/public/images/payment-methods/klarna.svg new file mode 100644 index 0000000..332fdd0 --- /dev/null +++ b/apps/storefront/public/images/payment-methods/klarna.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/storefront/public/images/payment-methods/link.svg b/apps/storefront/public/images/payment-methods/link.svg new file mode 100644 index 0000000..7d72bd0 --- /dev/null +++ b/apps/storefront/public/images/payment-methods/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/storefront/public/images/payment-methods/master_card.svg b/apps/storefront/public/images/payment-methods/master_card.svg new file mode 100644 index 0000000..9bae693 --- /dev/null +++ b/apps/storefront/public/images/payment-methods/master_card.svg @@ -0,0 +1 @@ +Mastercard \ No newline at end of file diff --git a/apps/storefront/public/images/payment-methods/revoult_pay.svg b/apps/storefront/public/images/payment-methods/revoult_pay.svg new file mode 100644 index 0000000..a5f71bc --- /dev/null +++ b/apps/storefront/public/images/payment-methods/revoult_pay.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/storefront/public/images/payment-methods/visa_card.svg b/apps/storefront/public/images/payment-methods/visa_card.svg new file mode 100644 index 0000000..775d9a6 --- /dev/null +++ b/apps/storefront/public/images/payment-methods/visa_card.svg @@ -0,0 +1 @@ +Visa \ No newline at end of file diff --git a/apps/storefront/src/app/page.tsx b/apps/storefront/src/app/page.tsx index 1690c36..8b762b1 100644 --- a/apps/storefront/src/app/page.tsx +++ b/apps/storefront/src/app/page.tsx @@ -7,6 +7,7 @@ import { RecentlyAddedSection } from "../components/sections/hompepage/products- import { SpecialOffersSection } from "../components/sections/hompepage/products-sections/special-offers/SpecialOffersSection"; import { TopPicksSection } from "../components/sections/hompepage/products-sections/top-picks/TopPicsSection"; import { WishlistSection } from "../components/sections/hompepage/wishlist/WishlistSection"; +import { CustomerConfidenceBooster } from "../components/sections/CustomerConfidenceBooster"; import { Toast } from "@heroui/react"; export default function HomePage() { @@ -20,6 +21,7 @@ export default function HomePage() { + ); diff --git a/apps/storefront/src/components/layout/footer/Footer.tsx b/apps/storefront/src/components/layout/footer/Footer.tsx index 5c7b2c3..574ad82 100644 --- a/apps/storefront/src/components/layout/footer/Footer.tsx +++ b/apps/storefront/src/components/layout/footer/Footer.tsx @@ -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 */} + + {/* Carrier partners + Payment methods */} +
+
+ {/* Delivery partners — left */} +
+

+ DELIVERY PARTNERS +

+
+ {carriers.map((carrier) => ( + + {carrier.name} + + ))} +
+
+ {/* Payment methods — right */} +
+

+ PAYMENT METHODS +

+
+ {paymentMethods.map((method) => ( + + {method.name} + + ))} +
+
+
+
{/* Copyright bar */} @@ -239,10 +313,10 @@ export function Footer() { Privacy Policy - Site Map + Data Protection diff --git a/apps/storefront/src/components/sections/CustomerConfidenceBooster.tsx b/apps/storefront/src/components/sections/CustomerConfidenceBooster.tsx new file mode 100644 index 0000000..ffebc70 --- /dev/null +++ b/apps/storefront/src/components/sections/CustomerConfidenceBooster.tsx @@ -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: ( + + + + + + + + + + ), + }, + { + title: "Easy Returns", + subheading: "Return with ease", + icon: ( + + + + + + + + ), + }, + { + title: "Secure Checkout", + subheading: "Secure payment", + icon: ( + + + + ), + }, + ]; + + return ( +
+
+ {items.map(({ title, subheading, icon }) => ( +
+
+ {icon} +
+
+ + {title} + + + {subheading} + +
+
+ ))} +
+
+ ); +} diff --git a/apps/storefront/src/components/shop/PetCategoryPage.tsx b/apps/storefront/src/components/shop/PetCategoryPage.tsx index e371fde..fb36c9b 100644 --- a/apps/storefront/src/components/shop/PetCategoryPage.tsx +++ b/apps/storefront/src/components/shop/PetCategoryPage.tsx @@ -25,6 +25,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar"; import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState"; import { ShopErrorState } from "@/components/shop/state/ShopErrorState"; import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton"; +import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster"; const SORT_OPTIONS: SortOption[] = [ { value: "newest", label: "Newest" }, @@ -192,6 +193,9 @@ export function PetCategoryPage({ slug }: { slug: PetCategorySlug }) { }))} /> )} +
+ +
diff --git a/apps/storefront/src/components/shop/RecentlyAddedPage.tsx b/apps/storefront/src/components/shop/RecentlyAddedPage.tsx index a3a7172..0eeeedf 100644 --- a/apps/storefront/src/components/shop/RecentlyAddedPage.tsx +++ b/apps/storefront/src/components/shop/RecentlyAddedPage.tsx @@ -13,6 +13,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar"; import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState"; import { ShopErrorState } from "@/components/shop/state/ShopErrorState"; import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton"; +import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster"; import { filterStateFromSearchParams, mergeFilterStateIntoSearchParams, @@ -162,6 +163,9 @@ export function RecentlyAddedPage() { }))} /> )} +
+ +
diff --git a/apps/storefront/src/components/shop/ShopIndexContent.tsx b/apps/storefront/src/components/shop/ShopIndexContent.tsx index 05d5610..c1c7512 100644 --- a/apps/storefront/src/components/shop/ShopIndexContent.tsx +++ b/apps/storefront/src/components/shop/ShopIndexContent.tsx @@ -14,6 +14,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar"; import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState"; import { ShopErrorState } from "@/components/shop/state/ShopErrorState"; import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton"; +import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster"; import { filterStateFromSearchParams, filterStateToSearchParams, @@ -162,6 +163,9 @@ export function ShopIndexContent() { }))} /> )} +
+ +
diff --git a/apps/storefront/src/components/shop/SubCategoryPageContent.tsx b/apps/storefront/src/components/shop/SubCategoryPageContent.tsx index 9a046f2..1b0066e 100644 --- a/apps/storefront/src/components/shop/SubCategoryPageContent.tsx +++ b/apps/storefront/src/components/shop/SubCategoryPageContent.tsx @@ -16,6 +16,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar"; import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState"; import { ShopErrorState } from "@/components/shop/state/ShopErrorState"; import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton"; +import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster"; import { filterStateFromSearchParams, filterStateToSearchParams, @@ -209,6 +210,9 @@ export function SubCategoryPageContent({ }))} /> )} +
+ +
diff --git a/apps/storefront/src/components/shop/TagShopPage.tsx b/apps/storefront/src/components/shop/TagShopPage.tsx index 63d936c..a50a9c2 100644 --- a/apps/storefront/src/components/shop/TagShopPage.tsx +++ b/apps/storefront/src/components/shop/TagShopPage.tsx @@ -13,6 +13,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar"; import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState"; import { ShopErrorState } from "@/components/shop/state/ShopErrorState"; import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton"; +import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster"; import { filterStateFromSearchParams, mergeFilterStateIntoSearchParams, @@ -168,6 +169,9 @@ export function TagShopPage({ }))} /> )} +
+ +
diff --git a/apps/storefront/src/components/shop/TopCategoryPage.tsx b/apps/storefront/src/components/shop/TopCategoryPage.tsx index 53162d0..c7844d2 100644 --- a/apps/storefront/src/components/shop/TopCategoryPage.tsx +++ b/apps/storefront/src/components/shop/TopCategoryPage.tsx @@ -15,6 +15,7 @@ import { ShopToolbar, type SortOption } from "@/components/shop/ShopToolbar"; import { ShopEmptyState } from "@/components/shop/state/ShopEmptyState"; import { ShopErrorState } from "@/components/shop/state/ShopErrorState"; import { ShopProductGridSkeleton } from "@/components/shop/state/ShopProductGridSkeleton"; +import { CustomerConfidenceBooster } from "@/components/sections/CustomerConfidenceBooster"; import { PET_CATEGORY_SLUGS, TOP_CATEGORY_SLUGS, @@ -247,6 +248,9 @@ export function TopCategoryPage({ slug }: { slug: TopCategorySlug }) { }))} /> )} +
+ +
diff --git a/apps/storefront/tsconfig.json b/apps/storefront/tsconfig.json index e62af4d..ba97867 100644 --- a/apps/storefront/tsconfig.json +++ b/apps/storefront/tsconfig.json @@ -15,7 +15,7 @@ "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "preserve", + "jsx": "react-jsx", "plugins": [ { "name": "next" @@ -24,14 +24,17 @@ "target": "ES2017", "baseUrl": ".", "paths": { - "@/*": ["./src/*"] + "@/*": [ + "./src/*" + ] } }, "include": [ "next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", - "**/*.tsx" + "**/*.tsx", + ".next/dev/types/**/*.ts" ], "exclude": [ "node_modules"