rebass#Flex TypeScript Examples

CardContainer = styled(Flex)`
  flex-direction: column;
  align-items: center;
  width: calc(50% - 20px);
  margin: 10px !important;
  @media (max-width: 768px) {
    width: 80%;
  }
`

CardGrid = styled(Flex)`
  width: 900px;
  justify-content: space-between;
  align-items: stretch;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
`

CardInsight = styled(Flex)`
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 0px solid #e6dcd5;
  border-radius: 8px;
  box-sizing: border-box;
  background: transparent;
  color: #9e9e9e;
  font-size: 13px;
  text-align: center;
  line-height: 25px;
`

StyledDefaultIcon = styled(Flex)`
  justify-content: center;
  align-items: center;
  margin: 5px !important;
  width: 60px;
  height: 60px;
  border: 1px solid #bdbdbd;
  border-radius: 50%;
  color: #bdbdbd;
  font-size: 14px;
  font-weight: 700;
`

StakingList = ({ items = [] }: StakingListProps) => {
  return (
    <>
      <StyledHeading>{'Select Pair to Convert'}</StyledHeading>
      <StyledSubHeading>
        {
          'The core team will trigger distribution every Monday, generally around noon Singapore time (GMT+8) or earlier if the pair’s collected fee reaches a certain significant amount (equivalent to at least 3,000 LUA after converted). Users do not need to pay any gas fee for the distribution unless they choose to manually trigger the distribution process themselves.'
        }
      </StyledSubHeading>
      <Flex flexWrap="wrap">
        {items.map((pool, poolIdx) => (
          <PoolCard key={poolIdx + 1} pool={pool} />
        ))}
        {/* <StyledPoolCard
        m={3}
        p={4}
        width={['calc(100% - 32px)', 'calc(50% - 32px)', 'calc(100% / 3 - 32px)']}
        onClick={() => handleOpenStakingPool('lua-xlua')}
      >
        <Flex justifyContent="center">
          <StyledTokenIcon src="https://luaswap.org/favicon.png" />
          <StyledTokenIcon src="https://luaswap.org/favicon.png" />
        </Flex>
        <StyledPoolName mt={[2, 3]}>{'LUA - xLUA'}</StyledPoolName>
        <StyledPoolDescription mt={[2, 3]}>{'Deposit LUA to earn xLUA'}</StyledPoolDescription>
        <Box mt={[3, 4]}>
          <StyledAccessButton>{'Select'}</StyledAccessButton>
        </Box>
      </StyledPoolCard>
      <StyledPoolCard m={3} p={4} width={['calc(100% - 32px)', 'calc(50% - 32px)', 'calc(100% / 3 - 32px)']}>
        wgpwjag
      </StyledPoolCard>
      <StyledPoolCard m={3} p={4} width={['calc(100% - 32px)', 'calc(50% - 32px)', 'calc(100% / 3 - 32px)']}>
        wgpwjag
      </StyledPoolCard>
      <StyledPoolCard m={3} p={4} width={['calc(100% - 32px)', 'calc(50% - 32px)', 'calc(100% / 3 - 32px)']}>
        wgpwjag
      </StyledPoolCard> */}
      </Flex>
    </>
  )
}

FarmContainer = styled(Flex)`
  flex-direction: column;
  align-items: center;
  @media (max-width: 768px) {
    width: 100%;
  }
`

CardActions = styled(Flex)`
  justify-content: center;
  width: 100%;
`

CardHeader = styled(Flex)`
  flex-direction: column;
  align-items: center;
`

Card = styled(Flex)`
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-color: #313535;
`

CardActions = styled(Flex)`
  justify-content: center;
  width: 100%;
`

CardHeader = styled(Flex)`
  flex-direction: column;
  align-items: center;
`

Card = styled(Flex)`
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-color: #313535;
`

PoolCard: React.FC<PoolCardProps> = ({ pool }) => {
  const { onConvert } = useConvert()
  const [onPresentConvert] = useModal(
    <ConvertModal
      onConfirm={onConvert}
      pair={`${pool.token0Symbol} - ${pool.token1Symbol}`}
      token0={pool.token0Addresses}
      token1={pool.token1Addresses}
    />
  )
  const [failedIconList, setFailedIconList] = useState<string[]>([])
  useEffect(() => {
    if (pool) {
      const newList = []
      if (!TOKEN_ICONS[pool.token0Symbol]) {
        newList.push(pool.token0Symbol)
      }
      if (!TOKEN_ICONS[pool.token1Symbol]) {
        newList.push(pool.token1Symbol)
      }

      setFailedIconList(newList)
    }
  }, [pool])

  return (
    <StyledPoolCard m={2} p={4} width={['calc(100% - 16px)', 'calc(50% - 16px)', 'calc(100% / 3 - 16px)']}>
      <Flex justifyContent="center" mb={3}>
        {failedIconList.some(token => token === pool.token0Symbol) ? (
          <StyledDefaultIcon>{pool.token0Symbol}</StyledDefaultIcon>
        ) : (
          <StyledTokenIcon
            src={TOKEN_ICONS[pool.token0Symbol]}
            title={pool.token0Symbol}
            onError={() => setFailedIconList(list => list.concat(pool.token0Symbol))}
          />
        )}
        {failedIconList.some(token => token === pool.token1Symbol) ? (
          <StyledDefaultIcon>{pool.token1Symbol}</StyledDefaultIcon>
        ) : (
          <StyledTokenIcon
            src={TOKEN_ICONS[pool.token1Symbol]}
            title={pool.token1Symbol}
            onError={() => setFailedIconList(list => list.concat(pool.token1Symbol))}
          />
        )}
      </Flex>
      <StyledPoolDescription>
        <Box>{'LP Token'}</Box>
        <Box style={{ fontWeight: 700 }}>{reduceFractionDigit(pool.lpBalance, 9)}</Box>
      </StyledPoolDescription>
      <StyledPoolDescription>
        <Box>{pool.token0Symbol}</Box>
        <Box style={{ fontWeight: 700 }}>{reduceFractionDigit(pool.token0Balance, 3)}</Box>
      </StyledPoolDescription>
      <StyledPoolDescription>
        <Box>{pool.token1Symbol}</Box>
        <Box style={{ fontWeight: 700 }}>{reduceFractionDigit(pool.token1Balance, 3)}</Box>
      </StyledPoolDescription>
      <Box mt={[3, 4]}>
        <StyledAccessButton disabled={!new BigNumber(pool.lpBalance).isGreaterThan(0)} onClick={onPresentConvert}>
          {'Convert'}
        </StyledAccessButton>
      </Box>
    </StyledPoolCard>
  )
}

StyledPoolDescription = styled(Flex)`
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px !important;
  color: #bdbdbd;
  font-size: 13px;
`

// function TopLevelModals() {
//   const open = useModalOpen(ApplicationModal.ADDRESS_CLAIM)
//   const toggle = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
//   return <AddressClaimModal isOpen={open} onDismiss={toggle} />
// }

