app: simplify the Home page

app/src/components/home/HomePage.tsx

@@ -1,20 +1,9 @@
 import React, { useCallback, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import styled from '@emotion/styled';
-import DashUX from 'assets/images/home_dash_ss.png';
-import LoopUX from 'assets/images/home_loop_ss.png';
-import { ReactComponent as Youtube } from 'assets/images/youtube.svg';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
-import {
-  BoltOutlined,
-  Button,
-  Column,
-  Display,
-  Paragraph,
-  QRCode,
-  Row,
-} from 'components/base';
+import { BoltOutlined, Button, Display, Paragraph, QRCode } from 'components/base';
 import PurpleButton from 'components/connect/PurpleButton';
 import QRCodeModal from 'components/connect/QRCodeModal';
 import YoutubeModal from './YoutubeModal';
@@ -29,20 +18,13 @@ const Styled = {
     padding: 8px 16px;
     margin-right: 24px;
   `,
-  YoutubeButton: styled(Button)`
+  /* a text button which sits inline at the end of the description paragraph */
+  LearnMoreButton: styled(Button)`
     font-family: ${props => props.theme.fonts.open.semiBold};
-    padding-left: 0;
-
-    svg {
-      margin-right: 16px;
-    }
-  `,
-  Column: styled(Column)`
-    max-width: 480px;
-  `,
-  Image: styled.img`
-    width: 100%;
-    margin-bottom: 24px;
+    line-height: inherit;
+    vertical-align: baseline;
+    padding: 0;
+    margin-left: 8px;
   `,
 };
 
@@ -59,13 +41,18 @@ const HomePage: React.FC = () => {
   const closeQRModal = useCallback(() => setQrUrl(''), []);
   const toggleVideoModal = useCallback(() => setShowVideo(v => !v), []);
 
-  const { Wrapper, PurpleButton, YoutubeButton, Column, Image } = Styled;
+  const { Wrapper, PurpleButton, LearnMoreButton } = Styled;
   return (
     <Wrapper>
       <Display semiBold space={16}>
         {l('pageTitle')}
       </Display>
-      <Paragraph space={32}>{l('connectDesc')}</Paragraph>
+      <Paragraph space={32}>
+        {l('connectDesc')}
+        <LearnMoreButton ghost borderless compact onClick={toggleVideoModal}>
+          {l('learnMore')}
+        </LearnMoreButton>
+      </Paragraph>
       <Paragraph space={40}>
         <PurpleButton onClick={sessionStore.connectToTerminalWeb}>
           <BoltOutlined />
@@ -76,33 +63,6 @@ const HomePage: React.FC = () => {
           {l('connectQrBtn')}
         </PurpleButton>
       </Paragraph>
-      <Paragraph space={32}>{l('learnDesc')}</Paragraph>
-      <Paragraph space={40}>
-        <YoutubeButton ghost borderless compact onClick={toggleVideoModal}>
-          <Youtube />
-          Learn More
-        </YoutubeButton>
-      </Paragraph>
-      <Display semiBold space={16}>
-        {l('whatsDiff')}
-      </Display>
-      <Paragraph space={24}>{l('diffDesc')}</Paragraph>
-      <Row>
-        <Column>
-          <Image src={LoopUX} alt={l('loopTitle')} />
-          <Paragraph semiBold space={8}>
-            {l('loopTitle')}
-          </Paragraph>
-          <Paragraph muted>{l('loopDesc')}</Paragraph>
-        </Column>
-        <Column>
-          <Image src={DashUX} alt={l('dashTitle')} />
-          <Paragraph semiBold space={8}>
-            {l('dashTitle')}
-          </Paragraph>
-          <Paragraph muted>{l('dashDesc')}</Paragraph>
-        </Column>
-      </Row>
       <QRCodeModal url={qrUrl} visible={!!qrUrl} onClose={closeQRModal} />
       <YoutubeModal
         videoId="5kH1ByxjkTM"

app/src/i18n/locales/en-US.json

@@ -101,17 +101,10 @@
   "cmps.connect.QRCodeModal.title": "LNC QR",
   "cmps.connect.QRCodeModal.desc": "Scan to connect to Terminal from your mobile phone.",
   "cmps.home.HomePage.pageTitle": "Home",
-  "cmps.home.HomePage.connectDesc": "Securely and privately connect your node to Terminal on the web via the link below. For mobile, generate a QR code to connect.",
+  "cmps.home.HomePage.connectDesc": "Securely and privately connect your node to Terminal on the web over Lightning Node Connect, or with a QR code from mobile.",
   "cmps.home.HomePage.connectTerminalBtn": "Connect to Terminal",
   "cmps.home.HomePage.connectQrBtn": "Connect with QR",
-  "cmps.home.HomePage.learnDesc": "The connection to your node occurs through the Lightning Node Connect protocol.",
   "cmps.home.HomePage.learnMore": "Learn More",
-  "cmps.home.HomePage.whatsDiff": "What's different?",
-  "cmps.home.HomePage.diffDesc": "In the web based Terminal experience, you can expect new features like:",
-  "cmps.home.HomePage.loopTitle": "Improved Lightning Loop UX",
-  "cmps.home.HomePage.loopDesc": "Visually focused loop experience with Autoloop built-in.",
-  "cmps.home.HomePage.dashTitle": "Lightning Terminal Dashboard",
-  "cmps.home.HomePage.dashDesc": "Easily monitor routing activity and manage your channels through the dashboard.",
   "cmps.home.YoutubeModal.title": "Get Connected",
   "cmps.home.YoutubeModal.desc": "Get Connected with Lightning Node Connect",
   "cmps.history.HistoryPage.backText": "Lightning Loop",