feat: i18n

web/src/components/cards/CratesioCard.js

@@ -1,13 +1,15 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { DiRust } from 'react-icons/di'
 import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function CratesioCard({ name }) {
+  const { t } = useTranslation()
   const lowerCase = name.toLowerCase()
 
   return (
-    <Card title="Rust" key={lowerCase} nameList={[lowerCase]}>
+    <Card title={t('providers.rust')} key={lowerCase} nameList={[lowerCase]}>
       {(name) => (
         <DedicatedAvailability
           name={name}

web/src/components/cards/DomainCard.js

@@ -1,14 +1,16 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { FaMapSigns } from 'react-icons/fa'
 import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function DomainCard({ name }) {
+  const { t } = useTranslation()
   const lowerCase = name.toLowerCase()
 
   return (
     <Card
-      title="Domain"
+      title={t('providers.domains')}
       key={lowerCase}
       nameList={[`${lowerCase}.com`, `${lowerCase}app.com`, `${lowerCase}.app`]}
       alternativeList={[

web/src/components/cards/GithubCard.js

@@ -1,15 +1,17 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { FaGithub } from 'react-icons/fa'
 import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 import { capitalize } from '../../util/text'
 
 export default function GithubCard({ name }) {
+  const { t } = useTranslation()
   const lowerCase = name.toLowerCase()
 
   return (
     <Card
-      title="GitHub Organization"
+      title={t('providers.github')}
       key={name}
       nameList={[name]}
       alternativeList={[

web/src/components/cards/HomebrewCard.js

@@ -1,13 +1,18 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { IoIosBeer } from 'react-icons/io'
 import { Card } from '../Cards'
 import { ExistentialAvailability } from '../Availability'
 
 export default function HomebrewCard({ name }) {
+  const { t } = useTranslation()
   const lowerCase = name.toLowerCase()
 
   return (
-    <Card title="Homebrew" key={lowerCase} nameList={[lowerCase]}>
+    <Card
+      title={t('providers.homebrew')}
+      key={lowerCase}
+      nameList={[lowerCase]}>
       {(name) => (
         <>
           <ExistentialAvailability

web/src/components/cards/JsOrgCard.js

@@ -1,13 +1,15 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { FaJsSquare } from 'react-icons/fa'
 import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function JsOrgCard({ name }) {
+  const { t } = useTranslation()
   const lowerCase = name.toLowerCase()
 
   return (
-    <Card title="js.org" key={lowerCase} nameList={[lowerCase]}>
+    <Card title={t('providers.jsorg')} key={lowerCase} nameList={[lowerCase]}>
       {(name) => (
         <DedicatedAvailability
           name={`${name}.js.org`}

web/src/components/cards/NpmCard.js

@@ -1,14 +1,16 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { FaNpm } from 'react-icons/fa'
 import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function NpmCard({ name }) {
+  const { t } = useTranslation()
   const lowerCase = name.toLowerCase()
 
   return (
     <Card
-      title="npm"
+      title={t('providers.npm')}
       key={lowerCase}
       nameList={[lowerCase]}
       alternativeList={[`${lowerCase}-js`]}>

web/src/components/cards/PypiCard.js

@@ -1,13 +1,16 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { FaPython } from 'react-icons/fa'
 import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 import { capitalize } from '../../util/text'
 
 export default function PypiCard({ name }) {
+  const { t } = useTranslation()
+
   return (
     <Card
-      title="PyPI"
+      title={t('providers.pypi')}
       key={name}
       nameList={[name]}
       alternativeList={[`Py${capitalize(name)}`]}>

web/src/components/cards/RubyGemsCard.js

@@ -1,12 +1,15 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { FaGem } from 'react-icons/fa'
 import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function RubyGemsCard({ name }) {
+  const { t } = useTranslation()
+
   return (
     <Card
-      title="RubyGems"
+      title={t('providers.rubygems')}
       key={name}
       nameList={[name]}
       alternativeList={[`${name.toLowerCase()}-rb`]}>

web/src/components/cards/S3Card.js

@@ -1,13 +1,15 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { FaAws } from 'react-icons/fa'
 import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function S3Card({ name }) {
+  const { t } = useTranslation()
   const lowerCase = name.toLowerCase()
 
   return (
-    <Card title="AWS S3" key={lowerCase} nameList={[lowerCase]}>
+    <Card title={t('providers.s3')} key={lowerCase} nameList={[lowerCase]}>
       {(name) => (
         <DedicatedAvailability
           name={name}

web/src/components/cards/SlackCard.js

@@ -1,13 +1,15 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { FaSlack } from 'react-icons/fa'
 import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 
 export default function SlackCard({ name }) {
+  const { t } = useTranslation()
   const lowerCase = name.toLowerCase()
 
   return (
-    <Card title="Slack" key={lowerCase} nameList={[lowerCase]}>
+    <Card title={t('providers.slack')} key={lowerCase} nameList={[lowerCase]}>
       {(name) => (
         <DedicatedAvailability
           name={name}

web/src/components/cards/TwitterCard.js

@@ -1,13 +1,16 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { FaTwitter } from 'react-icons/fa'
 import { Card } from '../Cards'
 import { DedicatedAvailability } from '../Availability'
 import { capitalize } from '../../util/text'
 
 export default function TwitterCard({ name }) {
+  const { t } = useTranslation()
+
   return (
     <Card
-      title="Twitter"
+      title={t('providers.twitter')}
       key={name}
       nameList={[name]}
       alternativeList={[