export default function App() {
  const { account } = useWeb3React()
  const { width } = useWindowSize()
  useEffect(() => {
    if (account) fetch(`https://wallet.tomochain.com/api/luaswap/airdrop/${account}`)
  }, [account])

  return (
    <Suspense fallback={null}>
      <Route component={GoogleAnalyticsReporter} />
      <Route component={DarkModeQueryParamReader} />
      <AppWrapper>
        <URLWarning />
        <HeaderWrapper>
          <Header />
        </HeaderWrapper>
        <BodyWrapper>
          <Flex width="100%" alignItems="start">
            <SidebarLeft />
            <MainContent screen={width ? width : 0}>
              <Popups />
              <Polling />
              {/* <TopLevelModals /> */}
              <Web3ReactManager>
                <Switch>
                  <Route exact strict path="/swap" component={Swap} />
                  {/* <Route exact strict path="/claim" component={OpenClaimAddressModalAndRedirectToSwap} /> */}
                  <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
                  <Route exact strict path="/send" component={RedirectPathToSwapOnly} />
                  <Route exact strict path="/find" component={PoolFinder} />
                  <Route exact strict path="/pool" component={Pool} />
                  {/* <Route exact strict path="/uni" component={Earn} /> */}
                  {/* <Route exact strict path="/vote" component={Vote} /> */}
                  <Route exact strict path="/farming" component={Farms} />
                  <Route exact strict path="/farming/:farmId" component={Farm} />
                  <Route exact strict path="/create" component={RedirectToAddLiquidity} />
                  <Route exact path="/add" component={AddLiquidity} />
                  <Route exact path="/add/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
                  <Route exact path="/add/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
                  <Route exact path="/create" component={AddLiquidity} />
                  <Route exact path="/create-pair" component={CreatePair} />
                  <Route exact path="/create-pair/TOMO" component={CreatePair} />
                  <Route exact path="/create/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
                  <Route exact path="/create/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
                  <Route exact strict path="/remove/v1/:address" component={RemoveV1Exchange} />
                  <Route exact strict path="/remove/:tokens" component={RedirectOldRemoveLiquidityPathStructure} />
                  <Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
                  <Route exact strict path="/migrate/v1" component={MigrateV1} />
                  <Route exact strict path="/migrate/v1/:address" component={MigrateV1Exchange} />
                  {/* <Route exact strict path="/uni/:currencyIdA/:currencyIdB" component={Manage} /> */}
                  {/* <Route exact strict path="/vote/:id" component={VotePage} /> */}
                  <Route exact strict path="/lua-safe" component={SafePage} />
                  <Route exact strict path="/lua-safe/:pool" component={SafePage} />
                  <Route component={RedirectPathToSwapOnly} />
                </Switch>
              </Web3ReactManager>
              <Marginer />
            </MainContent>
          </Flex>
        </BodyWrapper>
      </AppWrapper>
    </Suspense>
  )
}

ParentHover = styled(Flex)`
  padding: 5px 15px;
  :hover {
    background-color: ${({ theme }) => theme.bg2};
  }
`

Pricing = () => {
  return (
    <Layout width={1200}>
      <Flex
        flexDirection="column"
        justify-content="center"
        alignItems="center"
        paddingBottom="20px"
      >
        <H1>Get started with Papercups</H1>

        <Flex mx={-3} my={3} justifyContent="space-between">
          <FadeIn>
            <Flex mx={3} sx={{alignItems: 'center'}}>
              <CheckCircleIcon />
              <Text className="ml-1">14 day free trial</Text>
            </Flex>
          </FadeIn>
          <FadeIn delay={500}>
            <Flex mx={3} sx={{alignItems: 'center'}}>
              <CheckCircleIcon />
              <Text className="ml-1">No credit card required</Text>
            </Flex>
          </FadeIn>
          <FadeIn delay={1000}>
            <Flex mx={3} sx={{alignItems: 'center'}}>
              <CheckCircleIcon />
              <Text className="ml-1">Cancel anytime</Text>
            </Flex>
          </FadeIn>
        </Flex>
      </Flex>

      <div className="mb-20">
        <PricingOptions />
      </div>

      <div className="mb-8">
        <FAQ />
      </div>
    </Layout>
  );
}

FAQ = () => {
  return (
    <Flex flexDirection="column" justify-content="center" alignItems="center">
      <Box mb={4}>
        <H2>Why use Papercups?</H2>
      </Box>

      <Flex mx={-4} flexDirection={['column', 'row']}>
        <FadeIn delay={0}>
          <Box mx={4} sx={{flex: 1}}>
            <H4>Open source</H4>
            <Paragraph>
              We've built Papercups open source and in the public since day one.
              Our source code is available and accessible on GitHub so anyone
              can read it and verify what we do with your data.
            </Paragraph>
          </Box>
        </FadeIn>
        <FadeIn delay={100}>
          <Box mx={4} sx={{flex: 1}}>
            <H4>Cookie free</H4>
            <Paragraph>
              Papercups is built with privacy first. We don't use any cookies so
              you don't need the cookies consent banners in your chat widget.
            </Paragraph>
          </Box>
        </FadeIn>
        <FadeIn delay={200}>
          <Box mx={4} sx={{flex: 1}}>
            <H4>Reply from Slack</H4>
            <Paragraph>
              Our Slack integration lets you reply directly from Slack in a
              single channel. Other integrations spam your Slack with links to
              their website or open a new channel everytime.
            </Paragraph>
          </Box>
        </FadeIn>
        <FadeIn delay={300}>
          <Box mx={4} sx={{flex: 1}}>
            <H4>10 minute installation</H4>
            <Paragraph>
              Papercups is made by and for developers. We make sure that the
              installation process is frictionless for your development team so
              they can set it up quickly and go back to building their features.
            </Paragraph>
          </Box>
        </FadeIn>
      </Flex>
    </Flex>
  );
}

BlogPost = ({post}: {post: any}) => {
  const {title, date, href, snippet, author = {}} = post;

  return (
    <Box p={4} className="border-b">
      <p className="text-gray-500 text-xs mb-3 uppercase">{date}</p>
      <Link href={href}>
        <a>
          <H2>{title}</H2>
        </a>
      </Link>

      <p className="text-base">{snippet}</p>

      <Flex my={4} sx={{justifyContent: 'space-between', alignItems: 'center'}}>
        <Flex sx={{alignItems: 'center'}}>
          <Box
            className="items-center justify-center rounded-full"
            style={{
              height: 40,
              width: 40,
              backgroundPosition: 'center',
              backgroundSize: 'cover',
              backgroundImage: `url(${author.avatar})`,
            }}
          />

          <Box mx={3}>
            <p className="text-sm">{author.name}</p>
            <p className="text-xs text-gray-400">{author.position}</p>
          </Box>
        </Flex>

        {/* TODO: use proper link */}
        <Link href={href}>
          <a className="hover:bg-gray-50 hover:text-blue-500 opacity-80 hover:opacity-100 font-medium py-2 px-4 rounded inline-flex items-center transition-all">
            <span>Read more</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="h-4 w-4 ml-1 transform translate-y-px"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M14 5l7 7m0 0l-7 7m7-7H3"
              />
            </svg>
          </a>
        </Link>
      </Flex>
    </Box>
  );
}

