Feature/marshall/create user model

.babelrc

@@ -0,0 +1,26 @@
+{
+  "env": {
+    "development": {
+      "presets": [
+        "next/babel"
+      ]
+    },
+    "production": {
+      "presets": [
+        "next/babel"
+      ]
+    },
+    "test": {
+      "presets": [
+        [
+          "next/babel",
+          {
+            "preset-env": {
+              "modules": "commonjs"
+            }
+          }
+        ]
+      ]
+    }
+  }
+}

.eslintignore

@@ -8,5 +8,7 @@
 /tests/fixtures/**
 /tests/performance/**
 /tmp/**
+next.config.js
+
 
 # Add any other files or folders that you want eslint to ignore

.gitignore

@@ -40,7 +40,7 @@ build/Release
 node_modules/
 jspm_packages/
 package-lock.json
-
+.DS_Store
 # TypeScript v1 declaration files
 typings/
 

.travis.yml

@@ -1,3 +1,6 @@
 language: node_js
 node_js:
   - "node"
+script:
+  - npm run lint
+  - npm test

README.md

@@ -1,2 +1,13 @@
-# project-template
-Document your applications API and general usage
+# Project Help Me #
+
+Help Me is an app that connects Depressed people to each other, essentially, it is a social network for depressed people
+
+## Development ##
+
+* clone the repo *
+* ```cd helpme```
+* ```npm install```
+* ```npm run dev```
+
+
+Antdesign is also used for the components, check <http://ant.design/docs/react/introduce>

components/LandingPage/components/LandingPage.css

@@ -0,0 +1,123 @@
+.LandingPage_footer {
+	background: #001529;
+	color: #ffffff;
+	text-align: center;
+}
+
+.LandingPage_footer > img {
+	width: 50%;
+	height: 50%;
+	margin-bottom: 1em;
+}
+
+.LandingPage_footer > ul {
+	list-style-type: none;
+	padding: 0;
+}
+
+.LandingPage_hero {
+	padding: 24px;
+	background: #ffffff;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.LandingPage_hero > img {
+	width: 100%;
+	margin: 2em 0;
+}
+.LandingPage_content__text {
+	text-align: center;
+}
+
+.LandingPage_button {
+	margin-bottom: 2em;
+}
+
+.column-section > img {
+	width: 50%;
+	margin: 0 auto;
+}
+
+@media screen and (min-width: 425px) and (max-width: 767px) {
+	.LandingPage_hero > img {
+		width: 65%;
+		margin: 2em auto;
+	}
+
+	.column-section > img {
+		width: 30%;
+		margin-top: 0;
+	}
+}
+
+@media screen and (min-width: 768px) {
+
+
+	.LandingPage_hero {
+		flex-direction: row;
+		align-items: center;
+	}
+	.LandingPage_content__text {
+		margin: 2em;
+	}
+	.LandingPage_hero > img {
+		width: 40%;
+	}
+
+	.LandingPage_body > section {
+		margin: 0 6em;
+	}
+
+	.reverse {
+		flex-direction: row-reverse;
+	}
+
+	.column-section {
+		flex-direction: column;
+	}
+
+	.column-section > div {
+		margin-bottom: 0;
+	}
+
+	.column-section > img {
+		width: 20%;
+		margin-top: 0;
+	}
+
+
+
+	.LandingPage_footer {
+		text-align: left;
+		display: flex;
+		justify-content: space-evenly;
+		padding: 5em 50px;
+	}
+
+	.LandingPage_content {
+		height: 100%;
+		margin-top: 0;
+	}
+
+	.LandingPage_footer > img {
+		width: 120px;
+		height: 30px;
+		margin-bottom: 0;
+	}
+
+
+}
+
+@media screen and (min-width: 1024px) {
+	.LandingPage_body > section {
+		/* padding: 0 3em; */
+	}
+
+	.layout_header-desktop {
+		padding: 0 6em;
+	}
+
+
+}

