react-icons/fa#FaTwitter TypeScript Examples

SocialLinks: FunctionComponent = () => {
    return (
        <Flex
            align="center"
            wrap="wrap"
            justify="center"
            mx={["auto", null, "initial"]}
            p={2}
        >
            <SocialLink icon={FaTwitter} href={twitterUrl} />
            <SocialLink icon={FaYoutube} href={youtubeUrl} />
            <SocialLink icon={FaFacebookF} href={facebookUrl} />
            <SocialLink icon={FaGithub} href={githubUrl} />
        </Flex>
    );
}

export default function Tag() {
  return (
    <div className="copy">
      <span>
        <a target="_blank" rel="noreferrer" href="https://twitter.com/CantBeFaraz">
          <FaTwitter size={40} />
        </a>
      </span>

      <span>
        Made with ? by{' '}
        <a target="_blank" rel="noreferrer" href="https://twitter.com/CantBeFaraz">
          Faraz Shaikh
        </a>
      </span>

      <span>
        <a target="_blank" rel="noreferrer" href="https://github.com/FarazzShaikh">
          <FaGithub size={40} />
        </a>
      </span>
    </div>
  )
}

export function HomeScreen() {
  const { appVersion } = useAppInfo();
  return (
    <Stack gap={4} sx={{ justifyContent: "center", alignItems: "center", margin: "auto", height: "100%" }}>
      <Stack alignItems={"center"}>
        <FastRewind sx={{ height: "2em", width: "2em" }} />
        <Typography fontSize={"1em"} sx={{ userSelect: "none", marginBottom: 2 }}>
          REWIND
        </Typography>
        <Typography fontSize={"caption.fontSize"} color={"text.secondary"}>
          Rewind {appVersion} by{" "}
          <Link href={RewindLinks.OsuPpyShAbstrakt} target={"_blank"} color={"text.secondary"}>
            abstrakt
          </Link>
        </Typography>
        <Typography fontSize={"caption.fontSize"} color={"text.secondary"}>
          osu! University
          <IconButton href={discordUrl} target={"_blank"} size={"small"}>
            <FaDiscord />
          </IconButton>
          <IconButton href={twitterUrl} target={"_blank"} size={"small"}>
            <FaTwitter />
          </IconButton>
          <IconButton href={youtubeUrl} target={"_blank"} size={"small"}>
            <FaYoutube />
          </IconButton>
        </Typography>
      </Stack>
    </Stack>
  );
}

getIcon = icon => {
  switch (icon) {
    case 'Apple':
      return FaApple
    case 'facebook':
      return FaFacebookF
    case 'instagram':
      return FaInstagram
    case 'Soundcloud':
      return FaSoundcloud
    case 'Spotify':
      return FaSpotify
    case 'twitter':
      return FaTwitter
    case 'youtube':
      return FaYoutube
    case 'linkedin':
      return FaLinkedinIn
    case 'github':
      return FaGithub
    default:
      return false
  }
}

linktreeList = [
  { href: "https://twitter.com/DhafitF", text: "Twitter", icon: <FaTwitter /> },
  {
    href: "https://trakteer.id/dhafid",
    text: "Trakteer",
    icon: <Image src="/assets/icon/lines-trakteer-icon.png" alt="Trakteer logo" width="100%" height="100%" />,
  },
  { href: "https://www.instagram.com/dhafitf", text: "Instagram", icon: <FaInstagram /> },
  { href: "https://www.nogisub.com/", text: "Fansub", icon: <FaBloggerB /> },
  { href: "https://www.facebook.com/dhafid.farenza", text: "Facebook", icon: <FaFacebookF /> },
  { href: "https://github.com/dhafitf", text: "Github", icon: <FaGithub /> },
  { href: "https://www.youtube.com/c/dhafitfarenza", text: "Facebook", icon: <FaYoutube /> },
]

SOCIAL_PLATFORM_ITEMS = [
  {
    link: INTERLAY_TWITTER,
    icon: <FaTwitter />
  },
  {
    link: INTERLAY_MEDIUM,
    icon: <FaMediumM />
  },
  {
    link: INTERLAY_GITHUB,
    icon: <FaGithub />
  },
  {
    link: INTERLAY_LINKEDIN,
    icon: <FaLinkedinIn />
  },
  {
    link: INTERLAY_DISCORD,
    icon: <FaDiscord />
  }
]

Content = (props: Props) => {

  return (
    <div className="links">
      {props.data['電話番号']?<div className="link"><a href={`tel:${props.data['電話番号']}`}><FaPhone onClick={noop} size="20px" /></a></div>:''}
      {props.data['Instagram']?<div className="link"><a href={`https://instagram.com/${props.data['Instagram']}`}><FaInstagram onClick={noop} size="20px" /></a></div>:''}
      {props.data['Twitter']?<div className="link"><a href={`https://twitter.com/${props.data['Twitter']}`}><FaTwitter onClick={noop} size="20px" /></a></div>:''}
      {props.data['公式サイト']?<div className="link"><a href={props.data['公式サイト']}><FaHome onClick={noop} size="20px" /></a></div>:''}
    </div>
  );
}

SOCIAL_MEDIA_ITEMS = [
  {
    link: INTERLAY_TWITTER_LINK,
    icon: <FaTwitter className={clsx('w-3', 'h-3')} />
  },
  {
    link: INTERLAY_DISCORD_LINK,
    icon: <FaDiscord className={clsx('w-3', 'h-3')} />
  },
  {
    link: INTERLAY_GITHUB_LINK,
    icon: <FaGithub className={clsx('w-3', 'h-3')} />
  },
  {
    link: INTERLAY_EMAIL_LINK,
    icon: <FaMailBulk className={clsx('w-3', 'h-3')} />
  }
]

socmedList: any = [
  { text: "Facebook", icon: <FaFacebookF />, href: "https://www.facebook.com/dhafid.farenza", background: "#4267B2" },
  { text: "Instagram", icon: <FaInstagram />, href: "https://www.instagram.com/dhafitf", background: "#E1306C" },
  { text: "Twitter", icon: <FaTwitter />, href: "https://twitter.com/DhafitF", background: "#1DA1F2" },
  { text: "Github", icon: <FaGithub />, href: "https://github.com/dhafitf", background: "#333333" },
]

socialLinks: [string, IconType][] = [
  ['https://fb.com/po8klasie', FaFacebookF],
  ['https://twitter.com/po8klasie', FaTwitter],
  ['https://github.com/po8klasie', FaGithub],
  ['https://linkedin.com/company/po8klasie', FaLinkedinIn],
]