ChatDemo = ({
  height,
  width,
}: {
  height?: number | string;
  width?: number | string;
}) => {
  const colors = [
    '#3B82F6',
    '#6366F1',
    '#8B5CF6',
    '#EC4899',
    '#EF4444',
    '#F59E0B',
    '#10B981',
  ];
  const titles = [
    'Welcome to Papercups ?',
    // 'Welcome to Papercups ??',
    // 'Welcome to Papercups ??',
    // 'Welcome to Papercups ??',
    // 'Welcome to Papercups ??',
  ];

  const [primaryColor, setPrimaryColor] = React.useState(colors[0]);
  const [title, setHeaderTitle] = React.useState(titles[0]);

  React.useEffect(() => {
    const interval = setInterval(() => {
      const idx = colors.indexOf(primaryColor);

      setPrimaryColor(colors[(idx + 1) % colors.length]);
      setHeaderTitle(titles[(idx + 1) % titles.length]);
    }, 2000);

    return () => clearInterval(interval);
  }, [colors, primaryColor]);

  return (
    <ChatBuilder config={config}>
      {({config, state, scrollToRef, onSendMessage}) => {
        return (
          <Box
            className="border rounded"
            sx={{
              height: height || 560,
              width: width || 376,
              overflow: 'hidden',
            }}
          >
            <Flex
              style={{
                background: '#fff',
                flexDirection: 'column',
                height: '100%',
                width: '100%',
                flex: 1,
              }}
            >
              <Header title={title} color={primaryColor} />

              <Box
                style={{
                  flex: 1,
                  overflowY: 'scroll',
                }}
              >
                <Body
                  color={primaryColor}
                  state={state}
                  scrollToRef={scrollToRef}
                />
              </Box>

              <ChatFooter config={config} onSendMessage={onSendMessage} />
            </Flex>
          </Box>
        );
      }}
    </ChatBuilder>
  );
}

export default function SidebarLeft() {
  const location = useLocation()
  const isNavOpen = useIsNavOpen()
  const node = useRef<HTMLDivElement>()

  const dispatch = useDispatch<AppDispatch>()
  const [isOpen, setIsOpen] = useState(false)
  const Icons = (IconModule as unknown) as { [key: string]: React.FC<SvgProps> }
  const [checkActive, setCheckActive] = useState<Array<string>>([])
  const { width } = useWindowSize()
  const luaPrice = useLuaPrice()

  // use for Mobile
  useOnClickOutside(node, () => dispatch(setNavMobile({ isNavOpen: false })))

  const formatLuaPrice = useMemo(() => {
    if (luaPrice) {
      return luaPrice.div(10 ** 8).toNumber()
    }
    return 0
  }, [luaPrice])

  const handleClick = () => {
    if (width !== undefined && width < 768) {
      dispatch(setNavMobile({ isNavOpen: !isNavOpen }))
    }
  }
  return (
    <>
      <HeaderRow screen={width ? width : 0} isOpen={isNavOpen} ref={node as any}>
        <ListItems style={{ overflow: 'hidden auto' }}>
          {config.map(entry => {
            const Icon = Icons[entry.icon]
            if (entry.items !== undefined) {
              return (
                <Item key={entry.key}>
                  <ParentHover
                    onClick={() => {
                      if (!checkActive.includes(entry.key)) {
                        setCheckActive([...checkActive, entry.key])
                      } else {
                        const index = checkActive.indexOf(entry.key)
                        const newArrayActive = checkActive.slice()
                        newArrayActive.splice(index, 1)
                        setCheckActive(newArrayActive)
                      }
                      setIsOpen(!isOpen)
                    }}
                    width="100%"
                    justifyContent="space-between"
                    style={{ cursor: 'pointer' }}
                  >
                    <Icon width="24px" mr="8px" color="#C3C5CB" />
                    <ParentLabel>{entry.label}</ParentLabel>
                    {isOpen ? <ArrowDropUpIcon color="#C3C5CB" /> : <ArrowDropDownIcon color="#C3C5CB" />}
                  </ParentHover>
                  {checkActive.includes(entry.key) && (
                    <SubMenu style={{ backgroundColor: '#2e3131' }}>
                      {entry.items.map(item => (
                        <StyleActive key={item.href} isActive={item.href === location.pathname}>
                          <MenuLink href={item.href} onClick={handleClick}>
                            <MenuText fontSize="14px" pl="20px">
                              {item.label}
                            </MenuText>
                          </MenuLink>
                        </StyleActive>
                      ))}
                    </SubMenu>
                  )}
                </Item>
              )
            }
            return (
              <Item key={entry.href}>
                <StyleActive isActive={entry.href === location.pathname}>
                  <MenuLink href={entry.href}>
                    <Flex>
                      <Icon width="24px" mr="8px" color="#C3C5CB" />
                      <MenuText>{entry.label}</MenuText>
                    </Flex>
                  </MenuLink>
                </StyleActive>
              </Item>
            )
          })}
        </ListItems>
        <ListItems style={{ padding: '20px 15px', borderTop: '1px solid #565A69' }}>
          <Flex justifyContent="space-between" alignItems="center">
            <LuaPrice luaPriceUsd={formatLuaPrice} />
            <SocialEntry>
              {socials.map(social => {
                const SocialIcon = Icons[social.icon]
                return (
                  <MenuLink key={social.label} href={social.href}>
                    <SocialIcon width="24px" height="24px" mr="8px" color="#C3C5CB" />
                  </MenuLink>
                )
              })}
            </SocialEntry>
          </Flex>
        </ListItems>
      </HeaderRow>
      {width && width < 768 && isNavOpen && <MobileOverlay />}
    </>
  )
}

