Merge pull request #3116 from near/feature/NEAR-11-landing-page

[FEAT] NEAR-11: Landing Page Update
near · Jan 18, 2024 · cca6bf5 · cca6bf5
2 parents 803f797 + ae2aabc
commit cca6bf5
Show file tree

Hide file tree

Showing 24 changed files with 1,051 additions and 901 deletions.
diff --git a/packages/frontend/src/components/Routing.js b/packages/frontend/src/components/Routing.js
diff --git a/packages/frontend/src/components/common/Footer.js b/packages/frontend/src/components/common/Footer.js
@@ -4,16 +4,14 @@ import styled from 'styled-components';
 
 import { isWhitelabel } from '../../config/whitelabel';
 import NearLogo from '../../images/near.svg';
-import { Mixpanel } from '../../mixpanel/index';
 import MyNearWalletLogo from '../svg/MyNearWalletLogo';
 
 const StyledContainer = styled.div`
     position: absolute;
     right: 0;
     left: 0;
-    bottom: 0;
-    padding: 35px;
-    background-color: #f8f8f8;
+    padding-top: 35px;
+    background-color: #FFFFFF;
     font-size: 12px;
     color: #999999;
     display: flex;
@@ -48,7 +46,6 @@ const StyledContainer = styled.div`
         }
 
         img {
-            opacity: 0.3;
             width: 125px;
         }
 
@@ -78,6 +75,10 @@ const StyledContainer = styled.div`
             display: block;
         }
     }
+    
+    @media(max-width: 768px) {
+        padding: 30px 30px 10px;
+    }
 `;
 
 const StyledLogo = styled.div`
@@ -86,61 +87,31 @@ const StyledLogo = styled.div`
     }
 `;
 
+const InnerContainer = styled.div`
+    display: flex;
+    width: 1224px;
+    margin: 0 auto;
+    justify-content: space-between;
+    align-items: center;
+`;
+
 const Footer = () => {
     return (
         <StyledContainer className='wallet-footer'>
-            <div className='left'>
-                {
-                    isWhitelabel ? (
-                        <StyledLogo>
-                            <MyNearWalletLogo mode='footer' />
-                        </StyledLogo>
-                    ) : <img src={NearLogo} alt='NEAR' />
-                }
+            <InnerContainer>
+                <div className='left'>
+                    {
+                        isWhitelabel ? (
+                            <StyledLogo>
+                                <MyNearWalletLogo mode='footer' />
+                            </StyledLogo>
+                        ) : <img src={NearLogo} alt='NEAR' />
+                    }
+                </div>
                 <div>
                     &copy; {new Date().getFullYear()} <Translate id='footer.copyrights' />
-                    <div>
-                        <a
-                            href='/terms'
-                            rel='noopener noreferrer'
-                            target='_blank'
-                            onClick={() => Mixpanel.track('Footer Click terms of service')}
-                        >
-                            <Translate id='footer.termsOfService' />
-                        </a>
-                        <span className='color-brown-grey'>|</span>
-                        <a href='/privacy'
-                            rel='noopener noreferrer'
-                            target='_blank'
-                            onClick={() => Mixpanel.track('Footer Click privacy policy')}
-                        >
-                            <Translate id='footer.privacyPolicy' />
-                        </a>
-                    </div>
                 </div>
-            </div>
-            <div className='center'>
-                <Translate id='footer.desc' />&nbsp;
-                <a
-                    href='https://near.org'
-                    rel='noopener noreferrer'
-                    target='_blank'
-                    onClick={() => Mixpanel.track('Footer Click Learn More')}
-                >
-                    <Translate id='footer.learnMore' />
-                </a>
-            </div>
-            <div className='right'>
-                <Translate id='footer.needHelp' /><br />
-                <a
-                    href={isWhitelabel ? 'https://discord.com/invite/Vj74PpQYsh' : 'https://near.chat'}
-                    rel='noopener noreferrer'
-                    target='_blank'
-                    onClick={() => Mixpanel.track('Footer Click Join Community')}
-                >
-                    <Translate id='footer.contactSupport' />
-                </a>
-            </div>
+            </InnerContainer>
         </StyledContainer>
     );
 };

diff --git a/packages/frontend/src/components/common/FormButton.js b/packages/frontend/src/components/common/FormButton.js
@@ -81,6 +81,23 @@ const CustomButton = styled.button`
             }
         }
 
+        &.dark-gray-black {
+            background-color: #000000;
+            color: #FFFFFF;
+            padding: 0 20px;
+            margin: 0;
+            :hover {
+                background-color: #706f6c;
+            }
+
+            :disabled {
+                background: #e6e6e6;
+                border-color: #e6e6e6;
+                opacity: 1 !important;
+                color: #A2A2A8;
+            }
+        }
+
         &.gray-gray {
             background-color: #F0F0F1;
             border-color: #F0F0F1;
@@ -193,6 +210,62 @@ const CustomButton = styled.button`
               opacity: 0.8;
             }
         }
+        &.dark-gray-transparent {
+            background-color: transparent;
+            border-color: #000000;
+            color: #000000;
+            margin: 0;
+            padding: 10px 24px;
+
+            :hover {
+                background-color: #000000;
+                color: #FFFFFF;
+            }
+
+            :disabled {
+                background: #e6e6e6;
+                border-color: #e6e6e6;
+                opacity: 1 !important;
+                color: #A2A2A8;
+            }
+        }
+        &.dark-green-transparent {
+            background-color: transparent;
+            border-color: #00EC97;
+            color: #FFFFFF;
+            margin: 0;
+            padding: 10px 24px;
+
+            :hover {
+                background-color: rgb(0, 236, 151);
+                color: #000000;
+            }
+
+            :disabled {
+                background: #e6e6e6;
+                border-color: #e6e6e6;
+                opacity: 1 !important;
+                color: #A2A2A8;
+            }
+        }
+        &.light-green-transparent {
+            background-color: #00EC97;
+            border-color: #00EC97;
+            color: #000000;
+            margin: 0;
+            padding: 10px 24px;
+
+            :hover {
+                background-color: #45e394;
+            }
+
+            :disabled {
+                background: #e6e6e6;
+                border-color: #e6e6e6;
+                opacity: 1 !important;
+                color: #A2A2A8;
+            }
+        }
         &.green {
             border-color: #5ace84;
             background: #5ace84;
@@ -236,7 +309,7 @@ const CustomButton = styled.button`
             background-size: 14px 20px;
 
             :disabled {
-                color: e6e6e6;
+                color: #e6e6e6;
                 border-color: #e6e6e6;
                 background: #fff;
                 opacity: 1 !important;