3f1a4922-6438-402b-8a31-b68b7edbe989

Build # 3f1a4922-6438-402b-8a31-b68b7edbe989

Build Type

push

circleci

Committed by GitHub Actions — l10n sync

Commit Message

Merge in latest l10n strings

Run Details

1561 of 2384 branches covered (65.48%)

Branch coverage included in aggregate %.

5107 of 6949 relevant lines covered (73.49%)

19.12 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

91.67

/frontend/src/pages/index.page.tsx

import { NextPage } from "next";
import { useRouter } from "next/router";
import Link from "next/link";
import Image from "next/image";
import styles from "./index.module.scss";
import Testimonials from "../../public/images/hero-brands.svg";
import HowItWorks1 from "../../public/images/how-it-works-1.svg";
import HowItWorks2 from "../../public/images/how-it-works-2.svg";
import HowItWorks3 from "../../public/images/how-it-works-3.svg";
import { useUsers } from "../hooks/api/user";
import { Layout } from "../components/layout/Layout";
import { useGaViewPing } from "../hooks/gaViewPing";
import { LinkButton } from "../components/Button";
import { DemoPhone } from "../components/landing/DemoPhone";
import { useRuntimeData } from "../hooks/api/runtimeData";
import {
  isBundleAvailableInCountry,
  isPeriodicalPremiumAvailableInCountry,
} from "../functions/getPlan";
import { FaqAccordionLanding } from "../components/landing/FaqAccordion";
import { Reviews } from "../components/landing/Reviews";
import { PlanMatrix } from "../components/landing/PlanMatrix";
import { BundleBanner } from "../components/landing/BundleBanner";
import { useFlaggedAnchorLinks } from "../hooks/flaggedAnchorLinks";
import { useL10n } from "../hooks/l10n";
import { HighlightedFeatures } from "../components/landing/HighlightedFeatures";

const Home: NextPage = () => {
  const l10n = useL10n();
  const router = useRouter();
  const runtimeData = useRuntimeData();
  const userData = useUsers();
  const heroCtaRef = useGaViewPing({
    category: "Sign In",
    label: "home-hero-cta",
  });

  useFlaggedAnchorLinks([runtimeData.data]);

  if (typeof userData.data?.[0] === "object" && !userData.error) {
    router.push("/accounts/profile/");
  }

  return (
    <Layout runtimeData={runtimeData.data}>
      <main>
        <section id="hero" className={styles.hero}>
          <div className={styles.lead}>
            <h2>{l10n.getString("hero-section-title")}</h2>
            <p>{l10n.getString("hero-section-body")}</p>
            <LinkButton
              ref={heroCtaRef}
              href={"#pricing"}
              className={styles.cta}
            >
              {l10n.getString("hero-section-cta")}
            </LinkButton>
            <Image
              src={Testimonials}
              alt="Forbes, ZDNet, Lifehacker, PCMag"
              className={styles["social-proof"]}
            />
          </div>
          <div className={styles["demo-phone"]}>
            <DemoPhone
              premium={isPeriodicalPremiumAvailableInCountry(runtimeData.data)}
            />
          </div>
        </section>
        {isBundleAvailableInCountry(runtimeData.data) && (
          <section id="vpn_promo" className={styles["bundle-banner-section"]}>
            <BundleBanner runtimeData={runtimeData.data} />
          </section>
        )}
        <section id="how_it_works" className={styles["how-it-works-wrapper"]}>
          <div className={styles["how-it-works"]}>
            <h2 className={styles.headline}>
              {l10n.getString("how-it-works-section-title")}
            </h2>
            <ol className={styles.steps}>
              <li className={styles.step}>
                <Image src={HowItWorks1} alt="" />
                <h3>
                  {l10n.getString("how-it-works-section-extension-headline")}
                </h3>
                <p>{l10n.getString("how-it-works-section-extension-body")}</p>
              </li>
              <li className={styles.step}>
                <Image src={HowItWorks2} alt="" />
                <h3>
                  {l10n.getString("how-it-works-section-forward-headline")}
                </h3>
                <p>{l10n.getString("how-it-works-section-forward-body")}</p>
              </li>
              <li className={styles.step}>
                <Image src={HowItWorks3} alt="" />
                <h3>
                  {l10n.getString("how-it-works-section-manage-headline")}
                </h3>
                <p>{l10n.getString("how-it-works-section-manage-body")}</p>
              </li>
            </ol>
          </div>
        </section>
        <div className={styles["page-break"]} />
        {/* 
          Enforcing a gray background for now to fix UI errors on
          mobile for reviews + plans section.
          Need to wait on design audit to fix white/grey background 
          discrepanies between pages. 
        */}
        <div className={styles["gray-bg"]}>
          <Reviews />
          {/* Anchor link "pricing" exists within the PlanMatrix component */}
          <div className={styles.plans}>
            <PlanMatrix runtimeData={runtimeData.data} />
          </div>
        </div>
        <section id="highlighted-features" className={styles.features}>
          <HighlightedFeatures />
        </section>

        <section id="faq" className={styles["faq-wrapper"]}>
          <div className={styles.faq}>
            <div className={styles.lead}>
              <h2 className={styles.headline}>
                {l10n.getString("landing-faq-headline")}
              </h2>
              <p>
                <Link href="/faq" className={styles["read-more"]}>
                  {l10n.getString("landing-faq-cta")}
                </Link>
              </p>
            </div>
            <div className={styles.entries}>
              <FaqAccordionLanding />
            </div>
          </div>
        </section>
      </main>
    </Layout>
  );
};

export default Home;

1	import { NextPage } from "next";
2	import { useRouter } from "next/router";	1✔
3	import Link from "next/link";	1✔
4	import Image from "next/image";	1✔
5	import styles from "./index.module.scss";	1✔
6	import Testimonials from "../../public/images/hero-brands.svg";	1✔
7	import HowItWorks1 from "../../public/images/how-it-works-1.svg";	1✔
8	import HowItWorks2 from "../../public/images/how-it-works-2.svg";	1✔
9	import HowItWorks3 from "../../public/images/how-it-works-3.svg";	1✔
10	import { useUsers } from "../hooks/api/user";	1✔
11	import { Layout } from "../components/layout/Layout";	1✔
12	import { useGaViewPing } from "../hooks/gaViewPing";	1✔
13	import { LinkButton } from "../components/Button";	1✔
14	import { DemoPhone } from "../components/landing/DemoPhone";	1✔
15	import { useRuntimeData } from "../hooks/api/runtimeData";	1✔
16	import {
17	isBundleAvailableInCountry,
18	isPeriodicalPremiumAvailableInCountry,
19	} from "../functions/getPlan";	1✔
20	import { FaqAccordionLanding } from "../components/landing/FaqAccordion";	1✔
21	import { Reviews } from "../components/landing/Reviews";	1✔
22	import { PlanMatrix } from "../components/landing/PlanMatrix";	1✔
23	import { BundleBanner } from "../components/landing/BundleBanner";	1✔
24	import { useFlaggedAnchorLinks } from "../hooks/flaggedAnchorLinks";	1✔
25	import { useL10n } from "../hooks/l10n";	1✔
26	import { HighlightedFeatures } from "../components/landing/HighlightedFeatures";	1✔
27
28	const Home: NextPage = () => {	1✔
29	const l10n = useL10n();	11✔
30	const router = useRouter();	11✔
31	const runtimeData = useRuntimeData();	11✔
32	const userData = useUsers();	11✔
33	const heroCtaRef = useGaViewPing({	11✔
34	category: "Sign In",
35	label: "home-hero-cta",
36	});
37
38	useFlaggedAnchorLinks([runtimeData.data]);	11✔
39
40	if (typeof userData.data?.[0] === "object" && !userData.error) {	11!
41	router.push("/accounts/profile/");	×
42	}
43
44	return (
45	<Layout runtimeData={runtimeData.data}>
46	<main>
47	<section id="hero" className={styles.hero}>
48	<div className={styles.lead}>
49	<h2>{l10n.getString("hero-section-title")}</h2>
50	<p>{l10n.getString("hero-section-body")}</p>
51	<LinkButton
52	ref={heroCtaRef}
53	href={"#pricing"}
54	className={styles.cta}
55	>
56	{l10n.getString("hero-section-cta")}
57	</LinkButton>
58	<Image
59	src={Testimonials}
60	alt="Forbes, ZDNet, Lifehacker, PCMag"
61	className={styles["social-proof"]}
62	/>
63	</div>
64	<div className={styles["demo-phone"]}>
65	<DemoPhone
66	premium={isPeriodicalPremiumAvailableInCountry(runtimeData.data)}
67	/>
68	</div>
69	</section>
70	{isBundleAvailableInCountry(runtimeData.data) && (	11✔
71	<section id="vpn_promo" className={styles["bundle-banner-section"]}>
72	<BundleBanner runtimeData={runtimeData.data} />
73	</section>
74	)}
75	<section id="how_it_works" className={styles["how-it-works-wrapper"]}>
76	<div className={styles["how-it-works"]}>
77	<h2 className={styles.headline}>
78	{l10n.getString("how-it-works-section-title")}
79	</h2>
80	<ol className={styles.steps}>
81	<li className={styles.step}>
82	<Image src={HowItWorks1} alt="" />
83	<h3>
84	{l10n.getString("how-it-works-section-extension-headline")}
85	</h3>
86	<p>{l10n.getString("how-it-works-section-extension-body")}</p>
87	</li>
88	<li className={styles.step}>
89	<Image src={HowItWorks2} alt="" />
90	<h3>
91	{l10n.getString("how-it-works-section-forward-headline")}
92	</h3>
93	<p>{l10n.getString("how-it-works-section-forward-body")}</p>
94	</li>
95	<li className={styles.step}>
96	<Image src={HowItWorks3} alt="" />
97	<h3>
98	{l10n.getString("how-it-works-section-manage-headline")}
99	</h3>
100	<p>{l10n.getString("how-it-works-section-manage-body")}</p>
101	</li>
102	</ol>
103	</div>
104	</section>
105	<div className={styles["page-break"]} />
106	{/*
107	Enforcing a gray background for now to fix UI errors on
108	mobile for reviews + plans section.
109	Need to wait on design audit to fix white/grey background
110	discrepanies between pages.
111	*/}
112	<div className={styles["gray-bg"]}>
113	<Reviews />
114	{/* Anchor link "pricing" exists within the PlanMatrix component */}
115	<div className={styles.plans}>
116	<PlanMatrix runtimeData={runtimeData.data} />
117	</div>
118	</div>
119	<section id="highlighted-features" className={styles.features}>
120	<HighlightedFeatures />
121	</section>
122
123	<section id="faq" className={styles["faq-wrapper"]}>
124	<div className={styles.faq}>
125	<div className={styles.lead}>
126	<h2 className={styles.headline}>
127	{l10n.getString("landing-faq-headline")}
128	</h2>
129	<p>
130	<Link href="/faq" className={styles["read-more"]}>
131	{l10n.getString("landing-faq-cta")}
132	</Link>
133	</p>
134	</div>
135	<div className={styles.entries}>
136	<FaqAccordionLanding />
137	</div>
138	</div>
139	</section>
140	</main>
141	</Layout>
142	);
143	};
144
145	export default Home;	11✔

mozilla / fx-private-relay / 3f1a4922-6438-402b-8a31-b68b7edbe989

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous