feat: new /about page (#5578)
* update card * copy changes * change * add descriptions * move folder * move card * template * powered by * more * wallet icons * add initial buttons * gap * external * size * Title * button changes * undo * other icons * color * rm border * new icons * font weight * naming and gaps * naming * get started * StepList * move out step * move title * eslint * import * transition stuff * rgb * rm rem
This commit is contained in:
Vignesh Mohankumar
GitHub
parent
1b5a145738
commit
505b3f2a20
BIN
src/assets/images/phantom.png
Normal file
BIN
src/assets/images/phantom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
src/assets/images/rainbow.png
Normal file
BIN
src/assets/images/rainbow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@ -1,185 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
41
src/pages/About/Card.tsx
Normal file
41
src/pages/About/Card.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import styled from 'styled-components/macro'
|
||||
|
||||
const StyledCard = styled.a`
|
||||
display: flex;
|
||||
background: linear-gradient(180deg, rgba(19, 22, 27, 0.54) 0%, #13161b 100%);
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
text-decoration: none;
|
||||
color: ${({ theme }) => theme.textPrimary};
|
||||
padding: 40px;
|
||||
height: 400px;
|
||||
border-radius: 24px;
|
||||
transition: ${({ theme }) => `${theme.transition.duration.medium} ${theme.transition.timing.ease} background-color`};
|
||||
|
||||
&:hover {
|
||||
background-color: ${({ theme }) => theme.backgroundModule};
|
||||
}
|
||||
`
|
||||
|
||||
const CardTitle = styled.div`
|
||||
font-weight: 600;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
`
|
||||
|
||||
const CardDescription = styled.div`
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
`
|
||||
|
||||
const Card = ({ title, description, to }: { title: string; description: string; to: string; external?: boolean }) => {
|
||||
return (
|
||||
<StyledCard href={to}>
|
||||
<CardTitle>{title}</CardTitle>
|
||||
<CardDescription>{description}</CardDescription>
|
||||
</StyledCard>
|
||||
)
|
||||
}
|
||||
|
||||
export default Card
|
||||
51
src/pages/About/Step.tsx
Normal file
51
src/pages/About/Step.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import styled from 'styled-components/macro'
|
||||
|
||||
const StyledStep = styled.div<{ isLast?: boolean }>`
|
||||
display: flex;
|
||||
gap: 36px;
|
||||
padding: 24px 0;
|
||||
border-bottom: ${({ isLast, theme }) => !isLast && `1px solid ${theme.backgroundOutline}`};
|
||||
`
|
||||
|
||||
const StepTitle = styled.div`
|
||||
color: ${({ theme }) => theme.textPrimary};
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
font-weight: 600;
|
||||
`
|
||||
|
||||
const StepDescription = styled.div`
|
||||
color: ${({ theme }) => theme.textSecondary};
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
`
|
||||
|
||||
const StepIndex = styled.div`
|
||||
color: ${({ theme }) => theme.textPrimary};
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
`
|
||||
|
||||
const Step = ({
|
||||
index,
|
||||
title,
|
||||
description,
|
||||
isLast,
|
||||
}: {
|
||||
index: number
|
||||
title: string
|
||||
description?: string
|
||||
isLast?: boolean
|
||||
}) => {
|
||||
return (
|
||||
<StyledStep isLast={isLast}>
|
||||
<StepIndex>{index + 1}</StepIndex>
|
||||
<div>
|
||||
<StepTitle>{title}</StepTitle>
|
||||
{description && <StepDescription>{description}</StepDescription>}
|
||||
</div>
|
||||
</StyledStep>
|
||||
)
|
||||
}
|
||||
|
||||
export default Step
|
||||
37
src/pages/About/Title.ts
Normal file
37
src/pages/About/Title.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import styled from 'styled-components/macro'
|
||||
import { BREAKPOINTS } from 'theme'
|
||||
|
||||
export const Title = styled.h1<{ isDarkMode: boolean }>`
|
||||
color: transparent;
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0px;
|
||||
background: ${({ isDarkMode }) =>
|
||||
isDarkMode
|
||||
? 'linear-gradient(20deg, rgb(255, 244, 207) 10%, rgb(255, 87, 218) 100%)'
|
||||
: 'linear-gradient(10deg, rgb(255,79,184) 0%, rgb(255,159,251) 100%)'};
|
||||
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
|
||||
@media screen and (min-width: ${BREAKPOINTS.md}px) {
|
||||
font-size: 72px;
|
||||
}
|
||||
`
|
||||
|
||||
export const SubTitle = styled.h2<{ isDarkMode?: boolean }>`
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
max-width: 340px;
|
||||
color: transparent;
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
|
||||
background: ${({ isDarkMode }) =>
|
||||
isDarkMode
|
||||
? 'linear-gradient(20deg, rgb(255, 244, 207) 10%, rgb(255, 87, 218) 100%)'
|
||||
: 'linear-gradient(10deg, rgb(255,79,184) 0%, rgb(255,159,251) 100%)'};
|
||||
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
`
|
||||
240
src/pages/About/index.tsx
Normal file
240
src/pages/About/index.tsx
Normal file
@ -0,0 +1,240 @@
|
||||
import coinbaseWalletIcon from 'assets/images/coinbaseWalletIcon.svg'
|
||||
import metaMaskIcon from 'assets/images/metamask.png'
|
||||
import phantomIcon from 'assets/images/phantom.png'
|
||||
import rainbowIcon from 'assets/images/rainbow.png'
|
||||
import walletConnectIcon from 'assets/images/walletConnectIcon.svg'
|
||||
import { ButtonOutlined } from 'components/Button'
|
||||
import { Box } from 'nft/components/Box'
|
||||
import { DiscordIconMenu, GithubIconMenu, TwitterIconMenu } from 'nft/components/icons'
|
||||
import { ReactNode } from 'react'
|
||||
import { useIsDarkMode } from 'state/user/hooks'
|
||||
import styled, { useTheme } from 'styled-components/macro'
|
||||
import { BREAKPOINTS } from 'theme'
|
||||
|
||||
import Card from './Card'
|
||||
import Step from './Step'
|
||||
import { SubTitle, Title } from './Title'
|
||||
|
||||
const MOBILE_BREAKPOINT = BREAKPOINTS.md
|
||||
|
||||
const IconRow = styled.span`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`
|
||||
|
||||
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 Page = styled.span<{ isDarkMode: boolean }>`
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`
|
||||
|
||||
const Body = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 120px;
|
||||
justify-content: space-between;
|
||||
color: ${({ theme }) => theme.textPrimary};
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
|
||||
@media screen and (min-width: ${MOBILE_BREAKPOINT}px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
& > * {
|
||||
flex: 1;
|
||||
}
|
||||
`
|
||||
|
||||
const Content = styled.div`
|
||||
max-width: 1280px;
|
||||
pointer-events: all;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 128px 16px 16px 16px;
|
||||
gap: 24px;
|
||||
|
||||
@media screen and (min-width: ${MOBILE_BREAKPOINT}px) {
|
||||
padding: 128px 80px 80px 80px;
|
||||
gap: 120px;
|
||||
}
|
||||
`
|
||||
|
||||
const CardGrid = styled.div`
|
||||
display: grid;
|
||||
gap: 36px;
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@media screen and (min-width: ${BREAKPOINTS.sm}px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
`
|
||||
|
||||
const WalletIconGrid = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 50px;
|
||||
`
|
||||
|
||||
const WalletIconRow = styled.div`
|
||||
display: flex;
|
||||
gap: 50px;
|
||||
`
|
||||
|
||||
const WalletIcon = styled.img`
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
`
|
||||
|
||||
const InfoButton = styled(ButtonOutlined)`
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
padding: 16px;
|
||||
`
|
||||
|
||||
const ActionsContainer = styled.span`
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
|
||||
& > * {
|
||||
flex: 1;
|
||||
}
|
||||
`
|
||||
|
||||
const StepList = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`
|
||||
|
||||
const Intro = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
`
|
||||
|
||||
const IntroCopy = styled.p`
|
||||
margin: 0;
|
||||
`
|
||||
|
||||
const GetStarted = styled.div`
|
||||
margin-bottom: 100px;
|
||||
`
|
||||
|
||||
export default function About() {
|
||||
const isDarkMode = useIsDarkMode()
|
||||
const theme = useTheme()
|
||||
|
||||
return (
|
||||
<Page isDarkMode={isDarkMode}>
|
||||
<Content>
|
||||
<Title isDarkMode={isDarkMode}>The best way to buy, sell and own crypto and NFTs</Title>
|
||||
<Body>
|
||||
<div>
|
||||
<SubTitle isDarkMode={isDarkMode}>Powered by the Uniswap Protocol</SubTitle>
|
||||
</div>
|
||||
<Intro>
|
||||
<IntroCopy>
|
||||
The Uniswap Protocol is the world’s leading decentralized exchange protocol, allowing anyone to swap
|
||||
tokens, list a token, or provide liquidity in a pool to earn fees.
|
||||
</IntroCopy>
|
||||
<ActionsContainer>
|
||||
<InfoButton>Learn more</InfoButton>
|
||||
<InfoButton>Read the docs</InfoButton>
|
||||
</ActionsContainer>
|
||||
</Intro>
|
||||
</Body>
|
||||
<CardGrid>
|
||||
<Card
|
||||
to="/swap"
|
||||
title="Swap tokens"
|
||||
description="Discover and swap top tokens on Ethereum, Polygon, Optimism, and more."
|
||||
/>
|
||||
<Card
|
||||
to="/nfts"
|
||||
title="Trade NFTs"
|
||||
description="Buy & sell NFTs across marketplaces to find more listings at better prices."
|
||||
/>
|
||||
<Card
|
||||
to="/pool"
|
||||
title="Earn fees"
|
||||
description="Provide liquidity to pools on Uniswap and earn fees on swaps."
|
||||
/>
|
||||
<Card
|
||||
to="https://support.uniswap.org/"
|
||||
external
|
||||
title="Build dApps"
|
||||
description="Build on the largest DeFi protocol on Ethereum with our tools."
|
||||
/>
|
||||
</CardGrid>
|
||||
<Body>
|
||||
<div>
|
||||
<GetStarted>
|
||||
<SubTitle isDarkMode={isDarkMode}>Get Started</SubTitle>
|
||||
</GetStarted>
|
||||
<WalletIconGrid>
|
||||
<WalletIconRow>
|
||||
<WalletIcon src={metaMaskIcon} alt="MetaMask" />
|
||||
<WalletIcon src={walletConnectIcon} alt="WalletConnect" />
|
||||
<WalletIcon src={coinbaseWalletIcon} alt="Coinbase Wallet" />
|
||||
</WalletIconRow>
|
||||
<WalletIconRow>
|
||||
<WalletIcon src={rainbowIcon} alt="Rainbow" />
|
||||
<WalletIcon src={phantomIcon} alt="Phantom" />
|
||||
<WalletIcon src={walletConnectIcon} alt="WalletConnect" />
|
||||
</WalletIconRow>
|
||||
</WalletIconGrid>
|
||||
</div>
|
||||
<StepList>
|
||||
<Step
|
||||
index={0}
|
||||
title="Connect a wallet"
|
||||
description="Connect your preferred crypto wallet to the Uniswap Interface."
|
||||
/>
|
||||
<Step index={1} title="Transfer crypto" />
|
||||
<Step isLast index={2} title="Swap!" />
|
||||
</StepList>
|
||||
</Body>
|
||||
<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>
|
||||
</Content>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user