socialLinks: [string, IconType][] = [
  ['https://fb.com/po8klasie', FaFacebookF],
  ['https://twitter.com/po8klasie', FaTwitter],
  ['https://github.com/po8klasie', FaGithub],
  ['https://linkedin.com/company/po8klasie', FaLinkedinIn],
]

maintainers: MaintainerInfo[] = [
  {
    name: 'Ivan Aksamentov',
    portraitUrl: 'https://avatars3.githubusercontent.com/u/9403403?s=400',
    title: 'Senior Software Engineer',
    affiliations: ['NeherLab, Biozentrum, University of Basel', 'Swiss Institute of Bioinformatics'],
    links: [
      {
        title: 'GitHub',
        url: 'https://github.com/ivan-aksamentov',
        alt: 'Link to Github page, with grey Github Octocat logo',
        icon: <FaGithub size={25} color="#24292E" />,
      },
    ],
  },
  {
    name: 'Richard Neher',
    portraitUrl: 'https://avatars3.githubusercontent.com/u/8379168?s=400',
    title: 'Principal Investigator',
    affiliations: ['NeherLab, Biozentrum, University of Basel', 'Swiss Institute of Bioinformatics'],
    links: [
      {
        title: 'Website',
        url: `https://neherlab.org`,
        alt: 'Link to website',
        icon: <GiEarthAfricaEurope size={25} color="#3267E9" />,
      },
      {
        title: 'Twitter',
        url: `https://twitter.com/richardneher`,
        alt: 'Link to Twitter, with blue Twitter bird logo',
        icon: <FaTwitter size={25} color="#08a0e9" />,
      },
      {
        title: 'GitHub',
        url: 'https://github.com/rneher',
        alt: 'Link to Github page, with grey Github Octocat logo',
        icon: <FaGithub size={25} color="#24292E" />,
      },
    ],
  },
  {
    name: 'Cornelius Roemer',
    portraitUrl: 'https://avatars1.githubusercontent.com/u/25161793?v=4',
    title: 'Staff Scientist',
    affiliations: ['NeherLab, Biozentrum, University of Basel', 'Swiss Institute of Bioinformatics'],
    links: [
      {
        title: 'Twitter',
        url: `https://twitter.com/corneliusroemer`,
        alt: 'Link to Twitter, with blue Twitter bird logo',
        icon: <FaTwitter size={25} color="#08a0e9" />,
      },
      {
        title: 'GitHub',
        url: 'https://github.com/corneliusroemer',
        alt: 'Link to Github page, with grey Github Octocat logo',
        icon: <FaGithub size={25} color="#24292E" />,
      },
    ],
  },
]

export function NavigationBar() {
  const { t } = useTranslation()

  const navLinksRight = useMemo(
    () => [
      {
        title: t('Twitter'),
        url: 'https://twitter.com/nextstrain',
        alt: t('Link to our Twitter'),
        icon: <FaTwitter size={28} color="#aaa" />,
      },
      {
        title: t('Our containers at Docker Hub'),
        url: 'https://hub.docker.com/r/nextstrain/nextclade',
        alt: t('Link to our Docker containers'),
        icon: <FaDocker size={28} color="#aaa" />,
      },
      {
        title: t('GitHub'),
        url: 'https://github.com/nextstrain/nextclade',
        alt: t('Link to our Github page'),
        icon: <FaGithub size={28} color="#aaa" />,
      },
    ],
    [t],
  )

  return (
    <nav
      className="navbar navbar-expand navbar-light navbar-scroll hide-native-scrollbar"
      role="navigation"
      data-testid="NavigationBar"
    >
      <Link className="navbar-brand d-flex" href="/" role="button">
        <BrandLogo className="navigation-bar-product-logo" />
        <NavigationLogo />
      </Link>

      <ul className="navbar-nav ml-auto d-flex">
        <li className="nav-item mx-2 my-auto">
          <CitationButton />
        </li>

        <li className="nav-item mx-2 my-auto">
          <DocsLink />
        </li>

        <li className="nav-item mx-2 my-auto">
          <SettingsButton />
        </li>

        <li className="nav-item mx-2 my-auto">
          <WhatsNewButton />
        </li>

        <li className="nav-item mx-2 my-auto">
          <LanguageSwitcher />
        </li>

        {navLinksRight.map(({ title, url, alt, icon }) => (
          <li key={title} className="nav-item mx-2 my-auto">
            <LinkExternal title={title} url={url} alt={alt}>
              {icon}
            </LinkExternal>
          </li>
        ))}
      </ul>
    </nav>
  )
}

SharePopover = ({ url }: SharePopoverProps) => {
  const [isLoadingShare, setLoadingShare] = useState<boolean>(false)
  const [showShare, setShowShare] = useState<boolean>(false)
  const [text, setText] = useState<string>('')
  const parsedUrl = encodeURIComponent(url)

  const handleShare = async (url: string) => {
    setLoadingShare(true)
    const d = await getMeta(url)
    setText(encodeURIComponent(d.description))
    setShowShare(true)
    setLoadingShare(false)
  }

  return (
    <Popover
      isOpen={showShare}
      onClose={() => {
        setShowShare(false)
      }}
      isLazy
      placement="bottom"
    >
      <PopoverTrigger>
        <IconButton
          onClick={() => {
            handleShare(url)
          }}
          aria-label="Share url"
          fontSize="20px"
          variant="ghost"
          borderRadius="md"
          isLoading={isLoadingShare}
          icon={<HiShare color="#ED8936" />}
        />
      </PopoverTrigger>
      <PopoverContent>
        <PopoverArrow />
        <PopoverCloseButton />
        <PopoverHeader>Bagikan tautan anda</PopoverHeader>
        <PopoverBody>
          <Stack direction="row" justifyContent="center">
            <Link isExternal href={`https://api.whatsapp.com/send?text=${text}+%0A+${parsedUrl}`}>
              <IconButton
                borderRadius="md"
                colorScheme="green"
                aria-label="Share whatsapp"
                icon={<FaWhatsapp />}
              />
            </Link>
            <Link
              isExternal
              href={`https://twitter.com/intent/tweet?text=${text}+%0A+${parsedUrl}`}
            >
              <IconButton
                borderRadius="md"
                colorScheme="twitter"
                aria-label="Share twitter"
                icon={<FaTwitter />}
              />
            </Link>
            <Link
              isExternal
              href={`https://www.facebook.com/sharer/sharer.php?quote=${text}&u=${parsedUrl}`}
            >
              <IconButton
                borderRadius="md"
                colorScheme="facebook"
                aria-label="Share Facebook"
                icon={<FaFacebook />}
              />
            </Link>
          </Stack>
        </PopoverBody>
      </PopoverContent>
    </Popover>
  )
}

