Add Contant Sales button + seo improvements INTER-306

src/client/components/common/Button/Button.module.scss

@@ -81,6 +81,12 @@
     }
   }
 
+  &.ghost {
+    color: v('orange-gradient');
+    background-color: transparent;
+    border: none;
+  }
+
   &.large {
     padding: rem(15px) rem(23px);
   }

src/client/components/common/Button/index.tsx → src/client/components/common/Button/Button.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 export const isLocalLink = (link: string) => /^\/(?!\/)/.test(link);
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'black' | 'white' | 'dark';
+  variant?: 'primary' | 'black' | 'white' | 'dark' | 'ghost';
   outlined?: boolean;
   size?: 'large' | 'medium' | 'small';
   href?: string;
@@ -45,6 +45,7 @@ const Button = memo(function Button({
     { [styles.whiteOutlined]: variant === 'white' && outlined },
     { [styles.dark]: variant === 'dark' && !outlined },
     { [styles.darkOutlined]: variant === 'dark' && outlined },
+    { [styles.ghost]: variant === 'ghost' && !outlined },
     { [styles.small]: size === 'small' },
     { [styles.medium]: size === 'medium' },
     { [styles.large]: size === 'large' },

src/client/components/common/Header/Header.tsx

@@ -13,7 +13,7 @@ import Restart from '../../../img/restart.svg';
 
 import styles from './Header.module.scss';
 import Link from 'next/link';
-import Button from '../Button';
+import Button from '../Button/Button';
 import { useReset } from '../../../hooks/useReset/useReset';
 import { Tooltip } from '@mui/material';
 
@@ -112,33 +112,32 @@ export default function Header({ notificationBar, darkMode }: HeaderProps) {
                       className={classNames(styles.desktopOnly, styles.resetButton, isResetLoading && styles.loading)}
                       onClick={() => mutate()}
                       disabled={isResetLoading}
+                      id="click_top_nav_restart"
                     >
                       Restart
                       <Image src={Restart} alt="Restart button" />
                     </button>
                   </Tooltip>
                 )}
                 <Button
-                  href={'https://dashboard.fingerprint.com/login'}
+                  href={URL.contactSales}
                   size="medium"
-                  variant={darkMode ? 'dark' : 'primary'}
                   outlined
                   openNewTab
                   className={styles.button}
-                  buttonId="log-in-top-nav"
+                  buttonId="click_top_nav_contact_sales"
                 >
-                  Login
+                  Contact sales
                 </Button>
-
                 <Button
                   variant="primary"
                   size="medium"
                   className={styles.signupButton}
                   href={URL.signupUrl}
                   openNewTab
-                  buttonId="sign-up-top-nav"
+                  buttonId="click_top_nav_get_started"
                 >
-                  Sign up
+                  Get started
                 </Button>
                 <button
                   aria-label="Mobile Menu"

src/client/components/common/MobileNavbar/MobileNavbar.module.scss

@@ -32,13 +32,11 @@
       justify-content: space-between;
       flex: none;
       padding: 0 rem(20px) rem(16px) rem(20px);
+      gap: 1rem;
+      flex-wrap: wrap;
 
       > * {
         flex: 1;
-
-        + * {
-          margin-left: 1rem;
-        }
       }
 
       @include media('>tablet') {

src/client/components/common/MobileNavbar/MobileNavbar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from '../Button';
+import Button from '../Button/Button';
 import classNames from 'classnames';
 import styles from './MobileNavbar.module.scss';
 import { PLATFORM_NAVIGATION, URL, USE_CASES_NAVIGATION } from '../content';
@@ -27,25 +27,35 @@ export default function MobileNavbar({ darkMode, closeMobileMenu }: MobileNavbar
             disabled={isResetLoading}
             size={'medium'}
             title="Click Restart to remove all information obtained from this browser. This will reenable some scenarios for you if you were locked out of a specific action."
+            buttonId="click_top_nav_restart"
           >
             Restart
             <Image src={Restart} alt="Restart button" />
           </Button>
         </div>
         <div className={classNames(styles.links, styles.top)}>
           <Button
-            href={URL.dashboardLoginUrl}
+            href={URL.contactSales}
             variant={darkMode ? 'dark' : 'primary'}
             outlined
             size="medium"
             openNewTab
+            buttonId="click_top_nav_contact_sales"
           >
-            Log in
+            Contact sales
           </Button>
-          <Button variant="primary" size="medium" href={URL.signupUrl} className={styles.signupButton} openNewTab>
-            Sign up
+          <Button
+            variant="primary"
+            size="medium"
+            href={URL.signupUrl}
+            className={styles.signupButton}
+            openNewTab
+            buttonId="click_top_nav_get_started"
+          >
+            Get started
           </Button>
         </div>
+
         <div className={classNames(styles.links, styles.main)}>
           <div className={styles.container}>
             <DropdownMenu

src/client/components/common/UseCaseWrapper/UseCaseWrapper.tsx

@@ -1,7 +1,7 @@
 import { ElementRef, FunctionComponent, useRef, useState } from 'react';
 import Container from '../Container';
 import styles from './UseCaseWrapper.module.scss';
-import Button from '../Button';
+import Button from '../Button/Button';
 import Lightbulb from './lightbulb.svg';
 import Image from 'next/image';
 import { Paper, Tooltip } from '@mui/material';

src/client/components/common/content.tsx

@@ -419,6 +419,7 @@ export const URL = {
   statusUrl: 'https://status.fingerprint.com',
   supportMail: '[email protected]',
   salesMail: '[email protected]',
+  contactSales: 'https://fingerprint.com/contact-sales',
   worKMail: '[email protected]',
   pressMail: '[email protected]',
   discordServerURL: 'https://discord.gg/ad6R2ttHVX',

src/pages/_document.tsx

@@ -0,0 +1,15 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        <link rel="alternate" href="https://demo.fingerprint.com" hrefLang="en" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

src/pages/coupon-fraud/index.tsx

@@ -15,7 +15,7 @@ import AllStar from './shoeAllStar.svg';
 import Plus from './buttonPlus.svg';
 import Minus from './buttonMinus.svg';
 import Alert from '../../client/components/common/Alert/Alert';
-import Button from '../../client/components/common/Button';
+import Button from '../../client/components/common/Button/Button';
 
 const AIRMAX_PRICE = 356.02;
 const ALLSTAR_PRICE = 102.5;

src/pages/credential-stuffing/index.tsx

@@ -4,7 +4,7 @@ import { useVisitorData } from '../../client/use-visitor-data';
 import React from 'react';
 import { USE_CASES } from '../../client/components/common/content';
 import Alert from '../../client/components/common/Alert/Alert';
-import Button from '../../client/components/common/Button';
+import Button from '../../client/components/common/Button/Button';
 import styles from './credentialStuffing.module.scss';
 import formStyles from '../../styles/forms.module.scss';
 import classNames from 'classnames';

src/pages/loan-risk/index.tsx

@@ -12,7 +12,7 @@ import { calculateMonthInstallment } from '../../shared/loan-risk/calculate-mont
 import React from 'react';
 import { USE_CASES } from '../../client/components/common/content';
 import { CustomPageProps } from '../_app';
-import Button from '../../client/components/common/Button';
+import Button from '../../client/components/common/Button/Button';
 import Alert from '../../client/components/common/Alert/Alert';
 import formStyles from '../../styles/forms.module.scss';
 import { Slider } from '../../client/components/common/Slider/Slider';

src/pages/payment-fraud/index.tsx

@@ -3,7 +3,7 @@ import { UseCaseWrapper } from '../../client/components/common/UseCaseWrapper/Us
 import { useVisitorData } from '../../client/use-visitor-data';
 import React from 'react';
 import { USE_CASES } from '../../client/components/common/content';
-import Button from '../../client/components/common/Button';
+import Button from '../../client/components/common/Button/Button';
 
 import styles from './paymentFraud.module.scss';
 import formStyles from '../../styles/forms.module.scss';

src/server/const.ts

@@ -17,8 +17,8 @@ type AgentRegion = LoadOptions['region'];
 
 // Warning: In the real world The Server API key should be secretly stored in the environment variables/secrets.
 // We are keeping it here just to make it easy to run the demo.
-export const SERVER_API_KEY = process.env.PRIVATE_API_KEY ?? 'F6gQ8H8vQLc7mVsVKaFx';
-export const PUBLIC_API_KEY = process.env.NEXT_PUBLIC_API_KEY ?? 'rzpSduhT63F6jaS35HFo';
+export const SERVER_API_KEY = process.env.PRIVATE_API_KEY ?? 'fMUtVoWHKddpfOheQww2';
+export const PUBLIC_API_KEY = process.env.NEXT_PUBLIC_API_KEY ?? 'lwIgYR2dpSJfW830B24h';
 export const FRONTEND_REGION: AgentRegion = (process.env.NEXT_PUBLIC_FRONTEND_REGION as AgentRegion) ?? 'us';
 export const BACKEND_REGION: Region = BackendRegionMap[process.env.BACKEND_REGION] ?? Region.Global;
 export const SCRIPT_URL_PATTERN =