omnivore/packages/web/pages/about.tsx

import { VStack, Box } from './../components/elements/LayoutPrimitives'
import {
  LandingSectionsContainer,
  GetStartedButton,
} from '../components/templates/landing/LandingSectionsContainer'
import { LandingHeader } from '../components/templates/landing/LandingHeader'
import { LandingFooter } from '../components/templates/landing/LandingFooter'
import { PageMetaData } from '../components/patterns/PageMetaData'

const containerStyles = {
  alignSelf: 'center',
  marginTop: 80,
  maxWidth: 960,
  px: '2vw',
  '@md': {
    px: '6vw',
  },
  '@xl': {
    px: '120px',
  },
}

const headingStyles = {
  fontWeight: '700',
  color: '#3D3D3D',
  fontSize: 45,
  lineHeight: '53px',
  padding: '10px',
  paddingBottom: '0px',
  textAlign: 'center',
}

const subHeadingStyles = {
  color: 'rgb(125, 125, 125)',
  padding: '10px',
  textAlign: 'center',
  width: '100%',
  fontWeight: '600',
}

export default function LandingPage(): JSX.Element {
  return (
    <>
      <PageMetaData
        title="Omnivore"
        path="/about"
        ogImage="/static/images/og-homepage-03.png"
        description="Omnivore is the free, open source, read-it-later app for serious readers."
      />

      <LandingHeader />
      <VStack
        alignment="center"
        css={{ background: '#FEFCF5', color: '#3D3D3D' }}
      >
        <VStack css={containerStyles}>
          <Box css={headingStyles}>
            Omnivore is the free, open source, read-it-later app for serious
            readers.
          </Box>
          <Box css={subHeadingStyles}>
            Distraction free. Privacy focused. Open source.
          </Box>

          <Box
            css={{
              color: 'rgb(125, 125, 125)',
              padding: '10px',
              textAlign: 'center',
            }}
          >
            Save interesting articles, newsletter subscriptions, and documents
            and read them later — focused and distraction free. Add notes and
            highlights. Organize your reading list the way you want and sync it
            across all your devices.
          </Box>
          <Box
            css={{
              mb: 40,
              padding: '10px',
              width: '100%',
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            <GetStartedButton />
          </Box>
        </VStack>
        <LandingSectionsContainer />
      </VStack>
      <LandingFooter />
    </>
  )
}