diff --git a/src/components/HomepageHero/index.tsx b/src/components/HomepageHero/index.tsx
index 967ece246..8132b7f80 100644
--- a/src/components/HomepageHero/index.tsx
+++ b/src/components/HomepageHero/index.tsx
@@ -1,7 +1,9 @@
import React from "react";
import clsx from "clsx";
import Translate from "@docusaurus/Translate";
-import HeroBg from "./HeroBgAnimation";
+
+import HeroDesktopBg from "@site/static/img/hero-desktop.svg";
+import HeroMobileBg from "@site/static/img/hero-mobile.svg";
import styles from "./styles.module.scss";
import { useIsJapanese } from "@site/src/utils/isJapanese";
import { useColorMode } from "@docusaurus/theme-common";
@@ -53,7 +55,8 @@ export default function HomepageHero(): JSX.Element {
-
+
+
);
}
diff --git a/src/components/HomepageHero/styles.module.scss b/src/components/HomepageHero/styles.module.scss
index 454102b54..7efc6135c 100644
--- a/src/components/HomepageHero/styles.module.scss
+++ b/src/components/HomepageHero/styles.module.scss
@@ -1,13 +1,18 @@
.homepageHero {
display: flex;
min-height: 60vh;
- align-items: center;
+ align-items: end;
padding: 3.125rem 0;
position: relative;
overflow: hidden;
+ @media only screen and (min-width: 600px) {
+ align-items: center;
+ }
+
+
@media only screen and (min-width: 996px) {
- padding: 8.25rem 0;
+ padding: 8.25rem 20px;
height: auto;
--ifm-heading-margin-bottom: 3rem;
--ifm-spacing-horizontal: 0.4rem;
@@ -34,44 +39,45 @@
text-shadow: 0px 6px 44px #030a40;
}
-.heroBgAnimationMobile {
- position: absolute;
- right: 0;
- top: 0;
- z-index: 0;
-
- svg {
- object-fit: cover;
- display: block;
- }
-
- @media only screen and (min-width: 996px) {
- display: none;
- }
-}
-
-.heroBgAnimationDesktop {
- position: absolute;
- bottom: 0;
- right: 0;
- top: 0;
- z-index: 0;
- display: none;
-
- svg {
- // position: absolute;
- // top: 0;
- // right: 0;
- // bottom: 0;
- // height: 100%;
- width: auto !important;
- }
-
- @media only screen and (min-width: 996px) {
- display: flex;
- justify-content: flex-end;
- }
-}
+//using static SVG now instead
+// .heroBgAnimationMobile {
+// position: absolute;
+// right: 0;
+// top: 0;
+// z-index: 0;
+
+// svg {
+// object-fit: cover;
+// display: block;
+// }
+
+// @media only screen and (min-width: 996px) {
+// display: none;
+// }
+// }
+
+// .heroBgAnimationDesktop {
+// position: absolute;
+// bottom: 0;
+// right: 0;
+// top: 0;
+// z-index: 0;
+// display: none;
+
+// svg {
+// // position: absolute;
+// // top: 0;
+// // right: 0;
+// // bottom: 0;
+// // height: 100%;
+// width: auto !important;
+// }
+
+// @media only screen and (min-width: 996px) {
+// display: flex;
+// justify-content: flex-end;
+// }
+// }
.homepageHeroContent {
position: relative;
@@ -90,6 +96,29 @@
}
}
+.heroBg {
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 0;
+ bottom: 0;
+ height: 100%;
+ width: auto;
+}
+
+.heroMobileBg {
+ @media screen and (min-width: 996px) {
+ display: none;
+ }
+}
+
+.heroDesktopBg {
+ display: none;
+ @media screen and (min-width: 996px) {
+ display: block;
+ }
+}
+
/*** Japanese Styles **/
.heroHeadingJa {
diff --git a/static/img/hero-desktop.svg b/static/img/hero-desktop.svg
new file mode 100644
index 000000000..7ffe05f46
--- /dev/null
+++ b/static/img/hero-desktop.svg
@@ -0,0 +1,511 @@
+
+
+
diff --git a/static/img/hero-mobile.svg b/static/img/hero-mobile.svg
new file mode 100644
index 000000000..b4c8be3d1
--- /dev/null
+++ b/static/img/hero-mobile.svg
@@ -0,0 +1,288 @@
+