ICON_MAP: Record<ILinkTypes, any> = {
  github: FaGithub,
  twitter: FaTwitter,
  instagram: FaInstagram,
  website: FaGlobe,
}

NewsAndTwitterLink = ({
  celebrate = false,
}: {
  celebrate?: boolean;
}) => {
  const { t } = useTranslation();

  return (
    <Column
      expand
      mainAxisAlignment="flex-start"
      crossAxisAlignment="flex-start"
    >
      <Link href="https://twitter.com/RariCapital" isExternal>
        <Row
          mainAxisAlignment="flex-start"
          crossAxisAlignment="center"
          px={4}
          py={3}
        >
          <Icon as={FaTwitter} boxSize="20px" />

          <Heading ml={2} size="sm">
            {t("Latest Rari News")}
          </Heading>
        </Row>
      </Link>

      <ModalDivider />

      <Column
        expand
        px={4}
        mainAxisAlignment="center"
        crossAxisAlignment="flex-start"
      >
        <NewsMarquee celebrate={celebrate} />
      </Column>
    </Column>
  );
}

export function SideNavbar(props: any) {
  const [login, setLogin] = useState('')
  const [myChannelLink, setMyChannelLink] = useState('')

  useEffect(() => {
    const load = async () => {
      const login = localStorage.getItem('SNProfileID')

      if (login) {
        const user = (await AccountService.getAccount(login)) as any

        const ringItem = user.keyring[0]
        setLogin(user.nickname)
        setMyChannelLink(`${ringItem.type}:${ringItem.username}`)
      }
    }

    void load()
  }, [])

  const logOut = async () => {
    //TODO: logout logic

    const profileID = localStorage.getItem('SNProfileID')

    const user = await AccountService.logout(profileID)
    const accountsInit = (await AccountService.getAccounts()) as any
    localStorage.removeItem('SNProfileID')
    console.log(accountsInit)
    if (accountsInit.length > 0) {
      localStorage.setItem('SNProfileID', accountsInit[0]._id)
    }
    window.location.reload()
  }

  return (
    <Navbar bg="white" expand="lg" id="layoutNav" className="bg_white fixed-left">
      <Navbar.Brand>
        <img src={SpeakLogo} />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav">
        <span className="navbar-toggler-icon"></span>
      </Navbar.Toggle>
      <Navbar.Collapse>
        <Nav className="mr-auto nav_dist">
          {login && (
            <NavDropdown
              id="nav-dropdown"
              title={
                <>
                  <div className="nav_icons">
                    <VscKey size="21px" />
                  </div>
                  <span>@{login}</span>
                </>
              }
            >
              <NavDropdown.Item href="#/accounts">Switch account</NavDropdown.Item>
              <NavDropdown.Item href={`#/user/${myChannelLink}`}>Go to my channel</NavDropdown.Item>
              <NavDropdown.Item href="#/login">Add account</NavDropdown.Item>
              {login && (
                <NavDropdown.Item
                  onClick={() => {
                    logOut()
                  }}
                >
                  Log out
                </NavDropdown.Item>
              )}
            </NavDropdown>
          )}
          {!login && (
            <Nav.Link href="#/login" className="display-mobile">
              <button className="btn btn-dark text-white btn-sm">Add account</button>
            </Nav.Link>
          )}
          <hr />
          <Nav.Link href="#/">
            <div className="nav_icons">
              <img src={iconHome} height="14px" />
            </div>
            Home
          </Nav.Link>
          <Nav.Item></Nav.Item>
          <Nav.Link href="#/trends">
            <div className="nav_icons">
              <img src={iconTrend} height="21px" />
            </div>
            Trending Content
          </Nav.Link>
          <Nav.Link href="#/new">
            <div className="nav_icons">
              <img src={iconNewContent} height="17px" />
            </div>
            New Content
          </Nav.Link>

          <NavDropdown
            id="nav-dropdown"
            title={
              <>
                <div className="nav_icons">
                  <img src={shakeHands} style={{ height: '21px' }} />
                </div>
                Communities
              </>
            }
          >
            <Nav.Link href="#/communities">
              <FaGlobe /> All Communities...
            </Nav.Link>
            <NavDropdown.Item href="#/community/hive:hive-181335">
              <FaUsers /> Threespeak
            </NavDropdown.Item>
            <NavDropdown.Item href="#/community/hive:hive-153014">
              <FaUsers /> Citizen Journalists
            </NavDropdown.Item>

            <NavDropdown.Item href="#/community/hive:hive-112355">
              <FaUsers /> Threeshorts
            </NavDropdown.Item>
            <NavDropdown.Item href="#/community/hive:hive-129768">
              <FaUsers />
              &nbsp;Coronavirus Pandemic
            </NavDropdown.Item>
            <NavDropdown.Item href="#/community/hive:hive-196427">
              <FaUsers /> &nbsp;COVID-19
            </NavDropdown.Item>
          </NavDropdown>
          <Nav.Link href="#/leaderboard">
            <div className="nav_icons">
              <img src={iconLeaderboard} height="12px" />
            </div>
            Leaderboard
          </Nav.Link>
          <Nav.Link href="#/newcomers">
            <div className="nav_icons">
              <img src={iconNewcomer} height="19px" />
            </div>
            First Uploads
          </Nav.Link>
          <Nav.Link href="#/uploader">
            <div className="nav_icons">
              <FaToolbox />
            </div>
            Uploader
          </Nav.Link>
          <Nav.Link href="#/creatorstudio">
            <div className="nav_icons">
              <FaToolbox />
            </div>
            Creator Studio
          </Nav.Link>
          <NavDropdown
            id="nav-dropdown"
            title={
              <>
                <div className="nav_icons">
                  <BsFillGearFill style={{ height: '21px' }} />
                </div>
                Settings
              </>
            }
          >
            <Nav.Link href="#/blocklist">
              <FaGlobe /> Blocklist
            </Nav.Link>
            <Nav.Link href="#/pins">
              <FaGlobe /> Pins
            </Nav.Link>
            <Nav.Link href="#/ipfsconsole">
              <FaGlobe /> Ipfs Console
            </Nav.Link>
          </NavDropdown>
        </Nav>

        <Nav>
          <li className="nav-item">
            <div className="pad_l">
              <h5>3Speak</h5>
            </div>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://3speak.co/intl/about_us">
              About us
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link" href="https://3speak.co/intl/about_us">
              FAQ
            </a>
          </li>

          <li className="nav-item text-center">
            <a
              className=""
              target="_blank"
              href="https://twitter.com/3speakonline?utm_source=3speak.co"
            >
              <FaTwitter size={28} />
            </a>
            <a className="ml-2" target="_blank" href="https://t.me/threespeak?utm_source=3speak.co">
              <FaTelegram size={28} />
            </a>
            <a
              className="ml-2"
              target="_blank"
              href="https://discord.me/3speak?utm_source=3speak.co"
            >
              <i className="fab fa-discord text-muted fa-2x"></i>
              <FaDiscord size={28} />
            </a>
            <a
              className="ml-2"
              target="_blank"
              title="Visit Our Blog"
              href="https://hive.blog/@threespeak"
            >
              <img
                style={{ width: '32px', marginTop: '-15px', color: 'black' }}
                src={iconBlog}
                alt=""
              />
            </a>
          </li>

          <Dropdown title="Find us" className="nav-item dropdown mt-2 display-mobile">
            <Dropdown.Toggle
              className="btn btn-secondary btn-sm dropdown-toggle"
              variant="secondary"
              data-toggle="dropdown"
              aria-haspopup="true"
            >
              Find us
            </Dropdown.Toggle>
            <Dropdown.Menu>
              <a className="dropdown-item" href="https://t.me/threespeak?utm_source=3speak.co">
                Telegram
              </a>
              <a className="dropdown-item" href="https://discord.me/3speak?utm_source=3speak.co">
                Discord
              </a>
              <a
                className="dropdown-item"
                target="_blank"
                href="https://twitter.com/3speakonline?utm_source=3speak.co"
              >
                Twitter
              </a>
            </Dropdown.Menu>
          </Dropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  )
}

