feat: add background image to /about (#5623)

* feat: add background image to /about

* 100% height

src/pages/About/index.tsx

@@ -8,10 +8,14 @@ import { BREAKPOINTS } from 'theme'
 
 import Card from './Card'
 import { CARDS, STEPS } from './constants'
+import backgroundImgSrc from './images/background.jpg'
 import Step from './Step'
 import { SubTitle, Title } from './Title'
 
 const Page = styled.div<{ isDarkMode: boolean; titleHeight: number }>`
+  position: relative;
+  width: 100%;
+  align-self: center;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -19,6 +23,17 @@ const Page = styled.div<{ isDarkMode: boolean; titleHeight: number }>`
   padding-top: calc(100vh - ${({ titleHeight }) => titleHeight + 200}px);
 `
 
+const BackgroundImage = styled.img`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: calc(100vh - 72px);
+`
+
+const AboutTitle = styled(Title)`
+  z-index: 1;
+`
+
 const Panels = styled.div`
   display: flex;
   flex-direction: column;
@@ -163,10 +178,11 @@ export default function About() {
   return (
     <Trace page={PageName.ABOUT_PAGE} shouldLogImpression>
       <Page isDarkMode={isDarkMode} titleHeight={titleHeight}>
+        <BackgroundImage src={backgroundImgSrc} />
         <Content>
-          <Title ref={titleRef} isDarkMode={isDarkMode}>
+          <AboutTitle ref={titleRef} isDarkMode={isDarkMode}>
             Uniswap is the leading on-chain marketplace for tokens and NFTs.
-          </Title>
+          </AboutTitle>
           <PoweredBySection>
             <div>
               <SubTitle isDarkMode={isDarkMode}>Powered by the Uniswap Protocol</SubTitle>