dev: initial attempt

2025-10-15 07:32:19 +09:00 · 2022-06-07 13:30:48 +09:00
parent 09f2755410
commit 4ff733e148
63 changed files with 1239 additions and 8090 deletions
--- a/components/Contributors.tsx
+++ b/components/Contributors.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import useSWR from 'swr';
+import Tooltip from 'rc-tooltip';
+
+export interface IContributors {
+  projectName: string;
+  projectOwner: string;
+  repoType: string;
+  repoHost: string;
+  files: string[];
+  imageSize: number;
+  commit: boolean;
+  commitConvention: string;
+  contributors: Contributor[];
+  contributorsPerLine: number;
+  skipCi: boolean;
+}
+
+export interface Contributor {
+  login: string;
+  name: string;
+  avatar_url: string;
+  profile: string;
+  contributions: string[];
+}
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+const Contributors: React.FC = () => {
+  const { data } = useSWR<IContributors>(
+    'https://raw.githubusercontent.com/uetchy/namae/master/.all-contributorsrc',
+    fetcher
+  );
+
+  if (!data) return <Container>Loading</Container>;
+
+  return (
+    <Container>
+      {data.contributors.map((contributor) => (
+        <Tooltip
+          key={contributor.login}
+          overlay={`${contributor.name} (${contributor.contributions.join(
+            ', '
+          )})`}
+          placement="top"
+          trigger={['hover']}
+        >
+          <Item key={contributor.login}>
+            <a
+              href={contributor.profile}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Avatar src={contributor.avatar_url} alt={contributor.name} />
+            </a>
+          </Item>
+        </Tooltip>
+      ))}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
+
+const Item = styled.div`
+  margin-right: 10px;
+`;
+
+const avatarSize = 32;
+const Avatar = styled.img`
+  border-radius: ${avatarSize}px;
+`;
+Avatar.defaultProps = { width: avatarSize, height: avatarSize };
+
+export default Contributors;
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -0,0 +1,304 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { FaGithub, FaProductHunt, FaTwitter } from 'react-icons/fa';
+import { GoHeart } from 'react-icons/go';
+import styled from '@emotion/styled';
+import Contributors from '../components/Contributors';
+import { Section } from '../src/theme';
+import { tablet } from '../src/util/css';
+
+const Footer: React.FC = () => {
+  return (
+    <Container>
+      <Languages />
+      <Community />
+      <About />
+    </Container>
+  );
+};
+export default Footer;
+
+const Languages = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Pane style={{ whiteSpace: 'nowrap' }}>
+      <Title>{t('language')}</Title>
+      <ul>
+        <li>
+          <a href="/?lng=en">English</a>
+        </li>
+        <li>
+          <a href="/?lng=de">Deutsch</a>
+        </li>
+        <li>
+          <a href="/?lng=fr">Français</a>
+        </li>
+        <li>
+          <a href="/?lng=ja">日本語</a>
+        </li>
+        <li>
+          <a href="/?lng=zh-Hans">简体中文</a>
+        </li>
+        <li>
+          <a href="/?lng=zh-Hant">繁體中文</a>
+        </li>
+        <li>
+          <a href="/?lng=pt-BR">Português-BR</a>
+        </li>
+        <li>
+          <a href="/?lng=es">Español</a>
+        </li>
+        <li>
+          <a href="/?lng=it">Italiano</a>
+        </li>
+        <li>
+          <a href="/?lng=ru">Русский</a>
+        </li>
+        <li>
+          <a href="/?lng=nl">Nederlands</a>
+        </li>
+        <li>
+          <a href="/?lng=id">Bahasa Indonesia</a>
+        </li>
+      </ul>
+    </Pane>
+  );
+};
+
+const Community = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Pane>
+      <Title>{t('community')}</Title>
+      <ul>
+        <li>
+          <a
+            href="https://github.com/uetchy/namae"
+            aria-label="Go to GitHub repository"
+            target="_blank"
+            rel="noreferrer"
+          >
+            GitHub
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://github.com/uetchy/namae/issues"
+            aria-label="Go to GitHub Issues"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('issues')}
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://dev.to/uetchy/give-your-app-slick-name-with-namae-dev-5c4h"
+            aria-label="Go to blog"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('blog')}
+          </a>
+        </li>
+      </ul>
+      <Box>
+        <Subtitle>{t('contributors')} ✨</Subtitle>
+        <Contributors />
+        <Subtext>
+          <Trans i18nKey="join-us">
+            Send
+            <a
+              href="https://github.com/uetchy/namae"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              a pull request
+            </a>
+            and become a contributor!
+          </Trans>
+        </Subtext>
+      </Box>
+    </Pane>
+  );
+};
+
+const About = () => {
+  const { t } = useTranslation();
+  const {
+    i18n: { language },
+  } = useTranslation();
+
+  return (
+    <Pane>
+      <Title>{t('about')}</Title>
+      <p>
+        Made with{'  '}
+        <span role="img" aria-label="coffee">
+          ☕️
+        </span>{' '}
+        by{' '}
+        <a
+          href="https://twitter.com/uechz"
+          aria-label="Author page"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <Bold>Yasuaki Uechi</Bold>
+        </a>
+      </p>
+      <ShareBox>
+        <Links>
+          <a
+            href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
+              `namae — ${t('title')}`
+            )}&url=${encodeURIComponent('https://namae.dev')}`}
+            aria-label="Tweet this page"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FaTwitter />
+          </a>
+          <a
+            href="https://www.producthunt.com/posts/namae"
+            aria-label="Go to ProductHunt page"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FaProductHunt />
+          </a>
+          <a
+            href="https://github.com/uetchy/namae"
+            aria-label="Go to GitHub repository"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FaGithub />
+          </a>
+          <a
+            href="https://github.com/sponsors/uetchy"
+            aria-label="Go to GitHub Sponsors"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <SponsorBadge>
+              <GoHeart size="1.3em" />
+              <span>Sponsor</span>
+            </SponsorBadge>
+          </a>
+        </Links>
+      </ShareBox>
+
+      {language === 'ja' ? (
+        <>
+          <br />
+          <Subtitle>情報の取得元</Subtitle>
+          <p>
+            このサービスは、国税庁法人番号システムのWeb-API機能を利用して取得した情報をもとに作成していますが、サービスの内容は国税庁によって保証されたものではありません。
+          </p>
+        </>
+      ) : null}
+    </Pane>
+  );
+};
+
+const Container = styled(Section)`
+  --text: #bdbdbd;
+  --background: #150c30;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background: var(--background);
+  color: var(--text);
+
+  a {
+    color: var(--text);
+    text-decoration: none;
+  }
+
+  ul {
+    li {
+      list-style-type: none;
+    }
+  }
+
+  ${tablet} {
+    flex-direction: column;
+  }
+`;
+
+const Pane = styled.div`
+  margin: 0 20px;
+  font-size: 1rem;
+
+  ${tablet} {
+    margin-bottom: 50px;
+  }
+`;
+
+const Box = styled.div`
+  margin: 15px 0;
+`;
+
+const Title = styled.h3`
+  margin-bottom: 15px;
+`;
+
+const Subtitle = styled.h4`
+  margin-bottom: 12px;
+`;
+
+const Subtext = styled.span`
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.5);
+`;
+
+const Links = styled.div`
+  display: flex;
+  align-items: center;
+
+  a {
+    margin-right: 10px;
+  }
+`;
+
+const ShareBox = styled.div`
+  margin-top: 15px;
+  line-height: 1em;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+`;
+const Bold = styled.span`
+  font-weight: bold;
+`;
+
+const SponsorBadge = styled.div`
+  padding: 5px 13px 5px 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 1rem;
+  font-size: 1rem;
+
+  border-radius: 5px;
+  background-color: #f8f9fa;
+  color: black;
+  cursor: pointer;
+
+  transition: opacity 200ms ease-out;
+
+  :hover {
+    opacity: 0.8;
+  }
+
+  svg {
+    color: rgb(236, 69, 171);
+    margin-right: 5px;
+  }
+`;
--- a/components/Form.tsx
+++ b/components/Form.tsx
@@ -0,0 +1,150 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { useStoreActions } from '../store';
+import { sendQueryEvent } from '../src/util/analytics';
+import { mobile } from '../src/util/css';
+import { useDeferredState } from '../src/util/hooks';
+import { sanitize } from '../src/util/text';
+import Suggestion from './Suggestion';
+
+const Form: React.FC<{
+  initialValue?: string;
+  useSuggestion?: boolean;
+}> = ({ initialValue = '', useSuggestion = true }) => {
+  const router = useRouter();
+  const reset = useStoreActions((actions) => actions.stats.reset);
+  const [inputValue, setInputValue] = useState(initialValue);
+  const [suggestionQuery, setSuggestionQuery] = useDeferredState(800, '');
+  const [suggested, setSuggested] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation();
+
+  function search(query: string) {
+    reset();
+    sendQueryEvent(sanitize(query));
+    router.push(`/s/${query}`);
+  }
+
+  // set input value
+  function onInputChange(e: React.FormEvent<HTMLInputElement>): void {
+    setInputValue(e.currentTarget.value);
+  }
+
+  // invoke when user clicked one of the suggested items
+  function onSuggestionCompleted(name: string): void {
+    setInputValue(name);
+    search(name);
+    setSuggested(true);
+  }
+
+  function onSubmitQuery(e: React.FormEvent) {
+    e.preventDefault();
+    inputRef.current!.blur();
+    if (!inputValue || inputValue === '') {
+      return;
+    }
+
+    search(inputValue);
+  }
+
+  useEffect(() => {
+    const modifiedValue = sanitize(inputValue);
+    setSuggestionQuery(modifiedValue);
+  }, [inputValue, setSuggestionQuery]);
+
+  return (
+    <InputContainer>
+      <InputHeader>
+        <Logo href="/">
+          <LogoImage src="/logo.svg" />
+        </Logo>
+      </InputHeader>
+      <form onSubmit={onSubmitQuery} action="/s" role="search">
+        <InputView
+          onChange={onInputChange}
+          value={inputValue}
+          ref={inputRef}
+          placeholder={t('placeholder')}
+          aria-label="Search"
+        />
+      </form>
+      {useSuggestion && !suggested ? (
+        <Suggestion onSubmit={onSuggestionCompleted} query={suggestionQuery} />
+      ) : null}
+    </InputContainer>
+  );
+};
+
+export default Form;
+
+const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px;
+  transform: translateY(40px);
+  border-radius: 50px;
+  box-shadow: 0 10px 50px 0 #858efb;
+  background: #ffffff;
+
+  ${mobile} {
+    padding: 20px;
+    transform: translateY(20px);
+    border-radius: 30px;
+  }
+`;
+
+const InputHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin: 12px 0 5px 0;
+`;
+
+const Logo = styled(Link)`
+  cursor: pointer;
+
+  ${mobile} {
+    font-size: 15px;
+  }
+`;
+
+const LogoImage = styled.img`
+  width: 140px;
+
+  ${mobile} {
+    width: 90px;
+  }
+`;
+
+const InputView = styled.input`
+  width: 100%;
+  border: none;
+  outline: none;
+  text-align: center;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 600;
+  font-size: 6rem;
+  appearance: none;
+
+  ${mobile} {
+    font-size: 2rem;
+  }
+
+  ::placeholder {
+    color: #c8cdda;
+  }
+`;
+InputView.defaultProps = {
+  type: 'search',
+  enterKeyHint: 'search',
+  autoComplete: 'off',
+  autoCorrect: 'off',
+  autoCapitalize: 'off',
+  spellCheck: 'false',
+  autoFocus: true,
+};
--- a/components/Icons.tsx
+++ b/components/Icons.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+
+export const SpectrumIcon: React.FC = () => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 32 32"
+    fill="currentColor"
+    stroke="currentColor"
+    strokeWidth="0"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M6 14.5C6 15.3284 6.67157 16 7.5 16H9C12.866 16 16 19.134 16 23V24.5C16 25.3284 16.6716 26 17.5 26H24.5C25.3284 26 26 25.3284 26 24.5V23C26 13.6111 18.3889 6 9 6H7.5C6.67157 6 6 6.67157 6 7.5V14.5Z" />
+  </svg>
+);
+
+export const NowIcon: React.FC = () => (
+  <svg
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    stroke="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 114 100"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Black-Triangle" transform="translate(-293.000000, -150.000000)">
+      <polygon id="Logotype---Black" points="350 150 407 250 293 250"></polygon>
+    </g>
+  </svg>
+);
+
+export const NetlifyIcon: React.FC = () => (
+  <svg
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    stroke="currentColor"
+    strokeWidth="0"
+    aria-hidden="true"
+    focusable="false"
+    // style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 256 256"
+  >
+    <path d="M185.532 88.839l-.094-.04a.396.396 0 0 1-.154-.087a.734.734 0 0 1-.187-.621l5.167-31.553l24.229 24.209l-25.198 10.709a.555.555 0 0 1-.22.04h-.101a.694.694 0 0 1-.134-.114a11.468 11.468 0 0 0-3.308-2.543zm35.144-1.923l25.906 25.878c5.38 5.381 8.075 8.065 9.057 11.177c.147.46.267.921.361 1.395l-61.913-26.192a4.868 4.868 0 0 0-.1-.04c-.248-.1-.535-.214-.535-.467c0-.254.294-.374.541-.474l.08-.034l26.603-11.243zm34.268 46.756c-1.337 2.51-3.944 5.114-8.355 9.527l-29.209 29.17l-37.777-7.858l-.2-.04c-.335-.054-.689-.114-.689-.414a11.387 11.387 0 0 0-4.378-7.965c-.154-.154-.113-.394-.067-.615c0-.033 0-.066.014-.093l7.105-43.571l.026-.147c.04-.334.1-.721.401-.721a11.566 11.566 0 0 0 7.754-4.44c.06-.067.1-.14.18-.18c.214-.1.468 0 .689.093l64.5 27.254h.006zm-44.28 45.407l-48.031 47.978l8.22-50.475l.014-.067a.905.905 0 0 1 .04-.193c.067-.16.24-.227.408-.294l.08-.034c1.8-.767 3.392-1.95 4.646-3.451c.16-.187.354-.368.601-.401c.064-.01.13-.01.194 0l33.82 6.944l.007-.007zm-58.198 58.133l-5.414 5.408l-59.854-86.408a2.831 2.831 0 0 0-.067-.094c-.093-.127-.194-.253-.173-.4c.006-.107.073-.2.147-.28l.066-.087c.18-.268.335-.535.502-.822l.133-.233l.02-.02c.094-.16.18-.314.341-.401c.14-.067.335-.04.488-.007l66.311 13.66c.186.03.36.105.508.22c.087.088.107.181.127.288a11.735 11.735 0 0 0 6.871 7.845c.187.093.107.3.02.52a1.588 1.588 0 0 0-.1.301c-.835 5.074-8 48.726-9.926 60.51zm-11.309 11.29c-3.99 3.946-6.343 6.035-9.003 6.877a13.382 13.382 0 0 1-8.06 0c-3.115-.989-5.809-3.672-11.19-9.054l-60.108-60.042l15.7-24.323a1 1 0 0 1 .268-.314c.167-.12.408-.066.608 0a16.285 16.285 0 0 0 10.948-.554c.18-.066.361-.113.502.014c.07.064.133.135.187.213l60.148 87.19v-.007zm-94.156-68.008l-13.789-13.773l27.23-11.604a.562.562 0 0 1 .221-.047c.227 0 .361.227.481.434c.274.42.564.83.87 1.229l.086.106c.08.114.027.227-.053.334l-15.04 23.321h-.006zM27.11 160.625L9.665 143.199c-2.968-2.964-5.12-5.114-6.617-6.963l53.043 10.99l.2.033c.328.053.69.113.69.42c0 .334-.395.488-.73.614l-.153.067l-28.988 12.265zM0 127.275a13.34 13.34 0 0 1 .602-3.304c.989-3.112 3.676-5.796 9.063-11.177l22.324-22.3a14524.43 14524.43 0 0 0 30.92 44.647c.18.24.38.507.174.707c-.976 1.075-1.952 2.25-2.64 3.526c-.075.163-.19.306-.335.413c-.087.054-.18.034-.28.014h-.014L0 127.269v.007zm37.965-42.75l30.017-29.984c2.82 1.235 13.087 5.568 22.27 9.44c6.952 2.939 13.288 5.61 15.28 6.477c.2.08.381.16.468.36c.053.12.027.274 0 .401a13.363 13.363 0 0 0 3.496 12.205c.2.2 0 .487-.174.734l-.094.14l-30.478 47.157c-.08.134-.154.247-.288.334c-.16.1-.387.053-.575.007a15.215 15.215 0 0 0-3.629-.494c-1.096 0-2.286.2-3.489.42h-.007c-.133.02-.254.047-.36-.033a1.403 1.403 0 0 1-.301-.34L37.965 84.525zm36.08-36.04l38.86-38.817c5.38-5.375 8.074-8.065 11.188-9.047a13.382 13.382 0 0 1 8.061 0c3.115.982 5.808 3.672 11.189 9.047l8.422 8.413l-27.638 42.756a1.035 1.035 0 0 1-.274.32c-.167.114-.401.067-.602 0a14.028 14.028 0 0 0-12.833 2.471c-.18.187-.448.08-.675-.02c-3.61-1.569-31.682-13.42-35.699-15.122zm83.588-24.542l25.52 25.49l-6.15 38.044v.1a.9.9 0 0 1-.053.254c-.067.133-.201.16-.335.2a12.237 12.237 0 0 0-3.662 1.823a1.029 1.029 0 0 0-.134.113c-.074.08-.147.154-.267.167a.763.763 0 0 1-.288-.047l-38.887-16.504l-.073-.034c-.248-.1-.542-.22-.542-.474a14.664 14.664 0 0 0-2.072-6.109c-.187-.307-.394-.627-.234-.941l27.177-42.082zM131.352 81.4l36.454 15.423c.2.093.421.18.508.387a.707.707 0 0 1 0 .38c-.107.535-.2 1.142-.2 1.757v1.021c0 .254-.261.36-.502.46l-.073.027c-5.775 2.464-81.076 34.538-81.19 34.538c-.113 0-.234 0-.347-.113c-.2-.2 0-.48.18-.735l.094-.133l29.957-46.335l.053-.08c.174-.281.375-.595.696-.595l.3.047c.682.093 1.284.18 1.892.18c4.545 0 8.756-2.21 11.296-5.989c.06-.1.137-.19.227-.267c.18-.133.448-.066.655.027zm-41.748 61.324l82.079-34.965s.12 0 .234.114c.447.447.828.747 1.196 1.028l.18.113c.168.094.335.2.348.374c0 .067 0 .107-.013.167l-7.032 43.144l-.027.174c-.046.333-.093.714-.407.714a11.558 11.558 0 0 0-9.177 5.655l-.034.053c-.093.154-.18.3-.334.38c-.14.068-.32.041-.468.008l-65.455-13.487c-.067-.013-1.016-3.465-1.09-3.472z" />
+  </svg>
+);
+
+export const OcamlIcon: React.FC = () => (
+  <svg
+    x="0px"
+    y="0px"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    stroke="currentColor"
+    viewBox="0 0 165.543 144.277"
+  >
+    <g>
+      <path
+        d="M82.223,134.04c-0.459-0.978-1.853-3.524-2.553-4.34c-1.52-1.779-1.875-1.913-2.322-4.159
+		c-0.777-3.911-2.834-11.004-5.258-15.899c-1.252-2.526-3.334-4.648-5.24-6.48c-1.664-1.607-5.414-4.311-6.068-4.177
+		c-6.125,1.223-8.025,7.23-10.906,11.989c-1.594,2.632-3.283,4.871-4.539,7.671c-1.16,2.575-1.057,5.426-3.043,7.637
+		c-2.037,2.27-3.361,4.684-4.359,7.617c-0.189,0.558-0.727,6.417-1.311,7.798l9.103-0.641c8.483,0.578,6.033,3.829,19.273,3.121
+		l20.906-0.647c-0.648-1.916-1.541-4.135-1.885-4.856C83.438,137.46,82.705,135.084,82.223,134.04z"
+      />
+      <path
+        d="M108.725,90.75c-1.607,1.16-4.748,3.95-11.58,5.005c-3.066,0.474-5.934,0.513-9.082,0.356
+		c-1.541-0.074-2.994-0.153-4.539-0.173c-0.91-0.007-3.963-0.104-3.812,0.188l-0.34,0.848c0.053,0.279,0.164,0.976,0.195,1.145
+		c0.125,0.685,0.16,1.23,0.186,1.86c0.047,1.295-0.107,2.645-0.041,3.952c0.137,2.711,1.143,5.182,1.27,7.917
+		c0.139,3.045,1.645,6.267,3.102,8.754c0.553,0.947,1.395,1.055,1.762,2.221c0.43,1.336,0.023,2.753,0.232,4.177
+		c0.82,5.521,2.41,11.292,4.896,16.275c0.018,0.042,0.037,0.087,0.059,0.125c3.07-0.516,6.146-1.62,10.135-2.21
+		c7.314-1.085,17.486-0.526,24.02-1.138c16.533-1.554,25.506,6.781,40.355,3.365V20.857C165.543,9.339,156.209,0,144.688,0H20.856
+		C9.339,0,0.001,9.339,0.001,20.857v45.507c2.984-1.079,7.276-7.428,8.621-8.972c2.353-2.7,2.78-6.144,3.952-8.313
+		c2.669-4.94,3.128-8.337,9.195-8.337c2.828,0,3.951,0.652,5.864,3.219c1.331,1.785,3.63,5.083,4.706,7.288
+		c1.242,2.544,3.266,5.986,4.156,6.681c0.659,0.516,1.313,0.903,1.923,1.132c0.984,0.369,1.798-0.308,2.456-0.832
+		c0.84-0.669,1.202-2.032,1.98-3.85c1.121-2.623,2.343-5.766,3.038-6.863c1.203-1.896,1.613-4.146,2.912-5.236
+		c1.916-1.607,4.416-1.72,5.104-1.856c3.849-0.76,5.599,1.855,7.495,3.546c1.241,1.108,2.937,3.34,4.141,6.331
+		c0.941,2.336,2.139,4.497,2.64,5.846c0.484,1.302,1.679,3.389,2.387,5.891c0.643,2.272,2.364,4.013,3.018,5.093
+		c0,0,1.001,2.804,7.088,5.367c1.32,0.556,3.988,1.46,5.58,2.039c2.645,0.961,5.207,0.836,8.469,0.445
+		c2.326,0,3.586-3.368,4.643-6.065c0.625-1.594,1.224-6.162,1.632-7.459c0.395-1.262-0.529-2.238,0.258-3.344
+		c0.92-1.291,1.467-1.361,1.998-3.044c1.141-3.604,7.736-3.786,11.443-3.786c3.09,0,2.697,3,7.939,1.974
+		c3.002-0.589,5.895,0.387,9.082,1.231c2.684,0.712,5.207,1.523,6.719,3.293c0.978,1.146,3.406,6.888,0.932,7.133
+		c0.238,0.291,0.412,0.816,0.857,1.104c-0.551,2.166-2.949,0.623-4.281,0.345c-1.795-0.372-3.062,0.056-4.818,0.833
+		c-3.002,1.337-7.393,1.181-10.008,3.359c-2.219,1.846-2.215,5.967-3.25,8.276C117.871,78.832,114.998,86.227,108.725,90.75z"
+      />
+      <path
+        d="M39.35,101.251c-1.428-0.145-2.754-0.308-4.141-0.588c-2.59-0.522-5.42-1.031-7.971-1.642
+		c-1.549-0.375-6.709-2.202-7.83-2.717c-2.629-1.212-4.375-4.505-6.43-4.166c-1.312,0.214-2.59,0.664-3.406,1.987
+		c-0.666,1.079-0.892,2.934-1.353,4.178c-0.535,1.444-1.459,2.792-2.268,4.168c-1.488,2.524-4.166,4.807-5.32,7.266
+		c-0.232,0.506-0.438,1.072-0.631,1.662v9.434v16.321v2.358c1.346,0.23,2.754,0.513,4.33,0.934
+		c11.631,3.103,14.469,3.366,25.877,2.061l1.07-0.142c0.873-1.816,1.547-8.004,2.113-9.919c0.441-1.468,1.047-2.638,1.277-4.137
+		c0.217-1.424-0.02-2.781-0.142-4.075c-0.32-3.242,2.361-4.4,3.641-7.184c1.154-2.519,1.82-5.385,2.775-7.96
+		c0.916-2.471,2.346-5.963,4.785-7.207C45.43,101.538,40.631,101.379,39.35,101.251z"
+      />
+    </g>
+  </svg>
+);
--- a/components/Suggestion.tsx
+++ b/components/Suggestion.tsx
@@ -0,0 +1,373 @@
+import fetch from 'cross-fetch';
+import { motion } from 'framer-motion';
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TiArrowSync } from 'react-icons/ti';
+import { PropagateLoader } from 'react-spinners';
+import styled from '@emotion/styled';
+import {
+  sendAcceptSuggestionEvent,
+  sendShuffleSuggestionEvent,
+} from '../src/util/analytics';
+import { sample, sampleMany, times } from '../src/util/array';
+import { mobile, slideUp } from '../src/util/css';
+import {
+  capitalize,
+  germanify,
+  lower,
+  njoin,
+  sanitize,
+  stem,
+  upper,
+} from '../src/util/text';
+
+type Modifier = (word: string) => string;
+
+const MODIFIERS: Modifier[] = [
+  (word): string => `${capitalize(germanify(word))}`,
+  (word): string => `${capitalize(word)}`,
+  (word): string => njoin('Air', capitalize(word), { elision: false }),
+  (word): string => njoin('All', capitalize(word), { elision: false }),
+  (word): string => njoin('Cloud', capitalize(word), { elision: false }),
+  (word): string => njoin('Co', lower(word), { elision: false }),
+  (word): string => njoin('Deep', capitalize(word), { elision: false }),
+  (word): string => njoin('Easy', capitalize(word), { elision: false }),
+  (word): string => njoin('En', lower(word), { elision: false }),
+  (word): string => njoin('Fast', lower(word), { elision: false }),
+  (word): string => njoin('Fire', lower(word), { elision: false }),
+  (word): string => njoin('Fusion', capitalize(word), { elision: false }),
+  (word): string => njoin('Git', capitalize(word), { elision: false }),
+  (word): string => njoin('Go', capitalize(word)),
+  (word): string => njoin('Hyper', capitalize(word)),
+  (word): string => njoin('In', capitalize(word), { elision: false }),
+  (word): string => njoin('Infini', lower(word)),
+  (word): string => njoin('Insta', lower(word)),
+  (word): string => njoin('i', capitalize(word)),
+  (word): string => njoin('Lead', lower(word)),
+  (word): string => njoin('Less', lower(word)),
+  (word): string => njoin('lib', lower(word)),
+  (word): string => njoin('Many', lower(word)),
+  (word): string => njoin('Max', capitalize(word)),
+  (word): string => njoin('Micro', lower(word)),
+  (word): string => njoin('mini', lower(word)),
+  (word): string => njoin('Mono', lower(word)),
+  (word): string => njoin('Meta', lower(word)),
+  (word): string => njoin('nano', lower(word)),
+  (word): string => njoin('Native', capitalize(word), { elision: false }),
+  (word): string => njoin('Next', lower(word)),
+  (word): string => njoin('No', upper(word), { elision: false }),
+  (word): string => njoin('Octo', lower(word)),
+  (word): string => njoin('Omni', capitalize(word), { elision: false }),
+  (word): string => njoin('One', capitalize(word), { elision: false }),
+  (word): string => njoin('Open', capitalize(word), { elision: false }),
+  (word): string => njoin('Pro', capitalize(word), { elision: false }),
+  (word): string => njoin('Quick', lower(word)),
+  (word): string => njoin('Semantic', capitalize(word), { elision: false }),
+  (word): string => njoin('Smart', lower(word)),
+  (word): string => njoin('Snap', capitalize(word), { elision: false }),
+  (word): string => njoin('Super', lower(word), { elision: false }),
+  (word): string => njoin('Strong', lower(word)),
+  (word): string => njoin('Ultra', lower(word)),
+  (word): string => njoin('Un', lower(word), { elision: false }),
+  (word): string => njoin('Uni', lower(word)),
+  (word): string => njoin('unified', lower(word)),
+  (word): string => njoin('Up', lower(word), { elision: false }),
+  (word): string => njoin('Wunder', lower(germanify(word)), { elision: false }),
+  (word): string => njoin('Zen', capitalize(word), { elision: false }),
+  (word): string => njoin('Zero', capitalize(word), { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'able', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'al', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'el', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'em', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'en', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'er', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'ery', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'ia', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'ible', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'ics', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'ifier', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'ify', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'ii', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'in', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'io', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'ist', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'ity', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'ium', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'iverse', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'ory', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'um', { elision: false }),
+  (word): string => njoin(capitalize(stem(word)), 'y'),
+  (word): string => njoin(capitalize(word), 'AI', { elision: false }),
+  (word): string => njoin(capitalize(word), 'API', { elision: false }),
+  (word): string => njoin(capitalize(word), 'App'),
+  (word): string => njoin(capitalize(word), 'base'),
+  (word): string => njoin(capitalize(word), 'book', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Bot', { elision: false }),
+  (word): string => njoin(capitalize(word), 'butler'),
+  (word): string => njoin(capitalize(word), 'byte'),
+  (word): string => njoin(capitalize(word), 'cast'),
+  (word): string => njoin(capitalize(word), 'CDN', { elision: false }),
+  (word): string => njoin(capitalize(word), 'CI', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Club', { elision: false }),
+  (word): string => njoin(capitalize(word), 'DB', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Express', { elision: false }),
+  (word): string => njoin(capitalize(word), 'en'),
+  (word): string => njoin(capitalize(word), 'feed'),
+  (word): string => njoin(capitalize(word), 'Finder', { elision: false }),
+  (word): string => njoin(capitalize(word), 'flow'),
+  (word): string => njoin(capitalize(word), 'form'),
+  (word): string => njoin(capitalize(word), 'ful'),
+  (word): string => njoin(capitalize(word), 'Go', { elision: false }),
+  (word): string => njoin(capitalize(word), 'gram'),
+  (word): string => njoin(capitalize(word), 'Hero', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Hub', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Hunt', { elision: false }),
+  (word): string => njoin(capitalize(word), '.IO', { elision: false }),
+  (word): string => njoin(capitalize(word), 'It', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Kit', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Lab', { elision: false }),
+  (word): string => njoin(capitalize(word), 'let'),
+  (word): string => njoin(capitalize(word), 'less'),
+  (word): string => njoin(capitalize(word), 'Link', { elision: false }),
+  (word): string => njoin(capitalize(word), 'list', { elision: false }),
+  (word): string => njoin(capitalize(word), 'list', { elision: false }),
+  (word): string => njoin(capitalize(word), 'lit', { elision: false }),
+  (word): string => njoin(capitalize(word), 'mind', { elision: false }),
+  (word): string => njoin(capitalize(word), 'ML', { elision: false }),
+  (word): string => njoin(capitalize(word), 'note', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Notes', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Pod', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Pro', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Scan', { elision: false }),
+  (word): string => njoin(capitalize(word), 'shot'),
+  (word): string => njoin(capitalize(word), 'space'),
+  (word): string => njoin(capitalize(word), 'Stack', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Studio', { elision: false }),
+  (word): string => njoin(capitalize(word), 'Sensei', { elision: false }),
+  (word): string => njoin(capitalize(word), 'time'),
+  (word): string => njoin(capitalize(word), 'way'),
+  (word): string => njoin(capitalize(word), 'x', { elision: false }),
+  (word): string => njoin(capitalize(word), 'check', { elision: false }),
+  (word): string => njoin(capitalize(word), 'joy'),
+  (word): string => njoin(lower(word), 'lint', { elision: false }),
+  (word): string => njoin(lower(word), 'ly', { elision: false }),
+  (word): string => njoin(capitalize(word), 'mate'),
+  (word): string => capitalize(word) + ' by Design',
+];
+
+const FONT_FAMILIES = [
+  `'Helvetica', sans-serif`,
+  `'Avenir', sans-serif`,
+  `'Futura', sans-serif`,
+  `'Montserrat', sans-serif`,
+];
+
+const FONT_WEIGHTS = [300, 600, 900];
+
+const NUM_SUGGESTION = 3;
+
+function modifyWord(word: string): string {
+  return sample(MODIFIERS)(word);
+}
+
+async function getSynonyms(word: string): Promise<string[]> {
+  try {
+    const response = await fetch(
+      `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&dt=ss&ie=UTF-8&oe=UTF-8&dj=1&q=${encodeURIComponent(
+        word
+      )}`
+    );
+    const json: {
+      synsets: Array<{ entry: Array<{ synonym: string[] }> }>;
+    } = await response.json();
+    const synonyms = Array.from(
+      new Set<string>(
+        json.synsets.reduce(
+          (sum, synset) => [...sum, ...synset.entry.map((e) => e.synonym[0])],
+          [] as string[]
+        )
+      )
+    )
+      .filter((word) => !/[\s-]/.exec(word))
+      .map((word) => sanitize(word));
+    return synonyms;
+  } catch (err) {
+    return [];
+  }
+}
+
+const Suggestion: React.FC<{
+  query: string;
+  onSubmit: (name: string) => void;
+}> = ({ query, onSubmit }) => {
+  const { t } = useTranslation();
+  const synonymRef = useRef<string[]>([]);
+  const [bestWords, setBestWords] = useState<string[]>([]);
+
+  function shuffle(): void {
+    const best = sampleMany(
+      [...synonymRef.current.filter((s) => s.length < 8), ...times(query, 10)],
+      NUM_SUGGESTION
+    ).map((word) => modifyWord(word));
+    setBestWords(best);
+  }
+
+  function applyQuery(name: string): void {
+    onSubmit(name);
+    sendAcceptSuggestionEvent();
+  }
+
+  function onShuffleButtonClicked() {
+    shuffle();
+    sendShuffleSuggestionEvent();
+  }
+
+  useEffect(() => {
+    let isEffective = true;
+
+    const fn = async (): Promise<void> => {
+      if (query && query.length > 0) {
+        const synonyms = await getSynonyms(query);
+        if (!isEffective) {
+          return;
+        }
+        synonymRef.current = [query, ...synonyms];
+        shuffle();
+      }
+    };
+    fn();
+    return () => {
+      isEffective = false;
+    };
+    // eslint-disable-next-line
+  }, [query]);
+
+  return (
+    <Container>
+      <Title>{t('try')}</Title>
+
+      {bestWords.length > 0 ? (
+        <Items>
+          {bestWords.map((name, i) => (
+            <Item
+              style={{
+                fontFamily: sample(FONT_FAMILIES),
+                fontWeight: sample(FONT_WEIGHTS),
+              }}
+              key={name + i}
+              onClick={(): void => applyQuery(name)}
+              delay={i + 1}
+            >
+              <span>{name}</span>
+            </Item>
+          ))}{' '}
+        </Items>
+      ) : (
+        <div
+          style={{
+            height: '50px',
+            display: 'flex',
+            justifyContent: 'center',
+            flexDirection: 'column',
+          }}
+        >
+          <PropagateLoader size={10} />
+        </div>
+      )}
+
+      <Button onClick={onShuffleButtonClicked}>
+        <TiArrowSync />
+      </Button>
+    </Container>
+  );
+};
+
+export default Suggestion;
+
+const Container = styled.div`
+  margin-top: 20px;
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  ${mobile} {
+    margin-top: 15px;
+  }
+`;
+
+const Title = styled.div`
+  padding: 0 10px;
+  color: gray;
+  border: 1px solid gray;
+  border-radius: 2em;
+  text-transform: uppercase;
+  font-size: 12px;
+  user-select: none;
+`;
+
+const Items = styled.div`
+  margin: 5px 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  ${mobile} {
+    flex-direction: column;
+    align-items: center;
+  }
+`;
+
+const Item = styled.div<{ delay: number }>`
+  margin: 10px 15px 0;
+  padding-bottom: 5px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 1.7rem;
+  /* letter-spacing: -0.5px; */
+  border-bottom: 1px dashed black;
+  color: black;
+  overflow: hidden;
+
+  span {
+    display: block;
+    animation: 0.6s cubic-bezier(0.19, 1, 0.22, 1)
+      ${(props) => `${props.delay * 0.1}s`} 1 normal both running ${slideUp};
+  }
+
+  ${mobile} {
+    margin: 5px 0 0;
+    padding-bottom: 0;
+    font-size: 1rem;
+  }
+`;
+
+const Button = styled(motion.div)`
+  margin: 15px 0 0 0;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  border-bottom: none;
+  color: white;
+  border-radius: 4px;
+  font-size: 1.3rem;
+  user-select: none;
+  background: #5610ff;
+  transition: background 0.1s ease-out;
+  cursor: pointer;
+
+  &:hover {
+    background: #723df3;
+  }
+
+  &:active {
+    background: #a17ff5;
+  }
+`;
+Button.defaultProps = {
+  whileHover: { scale: 1.1 },
+  whileTap: { scale: 0.9 },
+};
--- a/components/Welcome.tsx
+++ b/components/Welcome.tsx
@@ -0,0 +1,258 @@
+import Link from 'next/link';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { DiHeroku } from 'react-icons/di';
+import {
+  FaAws,
+  FaCloudflare,
+  FaFirefoxBrowser,
+  FaFly,
+  FaGithub,
+  FaGithubAlt,
+  FaGitlab,
+  // FaInstagram,
+  FaJsSquare,
+  FaProductHunt,
+  FaPython,
+  FaReddit,
+  FaSlack,
+  FaTwitter,
+  FaYoutube,
+} from 'react-icons/fa';
+import { IoIosBeer } from 'react-icons/io';
+import { MdDomain } from 'react-icons/md';
+import { RiBuilding2Fill, RiChromeFill, RiNpmjsFill } from 'react-icons/ri';
+import {
+  SiAppstore,
+  SiArchlinux,
+  SiDebian,
+  SiDeno,
+  SiElixir,
+  SiFirebase,
+  SiRubygems,
+  SiRust,
+  SiUbuntu,
+} from 'react-icons/si';
+import styled from '@emotion/styled';
+import { sendGettingStartedEvent } from '../src/util/analytics';
+import { mobile } from '../src/util/css';
+import { NetlifyIcon, NowIcon, OcamlIcon } from './Icons';
+
+const supportedProviders: Record<string, React.ReactNode> = {
+  domains: <MdDomain />,
+  github: <FaGithub />,
+  gitlab: <FaGitlab />,
+  twitter: <FaTwitter />,
+  youtube: <FaYoutube />,
+  homebrew: <IoIosBeer />,
+  npm: <RiNpmjsFill />,
+  rust: <SiRust />,
+  pypi: <FaPython />,
+  rubygems: <SiRubygems />,
+  hexpm: <SiElixir />,
+  ocaml: <OcamlIcon />,
+  archlinux: <SiArchlinux />,
+  ubuntu: <SiUbuntu />,
+  debian: <SiDebian />,
+  reddit: <FaReddit />,
+  // instagram: <FaInstagram />,
+  slack: <FaSlack />,
+  fly: <FaFly />,
+  heroku: <DiHeroku />,
+  now: <NowIcon />,
+  netlify: <NetlifyIcon />,
+  cloudflare: <FaCloudflare />,
+  s3: <FaAws />,
+  firebase: <SiFirebase />,
+  jsorg: <FaJsSquare />,
+  modland: <SiDeno />,
+  productHunt: <FaProductHunt />,
+  githubSearch: <FaGithubAlt />,
+  appStore: <SiAppstore />,
+  // playStore: <IoMdAppstore />,
+  firefoxAddons: <FaFirefoxBrowser />,
+  chromeWebStore: <RiChromeFill />,
+  nta: <RiBuilding2Fill />,
+};
+
+const Welcome: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Container>
+      <Section>
+        <HeroTitle>{t('title')}</HeroTitle>
+        <HeroText>{t('description')}</HeroText>
+        <ButtonContainer>
+          <List>
+            <ListButton>
+              <Link href="/s/namae" onClick={() => sendGettingStartedEvent()}>
+                {t('gettingStartedWithExample')}
+              </Link>
+            </ListButton>
+            <Subtle>or</Subtle>
+            <HList>
+              <Link href="/s/SpaceX">SpaceX</Link>
+              <Link href="/s/Netflix">Netflix</Link>
+              <Link href="/s/Zoom">Zoom</Link>
+            </HList>
+          </List>
+        </ButtonContainer>
+      </Section>
+      <HighlightSection>
+        {Object.keys(supportedProviders).map((key) => (
+          <ListItem key={key}>
+            {supportedProviders[key]} {t(`providers.${key}`)}
+          </ListItem>
+        ))}
+      </HighlightSection>
+      {/* <Section>
+        <Title>Integrations</Title>
+        <blockquote>Soon</blockquote>
+      </Section> */}
+    </Container>
+  );
+};
+
+export default Welcome;
+
+const Subtle = styled.span`
+  color: #5a5a5a;
+`;
+
+const Container = styled.div`
+  /* padding-bottom: 40px; */
+  text-align: center;
+  font-size: 1.5rem;
+
+  ${mobile} {
+    margin-top: 0px;
+    text-align: left;
+    font-size: 1.1rem;
+  }
+`;
+
+const Section = styled.div`
+  padding: 40px 20vw 100px;
+
+  ${mobile} {
+    padding: 0px 40px 50px;
+  }
+`;
+
+const HighlightSection = styled.div`
+  padding: 100px 20vw;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  ${mobile} {
+    flex-direction: column;
+    padding: 40px 40px 60px;
+  }
+
+  color: white;
+  /* background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); */
+  background: #632bec;
+`;
+
+const Title = styled.h1`
+  line-height: 1.6em;
+  font-size: 5rem;
+  font-weight: 700;
+
+  ${mobile} {
+    font-size: 2.5em;
+  }
+`;
+
+const HeroTitle = styled(Title)`
+  padding-bottom: 30px;
+  line-height: 1em;
+`;
+
+const HeroText = styled.p`
+  font-size: 1.2em;
+  font-weight: 400;
+  line-height: 1.3em;
+  color: #3c3c3c;
+`;
+
+const ButtonContainer = styled.div`
+  margin: 30px 0 0 0;
+`;
+
+const List = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1rem;
+`;
+
+const HList = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+
+  a {
+    color: black;
+    border-bottom: 1px dashed black;
+    text-decoration: none;
+    font-family: monospace;
+  }
+
+  > *:not(:last-child) {
+    margin-right: 15px;
+  }
+`;
+
+const ListItem = styled.div`
+  margin: 20px 25px;
+  display: flex;
+  align-items: center;
+  font-size: 1.5rem;
+  line-height: 1em;
+
+  ${mobile} {
+    margin: 10px 0;
+    font-size: 1.2rem;
+  }
+
+  svg {
+    margin-right: 5px;
+  }
+`;
+
+const ListButton = styled.div`
+  margin: 10px 5px;
+  display: flex;
+  align-items: center;
+  font-size: 1.2rem;
+  line-height: 1em;
+
+  ${mobile} {
+    margin: 10px 10px 0 0;
+  }
+
+  a {
+    color: #632bec;
+    padding: 12px 25px;
+    border: 2px solid #632bec;
+    font-family: monospace;
+    border-radius: 2px;
+    text-decoration: none;
+
+    &:hover {
+      color: white;
+      background: #632bec;
+    }
+  }
+`;
--- a/components/cards/core.tsx
+++ b/components/cards/core.tsx
@@ -0,0 +1,386 @@
+import useFetch from 'fetch-suspense';
+import Tooltip from 'rc-tooltip';
+import React, { Suspense, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GoInfo } from 'react-icons/go';
+import { IoIosFlash } from 'react-icons/io';
+import BarLoader from 'react-spinners/BarLoader';
+import styled from '@emotion/styled';
+import { useStoreActions } from '../../store';
+import { sendError, sendExpandEvent } from '../../util/analytics';
+import { mobile } from '../../util/css';
+
+export const COLORS = {
+  available: '#6e00ff',
+  unavailable: 'darkgrey',
+  error: '#ff388b',
+};
+
+export const Card: React.FC<{ title: string }> = ({ title, children }) => {
+  return (
+    <CardContainer>
+      <CardTitle>{title}</CardTitle>
+      <CardContent>
+        <ErrorHandler>{children}</ErrorHandler>
+      </CardContent>
+    </CardContainer>
+  );
+};
+
+export const Repeater: React.FC<{
+  items: string[];
+  moreItems?: string[];
+  children: (name: string) => React.ReactNode;
+}> = ({ items = [], moreItems = [], children }) => {
+  const [revealAlternatives, setRevealAlternatives] = useState(false);
+  const { t } = useTranslation();
+
+  function onClick() {
+    sendExpandEvent();
+    setRevealAlternatives(true);
+  }
+
+  useEffect(() => {
+    setRevealAlternatives(false);
+  }, [items, moreItems]);
+
+  return (
+    <>
+      {items.map((name) => (
+        <ErrorHandler key={name}>{children(name)}</ErrorHandler>
+      ))}
+
+      {revealAlternatives
+        ? moreItems.map((name) => (
+            <ErrorHandler key={name}>{children(name)}</ErrorHandler>
+          ))
+        : null}
+      {moreItems.length > 0 && !revealAlternatives ? (
+        <Button onClick={onClick}>{t('showMore')}</Button>
+      ) : null}
+    </>
+  );
+};
+
+interface Response {
+  error?: string;
+  availability: boolean;
+}
+
+class APIError extends Error {
+  constructor(message?: string) {
+    super(message);
+    Object.setPrototypeOf(this, APIError.prototype);
+  }
+}
+class NotFoundError extends Error {
+  constructor(message?: string) {
+    super(message);
+    Object.setPrototypeOf(this, NotFoundError.prototype);
+  }
+}
+
+export const DedicatedAvailability: React.FC<{
+  name: string;
+  query?: string;
+  message?: string;
+  messageIfTaken?: string;
+  service: string;
+  link: string;
+  linkIfTaken?: string;
+  prefix?: string;
+  suffix?: string;
+  icon: React.ReactNode;
+}> = ({
+  name,
+  query = undefined,
+  message = '',
+  messageIfTaken = undefined,
+  service,
+  link,
+  linkIfTaken = undefined,
+  prefix = '',
+  suffix = '',
+  icon,
+}) => {
+  const increaseCounter = useStoreActions((actions) => actions.stats.add);
+  const response = useFetch(
+    `/api/services/${service}/${encodeURIComponent(query || name)}`
+  ) as Response;
+
+  if (response.error) {
+    throw new APIError(`${service}: ${response.error}`);
+  }
+
+  useEffect(() => {
+    increaseCounter(response.availability);
+    // eslint-disable-next-line
+  }, []);
+
+  return (
+    <Result
+      title={name}
+      message={response.availability ? message : messageIfTaken || message}
+      link={response.availability ? link : linkIfTaken || link}
+      icon={icon}
+      prefix={prefix}
+      suffix={suffix}
+      availability={response.availability}
+    />
+  );
+};
+
+export const ExistentialAvailability: React.FC<{
+  name: string;
+  target: string;
+  message?: string;
+  messageIfTaken?: string;
+  link: string;
+  linkIfTaken?: string;
+  prefix?: string;
+  suffix?: string;
+  icon: React.ReactNode;
+}> = ({
+  name,
+  message = '',
+  messageIfTaken = undefined,
+  target,
+  link,
+  linkIfTaken = undefined,
+  prefix = '',
+  suffix = '',
+  icon,
+}) => {
+  const increaseCounter = useStoreActions((actions) => actions.stats.add);
+  const response = useFetch(target, undefined, { metadata: true });
+
+  if (response.status !== 404 && response.status !== 200) {
+    throw new NotFoundError(`${name}: ${response.status}`);
+  }
+
+  const availability = response.status === 404;
+
+  useEffect(() => {
+    increaseCounter(availability);
+    // eslint-disable-next-line
+  }, []);
+
+  return (
+    <Result
+      title={name}
+      message={availability ? message : messageIfTaken || message}
+      link={availability ? link : linkIfTaken || link}
+      icon={icon}
+      prefix={prefix}
+      suffix={suffix}
+      availability={availability}
+    />
+  );
+};
+
+export const Result: React.FC<{
+  title: string;
+  message?: string;
+  link?: string;
+  icon: React.ReactNode;
+  prefix?: string;
+  suffix?: string;
+  availability?: boolean;
+}> = ({
+  title,
+  message = '',
+  link,
+  icon,
+  prefix = '',
+  suffix = '',
+  availability,
+}) => {
+  const content = (
+    <>
+      {prefix}
+      {title}
+      {suffix}
+    </>
+  );
+  const itemColor =
+    availability === undefined
+      ? 'inherit'
+      : availability
+      ? COLORS.available
+      : COLORS.unavailable;
+  return (
+    <ResultContainer>
+      <Tooltip overlay={message} placement="top" trigger={['hover']}>
+        <ResultItem color={itemColor}>
+          <ResultIcon>{icon}</ResultIcon>
+          <ResultName>
+            {link ? (
+              <a href={link} target="_blank" rel="noreferrer">
+                {content}
+              </a>
+            ) : (
+              content
+            )}
+          </ResultName>
+          {availability === true ? (
+            <AvailableIcon>
+              <IoIosFlash />{' '}
+            </AvailableIcon>
+          ) : null}
+        </ResultItem>
+      </Tooltip>
+    </ResultContainer>
+  );
+};
+
+// 1. getDerivedStateFromError
+// 2. render()
+// 3. componentDidCatch() send errorInfo to Sentry
+// 4. render(), now with eventId provided from Sentry
+class ErrorBoundary extends React.Component<
+  {},
+  { hasError: boolean; message: string; eventId?: string }
+> {
+  constructor(props: {}) {
+    super(props);
+    this.state = { hasError: false, message: '', eventId: undefined };
+  }
+
+  // used in SSR
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, message: error.message };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  componentDidCatch(error: Error, errorInfo: any) {
+    if (error instanceof APIError || error instanceof NotFoundError) {
+      return;
+    }
+    sendError(error, errorInfo).then((eventId) => {
+      this.setState({ eventId });
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <ResultContainer>
+          <Tooltip
+            overlay={`${this.state.message}${
+              this.state.eventId ? ` (${this.state.eventId})` : ''
+            }`}
+            placement="top"
+            trigger={['hover']}
+          >
+            <ResultItem color={COLORS.error}>
+              <ResultIcon>
+                <GoInfo />
+              </ResultIcon>
+              <ResultName>Error</ResultName>
+            </ResultItem>
+          </Tooltip>
+        </ResultContainer>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+const ErrorHandler: React.FC = ({ children }) => (
+  <ErrorBoundary>
+    <Suspense
+      fallback={
+        <ResultContainer>
+          <BarLoader />
+        </ResultContainer>
+      }
+    >
+      {children}
+    </Suspense>
+  </ErrorBoundary>
+);
+
+const CardContainer = styled.div`
+  padding: 30px 50px;
+  font-size: 1rem;
+  line-height: 1rem;
+
+  ${mobile} {
+    margin-bottom: 40px;
+    padding: 0px;
+  }
+`;
+
+const CardTitle = styled.div`
+  margin-bottom: 15px;
+  font-size: 1em;
+  font-weight: bold;
+
+  ${mobile} {
+    padding: 0 20px;
+    margin-bottom: 20px;
+    font-size: 1.2rem;
+    font-weight: 600;
+  }
+`;
+
+const CardContent = styled.div`
+  border-radius: 2px;
+
+  ${mobile} {
+    padding: 20px;
+    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
+    background: white;
+    border-radius: 0;
+    font-size: 1.2em;
+  }
+`;
+
+const Button = styled.div`
+  margin-top: 5px;
+  display: inline-block;
+  padding: 5px 0;
+  border: none;
+  border-bottom: 1px dashed black;
+  cursor: pointer;
+  font-family: monospace;
+  font-size: 0.8em;
+`;
+
+const ResultContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+`;
+
+export const ResultIcon = styled.div`
+  width: 1em;
+`;
+
+export const ResultItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  word-break: break-all;
+  color: ${({ color }) => color};
+`;
+
+export const ResultName = styled.div`
+  margin-left: 6px;
+  font-family: monospace;
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+`;
+
+export const AvailableIcon = styled.div`
+  margin-top: 2px;
+  margin-left: 3px;
+  padding: 0;
+  width: 15px;
+  text-align: center;
+  font-size: 13px;
+  height: 15px;
+`;
--- a/components/cards/index.tsx
+++ b/components/cards/index.tsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { mobile } from '../../util/css';
+import AppStoreCard from './providers/AppStore';
+import ChromeWebStoreCard from './providers/ChromeWebStore';
+import CloudflareCard from './providers/Cloudflare';
+import CratesioCard from './providers/Cratesio';
+import DomainCard from './providers/Domains';
+import FirebaseCard from './providers/Firebase';
+import FirefoxAddonsCard from './providers/FirefoxAddons';
+import FlyIoCard from './providers/FlyIo';
+import GithubCard from './providers/GitHubOrganization';
+import GithubSearchCard from './providers/GitHubSearch';
+import GitLabCard from './providers/GitLab';
+import HerokuCard from './providers/Heroku';
+import HexPmCard from './providers/HexPm';
+import HomebrewCard from './providers/Homebrew';
+import JsOrgCard from './providers/JsOrg';
+import LinuxCard from './providers/Linux';
+import ModLandCard from './providers/ModLand';
+import NetlifyCard from './providers/Netlify';
+import NpmCard from './providers/Npm';
+import NtaCard from './providers/Nta';
+import OcamlCard from './providers/Ocaml';
+import PlayStoreCard from './providers/PlayStore';
+import ProductHuntCard from './providers/ProductHunt';
+import PypiCard from './providers/PyPI';
+import RubyGemsCard from './providers/RubyGems';
+import S3Card from './providers/S3';
+import SlackCard from './providers/Slack';
+import SubredditCard from './providers/Subreddit';
+import TwitterCard from './providers/Twitter';
+import VercelCard from './providers/Vercel';
+import YouTubeCard from './providers/YouTube';
+// import InstagramCard from './providers/Instagram';
+
+const Index: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Section>
+        {/* <Title>{t('section.starter')}</Title> */}
+        <Cards>
+          <DomainCard query={query} />
+          <GithubCard query={query} />
+          <GitLabCard query={query} />
+          <SlackCard query={query} />
+          <ProductHuntCard query={query} />
+          <GithubSearchCard query={query} />
+          <NtaCard query={query} />
+        </Cards>
+      </Section>
+      <Section>
+        <Title>{t('section.social')}</Title>
+        <Cards>
+          <TwitterCard query={query} />
+          <SubredditCard query={query} />
+          <YouTubeCard query={query} />
+          {/* <InstagramCard query={query} /> */}
+        </Cards>
+      </Section>
+      <Section>
+        <Title>{t('section.package')}</Title>
+        <Cards>
+          <HomebrewCard query={query} />
+          <LinuxCard query={query} />
+          <NpmCard query={query} />
+          <PypiCard query={query} />
+          <CratesioCard query={query} />
+          <RubyGemsCard query={query} />
+          <HexPmCard query={query} />
+          <OcamlCard query={query} />
+        </Cards>
+      </Section>
+      <Section>
+        <Title>{t('section.web')}</Title>
+        <Cards>
+          <FlyIoCard query={query} />
+          <VercelCard query={query} />
+          <HerokuCard query={query} />
+          <NetlifyCard query={query} />
+          <CloudflareCard query={query} />
+          <S3Card query={query} />
+          <FirebaseCard query={query} />
+          <JsOrgCard query={query} />
+          <ModLandCard query={query} />
+        </Cards>
+      </Section>
+      <Section>
+        <Title>{t('section.app')}</Title>
+        <Cards>
+          <AppStoreCard query={query} />
+          {/* <PlayStoreCard query={query} /> */}
+          <FirefoxAddonsCard query={query} />
+          <ChromeWebStoreCard query={query} />
+        </Cards>
+      </Section>
+    </>
+  );
+};
+
+export default Index;
+
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 0 40px;
+`;
+
+const Title = styled.h1`
+  margin: 20px 0 10px;
+  text-align: center;
+  font-size: 3rem;
+
+  ${mobile} {
+    margin: 0;
+    text-align: left;
+    font-size: 2rem;
+    padding: 0 20px;
+  }
+`;
+
+const Cards = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 20px;
+
+  ${mobile} {
+    flex-direction: column;
+    margin-top: 40px;
+  }
+`;
--- a/components/cards/providers/AppStore.tsx
+++ b/components/cards/providers/AppStore.tsx
@@ -0,0 +1,57 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaInfoCircle } from 'react-icons/fa';
+import { SiAppstore } from 'react-icons/si';
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const response = useFetch(
+    `/api/services/appstore/${encodeURIComponent(query)}?country=${t(
+      'countryCode'
+    )}`
+  ) as {
+    result: Array<{
+      name: string;
+      viewURL: string;
+      author: string;
+      id: string;
+    }>;
+  };
+  const apps = response.result;
+
+  return (
+    <>
+      {apps && apps.length > 0 ? (
+        apps.map((app) => (
+          <Result
+            title={app.name.split(/[－–—\-:]/)[0]}
+            message={`By ${app.author}`}
+            link={app.viewURL}
+            icon={<SiAppstore />}
+            key={app.id}
+          />
+        ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={t('noResult')}
+          icon={<FaInfoCircle />}
+        />
+      )}
+    </>
+  );
+};
+
+const AppStoreCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('providers.appStore')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default AppStoreCard;
--- a/components/cards/providers/ChromeWebStore.tsx
+++ b/components/cards/providers/ChromeWebStore.tsx
@@ -0,0 +1,54 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { RiChromeFill } from 'react-icons/ri';
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const response = useFetch(
+    `/api/services/chrome-web-store/${encodeURIComponent(query)}`
+  ) as {
+    result: Array<{
+      name: string;
+      url: string;
+      description: string;
+      id: string;
+    }>;
+  };
+  const apps = response.result;
+
+  return (
+    <>
+      {apps && apps.length > 0 ? (
+        apps.map((app) => (
+          <Result
+            title={app.name}
+            message={app.description}
+            link={app.url}
+            icon={<RiChromeFill />}
+            key={app.id}
+          />
+        ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={t('noResult')}
+          icon={<RiChromeFill />}
+        />
+      )}
+    </>
+  );
+};
+
+const ChromeWebStoreCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('providers.chromeWebStore')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default ChromeWebStoreCard;
--- a/components/cards/providers/Cloudflare.tsx
+++ b/components/cards/providers/Cloudflare.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaCloudflare } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const CloudflareCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    alphanumeric: false,
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+  const moreNames = [
+    `${lowerCase}-web`,
+    `${lowerCase}-webapp`,
+    `${lowerCase}-site`,
+  ];
+
+  return (
+    <Card title={t('providers.cloudflare')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.pages.dev`}
+            service="dns"
+            message={`Go to ${name}.pages.dev`}
+            link={`https://${name}.pages.dev`}
+            icon={<FaCloudflare />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default CloudflareCard;
--- a/components/cards/providers/Cratesio.tsx
+++ b/components/cards/providers/Cratesio.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SiRust } from 'react-icons/si';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const CratesioCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query);
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.rust')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`crates.io/api/v1/crates/${name}`}
+            service="existence"
+            link={`https://crates.io/crates/${name}`}
+            message="Go to crates.io"
+            icon={<SiRust />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default CratesioCard;
--- a/components/cards/providers/Domains.tsx
+++ b/components/cards/providers/Domains.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { MdDomain } from 'react-icons/md';
+import { normalize } from '../../../util/text';
+import { zones } from '../../../util/zones';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+export interface DomainrResponse {
+  results: {
+    domain: string;
+    host: string;
+    subdomain: string;
+    zone: string;
+    path: string;
+    registerURL: string;
+  }[];
+}
+
+// function fetcher(url: string) {
+//   return fetch(url, {}).then((res) => res.json());
+// }
+
+const DomainCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    alphanumeric: false,
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const domainHackSuggestions = zones
+    .map((zone) => new RegExp(`${zone}$`).exec(lowerCase.slice(1)))
+    .filter((s): s is RegExpExecArray => s !== null)
+    .map(
+      (m) =>
+        lowerCase.substring(0, m.index + 1) +
+        '.' +
+        lowerCase.substring(m.index + 1)
+    );
+
+  // const { data } = useSWR<DomainrResponse>(
+  //   `/api/list/domain/${encodeURIComponent(query)}`,
+  //   fetcher
+  // );
+
+  // const cctldSuggestions =
+  //   data?.results
+  //     ?.filter((res) => res.subdomain !== '' && res.path === '')
+  //     ?.map((res) => res.domain) ?? [];
+
+  const names =
+    // use Set() to eliminate dupes
+    new Set([
+      ...['com', 'org', 'app', 'io'].map((tld) => lowerCase + '.' + tld),
+      ...domainHackSuggestions,
+    ]);
+
+  const moreNames = new Set([
+    `${lowerCase}app.com`,
+    `get${lowerCase}.com`,
+    `join${lowerCase}.com`,
+    ...[
+      'dev',
+      'co',
+      'ai',
+      'sh',
+      'rs',
+      'cloud',
+      'tools',
+      'build',
+      'run',
+      'design',
+      'directory',
+      'guru',
+      'ninja',
+      'info',
+      'biz',
+      'eu',
+    ].map((tld) => lowerCase + '.' + tld),
+  ]);
+
+  for (const name of moreNames) {
+    if (names.has(name)) {
+      moreNames.delete(name);
+    }
+  }
+
+  return (
+    <Card title={t('providers.domains')}>
+      <Repeater items={Array.from(names)} moreItems={Array.from(moreNames)}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            message={`Go to ${name}`}
+            service="domain"
+            link={'http://' + name}
+            icon={<MdDomain />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default DomainCard;
--- a/components/cards/providers/Firebase.tsx
+++ b/components/cards/providers/Firebase.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SiFirebase } from 'react-icons/si';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const FirebaseCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.firebase')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`${name}.firebaseio.com`}
+            service="existence"
+            message="Go to Firebase"
+            link={`https://${name}.firebaseio.com/`}
+            icon={<SiFirebase />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default FirebaseCard;
--- a/components/cards/providers/FirefoxAddons.tsx
+++ b/components/cards/providers/FirefoxAddons.tsx
@@ -0,0 +1,55 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaFirefoxBrowser } from 'react-icons/fa';
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const response = useFetch(
+    `/api/services/firefox-addons/${encodeURIComponent(query)}`
+  ) as {
+    result: Array<{
+      name: string;
+      url: string;
+      author: string;
+      description: string;
+      id: string;
+    }>;
+  };
+  const apps = response.result;
+
+  return (
+    <>
+      {apps && apps.length > 0 ? (
+        apps.map((app) => (
+          <Result
+            title={app.name.split(/\s[－–—\-:]\s/)[0]}
+            message={`${app.author}: ${app.description}`}
+            link={app.url}
+            icon={<FaFirefoxBrowser />}
+            key={app.id}
+          />
+        ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={t('noResult')}
+          icon={<FaFirefoxBrowser />}
+        />
+      )}
+    </>
+  );
+};
+
+const FirefoxAddonsCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('providers.firefoxAddons')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default FirefoxAddonsCard;
--- a/components/cards/providers/FlyIo.tsx
+++ b/components/cards/providers/FlyIo.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaFly } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const FlyIoCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.fly')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.fly.dev`}
+            service="dns"
+            message={`Go to ${name}.fly.dev`}
+            link={`https://${name}.fly.dev`}
+            icon={<FaFly />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default FlyIoCard;
--- a/components/cards/providers/GitHubOrganization.tsx
+++ b/components/cards/providers/GitHubOrganization.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaGithub } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const GithubCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {});
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [
+    normalizedQuery,
+    `${lowerCase}-dev`,
+    `${lowerCase}-org`,
+    `${lowerCase}-team`,
+    `${lowerCase}hq`,
+  ];
+  const moreNames = [`${lowerCase}js`, `${lowerCase}-rs`];
+
+  return (
+    <Card title={t('providers.github')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`github.com/${name}`}
+            service="existence"
+            message={`Go to github.com/${name}`}
+            link={`https://github.com/${name}`}
+            prefix="github.com/"
+            icon={<FaGithub />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default GithubCard;
--- a/components/cards/providers/GitHubSearch.tsx
+++ b/components/cards/providers/GitHubSearch.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import useFetch from 'fetch-suspense';
+import { useTranslation } from 'react-i18next';
+import { FaGithubAlt, FaInfoCircle } from 'react-icons/fa';
+
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const searchQuery = `${query} in:name`;
+  const limit = 5;
+  const response = useFetch(
+    `https://api.github.com/search/repositories?q=${encodeURIComponent(
+      searchQuery
+    )}&per_page=${limit}`
+  ) as {
+    items: Array<{
+      full_name: string;
+      description: string;
+      stargazers_count: number;
+      html_url: string;
+      id: string;
+    }>;
+  };
+  const repos = response.items || [];
+
+  return (
+    <>
+      {repos.length > 0 ? (
+        repos.map((repo) => (
+          <Result
+            title={repo.full_name}
+            message={`${repo.description || repo.full_name} (🌟${
+              repo.stargazers_count
+            })`}
+            link={repo.html_url}
+            icon={<FaGithubAlt />}
+            key={repo.id}
+          />
+        ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={t('noResult')}
+          icon={<FaInfoCircle />}
+        />
+      )}
+    </>
+  );
+};
+
+const GithubSearchCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('providers.githubSearch')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default GithubSearchCard;
--- a/components/cards/providers/GitLab.tsx
+++ b/components/cards/providers/GitLab.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaGitlab } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const GitLabCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [
+    normalizedQuery,
+    `${lowerCase}-dev`,
+    `${lowerCase}-org`,
+    `${lowerCase}-team`,
+    `${lowerCase}hq`,
+  ];
+
+  return (
+    <Card title={t('providers.gitlab')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            prefix="gitlab.com/"
+            service="gitlab"
+            message={`Open gitlab.com/${name}`}
+            link={`https://gitlab.com/${name}`}
+            icon={<FaGitlab />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default GitLabCard;
--- a/components/cards/providers/Heroku.tsx
+++ b/components/cards/providers/Heroku.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { DiHeroku } from 'react-icons/di';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const HerokuCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.heroku')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.herokuapp.com`}
+            service="existence"
+            message="Go to Heroku"
+            link={`https://${name}.herokuapp.com`}
+            icon={<DiHeroku />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default HerokuCard;
--- a/components/cards/providers/HexPm.tsx
+++ b/components/cards/providers/HexPm.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SiElixir } from 'react-icons/si';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const HexPmCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query);
+  const lowerCase = normalizedQuery.toLowerCase();
+  const names = [normalizedQuery];
+  const moreNames = [`${lowerCase}-ex`];
+
+  return (
+    <Card title={t('providers.hexpm')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`hex.pm/packages/${name}`}
+            service="existence"
+            message="Go to Hex"
+            link={`https://hex.pm/packages/${name}`}
+            icon={<SiElixir />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default HexPmCard;
--- a/components/cards/providers/Homebrew.tsx
+++ b/components/cards/providers/Homebrew.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { IoIosBeer } from 'react-icons/io';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, ExistentialAvailability } from '../core';
+
+const HomebrewCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query);
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.homebrew')}>
+      <Repeater items={names}>
+        {(name) => (
+          <>
+            <ExistentialAvailability
+              name={name}
+              target={`https://formulae.brew.sh/api/formula/${name}.json`}
+              message="Go to formula page"
+              link={`https://formulae.brew.sh/formula/${name}`}
+              icon={<IoIosBeer />}
+            />
+            <ExistentialAvailability
+              name={name}
+              target={`https://formulae.brew.sh/api/cask/${name}.json`}
+              message="Go to formula page"
+              link={`https://formulae.brew.sh/cask/${name}`}
+              suffix=" (Cask)"
+              icon={<IoIosBeer />}
+            />
+          </>
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default HomebrewCard;
--- a/components/cards/providers/Instagram.tsx
+++ b/components/cards/providers/Instagram.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaInstagram } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const InstagramCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, { allowHyphens: false });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [normalizedQuery];
+  const moreNames = [`${lowerCase}app`, `${lowerCase}_hq`, `get.${lowerCase}`];
+
+  return (
+    <Card title={t('providers.instagram')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            service="instagram"
+            link={`https://www.instagram.com/${name}/`}
+            message="Go to Instagram"
+            icon={<FaInstagram />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default InstagramCard;
--- a/components/cards/providers/JsOrg.tsx
+++ b/components/cards/providers/JsOrg.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaJsSquare } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const JsOrgCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.jsorg')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.js.org`}
+            service="jsorg"
+            message="Go to js.org repository"
+            link="https://github.com/js-org/js.org"
+            messageIfTaken={`Go to ${name}.js.org`}
+            linkIfTaken={`https://${name}.js.org`}
+            icon={<FaJsSquare />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default JsOrgCard;
--- a/components/cards/providers/Linux.tsx
+++ b/components/cards/providers/Linux.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SiDebian, SiUbuntu, SiArchlinux } from 'react-icons/si';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const LinuxCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query);
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.linux')}>
+      <Repeater items={names}>
+        {(name) => (
+          <>
+            <DedicatedAvailability
+              name={name}
+              service="archlinux"
+              message="Go to ArchLinux.org"
+              link={`https://archlinux.org/packages/?sort=&q=${name}`}
+              icon={<SiArchlinux />}
+            />
+            <DedicatedAvailability
+              name={name}
+              service="launchpad"
+              message="Go to Launchpad"
+              link={`https://launchpad.net/ubuntu/+source/${name}`}
+              icon={<SiUbuntu />}
+            />
+            <DedicatedAvailability
+              name={name}
+              service="debian"
+              message="Go to debian.org"
+              link={`https://packages.debian.org/buster/${name}`}
+              icon={<SiDebian />}
+            />
+          </>
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default LinuxCard;
--- a/components/cards/providers/ModLand.tsx
+++ b/components/cards/providers/ModLand.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SiDeno } from 'react-icons/si';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const ModLandCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.modland')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.mod.land`}
+            service="dns"
+            message="Go to mod.land repository"
+            link="https://github.com/denosaurs/mod.land"
+            messageIfTaken={`Go to ${name}.mod.land`}
+            linkIfTaken={`https://${name}.mod.land`}
+            icon={<SiDeno />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default ModLandCard;
--- a/components/cards/providers/Netlify.tsx
+++ b/components/cards/providers/Netlify.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { normalize } from '../../../util/text';
+import { NetlifyIcon } from '../../Icons';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const NetlifyCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.netlify')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.netlify.com`}
+            service="existence"
+            message={`Go to ${name}.netlify.com`}
+            link={`https://${name}.netlify.com`}
+            icon={<NetlifyIcon />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default NetlifyCard;
--- a/components/cards/providers/Npm.tsx
+++ b/components/cards/providers/Npm.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { RiNpmjsFill, RiNpmjsLine } from 'react-icons/ri';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const NpmCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+  const moreNames = [`${lowerCase}-js`, `${lowerCase}js`];
+
+  return (
+    <Card title={t('providers.npm')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <>
+            <DedicatedAvailability
+              name={name}
+              service="npm"
+              message={`See ${name}`}
+              link={`https://www.npmjs.com/package/${name}`}
+              messageIfTaken={`See ${name} in npmjs.com`}
+              linkIfTaken={`https://www.npmjs.com/package/${name}`}
+              icon={<RiNpmjsFill />}
+            />
+            <DedicatedAvailability
+              name={name}
+              service="npm-org"
+              message="Create Org"
+              link="https://www.npmjs.com/org/create"
+              messageIfTaken={`See @${name} in npmjs.com`}
+              linkIfTaken={`https://www.npmjs.com/org/${name}`}
+              prefix="@"
+              suffix=" (Organization)"
+              icon={<RiNpmjsLine />}
+            />
+          </>
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default NpmCard;
--- a/components/cards/providers/Nta.tsx
+++ b/components/cards/providers/Nta.tsx
@@ -0,0 +1,45 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaInfoCircle } from 'react-icons/fa';
+import { RiBuilding2Fill } from 'react-icons/ri';
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const term = encodeURIComponent(query);
+  const response = useFetch(`/api/services/nta/${term}`) as {
+    result: Array<{ name: string; phoneticName: string }>;
+  };
+
+  const apps = response.result;
+
+  return (
+    <>
+      {apps.length > 0 ? (
+        apps.map((app, i) => (
+          <Result
+            title={app.name}
+            message={`Phonetic: ${app.phoneticName}`}
+            icon={<RiBuilding2Fill />}
+            key={i}
+          />
+        ))
+      ) : (
+        <Result title={t('noResult')} icon={<FaInfoCircle />} />
+      )}
+    </>
+  );
+};
+
+const NtaCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('providers.nta')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default NtaCard;
--- a/components/cards/providers/Ocaml.tsx
+++ b/components/cards/providers/Ocaml.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { normalize } from '../../../util/text';
+import { OcamlIcon } from '../../Icons';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const OcamlCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, { allowUnderscore: false });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.ocaml')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`opam.ocaml.org/packages/${name}/`}
+            service="existence"
+            message="Go to opam"
+            link={`https://opam.ocaml.org/packages/${name}/`}
+            icon={<OcamlIcon />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default OcamlCard;
--- a/components/cards/providers/PlayStore.tsx
+++ b/components/cards/providers/PlayStore.tsx
@@ -0,0 +1,56 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaInfoCircle } from 'react-icons/fa';
+import { IoMdAppstore } from 'react-icons/io';
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const response = useFetch(
+    `/api/services/playstore/${encodeURIComponent(query)}}`
+  ) as {
+    result: Array<{
+      id: string;
+      name: string;
+      description: string;
+      author: string;
+      url: string;
+    }>;
+  };
+  const apps = response.result;
+
+  return (
+    <>
+      {apps && apps.length > 0 ? (
+        apps.map((app) => (
+          <Result
+            title={app.name.split(/\s[－–—\-:]\s/)[0]}
+            message={`${app.author}: ${app.description}`}
+            link={app.url}
+            icon={<IoMdAppstore />}
+            key={app.id}
+          />
+        ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={t('noResult')}
+          icon={<FaInfoCircle />}
+        />
+      )}
+    </>
+  );
+};
+
+const PlayStoreCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('providers.playStore')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default PlayStoreCard;
--- a/components/cards/providers/ProductHunt.tsx
+++ b/components/cards/providers/ProductHunt.tsx
@@ -0,0 +1,192 @@
+import useFetch from 'fetch-suspense';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaProductHunt } from 'react-icons/fa';
+import { Card, Result } from '../core';
+
+const Search: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const response = useFetch(
+    `https://0h4smabbsg-dsn.algolia.net/1/indexes/Post_production?query=${encodeURIComponent(
+      query
+    )}`,
+    {
+      headers: {
+        'X-Algolia-API-Key': '9670d2d619b9d07859448d7628eea5f3',
+        'X-Algolia-Application-Id': '0H4SMABBSG',
+      },
+    }
+  ) as Response;
+
+  const hits = response.hits;
+
+  return (
+    <>
+      {hits.length > 0 ? (
+        hits
+          .slice(0, 5)
+          .map((hit) => (
+            <Result
+              title={hit.name}
+              message={`${hit.tagline} (⬆️ ${hit.vote_count})`}
+              link={`https://www.producthunt.com${hit.url}`}
+              icon={<FaProductHunt />}
+              key={hit.id}
+            />
+          ))
+      ) : (
+        <Result
+          title={t('noResult')}
+          message={t('noResult')}
+          icon={<FaProductHunt />}
+        />
+      )}
+    </>
+  );
+};
+
+const ProductHuntCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card title={t('providers.productHunt')}>
+      <Search query={query} />
+    </Card>
+  );
+};
+
+export default ProductHuntCard;
+
+interface Response {
+  hits: Hit[];
+  nbHits: number;
+  page: number;
+  nbPages: number;
+  hitsPerPage: number;
+  exhaustiveNbHits: boolean;
+  exhaustiveTypo: boolean;
+  query: Query;
+  params: string;
+  processingTimeMS: number;
+}
+
+interface Hit {
+  comments_count: number;
+  name: string;
+  slug: string;
+  tagline: string;
+  topics: Topic[];
+  id: number;
+  user_id: number;
+  thumbnail_image_uuid?: string;
+  created_at: string;
+  featured_at: null | string;
+  exclusive: null;
+  is_featured: boolean;
+  media: Media[];
+  posted_date: number;
+  product_links: ProductLink[];
+  product_state: ProductState;
+  shortened_url: string;
+  text_content: any[];
+  url: string;
+  user: User;
+  vote_count: number;
+  objectID: string;
+  _highlightResult: HighlightResult;
+  thumbnail?: Thumbnail;
+}
+
+interface HighlightResult {
+  name: Name;
+  tagline: Name;
+}
+
+interface Name {
+  value: string;
+  matchLevel: MatchLevel;
+  fullyHighlighted?: boolean;
+  matchedWords: Query[];
+}
+
+export enum MatchLevel {
+  Full = 'full',
+  None = 'none',
+}
+
+export enum Query {
+  Namae = 'namae',
+}
+
+interface Media {
+  id: number;
+  metadata: MediaMetadata;
+  original_height: number;
+  original_width: number;
+  image_url: string;
+  image_uuid: string;
+  media_type: MediaType;
+}
+
+export enum MediaType {
+  Image = 'image',
+  Video = 'video',
+}
+
+interface MediaMetadata {
+  video_id?: null | string;
+  url?: null | string;
+  kindle_asin?: null;
+  platform?: null;
+}
+
+interface ProductLink {
+  store_name: StoreName;
+  id: number;
+  url: string;
+}
+
+export enum StoreName {
+  AppStore = 'App Store',
+  Chrome = 'Chrome',
+  PlayStore = 'Play Store',
+  Website = 'Website',
+}
+
+export enum ProductState {
+  Default = 'default',
+  NoLongerOnline = 'no_longer_online',
+}
+
+interface Thumbnail {
+  image_uuid: string;
+  media_type: MediaType;
+  metadata: ThumbnailMetadata;
+  original_height: number;
+  id: number;
+  original_width: number;
+  image_url: string;
+}
+
+interface ThumbnailMetadata {}
+
+interface Topic {
+  id: number;
+  name: string;
+  description: string;
+  slug: string;
+  followers_count: number;
+  image_uuid: string;
+}
+
+interface User {
+  username: string;
+  id: number;
+  twitter_username: null | string;
+  name: string;
+  headline: null | string;
+  image_urls: { [key: string]: string };
+  link: string;
+  avatar_url: string;
+  is_maker: boolean;
+}
--- a/components/cards/providers/PyPI.tsx
+++ b/components/cards/providers/PyPI.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaPython } from 'react-icons/fa';
+
+import { capitalize, normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const PypiCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query);
+  const capitalCase = capitalize(normalizedQuery);
+  const names = [normalizedQuery];
+  const moreNames = [`Py${capitalCase}`];
+
+  return (
+    <Card title={t('providers.pypi')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`pypi.org/pypi/${name}/json`}
+            service="existence"
+            message="Read Python Packaging User Guide"
+            link="https://packaging.python.org/"
+            messageIfTaken="Go to PyPI"
+            linkIfTaken={`https://pypi.org/project/${name}`}
+            icon={<FaPython />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default PypiCard;
--- a/components/cards/providers/RubyGems.tsx
+++ b/components/cards/providers/RubyGems.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { SiRubygems } from 'react-icons/si';
+import { normalize } from '../../../util/text';
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const RubyGemsCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query);
+  const lowerCase = normalizedQuery.toLowerCase();
+  const names = [normalizedQuery];
+  const moreNames = [`${lowerCase}-rb`];
+
+  return (
+    <Card title={t('providers.rubygems')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`rubygems.org/gems/${name}`}
+            service="existence"
+            message="Go to RubyGems"
+            link={`https://rubygems.org/gems/${name}`}
+            icon={<SiRubygems />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default RubyGemsCard;
--- a/components/cards/providers/S3.tsx
+++ b/components/cards/providers/S3.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaAws } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const S3Card: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.s3')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={`${name}.s3.amazonaws.com`}
+            service="existence"
+            message={`Go to ${name}.s3.amazonaws.com`}
+            link={`https://${name}.s3.amazonaws.com`}
+            suffix=".s3.amazonaws.com"
+            icon={<FaAws />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default S3Card;
--- a/components/cards/providers/Slack.tsx
+++ b/components/cards/providers/Slack.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaSlack } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, DedicatedAvailability, Repeater } from '../core';
+
+const SlackCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, { allowUnderscore: false });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.slack')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            service="slack"
+            message="Create Slack Team"
+            link="https://slack.com/create"
+            messageIfTaken={`Go to ${name}.slack.com`}
+            linkIfTaken={`https://${name}.slack.com`}
+            suffix=".slack.com"
+            icon={<FaSlack />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default SlackCard;
--- a/components/cards/providers/Subreddit.tsx
+++ b/components/cards/providers/Subreddit.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaReddit } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const SubredditCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: true,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [normalizedQuery];
+  const moreNames = [`get${lowerCase}`, `${lowerCase}_team`];
+
+  return (
+    <Card title={t('providers.reddit')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            service="reddit" // route to http://namae.dev/api/services/reddit/<query> which is /api/services/reddit/[query].ts on GitHub
+            message={`Go to reddit.com/r/${name}`}
+            link={`https://reddit.com/r/${name}`}
+            prefix="reddit.com/r/"
+            icon={<FaReddit />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default SubredditCard;
--- a/components/cards/providers/Twitter.tsx
+++ b/components/cards/providers/Twitter.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaTwitter } from 'react-icons/fa';
+
+import { capitalize, normalize } from '../../../util/text';
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const TwitterCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+
+  const normalizedQuery = normalize(query, { allowHyphens: false });
+  const lowerCase = normalizedQuery.toLowerCase();
+  const capitalCase = capitalize(normalizedQuery);
+
+  const names = [
+    normalizedQuery,
+    `${lowerCase}hq`,
+    `${capitalCase}App`,
+    `${lowerCase}_team`,
+    `${lowerCase}_support`,
+  ];
+  const moreNames = [
+    `hey${lowerCase}`,
+    `${lowerCase}_org`,
+    `${lowerCase}_app`,
+    `${capitalCase}JS`,
+  ];
+
+  return (
+    <Card title={t('providers.twitter')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={name}
+            query={name}
+            service="twitter"
+            message={`Go to twitter.com/${name}`}
+            link={`https://twitter.com/${name}`}
+            icon={<FaTwitter />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default TwitterCard;
--- a/components/cards/providers/Vercel.tsx
+++ b/components/cards/providers/Vercel.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { normalize } from '../../../util/text';
+import { NowIcon } from '../../Icons';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const VercelCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    allowUnderscore: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [lowerCase];
+
+  return (
+    <Card title={t('providers.now')}>
+      <Repeater items={names}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`${name}.vercel.app`}
+            service="existence"
+            message={`Go to ${name}.vercel.app`}
+            link={`https://${name}.vercel.app`}
+            icon={<NowIcon />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default VercelCard;
--- a/components/cards/providers/YouTube.tsx
+++ b/components/cards/providers/YouTube.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaYoutube } from 'react-icons/fa';
+import { normalize } from '../../../util/text';
+
+import { Card, Repeater, DedicatedAvailability } from '../core';
+
+const YouTubeCard: React.FC<{ query: string }> = ({ query }) => {
+  const { t } = useTranslation();
+  const normalizedQuery = normalize(query, {
+    alphanumeric: false,
+    allowUnderscore: false,
+    allowHyphens: false,
+  });
+  const lowerCase = normalizedQuery.toLowerCase();
+
+  const names = [normalizedQuery];
+  const moreNames = [`${lowerCase}app`, `${lowerCase}team`, `${lowerCase}hq`];
+
+  return (
+    <Card title={t('providers.youtube')}>
+      <Repeater items={names} moreItems={moreNames}>
+        {(name) => (
+          <DedicatedAvailability
+            name={`youtube.com/c/${name}`}
+            service="existence"
+            message={`Go to youtube.com/c/${name}`}
+            link={`https://www.youtube.com/c/${name}`}
+            icon={<FaYoutube />}
+          />
+        )}
+      </Repeater>
+    </Card>
+  );
+};
+
+export default YouTubeCard;