TeamMember = ({
  fullname,
  image,
  role,
  twitter,
  github,
  linkedin,
  medium,
  css = {},
  ...props
}) => {
  const builder = imageUrlBuilder(client as any);

  return (
    <Box
      css={{
        textAlign: "center",
        borderRadius: 24,
        border: "1px solid $colors$neutral5",
        p: 40,
        bc: "$neutral2",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        transition: "box-shadow .15s",
        "&:hover": {
          boxShadow:
            "0px 2px 1px rgba(0, 0, 0, 0.04), 0px 16px 40px rgba(0, 0, 0, 0.04)",
        },
        ...css,
      }}
      {...props}>
      <Box>
        <Box
          as={Image}
          css={{
            borderRadius: 1000,
            objectFit: "cover",
          }}
          width={130}
          height={130}
          src={builder.image(image).url()}
        />
        <Box css={{ mb: "$4" }}>
          <Heading
            as="h3"
            css={{
              mb: "$1",
              mt: "$3",
              fontWeight: 500,
              fontSize: "20px",
            }}>
            {fullname}
          </Heading>
          <Text size="3" variant="gray" css={{ color: "$primary9" }}>
            {role}
          </Text>
        </Box>
      </Box>
      <Flex
        css={{
          maxWidth: 120,
          mx: "auto",
          justifyContent: "center",
          alignItems: "center",
        }}>
        {twitter && (
          <A
            css={{
              "&:not(:last-of-type)": { mr: "$3" },
              color: "$hiContrast",
              fontSize: "$3",
              transition: "color .15s",
              "&:hover": { color: "$violet9" },
            }}
            href={twitter}
            target="_blank"
            rel="noopener noreferrer">
            <FaTwitter />
          </A>
        )}
        {linkedin && (
          <A
            css={{
              "&:not(:last-of-type)": { mr: "$3" },
              color: "$hiContrast",
              fontSize: "$3",
              transition: "color .15s",
              "&:hover": { color: "$violet9" },
            }}
            href={linkedin}
            target="_blank"
            rel="noopener noreferrer">
            <FaLinkedin />
          </A>
        )}
        {medium && (
          <A
            css={{
              "&:not(:last-of-type)": { mr: "$3" },
              color: "$hiContrast",
              fontSize: "$3",
              transition: "color .15s",
              "&:hover": { color: "$violet9" },
            }}
            href={medium}
            target="_blank"
            rel="noopener noreferrer">
            <FaMedium />
          </A>
        )}
        {github && (
          <A
            css={{
              "&:not(:last-of-type)": { mr: "$3" },
              color: "$hiContrast",
              fontSize: "$3",
              transition: "color .15s",
              "&:hover": { color: "$violet9" },
            }}
            href={github}
            target="_blank"
            rel="noopener noreferrer">
            <FaGithub />
          </A>
        )}
      </Flex>
    </Box>
  );
}

Footer = (props: Props) => {
  const whiteLabel = isWhiteLabel();

  return (
    <footer
      role="contentinfo"
      className={classnames('position-relative text-white', styles.footer, {
        [styles.invisibleFooter]: props.isHidden,
      })}
    >
      <div className={styles.mainFooter}>
        <div className={classnames('container-lg px-4', { invisible: props.isHidden })}>
          {!whiteLabel ? (
            <>
              <div
                className={`d-flex flex-row flex-wrap align-items-stretch justify-content-between ${styles.footerContent}`}
              >
                <div>
                  <div className="h6 fw-bold text-uppercase">Project</div>
                  <div className="d-flex flex-column text-start">
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="/docs"
                      label="Open documentation"
                      target="_self"
                    >
                      Documentation
                    </ExternalLink>
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="https://blog.artifacthub.io/blog/"
                      label="Open blog"
                    >
                      Blog
                    </ExternalLink>
                    <Link
                      className={`mb-1 ${styles.link}`}
                      to={{
                        pathname: '/stats',
                      }}
                    >
                      Statistics
                    </Link>
                  </div>
                </div>

                <div>
                  <div className="h6 fw-bold text-uppercase">Community</div>
                  <div className="d-flex flex-column text-start">
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="https://github.com/artifacthub/hub"
                      label="Open GitHub"
                    >
                      <div className="d-flex align-items-center">
                        <FaGithub className="me-2" />
                        GitHub
                      </div>
                    </ExternalLink>
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="https://cloud-native.slack.com/channels/artifact-hub"
                      label="Open Slack channel"
                    >
                      <div className="d-flex align-items-center">
                        <FaSlack className="me-2" />
                        Slack
                      </div>
                    </ExternalLink>
                    <ExternalLink
                      className={`mb-1 ${styles.link}`}
                      href="https://twitter.com/cncfartifacthub"
                      label="Open Twitter"
                    >
                      <div className="d-flex align-items-center">
                        <FaTwitter className="me-2" />
                        Twitter
                      </div>
                    </ExternalLink>
                  </div>
                </div>

                <div className={styles.fullMobileSection}>
                  <div className="h6 fw-bold text-uppercase">About</div>
                  <div className={styles.copyrightContent}>
                    Artifact Hub is an <b className="d-inline-block">Open Source</b> project licensed under the{' '}
                    <ExternalLink
                      className={`d-inline-block mb-1 ${styles.linkInText}`}
                      href="https://www.apache.org/licenses/LICENSE-2.0"
                      label="Open Apache License 2.0 documentation"
                    >
                      <div className="d-flex align-items-center">
                        Apache License 2.0
                        <span className={styles.smallIcon}>
                          <FiExternalLink className="ms-1" />
                        </span>
                      </div>
                    </ExternalLink>
                  </div>
                </div>

                <div className={`ms-0 ms-lg-auto mt-3 mt-lg-0 text-center ${styles.fullMobileSection}`}>
                  <div className="d-flex flex-column align-items-center h-100">
                    <div className={styles.hexagon}>
                      <FiHexagon />
                    </div>
                    <div className="mt-2 mt-lg-4">
                      <small>
                        <span className="d-none d-sm-inline me-1">Copyright</span>© The Artifact Hub Authors
                      </small>
                    </div>
                  </div>
                </div>
              </div>
            </>
          ) : (
            <ExternalLink href="https://artifacthub.io" label="Artifact Hub site">
              <div className="d-flex flex-column align-items-center">
                <small className="mb-2 text-light">Powered by</small>
                <img
                  className={styles.AHlogo}
                  src="https://artifacthub.io/static/media/logo/artifacthub-brand-white.svg"
                  alt="Logo Artifact Hub"
                />
              </div>
            </ExternalLink>
          )}
        </div>
      </div>
      {!whiteLabel && (
        <div className={`text-center py-2 px-3 px-md-4 ${styles.trademark} trademark`}>
          <small className="opacity-75">
            © 2022{' '}
            <ExternalLink className="opacity-100 text-white" href="https://linuxfoundation.org/">
              The Linux Foundation
            </ExternalLink>
            . All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of
            trademarks of The Linux Foundation, please see our{' '}
            <ExternalLink className="opacity-100 text-white" href="https://linuxfoundation.org/trademark-usage">
              Trademark Usage
            </ExternalLink>{' '}
            page.
          </small>
        </div>
      )}
    </footer>
  );
}

