Adds button

Signed-off-by: Kawika Avilla <[email protected]>
kavilla · Nov 27, 2023 · b6bb0cc · b6bb0cc
1 parent 162bed1
commit b6bb0cc
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/src/plugins/home/public/application/components/homepage/hero_section/_hero_section.scss b/src/plugins/home/public/application/components/homepage/hero_section/_hero_section.scss
@@ -13,3 +13,23 @@
 .home-getStarted-chatIcon {
   padding-left: $euiSizeXS;
 }
+
+.home-hero-illustrationContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.home-hero-illustrationButton {
+  z-index: 1040;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  &:hover:not([class*="isDisabled"]),
+  &:active:not([class*="isDisabled"]),
+  &:focus:not([class*="isDisabled"]) {
+    transform: translate(-50%, -50%);
+    animation: none !important;
+  }
+}
diff --git a/src/plugins/home/public/application/components/homepage/hero_section/get_started.tsx b/src/plugins/home/public/application/components/homepage/hero_section/get_started.tsx
@@ -15,6 +15,7 @@ import {
   EuiImage,
   EuiLink,
   EuiIcon,
+  EuiButtonIcon,
 } from '@elastic/eui';
 import { HeroSection } from './hero_section';
 import illustration from '../../../../assets/illustration.svg';
@@ -140,7 +141,19 @@ export const GetStartedSection: React.FC<{ olly?: boolean }> = ({ olly = true })
           <EuiImage src={illustration} alt="illustration" size="fullWidth" />
         )
       }
-      illustration={<EuiImage src={image} alt="Animated gif 16:9 ratio" />}
+      illustration={
+        <div className="home-hero-illustrationContainer ">
+          <EuiButtonIcon
+            aria-labelledby="home-hero-illustrationPlay"
+            className="home-hero-illustrationButton"
+            display="fill"
+            iconType="play"
+            iconSize="l"
+            size="m"
+          />
+          <EuiImage src={image} alt="Animated gif 16:9 ratio" />
+        </div>
+      }
     />
   );
 };