fix: add getting started button

now.json

@@ -1,6 +1,5 @@
 {
   "version": 2,
-  "name": "namae",
   "alias": "namae.dev",
   "builds": [
     {

web/public/locales/en/translation.json

@@ -30,5 +30,6 @@
   "try": "How about this?",
   "showMore": "show more",
   "noResult": "No Result",
-  "exampleQueries": "Try these queries"
+  "gettingStarted": "Getting Started",
+  "pressEnterToSearch": "Press Enter to search"
 }

web/public/locales/ja/translation.json

@@ -1,6 +1,6 @@
 {
-  "title": "その名前、もう使われてる？",
+  "title": "唯一無二の名前を見つけましょう",
-  "description": "あなたの新しいアプリやライブラリにつける「名前」が被っていないか調べましょう。",
+  "description": "namae は、あなたのアプリやライブラリにつける最適な名前を見つけるお手伝いをします。",
   "placeholder": "検索",
   "providers": {
     "domains": "ドメイン",
@@ -30,5 +30,6 @@
   "try": "これはどう？",
   "showMore": "もっと見る",
   "noResult": "該当なし",
-  "exampleQueries": "これらのワードでお試しください"
+  "gettingStarted": "試してみる",
+  "pressEnterToSearch": "エンターキーで検索"
 }

web/src/components/Form.tsx

@@ -75,9 +75,7 @@ const Form: React.FC<{
         />
         {isFocused && (
           <Tips>
-            <span>
+            <span>{t('pressEnterToSearch')}</span>
-              Press <kbd>Enter</kbd> to search
-            </span>
           </Tips>
         )}
       </form>

web/src/components/Welcome.tsx

@@ -22,46 +22,26 @@ import {IoIosBeer} from 'react-icons/io';
 import {DiRust, DiHeroku} from 'react-icons/di';
 
 import {SpectrumIcon, NowIcon, NetlifyIcon, OcamlIcon} from './Icons';
-import {shuffleArray} from '../util/array';
 import {mobile} from '../util/css';
 import {sendExampleQueryEvent} from '../util/analytics';
 
-const QUERY_WORDS = [
-  'Name',
-  'Colorful',
-  'Ghost',
-  'Animate',
-  'Graph',
-  'Compile',
-  'Crop',
-  'Test',
-  'Cat',
-  'Machine',
-  'Craft',
-];
-
 const Welcome: React.FC = () => {
   const {t} = useTranslation();
 
-  const queries = shuffleArray(QUERY_WORDS).slice(0, 5);
-
   return (
     <Container>
       <Hero>
         <HeroTitle>{t('title')}</HeroTitle>
         <HeroText>{t('description')}</HeroText>
         <ButtonContainer>
-          <h5>{t('exampleQueries')}</h5>
           <List>
-            {queries.map((query) => (
+            <ListButton>
-              <ListButton key={query}>
+              <Link
-                <Link
+                to="/s/namae"
-                  to={`/s/${query}`}
+                onClick={() => sendExampleQueryEvent('namae')}>
-                  onClick={() => sendExampleQueryEvent(query)}>
+                {t('gettingStarted')}
-                  {query}
+              </Link>
-                </Link>
+            </ListButton>
-              </ListButton>
-            ))}
           </List>
         </ButtonContainer>
       </Hero>
@@ -161,7 +141,7 @@ const HeroTitle = styled.h1`
 
 const HeroText = styled.p`
   font-size: 1.2em;
-  font-weight: 300;
+  font-weight: 400;
   line-height: 1.3em;
   color: #3c3c3c;
 `;
@@ -178,7 +158,7 @@ const Hero = styled.div`
 `;
 
 const ButtonContainer = styled.div`
-  margin: 30px 0 0 0;
+  margin: 10px 0 0 0;
 `;
 
 const List = styled.div`
@@ -244,7 +224,7 @@ const ListButton = styled.div`
 
   a {
     color: black;
-    padding: 10px;
+    padding: 12px 25px;
     border: 1px solid black;
     border-radius: 2px;
     text-decoration: none;

web/src/util/i18n.ts

@@ -5,6 +5,8 @@ import XHR from 'i18next-xhr-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import {initReactI18next} from 'react-i18next';
 
+const TRANSLATION_VERSION = '1.11';
+
 i18n
   .use(Backend)
   .use(LanguageDetector)
@@ -14,7 +16,7 @@ i18n
       backends: [LocalStorageBackend, XHR],
       backendOptions: [
         {
-          versions: {en: '1.10', ja: '1.10'},
+          versions: {en: TRANSLATION_VERSION, ja: TRANSLATION_VERSION},
         },
       ],
     },