1 files changed, 79 insertions, 0 deletions
diff --git a/browser/components/pocket/content/panels/js/components/Signup/Signup.jsx b/browser/components/pocket/content/panels/js/components/Signup/Signup.jsx
new file mode 100644
index 0000000000..7e628c0ad5
--- /dev/null
+++ b/browser/components/pocket/content/panels/js/components/Signup/Signup.jsx
@@ -0,0 +1,79 @@
+/* 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 React from "react";
+import Header from "../Header/Header";
+import Button from "../Button/Button";
+
+function Signup(props) {
+  const { locale, pockethost, utmSource, utmCampaign, utmContent } = props;
+  const utmParams = `utm_source=${utmSource}${
+    utmCampaign && utmContent
+      ? `&utm_campaign=${utmCampaign}&utm_content=${utmContent}`
+      : ``
+  }`;
+  return (
+    <div className="stp_panel_container">
+      <div className="stp_panel stp_panel_signup">
+        <Header>
+          <Button
+            style="secondary"
+            url={`https://${pockethost}/login?${utmParams}`}
+            source="log_in"
+          >
+            <span data-l10n-id="pocket-panel-signup-login" />
+          </Button>
+        </Header>
+        <hr />
+        {locale?.startsWith("en") ? (
+          <>
+            <div className="stp_signup_content_wrapper">
+              <h3
+                className="header_medium"
+                data-l10n-id="pocket-panel-signup-cta-a-fix"
+              />
+              <p data-l10n-id="pocket-panel-signup-cta-b-updated" />
+            </div>
+            <div className="stp_signup_content_wrapper">
+              <hr />
+            </div>
+            <div className="stp_signup_content_wrapper">
+              <div className="stp_signup_img_rainbow_reader" />
+              <h3 className="header_medium">
+                Get thought-provoking article recommendations
+              </h3>
+              <p>
+                Find stories that go deep into a subject or offer a new
+                perspective.
+              </p>
+            </div>
+          </>
+        ) : (
+          <div className="stp_signup_content_wrapper">
+            <h3
+              className="header_large"
+              data-l10n-id="pocket-panel-signup-cta-a-fix"
+            />
+            <p data-l10n-id="pocket-panel-signup-cta-b-short" />
+            <strong>
+              <p data-l10n-id="pocket-panel-signup-cta-c-updated" />
+            </strong>
+          </div>
+        )}
+        <hr />
+        <span className="stp_button_wide">
+          <Button
+            style="primary"
+            url={`https://${pockethost}/ff_signup?${utmParams}`}
+            source="sign_up_1"
+          >
+            <span data-l10n-id="pocket-panel-button-activate" />
+          </Button>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default Signup;