chore: try new key visual for hero

status-im · Jan 29, 2024 · 0298466 · 0298466
1 parent caea099
commit 0298466
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 12 deletions.
diff --git a/src/css/custom.scss b/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;
+}
diff --git a/src/pages/index.mdx b/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

diff --git a/static/hero/key-visual.png b/static/hero/key-visual.png
diff --git a/static/hero/key-visual.webp b/static/hero/key-visual.webp
diff --git a/static/hero/key-visual2.webp b/static/hero/key-visual2.webp