Rewrite init

client/src/components/Header.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
-import background from "../background.jpg";
+import background from "../assets/images/background.jpg";
 
 const Header = ({ user }) => {
   console.log(user);

client/src/components/LandingPage.js

@@ -1,49 +1,94 @@
-import React from 'react';
-import styled from 'styled-components';
-
+import React from "react";
+import styled from "styled-components";
+import { ReactComponent as SVG } from "../assets/images/Lotus-Flower.svg";
 
 const LandingPage = () => (
-    <Splash id="landing-page">
+  <Splash id="landing-page">
+    <HeroSection>
+      <div style={{ width: "45%" }}>
         <Title>Inspiri</Title>
-        <Tagline>Collect your inspiration.</Tagline>
+        <Tagline>Put your mental health first.</Tagline>
         <SignInButton type="facebook">
-            <SignInType className="fa fa-facebook" ></SignInType>
-            Login With Facebook
+          <SignInType className="fa fa-facebook"></SignInType>
+          Login With Facebook
         </SignInButton>
         <SignInButton type="twitter">
-            <SignInType className="fa fa-twitter"></SignInType>
-            Login With Twitter
+          <SignInType className="fa fa-twitter"></SignInType>
+          Login With Twitter
         </SignInButton>
         <SignInButton type="google">
-            <SignInType className="fa fa-google" ></SignInType>
-            Login With Google
+          <SignInType className="fa fa-google"></SignInType>
+          Login With Google
         </SignInButton>
-    </Splash>
-)
+      </div>
+      <Lotus />
+    </HeroSection>
+
+    <Section>
+      <SectionTitle>Collect your inspiration</SectionTitle>
+      <SectionText>
+        Gather quotes that lift your vibration into your positive thought
+        garden.
+      </SectionText>
+      <Button>Explore Quotes</Button>
+    </Section>
 
+    <Section>
+      <SectionTitle>Journal your journey</SectionTitle>
+      <SectionText>
+        Look back on your moments of gratitude, times of struggle, and prepare
+        yourself to face the day.
+      </SectionText>
+      <Button>Create Your Journal</Button>
+    </Section>
+
+    <Section>
+      <SectionTitle>Breathe.</SectionTitle>
+      <SectionText>Take some time out of your day to be present.</SectionText>
+      <Button>Start a Mindfullness Session</Button>
+    </Section>
+  </Splash>
+);
 
 export default LandingPage;
 
-const Splash = styled.main`
-    text-align: center;
-`
+const Splash = styled.main``;
 
-const Title = styled.h1`
+const HeroSection = styled.section`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  height: 90vh;
+`;
 
-`
+const Title = styled.h1``;
 
 const Tagline = styled.h3`
-    font-style: italic;
-    font-weight: 400;
-`
+  font-style: italic;
+  font-weight: 400;
+`;
 
-const SignInButton = styled.a.attrs( props => ({
-    className: "waves-effect waves-light btn-large",
-    href: `/auth/${props.type}`
-}))`
+const Button = styled.button.attrs(() => ({
+  className: "waves-effect waves-light btn-large",
+}))``;
 
-`
+const SignInButton = styled.a.attrs((props) => ({
+  href: `/auth/${props.type}`,
+  style: { display: "block" },
+}))``;
 
 const SignInType = styled.i`
-    margin-right: 10px;
-`
+  margin-right: 10px;
+`;
+
+const Lotus = styled(SVG)`
+  width: 500px;
+  height: 300px;
+  align-self: center;
+`;
+
+const Section = styled.section``;
+
+const SectionTitle = styled.h2``;
+
+const SectionText = styled.p``;

client/src/index.css

@@ -1,22 +1,25 @@
-html, body, #root {
+@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap");
+
+html,
+body,
+#root {
   height: 100%;
   width: 100%;
 }
 
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+  box-sizing: border-box;
+  font-family: "Nunito", sans-serif;
 }
 
-
 /* === SideNav === */
-.user-view img{
+.user-view img {
   height: 100%;
   width: 100%;
 }
 
-
 /* === CARD === */
 
 .row {
@@ -40,8 +43,9 @@ body {
   justify-content: space-between;
 }
 
-.fa-plus, .fa-times {
-  margin-right: .5em;
+.fa-plus,
+.fa-times {
+  margin-right: 0.5em;
 }
 
 #landing-page {
@@ -50,7 +54,8 @@ body {
 }
 
 #landing-page a {
-  margin: 1.5em auto;
+  margin-top: 1.5rem;
+  width: 300px;
 }
 
 /* === DASHBOARD PAGE === */
@@ -83,4 +88,4 @@ body {
   .card-action {
     height: 100%;
   }
-}
+}