Skip to content

I
interface
Commit 505b3f2a authored by Vignesh Mohankumar's avatar Vignesh Mohankumar Committed by GitHub
Browse files
Options

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
parent 1b5a1457
Show whitespace changes
Inline Side-by-side
Showing with 369 additions and 0 deletions
src/pages/About/Card.tsx 0 → 100644
View file @ 505b3f2a
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
src/pages/About/Step.tsx 0 → 100644
View file @ 505b3f2a
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
src/pages/About/Title.ts 0 → 100644
View file @ 505b3f2a
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;
`
src/pages/About.tsx → src/pages/About/index.tsx
View file @ 505b3f2a
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 { 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'
import Card from './Card'
import Step from './Step'
import { SubTitle, Title } from './Title'
const MOBILE_BREAKPOINT = BREAKPOINTS.md
const IconRow = styled.span`
......@@ -13,8 +22,6 @@ const IconRow = styled.span`
flex-direction: row;
`
const SMALL_CARD_ICON_SIZE = 32
const Icon = ({ href, children }: { href?: string; children: ReactNode }) => {
return (
<Box
......@@ -36,7 +43,7 @@ const Icon = ({ href, children }: { href?: string; children: ReactNode }) => {
)
}
const PageWrapper = styled.span<{ isDarkMode: boolean }>`
const Page = styled.span<{ isDarkMode: boolean }>`
width: 100%;
align-self: center;
display: flex;
......@@ -45,129 +52,177 @@ const PageWrapper = styled.span<{ isDarkMode: boolean }>`
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;
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) {
font-size: 72px;
flex-direction: row;
}
`
const Body = styled.p`
color: ${({ theme }) => theme.textPrimary};
font-size: 18px;
padding: 0;
margin: 0;
& > * {
flex: 1;
}
`
const ContentWrapper = styled.span`
max-width: 960px;
const Content = styled.div`
max-width: 1280px;
pointer-events: all;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 8rem 1rem 1rem 1rem;
padding: 128px 16px 16px 16px;
gap: 24px;
@media screen and (min-width: ${MOBILE_BREAKPOINT}px) {
padding: 8rem 5rem 5rem 5rem;
gap: 56px;
padding: 128px 80px 80px 80px;
gap: 120px;
}
`
const SmallCardContainer = styled.div`
const CardGrid = styled.div`
display: grid;
gap: 12px;
gap: 36px;
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;
const WalletIconGrid = styled.div`
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};
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 (
<PageWrapper isDarkMode={isDarkMode}>
<ContentWrapper>
<TitleText isDarkMode={isDarkMode}>
Our mission: <br />
Unlock universal ownership & exchange
</TitleText>
<Page isDarkMode={isDarkMode}>
<Content>
<Title isDarkMode={isDarkMode}>The best way to buy, sell and own crypto and NFTs</Title>
<Body>
Uniswap Labs is building the future of decentralized finance by harnessing the power of the Uniswap Protocol.
<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>
<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} />
......@@ -179,7 +234,7 @@ export default function About() {
<GithubIconMenu width={24} height={24} color={theme.textSecondary} />
</Icon>
</IconRow>
</ContentWrapper>
</PageWrapper>
</Content>
</Page>
)
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment