feat: Mobile app in footer (#52481)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

client/i18n/locales/english/translations.json

@@ -315,6 +315,7 @@
     "donation-initiatives": "Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.",
     "donate-text": "You can <1>make a tax-deductible donation here</1>.",
     "trending-guides": "Trending Guides",
+    "mobile-app": "Mobile App",
     "our-nonprofit": "Our Charity",
     "links": {
       "about": "About",

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

@@ -316,6 +316,55 @@ exports[`<Footer /> matches snapshot 1`] = `
           </a>
         </li>
       </ul>
+      <div
+        className="spacer"
+        style={
+          {
+            "padding": "15px 0",
+          }
+        }
+      />
+      <div>
+        <h2
+          className="col-header"
+          id="mobile-app"
+        >
+          footer.mobile-app
+        </h2>
+        <div
+          className=" min-h-[1px] px-[15px]  md:w-2/3    md:ml-[16.6%]    "
+        >
+          <ul
+            aria-labelledby="mobile-app"
+            className="mobile-app-container"
+          >
+            <li>
+              <a
+                href="https://apps.apple.com/us/app/freecodecamp/id6446908151?itsct=apps_box_link&itscg=30200"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <img
+                  alt="Apple Store"
+                  src={{}}
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://play.google.com/store/apps/details?id=org.freecodecamp"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <img
+                  alt="Google Play"
+                  src={{}}
+                />
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
   <div

client/src/components/Footer/footer.css

@@ -111,6 +111,23 @@ p.footer-donation a:hover {
   margin: 0 0 3rem;
 }
 
+.mobile-app-container {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+}
+
+.mobile-app-container img {
+  width: 9.5rem;
+  height: 3rem;
+  object-fit: cover;
+}
+
 .footer-bottom .our-nonprofit {
   display: flex;
   flex-direction: row;
@@ -126,6 +143,9 @@ p.footer-donation a:hover {
   .footer-col {
     font-size: 15;
   }
+  .mobile-app-container {
+    flex-direction: row;
+  }
 }
 
 @media (min-width: 800px) {

client/src/components/Footer/index.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import Link from '../helpers/link';
+import { Col } from '@freecodecamp/ui';
+
+import appleStoreBadge from '../../assets/images/footer-ads/apple-store-badge.svg';
+import googlePlayBadge from '../../assets/images/footer-ads/google-play-badge.svg';
+import { Spacer, Link } from '../helpers';
 import './footer.css';
 
 function Footer(): JSX.Element {
@@ -182,6 +186,28 @@ function Footer(): JSX.Element {
               </Link>
             </li>
           </ul>
+
+          <Spacer size='medium' />
+
+          <div>
+            <h2 id='mobile-app' className='col-header'>
+              {t('footer.mobile-app')}
+            </h2>
+            <Col sm={8} smOffset={2}>
+              <ul aria-labelledby='mobile-app' className='mobile-app-container'>
+                <li>
+                  <Link to='https://apps.apple.com/us/app/freecodecamp/id6446908151?itsct=apps_box_link&itscg=30200'>
+                    <img src={appleStoreBadge} alt='Apple Store' />
+                  </Link>
+                </li>
+                <li>
+                  <Link to='https://play.google.com/store/apps/details?id=org.freecodecamp'>
+                    <img src={googlePlayBadge} alt='Google Play' />
+                  </Link>
+                </li>
+              </ul>
+            </Col>
+          </div>
         </div>
       </div>
       <div className='footer-bottom'>

e2e/footer.spec.ts

@@ -93,6 +93,54 @@ test.describe('Footer Trending Guides section', () => {
   });
 });
 
+test.describe('Footer mobile app section', () => {
+  test('should render the download links correctly', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', {
+        level: 2,
+        name: translations.footer['mobile-app']
+      })
+    ).toBeVisible();
+
+    const downloadLinks = await page
+      .getByRole('list', { name: translations.footer['mobile-app'] })
+      .getByRole('listitem')
+      .all();
+
+    expect(downloadLinks).toHaveLength(2);
+
+    const appleStoreLink = downloadLinks[0];
+
+    await expect(
+      appleStoreLink.getByRole('img', { name: 'Apple Store' })
+    ).toBeVisible();
+    await expect(
+      appleStoreLink.getByRole('link', { name: 'Apple Store' })
+    ).toBeVisible();
+    await expect(
+      appleStoreLink.getByRole('link', { name: 'Apple Store' })
+    ).toHaveAttribute(
+      'href',
+      'https://apps.apple.com/us/app/freecodecamp/id6446908151?itsct=apps_box_link&itscg=30200'
+    );
+
+    const googlePlayLink = downloadLinks[1];
+
+    await expect(
+      googlePlayLink.getByRole('img', { name: 'Google Play' })
+    ).toBeVisible();
+    await expect(
+      googlePlayLink.getByRole('link', { name: 'Google Play' })
+    ).toBeVisible();
+    await expect(
+      googlePlayLink.getByRole('link', { name: 'Google Play' })
+    ).toHaveAttribute(
+      'href',
+      'https://play.google.com/store/apps/details?id=org.freecodecamp'
+    );
+  });
+});
+
 test.describe('Footer bottom section', () => {
   test('should display the content correctly', async ({ page, isMobile }) => {
     if (isMobile) {