fix: resolve ISC homepage block, home bar, team cards and update YouTube link

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",

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>
   );

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: 0;
-  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%;

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"

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;

src/components/homepage/HomepageTeam/index.tsx

@@ -14,45 +14,45 @@ 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',
     title: ['Principal Software Engineer'],
     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',
     title: ['Software Engineer'],
     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 = () => {

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%;
 }