SOV-3618: Add quick launch section

apps/frontend/src/app/5_pages/LandingPage/LandingPage.tsx

@@ -4,6 +4,7 @@ import { t } from 'i18next';
 import { Helmet } from 'react-helmet-async';
 
 import { translations } from '../../../locales/i18n';
+import { QuickLaunch } from './components/QuickLaunch/QuickLaunch';
 
 const pageTranslations = translations.landingPage;
 
@@ -24,9 +25,7 @@ const LandingPage: FC = () => {
           <div className="min-h-40 flex justify-end">Banner section</div>
         </div>
 
-        <div className="bg-gray-80 rounded min-h-72 p-6 mb-10">
-          Quick launch section
-        </div>
+        <QuickLaunch />
 
         <div className="grid xl:grid-cols-2 mb-10">
           <div>How to get started section</div>

apps/frontend/src/app/5_pages/LandingPage/components/QuickLaunch/QuickLaunch.tsx

@@ -0,0 +1,97 @@
+import React, { FC, useMemo } from 'react';
+
+import { t } from 'i18next';
+
+import { SupportedTokens } from '@sovryn/contracts';
+import { Button, ButtonStyle, Paragraph } from '@sovryn/ui';
+
+import borrowBg from '../../../../../assets/images/QuickLaunch/borrow_bg.svg';
+import earnBg from '../../../../../assets/images/QuickLaunch/earn_bg.svg';
+import stakeBg from '../../../../../assets/images/QuickLaunch/stake_bg.svg';
+import { translations } from '../../../../../locales/i18n';
+import { useGetNextSupplyInterestRate } from '../../../LendPage/hooks/useGetNextSupplyInterestRate';
+import { useGetReturnRate } from '../../../MarketMakingPage/hooks/useGetReturnRate';
+import { AmmLiquidityPoolDictionary } from '../../../MarketMakingPage/utils/AmmLiquidityPoolDictionary';
+import { useGetStakingStatistics } from '../../../StakePage/components/StakingStatistics/hooks/useGetStakingStatistics';
+
+const pageTranslations = translations.landingPage;
+const ammPools = AmmLiquidityPoolDictionary.list();
+
+export const QuickLaunch: FC = () => {
+  const sovPool = useMemo(
+    () =>
+      ammPools.find(pool => pool.assetA === SupportedTokens.sov) || ammPools[0],
+    [],
+  );
+  const { maxStakingApr } = useGetStakingStatistics();
+  const { interestRate } = useGetNextSupplyInterestRate(SupportedTokens.dllr);
+  const { returnRates } = useGetReturnRate(sovPool.converter);
+
+  const options = [
+    {
+      title: t(pageTranslations.quickLaunch.stake.title, {
+        amount: maxStakingApr || 0,
+      }),
+      description: t(pageTranslations.quickLaunch.stake.description),
+      action: t(pageTranslations.quickLaunch.stake.action),
+      url: '/earn/staking',
+      backgroundImage: stakeBg,
+    },
+    {
+      title: t(pageTranslations.quickLaunch.earn.title, {
+        amount: Number(returnRates.afterRewards).toFixed(2),
+      }),
+      description: t(pageTranslations.quickLaunch.earn.description),
+      action: t(pageTranslations.quickLaunch.earn.action),
+      url: '/earn/market-making',
+      backgroundImage: earnBg,
+    },
+    {
+      title: t(pageTranslations.quickLaunch.lend.title, {
+        amount: Number(interestRate).toFixed(2),
+      }),
+      description: t(pageTranslations.quickLaunch.lend.description),
+      action: t(pageTranslations.quickLaunch.lend.action),
+      url: '/earn/lend',
+      backgroundImage: earnBg,
+    },
+    {
+      title: t(pageTranslations.quickLaunch.borrow.title),
+      description: t(pageTranslations.quickLaunch.borrow.description),
+      action: t(pageTranslations.quickLaunch.borrow.action),
+      url: '/borrow/fixed-interest',
+      backgroundImage: borrowBg,
+    },
+  ];
+
+  return (
+    <div className="bg-gray-80 rounded min-h-72 md:p-6 p-4 mb-10 grid md:grid-cols-2 xl:grid-cols-4 md:gap-6 gap-4">
+      {options.map((option, index) => (
+        <div
+          key={index}
+          className="relative p-4 md:p-6 bg-gray-70 rounded flex flex-col md:items-start justify-end md:min-h-60 min-h-40"
+        >
+          <img
+            src={option.backgroundImage}
+            alt={option.title}
+            className="absolute top-0 right-0 md:max-w-none max-w-14"
+          />
+          <Paragraph
+            className="mb-6 font-medium text-sm xl:max-w-36 xl:pr-0 pr-12"
+            children={option.title}
+          />
+          <Paragraph
+            className="mb-4 md:mb-6 font-medium xl:pr-0 pr-12"
+            children={option.description}
+          />
+          <Button
+            className="w-full sm:w-auto"
+            text={option.action}
+            href={option.url}
+            style={ButtonStyle.secondary}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};