[FEATURE] Training fund page (#11821)

* page skeleton * first two sections * set up cards * desktop version * homepage link * resized images * text decoration * English copy updates * sign up link * translations and EN fixes * merge translations * ragged cards * switch to old hero * update survey links * localize navigar link * remove strong tags * FR edits * semantic heading for cards * add seo component (cherry picked from commit e9f6a71)
GCTC-NTGC · Oct 28, 2024 · 3ce1fbd · 3ce1fbd
1 parent 8b05060
commit 3ce1fbd
Show file tree

Hide file tree

Showing 9 changed files with 789 additions and 30 deletions.
diff --git a/apps/web/src/assets/img/check_it_out_it_training_fund.webp b/apps/web/src/assets/img/check_it_out_it_training_fund.webp
diff --git a/apps/web/src/assets/img/it-training-fund-1.webp b/apps/web/src/assets/img/it-training-fund-1.webp
diff --git a/apps/web/src/assets/img/it-training-fund-2.webp b/apps/web/src/assets/img/it-training-fund-2.webp
diff --git a/apps/web/src/assets/img/it-training-fund-3.webp b/apps/web/src/assets/img/it-training-fund-3.webp
diff --git a/apps/web/src/components/Router.tsx b/apps/web/src/components/Router.tsx
@@ -501,6 +501,11 @@ const createRoute = (locale: Locales) =>
                 },
               ],
             },
+            {
+              path: "it-training-fund",
+              lazy: () =>
+                import("../pages/ItTrainingFundPage/ItTrainingFundPage"),
+            },
             {
               path: "*",
               loader: () => {

diff --git a/apps/web/src/hooks/useRoutes.ts b/apps/web/src/hooks/useRoutes.ts
@@ -305,6 +305,9 @@ const getRoutes = (lang: Locales) => {
     managerRequestHistory: () =>
       [baseUrl, "manager", "talent-requests"].join("/"),
 
+    // IT Training Fund
+    itTrainingFund: () => [baseUrl, "it-training-fund"].join("/"),
+
     /**
      * Deprecated
      *

diff --git a/apps/web/src/lang/fr.json b/apps/web/src/lang/fr.json
diff --git a/apps/web/src/pages/Home/HomePage/components/Featured/Featured.tsx b/apps/web/src/pages/Home/HomePage/components/Featured/Featured.tsx
@@ -8,42 +8,43 @@ import FeatureBlock from "~/components/FeatureBlock/FeatureBlock";
 import FlourishContainer from "~/components/FlourishContainer/FlourishContainer";
 import useRoutes from "~/hooks/useRoutes";
 import glassesOnBooks from "~/assets/img/glasses-on-books.webp";
-// import digitalAmbitionImg from "~/assets/img/check_it_out_digital_ambition.webp";
 import iapManagerImg from "~/assets/img/check_it_out_IAP_manager_callout.webp";
+import itTrainingFundImg from "~/assets/img/check_it_out_it_training_fund.webp";
 
 const Featured = () => {
   const intl = useIntl();
   const paths = useRoutes();
 
-  // TEMP: Removed in https://github.com/GCTC-NTGC/gc-digital-talent/pull/6143
-  // const digitalAmbition = {
-  //   key: "digital-ambition",
-  //   title: intl.formatMessage({
-  //     defaultMessage: "The Digital Ambition",
-  //     id: "tTuBmE",
-  //     description: "Title for the digital ambition featured item",
-  //   }),
-  //   summary: intl.formatMessage({
-  //     defaultMessage:
-  //       'The Digital Ambition outlines the Government of Canada\'s commitment to create modern, accessible digital services. Achieving these priorities will result in a government that provides improved "digital-first," user-centred, and barrier-free services and programs.',
-  //     id: "CbzWqJ",
-  //     description: "Summary of the digital ambition featured item",
-  //   }),
-  //   img: { path: digitalAmbitionImg },
-  //   link: {
-  //     path:
-  //       locale === "en"
-  //         ? "https://www.canada.ca/en/government/system/digital-government/government-canada-digital-operations-strategic-plans/canada-digital-ambition.html"
-  //         : "https://www.canada.ca/fr/gouvernement/systeme/gouvernement-numerique/plans-strategiques-operations-numeriques-gouvernement-canada/ambition-numerique-canada.html",
-  //     label: intl.formatMessage({
-  //       defaultMessage: "Read the Digital Ambition",
-  //       id: "Gil1Zj",
-  //       description: "Link text to read the Digital Ambition",
-  //     }),
-  //   },
-  // };
-
   const featured = [
+    {
+      key: "it-training-fund",
+      title: intl.formatMessage({
+        defaultMessage: "IT Community Training and Development Fund",
+        id: "030Tsr",
+        description: "Title for the it training fund page",
+      }),
+      summary: (
+        <p>
+          {intl.formatMessage({
+            defaultMessage:
+              "Through this fund, IT employees can now access a variety of additional training opportunities, including self-paced learning, instructor-led courses, and certification exam vouchers.",
+            id: "xfdk0g",
+            description: "Summary of the it training fund featured item",
+          })}
+        </p>
+      ),
+
+      img: { path: itTrainingFundImg, position: "center" },
+      link: {
+        path: paths.itTrainingFund(),
+        label: intl.formatMessage({
+          defaultMessage:
+            "Learn more<hidden> about the IT Community Training and Development Fund</hidden>",
+          id: "g1YoPl",
+          description: "Link text to the IT training fund",
+        }),
+      },
+    },
     {
       key: "directive-on-digital-talent",
       title: intl.formatMessage({
@@ -119,7 +120,7 @@ const Featured = () => {
       </Heading>
       <div
         data-h2-display="base(grid)"
-        data-h2-grid-template-columns="base(1fr) p-tablet(repeat(2, minmax(0, 1fr)))"
+        data-h2-grid-template-columns="base(1fr) p-tablet(repeat(3, minmax(0, 1fr)))"
         data-h2-gap="base(x1)"
         data-h2-padding="base(x2, 0, 0, 0)"
       >