chore: home screen styles

src/components/Icon/Icon.js

@@ -9,10 +9,15 @@ import {
   ChevronRight,
   Circle,
   Clock,
+  CloudOff,
+  Download,
   Edit2,
   LogIn,
+  Monitor,
   Moon,
+  Package,
   Search,
+  Smartphone,
   Sun,
   User,
 } from "react-feather"
@@ -34,31 +39,36 @@ const IconBase = styled.div`
   }
   &:hover {
     background-color: ${props => !props.disabled && props.theme.colors.hover};
-    cursor: pointer;
+    cursor: ${props => !props.disabled && "pointer"};
   }
 `
 
-const Icon = ({ name, tabindex, label, labelRight, ...rest }) => (
+const Icon = ({ name, tabindex, label, labelRight, size, ...rest }) => (
   <IconBase tabIndex={tabindex} {...rest}>
     {label && !labelRight && (
       <span style={{ margin: "3px -3px 3px 3px", fontWeight: 700 }}>
         {label}
       </span>
     )}
-    {name === "ArrowRightCircle" && <ArrowRightCircle />}
+    {name === "ArrowRightCircle" && <ArrowRightCircle size={size} />}
-    {name === "ArrowRight" && <ArrowRight />}
+    {name === "ArrowRight" && <ArrowRight size={size} />}
-    {name === "Book" && <Book />}
+    {name === "Book" && <Book size={size} />}
-    {name === "Calendar" && <Calendar />}
+    {name === "Calendar" && <Calendar size={size} />}
-    {name === "ChevronLeft" && <ChevronLeft />}
+    {name === "ChevronLeft" && <ChevronLeft size={size} />}
-    {name === "ChevronRight" && <ChevronRight />}
+    {name === "ChevronRight" && <ChevronRight size={size} />}
-    {name === "Circle" && <Circle />}
+    {name === "Circle" && <Circle size={size} />}
-    {name === "Clock" && <Clock />}
+    {name === "Clock" && <Clock size={size} />}
-    {name === "Edit2" && <Edit2 />}
+    {name === "CloudOff" && <CloudOff size={size} />}
-    {name === "LogIn" && <LogIn />}
+    {name === "Download" && <Download size={size} />}
-    {name === "Moon" && <Moon />}
+    {name === "Edit2" && <Edit2 size={size} />}
-    {name === "Search" && <Search />}
+    {name === "LogIn" && <LogIn size={size} />}
-    {name === "Sun" && <Sun />}
+    {name === "Monitor" && <Monitor size={size} />}
-    {name === "User" && <User />}
+    {name === "Moon" && <Moon size={size} />}
+    {name === "Package" && <Package size={size} />}
+    {name === "Search" && <Search size={size} />}
+    {name === "Smartphone" && <Smartphone size={size} />}
+    {name === "Sun" && <Sun size={size} />}
+    {name === "User" && <User size={size} />}
     {label && labelRight && (
       <span
         style={{

src/components/screens/Start/Start.js

@@ -3,23 +3,92 @@ import { Link } from "react-router-dom"
 import styled from "@emotion/styled"
 import { withTheme } from "emotion-theming"
 
+import { SIZES } from "../../../styles/constants"
 import { Button, P } from "../../elements"
 import { todayUrl } from "../../../utils/date"
+import Icon from "../../Icon"
+import Logo from "../../Logo"
 
-const Title = styled.h1``
 const StartGrid = styled.div`
   margin-top: 30px;
   line-height: 1.5;
   color: ${props => props.theme.colors.primary};
   height: 100%;
 `
+const FeatureGrid = styled.div`
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-gap: 30px;
+`
+const FeatureRow = styled.div`
+  display: grid;
+  grid-template-columns: 120px 3fr;
+`
+const FeatureText = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+const FeatureTitle = styled.div`
+  font-size: ${SIZES["normal"]};
+  font-weight: 600;
+  color: ${props => props.theme.colors.secondary};
+`
+const FeatureDescription = styled.div`
+  color: ${props => props.theme.colors.secondary};
+`
+const Footer = styled.footer`
+  margin-top: 120px;
+  padding: 30px 0px;
+  text-align: center;
+  color: ${props => props.theme.colors.secondary};
+`
+const FooterLink = styled.a`
+  cursor: pointer;
+  margin: 10px;
+  &:hover {
+    color: ${props => props.theme.colors.tertiary};
+  }
+`
+
+const features = [
+  {
+    icon: "Monitor",
+    title: "Cross Platform",
+    desc:
+      "Write from any internet connected device, with pages optimized for all screen sizes",
+  },
+  {
+    icon: "Package",
+    title: "Install as an App",
+    desc:
+      "Add to your home screen on iPhone or Adroid to use it like you would an app",
+  },
+  {
+    icon: "CloudOff",
+    title: "Offline Capable",
+    desc:
+      "Record thoughts as they come to you, whether you have internet or not, your entries are saved when you get a connection",
+  },
+  {
+    icon: "Search",
+    title: "Full Text Search",
+    desc:
+      "Search through your entries by text to quickly find past entries and recall what you've written",
+  },
+  {
+    icon: "Download",
+    title: "Export",
+    desc:
+      "Download all of your journal entries at any time for back-up or safe keeping ",
+  },
+]
 
 class Start extends Component {
   render() {
     const { theme } = this.props
     return (
       <StartGrid>
-        <Title>Record what's on your mind, from anywhere</Title>
+        <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
           day. Sol Journal works offline and from any device. Use it as a place
@@ -28,6 +97,47 @@ class Start extends Component {
         <Link to={todayUrl()} style={{ textDecoration: "none" }}>
           <Button colors={theme.colors}>Write about today</Button>
         </Link>
+        <div
+          style={{
+            margin: "60px 0px",
+            borderTop: `1px solid ${theme.colors.quarternary}`,
+          }}
+        />
+        <h2>Features</h2>
+        <P style={{ letterSpacing: 1.1, marginBottom: 30 }}>
+          Lightweight with the functionalities you need for journaling, and none
+          of the things you don't:
+        </P>
+        <FeatureGrid>
+          {features.map(feature => (
+            <FeatureRow>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Icon disabled name={feature.icon} size={60} />
+              </div>
+              <FeatureText>
+                <FeatureTitle>{feature.title}</FeatureTitle>
+                <FeatureDescription>{feature.desc}</FeatureDescription>
+              </FeatureText>
+            </FeatureRow>
+          ))}
+        </FeatureGrid>
+        <Footer>
+          <div>
+            <Logo color={theme.colors.logo} />
+          </div>
+          <div>
+            <FooterLink>View on GitHub</FooterLink>
+            <FooterLink>Terms of Service</FooterLink>
+            <FooterLink>Privacy Policy</FooterLink>
+          </div>
+          <div>&copy; 2019</div>
+        </Footer>
       </StartGrid>
     )
   }