Merge pull request #3117 from near/landing-page-update

Landing page UX update

Author: hcho112

packages/frontend/src/components/common/Footer.js

@@ -93,6 +93,14 @@ const InnerContainer = styled.div`
     margin: 0 auto;
     justify-content: space-between;
     align-items: center;
+
+    @media(max-width: 1352px) {
+        padding: 0 64px;
+    }
+
+    @media(max-width: 991px) {
+        padding: 0 24px;
+    }
 `;
 
 const Footer = () => {

packages/frontend/src/components/landing/GuestLanding.js

@@ -1,14 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { Translate } from 'react-localize-redux';
-import {useSelector} from 'react-redux';
 
 import HereWalletIcon from '../../images/wallet-icons/here-wallet-icon.png';
 import MeteorWalletIcon from '../../images/wallet-icons/meteor-wallet-icon.png';
 import NearWalletIcon from '../../images/wallet-icons/near-wallet-icon.png';
 import NightlyWalletIcon from '../../images/wallet-icons/nightly-wallet-icon.png';
 import SenderWalletIcon from '../../images/wallet-icons/sender-wallet-icon.png';
 import WellDoneWalletIcon from '../../images/wallet-icons/welldone-wallet-icon.png';
-import {selectAvailableAccounts} from '../../redux/slices/availableAccounts';
 import FormButton from '../common/FormButton';
 import { WalletSelectorGetAWallet } from '../common/wallet_selector/WalletSelectorGetAWallet';
 import NavigationWrapperV2 from '../navigation/NavigationWrapperV2';
@@ -25,7 +23,6 @@ import {
 } from './GuestLanding.styles';
 
 export function GuestLanding({ history, accountFound, onTransfer  }) {
-    const availableAccounts = useSelector(selectAvailableAccounts);
 
     const [walletSelectorModal, setWalletSelectorModal] = useState();
     const [showModal, setShowModal] = useState();
@@ -158,7 +155,7 @@ export function GuestLanding({ history, accountFound, onTransfer  }) {
                     </InfoSection>
                     <CardsSection>
                         <CardContainer>
-                            <SingleCard href='https://app.mynearwallet.com' target='_blank' onClick={() => {
+                            <SingleCard href='https://mynearwallet.com' target='_blank' onClick={() => {
                                 recordWalletMigrationEvent('click', { element: { type: 'link', description: 'MyNearWallet Wallet' }});
                             }}>
                                 <img src={NearWalletIcon} alt="near-wallet-icon" />
@@ -193,7 +190,9 @@ export function GuestLanding({ history, accountFound, onTransfer  }) {
                                 <h3>Nightly Wallet</h3>
                                 <p><Translate id="landing.wallet.nightly" /></p>
                             </SingleCard>
-                            <SingleCard href="https://welldonestudio.io/">
+                            <SingleCard href="https://welldonestudio.io/" target="_blank"  onClick={() => {
+                                recordWalletMigrationEvent('click', { element: { type: 'link', description: 'WELLDONE Wallet' }});
+                            }}>
                                 <img src={WellDoneWalletIcon} alt="wellDone-wallet-icon" />
                                 <h3>WELLDONE Wallet</h3>
                                 <p><Translate id="landing.wallet.wellDone" /></p>
@@ -208,16 +207,7 @@ export function GuestLanding({ history, accountFound, onTransfer  }) {
                         <TransferSectionWrapper>
                             <div>
                                 <h4>
-                                    {availableAccounts.length === 1 ? (
-                                        <Translate id="landing.transfer.titleSingular"
-                                            data={{ accountCount: availableAccounts.length }}
-                                        />
-                                    ) : (
-                                        <Translate
-                                            id="landing.transfer.titlePlural"
-                                            data={{ accountCount: availableAccounts.length }}
-                                        />
-                                    )}
+                                    <Translate id="landing.transfer.title" />
                                 </h4>
                                 <p><Translate id="landing.transfer.description" /></p>
                             </div>

packages/frontend/src/components/landing/GuestLanding.styles.js

@@ -9,6 +9,14 @@ export const StyledContainer = styled.div`
         max-width: 1224px;
         position: relative;
 
+        @media (max-width: 1352px) {
+            padding: 0 64px;
+        }
+
+        @media (max-width: 991px) {
+            padding: 0 24px;
+        }
+
         @media (max-width: 767px) {
             margin: 0;
             overflow: hidden;
@@ -229,6 +237,13 @@ export const DefaultContainer = styled.div`
     max-width: 1224px;
     margin: 0 auto;
     position: relative;
+    @media (max-width: 1352px) {
+        padding: 0 64px;
+    }
+
+    @media (max-width: 991px) {
+        padding: 0 24px;
+    }
 `;
 
 export const FlexBox = styled.div`
@@ -300,8 +315,13 @@ export const SecondaryText = styled.p`
 `;
 
 export const FormButtonContainer = styled.div`
-    min-width: 500px;
     text-align: right;
+    min-width: 500px;
+
+    @media(max-width: 1352px) {
+        min-width: 300px;
+    }
+
     @media(max-width: 768px) {
         min-width: 100%;
     }

packages/frontend/src/components/navigation/DesktopContainer.js

@@ -12,7 +12,6 @@ const Container = styled.div`
     color: white;
     position: relative;
     font-size: 14px;
-    padding: 0 15px;
 
     @media (min-width: 992px) {
         display: flex;

packages/frontend/src/components/navigation/NavigationV2.js

@@ -15,9 +15,10 @@ const Container = styled.div`
         border-bottom: 1px solid #F0F0F1;
         background-color: #FFFFFF;
         margin: auto;
+        padding: 0 64px;
+
         @media (max-width: 991px) {
-            bottom: ${(props) => props.open ? '0' : 'unset'};
-            border: none;
+            padding: 0 24px;
         }
 
         h6 {

packages/frontend/src/translations/en.global.json

@@ -673,29 +673,28 @@
     },
     "landing": {
         "banner": "NEAR Wallet is in Private Beta",
-        "desc": "The NEAR wallet has been discontinued. Explore a range of user-friendly wallets designed to meet your needs.",
+        "desc": "wallet.near.org has been discontinued. Explore a range of user-friendly wallets designed to meet your needs.",
         "or": "or",
         "title": "A new era for NEAR wallets",
         "decentralize": "Decentralization means strength in numbers.",
         "decentralizeSubtitle": "Signifying the substantial growth of the ecosystem, NEAR now supports a diverse list of high-quality wallets.",
-        "landingSectionTitle": "What happened to NEAR Wallet?",
+        "landingSectionTitle": "What happened to wallet.near.org?",
         "landingSectionSubTitle": "Transfer your accounts with ease.",
         "landingSectionSubDescription": "To make the transition easier, you can securely migrate your accounts to a new wallet using the Transfer Wizard. Review the transfer-compatible wallet options below or move your accounts manually with your recovery phrase.",
-        "landingSectionDescription": "As we embrace a more decentralized future, the NEAR Wallet will be discontinued. This change invites you to discover a variety of new and secure wallet options within our ecosystem. Don’t worry, no changes will be made to your account or assets.",
+        "landingSectionDescription": "As we embrace a more decentralized future, wallet.near.org will be discontinued. This change invites you to discover a variety of new and secure wallet options within our ecosystem. Don’t worry, no changes will be made to your account or assets.",
         "wallet": {
             "title": "Find the right wallet for you.",
             "secondaryDescription": "Check out our diverse list of community-built wallet options.",
             "description": "You can transfer your accounts to any of the wallets below or manually import them to the wallet of your choice using your recovery phrase.",
-            "near": "A browser based wallet that offers the same UI and features of the Near wallet.",
+            "near": "A browser based wallet that offers the same UI and features of wallet.near.org",
             "meteor": "Both a browser and extension wallet, with advanced NFT features.",
             "sender": "Security-audited mobile & extension wallet with 1M+ users, supporting NEAR & Aurora.",
             "here": "Non-custodial mobile wallet with a friendly user interface and advanced features.",
             "nightly": "A mobile and extension wallet, with support for multiple ecosystems.",
             "wellDone": "A multi-chain extension wallet that gives you control over all your assets from a single platform."
         },
         "transfer": {
-            "titleSingular": "You have ${accountCount} account ready to transfer.",
-            "titlePlural": "You have ${accountCount} accounts ready to transfer.",
+            "title": "You have accounts that need to be transferred",
             "description": "To continue using NEAR apps and managing your assets you need to migrate your accounts to a different wallet."
         }