chore: include more quotes, new quote for each day, add to features section, dynamic theme_color

src/routes/Start.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react"
+import { Helmet } from "react-helmet"
 import { Link, StaticQuery, graphql } from "gatsby"
 import Img from "gatsby-image"
 import styled from "@emotion/styled"
@@ -71,6 +72,12 @@ const features = [
     desc:
       "Download all of your journal entries at any time for back-up or safe keeping ",
   },
+  {
+    icon: "Moon",
+    title: "Dark Mode",
+    desc:
+      "Take it easy on your eyes, with an easily accessible toggle from all screens and detection of night hours to turn on automatically",
+  },
 ]
 
 class Start extends Component {
@@ -78,6 +85,12 @@ class Start extends Component {
     const { theme } = this.props
     return (
       <StartGrid>
+        <Helmet>
+          <meta
+            name="description"
+            label="Connect with your soul through a simple, beautiful journaling experience from any of your devices."
+          />
+        </Helmet>
         <h1>Record what's on your mind, from anywhere</h1>
         <P style={{ letterSpacing: 1.1, marginBottom: 30 }}>
           Journaling can improve your health and help you take inventory of your

src/routes/Welcome.js

@@ -1,18 +1,24 @@
 import React, { Component } from "react"
+import { Helmet } from "react-helmet"
 import { Link } from "gatsby"
 import styled from "@emotion/styled"
 import { withTheme } from "emotion-theming"
+import { getDayOfYear } from "date-fns"
 
 import { SIZES } from "styles/constants"
 import { Button, P } from "components/elements"
 import Footer from "components/Footer"
 import { todayUrl } from "utils/date"
 
+import Quotes from "data/quotes.json"
+
 const WelcomeGrid = styled.div`
   text-align: center;
   margin-top: 60px;
   line-height: 1.5;
   color: ${props => props.theme.colors.primary};
+  display: flex;
+  flex-direction: column;
   height: 100%;
 `
 
@@ -28,24 +34,34 @@ const QuoteAuthor = styled(P)`
 
 class Welcome extends Component {
   render() {
+    const todaysQuote = Quotes[getDayOfYear(new Date()) % Quotes.length]
     const { theme } = this.props
     return (
       <WelcomeGrid>
-        <h1>Hello</h1>
-        <Quote>
-          Sucking at something is the first step to being sort of good at
-          something
-        </Quote>
+        <Helmet>
+          <meta
+            name="description"
+            label="Connect with your soul through a simple, beautiful journaling experience from any device."
+          />
+        </Helmet>
+        <div>
+          <h1>Hello</h1>
+        </div>
+        <Quote>{todaysQuote.quote}</Quote>
         <QuoteAuthor style={{ letterSpacing: 1.1, marginBottom: 30 }}>
-          - Jake the Dog
+          - {todaysQuote.author}
         </QuoteAuthor>
-        <P style={{ letterSpacing: 1.1, marginBottom: 30 }}>
-          This your space for wandering thoughts and ideas. Write about whatever
-          is on your mind.
-        </P>
-        <Link to={`/app${todayUrl()}`} style={{ textDecoration: "none" }}>
-          <Button colors={theme.colors}>Write about today</Button>
-        </Link>
+        <div>
+          <P style={{ letterSpacing: 1.1, marginBottom: 30 }}>
+            This your space for wandering thoughts and ideas. Write about
+            whatever is on your mind.
+          </P>
+        </div>
+        <div>
+          <Link to={`/app${todayUrl()}`} style={{ textDecoration: "none" }}>
+            <Button colors={theme.colors}>Write about today</Button>
+          </Link>
+        </div>
         <Footer />
       </WelcomeGrid>
     )