chore: try new key visual for hero

Author: jinhojang6

src/css/custom.scss

@@ -15,12 +15,12 @@ html {
   }
 }
 
+.mdx-hero-picture {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  position: relative;
+  flex-grow: 1;
 
-.mdx-hero-image {
-  display: flex;
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
-}
+  pointer-events: none;
+}

src/pages/index.mdx

@@ -20,6 +20,7 @@ import {
   LogoCarousel,
   Hero,
   HeroInfo,
+  HeroVideo,
 } from '../components/mdx'
 
 
@@ -37,10 +38,10 @@ import {
         </HeroAction>
       </HeroActions>
     </HeroInfo>
-    <picture>
-      <source srcSet="/hero/key-visual.png" media="(min-width: 100px)" className="mdx-hero-image" />
-      <img src="/hero/key-visual.webp" alt="key-visual" className="mdx-hero-image" />
-    </picture>
+    <HeroVideo
+      placeholderSrc="/hero/key-visual2.webp"
+      mobile={{ height: "100%", minHeight: "80vh" }}
+    />
   </Hero>
 
 <FeatureList