Add landing page experiment

config/nimbus.yaml

@@ -101,6 +101,33 @@ features:
         value: { "enabled": true }
       - channel: production
         value: { "enabled": true }
+  landing-page-redesign-plus-eligible-experiment:
+    description: Landing page redesign
+    variables:
+      enabled:
+        description: If the feature is enabled
+        type: Boolean
+        default: false
+      variant:
+        description: The landing page variant to show
+        type: LandingPageVariant
+        default: default
+    defaults:
+      - channel: local
+        value: {
+          "enabled": true,
+          "variant": redesign,
+        }
+      - channel: staging
+        value: {
+          "enabled": false,
+          "variant": default,
+        }
+      - channel: production
+        value: {
+          "enabled": false,
+          "variant": default,
+        }
 enums:
   OptionalBrokerScanInfoFields:
     description: An enum of optional broker scan info fields
@@ -122,3 +149,10 @@ enums:
         description: Only show a CTA button with the label “Get free scan”
       ctaOnlyAlternativeLabel:
         description: Only show a CTA button with the label “Sign up to get free scan”
+  LandingPageVariant:
+    description: An enum of landing page variants
+    variants:
+      default:
+        description: Show the default landing page
+      redesign:
+        description: Show the redesigned landing page

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

@@ -5,35 +5,57 @@
   flex-direction: column;
   height: 100%;
 }
