diff --git a/components/ExaCard/index.tsx b/components/ExaCard/index.tsx
new file mode 100644
index 000000000..b433bacf6
--- /dev/null
+++ b/components/ExaCard/index.tsx
@@ -0,0 +1,103 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Box, Button, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { ChevronRight, Close } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+
+export default function EXACard() {
+ const { t } = useTranslation();
+ const [open, setOpen] = useState(true);
+ const { breakpoints } = useTheme();
+ const isMobile = useMediaQuery(breakpoints.down('sm'));
+
+ const handleClose = useCallback(() => {
+ if (!window) return;
+ setOpen(false);
+ window.localStorage.setItem('exaCard', 'closed');
+ }, []);
+
+ useEffect(() => {
+ if (!window) return;
+ const exaCard = window.localStorage.getItem('exaCard');
+ if (exaCard === 'closed') {
+ setOpen(false);
+ }
+ }, []);
+
+ if (!open) return null;
+
+ return (
+
+ *': {
+ opacity: 1,
+ },
+ '&:hover': {
+ backgroundColor: 'black',
+ },
+ transition: 'background-color 0.3s',
+ }}
+ position="relative"
+ >
+
+
+
+
+ {t('The first onchain debit & credit card.')}
+
+
+
+ {t('Join the waitlist')}
+
+
+
+
+
+
+ );
+}
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
index bcda83f93..f1955b8ff 100644
--- a/components/Footer/index.tsx
+++ b/components/Footer/index.tsx
@@ -26,6 +26,7 @@ const Footer = () => {
padding: '16px 0px',
color: 'figma.grey.300',
fontWeight: '500',
+ mt: 8,
}}
>
Exactly Protocol © {date.getFullYear()}
diff --git a/i18n/es/translation.json b/i18n/es/translation.json
index 06d9b6360..b8825c145 100644
--- a/i18n/es/translation.json
+++ b/i18n/es/translation.json
@@ -630,5 +630,7 @@
"For optimal benefits, consider selecting a pool with a longer remaining duration.": "Para obtener beneficios óptimos, considera seleccionar un pool con una duración restante más larga.",
"Total": "Total",
" In {{installments}} installments": "En {{installments}} cuotas",
- "Repay Amount": "Monto a Pagar"
+ "Repay Amount": "Monto a Pagar",
+ "Join the waitlist": "Únete a la lista de espera",
+ "The first onchain debit & credit card.": "La primer tarjeta de débito y crédito onchain."
}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 94047ed75..23e942579 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -30,6 +30,7 @@ import NewsModal from 'components/NewsModal';
import GetEXAModal from 'components/GetEXA/ModalWrapper';
import MaturityDateReminder from '../components/MaturityDateReminder';
import NewIRMBanner from '../components/NewIRMBanner';
+import EXACard from 'components/ExaCard';
dayjs.extend(isToday);
const { maxWidth } = globals;
@@ -108,6 +109,7 @@ export default function App({ Component, pageProps, router }: AppProps) {
+
diff --git a/public/exa-card.svg b/public/exa-card.svg
new file mode 100644
index 000000000..a20bf0608
--- /dev/null
+++ b/public/exa-card.svg
@@ -0,0 +1,9 @@
+