MVP landing page for international users
This commit is contained in:
Vincent
Vincent
Родитель
fe81d9664f
Коммит
3274cb63b5
|
|
@ -0,0 +1,11 @@
|
|||
public-nav-name = { -brand-fx-monitor }
|
||||
|
||||
landing-all-hero-title = Find where your private info is exposed — and take it back
|
||||
landing-all-hero-lead = We scan data breaches to see if your data has been leaked and give you steps to fix it.
|
||||
|
||||
landing-all-hero-emailform-input-placeholder = yourname@example.com
|
||||
landing-all-hero-emailform-input-label = Enter your email address to check for data breach exposures.
|
||||
landing-all-hero-emailform-submit-label = Get free scan
|
||||
|
||||
# This is a label underneath a big number "14" - it's an image that demos Monitor.
|
||||
landing-all-hero-image-chart-label = exposures
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
landing-premium-hero-lead = We scan to see if your phone number, passwords or home address have been leaked, and help you make it private again.
|
||||
|
||||
landing-premium-hero-emailform-input-label = Enter your email address to check for data breach exposures and sites selling your info.
|
||||
|
||||
# This will be displayed in a smaller font, underneath the number 46, displayed
|
||||
# in a large font. This is part of a demo image, which is why the number is fixed.
|
||||
# Note: the hyphen is a so-called "non-breaking hyphen", which prevents
|
||||
# "auto‑removed" from being split across two lines. You might want to
|
||||
# copy-paste it when you also need a hyphen in your translation, unless it
|
||||
# results in a relatively long word.
|
||||
landing-premium-hero-image-removal-badge-label = exposures auto‑removed
|
||||
|
||||
# This is a label underneath a big number "50" - it's an image that demos Monitor.
|
||||
landing-premium-hero-image-chart-label = fixed
|
||||
|
|
@ -94,7 +94,6 @@ export default async function DashboardPage() {
|
|||
email: session.user.email,
|
||||
});
|
||||
const userIsEligibleForPremium = isEligibleForPremium(
|
||||
session.user,
|
||||
countryCode,
|
||||
enabledFlags,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,795 @@
|
|||
/* 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 { SVGProps } from "react";
|
||||
import { ExtendedReactLocalization } from "../../../hooks/l10n";
|
||||
|
||||
export const HeroImageAll = ({
|
||||
l10n,
|
||||
...svgProps
|
||||
}: SVGProps<SVGSVGElement> & { l10n: ExtendedReactLocalization }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="514"
|
||||
fill="none"
|
||||
viewBox="0 0 514 640"
|
||||
role="img"
|
||||
style={{ userSelect: "none" }}
|
||||
{...svgProps}
|
||||
>
|
||||
<g clipPath="url(#clip0_1942_12276)">
|
||||
<mask id="path-2-inside-1_1942_12276" fill="#fff">
|
||||
<path d="M482.528 123.926c5.841 0 10.575 4.734 10.575 10.575v70.5c0 5.84-4.734 10.575-10.575 10.575v-91.65z"></path>
|
||||
</mask>
|
||||
<path
|
||||
fill="url(#paint0_linear_1942_12276)"
|
||||
d="M482.528 123.926c5.841 0 10.575 4.734 10.575 10.575v70.5c0 5.84-4.734 10.575-10.575 10.575v-91.65z"
|
||||
></path>
|
||||
<path
|
||||
fill="#BFBFC7"
|
||||
d="M481.353 134.501v70.5h23.5v-70.5h-23.5zm12.925 81.075v-91.65h-23.5v91.65h23.5zm-12.925-10.575c0-.649.526-1.175 1.175-1.175v23.5c12.33 0 22.325-9.995 22.325-22.325h-23.5zm1.175-69.325a1.175 1.175 0 01-1.175-1.175h23.5c0-12.33-9.995-22.325-22.325-22.325v23.5z"
|
||||
mask="url(#path-2-inside-1_1942_12276)"
|
||||
></path>
|
||||
<path
|
||||
fill="#F9F9FA"
|
||||
stroke="#BFBFC7"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="9.4"
|
||||
d="M422.391 24.3H79.761C49.13 24.3 24.3 49.13 24.3 79.76v697.952c0 30.63 24.83 55.461 55.46 55.461h342.631c30.63 0 55.46-24.831 55.46-55.461V79.76c0-30.63-24.83-55.46-55.46-55.46z"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#paint1_linear_1942_12276)"
|
||||
d="M152.244 90.385l-4.005-2.294-9.144-5.236-.284-.163a4.889 4.889 0 00-4.836 0l-.284.165-12.858 7.364-.284.165a4.805 4.805 0 00-2.418 4.157v15.383a4.809 4.809 0 002.418 4.158l13.146 7.529a2.026 2.026 0 002.755-.731c.268-.46.34-1.008.201-1.521a1.988 1.988 0 00-.939-1.213l-12.858-7.363a1.373 1.373 0 01-.692-1.189V94.874c.001-.492.265-.946.692-1.19l2.276-1.304 10.568-6.064a1.394 1.394 0 011.379 0l12.862 7.366c.425.244.688.697.69 1.187v14.732a1.372 1.372 0 01-.693 1.189l-4.351 2.492-2.196-3.311a10.337 10.337 0 003.483-7.734c0-5.736-4.703-10.403-10.486-10.403s-10.487 4.667-10.487 10.403c0 5.736 4.704 10.402 10.487 10.402a10.518 10.518 0 003.54-.611l3.335 5.029c.052.077.109.15.17.22l.035.036c.07.076.147.146.229.209.02.016.038.033.06.048.09.065.185.123.284.174l.069.03c.088.04.179.073.273.101l.062.02c.106.027.214.044.323.052h.182c.061 0 .122-.007.182-.012h.084c.115-.016.228-.042.339-.077.029-.009.058-.022.088-.033.088-.032.173-.07.256-.114.018-.01.04-.015.058-.027l6.289-3.594a4.81 4.81 0 002.418-4.164V94.542a4.803 4.803 0 00-2.418-4.157zm-22.312 11.852a6.454 6.454 0 116.454 6.4 6.435 6.435 0 01-6.454-6.4z"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#paint2_linear_1942_12276)"
|
||||
d="M152.244 90.385l-4.005-2.294-9.144-5.236-.284-.163a4.889 4.889 0 00-4.836 0l-.284.165-12.858 7.364-.284.165a4.805 4.805 0 00-2.418 4.157v15.383a4.809 4.809 0 002.418 4.158l13.146 7.529a2.026 2.026 0 002.755-.731c.268-.46.34-1.008.201-1.521a1.988 1.988 0 00-.939-1.213l-12.858-7.363a1.373 1.373 0 01-.692-1.189V94.874c.001-.492.265-.946.692-1.19l2.276-1.304 10.568-6.064a1.394 1.394 0 011.379 0l12.862 7.366c.425.244.688.697.69 1.187v14.732a1.372 1.372 0 01-.693 1.189l-4.351 2.492-2.196-3.311a10.337 10.337 0 003.483-7.734c0-5.736-4.703-10.403-10.486-10.403s-10.487 4.667-10.487 10.403c0 5.736 4.704 10.402 10.487 10.402a10.518 10.518 0 003.54-.611l3.335 5.029c.052.077.109.15.17.22l.035.036c.07.076.147.146.229.209.02.016.038.033.06.048.09.065.185.123.284.174l.069.03c.088.04.179.073.273.101l.062.02c.106.027.214.044.323.052h.182c.061 0 .122-.007.182-.012h.084c.115-.016.228-.042.339-.077.029-.009.058-.022.088-.033.088-.032.173-.07.256-.114.018-.01.04-.015.058-.027l6.289-3.594a4.81 4.81 0 002.418-4.164V94.542a4.803 4.803 0 00-2.418-4.157zm-22.312 11.852a6.454 6.454 0 116.454 6.4 6.435 6.435 0 01-6.454-6.4z"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#paint3_linear_1942_12276)"
|
||||
d="M152.242 90.385l-4.005-2.294-5.587-3.197a4.308 4.308 0 00-4.16-.063l-2.795 1.485a1.396 1.396 0 011.38 0l12.862 7.366c.425.245.688.697.69 1.188v14.732a1.37 1.37 0 01-.693 1.189l-4.351 2.492.679 1.085a2.843 2.843 0 003.827.954l2.153-1.231a4.796 4.796 0 002.418-4.165V94.543a4.793 4.793 0 00-2.418-4.158z"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#paint4_linear_1942_12276)"
|
||||
d="M150.627 94.874v7.147h4.033v-7.478a4.793 4.793 0 00-2.418-4.158l-4.005-2.294-5.587-3.197a4.308 4.308 0 00-4.16-.063l-2.795 1.485a1.4 1.4 0 011.38 0l12.862 7.366c.426.246.689.7.69 1.192z"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#paint5_linear_1942_12276)"
|
||||
d="M150.625 103.171v6.431c0 .492-.265.945-.692 1.189l-4.351 2.491.678 1.086a2.846 2.846 0 003.828.954l2.153-1.232a4.795 4.795 0 002.418-4.164v-6.755h-4.034z"
|
||||
opacity="0.9"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#paint6_linear_1942_12276)"
|
||||
d="M145.274 112.815l-1.887-2.845a10.504 10.504 0 01-3.463 2.057l2.007 3.028a89.272 89.272 0 003.343-2.24z"
|
||||
opacity="0.9"
|
||||
></path>
|
||||
<text
|
||||
fill="#000"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-metropolis)"
|
||||
fontSize="29.225"
|
||||
fontWeight="bold"
|
||||
letterSpacing="-0.209"
|
||||
>
|
||||
<tspan x="169.275" y="112.431">
|
||||
Mozilla
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#000"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-metropolis)"
|
||||
fontSize="29.225"
|
||||
letterSpacing="-0.626"
|
||||
>
|
||||
<tspan x="276.115" y="112.431">
|
||||
Monitor
|
||||
</tspan>
|
||||
</text>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M47.502 161.79a5.65 5.65 0 015.65-5.649H448.89a5.649 5.649 0 015.65 5.649v486.072a5.65 5.65 0 01-5.65 5.65H53.151a5.65 5.65 0 01-5.649-5.65V161.79z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#000"
|
||||
strokeOpacity="0.1"
|
||||
strokeWidth="0.706"
|
||||
d="M53.152 155.788a6.002 6.002 0 00-6.003 6.002v486.072a6.003 6.003 0 006.003 6.003H448.89a6.003 6.003 0 006.003-6.003V161.79a6.002 6.002 0 00-6.003-6.002H53.151z"
|
||||
></path>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="161.529" y="536.999">
|
||||
{l10n.getString("passwords")}
|
||||
</tspan>
|
||||
</text>
|
||||
<rect
|
||||
width="11.236"
|
||||
height="11.236"
|
||||
x="141.1"
|
||||
y="525.128"
|
||||
fill="#9059FF"
|
||||
rx="2.043"
|
||||
></rect>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="344.905" y="538.02">
|
||||
4x
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="161.529" y="566.623">
|
||||
{l10n.getString("credit-cards")}
|
||||
</tspan>
|
||||
</text>
|
||||
<rect
|
||||
width="11.236"
|
||||
height="11.236"
|
||||
x="141.1"
|
||||
y="554.751"
|
||||
fill="#C689FF"
|
||||
rx="2.043"
|
||||
></rect>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="345.905" y="566.623">
|
||||
3x
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="161.529" y="595.224">
|
||||
{l10n.getString("bank-account-numbers")}
|
||||
</tspan>
|
||||
</text>
|
||||
<rect
|
||||
width="11.236"
|
||||
height="11.236"
|
||||
x="141.1"
|
||||
y="583.353"
|
||||
fill="#AB71FF"
|
||||
rx="2.043"
|
||||
></rect>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="344.905" y="595.224">
|
||||
2x
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="161.529" y="623.826">
|
||||
{l10n.getString("other-data-class")}
|
||||
</tspan>
|
||||
</text>
|
||||
<rect
|
||||
width="11.236"
|
||||
height="11.236"
|
||||
x="141.1"
|
||||
y="611.954"
|
||||
fill="#45278D"
|
||||
rx="2.043"
|
||||
></rect>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="345.905" y="623.826">
|
||||
1x
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="161.529" y="508.397">
|
||||
{l10n.getString("email-addresses")}
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="344.905" y="508.397">
|
||||
4x
|
||||
</tspan>
|
||||
</text>
|
||||
<rect
|
||||
width="11.236"
|
||||
height="11.236"
|
||||
x="141.1"
|
||||
y="496.526"
|
||||
fill="#592ACB"
|
||||
rx="2.043"
|
||||
></rect>
|
||||
<path
|
||||
fill="#C689FF"
|
||||
d="M284.794 194.159a137.898 137.898 0 0122.32 7.786l-16.923 37.75a96.602 96.602 0 00-15.624-5.45l10.227-40.086z"
|
||||
></path>
|
||||
<path
|
||||
fill="#AB71FF"
|
||||
d="M307.07 201.925a137.85 137.85 0 0120.666 11.476l-23.109 34.313a96.678 96.678 0 00-14.467-8.033l16.91-37.756z"
|
||||
></path>
|
||||
<path
|
||||
fill="#45278D"
|
||||
d="M327.105 212.978a137.924 137.924 0 0118.484 14.735l-28.466 30.02a96.618 96.618 0 00-12.939-10.315l22.921-34.44z"
|
||||
></path>
|
||||
<path
|
||||
fill="#89CFF5"
|
||||
d="M125.557 385.702a137.903 137.903 0 0113.869-139.372l33.383 24.435a96.535 96.535 0 00-9.708 97.561l-37.544 17.376z"
|
||||
></path>
|
||||
<path
|
||||
fill="#89CFF5"
|
||||
d="M139.207 246.631A137.887 137.887 0 01196.45 201a137.886 137.886 0 0172.531-9.904l-5.483 41.005a96.526 96.526 0 00-90.842 38.875l-33.449-24.345z"
|
||||
></path>
|
||||
<path
|
||||
fill="#592ACB"
|
||||
d="M345.588 227.712a137.912 137.912 0 0142.7 109.392 137.882 137.882 0 01-17.065 57.694 137.898 137.898 0 01-245.579-8.908l37.518-17.433a96.532 96.532 0 00183.851-34.15 96.527 96.527 0 00-29.89-76.574l28.465-30.021z"
|
||||
></path>
|
||||
<path
|
||||
fill="#9059FF"
|
||||
d="M125.636 385.872a137.9 137.9 0 01160.297-191.417l-10.569 39.997a96.525 96.525 0 00-120.362 80.703 96.533 96.533 0 008.154 53.289l-37.52 17.428z"
|
||||
></path>
|
||||
<circle cx="250.703" cy="326.247" r="96.53" fill="#fff"></circle>
|
||||
<text
|
||||
fill="#2A2A2A"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="50.847"
|
||||
fontWeight="600"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="222.257" y="338.181">
|
||||
14
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#5B5B5B"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="21"
|
||||
fontWeight="500"
|
||||
letterSpacing="0em"
|
||||
>
|
||||
<tspan x="199.295" y="373.251">
|
||||
{l10n.getString("landing-all-hero-image-chart-label")}
|
||||
</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_1942_12276"
|
||||
x1="487.816"
|
||||
x2="487.816"
|
||||
y1="123.926"
|
||||
y2="215.576"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#8060FE"></stop>
|
||||
<stop offset="1" stopColor="#626BFA"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_1942_12276"
|
||||
x1="143.726"
|
||||
x2="125.795"
|
||||
y1="87.129"
|
||||
y2="118.184"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#FF980E"></stop>
|
||||
<stop offset="0.21" stopColor="#FF7139"></stop>
|
||||
<stop offset="0.36" stopColor="#FF5854"></stop>
|
||||
<stop offset="0.46" stopColor="#FF4F5E"></stop>
|
||||
<stop offset="0.69" stopColor="#FF3750"></stop>
|
||||
<stop offset="0.86" stopColor="#F92261"></stop>
|
||||
<stop offset="1" stopColor="#F5156C"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_1942_12276"
|
||||
x1="143.726"
|
||||
x2="125.795"
|
||||
y1="87.129"
|
||||
y2="118.184"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#FFF44F" stopOpacity="0.8"></stop>
|
||||
<stop offset="0.09" stopColor="#FFF44F" stopOpacity="0.7"></stop>
|
||||
<stop offset="0.75" stopColor="#FFF44F" stopOpacity="0"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint3_linear_1942_12276"
|
||||
x1="145.178"
|
||||
x2="145.178"
|
||||
y1="123.182"
|
||||
y2="84.706"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#3A8EE6"></stop>
|
||||
<stop offset="0.24" stopColor="#5C79F0"></stop>
|
||||
<stop offset="0.63" stopColor="#9059FF"></stop>
|
||||
<stop offset="1" stopColor="#C139E6"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint4_linear_1942_12276"
|
||||
x1="138.637"
|
||||
x2="154.627"
|
||||
y1="84.567"
|
||||
y2="100.557"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#6E008B" stopOpacity="0.5"></stop>
|
||||
<stop offset="0.5" stopColor="#C846CB" stopOpacity="0"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint5_linear_1942_12276"
|
||||
x1="153.12"
|
||||
x2="145.611"
|
||||
y1="104.348"
|
||||
y2="111.857"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0.14" stopColor="#6A2BEA" stopOpacity="0"></stop>
|
||||
<stop offset="0.34" stopColor="#642DE4" stopOpacity="0.03"></stop>
|
||||
<stop offset="0.55" stopColor="#5131D3" stopOpacity="0.12"></stop>
|
||||
<stop offset="0.76" stopColor="#3139B7" stopOpacity="0.27"></stop>
|
||||
<stop offset="0.98" stopColor="#054490" stopOpacity="0.48"></stop>
|
||||
<stop offset="1" stopColor="#00458B" stopOpacity="0.5"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint6_linear_1942_12276"
|
||||
x1="141.074"
|
||||
x2="143.251"
|
||||
y1="110.805"
|
||||
y2="113.4"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#960E18" stopOpacity="0.6"></stop>
|
||||
<stop offset="0.19" stopColor="#AC1624" stopOpacity="0.48"></stop>
|
||||
<stop offset="0.58" stopColor="#E42C41" stopOpacity="0.16"></stop>
|
||||
<stop offset="0.75" stopColor="#FF3750" stopOpacity="0"></stop>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1942_12276">
|
||||
<path fill="#fff" d="M0 0h514v640H0V0z"></path>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const HeroImagePremium = ({
|
||||
l10n,
|
||||
...svgProps
|
||||
}: SVGProps<SVGSVGElement> & { l10n: ExtendedReactLocalization }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="475"
|
||||
fill="none"
|
||||
viewBox="0 0 475 622"
|
||||
role="img"
|
||||
style={{ userSelect: "none" }}
|
||||
{...svgProps}
|
||||
>
|
||||
<mask id="path-1-inside-1_1942_12539" fill="#fff">
|
||||
<path d="M463.528 104.926c5.841 0 10.575 4.734 10.575 10.575v70.5c0 5.84-4.734 10.575-10.575 10.575v-91.65z"></path>
|
||||
</mask>
|
||||
<path
|
||||
fill="url(#paint0_linear_1942_12539)"
|
||||
d="M463.528 104.926c5.841 0 10.575 4.734 10.575 10.575v70.5c0 5.84-4.734 10.575-10.575 10.575v-91.65z"
|
||||
></path>
|
||||
<path
|
||||
fill="#BFBFC7"
|
||||
d="M462.353 115.501v70.5h23.5v-70.5h-23.5zm12.925 81.075v-91.65h-23.5v91.65h23.5zm-12.925-10.575c0-.649.526-1.175 1.175-1.175v23.5c12.33 0 22.325-9.995 22.325-22.325h-23.5zm1.175-69.325a1.175 1.175 0 01-1.175-1.175h23.5c0-12.33-9.995-22.325-22.325-22.325v23.5z"
|
||||
mask="url(#path-1-inside-1_1942_12539)"
|
||||
></path>
|
||||
<path
|
||||
fill="#F9F9FA"
|
||||
stroke="#BFBFC7"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="9.4"
|
||||
d="M403.391 5.3H60.761C30.13 5.3 5.3 30.13 5.3 60.76v697.952c0 30.63 24.83 55.461 55.46 55.461h342.631c30.63 0 55.46-24.831 55.46-55.461V60.76c0-30.63-24.83-55.46-55.46-55.46z"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#paint1_linear_1942_12539)"
|
||||
d="M133.244 71.385l-4.005-2.294-9.144-5.236-.284-.163a4.889 4.889 0 00-4.836 0l-.284.165-12.858 7.364-.284.165a4.804 4.804 0 00-2.418 4.157v15.383a4.81 4.81 0 002.418 4.158l13.146 7.529a2.026 2.026 0 002.755-.731 1.99 1.99 0 00-.738-2.734l-12.858-7.363a1.372 1.372 0 01-.692-1.19V75.875c.001-.492.265-.946.692-1.19l2.276-1.304 10.568-6.064a1.394 1.394 0 011.379 0l12.862 7.366c.425.244.688.697.69 1.187v14.732a1.373 1.373 0 01-.693 1.19l-4.351 2.491-2.196-3.31a10.337 10.337 0 003.483-7.735c0-5.736-4.703-10.403-10.486-10.403s-10.487 4.667-10.487 10.403c0 5.736 4.704 10.402 10.487 10.402a10.502 10.502 0 003.54-.611l3.335 5.029c.052.077.109.15.17.22l.035.036c.07.076.147.146.229.209.02.016.038.033.06.048.09.065.185.124.284.174l.069.03c.088.04.179.073.273.1l.062.02c.106.027.214.045.323.053h.182c.061 0 .122-.007.182-.013h.084c.115-.015.228-.041.339-.076.029-.009.058-.022.088-.033.088-.032.173-.07.256-.114.018-.01.04-.015.058-.027l6.289-3.594a4.81 4.81 0 002.418-4.164V75.542a4.803 4.803 0 00-2.418-4.157zm-22.312 11.852a6.454 6.454 0 116.454 6.4 6.435 6.435 0 01-6.454-6.4z"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#paint2_linear_1942_12539)"
|
||||
d="M133.244 71.385l-4.005-2.294-9.144-5.236-.284-.163a4.889 4.889 0 00-4.836 0l-.284.165-12.858 7.364-.284.165a4.804 4.804 0 00-2.418 4.157v15.383a4.81 4.81 0 002.418 4.158l13.146 7.529a2.026 2.026 0 002.755-.731 1.99 1.99 0 00-.738-2.734l-12.858-7.363a1.372 1.372 0 01-.692-1.19V75.875c.001-.492.265-.946.692-1.19l2.276-1.304 10.568-6.064a1.394 1.394 0 011.379 0l12.862 7.366c.425.244.688.697.69 1.187v14.732a1.373 1.373 0 01-.693 1.19l-4.351 2.491-2.196-3.31a10.337 10.337 0 003.483-7.735c0-5.736-4.703-10.403-10.486-10.403s-10.487 4.667-10.487 10.403c0 5.736 4.704 10.402 10.487 10.402a10.502 10.502 0 003.54-.611l3.335 5.029c.052.077.109.15.17.22l.035.036c.07.076.147.146.229.209.02.016.038.033.06.048.09.065.185.124.284.174l.069.03c.088.04.179.073.273.1l.062.02c.106.027.214.045.323.053h.182c.061 0 .122-.007.182-.013h.084c.115-.015.228-.041.339-.076.029-.009.058-.022.088-.033.088-.032.173-.07.256-.114.018-.01.04-.015.058-.027l6.289-3.594a4.81 4.81 0 002.418-4.164V75.542a4.803 4.803 0 00-2.418-4.157zm-22.312 11.852a6.454 6.454 0 116.454 6.4 6.435 6.435 0 01-6.454-6.4z"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#paint3_linear_1942_12539)"
|
||||
d="M133.242 71.385l-4.005-2.294-5.587-3.197a4.308 4.308 0 00-4.16-.063l-2.795 1.485a1.396 1.396 0 011.38 0l12.862 7.366c.425.245.688.697.69 1.188v14.732a1.37 1.37 0 01-.693 1.189l-4.351 2.492.679 1.085a2.844 2.844 0 003.827.954l2.153-1.231a4.796 4.796 0 002.418-4.165V75.543a4.793 4.793 0 00-2.418-4.158z"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#paint4_linear_1942_12539)"
|
||||
d="M131.627 75.874v7.147h4.033v-7.478a4.793 4.793 0 00-2.418-4.158l-4.005-2.294-5.587-3.197a4.308 4.308 0 00-4.16-.063l-2.795 1.485a1.4 1.4 0 011.38 0l12.862 7.366c.426.246.689.7.69 1.192z"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#paint5_linear_1942_12539)"
|
||||
d="M131.625 84.171v6.43c0 .493-.265.946-.692 1.19l-4.351 2.491.678 1.086a2.846 2.846 0 003.828.954l2.153-1.232a4.796 4.796 0 002.418-4.164V84.17h-4.034z"
|
||||
opacity="0.9"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#paint6_linear_1942_12539)"
|
||||
d="M126.274 93.815l-1.887-2.845a10.503 10.503 0 01-3.463 2.057l2.007 3.028a88.786 88.786 0 003.343-2.24z"
|
||||
opacity="0.9"
|
||||
></path>
|
||||
<text
|
||||
fill="#000"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-metropolis)"
|
||||
fontSize="29.225"
|
||||
fontWeight="bold"
|
||||
letterSpacing="-0.209"
|
||||
>
|
||||
<tspan x="150.275" y="93.431">
|
||||
Mozilla
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#000"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-metropolis)"
|
||||
fontSize="29.225"
|
||||
letterSpacing="-0.626"
|
||||
>
|
||||
<tspan x="257.115" y="93.431">
|
||||
Monitor
|
||||
</tspan>
|
||||
</text>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M28.502 142.79a5.65 5.65 0 015.65-5.649H429.89a5.649 5.649 0 015.65 5.649v486.072a5.65 5.65 0 01-5.65 5.65H34.151a5.65 5.65 0 01-5.649-5.65V142.79z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#000"
|
||||
strokeOpacity="0.1"
|
||||
strokeWidth="0.706"
|
||||
d="M34.152 136.788a6.002 6.002 0 00-6.003 6.002v486.072a6.003 6.003 0 006.003 6.003H429.89a6.003 6.003 0 006.003-6.003V142.79a6.002 6.002 0 00-6.003-6.002H34.151z"
|
||||
></path>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="142.529" y="517.999">
|
||||
{l10n.getString("exposure-card-address")}
|
||||
</tspan>
|
||||
</text>
|
||||
<rect
|
||||
width="11.236"
|
||||
height="11.236"
|
||||
x="122.1"
|
||||
y="506.128"
|
||||
fill="#9059FF"
|
||||
rx="2.043"
|
||||
></rect>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="325.905" y="519.02">
|
||||
15x
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="142.529" y="547.623">
|
||||
{l10n.getString("exposure-card-phone-number")}
|
||||
</tspan>
|
||||
</text>
|
||||
<rect
|
||||
width="11.236"
|
||||
height="11.236"
|
||||
x="122.1"
|
||||
y="535.751"
|
||||
fill="#C689FF"
|
||||
rx="2.043"
|
||||
></rect>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="326.905" y="547.623">
|
||||
10x
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="142.529" y="576.224">
|
||||
{l10n.getString("exposure-card-family-members")}
|
||||
</tspan>
|
||||
</text>
|
||||
<rect
|
||||
width="11.236"
|
||||
height="11.236"
|
||||
x="122.1"
|
||||
y="564.353"
|
||||
fill="#AB71FF"
|
||||
rx="2.043"
|
||||
></rect>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="325.905" y="576.224">
|
||||
7x
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="142.529" y="604.826">
|
||||
{l10n.getString("exposure-card-other")}
|
||||
</tspan>
|
||||
</text>
|
||||
<rect
|
||||
width="11.236"
|
||||
height="11.236"
|
||||
x="122.1"
|
||||
y="592.954"
|
||||
fill="#45278D"
|
||||
rx="2.043"
|
||||
></rect>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="326.905" y="604.826">
|
||||
3x
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="142.529" y="489.397">
|
||||
{l10n.getString("exposure-card-email")}
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#6D6D6E"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="16.344"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="325.905" y="489.397">
|
||||
15x
|
||||
</tspan>
|
||||
</text>
|
||||
<rect
|
||||
width="11.236"
|
||||
height="11.236"
|
||||
x="122.1"
|
||||
y="477.526"
|
||||
fill="#592ACB"
|
||||
rx="2.043"
|
||||
></rect>
|
||||
<path
|
||||
fill="#C689FF"
|
||||
d="M265.794 175.159a137.898 137.898 0 0122.32 7.786l-16.923 37.75a96.602 96.602 0 00-15.624-5.45l10.227-40.086z"
|
||||
></path>
|
||||
<path
|
||||
fill="#AB71FF"
|
||||
d="M288.07 182.925a137.85 137.85 0 0120.666 11.476l-23.109 34.313a96.678 96.678 0 00-14.467-8.033l16.91-37.756z"
|
||||
></path>
|
||||
<path
|
||||
fill="#45278D"
|
||||
d="M308.105 193.978a137.924 137.924 0 0118.484 14.735l-28.466 30.02a96.618 96.618 0 00-12.939-10.315l22.921-34.44z"
|
||||
></path>
|
||||
<path
|
||||
fill="#89CFF5"
|
||||
d="M106.557 366.702a137.9 137.9 0 0113.869-139.372l33.383 24.435a96.535 96.535 0 00-9.708 97.561l-37.544 17.376z"
|
||||
></path>
|
||||
<path
|
||||
fill="#89CFF5"
|
||||
d="M120.207 227.631A137.887 137.887 0 01177.45 182a137.886 137.886 0 0172.531-9.904l-5.483 41.005a96.526 96.526 0 00-90.842 38.875l-33.449-24.345z"
|
||||
></path>
|
||||
<path
|
||||
fill="#592ACB"
|
||||
d="M326.588 208.712a137.912 137.912 0 0142.7 109.392 137.882 137.882 0 01-17.065 57.694 137.898 137.898 0 01-245.579-8.908l37.518-17.433a96.532 96.532 0 00183.851-34.15 96.527 96.527 0 00-29.89-76.574l28.465-30.021z"
|
||||
></path>
|
||||
<path
|
||||
fill="#9059FF"
|
||||
d="M106.636 366.872a137.9 137.9 0 01160.297-191.417l-10.569 39.997a96.525 96.525 0 00-120.362 80.703 96.533 96.533 0 008.154 53.289l-37.52 17.428z"
|
||||
></path>
|
||||
<circle cx="231.703" cy="307.247" r="96.53" fill="#fff"></circle>
|
||||
<text
|
||||
fill="#2A2A2A"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="50.847"
|
||||
fontWeight="600"
|
||||
letterSpacing="0"
|
||||
>
|
||||
<tspan x="199.359" y="319.181">
|
||||
50
|
||||
</tspan>
|
||||
</text>
|
||||
<text
|
||||
fill="#5B5B5B"
|
||||
style={{ whiteSpace: "pre" }}
|
||||
fontFamily="var(--font-inter)"
|
||||
fontSize="21"
|
||||
fontWeight="500"
|
||||
letterSpacing="0em"
|
||||
>
|
||||
<tspan x="207.132" y="354.251">
|
||||
{l10n.getString("landing-premium-hero-image-chart-label")}
|
||||
</tspan>
|
||||
</text>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_1942_12539"
|
||||
x1="468.816"
|
||||
x2="468.816"
|
||||
y1="104.926"
|
||||
y2="196.576"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#8060FE"></stop>
|
||||
<stop offset="1" stopColor="#626BFA"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_1942_12539"
|
||||
x1="124.726"
|
||||
x2="106.795"
|
||||
y1="68.129"
|
||||
y2="99.184"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#FF980E"></stop>
|
||||
<stop offset="0.21" stopColor="#FF7139"></stop>
|
||||
<stop offset="0.36" stopColor="#FF5854"></stop>
|
||||
<stop offset="0.46" stopColor="#FF4F5E"></stop>
|
||||
<stop offset="0.69" stopColor="#FF3750"></stop>
|
||||
<stop offset="0.86" stopColor="#F92261"></stop>
|
||||
<stop offset="1" stopColor="#F5156C"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint2_linear_1942_12539"
|
||||
x1="124.726"
|
||||
x2="106.795"
|
||||
y1="68.129"
|
||||
y2="99.184"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#FFF44F" stopOpacity="0.8"></stop>
|
||||
<stop offset="0.09" stopColor="#FFF44F" stopOpacity="0.7"></stop>
|
||||
<stop offset="0.75" stopColor="#FFF44F" stopOpacity="0"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint3_linear_1942_12539"
|
||||
x1="126.178"
|
||||
x2="126.178"
|
||||
y1="104.182"
|
||||
y2="65.706"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#3A8EE6"></stop>
|
||||
<stop offset="0.24" stopColor="#5C79F0"></stop>
|
||||
<stop offset="0.63" stopColor="#9059FF"></stop>
|
||||
<stop offset="1" stopColor="#C139E6"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint4_linear_1942_12539"
|
||||
x1="119.637"
|
||||
x2="135.627"
|
||||
y1="65.567"
|
||||
y2="81.557"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#6E008B" stopOpacity="0.5"></stop>
|
||||
<stop offset="0.5" stopColor="#C846CB" stopOpacity="0"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint5_linear_1942_12539"
|
||||
x1="134.12"
|
||||
x2="126.611"
|
||||
y1="85.348"
|
||||
y2="92.857"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0.14" stopColor="#6A2BEA" stopOpacity="0"></stop>
|
||||
<stop offset="0.34" stopColor="#642DE4" stopOpacity="0.03"></stop>
|
||||
<stop offset="0.55" stopColor="#5131D3" stopOpacity="0.12"></stop>
|
||||
<stop offset="0.76" stopColor="#3139B7" stopOpacity="0.27"></stop>
|
||||
<stop offset="0.98" stopColor="#054490" stopOpacity="0.48"></stop>
|
||||
<stop offset="1" stopColor="#00458B" stopOpacity="0.5"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint6_linear_1942_12539"
|
||||
x1="122.074"
|
||||
x2="124.251"
|
||||
y1="91.805"
|
||||
y2="94.4"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#960E18" stopOpacity="0.6"></stop>
|
||||
<stop offset="0.19" stopColor="#AC1624" stopOpacity="0.48"></stop>
|
||||
<stop offset="0.58" stopColor="#E42C41" stopOpacity="0.16"></stop>
|
||||
<stop offset="0.75" stopColor="#FF3750" stopOpacity="0"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
@import "../../../tokens";
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $spacing-lg $layout-xl;
|
||||
background-color: $color-grey-05;
|
||||
|
||||
h1 {
|
||||
font: $text-title-3xs;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $spacing-lg;
|
||||
padding-inline: $spacing-md;
|
||||
padding-block-start: $spacing-xl;
|
||||
width: 100%;
|
||||
background-position: bottom center;
|
||||
background-size: cover;
|
||||
background-image: radial-gradient(
|
||||
circle at center,
|
||||
rgba(184, 51, 225, 0.08) 0,
|
||||
rgba(144, 89, 255, 0.08) 37.1%,
|
||||
rgba(91, 109, 248, 0.08) 61.4%,
|
||||
rgba(0, 144, 237, 0.08) 100%
|
||||
);
|
||||
|
||||
@media screen and (min-width: $screen-lg) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
gap: $layout-lg;
|
||||
padding-inline: $layout-lg;
|
||||
|
||||
.heroContent {
|
||||
flex: 1 1 $content-sm;
|
||||
}
|
||||
|
||||
.heroImage {
|
||||
flex: 1 1 $content-sm;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $screen-xl) {
|
||||
gap: $layout-xl;
|
||||
padding-inline: $layout-xl;
|
||||
}
|
||||
|
||||
.heroContent {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
max-width: $screen-xl / 2;
|
||||
|
||||
h1 {
|
||||
font: $text-title-md;
|
||||
color: $color-grey-60;
|
||||
}
|
||||
|
||||
p {
|
||||
font: $text-body-lg;
|
||||
color: $color-grey-50;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacing-sm;
|
||||
|
||||
input {
|
||||
flex: 1 0 auto;
|
||||
border-radius: $border-radius-md;
|
||||
border: 1px solid $color-grey-20;
|
||||
padding: $spacing-md;
|
||||
font: $text-body-xl;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1 0 auto;
|
||||
font: $text-title-xs;
|
||||
}
|
||||
|
||||
label {
|
||||
font: $text-body-sm;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heroImage {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
max-width: min($screen-xl / 2, 100%);
|
||||
padding-inline: $spacing-md;
|
||||
|
||||
.heroImageBadge {
|
||||
position: absolute;
|
||||
top: 33%;
|
||||
left: -1 * $layout-xs;
|
||||
background-color: $color-green-90;
|
||||
color: $color-white;
|
||||
border-radius: $border-radius-md;
|
||||
box-shadow: $box-shadow-sm;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: $spacing-sm;
|
||||
|
||||
@media screen and (max-width: $screen-xs) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nr {
|
||||
font: $text-title-md;
|
||||
}
|
||||
|
||||
.description {
|
||||
font: $text-body-sm;
|
||||
width: $layout-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
/* 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 } from "./LandingView";
|
||||
import { getEnL10nSync } from "../../../functions/server/mockL10n";
|
||||
|
||||
const meta: Meta<typeof View> = {
|
||||
title: "Pages/Public landing page",
|
||||
component: View,
|
||||
args: {
|
||||
l10n: getEnL10nSync(),
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof View>;
|
||||
|
||||
export const LandingUs: Story = {
|
||||
name: "US visitors",
|
||||
args: {
|
||||
eligibleForPremium: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const LandingNonUs: Story = {
|
||||
name: "Non-US visitors",
|
||||
args: {
|
||||
eligibleForPremium: false,
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/* 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 { it, expect } from "@jest/globals";
|
||||
import { composeStory } from "@storybook/react";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { userEvent } from "@testing-library/user-event";
|
||||
import { axe } from "jest-axe";
|
||||
import { signIn } from "next-auth/react";
|
||||
import Meta, { LandingNonUs, LandingUs } from "./LandingView.stories";
|
||||
|
||||
jest.mock("next-auth/react");
|
||||
|
||||
describe("When Premium is not available", () => {
|
||||
it("passes the axe accessibility test suite", async () => {
|
||||
const ComposedDashboard = composeStory(LandingNonUs, Meta);
|
||||
const { container } = render(<ComposedDashboard />);
|
||||
expect(await axe(container)).toHaveNoViolations();
|
||||
});
|
||||
|
||||
it("passes the user's email address to the identity provider", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
const ComposedDashboard = composeStory(LandingNonUs, Meta);
|
||||
render(<ComposedDashboard />);
|
||||
|
||||
const inputField = screen.getByLabelText(
|
||||
"Enter your email address to check for data breach exposures.",
|
||||
);
|
||||
await user.type(inputField, "mail@example.com");
|
||||
|
||||
const submitButton = screen.getByRole("button", { name: "Get free scan" });
|
||||
await user.click(submitButton);
|
||||
|
||||
expect(signIn).toHaveBeenCalledTimes(1);
|
||||
expect(signIn).toHaveBeenCalledWith("fxa", expect.any(Object), {
|
||||
email: "mail@example.com",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("When Premium is available", () => {
|
||||
it("passes the axe accessibility test suite", async () => {
|
||||
const ComposedDashboard = composeStory(LandingUs, Meta);
|
||||
const { container } = render(<ComposedDashboard />);
|
||||
expect(await axe(container)).toHaveNoViolations();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
/* 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 styles from "./LandingView.module.scss";
|
||||
import { HeroImageAll, HeroImagePremium } from "./HeroImage";
|
||||
import { SignUpForm } from "./SignUpForm";
|
||||
import { ExtendedReactLocalization } from "../../../hooks/l10n";
|
||||
|
||||
export type Props = {
|
||||
eligibleForPremium: boolean;
|
||||
l10n: ExtendedReactLocalization;
|
||||
};
|
||||
|
||||
export const View = (props: Props) => {
|
||||
return (
|
||||
<main className={styles.wrapper}>
|
||||
<nav className={styles.nav}>
|
||||
<h1>{props.l10n.getString("public-nav-name")}</h1>
|
||||
</nav>
|
||||
<header className={styles.hero}>
|
||||
<div className={styles.heroContent}>
|
||||
<h1>{props.l10n.getString("landing-all-hero-title")}</h1>
|
||||
<p>
|
||||
{props.l10n.getString(
|
||||
props.eligibleForPremium
|
||||
? "landing-premium-hero-lead"
|
||||
: "landing-all-hero-lead",
|
||||
)}
|
||||
</p>
|
||||
<SignUpForm
|
||||
eligibleForPremium={props.eligibleForPremium}
|
||||
signUpCallbackUrl={`${process.env.SERVER_URL}/redesign/user/dashboard/`}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.heroImage}>
|
||||
<HeroImage {...props} />
|
||||
</div>
|
||||
</header>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
const HeroImage = (props: Props) => {
|
||||
if (!props.eligibleForPremium) {
|
||||
return (
|
||||
<HeroImageAll
|
||||
className={styles.heroImage}
|
||||
l10n={props.l10n}
|
||||
aria-hidden={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HeroImagePremium
|
||||
className={styles.heroImage}
|
||||
l10n={props.l10n}
|
||||
aria-hidden={true}
|
||||
/>
|
||||
<div role="img" aria-hidden={true} className={styles.heroImageBadge}>
|
||||
<b className={styles.nr}>46</b>
|
||||
<span className={styles.description}>
|
||||
{props.l10n.getString(
|
||||
"landing-premium-hero-image-removal-badge-label",
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
/* 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/. */
|
||||
|
||||
"use client";
|
||||
|
||||
import { FormEventHandler, useId, useState } from "react";
|
||||
import { signIn } from "next-auth/react";
|
||||
import { useL10n } from "../../../hooks/l10n";
|
||||
import { Button } from "../../../components/server/Button";
|
||||
|
||||
export type Props = {
|
||||
eligibleForPremium: boolean;
|
||||
signUpCallbackUrl: string;
|
||||
};
|
||||
|
||||
export const SignUpForm = (props: Props) => {
|
||||
const emailInputId = useId();
|
||||
const l10n = useL10n();
|
||||
const [emailInput, setEmailInput] = useState("");
|
||||
|
||||
const onSubmit: FormEventHandler = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
void signIn(
|
||||
"fxa",
|
||||
{ callbackUrl: props.signUpCallbackUrl },
|
||||
// This passes an `?email=` query parameter to FxA, causing it to prefill
|
||||
// the email address in the sign-up form. See
|
||||
// https://mozilla.github.io/ecosystem-platform/relying-parties/reference/query-parameters#email
|
||||
{ email: emailInput },
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit}>
|
||||
<input
|
||||
name={emailInputId}
|
||||
id={emailInputId}
|
||||
onChange={(e) => setEmailInput(e.target.value)}
|
||||
value={emailInput}
|
||||
type="email"
|
||||
placeholder={l10n.getString(
|
||||
"landing-all-hero-emailform-input-placeholder",
|
||||
)}
|
||||
/>
|
||||
<Button type="submit" variant="primary" wide>
|
||||
{l10n.getString("landing-all-hero-emailform-submit-label")}
|
||||
</Button>
|
||||
<label htmlFor={emailInputId}>
|
||||
{l10n.getString(
|
||||
props.eligibleForPremium
|
||||
? "landing-premium-hero-emailform-input-label"
|
||||
: "landing-all-hero-emailform-input-label",
|
||||
)}
|
||||
</label>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/* 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 { headers } from "next/headers";
|
||||
import { getCountryCode } from "../../../functions/server/getCountryCode";
|
||||
import { isEligibleForPremium } from "../../../functions/server/onerep";
|
||||
import { getEnabledFeatureFlags } from "../../../../db/tables/featureFlags";
|
||||
import { getL10n } from "../../../functions/server/l10n";
|
||||
import { View } from "./LandingView";
|
||||
|
||||
export default async function Page() {
|
||||
const enabledFlags = await getEnabledFeatureFlags({ ignoreAllowlist: true });
|
||||
const countryCode = getCountryCode(headers());
|
||||
const eligibleForPremium = isEligibleForPremium(countryCode, enabledFlags);
|
||||
|
||||
return <View eligibleForPremium={eligibleForPremium} l10n={getL10n()} />;
|
||||
}
|
||||
|
|
@ -363,7 +363,6 @@ export async function isEligibleForFreeScan(
|
|||
}
|
||||
|
||||
export function isEligibleForPremium(
|
||||
user: Session["user"],
|
||||
countryCode: string,
|
||||
enabledFlags: FeatureFlagName[],
|
||||
) {
|
||||
|
|
@ -371,10 +370,6 @@ export function isEligibleForPremium(
|
|||
return false;
|
||||
}
|
||||
|
||||
if (!user?.subscriber?.id) {
|
||||
throw new Error("No session");
|
||||
}
|
||||
|
||||
if (!enabledFlags.includes("PremiumBrokerRemoval")) {
|
||||
return false;
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче