feat(web): Update information copy and CTAs

web/src/components/buttons/ApiButton.tsx

@@ -0,0 +1,25 @@
+import { Button, ButtonProps } from 'components/Button';
+import { useTranslation } from 'react-i18next';
+
+interface ApiButtonProps
+  extends Omit<
+    ButtonProps,
+    'icon' | 'children' | 'href' | 'onClick' | 'backgroundClasses' | 'foregroundClasses'
+  > {
+  iconSize?: number;
+}
+
+export function ApiButton({ ...restProps }: ApiButtonProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Button
+      href={
+        'https://electricitymaps.com/pricing?utm_source=app.electricitymaps.com&utm_medium=referral&utm_campaign=api-cta'
+      }
+      {...restProps}
+    >
+      {t('button.api')}
+    </Button>
+  );
+}

web/src/components/buttons/DocumentationButton.tsx

@@ -0,0 +1,20 @@
+import { Button, ButtonProps } from 'components/Button';
+import { useTranslation } from 'react-i18next';
+
+interface DocsButtonProps
+  extends Omit<
+    ButtonProps,
+    'icon' | 'children' | 'href' | 'onClick' | 'backgroundClasses' | 'foregroundClasses'
+  > {
+  iconSize?: number;
+}
+
+export function DocumentationButton({ ...restProps }: DocsButtonProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Button href={'https://docs.electricitymaps.com/'} {...restProps}>
+      {t('button.docs')}
+    </Button>
+  );
+}

web/src/features/modals/InfoModal.tsx

@@ -1,6 +1,7 @@
+import { ApiButton } from 'components/buttons/ApiButton';
+import { DocumentationButton } from 'components/buttons/DocumentationButton';
 import { FAQButton } from 'components/buttons/FAQButton';
 import { FeedbackButton } from 'components/buttons/FeedbackButton';
-import { GithubButton } from 'components/buttons/GithubButton';
 import { LegalNoticeButton } from 'components/buttons/LegalNoticeButton';
 import { LinkedinButton } from 'components/buttons/LinkedinButton';
 import { PrivacyPolicyButton } from 'components/buttons/PrivacyPolicyButton';
