diff --git a/src/app/components/how-it-works/components/bottom-section.tsx b/src/app/components/how-it-works/components/bottom-section.tsx
index 97ad5a26..4f427903 100644
--- a/src/app/components/how-it-works/components/bottom-section.tsx
+++ b/src/app/components/how-it-works/components/bottom-section.tsx
@@ -1,37 +1,107 @@
+import { Box, Button, HStack, Text, VStack } from '@chakra-ui/react';
+
import { CustomCard } from './custom-card';
import { FlowStep } from './flow-step';
export function BottomSection(): React.JSX.Element {
return (
-
- {
- <>
-
-
-
- >
- }
-
+
+
+ {
+ <>
+ How to Mint dlcBTC
+
+ Select an amount of Bitcoin you would like to lock and confirm it in your{' '}
+
+ Ethereum Wallet.{' '}
+
+ You will receive your deposit token dlcBTC to the same address.
+
+ }
+ hasBadge={false}
+ />
+
+ Confirm the transaction in your{' '}
+
+ Bitcoin Wallet
+ {' '}
+ which will lock your Bitcoin on-chain.
+
+ }
+ hasBadge={false}
+ />
+
+ Wait for Bitcoin to get locked on chain
+
+ (~1 hour).{' '}
+
+ After confirmation dlcBTC tokens will automatically appear in your{' '}
+
+ Ethereum Wallet.{' '}
+ {' '}
+ You can use dlcBTC in //TODO: this variant is not good here, the fontSize is too
+ big
+
+ supported DeFi protocols
+ {' '}
+ for lending, yield farming, staking and more.
+
+ }
+ hasBadge={false}
+ />
+
+
+ >
+ }
+
+
+
+ How to Unmint dlcBTC
+
+ Select the vault you would like to unmint. After a successful unmint you will
+ receive BTC in the same amount back to your wallet.
+
+ }
+ hasBadge={false}
+ />
+
+
+ }
+ >
+
+
+
+
);
}
diff --git a/src/app/components/how-it-works/components/custom-card.tsx b/src/app/components/how-it-works/components/custom-card.tsx
index b11177ba..d26ed4cd 100644
--- a/src/app/components/how-it-works/components/custom-card.tsx
+++ b/src/app/components/how-it-works/components/custom-card.tsx
@@ -19,7 +19,6 @@ export function CustomCard({
- {step}
+
+ {step}
{hasBadge ? (
- {title}
+ {title}
{badge}
) : (
- {title}
+ {title}
)}
- {content}
+ {content}
);
}
diff --git a/src/styles/text-theme.ts b/src/styles/text-theme.ts
index 8f973652..0bf9deb2 100644
--- a/src/styles/text-theme.ts
+++ b/src/styles/text-theme.ts
@@ -22,6 +22,24 @@ const navigate = defineStyle({
},
});
+const step = defineStyle({
+ color: 'accent.cyan.01',
+ fontSize: 'lg',
+ fontWeight: 'regular',
+});
+
+const title = defineStyle({
+ color: 'white',
+ fontSize: '2xl',
+ fontWeight: 'bold',
+});
+
+const subTitle = defineStyle({
+ color: 'white',
+ fontSize: 'lg',
+ fontWeight: 'bold',
+});
+
export const textTheme = defineStyleConfig({
- variants: { header, welcome, navigate },
+ variants: { header, welcome, navigate, step, title, subTitle },
});