function Footer ({size}) {
  const [css, theme] = useStyletron()
  return (
    <div
      className={css({
        backgroundColor: theme.colors.primaryB,
        width: 100,
        paddingTop: theme.sizing.scale800,
        paddingBottom: theme.sizing.scale800,
        boxShadow: 'rgb(0 0 0 / 8%) 0px -1px 0px',
      })}
    >
      <Grid
        behavior={BEHAVIOR.fixed}
        gridGaps={20}
        gridColumns={[6, 6, 12, 12]}
      >
        <Cell
          span={6}
          overrides={{
            Cell: {
              style: {
                display: 'flex !important',
                flexDirection: 'column',
                alignItems: size.width <= 1136 ? 'center' : 'flex-start',
              },
            },
          }}
        >
          <LabelSmall className={css({color: theme.colors.contentPrimary})}>
            {process.env.NEXT_PUBLIC_COPYRIGHT_TEXT}
          </LabelSmall>
          <div style={{marginTop: 10}}>
            { process.env.NEXT_PUBLIC_TWITTER && process.env.NEXT_PUBLIC_TWITTER != "" &&
            <a href={`${process.env.NEXT_PUBLIC_TWITTER}`} target='_blank'>
              <FaTwitter
                style={{width: 30, height: 30}}
                color={theme.colors.contentPrimary}
              />
            </a>
            }
            { process.env.NEXT_PUBLIC_INSTAGRAM && process.env.NEXT_PUBLIC_INSTAGRAM != "" &&
            <a href={`${process.env.NEXT_PUBLIC_INSTAGRAM}`} target='_blank'>
              <FaInstagram
                href={process.env.NEXT_PUBLIC_INSTAGRAM}
                style={{width: 30, height: 30, marginLeft: 10}}
                color={theme.colors.contentPrimary}
              />
            </a>}
            { process.env.NEXT_PUBLIC_GITHUB && process.env.NEXT_PUBLIC_GITHUB != "" &&
              <a href={`${process.env.NEXT_PUBLIC_GITHUB}`} target='_blank'>
              <FaGithub
                style={{width: 30, height: 30, marginLeft: 10}}
                color={theme.colors.contentPrimary}
              />
            </a>}
          </div>
        </Cell>
        <Cell
          span={6}
          overrides={{
            Cell: {
              style: {
                display: 'flex !important',
                flexDirection: 'column',
                alignItems: size.width <= 1136 ? 'center' : 'flex-end',
              },
            },
          }}
        >
          <LabelSmall className={css({color: theme.colors.contentPrimary})}>
            Created with OpenSea whitelable template
          </LabelSmall>
          <div style={{marginTop: 10}} />
          <a
            href='https://github.com/nawangwe/opensea-whitelabel-website-template'
            target='_blank'
          >
            <FaGithub
              style={{width: 30, height: 30}}
              color={theme.colors.contentPrimary}
            />
          </a>
        </Cell>
      </Grid>
    </div>
  )
}

