feat: add Markets tab to Dashboard page

Author: therealemjy

.changeset/eager-ants-laugh.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": minor
+---
+
+add Markets tab to Dashboard page

apps/evm/src/components/AdCarousel/Banner/index.tsx

@@ -0,0 +1,45 @@
+import { ButtonWrapper, cn } from '@venusprotocol/ui';
+import type { To } from 'react-router';
+
+import { Link } from 'containers/Link';
+
+export interface BannerProps {
+  title: string;
+  description: React.ReactNode;
+  buttonLabel: string;
+  children?: React.ReactNode;
+  to?: To;
+  href?: string;
+  className?: string;
+}
+
+export const Banner: React.FC<BannerProps> = ({
+  className,
+  title,
+  description,
+  buttonLabel,
+  to,
+  href,
+  children,
+}) => (
+  <div
+    className={cn(
+      'relative rounded-2xl overflow-hidden p-4 h-63 @min-[357px]:p-6 @min-[357px]:h-100 @min-[576px]:h-45 @min-[576px]:items-center @min-[1120px]:h-50',
+      className,
+    )}
+  >
+    <div className="absolute size-full inset-0">{children}</div>
+
+    <div className="relative max-w-64 @min-[357px]:max-w-86 @min-[357px]:pr-7 @min-[576px]:max-w-none">
+      <p className="text-p2s mb-2">{title}</p>
+
+      <p className="mb-3 text-light-grey @min-[357px]:mb-6 ">{description}</p>
+
+      <ButtonWrapper size="xs" asChild>
+        <Link to={to} href={href} noStyle>
+          {buttonLabel}
+        </Link>
+      </ButtonWrapper>
+    </div>
+  </div>
+);

apps/evm/src/components/AdCarousel/BinanceWalletBanner/index.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from 'libs/translations';
+import { Banner } from '../Banner';
+import phoneIllustrationSrc from './phoneIllustration.png';
+
+const BINANCE_WALLET_URL = 'https://binance.onelink.me/mL1z/vpktofz8?af_force_deeplink=true';
+
+export const BinanceWalletBanner: React.FC = () => {
+  const { t, Trans } = useTranslation();
+
+  return (
+    <Banner
+      title={t('adCarousel.binanceWalletBanner.title')}
+      description={
+        <Trans
+          i18nKey="adCarousel.binanceWalletBanner.description"
+          components={{
+            WhiteText: <span className="text-white" />,
+          }}
+        />
+      }
+      buttonLabel={t('adCarousel.binanceWalletBanner.buttonLabel')}
+      className="bg-[linear-gradient(142deg,#00193A_20%,#0E3FB7_75%,#001E68_95%)]"
+      href={BINANCE_WALLET_URL}
+    >
+      <img
+        className="absolute w-80 max-w-none -bottom-10 -right-20 -rotate-15 @min-[357px]:w-120 @min-[357px]:-rotate-12 @min-[357px]:-bottom-9 @min-[357px]:right-auto @min-[357px]:left-10 @min-[409px]:-rotate-15 @min-[409px]:-bottom-5 @min-[409px]:left-12 @min-[576px]:w-80 @min-[576px]:-bottom-10 @min-[576px]:left-auto @min-[576px]:-right-4 @min-[576px]:-rotate-22 @min-[896px]:w-120 @min-[896px]:-rotate-14 @min-[896px]:-bottom-19 @min-[896px]:right-20"
+        src={phoneIllustrationSrc}
+        alt={t('adCarousel.binanceWalletBanner.phoneIllustration.altText')}
+      />
+    </Banner>
+  );
+};

apps/evm/src/components/AdCarousel/BinanceWalletBanner/phoneIllustration.png

@@ -0,0 +1,26 @@
+import { VENUS_DOC_URL } from 'constants/production';
+import { useTranslation } from 'libs/translations';
+import { Banner } from '../Banner';
+import rocketIllustrationSrc from './rocket.png';
+
+const LEARN_MORE_URL = `${VENUS_DOC_URL}/guides/leveraged-positions`;
+
+export const BoostBanner: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Banner
+      title={t('adCarousel.boostBanner.title')}
+      description={t('adCarousel.boostBanner.description')}
+      buttonLabel={t('adCarousel.boostBanner.buttonLabel')}
+      className="bg-[linear-gradient(142deg,#00193A_20%,#0E3FB7_75%,#001E68_95%)]"
+      href={LEARN_MORE_URL}
+    >
+      <img
+        className="absolute size-112 max-w-none -bottom-45 -right-35 @min-[357px]:size-125 @min-[357px]:-bottom-33 @min-[357px]:right-auto @min-[357px]:-left-10 @min-[409px]:left-5 @min-[409px]:-bottom-44 @min-[576px]:h-119 @min-[576px]:-bottom-57 @min-[576px]:left-auto @min-[576px]:-right-12 @min-[896px]:size-160 @min-[896px]:rotate-12 @min-[896px]:-bottom-79 @min-[896px]:left-44 @min-[1120px]:size-194 @min-[1120px]:rotate-16 @min-[1120px]:-bottom-94 @min-[1120px]:left-80"
+        src={rocketIllustrationSrc}
+        alt={t('adCarousel.boostBanner.rocketIllustration.altText')}
+      />
+    </Banner>
+  );
+};

apps/evm/src/components/AdCarousel/BoostBanner/index.tsx

@@ -0,0 +1,32 @@
+import { VENUS_COMMUNITY_URL } from 'constants/production';
+import { useTranslation } from 'libs/translations';
+import { Banner } from '../Banner';
+import backgroundIllustrationJpg from './background.jpg';
+import coinsIllustrationSrc from './coins.png';
+
+const LEARN_MORE_URL = `${VENUS_COMMUNITY_URL}/t/isolated-pools-sunset/5603`;
+
+export const IsolatedPoolsSunsetBanner: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Banner
+      title={t('adCarousel.isolatedPoolsSunsetBanner.title')}
+      description={t('adCarousel.isolatedPoolsSunsetBanner.description')}
+      buttonLabel={t('adCarousel.isolatedPoolsSunsetBanner.buttonLabel')}
+      href={LEARN_MORE_URL}
+    >
+      <img
+        className="absolute max-w-none size-130 top-0 left-[50%] translate-x-[-50%] @min-[357px]:size-180 @min-[357px]:-top-20 @min-[576px]:top-[50%] @min-[576px]:translate-y-[-30%] @min-[576px]:size-[200%]"
+        src={backgroundIllustrationJpg}
+        alt={t('adCarousel.isolatedPoolsSunsetBanner.backgroundIllustration.altText')}
+      />
+
+      <img
+        className="absolute max-w-none size-62 -bottom-18 -right-10 @min-[357px]:size-97 @min-[357px]:-bottom-20 @min-[357px]:-right-16 @min-[576px]:size-80 @min-[576px]:-bottom-20 @min-[576px]:right-auto @min-[576px]:left-75 @min-[686px]:size-88 @min-[686px]:left-auto @min-[686px]:right-5 @min-[896px]:size-116 @min-[896px]:-bottom-33"
+        src={coinsIllustrationSrc}
+        alt={t('adCarousel.isolatedPoolsSunsetBanner.coinsIllustration.altText')}
+      />
+    </Banner>
+  );
+};