feat: welcome page

web/src/App.js

@@ -4,7 +4,9 @@ import styled, { createGlobalStyle } from 'styled-components'
 import { useDeferredState } from './hooks/state'
 import { mobile } from './util/css'
 
+import Welcome from './components/Welcome'
 import Footer from './components/Footer'
+import { Cards, CardContainer } from './components/Cards'
 
 import GithubCard from './components/cards/GithubCard'
 import DomainCard from './components/cards/DomainCard'
@@ -38,9 +40,8 @@ export default function App() {
           </InputContainer>
         </Header>
 
-        {queryGiven && (
+        {queryGiven ? (
           <Cards>
-            <CardHeader>Result for {query}</CardHeader>
             <CardContainer>
               <DomainCard name={query} />
               <GithubCard name={query} />
@@ -55,6 +56,8 @@ export default function App() {
             </CardContainer>
             <EventReporter query={query} />
           </Cards>
+        ) : (
+          <Welcome />
         )}
         <Footer />
       </Content>
@@ -63,12 +66,28 @@ export default function App() {
 }
 
 const GlobalStyle = createGlobalStyle`
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+}
+
 body {
   background: #ffffff;
 
   ${mobile} {
     background: #f5f5f5;
   }
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 `
 
@@ -89,8 +108,8 @@ const InputContainer = styled.div`
   transform: translateY(40px);
   padding: 20px;
   background: #ffffff;
-  box-shadow: 0 10px 20px 0 #3c94fa;
-  border-radius: 4px;
+  box-shadow: 0 10px 20px 0 #c7dcf7;
+  border-radius: 20px;
 
   ${mobile} {
     transform: translateY(20px);
@@ -112,48 +131,20 @@ const Logo = styled.div`
 
 const Input = styled.input.attrs({
   type: 'text',
-  placeholder: ['awesome-library', 'stunning-package', 'magnificent-app'][
-    Math.floor(Math.random() * 3)
-  ],
+  placeholder: 'search',
   autocomplete: 'off',
   autocorrect: 'off',
   autocapitalize: 'off',
   spellcheck: 'false',
 })`
   width: 100%;
+  border: none;
   outline: none;
   text-align: center;
-  font-size: 5rem;
   font-family: monospace;
-  border: none;
+  font-size: 5rem;
 
   ${mobile} {
-    font-size: 2rem;
-  }
-`
-
-const Cards = styled.div`
-  margin-top: 40px;
-`
-
-const CardHeader = styled.div`
-  margin-bottom: 20px;
-  font-size: 1.2rem;
-  font-weight: bold;
-  text-align: center;
-
-  ${mobile} {
-    padding-left: 20px;
-    text-align: left;
-  }
-`
-const CardContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  flex-wrap: wrap;
-
-  ${mobile} {
-    flex-direction: column;
+    font-size: 1.5rem;
   }
 `

web/src/components/Cards.js

@@ -32,11 +32,26 @@ export function Card({ title, nameList, alternativeList = [], children }) {
   )
 }
 
+export const Cards = styled.div`
+  margin-top: 40px;
+`
+
+export const CardContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  ${mobile} {
+    flex-direction: column;
+  }
+`
+
 const CardWrapper = styled.div`
-  margin-bottom: 40px;
   padding: 40px;
 
   ${mobile} {
+    margin-bottom: 40px;
     padding: 0px;
   }
 `

web/src/components/Footer.js

@@ -8,19 +8,19 @@ export default function Footer() {
   return (
     <Container>
       <p>
-        Made by U with{' '}
+        Made by U with{'  '}
         <span role="img" aria-label="coffee">
           ☕️
         </span>
-        <br />
-        <br />
+      </p>
+      <Links>
         <ExternalLink href="https://twitter.com/uetschy">
           <FaTwitter />
         </ExternalLink>{' '}
         <ExternalLink href="https://github.com/uetchy/namae">
           <FaGithubAlt />
         </ExternalLink>
-      </p>
+      </Links>
     </Container>
   )
 }
@@ -31,4 +31,18 @@ const Container = styled.footer`
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 0.8em;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+`
+
+const Links = styled.div`
+  margin-left: 15px;
+  display: flex;
+  align-items: flex-end;
+
+  a {
+    margin-right: 5px;
+    color: black;
+  }
 `

web/src/components/Welcome.js

@@ -0,0 +1,109 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { FaMapSigns } from 'react-icons/fa'
+import { FaGithub } from 'react-icons/fa'
+import { FaNpm } from 'react-icons/fa'
+import { FaPython } from 'react-icons/fa'
+import { IoIosBeer } from 'react-icons/io'
+import { DiRust } from 'react-icons/di'
+import { FaJsSquare } from 'react-icons/fa'
+import { FaAws } from 'react-icons/fa'
+import { FaTwitter } from 'react-icons/fa'
+import { FaSlack } from 'react-icons/fa'
+
+import { mobile } from '../util/css'
+
+export default function Welcome() {
+  return (
+    <Container>
+      <Header>name your brand new project</Header>
+      <p>
+        namæ helps you by searching around package registries and domains to see
+        if your desired name is already taken.
+      </p>
+      <ul>
+        <List>
+          <ListItem>
+            <FaMapSigns /> Domains
+          </ListItem>
+          <ListItem>
+            <FaGithub /> GitHub Organization
+          </ListItem>
+          <ListItem>
+            <FaNpm /> npm
+          </ListItem>
+          <ListItem>
+            <FaPython /> PyPI
+          </ListItem>
+          <ListItem>
+            <IoIosBeer /> Homebrew
+          </ListItem>
+          <ListItem>
+            <DiRust /> crates.io (Rust)
+          </ListItem>
+          <ListItem>
+            <FaJsSquare /> js.org
+          </ListItem>
+          <ListItem>
+            <FaAws /> AWS S3 Bucket
+          </ListItem>
+          <ListItem>
+            <FaTwitter /> Twitter
+          </ListItem>
+          <ListItem>
+            <FaSlack /> Slack
+          </ListItem>
+        </List>
+      </ul>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  text-align: center;
+  padding: 0 40px;
+  font-size: 1.5rem;
+  line-height: 1.6em;
+
+  ${mobile} {
+    text-align: left;
+  }
+`
+
+const Header = styled.h1`
+  font-size: 2em;
+  padding: 10px 0 40px;
+`
+
+const List = styled.div`
+  margin-top: 40px;
+  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  background-image: linear-gradient(180deg, #ec7951 0%, #f03054 100%);
+  color: white;
+  border-radius: 4px;
+  font-size: 1rem;
+
+  ${mobile} {
+    flex-direction: column;
+  }
+`
+
+const ListItem = styled.div`
+  margin: 15px;
+  display: flex;
+  align-items: center;
+  line-height: 1rem;
+
+  ${mobile} {
+    margin: 10px 0;
+  }
+
+  svg {
+    margin-right: 5px;
+  }
+`

web/src/index.css

@@ -1,19 +0,0 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

web/src/index.js

@@ -1,13 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import ReactGA from 'react-ga'
-import './index.css'
 import App from './App'
-import * as serviceWorker from './serviceWorker'
+// import * as serviceWorker from './serviceWorker'
 
 ReactDOM.render(<App />, document.getElementById('root'))
 
 ReactGA.initialize('UA-28919359-15')
 ReactGA.pageview(window.location.pathname + window.location.search)
 
-serviceWorker.unregister()
+// serviceWorker.unregister()