Allow scanning for exposures without logging in

Co-authored-by: Robert Helmer <rhelmer@mozilla.com>

locales/en/exposure-scan.ftl

@@ -0,0 +1,35 @@
+exposure-landing-hero-heading = Find out if your personal information has been compromised
+exposure-landing-hero-lead = Stay safe with privacy tools from the makers of { -brand-firefox } that protect you from hackers and companies that publish and sell your personal information. We’ll alert you of any known data breaches, find and remove your exposed info and continually watch for new exposures.
+exposure-landing-hero-email-label = Email address
+exposure-landing-hero-email-placeholder = Enter email address
+exposure-landing-hero-cta-label = Check for breaches
+
+exposure-landing-result-loading = Loading, please wait…
+exposure-landing-result-error = Something went wrong while checking for breaches. Please refresh the page and try again.
+
+# Variables:
+#   $email (string) - The user's email address, used to identify their data in breaches
+#   $count (number) - Number of data breaches in which the user's data was found
+exposure-landing-result-hero-heading =
+    { $count ->
+        [one] We found <email>{ $email }</email> exposed in <count>1</count> data breach.
+       *[other] We found <email>{ $email }</email> exposed in <count>{ $count }</count> data breaches.
+    }
+
+exposure-landing-result-card-added = Breach Added:
+exposure-landing-result-card-data = Exposed Data:
+exposure-landing-result-card-nothing = No breaches found
+
+exposure-landing-result-footer-attribution = Breach data provided by <hibp-link>{ -brand-HIBP }</hibp-link>
+
+exposure-landing-result-overflow-hero-lead = Sign in to get clear steps on how to resolve these breaches, view all breaches, and get continuous monitoring for any new known breaches.
+exposure-landing-result-overflow-hero-cta-label = Sign in to resolve breaches
+exposure-landing-result-overflow-footer-cta-label = Sign in to view all
+
+exposure-landing-result-some-hero-lead = Sign in to get clear steps on how to resolve these breaches, view all breaches, and get continuous monitoring for any new known breaches.
+exposure-landing-result-some-hero-cta-label = Sign in to resolve breaches
+exposure-landing-result-some-footer-cta-label = Sign in to resolve breaches
+
+exposure-landing-result-none-hero-lead = Good news! No known breaches were found. Stay safe by signing up for alerts for new breaches. We’ll keep monitoring this email and let you know if it appears in a new breach.
+exposure-landing-result-none-hero-cta-label = Get alerts about new breaches
+exposure-landing-result-none-footer-cta-label = Sign up for alerts

locales/en/landing.ftl

@@ -2,8 +2,6 @@
 
 ## Hero
 
-find-out-if-breached = Find out if you’ve been in a data breach
-stay-safe-with-tool = Stay safe with a simple yet powerful tool that tracks whether your personal information has been exposed in a data breach. We’ll help you understand what to do next and continuously monitor for any new breaches — all at no cost to you.
 get-started = Get started
 
 ## Why use Firefox Monitor?

package.json

@@ -39,6 +39,7 @@
     "uuid": "3.4.0"
   },
   "devDependencies": {
+    "@types/express": "^4.17.17",
     "@types/gtag.js": "^0.0.12",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",

src/client/css/global.css

@@ -2,6 +2,22 @@
  * 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/. */
 
+/* These styles are taken from
+ * https://react-spectrum.adobe.com/react-aria/VisuallyHidden.html,
+ * and are intended for content that's only relevant to screen reader users. */
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: 0 -1px -1px 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -132,7 +148,7 @@ section + section {
   margin-top: var(--padding-xl);
 }
 
-footer {
+.site-footer {
   position: sticky;
   top: 100%;
   width: 100%;
@@ -147,23 +163,23 @@ footer {
   z-index: 1;
 }
 
-footer a {
+.site-footer a {
   text-decoration: none;
 }
 
-footer > menu {
+.site-footer > menu {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--padding-md);
   font-size: 0.875rem;
 }
 
-.mobile footer {
+.mobile .site-footer {
   padding: var(--padding-lg);
 }
 
-.mobile footer > menu {
+.mobile .site-footer > menu {
   flex-basis: 100%;
   flex-direction: column;
   align-items: start;