HomeView = (props: Props) => {
  const history = useHistory();
  const sampleQueries = getSampleQueries();
  const [isLoadingStats, setIsLoadingStats] = useState(false);
  const [stats, setStats] = useState<Stats | null>(null);
  const [openTips, setOpenTips] = useState<boolean>(false);

  const whiteLabel = isWhiteLabel();

  useEffect(() => {
    setIsLoadingStats(true);
    async function fetchStats() {
      try {
        setStats(await API.getStats());
      } catch {
        setStats(null);
      } finally {
        setIsLoadingStats(false);
      }
    }
    fetchStats();
  }, []);

  useEffect(() => {
    if (props.onOauthFailed) {
      history.replace({
        pathname: '/',
        search: '',
      });
      alertDispatcher.postAlert({
        type: 'danger',
        message: 'Authentication process failed. Please try again later.',
        autoClose: false,
      });
    }
  }, [props.onOauthFailed, history]);

  return (
    <div className="d-flex flex-column flex-grow-1 bg-white home">
      <div className={`jumbotron mb-0 text-center border-0 ${styles.jumbotron}`}>
        <div
          role="banner"
          aria-label="Find, install and publisher Kubernetes packages"
          className={`display-4 text-center fw-light d-block d-xxl-flex justify-content-center noFocus ${styles.mainTitle}`}
          id="content"
          tabIndex={-1}
        >
          Find, install and publish
          <br />
          <span className={styles.secondLine}>Kubernetes packages</span>
        </div>

        <div className="mt-5 text-center">
          <SearchBar
            formClassName={`m-auto w-50 ${styles.search}`}
            size="big"
            isSearching={props.isSearching}
            openTips={openTips}
            setOpenTips={setOpenTips}
          />
          <SearchTipsModal size="big" openTips={openTips} setOpenTips={setOpenTips} />
          <SearchTip />

          <div className="d-inline-block d-md-none text-center mt-3">
            - or -
            <Link
              className={`btn btn-link textLighter fw-bold py-0 pb-1 ps-1 ${styles.allPkgBtn}`}
              to={{
                pathname: '/packages/search',
              }}
              aria-label="Browse all packages"
            >
              browse all packages
            </Link>
          </div>

          <div className="d-none d-md-inline-block text-center mt-5">
            {sampleQueries.length > 0 ? <>You can also </> : <>Or you can also </>}
            <Link
              className="btn btn-link textLighter fw-bold py-0 pb-1 ps-1 pe-0"
              to={{
                pathname: '/packages/search',
              }}
              aria-label="Browse all packages"
            >
              browse all packages
            </Link>{' '}
            {sampleQueries.length > 0 ? (
              <span className="ms-3">
                - or - <span className="ms-3">try one of the sample queries:</span>
              </span>
            ) : (
              <>.</>
            )}
          </div>

          <div className="d-none d-md-flex flex-row align-items-end justify-content-center flex-wrap">
            <SampleQueries lineBreakIn={3} className="bg-secondary border-light" />
          </div>
        </div>

        <div className="d-flex align-items-center justify-content-center mt-4 mt-md-5">
          <Counter isLoading={isLoadingStats} value={isNull(stats) ? null : stats.packages} name="packages" />
          <div className={`mx-3 mx-md-5 separator ${styles.separator}`} />
          <Counter isLoading={isLoadingStats} value={isNull(stats) ? null : stats.releases} name="releases" />
        </div>

        {!whiteLabel && (
          <>
            <div className={`text-center h5 my-4 mt-md-5 ${styles.legend}`}>
              Artifact Hub is an <b>Open Source</b> project
            </div>

            <div className="d-flex flex-row align-items-center justify-content-center flex-wrap">
              <ExternalLink
                className={`btn btn-secondary mb-4 mb-md-2 ${styles.socialBtn}`}
                href="https://github.com/artifacthub/hub"
                label="Open GitHub link"
              >
                <div className="d-flex align-items-center justify-content-center">
                  <FaGithub className="me-2" />
                  GitHub
                </div>
              </ExternalLink>

              <ExternalLink
                className={`btn btn-secondary ms-2 ms-md-3 mb-4 mb-md-2 ${styles.socialBtn}`}
                href="https://cloud-native.slack.com/channels/artifact-hub"
                label="Open Slack channel"
              >
                <div className="d-flex align-items-center justify-content-center">
                  <FaSlack className="me-2" />
                  Slack
                </div>
              </ExternalLink>

              <ExternalLink
                className={`btn btn-secondary ms-2 ms-md-3 mb-4 mb-md-2 ${styles.socialBtn}`}
                href="https://twitter.com/cncfartifacthub"
                label="Open Twitter link"
              >
                <div className="d-flex align-items-center justify-content-center">
                  <FaTwitter className="me-2" />
                  Twitter
                </div>
              </ExternalLink>
            </div>

            <div className={`text-center mx-3 mt-md-4 mb-4 fw-light ${styles.repoGuideText}`}>
              Please see the{' '}
              <ExternalLink
                className={`btn btn-link text-light fw-bold textLight p-0 align-baseline ${styles.inlineLink}`}
                href="/docs/topics/repositories"
                label="Open documentation"
              >
                repositories guide
              </ExternalLink>{' '}
              for more information about how to list your content on Artifact Hub.
            </div>
          </>
        )}
      </div>

      <RandomPackages />

      {!whiteLabel && (
        <>
          <div className={`py-5 textLight fs-4 fw-light ${styles.about}`}>
            <div className="container-lg px-4 px-sm-0 py-0 py-md-5">
              <div className="text-center px-3 px-xs-0">
                Artifact Hub is a web-based application that enables finding, installing, and publishing packages and
                configurations for CNCF projects. For example, this could include Helm charts and plugins, Falco
                configurations, Open Policy Agent (OPA) policies, OLM operators, Tinkerbell actions, kubectl plugins,
                Tekton tasks and pipelines, KEDA scalers, CoreDNS plugins, Keptn integrations and container images.
                <div className="mx-0 mx-md-3 mx-lg-5 my-4 my-sm-5 d-flex flex-row align-items-stretch justify-content-around">
                  <ExternalLink href="https://helm.sh" className={`col ${styles.iconLink}`} label="Open Helm site">
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.Helm} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small className="text-nowrap">Helm charts and plugins</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink href="https://falco.org" className={`col ${styles.iconLink}`} label="Open Falco site">
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.Falco} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>Falco rules</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink
                    href="https://www.openpolicyagent.org"
                    className={`col ${styles.iconLink}`}
                    label="Open Open Policy Agent site"
                  >
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.OPA} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>OPA policies</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink
                    href="https://github.com/operator-framework"
                    className={`col ${styles.iconLink}`}
                    label="Open Operator framework site"
                  >
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.OLM} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>OLM operators</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink
                    href="https://tinkerbell.org"
                    className={`col ${styles.iconLink}`}
                    label="Open Tinkerbell site"
                  >
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.TBAction} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>Tinkerbell actions</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink
                    href="https://krew.sigs.k8s.io"
                    className={`col ${styles.iconLink}`}
                    label="Open Krew site"
                  >
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.Krew} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>Kubectl plugins</small>
                      </div>
                    </div>
                  </ExternalLink>
                </div>
                <div className="mx-0 mx-md-3 mx-lg-5 my-4 my-sm-5 d-flex flex-row align-items-stretch justify-content-around">
                  <ExternalLink href="https://tekton.dev" className={`col ${styles.iconLink}`} label="Open Tekton site">
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.TektonTask} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>Tekton tasks and pipelines</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink href="https://keda.sh" className={`col ${styles.iconLink}`} label="Open KEDA site">
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.KedaScaler} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>KEDA scalers</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink
                    href="https://coredns.io"
                    className={`col ${styles.iconLink}`}
                    label="Open CoreDNS site"
                  >
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.CoreDNS} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>CoreDNS plugins</small>
                      </div>
                    </div>
                  </ExternalLink>

                  <ExternalLink href="https://keptn.sh" className={`col ${styles.iconLink}`} label="Open Keptn site">
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.Keptn} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>Keptn integrations</small>
                      </div>
                    </div>
                  </ExternalLink>
                  <ExternalLink
                    href="https://opencontainers.org"
                    className={`col ${styles.iconLink}`}
                    label="Open Container Initiative site"
                  >
                    <div className="d-flex flex-column justify-content-between align-items-center h-100">
                      <RepositoryIcon kind={RepositoryKind.Container} type="white" className={styles.aboutIcon} />
                      <div className={`d-none d-sm-block text-light mt-2 ${styles.legendIcon}`}>
                        <small>Container images</small>
                      </div>
                    </div>
                  </ExternalLink>
                </div>
                Discovering artifacts to use with CNCF projects can be difficult. If every CNCF project that needs to
                share artifacts creates its own Hub this creates a fair amount of repeat work for each project and a
                fractured experience for those trying to find the artifacts to consume. The Artifact Hub attempts to
                solve that by providing a single experience for consumers that any CNCF project can leverage.
              </div>
            </div>
          </div>

          <div className="py-5 text-dark fs-4 fw-light">
            <div className="container-lg px-sm-4 px-lg-0 py-0 py-md-5">
              <div className="text-center px-4 px-xs-0">
                <img
                  className={`${styles.logo} homeLogo`}
                  src="/static/media/cncf-sandbox-horizontal-color.png"
                  alt="Logo CNCF sandbox project"
                />
                <div className="px-3 pt-4">
                  Artifact Hub is a{' '}
                  <ExternalLink
                    href="https://www.cncf.io/sandbox-projects/"
                    className="fw-bold text-dark"
                    label="Open CNCF sandbox projects site"
                  >
                    Cloud Native Computing Foundation
                  </ExternalLink>{' '}
                  sandbox project.
                </div>
              </div>
            </div>
          </div>
        </>
      )}

      <UserConfirmation emailCode={props.emailCode} />
      <AccountDeletion code={props.deleteCode} />
      <UserInvitation orgToConfirm={props.orgToConfirm} />
      <ResetPasswordModal code={props.resetPwdCode} />
    </div>
  );
}

