feat: Initial landing page redesign updates (#5456)

* Initial landing page redesign updates

* export

* unnecessary brackets

* unused component

* remove state for the overlay

* remove more show landing logic

* only show when on /

* gated

* pointer events fix

* import z-index

* get started -> continue

* rm text-fill-color

* no fill color

* unused icon

* dont add route

* css fixes

src/components/Button/index.tsx

@@ -211,6 +211,19 @@ export const ButtonEmpty = styled(BaseButton)`
   }
 `
 
+export const ButtonCTA = styled(BaseButton)<{ redesignFlag?: boolean }>`
+  background: linear-gradient(10deg, rgba(255, 0, 199, 1) 0%, rgba(255, 159, 251, 1) 100%);
+  width: fit-content;
+  border-radius: 24px;
+  border: none;
+  padding: 16px 77.5px;
+  margin-left: 12px;
+  margin-bottom: 12px;
+  color: ${({ theme }) => theme.white};
+  &:hover {
+    opacity: 75%;
+  }
+`
 export const ButtonText = styled(BaseButton)`
   padding: 0;
   width: fit-content;

src/components/NavBar/index.tsx

@@ -7,7 +7,7 @@ import { Box } from 'nft/components/Box'
 import { Row } from 'nft/components/Flex'
 import { UniIcon } from 'nft/components/icons'
 import { ReactNode } from 'react'
-import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
+import { NavLink, NavLinkProps, useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
 import { Bag } from './Bag'
@@ -87,14 +87,22 @@ const PageTabs = () => {
 
 const Navbar = () => {
   const isNftPage = useIsNftPage()
+  const navigate = useNavigate()
 
   return (
     <>
       <nav className={styles.nav}>
         <Box display="flex" height="full" flexWrap="nowrap" alignItems="stretch">
           <Box className={styles.leftSideContainer}>
-            <Box as="a" href="#/swap" className={styles.logoContainer}>
+            <Box className={styles.logoContainer}>
-              <UniIcon width="48" height="48" className={styles.logo} />
+              <UniIcon
+                width="48"
+                height="48"
+                className={styles.logo}
+                onClick={() => {
+                  navigate('/')
+                }}
+              />
             </Box>
             {!isNftPage && (
               <Box display={{ sm: 'flex', lg: 'none' }}>

src/components/NavBar/style.css.ts

@@ -12,6 +12,9 @@ export const nav = style([
     zIndex: '2',
     background: 'backgroundFloating',
   }),
+  {
+    backdropFilter: 'blur(24px)',
+  },
 ])
 
 export const logoContainer = style([
@@ -19,6 +22,7 @@ export const logoContainer = style([
     display: 'flex',
     marginRight: { sm: '12', xxl: '20' },
     alignItems: 'center',
+    cursor: 'pointer',
   }),
 ])
 

src/components/swap/styleds.tsx

@@ -23,13 +23,19 @@ export const PageWrapper = styled.div`
 `
 
 // Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility.
-export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
+export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string; open: boolean }>`
   position: relative;
   background: ${({ theme }) => theme.backgroundSurface};
   border-radius: 16px;
   border: 1px solid ${({ theme }) => theme.backgroundOutline};
   padding: 8px;
   z-index: ${Z_INDEX.deprecated_content};
+  cursor: ${({ open }) => (open ? 'pointer' : 'suto')};
+  transition: transform 250ms ease;
+  &:hover {
+    border: 1px solid ${({ theme, open }) => (open ? theme.accentAction : theme.backgroundOutline)};
+    transform: ${({ open }) => (open ? `translateY(-4px)` : `none`)};
+  }
 `
 
 export const ArrowWrapper = styled.div<{ clickable: boolean }>`

src/pages/About.tsx

@@ -0,0 +1,185 @@
+import { Box } from 'nft/components/Box'
+import { DiscordIconMenu, GithubIconMenu, TwitterIconMenu } from 'nft/components/icons'
+import { ReactNode } from 'react'
+import { BookOpen, Globe, Heart, HelpCircle, Terminal, Twitter } from 'react-feather'
+import { useIsDarkMode } from 'state/user/hooks'
+import styled, { useTheme } from 'styled-components/macro'
+import { BREAKPOINTS } from 'theme'
+
+const MOBILE_BREAKPOINT = BREAKPOINTS.md
+
+const IconRow = styled.span`
+  display: flex;
+  flex-direction: row;
+`
+
+const SMALL_CARD_ICON_SIZE = 32
+
+const Icon = ({ href, children }: { href?: string; children: ReactNode }) => {
+  return (
+    <Box
+      as={href ? 'a' : 'div'}
+      href={href ?? undefined}
+      target={href ? '_blank' : undefined}
+      rel={href ? 'noopener noreferrer' : undefined}
+      display="flex"
+      flexDirection="column"
+      color="textPrimary"
+      background="none"
+      border="none"
+      justifyContent="center"
+      textAlign="center"
+      marginRight="12"
+    >
+      {children}
+    </Box>
+  )
+}
+
+const PageWrapper = styled.span<{ isDarkMode: boolean }>`
+  width: 100%;
+  align-self: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`
+
+const TitleText = styled.h1<{ isDarkMode: boolean }>`
+  color: transparent;
+  font-size: 48px;
+  font-weight: 600;
+  margin-bottom: 0px;
+  background: ${({ isDarkMode }) =>
+    isDarkMode
+      ? 'linear-gradient(20deg, rgba(255, 244, 207, 1) 10%, rgba(255, 87, 218, 1) 100%)'
+      : 'linear-gradient(10deg, rgba(255,79,184,1) 0%, rgba(255,159,251,1) 100%)'};
+
+  background-clip: text;
+  -webkit-background-clip: text;
+
+  @media screen and (min-width: ${MOBILE_BREAKPOINT}px) {
+    font-size: 72px;
+  }
+`
+
+const Body = styled.p`
+  color: ${({ theme }) => theme.textPrimary};
+  font-size: 18px;
+  padding: 0;
+  margin: 0;
+`
+
+const ContentWrapper = styled.span`
+  max-width: 960px;
+  pointer-events: all;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 8rem 1rem 1rem 1rem;
+  gap: 24px;
+
+  @media screen and (min-width: ${MOBILE_BREAKPOINT}px) {
+    padding: 8rem 5rem 5rem 5rem;
+    gap: 56px;
+  }
+`
+
+const SmallCardContainer = styled.div`
+  display: grid;
+  gap: 12px;
+  width: 100%;
+  grid-template-columns: 1fr;
+
+  @media screen and (min-width: ${BREAKPOINTS.sm}px) {
+    grid-template-columns: 1fr 1fr;
+  }
+  @media screen and (min-width: ${BREAKPOINTS.lg}px) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+`
+
+const SmallCard = styled.a`
+  background-color: #0e111a;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  text-decoration: none;
+  color: white;
+  padding: 32px;
+  min-height: 220px;
+  font-weight: light;
+  border-radius: 12px;
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  font-size: 32px;
+  transition: 200ms ease all;
+
+  &:hover {
+    transition: 200ms ease background-color;
+    background-color: ${({ theme }) => theme.backgroundModule};
+  }
+`
+
+export default function About() {
+  const isDarkMode = useIsDarkMode()
+  const theme = useTheme()
+
+  return (
+    <PageWrapper isDarkMode={isDarkMode}>
+      <ContentWrapper>
+        <TitleText isDarkMode={isDarkMode}>
+          Our mission: <br />
+          Unlock universal ownership & exchange
+        </TitleText>
+        <Body>
+          Uniswap Labs is building the future of decentralized finance by harnessing the power of the Uniswap Protocol.
+        </Body>
+
+        <SmallCardContainer>
+          <SmallCard href="https://uniswap.org" target="_blank" rel="noopener noreferrer">
+            <Globe size={SMALL_CARD_ICON_SIZE} strokeWidth={1} color={theme.textSecondary} />
+            Uniswap Protocol
+          </SmallCard>
+          <SmallCard href="https://uniswap.org/blog" target="_blank" rel="noopener noreferrer">
+            <BookOpen size={SMALL_CARD_ICON_SIZE} strokeWidth={1} color={theme.textSecondary} />
+            Blog
+          </SmallCard>
+          <SmallCard href="https://boards.greenhouse.io/uniswaplabs" target="_blank" rel="noopener noreferrer">
+            <Heart size={SMALL_CARD_ICON_SIZE} strokeWidth={1} color={theme.textSecondary} />
+            Careers
+          </SmallCard>
+          <SmallCard href="https://support.uniswap.org/" target="_blank" rel="noopener noreferrer">
+            <HelpCircle size={SMALL_CARD_ICON_SIZE} strokeWidth={1} color={theme.textSecondary} />
+            Support
+          </SmallCard>
+          <SmallCard href="https://twitter.com/Uniswap" target="_blank" rel="noopener noreferrer">
+            <Twitter size={SMALL_CARD_ICON_SIZE} strokeWidth={1} color={theme.textSecondary} />
+            Twitter
+          </SmallCard>
+          <SmallCard href="https://uniswap.org/developers" target="_blank" rel="noopener noreferrer">
+            <Terminal size={SMALL_CARD_ICON_SIZE} strokeWidth={1} color={theme.textSecondary} />
+            Developers
+          </SmallCard>
+        </SmallCardContainer>
+
+        <span>
+          <small>
+            Media inquires for Uniswap Labs - Contact <a href="mailto:media@uniswap.org">media@uniswap.org</a>
+          </small>
+        </span>
+        <IconRow>
+          <Icon href="https://discord.com/invite/FCfyBSbCU5">
+            <DiscordIconMenu width={24} height={24} color={theme.textSecondary} />
+          </Icon>
+          <Icon href="https://twitter.com/Uniswap">
+            <TwitterIconMenu width={24} height={24} color={theme.textSecondary} />
+          </Icon>
+          <Icon href="https://github.com/Uniswap">
+            <GithubIconMenu width={24} height={24} color={theme.textSecondary} />
+          </Icon>
+        </IconRow>
+      </ContentWrapper>
+    </PageWrapper>
+  )
+}

src/pages/App.tsx

@@ -3,6 +3,7 @@ import { CustomUserProperties, EventName, getBrowser, PageName } from '@uniswap/
 import Loader from 'components/Loader'
 import TopLevelModals from 'components/TopLevelModals'
 import { useFeatureFlagsIsLoaded } from 'featureFlags'
+import { LandingPageVariant, useLandingPageFlag } from 'featureFlags/flags/landingPage'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 import { CollectionPageSkeleton } from 'nft/components/collection/CollectionPageSkeleton'
 import { AssetDetailsLoading } from 'nft/components/details/AssetDetailsLoading'
@@ -25,11 +26,13 @@ import Polling from '../components/Polling'
 import Popups from '../components/Popups'
 import { useIsExpertMode } from '../state/user/hooks'
 import DarkModeQueryParamReader from '../theme/components/DarkModeQueryParamReader'
+import About from './About'
 import AddLiquidity from './AddLiquidity'
 import { RedirectDuplicateTokenIds } from './AddLiquidity/redirects'
 import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
 import Earn from './Earn'
 import Manage from './Earn/Manage'
+import Landing from './Landing'
 import MigrateV2 from './MigrateV2'
 import MigrateV2Pair from './MigrateV2/MigrateV2Pair'
 import Pool from './Pool'
@@ -178,6 +181,8 @@ export default function App() {
 
   const isHeaderTransparent = !scrolledState && !isBagExpanded
 
+  const landingPageFlag = useLandingPageFlag()
+
   return (
     <ErrorBoundary>
       <DarkModeQueryParamReader />
@@ -191,9 +196,11 @@ export default function App() {
             <Popups />
             <Polling />
             <TopLevelModals />
+            <Landing />
             <Suspense fallback={<Loader />}>
               {isLoaded ? (
                 <Routes>
+                  {landingPageFlag === LandingPageVariant.Enabled && <Route path="/" element={<Swap />} />}
                   <Route path="tokens" element={<Tokens />}>
                     <Route path=":chainName" />
                   </Route>
@@ -243,6 +250,8 @@ export default function App() {
                   <Route path="migrate/v2" element={<MigrateV2 />} />
                   <Route path="migrate/v2/:address" element={<MigrateV2Pair />} />
 
+                  <Route path="about" element={<About />} />
+
                   <Route path="*" element={<RedirectPathToSwapOnly />} />
 
                   <Route

src/pages/Swap/index.tsx

@@ -12,6 +12,7 @@ import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter
 import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { isSupportedChain } from 'constants/chains'
+import { LandingPageVariant, useLandingPageFlag } from 'featureFlags/flags/landingPage'
 import { useSwapCallback } from 'hooks/useSwapCallback'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
 import JSBI from 'jsbi'
@@ -19,7 +20,7 @@ import { formatSwapQuoteReceivedEventProperties } from 'lib/utils/analytics'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ReactNode } from 'react'
 import { ArrowDown, CheckCircle, HelpCircle } from 'react-feather'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { Text } from 'rebass'
 import { useToggleWalletModal } from 'state/application/hooks'
 import { InterfaceTrade } from 'state/routing/types'
@@ -495,6 +496,11 @@ export default function Swap() {
   const showDetailsDropdown = Boolean(
     !showWrap && userHasSpecifiedInputOutput && (trade || routeIsLoading || routeIsSyncing)
   )
+
+  const location = useLocation()
+
+  const landingPageFlag = useLandingPageFlag()
+
   return (
     <Trace page={PageName.SWAP_PAGE} shouldLogImpression>
       <>
@@ -507,7 +513,11 @@ export default function Swap() {
           showCancel={true}
         />
         <PageWrapper>
-          <SwapWrapper id="swap-page">
+          <SwapWrapper
+            onClick={() => landingPageFlag === LandingPageVariant.Enabled && navigate('/swap')}
+            open={landingPageFlag === LandingPageVariant.Enabled && location.pathname === '/'}
+            id="swap-page"
+          >
             <SwapHeader allowedSlippage={allowedSlippage} />
             <ConfirmSwapModal
               isOpen={showConfirm}

src/theme/index.tsx

@@ -17,7 +17,7 @@ export const MEDIA_WIDTHS = {
   deprecated_upToLarge: 1280,
 }
 
-const BREAKPOINTS = {
+export const BREAKPOINTS = {
   xs: 396,
   sm: 640,
   md: 768,