feat: modified landing page

src/app/components/mint-unmint/components/landing-page/components/landing-page.layout.tsx

@@ -0,0 +1,10 @@
+import { VStack } from '@chakra-ui/react';
+import { HasChildren } from '@models/has-children';
+
+export function LandingPageLayout({ children }: HasChildren): React.JSX.Element {
+  return (
+    <VStack w={'65%'} spacing={'0px'}>
+      {children}
+    </VStack>
+  );
+}

src/app/components/mint-unmint/components/landing-page/components/setup-information/setup-informatio.tsx

@@ -0,0 +1,29 @@
+import { Stack, Text, VStack } from '@chakra-ui/react';
+
+import { SetupInformationWalletRequirement } from './components/setup-information-wallet-requirement';
+
+export function SetupInformation(): React.JSX.Element {
+  return (
+    <Stack w={'50%'} align={'center'}>
+      <VStack align={'start'} spacing={'25px'}>
+        <Text color={'white'} fontSize={'lg'} fontWeight={600}>
+          What you will need:
+        </Text>
+        <SetupInformationWalletRequirement
+          logo={'/images/logos/ethereum-logo.svg'}
+          color={'accent.cyan.01'}
+          walletName={'Metamask Wallet'}
+          requirement={'+ETH (for fee)'}
+          url={'https://metamask.io/'}
+        />
+        <SetupInformationWalletRequirement
+          logo={'/images/logos/bitcoin-logo.svg'}
+          color={'accent.orange.01'}
+          walletName={'Leather Wallet'}
+          requirement={'+BTC (for lock)'}
+          url={'https://leather.io/'}
+        />
+      </VStack>
+    </Stack>
+  );
+}

src/app/components/mint-unmint/components/landing-page/components/welcome-stack.tsx

@@ -0,0 +1,33 @@
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+
+import { Button, HStack, Image, Text, VStack } from '@chakra-ui/react';
+import { modalActions } from '@store/slices/modal/modal.actions';
+
+export function WelcomeStack(): React.JSX.Element {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const setupText = 'Ready to\n mint dlcBTC?';
+
+  function onConnectWalletClick(): void {
+    dispatch(modalActions.toggleSelectWalletModalVisibility());
+  }
+
+  return (
+    <HStack spacing={'100px'} align={'start'}>
+      <VStack alignItems={'start'} spacing={'25px'}>
+        <Text variant={'welcome'} alignContent={'start'}>
+          {setupText}
+        </Text>
+        <Text variant={'navigate'} onClick={() => navigate('/how-it-works')}>
+          How it works?
+        </Text>
+        <Button variant={'account'} onClick={onConnectWalletClick}>
+          Connect Wallet
+        </Button>
+      </VStack>
+      <Image src={'/images/dlc-btc-mint-visualization.png'} h={'295px'} />
+    </HStack>
+  );
+}

src/app/components/mint-unmint/components/landing-page/landing-page.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Divider, HStack } from '@chakra-ui/react';
+
+import { ProtocolSummaryStack } from '../protocol-summary-stack/protocol-summary-stack';
+import { LandingPageLayout } from './components/landing-page.layout';
+import { SetupInformation } from './components/setup-information/setup-informatio';
+import { WelcomeStack } from './components/welcome-stack';
+
+export function LandingPage(): React.JSX.Element {
+  return (
+    <LandingPageLayout>
+      <WelcomeStack />
+      <Divider orientation={'horizontal'} h={'35px'} variant={'thick'} />
+      <HStack w={'100%'} align={'start'} pt={'50px'}>
+        <SetupInformation />
+        <Divider orientation={'vertical'} w={'35px'} h={'205px'} variant={'thick'} />
+        <ProtocolSummaryStack />
+      </HStack>
+    </LandingPageLayout>
+  );
+}

src/app/components/mint-unmint/components/protocol-summary-stack/components/protocol-summary-stack.layout.tsx

@@ -3,7 +3,7 @@ import { HasChildren } from '@models/has-children';
 
 export function ProtocolSummaryStackLayout({ children }: HasChildren): React.JSX.Element {
   return (
-    <HStack py={'25px'} alignContent={'start'} h={'auto'} w={'100%'} spacing={'25px'}>
+    <HStack w={'50%'} spacing={'25px'}>
       {children}
     </HStack>
   );

src/app/components/mint-unmint/components/protocol-summary-stack/protocol-summary-stack.tsx

@@ -12,7 +12,7 @@ export function ProtocolSummaryStack(): React.JSX.Element {
   const bitcoinPrice = blockchainContext?.bitcoin.bitcoinPrice;
   return (
     <ProtocolSummaryStackLayout>
-      <VStack alignItems={'start'} h={'250px'} w={'50%'} spacing={'15px'}>
+      <VStack alignItems={'start'}>
         <Text alignContent={'start'} color={'white'} fontSize={'lg'}>
           TVL
         </Text>
@@ -29,7 +29,6 @@ export function ProtocolSummaryStack(): React.JSX.Element {
           </Skeleton>
         </VStack>
       </VStack>
-      {/* <ProtocolHistory /> */}
     </ProtocolSummaryStackLayout>
   );
 }

src/app/components/mint-unmint/mint-unmint.tsx

@@ -1,23 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import {
-  Divider,
-  Spacer,
-  Tab,
-  TabIndicator,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from '@chakra-ui/react';
+import { Spacer, Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
 import { RootState } from '@store/index';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 
 import { MintUnmintLayout } from './components/mint-unmint.layout';
 import { Mint } from './components/mint/mint';
-import { ProtocolSummaryStack } from './components/protocol-summary-stack/protocol-summary-stack';
-import { SetupInformationStack } from './components/setup-information-stack/setup-information-stack';
 import { Unmint } from './components/unmint/unmint';
 
 interface MintUnmintContainerProps {
@@ -53,15 +42,7 @@ export function MintUnmint({ address }: MintUnmintContainerProps): React.JSX.Ele
         <Spacer />
         <TabPanels>
           <TabPanel>
-            {address ? (
-              <Mint />
-            ) : (
-              <>
-                <SetupInformationStack />
-                <Divider orientation={'horizontal'} h={'35px'} variant={'thick'} />
-                <ProtocolSummaryStack />
-              </>
-            )}
+            <Mint />
           </TabPanel>
           <TabPanel>
             <Unmint />

src/app/pages/dashboard/dashboard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
+import { LandingPage } from '@components/mint-unmint/components/landing-page/landing-page';
 import { MintUnmint } from '@components/mint-unmint/mint-unmint';
 import { MyVaultsSmall } from '@components/my-vaults-small/my-vaults-small';
 import { PageLayout } from '@pages/components/page.layout';
@@ -11,8 +12,14 @@ export function Dashboard(): React.JSX.Element {
 
   return (
     <PageLayout>
-      <MintUnmint address={address} />
-      <MyVaultsSmall address={address} />
+      {address ? (
+        <>
+          <MintUnmint address={address} />
+          <MyVaultsSmall address={address} />
+        </>
+      ) : (
+        <LandingPage />
+      )}
     </PageLayout>
   );
 }