export function PageFooter() {
  return (
    <SimpleGrid
      flexDirection="column-reverse"
      gridTemplateColumns={["1fr", "1fr", "1fr 1fr", "1fr 1fr"]}
      borderTopWidth={2}
      mt="30px"
      borderTopColor="gray.900"
      pt="20px"
    >
      <Box d={["block", "block", "none", "none"]} mb="30px">
        <FooterSignup />
      </Box>
      <Box>
        <SimpleGrid columns={[1, 1, 2, 2]}>
          <Stack mb={["10px", "10px", 0, 0]}>
            <Text as="span">
              <ExternalFooterLink
                href={`mailto:${siteConfig.author.email}`}
                text="Contact us"
              />
            </Text>
            <Text as="span">
              <ExternalFooterLink
                href={siteConfig.repo.url}
                text="Contribute"
              />
            </Text>
            <Text as="span">
              <InternalFooterLink
                href="/projects"
                text="Open source projects"
              />
            </Text>
          </Stack>
          <Stack>
            <Text as="span">
              <Popover placement="top">
                <PopoverTrigger>
                  <Text
                    as="span"
                    _focus={{ outline: "none", boxShadow: "none" }}
                    fontWeight={500}
                    color="gray.500"
                    cursor="pointer"
                    _hover={{ color: "gray.600", textDecoration: "none" }}
                  >
                    Social Accounts
                  </Text>
                </PopoverTrigger>
                <Portal>
                  <PopoverContent>
                    <PopoverArrow />
                    <PopoverCloseButton />
                    <PopoverBody>
                      <Stack
                        as="footer"
                        isInline
                        spacing={[1, 2]}
                        justifyContent="center"
                        alignItems="center"
                      >
                        <ExternalSocialLink
                          href={siteConfig.author.github}
                          icon={<FaGithub />}
                          type="gray"
                          label="Github Account"
                        />
                        <ExternalSocialLink
                          href={siteConfig.author.dev}
                          icon={<FaDev />}
                          type="gray"
                          label="Dev Account"
                        />
                        <ExternalSocialLink
                          href={siteConfig.author.linkedin}
                          icon={<FaLinkedin />}
                          type="linkedin"
                          label="LinkedIn Account"
                        />
                        <ExternalSocialLink
                          href={siteConfig.author.twitter}
                          icon={<FaTwitter />}
                          type="twitter"
                          label="Twitter Account"
                        />
                        <ExternalSocialLink
                          href={siteConfig.author.quora}
                          icon={<FaQuora />}
                          type="red"
                          label="Quora Account"
                        />
                      </Stack>
                    </PopoverBody>
                  </PopoverContent>
                </Portal>
              </Popover>
            </Text>

            <Text as="span">
              <ExternalFooterLink
                href={`mailto:${siteConfig.author.email}`}
                text="Sponsor"
              />
            </Text>
            <Text as="span">
              <ExternalFooterLink
                href={"/#faqs"}
                isExternal={false}
                text="FAQs"
              />
            </Text>
          </Stack>
        </SimpleGrid>
        <Text mt="20px" color="gray.500">
          Made with ? by{" "}
          <ChakraLink
            _focus={{ boxShadow: "none", outline: "none" }}
            target="_blank"
            href={siteConfig.author.github}
            fontWeight={600}
            color={"gray.400"}
            bgClip="text"
            bgGradient="linear(to-l, #7928CA,#FF0080)"
            _hover={{
              bgGradient: "linear(to-r, red.500, yellow.500)"
            }}
          >
            Muhammad Ahmad
          </ChakraLink>{" "}
        </Text>
      </Box>
      <Box d={["none", "none", "block", "block"]}>
        <FooterSignup />
      </Box>
    </SimpleGrid>
  );
}

