From 7245fc5eba431c93e6885daf7a41ce343e3d8724 Mon Sep 17 00:00:00 2001
From: Jonathan Puglla <jonathan.puglla@okta.com>
Date: Tue, 9 Jun 2026 13:35:19 -0500
Subject: [PATCH 1/3] fix: Update development server port to 3000.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4f8b87de..ec0c5e5c 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev -p 1234",
+    "dev": "next dev -p 3000",
     "generate:library-data": "tsx src/scripts/generate-library-data.ts",
     "build": "next build",
     "start": "next start",

From a4b49a6c9ccf903f5e61a4f01ca8995c31118eb7 Mon Sep 17 00:00:00 2001
From: Jonathan Puglla <jonathan.puglla@okta.com>
Date: Tue, 9 Jun 2026 13:41:42 -0500
Subject: [PATCH 2/3] fix: Add title display and update styles for the Hero
 CMP.

---
 .../common/components/hero/hero.component.tsx | 14 +++++++++++-
 .../common/components/hero/hero.module.scss   | 22 +++++++++++++++++++
 .../home-page/home-page.component.tsx         |  3 +--
 .../home-page/home-page.module.scss           | 11 ----------
 4 files changed, 36 insertions(+), 14 deletions(-)
 delete mode 100644 src/features/home/components/home-page/home-page.module.scss

diff --git a/src/features/common/components/hero/hero.component.tsx b/src/features/common/components/hero/hero.component.tsx
index 2f709d8c..9e09259c 100644
--- a/src/features/common/components/hero/hero.component.tsx
+++ b/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}>
             {
diff --git a/src/features/common/components/hero/hero.module.scss b/src/features/common/components/hero/hero.module.scss
index 69476e93..dfd90c30 100644
--- a/src/features/common/components/hero/hero.module.scss
+++ b/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;
diff --git a/src/features/home/components/home-page/home-page.component.tsx b/src/features/home/components/home-page/home-page.component.tsx
index 6ec77ab5..1b088239 100644
--- a/src/features/home/components/home-page/home-page.component.tsx
+++ b/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
diff --git a/src/features/home/components/home-page/home-page.module.scss b/src/features/home/components/home-page/home-page.module.scss
deleted file mode 100644
index 21eb3d36..00000000
--- a/src/features/home/components/home-page/home-page.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.visually_hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border: 0
-}
\ No newline at end of file

From dd7636ed46d56f8b05a0fa1c58e925d468cf866e Mon Sep 17 00:00:00 2001
From: Jonathan Puglla <jonathan.puglla@okta.com>
Date: Wed, 10 Jun 2026 10:53:53 -0500
Subject: [PATCH 3/3] fix: Revert development server port.

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ec0c5e5c..4f8b87de 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev -p 3000",
+    "dev": "next dev -p 1234",
     "generate:library-data": "tsx src/scripts/generate-library-data.ts",
     "build": "next build",
     "start": "next start",