diff --git a/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx b/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx
index 060cc51a0..a87202950 100644
--- a/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx
+++ b/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx
@@ -19,6 +19,7 @@ interface CarouselCTAProps {
iconContainerClassName?: string
// Notification-specific props
isPermissionDenied?: boolean
+ secondaryIcon?: StaticImageData | string
}
const CarouselCTA = ({
@@ -30,6 +31,7 @@ const CarouselCTA = ({
logo,
iconContainerClassName,
isPermissionDenied,
+ secondaryIcon,
}: CarouselCTAProps) => {
const [showPermissionDeniedModal, setShowPermissionDeniedModal] = useState(false)
@@ -87,15 +89,26 @@ const CarouselCTA = ({
{/* Icon container */}
{/* Show icon only if logo isn't provided. Logo takes precedence over icon. */}
- {!logo && }
+ {!logo && }
{logo && (
-
+
+ )}
+
+ {secondaryIcon && (
+
)}
diff --git a/src/components/Home/HomeCarouselCTA/index.tsx b/src/components/Home/HomeCarouselCTA/index.tsx
index e7ad1bf00..779b4ccff 100644
--- a/src/components/Home/HomeCarouselCTA/index.tsx
+++ b/src/components/Home/HomeCarouselCTA/index.tsx
@@ -31,6 +31,7 @@ const HomeCarouselCTA = () => {
logo={cta.logo}
iconContainerClassName={cta.iconContainerClassName}
isPermissionDenied={cta.isPermissionDenied}
+ secondaryIcon={cta.secondaryIcon}
/>
))}
diff --git a/src/hooks/useHomeCarouselCTAs.tsx b/src/hooks/useHomeCarouselCTAs.tsx
index 325212874..b388afad2 100644
--- a/src/hooks/useHomeCarouselCTAs.tsx
+++ b/src/hooks/useHomeCarouselCTAs.tsx
@@ -7,6 +7,7 @@ import { useNotifications } from './useNotifications'
import { useRouter } from 'next/navigation'
import useKycStatus from './useKycStatus'
import type { StaticImageData } from 'next/image'
+import { PIX } from '@/assets'
export type CarouselCTA = {
id: string
@@ -19,6 +20,7 @@ export type CarouselCTA = {
onClose?: () => void
isPermissionDenied?: boolean
iconContainerClassName?: string
+ secondaryIcon?: StaticImageData | string
}
export const useHomeCarouselCTAs = () => {
@@ -32,6 +34,19 @@ export const useHomeCarouselCTAs = () => {
const generateCarouselCTAs = useCallback(() => {
const _carouselCTAs: CarouselCTA[] = []
+ _carouselCTAs.push({
+ id: 'merchant-map-pix',
+ title: '20% Off with PIX Payments',
+ description: 'Click to explore participating merchants. Pay with PIX QR, save instantly, earn points.',
+ iconContainerClassName: 'bg-secondary-1',
+ icon: 'shield',
+ onClick: () => {
+ router.push('https://peanutprotocol.notion.site/Peanut-Foodie-Guide-29a83811757980e79896f2a610d6591a')
+ },
+ logo: PIX,
+ secondaryIcon: 'https://flagcdn.com/w320/br.png',
+ })
+
// add notification prompt as first item if it should be shown
if (showReminderBanner) {
_carouselCTAs.push({