Update passport demo

src/app/components/AirdropCard.tsx

@@ -23,8 +23,8 @@ export default function AirdropCard() {
           it can be used by projects and organizations to directly reach
           civilians
         </p>
-        <div className='mt-2 flex items-center gap-10 lg:mt-4'>
-          <p className='text-body2 opacity-50'>Distributing:</p>
+        <div className='mt-2 flex items-center gap-4 lg:mt-4 lg:gap-10'>
+          <p className='text-body3 opacity-50 lg:text-body2'>Distributing:</p>
           <img
             src='/images/home/glo-dollar-logo.svg'
             alt='Glo Dollar'

src/app/components/PassportDemo.tsx

@@ -8,29 +8,24 @@ import { cn } from '@/theme/utils'
 const steps = [
   {
     title:
-      'You get rewards for using the app and identity proofs across different ecosystems',
+      'To create an incognito profile, users should scan their biometric passport',
     image: '/images/home/demo-mockup-1.png',
   },
   {
     title:
-      '[Step 2] You get rewards for using the app and identity proofs across different ecosystems',
+      'The application will initially support a set of countries and, over time, will include other passports on the waitlist',
     image: '/images/home/demo-mockup-2.png',
   },
   {
     title:
-      '[Step 3] You get rewards for using the app and identity proofs across different ecosystems',
+      'The biggest innovation is that users self-issue digital passports, ensuring personal data never leaves their device',
     image: '/images/home/demo-mockup-3.png',
   },
   {
     title:
-      '[Step 4] You get rewards for using the app and identity proofs across different ecosystems',
+      'The incognito profile enables users to prove their eligibility and belonging and use country-specific mini-apps',
     image: '/images/home/demo-mockup-4.png',
   },
-  {
-    title:
-      '[Step 5] You get rewards for using the app and identity proofs across different ecosystems',
-    image: '/images/home/demo-mockup-5.png',
-  },
 ]
 
 export default function PassportDemo({ isOpen }: { isOpen: boolean }) {
@@ -66,7 +61,7 @@ export default function PassportDemo({ isOpen }: { isOpen: boolean }) {
                   <p className='text-subtitle4 text-text-secondary lg:text-subtitle3'>
                     Step {index + 1}/{steps.length}
                   </p>
-                  <p className='text-subtitle2 text-text-primary lg:text-subtitle1'>
+                  <p className='text-subtitle3 text-text-primary lg:text-subtitle2'>
                     {title}
                   </p>
                 </div>

src/ui/Modal.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { HTMLAttributes } from 'react'
+import { HTMLAttributes, useCallback, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 
 import CloseIcon from '@/assets/icons/close-icon.svg'
@@ -12,6 +12,27 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 }
 
 export default function Modal({ isOpen, onClose, children, ...rest }: Props) {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    },
+    [onClose],
+  )
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown)
+    } else {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isOpen, handleKeyDown])
+
   return (
     <ClientOnly>
       {() =>