fix: unhide hidden h1 title (#936)

* fix: Update development server port to 3000.

* fix: Add title display and update styles for the Hero CMP.

* fix: Revert development server port.

Author: jonathanp-okta

src/features/common/components/hero/hero.component.tsx

@@ -5,13 +5,20 @@ import { BoxComponent } from "@/features/common/components/box/box.component";
 import styles from "./hero.module.scss";
 import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
 import Link from "next/link";
+import { clsx } from "clsx";
+import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
 
 interface HeroComponentProps {
   languageCode: string;
+  title: string;
   dictionary: HomeDictionaryModel["info"];
 }
 
-export const HeroComponent: React.FC<HeroComponentProps> = ({ dictionary }) => {
+export const HeroComponent: React.FC<HeroComponentProps> = ({
+  languageCode,
+  title,
+  dictionary,
+}) => {
   const description = dictionary.description.split(
     dictionary.resources.spec.name
   );
@@ -23,6 +30,11 @@ export const HeroComponent: React.FC<HeroComponentProps> = ({ dictionary }) => {
       wrapperClassName={styles.wrapper}
     >
       <div className={styles.hero}>
+        <h1
+          className={clsx(styles.title, getLocalizedSecondaryFont(languageCode))}
+        >
+          {title}
+        </h1>
         <p className={styles.modal}>
           <span className={styles.modal__text}>
             {

src/features/common/components/hero/hero.module.scss

@@ -22,7 +22,9 @@
 .hero {
   z-index: 1;
   display: flex;
+  flex-direction: column;
   justify-content: center;
+  align-items: center;
   width: 100%;
   padding: 1.25rem 0;
   text-align: center;
@@ -32,6 +34,26 @@
   }
 }
 
+.title {
+  width: 100%;
+  max-width: 42rem;
+  margin: 0;
+  color: var(--color_fg_bold);
+  font-size: 2rem;
+  line-height: 1.15;
+  font-weight: 500;
+  letter-spacing: -0.8px;
+  text-wrap-style: balance;
+
+  @media #{$breakpoint-dimension-xs} {
+    font-size: 2.5rem;
+  }
+
+  @media #{$breakpoint-dimension-sm} {
+    font-size: 3rem;
+  }
+}
+
 .modal {
   max-width: 608px;
   padding: 2.5rem 0;

src/features/home/components/home-page/home-page.component.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import styles from "./home-page.module.scss"
 import { HeroComponent } from "@/features/common/components/hero/hero.component";
 import {
   getHomeDictionary,
@@ -126,9 +125,9 @@ export const HomePageComponent: React.FC<HomePageComponentProps> = ({
           },
         ]}
       />
-      <h1 className={styles.visually_hidden}>{homeDictionary.metadata.title}</h1>
       <HeroComponent
         languageCode={languageCode}
+        title={homeDictionary.hero.title}
         dictionary={homeDictionary.info}
       />
       <DebuggerWidgetComponent