fix(i18n): include period in translatable string (#44474)

* fix: include period in translatable string

* chore: update snapshot

* fix: combine 2 strings into 1

* fix: add placeholder

* fix: update snapshot

Co-authored-by: Mrugesh Mohapatra <hi@mrugesh.dev>

client/i18n/locales/english/translations.json

@@ -216,8 +216,7 @@
     "tax-exempt-status": "freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)",
     "mission-statement": "Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.",
     "donation-initiatives": "Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.",
-    "donate-text": "You can",
-    "donate-link": "make a tax-deductible donation here",
+    "donate-text": "You can <1>make a tax-deductible donation here</1>.",
     "trending-guides": "Trending Guides",
     "our-nonprofit": "Our Nonprofit",
     "links": {

client/src/components/Footer/__snapshots__/footer.test.tsx.snap

@@ -25,13 +25,12 @@ exports[`<Footer /> matches snapshot 1`] = `
         <p
           className="footer-donation"
         >
-          footer.donate-text
-           
+          You can
           <a
             className="inline"
             href="/donate"
           >
-            footer.donate-link
+            make a tax-deductible donation here
           </a>
           .
         </p>

client/src/components/Footer/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import Link from '../helpers/link';
 import './footer.css';
 
@@ -15,11 +15,13 @@ function Footer(): JSX.Element {
             <p>{t('footer.mission-statement')}</p>
             <p>{t('footer.donation-initiatives')}</p>
             <p className='footer-donation'>
-              {t('footer.donate-text')}{' '}
-              <Link className='inline' to='/donate'>
-                {t('footer.donate-link')}
-              </Link>
-              .
+              <Trans i18nKey='footer.donate-text'>
+                You can
+                <Link className='inline' to='/donate'>
+                  make a tax-deductible donation here
+                </Link>
+                .
+              </Trans>
             </p>
           </div>
           <div className='trending-guides'>