+
+.waitlistSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: tokens.$spacing-lg;
+  padding: tokens.$layout-md tokens.$spacing-md;
+
+  .waitlistTitle {
+    text-align: center;
+    font: tokens.$text-title-2xs;
+    font-weight: 600;
+    line-height: 1.4;
+    font-family: var(--font-inter);
+    color: tokens.$color-purple-70;
+  }
+
+  a {
+    align-self: center;
+  }
+}
+
 .navbar {
   font: tokens.$text-body-xl;
   padding: tokens.$layout-xs;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   background-color: tokens.$color-grey-05;
-  .navbarLinksContainer {
+  ul {
     display: flex;
     flex-direction: column;
-    .navbarLinks {
+    a {
       text-decoration: none;
       color: tokens.$color-grey-50;
     }
   }
   @media screen and (min-width: tokens.$screen-sm) {
     justify-content: flex-end;
-    .navbarLinksContainer {
+    ul {
       flex-direction: row;
       justify-content: flex-end;
-      .navbarLinks {
+      a {
         margin-left: tokens.$spacing-lg;
       }
     }
   }
   @media screen and (min-width: tokens.$screen-md) {
     padding: tokens.$layout-xs tokens.$layout-xl;
-    .navbarLinksContainer {
-      .navbarLinks {
+    ul {
+      a {
         margin-left: tokens.$spacing-xl;
       }
     }
@@ -396,24 +418,3 @@
     align-self: center;
   }
 }
-
-.waitlistSection {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: tokens.$spacing-lg;
-  padding: tokens.$layout-md tokens.$spacing-md;
-
-  .waitlistTitle {
-    text-align: center;
-    font: tokens.$text-title-2xs;
-    font-weight: 600;
-    line-height: 1.4;
-    font-family: var(--font-inter);
-    color: tokens.$color-purple-70;
-  }
-
-  a {
-    align-self: center;
-  }
-}

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

@@ -11,7 +11,7 @@ import { AccountsMetricsFlowProvider } from "../../../../contextProviders/accoun
 import { CONST_URL_MONITOR_LANDING_PAGE_ID } from "../../../../constants";
 
 const meta: Meta<typeof View> = {
-  title: "Pages/Public/Landing page",
+  title: "Pages/Public/Landing page/Default",
   component: (props: ViewProps) => {
     const experimentData =
       props.experimentData ?? defaultExperimentData["Features"];
@@ -31,7 +31,18 @@ const meta: Meta<typeof View> = {
           service: process.env.OAUTH_CLIENT_ID as string,
         }}
       >
-        <PublicShell l10n={getL10n("en")} countryCode={props.countryCode}>
+        <PublicShell
+          l10n={getL10n("en")}
+          countryCode={props.countryCode}
+          enabledFeatureFlags={[]}
+          experimentData={{
+            ...defaultExperimentData["Features"],
+            "landing-page-redesign-plus-eligible-experiment": {
+              enabled: false,
+              variant: "default",
+            },
+          }}
+        >
           <View {...props} experimentData={experimentData} />
         </PublicShell>
       </AccountsMetricsFlowProvider>

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

@@ -26,9 +26,10 @@ import { TelemetryLink } from "../../../components/client/TelemetryLink";
 import { HeresHowWeHelp } from "./HeresHowWeHelp";
 import { ScanLimit } from "./ScanLimit";
 import { FaqSection } from "./Faq";
-import { AccountDeletionNotification } from "./AccountDeletionNotification";
 import { ExperimentData } from "../../../../telemetry/generated/nimbus/experiments";
 import { FreeScanCta } from "./FreeScanCta";
+import { TopNavBar } from "./TopNavBar";
+import { AccountDeletionNotification } from "./AccountDeletionNotification";
 
 export type Props = {
   eligibleForPremium: boolean;
@@ -43,7 +44,11 @@ export const View = (props: Props) => {
     <>
       <AccountDeletionNotification />
       <main className={styles.wrapper}>
-        {props.eligibleForPremium && <TopNavBar l10n={props.l10n} />}
+        {props.eligibleForPremium && (
+          <div className={styles.navbar}>
+            <TopNavBar />
+          </div>
+        )}
         <header className={styles.hero}>
           <div className={styles.heroContent}>
             <h1>{props.l10n.getString("landing-all-hero-title")}</h1>
@@ -258,52 +263,6 @@ export const View = (props: Props) => {
   );
 };
 
-export const TopNavBar = ({ l10n }: { l10n: ExtendedReactLocalization }) => {
-  return (
-    <div className={styles.navbar}>
-      <div className={styles.navbarLinksContainer}>
-        <TelemetryLink
-          className={styles.navbarLinks}
-          href="/how-it-works"
-          eventData={{
-            link_id: "navbar_how_it_works",
-          }}
-        >
-          {l10n.getString("landing-premium-hero-navbar-link-how-it-works")}
-        </TelemetryLink>
-        <TelemetryLink
-          className={styles.navbarLinks}
-          href="#pricing"
-          eventData={{
-            link_id: "navbar_pricing",
-          }}
-        >
-          {l10n.getString("landing-premium-hero-navbar-link-pricing")}
-        </TelemetryLink>
-        <TelemetryLink
-          data-testid="navbar_faqs"
-          className={styles.navbarLinks}
-          href="#faq"
-          eventData={{
-            link_id: "navbar_faqs",
-          }}
-        >
-          {l10n.getString("landing-premium-hero-navbar-link-faqs")}
-        </TelemetryLink>
-        <TelemetryLink
-          className={styles.navbarLinks}
-          href="/breaches"
-          eventData={{
-            link_id: "navbar_recent_breaches",
-          }}
-        >
-          {l10n.getString("landing-premium-hero-navbar-link-recent-breaches")}
-        </TelemetryLink>
-      </div>
-    </div>
-  );
-};
-
 const HeroImage = (props: Props) => {
   if (!props.eligibleForPremium) {
     return (

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

@@ -0,0 +1,7 @@
+@import "../../../tokens";
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}

src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign.stories.tsx

@@ -0,0 +1,102 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { View, Props as ViewProps } from "./LandingViewRedesign";
+import { getL10n } from "../../../functions/l10n/storybookAndJest";
+import { PublicShell } from "./PublicShell";
+import { defaultExperimentData } from "../../../../telemetry/generated/nimbus/experiments";
+import { AccountsMetricsFlowProvider } from "../../../../contextProviders/accounts-metrics-flow";
+import { CONST_URL_MONITOR_LANDING_PAGE_ID } from "../../../../constants";
+
+const meta: Meta<typeof View> = {
+  title: "Pages/Public/Landing page/Redesign",
+  component: (props: ViewProps) => {
+    const experimentData =
+      props.experimentData ?? defaultExperimentData["Features"];
+    return (
+      <AccountsMetricsFlowProvider
+        enabled={
+          experimentData["landing-page-redesign-plus-eligible-experiment"]
+            .enabled
+        }
+        metricsFlowParams={{
+          entrypoint: CONST_URL_MONITOR_LANDING_PAGE_ID,
+          entrypoint_experiment:
+            "landing-page-redesign-plus-eligible-experiment",
+          entrypoint_variation:
+            experimentData["landing-page-redesign-plus-eligible-experiment"]
+              .variant,
+          form_type: "email",
+          service: process.env.OAUTH_CLIENT_ID as string,
+        }}
+      >
+        <PublicShell
+          l10n={getL10n("en")}
+          countryCode={props.countryCode}
+          enabledFeatureFlags={["LandingPageRedesign"]}
+          experimentData={{
+            ...defaultExperimentData["Features"],
+            "landing-page-redesign-plus-eligible-experiment": {
+              enabled: true,
+              variant: "redesign",
+            },
+          }}
+        >
+          <View {...props} experimentData={experimentData} />
+        </PublicShell>
+      </AccountsMetricsFlowProvider>
+    );
+  },
+  args: {
+    l10n: getL10n(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof View>;
+
+export const LandingRedesignUs: Story = {
+  name: "US visitors",
+  args: {
+    eligibleForPremium: true,
+    countryCode: "us",
+    scanLimitReached: false,
+  },
+};
+
+export const LandingRedesignUsScanLimit: Story = {
+  name: "US visitors - Scan limit reached",
+  args: {
+    eligibleForPremium: true,
+    countryCode: "us",
+    scanLimitReached: true,
+  },
+};
+
+export const LandingRedesignNonUs: Story = {
+  name: "Non-US visitors",
+  args: {
+    eligibleForPremium: false,
+    countryCode: "nz",
+  },
+};
+
+export const LandingRedesignNonUsDe: Story = {
+  name: "German",
+  args: {
+    eligibleForPremium: false,
+    countryCode: "de",
+    l10n: getL10n("de"),
+  },
+};
+
+export const LandingRedesignNonUsFr: Story = {
+  name: "French",
+  args: {
+    eligibleForPremium: false,
+    countryCode: "fr",
+    l10n: getL10n("fr"),
+  },
+};