+
@@ -114,12 +114,18 @@ const HeroSection: React.FC = () => {
-
+
+
+
+
+
+
+
@@ -199,27 +205,27 @@ const useStyles = makeStyles((theme) => ({
justifyContent: "center",
width: "50%",
[theme.breakpoints.down("md")]: {
- width: "100%",
+ width: "auto",
height: "unset",
paddingTop: "2.265rem",
alignItems: "center",
padding: "0",
+ marginBottom: "50px",
},
- [theme.breakpoints.only("sm")]: {
+ [theme.breakpoints.down("sm")]: {
height: "unset",
- marginBottom: "80px",
+ width: "100%",
},
[theme.breakpoints.only("xs")]: {
padding: "2.265rem 0 0",
height: "unset",
- marginBottom: "80px",
},
},
contentContainer: {
marginTop: "3rem",
position: "relative",
display: "flex",
- justifyContent: "center",
+ justifyContent: "space-between",
alignItems: "center",
padding: 0,
opacity: 0,
@@ -236,6 +242,8 @@ const useStyles = makeStyles((theme) => ({
},
[theme.breakpoints.down("sm")]: {
padding: "0",
+ justifyContent: "center",
+ flexDirection: "column",
},
},
content: {
@@ -351,12 +359,21 @@ const useStyles = makeStyles((theme) => ({
},
},
graphicsWrapper: {
+ position: "relative",
overflow: "hidden",
marginLeft: "-9rem",
[theme.breakpoints.up("xl")]: {
overflow: "visible",
},
+ [theme.breakpoints.down("md")]: {
+ width: "60%",
+ },
},
+ mobileGraphicsWrapper: {
+ display: "flex",
+ justifyContent: "center",
+ marginBottom: "50px",
+ },
svgIcon: {
position: "relative",
left: "50px",
@@ -391,6 +408,9 @@ const useStyles = makeStyles((theme) => ({
height: "16px",
},
},
+ containerWrapper: {
+ maxWidth: "100%",
+ },
}));
export default HeroSection;
diff --git a/src/@demex-info/views/HeroSection/assets/Mobile.svg b/src/@demex-info/views/HeroSection/assets/Mobile.svg
new file mode 100644
index 00000000..41a88ec9
--- /dev/null
+++ b/src/@demex-info/views/HeroSection/assets/Mobile.svg
@@ -0,0 +1,24 @@
+
diff --git a/src/@demex-info/views/HeroSection/assets/index.ts b/src/@demex-info/views/HeroSection/assets/index.ts
index 4360aef3..b0f7eaad 100644
--- a/src/@demex-info/views/HeroSection/assets/index.ts
+++ b/src/@demex-info/views/HeroSection/assets/index.ts
@@ -1 +1,2 @@
export { ReactComponent as DesktopMobile } from "./DesktopMobile.svg";
+export { ReactComponent as Mobile } from "./Mobile.svg";
diff --git a/src/@demex-info/views/UnleashTrader/UnleashTrader.tsx b/src/@demex-info/views/UnleashTrader/UnleashTrader.tsx
index edb41c04..7ff9377c 100644
--- a/src/@demex-info/views/UnleashTrader/UnleashTrader.tsx
+++ b/src/@demex-info/views/UnleashTrader/UnleashTrader.tsx
@@ -68,7 +68,7 @@ const useStyles = makeStyles((theme) => ({
position: {
position: "absolute",
left: 0,
- width: "50vw",
+ width: "50%",
overflow: "hidden",
[theme.breakpoints.up("lg")]: {
top: "-30rem",