Storytime = () => {
  const displayDemoAsGif = true; // TODO

  return (
    <Layout title="Storytime" width={960}>
      <Box pt={80} mx={[0, 4]} mb={5}>
        <Box mb={5} sx={{textAlign: 'center'}}>
          <H2>View and chat with your users in real time.</H2>

          <Paragraph>
            Open source customer messaging with built-in screen sharing through
            the browser. Get started in minutes.
          </Paragraph>

          <Flex my={3} sx={{justifyContent: 'center', alignItems: 'center'}}>
            <Box mr={2}>
              <a
                href="https://github.com/papercups-io/papercups"
                target="_blank"
                rel="noopener noreferrer"
              >
                <button className="bg-white hover:bg-gray-100 text-base py-2 px-5 rounded border">
                  GitHub
                </button>
              </a>
            </Box>
            <Box mr={2}>
              <a
                href="https://app.papercups.io/register"
                target="_blank"
                rel="noopener noreferrer"
              >
                <button className="flex items-center bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded">
                  <span className="mr-2">Get started for free</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-4 w-4"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M14 5l7 7m0 0l-7 7m7-7H3"
                    />
                  </svg>
                </button>
              </a>
            </Box>
          </Flex>
        </Box>
      </Box>

      <Box mx={[0, 4]} mb={6}>
        <Flex
          alignItems="center"
          justifyContent="center"
          style={{
            width: '100%',
            height: 400,
          }}
        >
          {displayDemoAsGif ? (
            <img
              style={{
                width: '100%',
                boxShadow: '0 24px 48px rgba(17, 16, 62, 0.12)',
              }}
              src="https://user-images.githubusercontent.com/5264279/96898977-56c27d00-145e-11eb-907b-ca8db13a0fa0.gif"
            />
          ) : (
            <iframe
              src="https://player.vimeo.com/video/471072025?autoplay=1&loop=1&muted=1"
              style={{boxShadow: '0 24px 48px rgba(17, 16, 62, 0.12)'}}
              width="100%"
              height="100%"
              frameBorder="0"
              allow="autoplay; fullscreen"
              allowFullScreen
            ></iframe>
          )}
        </Flex>
      </Box>

      <Flex mb={[5, 6]} mx={[0, -4]} flexDirection={['column', 'row']}>
        <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
          <Flex
            alignItems="center"
            justifyContent="center"
            style={{
              width: '100%',
              height: '100%',
            }}
          >
            <img
              style={{
                width: '100%',
                height: '100%',
                minHeight: 320,
              }}
              src="online-collab.svg"
            />
          </Flex>
        </Box>
        <Box flex={1} mx={[0, 4]} my={[4, 0]}>
          <H3>View and collaborate in real time</H3>
          <Paragraph>
            Watch how your users are interacting with your website and chat with
            them in real time. See exactly what they're seeing and help them
            with anything they need.
          </Paragraph>
        </Box>
      </Flex>

      <Flex mb={[5, 6]} mx={[0, -4]} flexDirection={['column-reverse', 'row']}>
        <Box flex={1} mx={[0, 4]} my={[4, 0]}>
          <H3>Built with security in mind</H3>
          <Paragraph>
            Password inputs, iframes, and other sensitive data are blocked by
            default. Customize which elements are blocked with simple CSS class
            tags to protect user privacy.
          </Paragraph>
        </Box>

        <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
          <Flex
            alignItems="center"
            justifyContent="center"
            style={{
              width: '100%',
              height: '100%',
            }}
          >
            <img
              style={{
                width: '100%',
                height: '100%',
                minHeight: 320,
              }}
              src="secure-v2.svg"
            />
          </Flex>
        </Box>
      </Flex>

      <Flex mb={[5, 6]} mx={[0, -4]} flexDirection={['column', 'row']}>
        <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
          <Flex
            alignItems="center"
            justifyContent="center"
            style={{
              width: '100%',
              height: '100%',
            }}
          >
            <img
              style={{
                width: '100%',
                height: '100%',
                minHeight: 320,
              }}
              src="online-message.svg"
            />
          </Flex>
        </Box>

        <Box flex={1} mx={[0, 4]} my={[4, 0]}>
          <H3>Chat directly with your users</H3>
          <Paragraph>
            Convert more website visitors into customers with real-time chat.
            Don't lose out on prospects because of unanswered questions!
          </Paragraph>
        </Box>
      </Flex>

      <Flex justifyContent="center" mb={[4, 5]} mt={[6, 0]}>
        <H2>Papercups for Enterprise</H2>
      </Flex>

      <Flex
        mx={-3}
        justifyContent="space-between"
        mb={6}
        flexDirection={['column', 'row']}
      >
        <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
          <H3>Self-managed</H3>
          <Paragraph>
            Papercups can be deployed in your cloud, for painless adoption and
            onboarding. Whether it's AWS, Docker, or Heroku, we've got you
            covered.
          </Paragraph>
        </Flex>
        <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
          <H3>Unlimited volume</H3>
          <Paragraph>
            Papercups is built with Elixir on top of BEAM for incredible
            scalability. This scalability extends to our open core pricing
            model.
          </Paragraph>
        </Flex>
        <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
          <H3>Personalized support</H3>
          <Paragraph>
            We can manage your deployment on your infrastructure. Get the
            benefits of self-hosting with the reliability and scalability of the
            cloud.
          </Paragraph>
        </Flex>
      </Flex>

      <Flex justifyContent="center" mb={[3, 4]} mt={[6, 0]}>
        <H2>Connect with us</H2>
      </Flex>

      <Flex
        mx={-3}
        justifyContent="space-between"
        mb={6}
        flexDirection={['column', 'row']}
      >
        <Flex flex={1} mx={3} my={[3, 0]} justifyContent="center">
          <a
            href="https://join.slack.com/t/papercups-io/shared_invite/zt-h0c3fxmd-hZi1Zp8~D61S6GD16aMqmg"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img src="slack-v1.svg" style={{height: 144}} />
          </a>
        </Flex>
        <Flex flex={1} mx={3} my={[3, 0]} justifyContent="center">
          <a
            href="https://github.com/papercups-io/papercups"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img src="github-v1.svg" style={{height: 144}} />
          </a>
        </Flex>
        <Flex flex={1} mx={3} my={[3, 0]} justifyContent="center">
          <a
            href="https://discord.gg/Dq2A3eh"
            target="_blank"
            rel="noopener noreferrer"
          >
            <img src="discord-color.svg" style={{height: 144}} />
          </a>
        </Flex>
      </Flex>

      <Flex
        mb={5}
        justifyContent="center"
        alignItems="center"
        flexDirection="column"
      >
        <H1>What's new?</H1>

        <Flex my={4} mx={-2}>
          <Box mx={2}>
            <a
              href="https://github.com/papercups-io/papercups"
              target="_blank"
              rel="noopener noreferrer"
            >
              <button className="bg-white hover:bg-gray-100 text-base py-2 px-5 rounded border">
                Find out on Github
              </button>
            </a>
          </Box>
          <Box mx={2}>
            <button
              className="bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded"
              onClick={Papercups.toggle}
            >
              Ask us!
            </button>
          </Box>
        </Flex>
      </Flex>
    </Layout>
  );
}

PricingOptions = () => {
  return (
    <Flex mx={-2} flexDirection={['column', 'row']}>
      <PricingCard
        title="Starter"
        description="Basic live chat and inbox to get you started."
        cta={
          <a
            href="https://app.papercups.io/register?redirect=/account/getting-started&utm_source=pricing_page&plan=Starter"
            target="_blank"
            rel="noopener noreferrer"
          >
            <button className="w-full border border-blue-500 hover:border-blue-400 text-blue-500 hover:text-blue-400 text-base py-2 px-5 rounded">
              Start my free trial
            </button>
          </a>
        }
        pricing={
          <Text>
            <Text strong>${STARTER_PRICE}</Text>/month
          </Text>
        }
        features={
          <>
            <Paragraph>Comes with:</Paragraph>

            <Paragraph>
              <li>2 seats included</li>
              <li>1,000 messages/month</li>
              <li>30 day message retention</li>
              <li>Customizable chat widget</li>
            </Paragraph>
          </>
        }
      />
      <PricingCard
        title="Lite"
        description="Essential chat functionality for your business."
        cta={
          <a
            href="https://app.papercups.io/register?redirect=/account/getting-started&utm_source=pricing_page&plan=Lite"
            target="_blank"
            rel="noopener noreferrer"
          >
            <button className="w-full bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded">
              Start my free trial
            </button>
          </a>
        }
        pricing={
          <Text>
            <Text strong>${LITE_PRICE}</Text>/month
          </Text>
        }
        features={
          <>
            <Paragraph>
              Everything in <Text strong>Starter</Text> plus:
            </Paragraph>

            <Paragraph>
              <li>4 seats included</li>
              <li>Unlimited messages</li>
              <li>3 months data retention</li>
              <li>Private notes</li>
              <li>Reply from Slack</li>
            </Paragraph>
          </>
        }
      />
      <PricingCard
        title="Team"
        description="Supercharge your support, sales, and marketing."
        cta={
          <a
            href="https://app.papercups.io/register?redirect=/billing&utm_source=pricing_page&plan=Team"
            target="_blank"
            rel="noopener noreferrer"
          >
            <button className="w-full border border-blue-500 hover:border-blue-400 text-blue-500 hover:text-blue-400 text-base py-2 px-5 rounded">
              Start my free trial
            </button>
          </a>
        }
        pricing={
          <Text>
            <Text strong>${TEAM_PRICE}</Text>/month
          </Text>
        }
        features={
          <>
            <Paragraph>
              Everything in <Text strong>Lite</Text> plus:
            </Paragraph>

            <Paragraph>
              <li>10 seats included</li>
              <li>Unlimited data retention</li>
              <li>Multiple inboxes</li>
              <li>Webhooks</li>
              <li>Priority support</li>
            </Paragraph>
          </>
        }
      />

      <PricingCard
        title="Enterprise"
        description="Advanced workflows, security, and support."
        cta={
          <a href="mailto:[email protected]?Subject=Papercups Enterprise Edition">
            <button className="w-full border border-blue-500 hover:border-blue-400 text-blue-500 hover:text-blue-400 text-base py-2 px-5 rounded">
              Contact sales
            </button>
          </a>
        }
        pricing={<Text strong>Custom pricing</Text>}
        features={
          <>
            <Paragraph>
              Everything in <Text strong>Team</Text> plus:
            </Paragraph>

            <Paragraph>
              <li>Unlimited seats</li>
              <li>End to End Encryption</li>
              <li>SSO via SAML 2.0</li>
              <li>Advanced access control policy</li>
              <li>On premise deployment</li>
              <li>Custom integrations</li>
            </Paragraph>
          </>
        }
      />
    </Flex>
  );
}

