ok

src/components/HeroSection.js

@@ -1,7 +1,7 @@
 import { Container, Row, Col, Button } from 'react-bootstrap';
 import styles from './HeroSection.module.css';
 
-const HeroSection = ({scrollToProduct, scrollToCourse}) => {
+const HeroSection = ({ scrollToProduct, scrollToCourse }) => {
   return (
     <section className={`${styles.hero} pt-3 pb-3`}
       aria-label="Kediri Technopark hero section">
@@ -29,15 +29,27 @@ const HeroSection = ({scrollToProduct, scrollToCourse}) => {
           <Col xs={{ order: 1 }} lg={{ span: 4, order: 2 }} xl={{ span: 5, order: 2 }}>
             <div className={styles.imageWrap}>
               <div className={styles.imageFrame}>
-                <img
-                  src="https://kediritechnopark.com/assets/hero.png"
-                  alt="Ekosistem digital Kediri Technopark"
+                <video
                   className={`img-fluid ${styles.heroImage}`}
+                  autoPlay
+                  muted
+                  loop
+                  playsInline
                   loading="lazy"
                   decoding="async"
-                />
+                >
+                  <source src="/maya-idle.mp4" type="video/mp4" />
+                  Your browser does not support the video tag.
+                </video>
+
               </div>
             </div>
+            <div className='absolute'><h1>Perkenalkan Maya</h1>
+              <p>Asisten digital kami</p>
+              <Button variant="light" className={styles.ctaSecondary} onClick={()=>window.location.href='https://mayagen-cs.kediritechnopark.com'}>
+                  Bincang dengan Maya
+                </Button>
+                </div>
           </Col>
         </Row>
       </Container>

src/components/HeroSection.module.css

@@ -169,6 +169,7 @@
   aspect-ratio: 4 / 3;
   object-fit: cover;
   border-radius: calc(var(--radius-2xl) - 4px);
+  object-fit: contain;
 }
 
 .glow {