Merge pull request #5560 from mozilla/landing-page-qa

Minor landing page adjustments
mozilla · Jan 30, 2025 · 7befad8 · 7befad8
2 parents e788572 + 2b0567c
commit 7befad8
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 49 deletions.
diff --git a/locales-pending/landing-redesign-experiment.ftl b/locales-pending/landing-redesign-experiment.ftl
@@ -47,6 +47,8 @@ landing-redesign-info-block-three-label = Stay informed
 landing-redesign-info-block-three-title = Act fast with timely notifications
 landing-redesign-info-block-three-description = With { -brand-monitor }, you will be notified when your data is found in data breaches or data brokers, allowing you to take action such as securing accounts, updating passwords, or requesting data removal, reducing the risk of privacy threats.
 
+landing-redesign-info-block-cta-label = Get your free scan
+
 # Pricing plans
 
 landing-redesign-pricing-plans-section-title = Choose your level of protection

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/Faq.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/Faq.tsx
@@ -146,11 +146,11 @@ export const Faq = () => {
   };
 
   return (
-    <div className={styles.content}>
+    <div id="faq" className={styles.content}>
       <h3>
         <b>{l10n.getString("landing-redesign-faq-section-title")}</b>
       </h3>
-      <dl id="faq" className={styles.faqList}>
+      <dl className={styles.faqList}>
         {faqItems.map(
           ({ question, answer, isExpanded, id, onExpandAnswer }) => (
             <FaqItem

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/InfoBlock.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/InfoBlock.tsx
@@ -85,7 +85,7 @@ export const InfoBlock = (props: LandingPageProps) => {
           experimentData={props.experimentData}
           ctaLabel={
             <>
-              {props.l10n.getString("landing-redesign-banner-cta-button-label")}
+              {props.l10n.getString("landing-redesign-info-block-cta-label")}
               <ArrowIcon alt="" />
             </>
           }

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/PricingPlans.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/PricingPlans.tsx
@@ -15,7 +15,7 @@ export const PricingPlans = (props: LandingPageProps) => {
   const headingId = useId();
 
   return (
-    <div className={styles.content}>
+    <div id="pricing" className={styles.content}>
       <div className={styles.header}>
         <h3 id={headingId}>
           <b>

diff --git a/src/app/(proper_react)/(redesign)/(public)/TopNavBar.module.scss b/src/app/(proper_react)/(redesign)/(public)/TopNavBar.module.scss
@@ -8,3 +8,11 @@
   padding-bottom: tokens.$spacing-md;
   width: 100%;
 }
+
+.signInButton {
+  display: block;
+
+  @media screen and (min-width: tokens.$screen-sm) {
+    display: none;
+  }
+}
diff --git a/src/app/(proper_react)/(redesign)/(public)/TopNavBar.tsx b/src/app/(proper_react)/(redesign)/(public)/TopNavBar.tsx
@@ -26,7 +26,7 @@ export const TopNavBar = () => {
         </li>
         <li>
           <TelemetryLink
-            href="#pricing"
+            href="/#pricing"
             eventData={{
               link_id: "navbar_pricing",
             }}
@@ -37,7 +37,7 @@ export const TopNavBar = () => {
         <li>
           <TelemetryLink
             data-testid="navbar_faqs"
-            href="#faq"
+            href="/#faq"
             eventData={{
               link_id: "navbar_faqs",
             }}
@@ -56,7 +56,7 @@ export const TopNavBar = () => {
           </TelemetryLink>
         </li>
       </ul>
-      <SignInButton variant="secondary" small />
+      <SignInButton className={styles.signInButton} variant="secondary" small />
     </div>
   );
 };
diff --git a/src/app/(proper_react)/(redesign)/(public)/how-it-works/HowItWorksView.module.scss b/src/app/(proper_react)/(redesign)/(public)/how-it-works/HowItWorksView.module.scss
@@ -229,40 +229,17 @@
   justify-content: center;
   background: tokens.$color-purple-05;
   padding: tokens.$spacing-2xl tokens.$spacing-md;
+
   .footerSectionCTA {
     font: tokens.$text-title-2xs;
     font-family: var(--font-inter);
     font-weight: 500;
     margin-bottom: tokens.$spacing-xl;
   }
-  .footerSectionCTAInput {
-    display: flex;
-    flex-wrap: wrap;
-    gap: tokens.$spacing-md;
-    input {
-      flex: 1 0 auto;
-      border-radius: tokens.$border-radius-md;
-      border: 1px solid tokens.$color-grey-20;
-      padding: tokens.$spacing-sm;
-      font: tokens.$text-body-md;
-    }
-    button {
-      flex: 1 0 auto;
-      font: tokens.$text-body-md;
-      font-weight: 600;
-    }
-  }
+
   .note {
     color: tokens.$color-grey-40;
     font: tokens.$text-body-sm;
     margin-top: tokens.$spacing-sm;
   }
-  @media screen and (min-width: tokens.$screen-md) {
-    .footerSectionCTAInput {
-      input {
-        padding: tokens.$spacing-md tokens.$spacing-xl tokens.$spacing-md
-          tokens.$spacing-md;
-      }
-    }
-  }
 }
diff --git a/src/app/(proper_react)/(redesign)/(public)/how-it-works/components/FooterSection.tsx b/src/app/(proper_react)/(redesign)/(public)/how-it-works/components/FooterSection.tsx
@@ -19,20 +19,18 @@ export const FooterSection = (props: Props) => {
       <h2 className={styles.footerSectionCTA}>
         {l10n.getString("how-it-works-page-footersection-title")}
       </h2>
-      <div className={styles.footerSectionCTAInput}>
-        <SignUpForm
-          eligibleForPremium={eligibleForPremium}
-          signUpCallbackUrl={`${process.env.SERVER_URL}/user/dashboard`}
-          eventId={{
-            cta: "clicked_get_scan",
-            field: "entered_email_address",
-          }}
-          scanLimitReached={scanLimitReached}
-          placeholder={l10n.getString(
-            "how-it-works-page-footersection-input-placeholder",
-          )}
-        />
-      </div>
+      <SignUpForm
+        eligibleForPremium={eligibleForPremium}
+        signUpCallbackUrl={`${process.env.SERVER_URL}/user/dashboard`}
+        eventId={{
+          cta: "clicked_get_scan",
+          field: "entered_email_address",
+        }}
+        scanLimitReached={scanLimitReached}
+        placeholder={l10n.getString(
+          "how-it-works-page-footersection-input-placeholder",
+        )}
+      />
     </footer>
   );
 };
diff --git a/src/app/(proper_react)/(redesign)/MobileShell.tsx b/src/app/(proper_react)/(redesign)/MobileShell.tsx
@@ -92,9 +92,11 @@ export const MobileShell = (props: Props) => {
               fxaSettingsUrl={props.fxaSettingsUrl}
             />
           ) : (
-            <div className={styles.signInButton}>
-              <SignInButton variant="secondary" small />
-            </div>
+            <SignInButton
+              className={styles.signInButton}
+              variant="secondary"
+              small
+            />
           )}
           <button
             onClick={() => setIsExpanded(!isExpanded)}