@@ -28,10 +29,11 @@ export function InfoModalContent() {
     <div className="flex flex-col items-center">
       <InfoText />
       <div className="w-[330px] space-y-2 py-2">
-        <FAQButton />
+        <ApiButton />
+        <DocumentationButton />
         <FeedbackButton />
         <LinkedinButton />
-        <GithubButton />
+        <FAQButton />
       </div>
       <div className="flex gap-x-4">
         <PrivacyPolicyButton />

web/src/features/modals/InfoText.tsx

@@ -1,17 +1,16 @@
+import { Link } from 'components/Link';
 import { useTranslation } from 'react-i18next';
 
 export default function InfoText() {
   const { t } = useTranslation();
   return (
     <div className="prose dark:prose-invert prose-p:my-1 prose-p:leading-snug prose-a:no-underline hover:prose-a:underline">
-      <p className="mb-4">{t('info.text')}</p>
-      <p
-        dangerouslySetInnerHTML={{
-          __html: t('info.open-source-text', {
-            link: 'https://github.com/electricitymaps/electricitymaps-contrib',
-          }),
-        }}
-      />
+      <p className="mb-4">
+        <Link href="https://electricitymaps.com/?utm_source=app.electricitymaps.com&utm_medium=referral&utm_campaign=about-section">
+          Electricity Maps
+        </Link>{' '}
+        {t('info.text')}
+      </p>
     </div>
   );
 }

web/src/features/panels/ranking-panel/RankingPanel.tsx

@@ -5,7 +5,7 @@ import { useGetCanonicalUrl } from 'hooks/useGetCanonicalUrl';
 import { useAtomValue } from 'jotai';
 import { ReactElement, useCallback, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { metaTitleSuffix } from 'utils/constants';
 import {
   isConsumptionAtom,
@@ -16,7 +16,6 @@ import {
 import { getRankedState } from './getRankingPanelData';
 import RankingPanelAccordion from './RankingPanelAccordion';
 import SearchBar from './SearchBar';
-import SocialIconRow from './SocialIcons';
 import { VirtualizedZoneList } from './ZoneList';
 
 export default function RankingPanel(): ReactElement {
@@ -55,16 +54,16 @@ export default function RankingPanel(): ReactElement {
   );
 
   return (
-    <div className="flex h-[calc(100vh-236px)] w-full flex-col py-3 pl-4 pr-1 ">
+    <div className="flex h-[calc(100vh-220px)] w-full flex-col py-3 pl-4 pr-1 ">
       <Helmet prioritizeSeoTags>
         <title>{t('misc.maintitle') + metaTitleSuffix}</title>
         <link rel="canonical" href={canonicalUrl} />
       </Helmet>
 
-      <div className="flex flex-grow flex-col overflow-hidden ">
+      <div className="flex flex-grow flex-col overflow-hidden pr-2">
         <div className="pb-5">
           <h1>{t('ranking-panel.title')}</h1>
-          <h2 className="text-sm">{t('ranking-panel.subtitle')}</h2>
+          <p className="text-sm">{<Trans i18nKey="ranking-panel.subtitle" />}</p>
         </div>
 
         <SearchBar
@@ -83,7 +82,6 @@ export default function RankingPanel(): ReactElement {
       <div className="mt-auto py-2 pr-3">
         <RankingPanelAccordion />
         <HorizontalDivider />
-        <SocialIconRow />
       </div>
     </div>
   );

web/src/features/panels/ranking-panel/RankingPanelAccordion.tsx

@@ -1,10 +1,8 @@
 import Accordion from 'components/Accordion';
-import { GithubButton } from 'components/buttons/GithubButton';
-import { LinkedinButton } from 'components/buttons/LinkedinButton';
-import { RedditButton } from 'components/buttons/RedditButton';
+import { Link } from 'components/Link';
 import InfoText from 'features/modals/InfoText';
 import { useAtom } from 'jotai';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { rankingPanelAccordionCollapsedAtom } from 'utils/state/atoms';
 
 export default function RankingPanelAccordion() {
@@ -15,17 +13,11 @@
   return (
     <Accordion
       title={t('info.title')}
-      className="py-1"
       isTopExpanding
       isCollapsed={rankingPanelAccordionCollapsed}
       setState={setRankingPanelAccordionCollapsed}
     >
       <InfoText />
-      <div className="mt-4 flex flex-wrap gap-2 ">
-        <GithubButton size="sm" shouldShrink />
-        <LinkedinButton size="sm" shouldShrink />
-        <RedditButton size="sm" shouldShrink />
-      </div>
     </Accordion>
   );
 }

web/src/features/panels/ranking-panel/SearchBar.tsx

@@ -22,7 +22,7 @@ function SearchBar({
       <Search />
       <input
         data-testid="zone-search-bar"
-        className="font h-8 w-full bg-transparent text-base placeholder-gray-500 focus:border-b-2 focus:border-gray-300 focus:outline-none dark:focus:border-gray-600"
+        className="font h-8 w-full bg-transparent text-sm placeholder-gray-500 focus:border-b-2 focus:border-gray-300 focus:outline-none dark:focus:border-gray-600"
         placeholder={placeholder}
         onChange={onHandleInput}
         value={value}

web/src/features/panels/zone/AreaGraphContainer.tsx

@@ -1,4 +1,3 @@
-import { HorizontalDivider } from 'components/Divider';
 import CarbonChart from 'features/charts/CarbonChart';
 import EmissionChart from 'features/charts/EmissionChart';
 import NetExchangeChart from 'features/charts/NetExchangeChart';
@@ -29,7 +28,6 @@ export default function AreaGraphContainer({
       />
       <NetExchangeChart datetimes={datetimes} timeRange={timeRange} />
       <PriceChart datetimes={datetimes} timeRange={timeRange} />
-      <HorizontalDivider />
     </div>
   );
 }

web/src/features/panels/zone/Attribution.tsx

@@ -1,4 +1,3 @@
-import { GithubButton } from 'components/buttons/GithubButton';
 import { useTranslation } from 'react-i18next';
 
 import { getContributors } from './util';
@@ -15,7 +14,6 @@ export default function Attribution({ zoneId }: { zoneId: string }) {
           <ContributorList contributors={contributors} />
         </div>
       )}
-      <GithubButton />
     </div>
   );
 }

web/src/features/panels/zone/ZoneDetails.tsx

@@ -1,6 +1,7 @@
 import { Capacitor } from '@capacitor/core';
 import useGetZone from 'api/getZone';
 import { CommercialApiButton } from 'components/buttons/CommercialApiButton';
+import { HorizontalDivider } from 'components/Divider';
 import LoadingSpinner from 'components/LoadingSpinner';
 import BarBreakdownChart from 'features/charts/bar-breakdown/BarBreakdownChart';
 import { useAtomValue, useSetAtom } from 'jotai';
@@ -85,7 +86,7 @@ export default function ZoneDetails(): JSX.Element {
       <div
         id="panel-scroller"
         className={twMerge(
-          'mb-3 h-full scroll-pt-5 overflow-y-scroll px-3 pt-2.5 sm:h-full sm:pb-60',
+          'mb-3 h-full scroll-pt-5 overflow-y-scroll px-3 pt-2.5 sm:h-full sm:pb-64',
           isIosCapacitor ? 'pb-72' : 'pb-48'
         )}
       >
@@ -118,13 +119,12 @@ export default function ZoneDetails(): JSX.Element {
               displayByEmissions={displayByEmissions}
             />
           )}
+
           <MethodologyCard />
+          <HorizontalDivider />
+          <div className="mb-1 text-sm font-semibold">Looking for forecast data?</div>
+          <CommercialApiButton />
           <Attribution zoneId={zoneId} />
-          {isMobile ? (
-            <CommercialApiButton backgroundClasses="mt-3" />
-          ) : (
-            <div className="p-2" />
-          )}
         </ZoneDetailsContent>
       </div>
     </>

web/src/locales/da.json

@@ -1,8 +1,5 @@
 {
   "info": {
-    "title": "Om appen",
-    "text": "Electricity Maps-appen giver realtidsindsigt, på web og mobil, for borgere, energieksperter, NGO'er og beslutningstagere, der fremmer en dybere forståelse af energiomstillingens udfordringer.",
-    "open-source-text": "Denne app er <a href='{{link}}' target='_blank'>Open Source</a> og drevet af fællesskabet.",
     "version": "App-version: {{version}}",
     "share-app": "Del appen:"
   },

web/src/locales/en.json

@@ -1,18 +1,17 @@
 {
   "info": {
-    "title": "About the app",
-    "text": "The Electricity Maps app provides real-time insights on web and mobile for citizens, energy experts, NGOs and policymakers promoting a deeper understanding of energy transition challenges.",
-    "open-source-text": "This app is <a href='{{link}}' target='_blank'>Open Source</a> and powered by the community.",
+    "title": "About Electricity Maps",
+    "text": "is an API platform providing real-time and predictive electricity signals allowing any device to reduce their cost and emissions by informing them about the best time to consume electricity.",
     "version": "App version: {{version}}",
     "share-app": "Share the app:"
   },
   "settings-modal": {
     "title": "Settings"
   },
   "ranking-panel": {
-    "title": "Climate Impact by Area",
-    "subtitle": "Ranked by carbon intensity of electricity consumed (gCO₂eq/kWh)",
-    "search": "Search areas",
+    "title": "Electricity Grid Carbon Emissions",
+    "subtitle": "See where your electricity comes from<br/> and how much CO2 was emitted to produce it",
+    "search": "Search areas (ranked by carbon intensity)",
     "no-results": "No results found for this search 🌍"
   },
   "button": {
@@ -29,7 +28,9 @@
     "feedback": "Share feedback",
     "faq": "FAQ",
     "privacy-policy": "Privacy Policy",
-    "legal-notice": "Legal Notice"
+    "legal-notice": "Legal Notice",
+    "api": "Access the API",
+    "docs": "API documentation"
   },
   "mobile-main-menu": {
     "map": "Electricity Maps",

web/src/locales/es.json

@@ -1,9 +1,5 @@
 {
   "info": {
-    "title": "Sobre esta aplicación",
-    "text": "La app Electricity Maps provee información en tiempo real web y móvil para ciudadanos, expertos en energía, ONG y legisladores que promueven un mejor entendimiento de los desafíos de la transición energética.",
-    "open-source-text": "Esta app es de <a href='{{link}}' target='_blank'>código abierto</a> e impulsada por la comunidad.",
-    "version": "Versión de la aplicación: {{version}}",
     "share-app": "Compartir la aplicación:"
   },
   "settings-modal": {

web/src/locales/fr.json

@@ -1,8 +1,5 @@
 {
   "info": {
-    "title": "À propos de l'application",
-    "text": "L'application Electricity Maps fournit des informations en temps réel sur le web et sur les mobiles pour les citoyens, les experts en énergie, les ONG et les décideurs politiques, favorisant ainsi une meilleure compréhension des défis de la transition énergétique.",
-    "open-source-text": "Cette application est <a href='{{link}}' target='_blank'>Open Source</a> et alimentée par la communauté.",
     "version": "Version de l'application: {{version}}",
     "share-app": "Partagez l'application:"
   },

web/src/locales/it.json

@@ -1,8 +1,5 @@
 {
-  "info": {
-    "text": "L'app Electricity Maps fornisce statistiche in tempo reale su web e mobile per cittadini, esperti di energia, ONG e decisori politici promuovendo una comprensione più profonda delle sfide della transizione energetica.",
-    "open-source-text": "Questa app è <a href='{{link}}' target='_blank'>Open Source</a> ed alimentata dalla community."
-  },
+  "info": {},
   "button": {
     "feedback": "Condividi un feedback",
     "github": "Visualizza il nostro GitHub",

web/src/locales/nl.json

@@ -92,8 +92,6 @@
   "unknown": "onbekend",
   "info": {
     "title": "Over de app",
-    "text": "De Electricity Maps app biedt realtime inzichten op web en mobiel voor burgers, energie-experts, NGO's en beleidsmakers, ter bevordering van een dieper begrip van de uitdagingen van de energietransitie.",
-    "open-source-text": "Deze app is <a href='{{link}}' target='_blank'>Open Source</a> en wordt aangedreven door de gemeenschap.",
     "version": "App versie: {{version}}",
     "share-app": "Deel de app:"
   },

web/src/locales/no-NB.json

@@ -83,10 +83,6 @@
   "geothermal": "Jordvarme",
   "hydro": "Vannkraft",
   "hydro storage": "Pumpekraftverk",
-  "info": {
-    "text": "Electricity Map innsikt i sanntid på nett og mobil til allmennheten, energieksperter, frivillige organisasjoner og myndigheter for å gi dypere forståelse av det grønne skiftet.",
-    "open-source-text": "Tjenesten er <a href='{{link}}' target='_blank'>åpen kildekode</a> og utviklet i samarbeid med frivillige."
-  },
   "button": {
     "privacy-policy": "Personvern",
     "legal-notice": "Juridisk",

web/src/locales/pl.json

@@ -1,8 +1,5 @@
 {
   "info": {
-    "title": "O aplikacji",
-    "text": "Aplikacja Electrcity Maps oferuje dostęp do danych w rzeczywistym czasie dla obywateli, ekspertów ds. energetyki i organizacji pozarządowych w celu zwiększenia świadomości na temat wyzwań transformacji energetycznej.",
-    "open-source-text": "Ta aplikacja jest <a href='{{link}}' target='_blank'>Open Source'owa</a> i wspierana przez społeczność.",
     "version": "Wersja aplikacji: {{version}}",
     "share-app": "Podziel się aplikacją:"
   },

web/src/locales/pt-BR.json

@@ -1728,10 +1728,7 @@
   },
   "windDataError": "Dados eólicos estão indisponíveis",
   "solarDataError": "Dados solares estão indisponíveis",
-  "info": {
-    "text": "O Mapa da Eletricidade fornece informações em tempo-real na web e no celular para cidadãos, especialistas em energia, ONGs e legisladores promovendo um entendimento mais profundo sobre os desafios de transição de energia.",
-    "open-source-text": "Esse aplicativo é <a href='{{link}}' target='_blank'>de código aberto</a> e apoiado pela comunidade."
-  },
+
   "button": {
     "feedback": "Compartilhar Feedback",
     "github": "Ver nosso GitHub",

web/src/locales/pt-PT.json

@@ -1,8 +1,4 @@
 {
-  "info": {
-    "text": "O Mapa da Eletricidade fornece informações em tempo-real na web e no telemóvel para cidadãos, especialistas em energia, ONGs e legisladores promovendo um entendimento mais profundo sobre os desafios da transição energética.",
-    "open-source-text": "Esta app é <a href='{{link}}' target='_blank'>de código aberto</a> e desenvolvida pela comunidade."
-  },
   "button": {
     "feedback": "Partilhar Feedback",
     "github": "Ver o nosso GitHub",

web/src/locales/sv.json

@@ -1,8 +1,5 @@
 {
   "info": {
-    "text": "Appen Electricity Maps ger insikter i realtid på webben och mobil för medborgare, energiexperter, icke-statliga organisationer och beslutsfattare och främjar en djupare förståelse för utmaningar i energiomställningen.",
-    "open-source-text": "Den här appen har <a href='{{link}}' target='_blank'>Öppen Källkod</a> och drivs av en gemenskap.",
-    "title": "Om appen",
     "version": "App version: {{version}}",
     "share-app": "Dela appen:"
   },

web/src/locales/zh-CN.json

@@ -1,8 +1,4 @@
 {
-  "info": {
-    "text": "Electricity Maps应用程序在网站和手机程序上为居民，能源专家，非政府组织和决策者们提供即时的信息，从而促使人们更好的理解能源转型的挑战。",
-    "open-source-text": "这个应用程序是一个<a href='{{link}}' target='_blank'>开源</a> 并由社区提供支持。"
-  },
   "button": {
     "feedback": "提供反馈",
     "github": "浏览我们的GitHub",

web/src/locales/zh-TW.json

@@ -1,8 +1,4 @@
 {
-  "info": {
-    "text": "這份電力地圖為推動能源轉型的公民、能源專家、NGO 和政策制定者提供即時的用電資料。",
-    "open-source-text": "這個網站是個由社群支持的<a href='{{link}}' target='_blank'>開源</a>軟體。"
-  },
   "button": {
     "feedback": "提供回饋",
     "github": "GitHub",