feat: add glow to landing page (#5636)

* chore: adjust z-index on the linear gradient

* feat: add blur

* fix: heights and paddings

* chore: abstract values into sep variable

* chore: remove bg

* chore: tweaks

src/components/NavBar/index.tsx

@@ -24,7 +24,7 @@ const MobileBottomBar = styled.div`
   left: 0;
   justify-content: space-between;
   padding: 4px 8px;
-  height: 56px;
+  height: ${({ theme }) => theme.mobileBottomBarHeight}px;
   background: ${({ theme }) => theme.backgroundSurface};
   border-top: 1px solid ${({ theme }) => theme.backgroundOutline};
 
@@ -33,6 +33,13 @@ const MobileBottomBar = styled.div`
   }
 `
 
+const Nav = styled.nav`
+  padding: 20px 12px;
+  width: 100%;
+  height: ${({ theme }) => theme.navHeight}px;
+  z-index: 2;
+`
+
 interface MenuItemProps {
   href: string
   id?: NavLinkProps['id']
@@ -91,7 +98,7 @@ const Navbar = () => {
 
   return (
     <>
-      <nav className={styles.nav}>
+      <Nav>
         <Box display="flex" height="full" flexWrap="nowrap" alignItems="stretch">
           <Box className={styles.leftSideContainer}>
             <Box className={styles.logoContainer}>
@@ -135,7 +142,7 @@ const Navbar = () => {
             </Row>
           </Box>
         </Box>
-      </nav>
+      </Nav>
       <MobileBottomBar>
         <PageTabs />
         <Box marginY="4">

src/components/NavBar/style.css.ts

@@ -3,20 +3,6 @@ import { style } from '@vanilla-extract/css'
 import { subhead } from '../../nft/css/common.css'
 import { sprinkles, vars } from '../../nft/css/sprinkles.css'
 
-export const nav = style([
-  sprinkles({
-    paddingX: '20',
-    paddingY: '12',
-    width: 'full',
-    height: '72',
-    zIndex: '2',
-    background: 'backgroundFloating',
-  }),
-  {
-    backdropFilter: 'blur(24px)',
-  },
-])
-
 export const logoContainer = style([
   sprinkles({
     display: 'flex',

src/pages/Landing/index.tsx

@@ -11,30 +11,58 @@ import styled from 'styled-components/macro'
 import { BREAKPOINTS } from 'theme'
 import { Z_INDEX } from 'theme/zIndex'
 
-const PageWrapper = styled.div<{ isDarkMode: boolean }>`
-  height: 100%;
+const PageWrapper = styled.div`
   width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  height: ${({ theme }) => `calc(100vh - ${theme.navHeight + theme.mobileBottomBarHeight}px)`};
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
+    height: ${({ theme }) => `calc(100vh - ${theme.navHeight}px)`};
+  }
+`
+
+const Gradient = styled.div<{ isDarkMode: boolean }>`
   position: absolute;
+  top: 0;
   bottom: 0;
+  width: 100%;
   background: ${({ isDarkMode }) =>
     isDarkMode
       ? 'linear-gradient(rgba(8, 10, 24, 0) 9.84%, rgb(8 10 24 / 86%) 35.35%)'
       : 'linear-gradient(rgba(8, 10, 24, 0) 9.84%, rgb(255 255 255 / 86%) 35.35%)'};
-  z-index: ${Z_INDEX.sticky};
-  display: flex;
-  flex-direction: column;
-  justify-content: end;
-  align-items: center;
-  padding: 32px;
-  transition: 250ms ease opacity;
+  z-index: ${Z_INDEX.dropdown};
   pointer-events: none;
+`
+
+const Glow = styled.div`
+  position: absolute;
+  top: 68px;
+  bottom: 0;
+  background: radial-gradient(72.04% 72.04% at 50% 3.99%, #ff37eb 0%, rgba(166, 151, 255, 0) 100%);
+  filter: blur(72px);
+  border-radius: 24px;
+  max-width: 480px;
+  width: 100%;
+`
+
+const ContentWrapper = styled.div<{ isDarkMode: boolean }>`
+  width: 100%;
+  max-width: min(720px, 90%);
+  position: absolute;
+  bottom: 0;
+  z-index: ${Z_INDEX.dropdown};
+  padding: 32px 0;
+  transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} opacity`};
 
   * {
     pointer-events: auto;
   }
 
   @media screen and (min-width: ${BREAKPOINTS.sm}px) {
-    padding: 64px;
+    padding: 64px 0;
   }
 `
 
@@ -124,10 +152,6 @@ const ButtonCTAText = styled.p`
   }
 `
 
-const TitleWrapper = styled.span`
-  max-width: 720px;
-`
-
 const ActionsWrapper = styled.span`
   display: flex;
   justify-content: center;
@@ -168,23 +192,25 @@ export default function Landing() {
 
   return (
     <Trace page={PageName.LANDING_PAGE} shouldLogImpression>
-      <PageWrapper isDarkMode={isDarkMode}>
-        <TitleWrapper>
+      <PageWrapper>
+        <Swap />
+        <Glow />
+        <Gradient isDarkMode={isDarkMode} />
+        <ContentWrapper isDarkMode={isDarkMode}>
           <TitleText isDarkMode={isDarkMode}>Trade crypto & NFTs with confidence.</TitleText>
           <SubTextContainer>
             <SubText>Buy, sell, and explore tokens and NFTs </SubText>
           </SubTextContainer>
-        </TitleWrapper>
-        <ActionsWrapper>
-          <ButtonCTA as={Link} to="/swap">
-            <ButtonCTAText>Continue</ButtonCTAText>
-          </ButtonCTA>
-          <ButtonCTASecondary as={Link} to="/about">
-            <ButtonCTAText>Learn more</ButtonCTAText>
-          </ButtonCTASecondary>
-        </ActionsWrapper>
+          <ActionsWrapper>
+            <ButtonCTA as={Link} to="/swap">
+              <ButtonCTAText>Continue</ButtonCTAText>
+            </ButtonCTA>
+            <ButtonCTASecondary as={Link} to="/about">
+              <ButtonCTAText>Learn more</ButtonCTAText>
+            </ButtonCTASecondary>
+          </ActionsWrapper>
+        </ContentWrapper>
       </PageWrapper>
-      <Swap />
     </Trace>
   )
 }

src/theme/index.tsx

@@ -80,6 +80,9 @@ function getSettings(darkMode: boolean) {
     // media queries
     deprecated_mediaWidth: deprecated_mediaWidthTemplates,
 
+    navHeight: 72,
+    mobileBottomBarHeight: 52,
+
     // deprecated - please use hardcoded exported values instead of
     // adding to the theme object
     breakpoint: BREAKPOINTS,