diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js --- a/landing/app-landing.react.js +++ b/landing/app-landing.react.js @@ -18,6 +18,7 @@
+
diff --git a/landing/global.css b/landing/global.css --- a/landing/global.css +++ b/landing/global.css @@ -1,7 +1,8 @@ :root { --landing-page-z-index: 0; - --mobile-nav-z-index: 1; - --header-z-index: 2; + --gradient-z-index: 1; + --mobile-nav-z-index: 2; + --header-z-index: 3; --purple: #7e57c2; --white: #fff; --white1: #ebedee; diff --git a/landing/hero-content.css b/landing/hero-content.css --- a/landing/hero-content.css +++ b/landing/hero-content.css @@ -1,6 +1,7 @@ .header { color: var(--white-80); margin-bottom: 24px; + z-index: var(--gradient-z-index); } .header span { diff --git a/landing/landing.css b/landing/landing.css --- a/landing/landing.css +++ b/landing/landing.css @@ -43,6 +43,17 @@ position: relative; } +.blur { + position: absolute; + width: 448px; + height: 360px; + border-radius: 50%; + background-color: var(--violet-dark-40); + top: 200px; + left: 224px; + filter: blur(80px); +} + .heroImage picture img { object-fit: cover; object-position: left center; @@ -51,6 +62,7 @@ top: 120px; width: 624px; height: 472px; + z-index: var(--gradient-z-index); } @media screen and (max-width: 1280px) { @@ -65,6 +77,17 @@ max-width: 600px; } + .blur { + position: absolute; + width: 70%; + height: 70%; + border-radius: 50%; + background-color: var(--violet-dark-40); + top: 112px; + left: 100px; + filter: blur(80px); + } + .heroImage picture img { top: 0; left: 0;