enhance(seo): link technologies in homepage hero (#11877)

* enhance(seo): link technologies in homepage hero

* enhance(homepage): generalize link underline on hover

Also, don't underline on focus, as focus already has an outline.

client/src/homepage/featured-articles/index.scss

@@ -56,11 +56,6 @@
 
       a {
         color: var(--text-primary);
-
-        &:hover,
-        &:focus {
-          text-decoration: underline;
-        }
       }
     }
 

client/src/homepage/homepage-hero/index.tsx

@@ -1,8 +1,12 @@
 import "./index.scss";
 import { Search } from "../../ui/molecules/search";
 import Mandala from "../../ui/molecules/mandala";
+import { useLocale } from "../../hooks";
+import { HOMEPAGE_HERO } from "../../telemetry/constants";
 
 export function HomepageHero() {
+  const locale = useLocale();
+
   return (
     <div className="homepage-hero dark">
       <section>
@@ -11,8 +15,28 @@ export function HomepageHero() {
           <br /> by Developers
         </h1>
         <p>
-          Documenting web technologies, including CSS, HTML, and JavaScript,
-          since 2005.
+          Documenting web technologies, including{" "}
+          <a
+            href={`/${locale}/docs/Web/CSS`}
+            data-glean={`${HOMEPAGE_HERO}: css`}
+          >
+            CSS
+          </a>
+          ,{" "}
+          <a
+            href={`/${locale}/docs/Web/HTML`}
+            data-glean={`${HOMEPAGE_HERO}: html`}
+          >
+            HTML
+          </a>
+          , and{" "}
+          <a
+            href={`/${locale}/docs/Web/JavaScript`}
+            data-glean={`${HOMEPAGE_HERO}: js`}
+          >
+            JavaScript
+          </a>
+          , since 2005.
         </p>
         <Search id="hp-search" isHomepageSearch={true} />
       </section>

client/src/homepage/index.scss

@@ -17,4 +17,8 @@
   > *:first-child {
     margin-top: 0;
   }
+
+  a:hover {
+    text-decoration: underline;
+  }
 }

client/src/homepage/recent-contributions/index.scss

@@ -57,7 +57,6 @@
 
       &:hover {
         color: var(--text-primary);
-        text-decoration: underline;
       }
     }
 

client/src/telemetry/constants.ts

@@ -85,3 +85,4 @@ export const LANGUAGE = "language";
 export const LANGUAGE_REMEMBER = "language_remember";
 export const THEME_SWITCHER = "theme_switcher";
 export const SURVEY = "survey";
+export const HOMEPAGE_HERO = "homepage_hero";