✨ home: add link to axa app waitlist

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 (
+    <Box position="fixed" bottom={0} left={0} px={3} pb={3}>
+      <Box
+        display="flex"
+        gap={3}
+        height={100}
+        alignItems="center"
+        borderRadius={1}
+        pl={1}
+        pr={2}
+        width={isMobile ? '100%' : '312px'}
+        bgcolor={isMobile ? 'black' : 'transparent'}
+        sx={{
+          '&:hover > *': {
+            opacity: 1,
+          },
+          '&:hover': {
+            backgroundColor: 'black',
+          },
+          transition: 'background-color 0.3s',
+        }}
+        position="relative"
+      >
+        <Image src="/exa-card.svg" width={108} height={90} alt="exa card" />
+        <Box
+          sx={
+            isMobile
+              ? {}
+              : {
+                  opacity: 0,
+                  transition: 'opacity 0.3s',
+                }
+          }
+        >
+          <Button
+            variant="outlined"
+            onClick={handleClose}
+            sx={{
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              bgcolor: 'white',
+              width: 16,
+              minWidth: 16,
+              height: 16,
+              p: '10px',
+              color: 'black',
+              border: '2px solid black',
+              '&:hover': {
+                text: 'white',
+                opacity: 1,
+                bgcolor: 'white',
+                border: '2px solid black',
+              },
+              mr: '-8px',
+              mt: '-8px',
+            }}
+          >
+            <Close fontSize={'small'} />
+          </Button>
+          <Typography fontSize={16} fontWeight={700} color="white">
+            {t('The first onchain debit & credit card.')}
+          </Typography>
+          <Link href="https://exactly.app" target="_blank">
+            <Box display="flex" alignItems="center" color="#12A594" fontSize={14} fontWeight={500}>
+              {t('Join the waitlist')}
+              <ChevronRight />
+            </Box>
+          </Link>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

components/Footer/index.tsx

@@ -26,6 +26,7 @@ const Footer = () => {
             padding: '16px 0px',
             color: 'figma.grey.300',
             fontWeight: '500',
+            mt: 8,
           }}
         >
           <Typography fontSize="0.85em">Exactly Protocol © {date.getFullYear()}</Typography>

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."
 }

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) {
                 </Box>
                 <Modals />
                 <MaturityDateReminder />
+                <EXACard />
               </AccountDataProvider>
             </GlobalErrorProvider>
           </ModalContextProvider>