From 554657737d0d96a0871e4d30bb488b924139396c Mon Sep 17 00:00:00 2001
From: Zishan Mohd <zishan2539@gmail.com>
Date: Thu, 6 Nov 2025 22:27:55 +0530
Subject: [PATCH 1/2] Feat: Add merchant map CTA

---
 redirects.json                                 |  2 +-
 .../Home/HomeCarouselCTA/CarouselCTA.tsx       | 18 +++++++++++++++---
 src/components/Home/HomeCarouselCTA/index.tsx  |  1 +
 src/hooks/useHomeCarouselCTAs.tsx              | 15 +++++++++++++++
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/redirects.json b/redirects.json
index 38e61dad9..b114f310d 100644
--- a/redirects.json
+++ b/redirects.json
@@ -47,7 +47,7 @@
     },
     {
         "source": "/foodie",
-        "destination": "https://peanutprotocol.notion.site/297838117579804da61dc45760a2599f?v=29783811757980a1b23a000cce31c330",
+        "destination": "https://peanutprotocol.notion.site/Peanut-Foodie-Guide-29a83811757980e79896f2a610d6591a",
         "permanent": false
     }
 ]
diff --git a/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx b/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx
index 060cc51a0..9459f625c 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,25 @@ const CarouselCTA = ({
                 {/* Icon container */}
                 <div
                     className={twMerge(
-                        'flex size-8 items-center justify-center rounded-full',
+                        'relative flex size-8 items-center justify-center rounded-full',
                         logo ? 'bg-transparent' : 'bg-primary-1',
                         iconContainerClassName
                     )}
                 >
                     {/* Show icon only if logo isn't provided. Logo takes precedence over icon. */}
-                    {!logo && <Icon name={icon} size={20} />}
+                    {!logo && <Icon name={icon} size={22} />}
                     {logo && (
-                        <Image src={logo} alt={typeof title === 'string' ? title : 'logo'} width={32} height={32} />
+                        <Image src={logo} alt={typeof title === 'string' ? title : 'logo'} width={36} height={36} />
+                    )}
+                    {secondaryIcon && (
+                        <Image
+                            src={typeof secondaryIcon === 'string' ? secondaryIcon : secondaryIcon.src}
+                            alt="secondary icon"
+                            height={64}
+                            width={64}
+                            quality={100}
+                            className="absolute -right-1 bottom-0 z-50 size-4 rounded-full object-cover"
+                        />
                     )}
                 </div>
 
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}
                 />
             ))}
         </Carousel>
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({

From f8d169a3ff3b824e42187fba9e9ad34a02aee2f6 Mon Sep 17 00:00:00 2001
From: Zishan Mohd <zishan2539@gmail.com>
Date: Thu, 6 Nov 2025 22:34:34 +0530
Subject: [PATCH 2/2]  fix: update secondaryIcon prop handling in CarouselCTA
 component

---
 src/components/Home/HomeCarouselCTA/CarouselCTA.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx b/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx
index 9459f625c..0cec5499f 100644
--- a/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx
+++ b/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx
@@ -101,7 +101,7 @@ const CarouselCTA = ({
                     )}
                     {secondaryIcon && (
                         <Image
-                            src={typeof secondaryIcon === 'string' ? secondaryIcon : secondaryIcon.src}
+                            src={secondaryIcon}
                             alt="secondary icon"
                             height={64}
                             width={64}