Merge branch 'main' into dependabot/npm_and_yarn/lint-staged-16.3.1

Author: codemist

src/app/[locale]/(redesign)/(public)/LandingView.tsx

@@ -41,7 +41,6 @@ export const View = (props: Props) => {
             <h1>{props.l10n.getString("landing-all-hero-title")}</h1>
             <p>{props.l10n.getString("landing-all-hero-lead")}</p>
             <SignUpForm
-              isHero
               signUpCallbackUrl={`${config.serverUrl}/user/dashboard`}
               eventId={{
                 cta: "clicked_get_scan_header",

src/app/[locale]/(redesign)/(public)/SignUpForm.module.scss

@@ -1,10 +1,23 @@
 @use "../../../tokens";
 
 .form {
-  align-items: flex-start;
   display: flex;
   flex-wrap: wrap;
   gap: tokens.$spacing-lg;
+  flex-direction: column;
+  align-items: center;
+
+  @media screen and (min-width: tokens.$screen-sm) {
+    flex-direction: row;
+
+    // label positions will dictate where the CTA is floating
+    &.top {
+      align-items: flex-end;
+    }
+    &.bottom {
+      align-items: flex-start;
+    }
+  }
 
   div:first-child {
     display: flex;

src/app/[locale]/(redesign)/(public)/SignUpForm.tsx

@@ -22,11 +22,10 @@ export type Props = {
   signUpCallbackUrl: string;
   label?: string;
   experimentData?: ExperimentData["Features"];
-  isHero?: boolean;
   placeholder?: string;
   ctaLabel?: string | ReactNode;
   hasFloatingLabel?: boolean;
-  labelPosition?: "top" | "bottom" | "floating";
+  labelPosition: "top" | "bottom" | "floating";
 };
 
 export const SignUpForm = (props: Props) => {

src/app/[locale]/(redesign)/(public)/how-it-works/components/FooterSection.tsx

@@ -27,6 +27,7 @@ export const FooterSection = (props: Props) => {
         placeholder={l10n.getString(
           "how-it-works-page-footersection-input-placeholder",
         )}
+        labelPosition="top"
       />
     </footer>
   );