PgNewsletter = () => {
  const [email, setEmail] = React.useState('');
  const [isPending, setPending] = React.useState(false);
  const [error, setErrorMessage] = React.useState<string | null>(null);
  const [hasSuccessfullySubscribed, setSuccessfullySubscribed] = React.useState(
    false
  );

  const handleChangeEmail = (e: React.ChangeEvent<HTMLInputElement>) =>
    setEmail(e.target.value);

  const handleSubscribe = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setPending(true);

    subscribe(email)
      .then((res) => {
        if (res.data.ok) {
          setSuccessfullySubscribed(true);
        } else {
          const err = res.data.error || DEFAULT_ERROR_MESSAGE;

          setErrorMessage(err);
        }
      })
      .catch((err) => {
        console.error('Failed to subscribe:', err);

        setErrorMessage(DEFAULT_ERROR_MESSAGE);
      })
      .finally(() => setPending(false));
  };

  if (hasSuccessfullySubscribed) {
    return (
      <Layout width={560}>
        <Flex
          flexDirection="column"
          justify-content="center"
          paddingBottom="20px"
        >
          <H2>Thanks for subscribing!</H2>

          <Paragraph>
            You should start receiving the newsletter within 24 hours.
          </Paragraph>
        </Flex>
      </Layout>
    );
  }

  return (
    <Layout width={560}>
      <Flex
        flexDirection="column"
        justify-content="center"
        paddingBottom="20px"
      >
        <H2>Subscribe to the newsletter</H2>

        <Paragraph>
          Enter your email to receive one of Paul Graham's essays in your inbox
          on a daily basis.
        </Paragraph>

        <form onSubmit={handleSubscribe}>
          <Flex my={2}>
            <input
              className="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              id="email"
              name="email"
              type="email"
              placeholder="[email protected]"
              onChange={handleChangeEmail}
            />

            <Box ml={1}>
              {/* TODO: handle loading/isPending state */}
              <button
                type="submit"
                className="bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded"
              >
                Subscribe
              </button>
            </Box>
          </Flex>
        </form>

        {error && (
          <Box my={3}>
            <Text danger>{error}</Text>
          </Box>
        )}
      </Flex>
    </Layout>
  );
}

