From b6bb0cc2ecd381b312463abcdd97d43819b44116 Mon Sep 17 00:00:00 2001
From: Kawika Avilla <kavilla414@gmail.com>
Date: Mon, 27 Nov 2023 23:57:07 +0000
Subject: [PATCH] Adds button

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
---
 .../homepage/hero_section/_hero_section.scss  | 20 +++++++++++++++++++
 .../homepage/hero_section/get_started.tsx     | 15 +++++++++++++-
 2 files changed, 34 insertions(+), 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
index 8a0f499eea83..3e226faeffc3 100644
--- 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
index 443ce44a3fc6..2b2cc55b815c 100644
--- 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>
+      }
     />
   );
 };