Homepage Hero Upgrade w/ Alert (#10377)

* updating hero with ecs info

* updates to hero

* Include back the Basic Hero styles

The basic hero is still used on the use case pages

* Revert the tsconfig changes

Nothing in the scope of this PR requires these changes!

* Remove the old Carousel CSS file

This is no longer needed as we're using the @hashicorp/react-hero
which comes with all the styling required for this carousel to work.

* Rename ConsulHero -> HomepageHero imports/exports

This will help prevent any confusion for future devs here -- this is a
convention we have that helps us from having to trace every import,
which helps us find the source of the component without actually having
to look at the import.

* Pin the deps

These were previously pinned to the exact version; including ^ will
allow minor & patch updates to sneak in, which normally shouldn't cause
an issue but we tend to be more conservative on dep upgrades.

* Revert unneeded changes to the document file

* Revert changes to app.js file

Not needed in the scope of this PR!

* Hard pin react-alert

* Remove unneeded css

Co-authored-by: Brandon Romano <brandon@hashicorp.com>

website/components/homepage-hero/index.jsx

@@ -0,0 +1,59 @@
+import s from './style.module.css'
+import Hero from '@hashicorp/react-hero'
+
+export default function HomepageHero({
+  title,
+  description,
+  links,
+  uiVideo,
+  cliVideo,
+  alert,
+  image,
+}) {
+  return (
+    <div className={s.consulHero}>
+      <Hero
+        data={{
+          product: 'consul',
+          alert: alert ? { ...alert, tagColor: 'consul-pink' } : null,
+          title: title,
+          description: description,
+          buttons: links,
+          backgroundTheme: 'light',
+          centered: false,
+          image: image ? { ...image } : null,
+          videos: [
+            ...(uiVideo
+              ? [
+                  {
+                    name: uiVideo.name ?? 'UI',
+                    playbackRate: uiVideo.playbackRate,
+                    src: [
+                      {
+                        srcType: uiVideo.srcType,
+                        url: uiVideo.url,
+                      },
+                    ],
+                  },
+                ]
+              : []),
+            ...(cliVideo
+              ? [
+                  {
+                    name: cliVideo.name ?? 'CLI',
+                    playbackRate: cliVideo.playbackRate,
+                    src: [
+                      {
+                        srcType: cliVideo.srcType,
+                        url: cliVideo.url,
+                      },
+                    ],
+                  },
+                ]
+              : []),
+          ],
+        }}
+      />
+    </div>
+  )
+}

website/components/homepage-hero/style.module.css

@@ -1,66 +1,4 @@
-.homepageHero {
-  & :global(.g-text-split) :global(.g-grid-container) {
-    @media (width < 1120px) {
-      flex-direction: column-reverse;
-    }
-
-    & > div {
-      @media (768px < width < 1120px) {
-        width: 40em;
-      }
-
-      &:last-child {
-        @media (width < 1120px) {
-          margin-bottom: 64px;
-          text-align: center;
-        }
-
-        & p {
-          @media (width < 1120px) {
-            margin: 16px auto;
-          }
-        }
-      }
-    }
-
-    /**
-         * HACK:
-         * Overrides the H2 with styling from
-         * our global g-type-display-1 class.
-         *
-         * This was because there's no way to
-         * override the heading in <TextSplit />
-         * with the designed h1 styling.
-         *
-         * TODO:
-         * Address this at the component
-         * level or revert to just using h2
-         * as is default.
-         */
-    & h2 {
-      font-size: 2.125rem;
-      letter-spacing: -0.008em;
-      line-height: 1.265em;
-
-      @media (--medium-up) {
-        font-size: 2.625rem;
-        letter-spacing: -0.01em;
-        line-height: 1.19em;
-      }
-
-      @media (--large) {
-        font-size: 3.125rem;
-        line-height: 1.2em;
-      }
-    }
-
-    & p {
-      max-width: 440px;
-      font-size: 1.25rem;
-      line-height: 1.55em;
-    }
-  }
-
+.consulHero {
   /* Customize the branding  */
   & :global(.carousel .controls .control) {
     color: var(--gray-2);
@@ -71,8 +9,10 @@
       }
     }
   }
-  & :global(.video-wrapper.is-active) {
-    /* Padding % modifier differs slightly from react-hero to accommodate video heights  */
-    padding-top: calc((100% * 0.57) + 28px);
+  & :global(.g-hero .carousel) {
+    & :global(.video-wrapper.is-active) {
+      /* Padding % modifier differs slightly from react-hero to accommodate video heights  */
+      padding-top: calc((100% * 0.57) + 28px); /* !important; */
+    }
   }
 }