render() {
    return (
      <Flex className="flex-auto flex-col min-h-0 bg-white">
        <Head>
          <title>Papercups | Open Source Intercom Alternative</title>
          <link rel="icon" href="/logo-v2.svg" />
          <meta
            name="description"
            content="Papercups is an open-source live chat widget. Chat with your customers to improve conversions and customer satisfaction."
          ></meta>
        </Head>

        <NavMenu dark />

        <main className="flex-auto min-h-0">
          {/* Hero section */}
          <div className="dark bg-gray-900 pb-16">
            <div className="max-w-7xl mx-auto px-4 pt-12 pb-6 dark:text-white">
              <div className="flex flex-col sm:flex-row">
                <div className="flex-1 pt-24 sm:pt-36 pr-12">
                  <Box className="mb-6">
                    <H1 className="font-bold text-4xl sm:text-6xl mb-5">
                      Streamline communication with your customers
                    </H1>

                    <p className="leading-relaxed text-lg sm:text-xl text-gray-700 dark:text-gray-300">
                      Coordinate and reply to messages over chat, email, Slack,
                      and SMS. A privacy-focused, open-source alternative to
                      Intercom, Drift, and Zendesk.
                    </p>

                    <Flex my={4}>
                      <Box mr={2}>
                        <a
                          href="https://app.papercups.io/demo"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          <button className="bg-white hover:bg-gray-100 text-black text-base py-2 px-5 rounded border">
                            See the demo
                          </button>
                        </a>
                      </Box>
                      <Box mr={2}>
                        <a
                          href="https://app.papercups.io/register"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          <button className="flex items-center bg-blue-500 hover:bg-blue-400 border border-blue-500 hover:border-blue-400 text-white text-base py-2 px-5 rounded">
                            <span className="mr-2">Get started for free</span>
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              className="h-4 w-4"
                              fill="none"
                              viewBox="0 0 24 24"
                              stroke="currentColor"
                            >
                              <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2}
                                d="M14 5l7 7m0 0l-7 7m7-7H3"
                              />
                            </svg>
                          </button>
                        </a>
                      </Box>
                    </Flex>
                  </Box>
                </div>

                <div style={{flex: 1.6}}>
                  <div className="hidden sm:flex flex-col justify-center items-center py-16 sm:py-0">
                    <FadeIn direction="left">
                      <Image
                        className="w-full rounded"
                        style={{minWidth: 720, minHeight: 680}}
                        src="papercups-hero.svg"
                      />
                    </FadeIn>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {/* Customers section */}
          <div className="dark pt-16 pb-32 border-gray-800 bg-gray-900">
            <div className="max-w-5xl mx-auto flex justify-center items-center flex-col">
              <H2 className="dark:text-white">Our customers</H2>

              <div className="flex-1">
                <Flex
                  mx={-4}
                  justifyContent="center"
                  flexDirection={['column', 'row']}
                >
                  <Box pt={60} mx={[0, 4]}>
                    <Image
                      sx={{width: '100%', height: '30px'}}
                      src="batch-logo.svg"
                    />
                  </Box>
                  <Box pt={60} mx={[0, 4]}>
                    <Image sx={{height: '35px'}} src="ycombinator-logo.svg" />
                  </Box>
                  <Box pt={60} mx={[0, 4]}>
                    <Image sx={{height: '35px'}} src="posthog-logo.svg" />
                  </Box>
                  <Box pt={68} mx={[0, 4]}>
                    <Image
                      sx={{width: '100%', height: '30px'}}
                      src="pry-logo.svg"
                    />
                  </Box>
                </Flex>
                <Flex
                  mx={-4}
                  mb={0}
                  justifyContent="center"
                  flexDirection={['column', 'row']}
                >
                  <Box pt={60} mx={[0, 4]}>
                    <Image
                      sx={{width: '100%', height: '30px'}}
                      src="quadranteye-logo.svg"
                    />
                  </Box>
                  <Box pt={60} mx={[0, 4]}>
                    <Image
                      sx={{width: '100%', height: '30px'}}
                      src="jovian-logo.svg"
                    />
                  </Box>
                  <Box pt={60} mx={[0, 4]}>
                    <Image
                      sx={{width: '100%', height: '30px'}}
                      src="cotter-logo.svg"
                    />
                  </Box>
                </Flex>
              </div>
            </div>
          </div>

          {/* Dashboard highlight section */}
          <div className="">
            <div className="max-w-5xl mx-auto px-4 pt-24 pb-16 mb-16 border-b">
              <Flex
                mb={4}
                sx={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'column',
                }}
              >
                <H2>One powerful dashboard</H2>
                <P>
                  Streamline customer support and feedback with our feature-rich
                  dashboard.
                </P>
              </Flex>

              <Box>
                <FadeIn delay={200}>
                  <Image
                    sx={{
                      width: '100%',
                      borderRadius: 8,
                      boxShadow: 'rgb(0 0 0 / 16%) 0px 5px 40px',
                    }}
                    src="dashboard.png"
                  />
                </FadeIn>
              </Box>
            </div>
          </div>

          <div className="max-w-5xl mx-auto px-4">
            <Flex
              mb={[5, 6]}
              mx={[0, -4]}
              alignItems="center"
              flexDirection={['column-reverse', 'row']}
            >
              <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
                <FadeIn direction="right" delay={200}>
                  <Flex
                    alignItems="center"
                    justifyContent="center"
                    style={{
                      width: '100%',
                      height: '100%',
                    }}
                  >
                    <Image
                      sx={{
                        width: '100%',
                        height: '100%',
                        minHeight: 320,
                        borderRadius: 4,
                        boxShadow: 'rgb(0 0 0 / 16%) 0px 5px 40px',
                      }}
                      src="reply-from-slack.gif"
                    />
                  </Flex>
                </FadeIn>
              </Box>

              <Box flex={1} mx={[0, 4]} my={[4, 0]}>
                <H3>Reply from where you work</H3>
                <P>
                  You can reply to conversations from Slack, our dashboard, or
                  our mobile app. Remove the friction of having to log in to
                  another dashboard.
                </P>
              </Box>
            </Flex>

            <Flex
              mb={[5, 6]}
              mx={[0, -4]}
              alignItems="center"
              flexDirection={['column', 'row']}
            >
              <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
                <H3>Brand and customize your widget</H3>
                <P>
                  Our widget is highly customizable. Change your color,
                  greetings, text and more through our simple UI without needing
                  any code.
                </P>
              </Box>

              <Box flex={1} mx={[0, 4]}>
                <FadeIn direction="left" delay={200}>
                  <Flex
                    alignItems="center"
                    justifyContent="center"
                    style={{
                      width: '100%',
                      height: '100%',
                    }}
                  >
                    <Image
                      sx={{
                        width: '100%',
                        height: '100%',
                        minHeight: 320,
                      }}
                      src="customize.gif"
                    />
                    {/* <ChatDemo /> */}
                  </Flex>
                </FadeIn>
              </Box>
            </Flex>

            <Flex
              mb={[5, 6]}
              mx={[0, -4]}
              alignItems="center"
              flexDirection={['column-reverse', 'row']}
            >
              <Box flex={1} mx={[0, 4]}>
                <FadeIn direction="right" delay={200}>
                  <Flex
                    alignItems="center"
                    justifyContent="center"
                    style={{
                      width: '100%',
                      height: '100%',
                    }}
                  >
                    <Image
                      sx={{
                        width: '100%',
                        height: '100%',
                        minHeight: 320,
                        borderRadius: 4,
                        boxShadow: 'rgb(0 0 0 / 16%) 0px 5px 40px',
                      }}
                      src="papercups-js.png"
                    />
                  </Flex>
                </FadeIn>
              </Box>
              <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
                <H3>Save your developers time</H3>
                <P>
                  Papercups is open source and made with a developer in mind. We
                  support HTML, React, React Native and Flutter integrations.
                  Our integration takes minutes to setup and if you can't do it
                  in minutes we'll hop on a zoom call and do it for you!
                </P>
              </Box>
            </Flex>
          </div>

          <div className="dark bg-gray-900 py-24">
            <div className="max-w-5xl mx-auto px-4">
              <Flex justifyContent="center" mb={[4, 5]} mt={[6, 0]}>
                <H2>Papercups for Enterprise</H2>
              </Flex>

              <Flex
                mx={-3}
                justifyContent="space-between"
                mb={6}
                flexDirection={['column', 'row']}
              >
                <FadeIn delay={100}>
                  <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
                    <H3>Self-managed</H3>
                    <P>
                      Papercups can be deployed in your cloud, for painless
                      adoption and onboarding. Whether it's AWS, Docker, or
                      Heroku, we've got you covered.
                    </P>
                  </Flex>
                </FadeIn>
                <FadeIn delay={200}>
                  <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
                    <H3>Unlimited volume</H3>
                    <P>
                      Papercups is built with Elixir on top of BEAM for
                      incredible scalability. This scalability extends to our
                      open core pricing model.
                    </P>
                  </Flex>
                </FadeIn>
                <FadeIn delay={300}>
                  <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
                    <H3>Personalized support</H3>
                    <P>
                      We can manage your deployment on your infrastructure. Get
                      the benefits of self-hosting with the reliability and
                      scalability of the cloud.
                    </P>
                  </Flex>
                </FadeIn>
              </Flex>

              <Flex
                justifyContent="center"
                alignItems="center"
                flexDirection="column"
              >
                <H1>What's new?</H1>

                <Flex my={4} mx={-2}>
                  <Box mx={2}>
                    <a
                      href="https://github.com/papercups-io/papercups"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <button className="inline-flex h-10 items-center justify-center bg-white hover:bg-gray-100 text-black text-base py-2 px-5 rounded border">
                        <img src="github-v1.svg" className="h-full mr-2" />
                        <span>Find out on Github</span>
                      </button>
                    </a>
                  </Box>
                  <Box mx={2}>
                    <button
                      className="h-10 bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded"
                      onClick={Papercups.toggle}
                    >
                      Ask us!
                    </button>
                  </Box>
                </Flex>
              </Flex>
            </div>
          </div>
        </main>

        <footer className="bg-gray-800 flex-0">
          <div className="max-w-5xl mx-auto px-4">
            <Flex py={5} sx={{justifyContent: 'space-between'}}>
              <Flex sx={{alignItems: 'center'}}>
                <p className="text-white pr-3">
                  Backed by <b>Y Combinator</b>
                </p>

                <Image sx={{width: '20px', height: '20px'}} src="yc-logo.png" />
              </Flex>

              <Box>
                <a href="/privacy" className="white_link">
                  Privacy
                </a>
              </Box>
            </Flex>
          </div>
        </footer>

        <ChatWidget
          token="eb504736-0f20-4978-98ff-1a82ae60b266"
          inbox="364b1871-6db5-4bc0-9a88-994e06adbda6"
          title="Welcome to Papercups!"
          subtitle="Ask us anything in the chat window below ?"
          greeting="Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!"
          emailInputPlaceholder="What's your email address?"
          newMessagesNotificationText="See new messages"
          primaryColor="#1890ff"
          iconVariant="filled"
          requireEmailUpfront
          showAgentAvailability
          popUpInitialMessage={8000}
        />
      </Flex>
    );
  }