IndexPage: React.FunctionComponent<PageProps> = () => {
  const { isLoggedIn } = useAuth();
  return (
    <Layout>
      <SEO />

      <Heading mt={12} fontSize="50px">
        Contact Tracing
      </Heading>

      <Lead>Keep the ones you love informed if you fall ill.</Lead>

      <Button
        variantColor="teal"
        size="lg"
        onClick={() => {
          if (!isLoggedIn) {
            navigate(`/me/sign-in?next=/me/share`);
          } else {
            navigate(`/me/share`);
          }
        }}
      >
        Share your free profile
      </Button>

      <Box maxWidth="40em" mt={8} mb={12}>
        <P>
          Keeping everyone up-to-date if you fall ill is tricky. You have to
          remember who you met. They have to remember who they met after meeting
          you.
        </P>
        <P>
          In one click, Contact Tracing App notifies your recent direct and
          indirect contacts if you log that you show symptoms or test positive,
          so everyone can act appropriately and we can help limit the spread of
          COVID-19.
        </P>
      </Box>

      <ResponsiveContainer>
        <Box
          as="iframe"
          position="absolute"
          top={0}
          left={0}
          width="100%"
          height="100%"
          src="https://www.youtube-nocookie.com/embed/Xid1f5F3ogI"
          frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
        />
      </ResponsiveContainer>

      <Box maxWidth="40em" mt={12}>
        <P>#KeepTracingCOVID19</P>
        <Heading as="h2" mt={12} mb={4} size="xl">
          How it works
        </Heading>
        <List styleType="disc">
          <ListItem>
            Log Contact - Digital Logbook that makes it easier to trace who you
            met.
          </ListItem>
          <ListItem>
            Notify your loved one if you fall ill with no hassle.
          </ListItem>
          <ListItem>
            Get notified when one of your family and friends (and their
            contacts) shows symptoms, or tested positive.
          </ListItem>
          <ListItem>Your risk level - based on contacts around you.</ListItem>
        </List>

        <Heading as="h2" mt={12} mb={4} size="xl">
          What's next for "Contact Tracing"
        </Heading>
        <List styleType="disc">
          <ListItem>Location Logging - Checkin.</ListItem>
          <ListItem>Users’ Risk Levels.</ListItem>
          <ListItem>i18n</ListItem>
          <ListItem>UX/UI Improvements.</ListItem>
          <ListItem>UNative Mobile App.</ListItem>
        </List>

        <Box p={[5, 10]} my={12} shadow="sm" borderWidth="1px">
          <Heading as="h2" mb={4} size="xl">
            Help us spread the word
          </Heading>
          <P>
            The more users, connections, and logging we do, the better Contact
            Tracing will be. Help us spread the word and build and grow.
          </P>

          <Stack mt={8} isInline>
            <Box>
              <a href="https://www.facebook.com/ContactTracingApp/">
                {<FaFacebook />}
              </a>
            </Box>
            <Box>
              <a href="https://www.instagram.com/contacttracing.app/">
                {<FaInstagram />}
              </a>
            </Box>
            <Box>
              <a href="https://twitter.com/ContactTracing_">{<FaTwitter />}</a>
            </Box>
          </Stack>

          <Button
            mt={8}
            variantColor="teal"
            size="sm"
            onClick={() => {
              if (!isLoggedIn) {
                navigate(`/me/sign-in?next=/me/share`);
              } else {
                navigate(`/me/share`);
              }
            }}
          >
            Share your Profile
          </Button>
        </Box>
        <Heading as="h2" mt={12} mb={4} size="xl">
          About the team
        </Heading>
        <Heading as="h3" mt={12} mb={4} size="md">
          Background
        </Heading>
        <P>
          In the light of COVID-19, Michele and I have been asking each other
          “how can we help?”, “what can we do to help?”, “How can we protect our
          loved ones?”
        </P>
        <P>
          Hoping to keep people safe and limit the spread of COVID-19, we
          decided to work on “Contact Tracing”. The concept is simple - if we
          get infected, we want to be able to notify family, friends, and
          everyone we’ve seen in the past two weeks (or even past month) as
          quickly as possible, likewise. So everyone can act appropriately,
          either get tested or stay isolated.
        </P>
        <P>
          It all started in our 35sqm flat in London - our weekend hack (which
          has already taken weekends and weekdays).
        </P>
        <Heading as="h3" mt={12} mb={4} size="md">
          Our aims
        </Heading>
        <List styleType="disc">
          <ListItem>To protect our loved ones.</ListItem>
          <ListItem>To help limit the spread of COVID-19.</ListItem>
        </List>
        <Heading as="h3" mt={12} mb={4} size="md">
          Founding Members
        </Heading>

        <Stack spacing={2}>
          <Box>
            <Flex height={12} width="auto" alignItems="center">
              <Avatar name="Ponk Memoli" src={ponk} />
              <Box
                ml="2"
                mt="1"
                fontWeight="semibold"
                as="h4"
                lineHeight="tight"
                isTruncated
              >
                Ponk Memoli
              </Box>
            </Flex>
          </Box>
          <Box>
            <Flex height={12} width="auto" alignItems="center">
              <Avatar name="Michele Memoli" src={michele} />
              <Box
                ml="2"
                mt="1"
                fontWeight="semibold"
                as="h4"
                lineHeight="tight"
                isTruncated
              >
                Michele Memoli
              </Box>
            </Flex>
          </Box>
        </Stack>

        <Stack spacing={2}>
          <Box>
            <Flex height={12} width="auto" alignItems="center">
              <Avatar name="Ponk Memoli" src={ponk} />
              <Box
                ml="2"
                mt="1"
                fontWeight="semibold"
                as="h4"
                lineHeight="tight"
                isTruncated
              >
                Ponk Memoli
              </Box>
            </Flex>
          </Box>
          <Box>
            <Flex height={12} width="auto" alignItems="center">
              <Avatar name="Michele Memoli" src={michele} />
              <Box
                ml="2"
                mt="1"
                fontWeight="semibold"
                as="h4"
                lineHeight="tight"
                isTruncated
              >
                Michele Memoli
              </Box>
            </Flex>
          </Box>
        </Stack>

        <Heading as="h4" mt={12} mb={4} size="sm">
          Contributors
        </Heading>
        <List styleType="disc">
          <ListItem>Kumar Rangasamy</ListItem>
          <ListItem>Yogen (Fira Cloud Tech)</ListItem>
          <ListItem>Juntima Nawilaijaroen</ListItem>
          <ListItem>Max Sarasri</ListItem>
          <ListItem>Vero Rebagliatte</ListItem>
          <ListItem>Phark Lertchanyakul</ListItem>
          <ListItem>Sunhaporn Sribanditmongkol</ListItem>
          <ListItem>Panos Kollias</ListItem>
          <ListItem>Longyu Guan</ListItem>
          <ListItem>Lisa Bang</ListItem>
          <ListItem>Jenny Park</ListItem>
          <ListItem>Mudhafar Ormzyar</ListItem>
          <ListItem>Kevin Amick</ListItem>
          <ListItem>Bruno Caldeira</ListItem>
          <ListItem>Furkan Kurtay</ListItem>
        </List>

        <Heading as="h4" mt={12} mb={4} size="sm">
          Cloud providers
        </Heading>
        <P>
          These guys helped us out by giving us free credits to build on their
          infrastructure:
        </P>
        <List styleType="disc">
          <ListItem>Neo4j</ListItem>
          <ListItem>DigitialOcean</ListItem>
          <ListItem>Twilio</ListItem>
        </List>
      </Box>
    </Layout>
  );
}