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,46 @@
+import { cn } from '@venusprotocol/ui';
+import type { To } from 'react-router';
+
+import { ButtonWrapper } from 'components';
+import { Link } from 'containers/Link';
+
+export interface BannerProps {
+  title: string;
+  description: string;
+  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/BoostBanner/index.tsx

@@ -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/rocket.png

@@ -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>
+  );
+};

apps/evm/src/components/AdCarousel/IsolatedPoolsSunsetBanner/background.jpg

@@ -0,0 +1,32 @@
+import { useTranslation } from 'libs/translations';
+import { Banner } from '../Banner';
+import backgroundIllustrationJpg from './background.jpg';
+import coinIllustrationSrc from './coin.png';
+
+const LEARN_MORE_URL = 'https://probable.markets';
+
+export const ProbableBanner: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Banner
+      title={t('adCarousel.probableBanner.title')}
+      description={t('adCarousel.probableBanner.description')}
+      buttonLabel={t('adCarousel.probableBanner.buttonLabel')}
+      className="bg-black"
+      href={LEARN_MORE_URL}
+    >
+      <img
+        className="absolute max-w-none left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] size-full object-cover"
+        src={backgroundIllustrationJpg}
+        alt={t('adCarousel.probableBanner.backgroundIllustration.altText')}
+      />
+
+      <img
+        className="absolute max-w-none w-55 bottom-0 -right-6 @min-[357px]:w-80 @min-[357px]:-right-11 @min-[576px]:w-57 @min-[576px]:right-2 @min-[896px]:right-30 @min-[1120px]:w-66 @min-[1120px]:right-10"
+        src={coinIllustrationSrc}
+        alt={t('adCarousel.probableBanner.coinIllustration.altText')}
+      />
+    </Banner>
+  );
+};