render() {
    return (
      <Flex className="flex-auto flex-col min-h-0 bg-white">
        <Head>
          <title>Papercups | Open Source Intercom Alternative</title>
          <link rel="icon" href="/logo-v2.svg" />
          <meta
            name="description"
            content="Papercups is an open-source live chat widget. Chat with your customers to improve conversions and customer satisfaction."
          ></meta>
        </Head>

        <NavMenu />

        <main className="flex-auto min-h-0">
          <Box mx="auto" style={{maxWidth: 960}} py={5} px={4}>
            <Flex mb={[5, 6]} mx={[0, -4]} flexDirection={['column', 'row']}>
              <Box pt={100} flex={1} mx={[0, 4]} mb={[4, 0]}>
                <Box mb={6}>
                  <H1 className="mb-5">
                    Connect and chat with customers from your website
                  </H1>

                  <p className="leading-relaxed text-xl text-gray-700">
                    Open source customer messaging, built for both startups and
                    enterprise.
                  </p>

                  <Flex my={4}>
                    <Box mr={2}>
                      <a
                        href="https://app.papercups.io/demo"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <button className="bg-white hover:bg-gray-100 text-base py-2 px-5 rounded border">
                          Demo
                        </button>
                      </a>
                    </Box>
                    <Box mr={2}>
                      <a
                        href="https://app.papercups.io/register"
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <button className="flex items-center bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded">
                          <span className="mr-2">Sign up for free</span>
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-4 w-4"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth={2}
                              d="M14 5l7 7m0 0l-7 7m7-7H3"
                            />
                          </svg>
                        </button>
                      </a>
                    </Box>
                  </Flex>
                </Box>
              </Box>

              <Box flex={1} mx={[0, 4]}>
                <Flex
                  alignItems="center"
                  justifyContent="center"
                  style={{
                    width: '100%',
                    height: '100%',
                  }}
                >
                  <ChatDemo />
                </Flex>
              </Box>
            </Flex>

            <Box mb={[4, 6]}>
              <Flex
                mb={4}
                sx={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'column',
                }}
              >
                <H2>One powerful dashboard</H2>
                <P>
                  Streamline customer support and feedback with our feature-rich
                  dashboard.
                </P>
              </Flex>

              <Box>
                {/* TODO: find better images/screenshots! */}
                <Image
                  sx={{width: '100%'}}
                  src="images/demo-conversations.png"
                />
              </Box>
            </Box>
            <Box mx={[4, 6]} pb={50}>
              <Flex
                sx={{
                  justifyContent: 'center',
                  alignItems: 'center',
                  flexDirection: 'column',
                }}
              >
                <H2>Our customers</H2>

                <Box flex={1}>
                  <Flex
                    mx={-5}
                    justifyContent="space-between"
                    flexDirection={['column', 'row']}
                  >
                    <Box pt={60} flex={1} mx={[0, 4]}>
                      <img
                        style={{
                          width: '100%',
                          height: '30px',
                        }}
                        src="batch-logo.svg"
                      />
                    </Box>
                    <Box pt={60} mx={[0, 4]}>
                      <img
                        style={{
                          height: '35px',
                        }}
                        src="ycombinator-logo.svg"
                      />
                    </Box>
                    <Box pt={60} mx={[0, 4]}>
                      <img
                        style={{
                          height: '35px',
                        }}
                        src="posthog-logo.svg"
                      />
                    </Box>
                    <Box pt={68} mx={[0, 4]}>
                      <img
                        style={{
                          width: '100%',
                          height: '30px',
                        }}
                        src="pry-logo.svg"
                      />
                    </Box>
                  </Flex>
                  <Flex
                    mx={-3}
                    justifyContent="space-between"
                    mb={0}
                    flexDirection={['column', 'row']}
                  >
                    <Box pt={60} flex={1} mx={[0, 4]}>
                      <img
                        style={{
                          width: '100%',
                          height: '30px',
                        }}
                        src="quadranteye-logo.svg"
                      />
                    </Box>
                    <Box pt={60} flex={1} mx={[0, 4]}>
                      <img
                        style={{
                          width: '100%',
                          height: '30px',
                        }}
                        src="jovian-logo.svg"
                      />
                    </Box>
                    <Box pt={60} flex={1} mx={[0, 4]}>
                      <img
                        style={{
                          width: '100%',
                          height: '30px',
                        }}
                        src="cotter-logo.svg"
                      />
                    </Box>
                  </Flex>
                </Box>
              </Flex>
            </Box>

            <Box className="border-b" mb={[5, 6]}></Box>

            <Flex mb={[5, 6]} mx={[0, -4]} flexDirection={['column', 'row']}>
              <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
                <Flex
                  alignItems="center"
                  justifyContent="center"
                  style={{
                    width: '100%',
                    height: '100%',
                  }}
                >
                  <img
                    style={{
                      width: '100%',
                      height: '100%',
                      minHeight: 320,
                    }}
                    src="setup.svg"
                  />
                </Flex>
              </Box>

              <Box flex={1} mx={[0, 4]} my={[4, 0]}>
                <H3>Reply directly from Slack</H3>
                <P>
                  Directly talk to your users from a single Slack channel.
                  Remove the friction of having to login to another dashboard.
                  Set up our Slack integration in minutes.
                </P>
              </Box>
            </Flex>

            <Flex
              mb={[5, 6]}
              mx={[0, -4]}
              flexDirection={['column-reverse', 'row']}
            >
              <Box flex={1} mx={[0, 4]} mb={[4, 0]}>
                <H3>Brand and customize your widget</H3>
                <P>
                  Our widget is highly customizable. Change your color,
                  greetings, text and more through our simple UI without needing
                  any code.
                </P>
              </Box>

              <Box flex={1} mx={[0, 4]}>
                <Flex
                  alignItems="center"
                  justifyContent="center"
                  style={{
                    width: '100%',
                    height: '100%',
                  }}
                >
                  <img
                    style={{
                      width: '100%',
                      height: '100%',
                      minHeight: 320,
                    }}
                    src="customize.svg"
                  />
                </Flex>
              </Box>
            </Flex>
            <Flex mb={[5, 6]} mx={[0, -4]} flexDirection={['column', 'row']}>
              <Box flex={1} mx={[0, 4]}>
                <Flex
                  alignItems="center"
                  justifyContent="center"
                  style={{
                    width: '100%',
                    height: '100%',
                  }}
                >
                  <img
                    style={{
                      width: '100%',
                      height: '100%',
                      minHeight: 320,
                    }}
                    src="secure.svg"
                  />
                </Flex>
              </Box>
              <Box pt={100} flex={1} mx={[0, 4]} mb={[4, 0]}>
                <H3>Save your developers time</H3>
                <P>
                  Papercups is open source and made with a developer in mind. We
                  support HTML, React, React Native and Flutter integrations.
                  Our integration takes minutes to setup and if you can't do it
                  in minutes we'll hop on a zoom call and do it for you!
                </P>
              </Box>
            </Flex>

            <Flex justifyContent="center" mb={[4, 5]} mt={[6, 0]}>
              <H2>Papercups for Enterprise</H2>
            </Flex>

            <Flex
              mx={-3}
              justifyContent="space-between"
              mb={6}
              flexDirection={['column', 'row']}
            >
              <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
                <H3>Self-managed</H3>
                <P>
                  Papercups can be deployed in your cloud, for painless adoption
                  and onboarding. Whether it's AWS, Docker, or Heroku, we've got
                  you covered.
                </P>
              </Flex>
              <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
                <H3>Unlimited volume</H3>
                <P>
                  Papercups is built with Elixir on top of BEAM for incredible
                  scalability. This scalability extends to our open core pricing
                  model.
                </P>
              </Flex>
              <Flex flex={1} mx={3} my={[3, 0]} flexDirection="column">
                <H3>Personalized support</H3>
                <P>
                  We can manage your deployment on your infrastructure. Get the
                  benefits of self-hosting with the reliability and scalability
                  of the cloud.
                </P>
              </Flex>
            </Flex>

            <Flex justifyContent="center" mb={[3, 4]} mt={[6, 0]}>
              <H2>Connect with us</H2>
            </Flex>

            <Flex
              mx={-3}
              justifyContent="space-between"
              mb={6}
              flexDirection={['column', 'row']}
            >
              <Flex flex={1} mx={3} my={[3, 0]} justifyContent="center">
                <a
                  href="https://join.slack.com/t/papercups-io/shared_invite/zt-h0c3fxmd-hZi1Zp8~D61S6GD16aMqmg"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <img src="slack-v1.svg" style={{height: 144}} />
                </a>
              </Flex>
              <Flex flex={1} mx={3} my={[3, 0]} justifyContent="center">
                <a
                  href="https://github.com/papercups-io/papercups"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <img src="github-v1.svg" style={{height: 144}} />
                </a>
              </Flex>
              <Flex flex={1} mx={3} my={[3, 0]} justifyContent="center">
                <a
                  href="https://discord.gg/Dq2A3eh"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <img src="discord-color.svg" style={{height: 144}} />
                </a>
              </Flex>
            </Flex>

            <Flex
              mb={5}
              justifyContent="center"
              alignItems="center"
              flexDirection="column"
            >
              <H1>What's new?</H1>

              <Flex my={4} mx={-2}>
                <Box mx={2}>
                  <a
                    href="https://github.com/papercups-io/papercups"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <button className="bg-white hover:bg-gray-100 text-base py-2 px-5 rounded border">
                      Find out on Github
                    </button>
                  </a>
                </Box>
                <Box mx={2}>
                  <button
                    className="bg-blue-500 hover:bg-blue-400 text-white text-base py-2 px-5 rounded"
                    onClick={Papercups.toggle}
                  >
                    Ask us!
                  </button>
                </Box>
              </Flex>
            </Flex>
          </Box>
        </main>

        <footer
          className=""
          style={{flex: '0 0 auto', backgroundColor: '#001529'}}
        >
          <Flex
            mx="auto"
            py={5}
            px={4}
            sx={{justifyContent: 'space-between', maxWidth: 960}}
          >
            <Flex p={3} sx={{alignItems: 'center'}}>
              <p className="text-white pr-3">
                Backed by <b>Y Combinator</b>
              </p>

              <img
                style={{
                  width: '20px',
                  height: '20px',
                }}
                src="yc-logo.png"
              />
            </Flex>

            <Box p={3}>
              <a href="/privacy" className="white_link">
                Privacy
              </a>
            </Box>
          </Flex>
        </footer>

        <ChatWidget
          token="eb504736-0f20-4978-98ff-1a82ae60b266"
          inbox="364b1871-6db5-4bc0-9a88-994e06adbda6"
          title="Welcome to Papercups!"
          subtitle="Ask us anything in the chat window below ?"
          greeting="Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!"
          emailInputPlaceholder="What's your email address?"
          newMessagesNotificationText="See new messages"
          primaryColor="#1890ff"
          iconVariant="filled"
          requireEmailUpfront
          showAgentAvailability
          popUpInitialMessage={8000}
        />
      </Flex>
    );
  }

