78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
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%;
|
|
`
|
|
|
|
const Quote = styled.blockquote`
|
|
margin-top: 30px;
|
|
font-family: Montserrat;
|
|
font-size: ${SIZES.medium};
|
|
color: ${props => props.theme.colors.primary};
|
|
`
|
|
const QuoteAuthor = styled(P)`
|
|
font-style: italic;
|
|
`
|
|
|
|
class Welcome extends Component {
|
|
render() {
|
|
const todaysQuote = Quotes[getDayOfYear(new Date()) % Quotes.length]
|
|
const { theme } = this.props
|
|
return (
|
|
<WelcomeGrid>
|
|
<Helmet>
|
|
<meta
|
|
name="description"
|
|
label="Connect with your soul through a simple, beautiful journaling experience from any device."
|
|
/>
|
|
</Helmet>
|
|
<div
|
|
style={{
|
|
fontFamily: "cursive",
|
|
fontSize: 100,
|
|
height: 60,
|
|
}}
|
|
>
|
|
"
|
|
</div>
|
|
<Quote>{todaysQuote.quote}</Quote>
|
|
<QuoteAuthor style={{ letterSpacing: 1.1, marginBottom: 30 }}>
|
|
- {todaysQuote.author}
|
|
</QuoteAuthor>
|
|
<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>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withTheme(Welcome)
|