From 05eba35d30ce1ee85b20b32a4906f625ef4f4801 Mon Sep 17 00:00:00 2001 From: sebipap Date: Wed, 24 Apr 2024 17:30:47 -0300 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20home:=20add=20link=20to=20axa=20app?= =?UTF-8?q?=20waitlist?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ExaCard/index.tsx | 103 +++++++++++++++++++++++++++++++++++ components/Footer/index.tsx | 1 + i18n/es/translation.json | 4 +- pages/_app.tsx | 2 + public/exa-card.svg | 9 +++ 5 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 components/ExaCard/index.tsx create mode 100644 public/exa-card.svg 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" + > + exa card + + + + {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 @@ + + + + + + + + +