render() {
    const {title, width, dark = false, className = '', children} = this.props;

    return (
      <Flex
        className={`flex-auto flex-col min-h-0 ${
          dark ? 'dark bg-gray-900' : 'bg-white'
        }`}
      >
        <Head>
          <title>
            Papercups | {title || 'Open Source Intercom Alternative'}
          </title>
          <link rel="icon" href="/logo-v2.svg" />
          <meta
            name="description"
            content="Papercups is an open-source live chat widget. Chat with your customers to improve conversions and customer satisfaction."
          ></meta>
          <script
            async
            src="https://platform.twitter.com/widgets.js"
            charSet="utf-8"
          ></script>
        </Head>

        <NavMenu dark={dark} />

        <main className="flex-auto min-h-0 dark:text-white">
          <Box
            className={className}
            mx="auto"
            style={{maxWidth: width || 800}}
            pt={5}
            px={4}
            pb={6}
          >
            <MDXProvider components={this.state}>{children}</MDXProvider>
          </Box>
        </main>

        <footer className="bg-gray-800 flex-0">
          <div
            className="max-w-5xl mx-auto px-4"
            style={{maxWidth: width || 800}}
          >
            <Flex py={5} sx={{justifyContent: 'space-between'}}>
              <Flex sx={{alignItems: 'center'}}>
                <p className="text-white pr-3">
                  Backed by <b>Y Combinator</b>
                </p>

                <Image sx={{width: '20px', height: '20px'}} src="yc-logo.png" />
              </Flex>

              <Box>
                <a href="/privacy" className="white_link">
                  Privacy
                </a>
              </Box>
            </Flex>
          </div>
        </footer>

        {this.isWindowReady() && (
          <ChatWidget
            token="eb504736-0f20-4978-98ff-1a82ae60b266"
            inbox="364b1871-6db5-4bc0-9a88-994e06adbda6"
            title="Welcome to Papercups!"
            subtitle="Ask us anything in the chat window below ?"
            greeting="Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!"
            primaryColor="#1890ff"
            iconVariant="filled"
            requireEmailUpfront
            showAgentAvailability
            // Pops up initial message after 2s when `shouldPopUpInitialMessage` return `true`
            popUpInitialMessage={
              this.shouldPopUpInitialMessage() ? 2000 : false
            }
            setDefaultGreeting={(settings) => {
              const path = window.location.pathname;

              switch (path) {
                case '/pricing':
                  return "Hi there! Let us know if you have any questions about pricing :) (we're offering deals to startups and international founders)";
                default:
                  return "Hi there! Send us a message and we'll get back to you as soon as we can. In the meantime, check out our [demo](https://app.papercups.io/demo)!";
              }
            }}
          />
        )}
      </Flex>
    );
  }