components/LandingPage/components/LandingPage.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import 'antd/dist/antd.css';
+import { Layout, Divider } from 'antd';
+import './LandingPage.css';
+import Paragraph from 'antd/lib/typography/Paragraph';
+import LandingPageContent from './LandingPageContent';
+import PageLayout from '../../Layout';
+import { landingPageContents, pageTitle } from '../constants';
+
+/**
+ * Function for displaying the landing page
+ *
+ * @function
+ * @return {Object} The landing page
+ */
+
+const LandingPage = () => (
+    <PageLayout
+        IsSiderPresent={false}
+        isFooterPresent
+        isAuthenticated={false}
+        title={pageTitle}
+    >
+        {
+            landingPageContents.map(landingPageContent => {
+                const {
+                    paragraphText,
+                    isButtonPresent,
+                    columnSection,
+                    isImagePresent,
+                    imageLink,
+                    level,
+                    title,
+                    reverseSection,
+                    buttonText,
+                    buttonLink,
+                } = landingPageContent;
+
+                return (
+                    <LandingPageContent
+                        key={paragraphText}
+                        isButtonPresent={isButtonPresent}
+                        columnSection={columnSection}
+                        isImagePresent={isImagePresent}
+                        imageLink={imageLink}
+                        level={level}
+                        paragraphText={paragraphText}
+                        title={title}
+                        reverseSection={reverseSection}
+                        buttonText={buttonText}
+                        buttonLink={buttonLink}
+                    />
+                );
+            })
+        }
+    </PageLayout>
+);
+
+export default LandingPage;

components/LandingPage/components/LandingPage.test.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import LandingPage from './index';
+
+describe('LandingPage', () => {
+    it('should renders without crashing', () => {
+        const div = document.createElement('div');
+        ReactDOM.render(<LandingPage />, div);
+    });
+});

components/LandingPage/components/LandingPageContent.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Button, Typography } from 'antd';
+import PropTypes from 'prop-types';
+import { normalize } from 'path';
+import Link from 'next/link';
+
+const { Title, Paragraph } = Typography;
+
+/**
+ * Function used to generate section layout content for landing page
+ * @function
+ * @param {Number} level - The Number from 1-5 representing the header level h1-h5
+ * @param {String} title- The Title of that Section
+ *@param {String} paragraphText- The Text of that section
+ * @param {Boolean} isButtonPresent- If true, a button is shown on that section
+ * @param {String} buttonText- the text on the button
+ * @param {String} buttonLink- the link that the button leads to
+ * @param {String} imageLink- the link to an image in the section
+ * @param {Boolean} reverseSection - if true, the image and section position is swapped
+ * @param {Boolean} isImagePresent - if true, the image is shown
+ * @param {Boolean} columnSection - if true, the section will be stacked
+ * @return {Object} The landing page content component which is used to populate the landing page
+ */
+
+export default function LandingPageContent(props) {
+    const {
+        level,
+        title,
+        paragraphText,
+        isButtonPresent,
+        buttonText,
+        buttonLink,
+        imageLink,
+        isImagePresent,
+        reverseSection,
+        columnSection,
+    } = props;
+
+    let className;
+
+    // this helps to structure the section, the section can be normalize, reversed or columnized
+    if (!reverseSection && !columnSection) {
+        className = 'LandingPage_hero';
+    } else if (reverseSection && !columnSection) {
+        className = 'LandingPage_hero reverse';
+    } else if (columnSection) {
+        className = 'LandingPage_hero column-section';
+    }
+
+    return (
+        <section className={className}>
+            <div className="LandingPage_content__text">
+                <Title level={level}>{title}</Title>
+                <Paragraph>{paragraphText}</Paragraph>
+                {/* displays button in a section */}
+                {
+                    isButtonPresent ? (
+                        <Button className="LandingPage_button" type="primary">
+                            <Link href={buttonLink}>
+                                <a>{buttonText}</a>
+                            </Link>
+                        </Button>
+                    ) : null
+                }
+            </div>
+
+            {/* displays image in a section */}
+            {isImagePresent ? <img src={imageLink} alt={`${title} image`} /> : null}
+        </section>
+    );
+}
+LandingPageContent.propTypes = {
+    level: PropTypes.number,
+    title: PropTypes.string,
+    paragraphText: PropTypes.string,
+    isButtonPresent: PropTypes.bool,
+    buttonText: PropTypes.string,
+    buttonLink: PropTypes.string,
+    isImagePresent: PropTypes.bool,
+    imageLink: PropTypes.string,
+    reverseSection: PropTypes.bool,
+    columnSection: PropTypes.bool,
+};

components/LandingPage/components/index.js

@@ -0,0 +1,4 @@
+
+import LandingPage from './LandingPage';
+
+export default LandingPage;