chore(Liquid Staking): UI improvement (#6777)

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!--
copilot:all
-->
### <samp>🤖 Generated by Copilot at be11d98</samp>

### Summary
🎨🌐🗂️

<!--
1. 🎨 - This emoji can be used to indicate a change in the UI design or
appearance, such as changing the position or color of an element.
2. 🌐 - This emoji can be used to indicate a change related to web or
internet features, such as adding or modifying links, domains, or
protocols.
3. 🗂️ - This emoji can be used to indicate a change related to data or
information organization, such as adding or updating categories, labels,
or indexes.
-->
Updated some UI components in the LiquidStaking view to use
`@pancakeswap/uikit` and improve the layout of tooltips and external
links.

> _`QuestionHelper` moves_
> _Tooltip below the icon_
> _No more header clash_

### Walkthrough
* Position the tooltip of the question helper below the icon in the
exchange rate title
([link](https://github.com/pancakeswap/pancake-frontend/pull/6777/files?diff=unified&w=0#diff-c61fab6e8b22b7dd64903712308e8a933a129b2d0d9633388ae172b1fc649225L12-R12))
* Use `LinkExternal` component for external links in the FAQs and add a
period at the end of the link text
([link](https://github.com/pancakeswap/pancake-frontend/pull/6777/files?diff=unified&w=0#diff-ee0daf34353aca5800b193db3d7c1c714fd8067aa187f3ee6e88c9f46a928e7dL2-R2),
[link](https://github.com/pancakeswap/pancake-frontend/pull/6777/files?diff=unified&w=0#diff-ee0daf34353aca5800b193db3d7c1c714fd8067aa187f3ee6e88c9f46a928e7dL20-R22),
[link](https://github.com/pancakeswap/pancake-frontend/pull/6777/files?diff=unified&w=0#diff-ee0daf34353aca5800b193db3d7c1c714fd8067aa187f3ee6e88c9f46a928e7dL33-R38))


Before:
<img width="359" alt="image"
src="https://user-images.githubusercontent.com/109973128/235282654-729ebade-034f-4399-9d3f-0a65afc59ff3.png">

After:
<img width="356" alt="image"
src="https://user-images.githubusercontent.com/109973128/235282675-c6a12ae5-4a7f-4f37-af85-b5fec9d0395f.png">

Author: Woody810

apps/web/src/views/LiquidStaking/components/ExchangeRateTitle.tsx

@@ -9,7 +9,7 @@ export function ExchangeRateTitle() {
   return (
     <Flex>
       <Text color="textSubtle">{t('Exchange Rate')}</Text>
-      <QuestionHelper ml="4px" text={tooltipMsg} size="20px" />
+      <QuestionHelper ml="4px" text={tooltipMsg} size="20px" placement="bottom" />
     </Flex>
   )
 }

apps/web/src/views/LiquidStaking/components/FAQs.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from '@pancakeswap/localization'
-import { Card, CardHeader, Heading, CardBody, Text, Link } from '@pancakeswap/uikit'
+import { Card, CardHeader, Heading, CardBody, Text, Link, LinkExternal } from '@pancakeswap/uikit'
 
 import FoldableText from 'components/FoldableSection/FoldableText'
 
@@ -17,9 +17,9 @@ const config = (t) => [
         {t(
           'Post-merge, the APR is hovering at around 3-5% for Ethereum validators. For WBETH, the daily APR is published by the Binance Earn team',
         )}{' '}
-        <Link style={{ display: 'inline' }} href="https://www.binance.com/en/eth2">
-          {t('here')}
-        </Link>
+        <LinkExternal style={{ display: 'inline-flex' }} href="https://www.binance.com/en/eth2">
+          {t('here.')}
+        </LinkExternal>
       </>
     ),
   },
@@ -30,12 +30,12 @@ const config = (t) => [
         {t(
           'WBETH is the wrapped version of BETH. Unlike BETH, WBETH can be obtained and utilized on-chain. For a side-by-side comparison,',
         )}{' '}
-        <Link
-          style={{ display: 'inline' }}
+        <LinkExternal
+          style={{ display: 'inline-flex' }}
           href="https://www.binance.com/en/support/announcement/binance-introduces-wrapped-beacon-eth-wbeth-on-eth-staking-a1197f34d832445db41654ad01f56b4d"
         >
           {t('visit this page.')}
-        </Link>
+        </LinkExternal>
       </>
     ),
   },