MNTOR-2653 + MNTOR-2649 - Sign up encouragement sections (#3955)

* add take back control of your data section

* add right telemetry ids

src/app/(proper_react)/redesign/(public)/LandingView.module.scss

@@ -313,3 +313,20 @@
     margin-top: $layout-sm;
   }
 }
+
+.signUpEncouragementWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: $layout-sm;
+  background-color: $color-purple-05;
+  padding: $layout-md $spacing-md;
+  text-align: center;
+
+  .title {
+    font: $text-title-2xs;
+    font-family: var(--font-inter);
+    font-weight: 500;
+  }
+}

src/app/(proper_react)/redesign/(public)/LandingView.tsx

@@ -175,6 +175,20 @@ export const View = (props: Props) => {
         </div>
       </section>
 
+      <div className={styles.signUpEncouragementWrapper}>
+        <p className={styles.title}>
+          {props.l10n.getString("landing-all-get-started")}
+        </p>
+        <SignUpForm
+          eligibleForPremium={props.eligibleForPremium}
+          signUpCallbackUrl={`${process.env.SERVER_URL}/redesign/user/dashboard/`}
+          eventId={{
+            cta: "clicked_get_scan_fourth",
+            field: "entered_email_address_fourth",
+          }}
+        />
+      </div>
+
       <section className={styles.socialProofWrapper}>
         <h2>
           {props.l10n.getString("landing-all-social-proof-title", {
@@ -201,6 +215,20 @@ export const View = (props: Props) => {
       {!props.eligibleForPremium && <HeresHowWeHelp />}
 
       <Plans {...props} />
+
+      <div className={styles.signUpEncouragementWrapper}>
+        <p className={styles.title}>
+          {props.l10n.getString("landing-all-take-back-data")}
+        </p>
+        <SignUpForm
+          eligibleForPremium={props.eligibleForPremium}
+          signUpCallbackUrl={`${process.env.SERVER_URL}/redesign/user/dashboard/`}
+          eventId={{
+            cta: "clicked_get_scan_last",
+            field: "entered_email_address_last",
+          }}
+        />
+      </div>
     </main>
   );
 };

src/app/(proper_react)/redesign/(public)/SignUpForm.module.scss

@@ -3,7 +3,7 @@
 .form {
   display: flex;
   flex-wrap: wrap;
-  gap: $spacing-xl;
+  gap: $spacing-lg;
 
   input {
     flex: 1 0 auto;