Add territorial acknowledgement to homepage

There are some challenges for customizing the global footer via swizzling.
However, we can at least insert in the land acknowledgement in the
homepage to at least attempt to meet footer best practices on the landing.

Signed-off-by: Jeremy Ho <[email protected]>

src/css/custom.css

@@ -73,6 +73,14 @@
   --ifm-table-cell-padding: 0.6rem;
 }
 
+.acknowledgement {
+  background-color: var(--bc-gray-100);
+  border-top: 0.25rem solid var(--bc-primary-gold);
+  border-bottom: 0.25rem solid var(--bc-primary-gold);
+  color: var(--bc-gray-white);
+  padding: 2rem;
+}
+
 a:has(.footer-logo-license) {
   opacity: 0.9;
 }

src/pages/index.tsx

@@ -32,6 +32,23 @@ function HomepageHeader() {
   );
 }
 
+function HomepageFooter() {
+  return (
+    <div className="acknowledgement">
+      <div className="container">
+        <p className="row">
+          The B.C. Public Service acknowledges the territories of First Nations
+          around B.C. and is grateful to carry out our work on these lands. We
+          acknowledge the rights, interests, priorities, and concerns of all
+          Indigenous Peoples - First Nations, Métis, and Inuit - respecting and
+          acknowledging their distinct cultures, histories, rights, laws, and
+          governments.
+        </p>
+      </div>
+    </div>
+  );
+}
+
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
@@ -43,6 +60,7 @@ export default function Home(): JSX.Element {
       <main>
         <HomepageFeatures />
       </main>
+      <HomepageFooter />
     </Layout>
   );
 }