Add translation keys on Homepage.

web/public/locales

@@ -0,0 +1 @@
+../src/locales

web/src/App.js

@@ -11,6 +11,8 @@ import(/* webpackChunkName: "plausible" */ 'plausible-tracker').then(
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
+import './i18n'
+
 import './scaffold.css'
 import './index.scss'
 

web/src/components/CommunitySection/CommunitySection.tsx

@@ -1,3 +1,5 @@
+import { Trans, useTranslation } from 'react-i18next'
+
 const communities = [
   {
     name: 'Twitter',
@@ -17,15 +19,16 @@ const communities = [
 ]
 
 const CommunitySection = () => {
+  const { t } = useTranslation()
+
   return (
     <section className="mx-auto max-w-6xl space-y-12 p-4">
-      <p className="font-serif text-xl sm:text-center sm:text-2xl md:text-4xl lg:text-6xl lg:leading-tight">
-        On top of the technology,{' '}
-        <span className="font-bold">
-          we warmly welcome you to join our community,{' '}
-        </span>
-        because going from side project to startup is hard, and{' '}
-        <span className="font-bold">nobody should have to do it alone.</span>
+      <p className="font-serif text-xl sm:text-center sm:text-2xl md:text-4xl lg:text-6xl  lg:leading-tight">
+        <Trans
+          t={t}
+          i18nKey="HomePage.CommunitySection.text"
+          components={{ bold: <span className="font-bold" /> }}
+        />
       </p>
       <ul className="flex items-center justify-center space-x-8">
         {communities.map((item) => (

web/src/components/FeaturesSection/FeaturesSection.tsx

@@ -1,6 +1,4 @@
-import { SparklesIcon, InboxIcon } from '@heroicons/react/solid'
-import StorybookIcon from 'public/images/3p-logos/storybook.svg'
-import FeaturesSectionStories from './FeaturesSection.stories'
+import { Trans, useTranslation } from 'react-i18next'
 
 const Image = ({ name, alt, ...rest }) => (
   <img src={`/images/3p-logos/${name}`} alt={alt} {...rest} />
@@ -9,14 +7,23 @@ const Image = ({ name, alt, ...rest }) => (
 const features = {
   design: {
     tools: [{ src: 'storybook.svg', alt: 'Storybook' }],
-    title: 'Design',
-    body: () => (
-      <p className="mt-4 text-lg text-gray-500">
-        Mockup, build and verify components in{' '}
-        <a href="https://redwoodjs.com/docs/storybook">Storybook</a>, even in
-        complete isolation from the backend. Work on design without worrying
-        about data.
-      </p>
+    title: 'HomePage.FeaturesSection.features.design.title',
+    body: (t) => (
+      <Trans
+        t={t}
+        i18nKey={'HomePage.FeaturesSection.features.design.description'}
+        components={{
+          container: <p className="mt-4 text-lg text-gray-500" />,
+          storybook: <a href="https://redwoodjs.com/docs/storybook" />,
+        }}
+      >
+        <p className="mt-4 text-lg text-gray-500">
+          Mockup, build and verify components in{' '}
+          <a href="https://redwoodjs.com/docs/storybook">Storybook</a>, even in
+          complete isolation from the backend. Work on design without worrying
+          about data.
+        </p>
+      </Trans>
     ),
     img: { src: '/images/storybook.png', alt: 'Storybook' },
     learnMore: 'https://redwoodjs.com/docs/storybook',
@@ -27,32 +34,58 @@ const features = {
       { src: 'testing-library.png', alt: 'Testing Library' },
       { src: 'msw.svg', alt: 'Mock Service Worker' },
     ],
-    title: 'Test',
-    body: () => (
-      <p className="mt-4 text-lg text-gray-500">
-        Whether it's{' '}
-        <span
-          className="cursor-help border-b border-dashed border-stone-400"
-          title="Test Driven Development"
-        >
-          TDD
-        </span>{' '}
-        or{' '}
-        <span
-          className="cursor-help border-b border-dashed border-stone-400"
-          title="Development Driven Testing"
-        >
-          DDT
-        </span>
-        , Redwood uses{' '}
-        <a href="https://redwoodjs.com/docs/testing#redwood-and-testing">
-          Jest
-        </a>{' '}
-        along with{' '}
-        <a href="https://redwoodjs.com/docs/testing#testing-cells">mocks</a> and{' '}
-        <a href="https://redwoodjs.com/docs/testing#scenarios">scenarios</a> to
-        verify functionality on the frontend and the backend.
-      </p>
+    title: 'HomePage.FeaturesSection.features.test.title',
+    body: (t) => (
+      <Trans
+        t={t}
+        i18nKey="HomePage.FeaturesSection.features.test.description"
+        components={{
+          container: <p className="mt-4 text-lg text-gray-500" />,
+          tdd: (
+            <span
+              className="cursor-help border-b border-dashed border-stone-400"
+              title="Test Driven Development"
+            />
+          ),
+          ddt: (
+            <span
+              className="cursor-help border-b border-dashed border-stone-400"
+              title="Development Driven Testing"
+            />
+          ),
+          jest: (
+            <a href="https://redwoodjs.com/docs/testing#redwood-and-testing" />
+          ),
+          mocks: <a href="https://redwoodjs.com/docs/testing#testing-cells" />,
+          scenarios: <a href="https://redwoodjs.com/docs/testing#scenarios" />,
+        }}
+      >
+        <p className="mt-4 text-lg text-gray-500">
+          Whether it's{' '}
+          <span
+            className="cursor-help border-b border-dashed border-stone-400"
+            title="Test Driven Development"
+          >
+            TDD
+          </span>{' '}
+          or{' '}
+          <span
+            className="cursor-help border-b border-dashed border-stone-400"
+            title="Development Driven Testing"
+          >
+            DDT
+          </span>
+          , Redwood uses{' '}
+          <a href="https://redwoodjs.com/docs/testing#redwood-and-testing">
+            Jest
+          </a>{' '}
+          along with{' '}
+          <a href="https://redwoodjs.com/docs/testing#testing-cells">mocks</a>{' '}
+          and{' '}
+          <a href="https://redwoodjs.com/docs/testing#scenarios">scenarios</a>{' '}
+          to verify functionality on the frontend and the backend.
+        </p>
+      </Trans>
     ),
     img: { src: '/images/testing.png', alt: 'Testing' },
     learnMore: 'https://redwoodjs.com/docs/testing',
@@ -69,44 +102,73 @@ const features = {
       { src: 'ethereum.svg', alt: 'Ethereum' },
       { src: 'supertokens.png', alt: 'SuperTokens' },
     ],
-    title: 'Auth & Security',
-    body: () => (
-      <p className="mt-4 text-lg text-gray-500">
-        Lock down your front and backends with your own{' '}
-        <a href="https://redwoodjs.com/docs/authentication#self-hosted-auth-installation-and-setup">
-          self-hosted auth
-        </a>{' '}
-        or integrate with nearly a dozen{' '}
-        <a href="https://redwoodjs.com/docs/authentication">
-          third party auth providers
-        </a>
-        . Verify access with{' '}
-        <a href="https://redwoodjs.com/docs/how-to/role-based-access-control-rbac">
-          RBAC
-        </a>{' '}
-        and{' '}
-        <a href="https://redwoodjs.com/docs/services#service-validations">
-          Validations
-        </a>
-        .
-      </p>
+    title: 'HomePage.FeaturesSection.features.auth.title',
+    body: (t) => (
+      <Trans
+        t={t}
+        i18nKey={'HomePage.FeaturesSection.features.auth.description'}
+        components={{
+          container: <p className="mt-4 text-lg text-gray-500" />,
+          selfAuth: (
+            <a href="https://redwoodjs.com/docs/authentication#self-hosted-auth-installation-and-setup" />
+          ),
+          providers: <a href="https://redwoodjs.com/docs/authentication" />,
+          rbac: (
+            <a href="https://redwoodjs.com/docs/how-to/role-based-access-control-rbac" />
+          ),
+          validations: (
+            <a href="https://redwoodjs.com/docs/services#service-validations" />
+          ),
+        }}
+      >
+        <p className="mt-4 text-lg text-gray-500">
+          Lock down your front and backends with your own{' '}
+          <a href="https://redwoodjs.com/docs/authentication#self-hosted-auth-installation-and-setup">
+            self-hosted auth
+          </a>{' '}
+          or integrate with nearly a dozen{' '}
+          <a href="https://redwoodjs.com/docs/authentication">
+            third party auth providers
+          </a>
+          . Verify access with{' '}
+          <a href="https://redwoodjs.com/docs/how-to/role-based-access-control-rbac">
+            RBAC
+          </a>{' '}
+          and{' '}
+          <a href="https://redwoodjs.com/docs/services#service-validations">
+            Validations
+          </a>
+          .
+        </p>
+      </Trans>
     ),
     img: { src: '/images/auth.png', alt: 'Auth and Security' },
     learnMore: 'https://redwoodjs.com/docs/authentication',
   },
   data: {
     tools: [{ src: 'graphql.svg', alt: 'Graphql' }],
     title: 'Data & Transport',
-    body: () => (
-      <p className="mt-4 text-lg text-gray-500">
-        When your API is{' '}
-        <a href="https://redwoodjs.com/docs/graphql">GraphQL</a> you're ready
-        for any client, from the browser to native mobile apps and more.
-        Transform your data with{' '}
-        <a href="https://redwoodjs.com/docs/directives">Directives</a> and keep
-        your business logic organized and reusable within{' '}
-        <a href="https://redwoodjs.com/docs/services">Services</a>.
-      </p>
+    body: (t) => (
+      <Trans
+        t={t}
+        i18nKey={'HomePage.FeaturesSection.features.data.description'}
+        components={{
+          container: <p className="mt-4 text-lg text-gray-500" />,
+          graphql: <a href="https://redwoodjs.com/docs/graphql" />,
+          directives: <a href="https://redwoodjs.com/docs/directives" />,
+          services: <a href="https://redwoodjs.com/docs/services" />,
+        }}
+      >
+        <p className="mt-4 text-lg text-gray-500">
+          When your API is{' '}
+          <a href="https://redwoodjs.com/docs/graphql">GraphQL</a> you're ready
+          for any client, from the browser to native mobile apps and more.
+          Transform your data with{' '}
+          <a href="https://redwoodjs.com/docs/directives">Directives</a> and
+          keep your business logic organized and reusable within{' '}
+          <a href="https://redwoodjs.com/docs/services">Services</a>.
+        </p>
+      </Trans>
     ),
     img: { src: '/images/datafetching.png', alt: 'Data & Transport' },
     learnMore: 'https://redwoodjs.com/docs/graphql',
@@ -120,21 +182,34 @@ const features = {
       { src: 'layer0.svg', alt: 'Layer0' },
     ],
     title: 'Deploy',
-    body: () => (
-      <p className="mt-4 text-lg text-gray-500">
-        Deploy your app to serverless hosts like{' '}
-        <a href="https://redwoodjs.com/docs/deploy/netlify">Netlify</a> and{' '}
-        <a href="https://redwoodjs.com/docs/deploy/vercel">Vercel</a>, build for{' '}
-        <a href="https://github.com/redwoodjs/docker">containers</a>, or deploy
-        to <a href="https://redwoodjs.com/docs/deploy/baremetal">bare metal</a>.
-      </p>
+    body: (t) => (
+      <Trans
+        t={t}
+        i18nKey="HomePage.FeaturesSection.features.deploy.description"
+        components={{
+          container: <p className="mt-4 text-lg text-gray-500" />,
+          netlify: <a href="https://redwoodjs.com/docs/deploy/netlify" />,
+          vercel: <a href="https://redwoodjs.com/docs/deploy/vercel" />,
+          docker: <a href="https://github.com/redwoodjs/docker" />,
+          bare: <a href="https://redwoodjs.com/docs/deploy/baremetal" />,
+        }}
+      >
+        <p className="mt-4 text-lg text-gray-500">
+          Deploy your app to serverless hosts like{' '}
+          <a href="https://redwoodjs.com/docs/deploy/netlify">Netlify</a> and{' '}
+          <a href="https://redwoodjs.com/docs/deploy/vercel">Vercel</a>, build
+          for <a href="https://github.com/redwoodjs/docker">containers</a>, or
+          deploy to{' '}
+          <a href="https://redwoodjs.com/docs/deploy/baremetal">bare metal</a>.
+        </p>
+      </Trans>
     ),
     img: { src: '/images/deploy.png', alt: 'Deploy' },
     learnMore: 'https://redwoodjs.com/docs/deploy/introduction',
   },
 }
 
-const Feature = ({ feature, imgSide = 'right' }) => {
+const Feature = ({ t, feature, imgSide = 'right' }) => {
   return (
     <div className="relative mt-16 p-4">
       <div
@@ -156,13 +231,13 @@ const Feature = ({ feature, imgSide = 'right' }) => {
             ))}
           </div>
           <h2 className="text-3xl font-extrabold tracking-tight text-gray-900">
-            {feature.title}
+            {t(feature.title)}
           </h2>
-          {feature.body()}
+          {feature.body(t)}
           <div className="mt-6">
             <a
               href={feature.learnMore}
-              className="text-rw-500 inline-flex rounded-md text-lg"
+              className="inline-flex rounded-md text-lg text-rw-500"
             >
               Learn more
             </a>
@@ -182,26 +257,40 @@ const Feature = ({ feature, imgSide = 'right' }) => {
 }
 
 const FeaturesSection = () => {
+  const { t } = useTranslation()
+
   return (
     <section className="mx-auto lg:max-w-6xl">
       <h3 className="space-y-12 px-4 font-serif text-xl sm:text-center sm:text-2xl md:text-4xl lg:text-6xl lg:leading-tight">
         <div>
-          Oh, you want to know more about the{' '}
-          <span className="font-bold">technology</span> and{' '}
-          <span className="font-bold">features</span>? Strap in.
+          <Trans
+            t={t}
+            i18nKey={'HomePage.FeaturesSection.text.line1'}
+            components={{ bold: <span className="font-bold" /> }}
+          >
+            Oh, you want to know more about the{' '}
+            <span className="font-bold">technology</span> and{' '}
+            <span className="font-bold">features</span>? Strap in.
+          </Trans>
         </div>
         <div>
-          Here’s how you do{' '}
-          <span className="font-bold">end-to-end development,</span> the Redwood
-          Way.
+          <Trans
+            t={t}
+            i18nKey={'HomePage.FeaturesSection.text.line2'}
+            components={{ bold: <span className="font-bold" /> }}
+          >
+            Here’s how you do{' '}
+            <span className="font-bold">end-to-end development,</span> the
+            Redwood Way.
+          </Trans>
         </div>
       </h3>
       <div className="relative overflow-hidden bg-white pt-12 pb-16 md:pt-16">
-        <Feature feature={features.design} />
-        <Feature feature={features.test} imgSide="left" />
-        <Feature feature={features.auth} />
-        <Feature feature={features.data} imgSide="left" />
-        <Feature feature={features.deploy} />
+        <Feature t={t} feature={features.design} />
+        <Feature t={t} feature={features.test} imgSide="left" />
+        <Feature t={t} feature={features.auth} />
+        <Feature t={t} feature={features.data} imgSide="left" />
+        <Feature t={t} feature={features.deploy} />
       </div>
     </section>
   )