From f6d7defdf627439570dc019ec60d3182e8e39578 Mon Sep 17 00:00:00 2001
From: heather-storm-sp <heather.storm@sailpoint.com>
Date: Mon, 16 Mar 2026 15:03:45 -0600
Subject: [PATCH 1/3] fix: resolve ISC homepage block overlap and update
 YouTube link

Update the YouTube embed on the homepage Getting Started hero to the new video. Fix card title/product label overlap by bumping .cardText bottom offset to 32px, and add min-width: 0 to .contentContainer to prevent grid overflow on narrow viewports.

Made-with: Cursor
---
 src/components/homepage/HomepageCard/styles.module.css        | 2 +-
 src/components/homepage/HomepageGettingStarted/index.tsx      | 2 +-
 .../homepage/HomepageGettingStarted/styles.module.css         | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/homepage/HomepageCard/styles.module.css b/src/components/homepage/HomepageCard/styles.module.css
index a066e36d9ee5f..d59fafa22def5 100644
--- a/src/components/homepage/HomepageCard/styles.module.css
+++ b/src/components/homepage/HomepageCard/styles.module.css
@@ -34,7 +34,7 @@
   font-size: 16px;
   font-weight: 600;
   width: 135px;
-  bottom: 0;
+  bottom: 32px;
   left: 0;
   color: var(--ifm-primary-text-color);
 }
diff --git a/src/components/homepage/HomepageGettingStarted/index.tsx b/src/components/homepage/HomepageGettingStarted/index.tsx
index 226e5fce19379..883b2b93cdad7 100644
--- a/src/components/homepage/HomepageGettingStarted/index.tsx
+++ b/src/components/homepage/HomepageGettingStarted/index.tsx
@@ -39,7 +39,7 @@ export default function HomepageGettingStarted(): JSX.Element {
         <div className={styles.carousel}>
           <iframe
             className={styles.video}
-            src="https://www.youtube.com/embed/MYhWuqAAUvY?si=GPhe53efO7QLJ_RJ"
+            src="https://www.youtube.com/embed/44R4iXTazUQ?si=kHALvSCvKz_cBKGK"
             title="YouTube video player"
             frameBorder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/src/components/homepage/HomepageGettingStarted/styles.module.css b/src/components/homepage/HomepageGettingStarted/styles.module.css
index 9e3a0d43ea333..da7045389f1f8 100644
--- a/src/components/homepage/HomepageGettingStarted/styles.module.css
+++ b/src/components/homepage/HomepageGettingStarted/styles.module.css
@@ -55,6 +55,10 @@
   margin-right: 50px;
 }
 
+.contentContainer {
+  min-width: 0;
+}
+
 @media only screen and (max-width: 1178px) {
   .carousel {
     margin-top: 0px;

From 685f6431c1f4829297e5e3500b3ac143981e1b5c Mon Sep 17 00:00:00 2001
From: heather-storm-sp <heather.storm@sailpoint.com>
Date: Tue, 17 Mar 2026 08:07:12 -0600
Subject: [PATCH 2/3] chore: update js-yaml to version 4.1.1 and enhance
 HomepageCard component layout

- Updated js-yaml dependency in package.json and package-lock.json to version 4.1.1.
- Refactored HomepageCard component for improved layout, ensuring better alignment of images and text.
- Modified styles for the card to enhance responsiveness and visual appeal.
---
 package-lock.json                             | 21 +++++--
 package.json                                  |  2 +-
 .../homepage/HomepageCard/index.tsx           | 34 ++++++------
 .../homepage/HomepageCard/styles.module.css   | 55 +++++++++----------
 4 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7fa682e840658..be3b164da1f14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,7 +59,7 @@
         "dotenv": "^16.4.5",
         "esbuild": "^0.25.0",
         "husky": "^8.0.2",
-        "js-yaml": "^4.1.0",
+        "js-yaml": "^4.1.1",
         "prettier": "2.8.0",
         "pretty-quick": "^3.1.3",
         "speccy": "^0.8.7",
@@ -14760,9 +14760,10 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -19246,6 +19247,18 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "license": "MIT"
     },
+    "node_modules/openapi-to-postmanv2/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/opener": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
diff --git a/package.json b/package.json
index 86cbfb54983ca..27f6fca424e19 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,7 @@
     "dotenv": "^16.4.5",
     "esbuild": "^0.25.0",
     "husky": "^8.0.2",
-    "js-yaml": "^4.1.0",
+    "js-yaml": "^4.1.1",
     "prettier": "2.8.0",
     "pretty-quick": "^3.1.3",
     "speccy": "^0.8.7",
diff --git a/src/components/homepage/HomepageCard/index.tsx b/src/components/homepage/HomepageCard/index.tsx
index c2bed7f6e5f5a..2b02b082b0325 100644
--- a/src/components/homepage/HomepageCard/index.tsx
+++ b/src/components/homepage/HomepageCard/index.tsx
@@ -19,25 +19,25 @@ const HomepageCard: React.FC<HomepageCardProps> = ({ link, title, image, product
     <Link to={link}>
       <div className={styles.card}>
         {image && (
-          <>
-            <ThemedImage
-              className={styles.cardIcon}
-              sources={{
-                light: useBaseUrl(image),
-                dark: useBaseUrl(addDarkToFileName(image)),
-              }}
-            />
-            <ThemedImage
-              className={styles.cardArrow}
-              sources={{
-                light: useBaseUrl('/homepage/arrow-right.png'),
-                dark: useBaseUrl('/homepage/arrow-right-dark.png'),
-              }}
-            />
-          </>
+          <ThemedImage
+            className={styles.cardIcon}
+            sources={{
+              light: useBaseUrl(image),
+              dark: useBaseUrl(addDarkToFileName(image)),
+            }}
+          />
         )}
-        <div className={styles.cardText}>{title}</div>
         <div className={`${styles.product} ${productStyles}`}>{product}</div>
+        <div className={styles.cardText}>{title}</div>
+        {image && (
+          <ThemedImage
+            className={styles.cardArrow}
+            sources={{
+              light: useBaseUrl('/homepage/arrow-right.png'),
+              dark: useBaseUrl('/homepage/arrow-right-dark.png'),
+            }}
+          />
+        )}
       </div>
     </Link>
   );
diff --git a/src/components/homepage/HomepageCard/styles.module.css b/src/components/homepage/HomepageCard/styles.module.css
index d59fafa22def5..01c29efd6a62a 100644
--- a/src/components/homepage/HomepageCard/styles.module.css
+++ b/src/components/homepage/HomepageCard/styles.module.css
@@ -1,9 +1,14 @@
 /* Getting Started Card */
 .card {
-  height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  min-height: 200px;
   position: relative;
   margin-top: 30px;
   margin-bottom: 30px;
+  padding: 20px;
   opacity: 1;
   transition: all 0.3s;
   background: var(--dev-new-car-background);
@@ -28,48 +33,38 @@
   box-shadow: var(--dev-card-selected);
 }
 
-.cardText {
-  position: absolute;
-  margin: 20px;
-  font-size: 16px;
-  font-weight: 600;
-  width: 135px;
-  bottom: 32px;
-  left: 0;
-  color: var(--ifm-primary-text-color);
-}
-
 .cardIcon {
-  position: absolute;
-  margin: 20px;
-  top: 0;
-  left: 0;
   width: 30%;
-}
-
-.cardArrow {
-  position: absolute;
-  margin: 20px;
-  bottom: 25px;
-  right: 0;
-  width: 20px;
+  flex-shrink: 0;
 }
 
 .product {
-  position: absolute;
-  margin: 20px;
   font-size: 12px;
   font-weight: 500;
-  width: 120px;
-  bottom: 50px;
-  left: 0;
+  color: var(--ifm-primary-text-color);
 }
 
-.idn, .iiq {
+.idn,
+.iiq {
   color: var(--ifm-primary-text-color);
   font-weight: 400;
 }
 
+.cardText {
+  font-size: 16px;
+  font-weight: 600;
+  flex: 1;
+  color: var(--ifm-primary-text-color);
+  line-height: 1.3;
+}
+
+.cardArrow {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  width: 20px;
+}
+
 @media only screen and (max-width: 570px) {
   .cardIcon {
     width: 15%;

From eb2d237b6c2cd22cc8544713f3133f1b05e01c7d Mon Sep 17 00:00:00 2001
From: heather-storm-sp <heather.storm@sailpoint.com>
Date: Tue, 17 Mar 2026 12:15:58 -0600
Subject: [PATCH 3/3] refactor: update team member details and enhance navbar
 responsiveness

- Changed title for Heather Storm to 'Head of Developer Relations'.
- Reintroduced Tyler Mairose and Danielle Andrist with updated titles and expertise.
- Improved navbar styles for better responsiveness across various screen sizes, including adjustments to logo size and navbar item display for mobile views.
---
 .../homepage/HomepageTeam/index.tsx           | 32 +++---
 src/css/custom.css                            | 98 ++++++++++++++++++-
 2 files changed, 112 insertions(+), 18 deletions(-)

diff --git a/src/components/homepage/HomepageTeam/index.tsx b/src/components/homepage/HomepageTeam/index.tsx
index 90f47ebaee5db..f74c6ab8a9f5b 100644
--- a/src/components/homepage/HomepageTeam/index.tsx
+++ b/src/components/homepage/HomepageTeam/index.tsx
@@ -14,17 +14,10 @@ const teamMembers: TeamMember[] = [
   {
     link: 'https://developer.sailpoint.com/discuss/u/heatherstorm/summary',
     name: 'Heather Storm',
-    title: ['Senior Manager', 'Developer Relations'],
+    title: ['Head of', 'Developer Relations'],
     expertise: 'DEVELOPER TOOLS',
     image: '/homepage/heather-storm.jpg',
   },
-  {
-    link: 'https://developer.sailpoint.com/discuss/u/tyler_mairose/summary',
-    name: 'Tyler Mairose',
-    title: ['Developer Advocate'],
-    expertise: 'Identity Security Cloud'.toUpperCase(),
-    image: '/homepage/tyler-mairose.png',
-  },
   {
     link: 'https://developer.sailpoint.com/discuss/u/philip-ellis/summary',
     name: 'Philip Ellis',
@@ -32,13 +25,6 @@ const teamMembers: TeamMember[] = [
     expertise: 'DEVELOPER TOOLS',
     image: '/homepage/phil-ellis.png',
   },
-  {
-    link: 'https://developer.sailpoint.com/discuss/u/dnandrist/summary',
-    name: 'Danielle Andrist',
-    title: ['Developer Community', 'Program Manager'],
-    expertise: 'COMMUNITY',
-    image: '/homepage/danielle-andrist.jpg',
-  },
   {
     link: 'https://developer.sailpoint.com/discuss/u/lukehagar/summary',
     name: 'Luke Parke',
@@ -46,13 +32,27 @@ const teamMembers: TeamMember[] = [
     expertise: 'DEVELOPER TOOLS',
     image: '/homepage/lukeparke.png',
   },
+  {
+    link: 'https://developer.sailpoint.com/discuss/u/tyler_mairose/summary',
+    name: 'Tyler Mairose',
+    title: ['Developer Advocate'],
+    expertise: 'DEVELOPER TOOLS',
+    image: '/homepage/tyler-mairose.png',
+  },
   {
     link: 'https://developer.sailpoint.com/discuss/u/samantha_holstine/summary',
     name: 'Samantha Holstine',
-    title: ['Software Engineer'],
+    title: ['Developer Advocate'],
     expertise: 'DEVELOPER TOOLS',
     image: '/homepage/samantha-holstine.png',
   },
+  {
+    link: 'https://developer.sailpoint.com/discuss/u/dnandrist/summary',
+    name: 'Danielle Andrist',
+    title: ['Senior Developer Community', 'Program Manager'],
+    expertise: 'COMMUNITY',
+    image: '/homepage/danielle-andrist.jpg',
+  },
 ];
 
 const HomepageTeam: React.FC = () => {
diff --git a/src/css/custom.css b/src/css/custom.css
index f68d8262c304c..789b5ae760f33 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -368,10 +368,32 @@ h1 {
   text-decoration: underline !important;
 }
 
+/* Header: base and responsive layout */
 .navbar__logo {
   margin-right: 0.5rem;
 }
 
+.navbar__logo img {
+  height: auto;
+  max-height: 32px;
+  width: auto;
+  object-fit: contain;
+}
+
+/* Prevent navbar content from overflowing on narrow viewports */
+.navbar__inner {
+  min-width: 0;
+  flex-wrap: nowrap;
+}
+
+.navbar__items {
+  min-width: 0;
+}
+
+.navbar__item {
+  white-space: nowrap;
+}
+
 .cardContainer_S8oU {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
     var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -383,21 +405,81 @@ h1 {
   transform: scale(1.02);
 }
 
+/* Responsive logo sizing so lockup doesn’t dominate on smaller screens */
 @media only screen and (max-width: 1450px) {
-  .navbar__logo {
-    content: var(--dev-sailpoint-small-logo);
+  .navbar__logo img {
+    max-height: 28px;
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  .navbar__logo img {
+    max-height: 26px;
+  }
+
+  .navbar__link {
+    font-size: 0.9rem;
   }
 }
+
 @media only screen and (max-width: 1043px) {
   .navbar__item {
     padding: 4px 8px;
   }
+
+  .navbar__logo img {
+    max-height: 24px;
+  }
+}
+
+/*
+ * Custom navbar breakpoint: hamburger menu at 1410px so nav items never overlap the logo.
+ */
+@media only screen and (max-width: 1410px) {
+  .navbar__toggle {
+    display: inherit;
+  }
+
+  .navbar__item {
+    display: none;
+  }
+
+  .navbar__logo img {
+    max-height: 28px;
+  }
+
+  .colorModeToggle {
+    display: none;
+  }
+}
+
+/* Mobile sidebar (hamburger menu open) */
+@media (max-width: 1200px) {
+  .navbar-sidebar__item {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .menu__link {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
 }
 
 @media (max-width: 768px) {
   .menu__link {
     padding-left: 8%;
   }
+
+  .navbar__logo img {
+    max-height: 24px;
+  }
+}
+
+@media (max-width: 480px) {
+  .navbar__logo img {
+    max-height: 22px;
+  }
 }
 
 .navbar__title {
@@ -407,6 +489,18 @@ h1 {
   font-weight: 400;
 }
 
+@media (max-width: 1200px) {
+  .navbar__title {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 480px) {
+  .navbar__title {
+    font-size: 16px;
+  }
+}
+
 .menu__link {
   padding-left: 13%;
 }