Merge e3ae2c3 into ddb2800

andela · Sep 2, 2019 · b6eceb7 · b6eceb7
2 parents ddb2800 + e3ae2c3
commit b6eceb7
Show file tree

Hide file tree

Showing 35 changed files with 984 additions and 71 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ node_modules
 .env
 dist
 coverage
-.vscode/
+.vscode/
+.DS_Store
diff --git a/.sample.env b/.sample.env
@@ -1,2 +1,3 @@
 PORT=
-NODE_ENV=
+NODE_ENV=
+SERVER_URL=
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/cypress/integration/app_spec.js b/cypress/integration/app_spec.js
@@ -1,14 +1,15 @@
 describe('Authors Haven Frontend Pages', () => {
-  it('should show welcome message', () => {
+  it('should show novel of the week title', () => {
     cy.visit('/');
-    cy.get('h1')
-      .should('have.text', 'Authors Haven');
+    cy.get('#weekNovel')
+      .find('h2')
+      .should('have.text', 'Novel of the Week');
   });
-  it('Display text of Routes', () => {
-    cy.visit('/hello');
-    cy.get('h1')
-      .should('have.text', 'Hello AnDahlian');
-    cy.get('h3')
-      .should('have.text', 'You Rock!!!');
+
+  it('should show membership title', () => {
+    cy.visit('/');
+    cy.get('#membership')
+      .find('h2')
+      .should('have.text', 'Membership');
   });
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "express": "^4.17.1",
+    "materialize-css": "^1.0.0",
     "postcss-preset-env": "^6.7.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",

diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
   <title>Author's Haven</title>
 </head>
 <body>

diff --git a/src/components/App.js b/src/components/App.js
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import Router from './Router/Router';
+import './app.scss';
+
+const App = () => (
+  <Router />
+);
+
+export default App;
diff --git a/src/components/DummyComponent/DummyComponent.js b/src/components/DummyComponent/DummyComponent.js
diff --git a/src/components/LandingPage/Banner/Banner.jsx b/src/components/LandingPage/Banner/Banner.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import './banner.scss';
+
+const Banner = () => (
+  <div>
+    <section id="banner">
+      <div className="bannerGradient">
+        <h2>THE MAN IN THE FOREST OF DREAMS</h2>
+        <div className="bannerText">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco
+            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore
+            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+        </div>
+        <button type="button" className="btnLarge">View Snippet</button>
+      </div>
+    </section>
+  </div>
+);
+
+export default Banner;
diff --git a/src/components/LandingPage/Banner/banner.scss b/src/components/LandingPage/Banner/banner.scss
@@ -0,0 +1,56 @@
+/*
+* banner.scss 
+* 
+* Dahlia Frontend - Andela Simulations Challenge ©️ 2019
+* Andela Simulations Challenge ©️ 2019
+* https://github.com/andela/dahlia-ah-frontend
+*
+* SCSS Designed by TeamDahlia.
+*/
+
+$grey: #e5e5e5;
+$white: #ffffff;
+$black: #000008;
+
+/* Banner */
+#banner {
+  background: url(https://res.cloudinary.com/allebd/image/upload/v1567031693/dahlia/banner.png);
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: 100% auto;
+  height: 800px;
+  color: $white;
+
+  .bannerGradient {
+    width: 690px;
+    height: 100%;
+    overflow: hidden;
+    background: rgba(0,0,0,0.3);
+    box-shadow: 0px 0px 40px 40px rgba(0,0,0,0.3);
+    align-items: center;
+    padding: 4em;
+    padding-top: 16em;
+
+    h2 {
+      font-size: 3.5em;
+      line-height: 1.2;
+      margin: 0;
+    }
+  }
+}
+
+@media(max-width: 1200px){
+  #banner {
+    background-size: auto;
+    height: 100%;
+  }
+}
+
+@media(max-width: 900px){
+  #banner {
+    .bannerGradient {
+      width: 100%;
+      padding-top: 30%;
+    }
+  }
+}
diff --git a/src/components/LandingPage/LandingPage.jsx b/src/components/LandingPage/LandingPage.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import Banner from './Banner/Banner';
+import NovelOfTheWeek from './NovelOfTheWeek/NovelOfTheWeek';
+import './landingPage.scss';
+
+const LandingPage = () => (
+  <div>
+    <div className="landingPage">
+      <Banner />
+      <NovelOfTheWeek />
+      <section id="writingCaption">
+        <p>The Best Place To Express Yourself and Collaborate</p>
+        <button type="button" className="btnLarge">Start Writing</button>
+      </section>
+      <section id="membership">
+        <h2>Membership</h2>
+        <div className="membershipBox">
+          <div className="freeMembership">
+            <div>
+              <h4>Free</h4>
+              <ul>
+                <li>Read Novels</li>
+                <li>Bookmark Novels</li>
+                <li>Follow Authors</li>
+              </ul>
+            </div>
+            <div>
+              <p>SIGN UP</p>
+            </div>
+          </div>
+          <div className="subscribeMembership">
+            <div>
+              <h4>Subscription</h4>
+              <ul>
+                <li>Read Novels</li>
+                <li>Bookmark Novels</li>
+                <li>Follow and Collaborate with other Authors</li>
+                <li>Like and Comment on Novels</li>
+                <li>Novel Review and Analytics</li>
+              </ul>
+            </div>
+            <div>
+              <p>SUBSCRIBE</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+);
+
+export default LandingPage;
diff --git a/src/components/LandingPage/NovelOfTheWeek/NovelOfTheWeek.jsx b/src/components/LandingPage/NovelOfTheWeek/NovelOfTheWeek.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import './novelOfTheWeek.scss';
+
+const NovelOfTheWeek = () => (
+  <div>
+    <section id="weekNovel">
+      <h2>Novel of the Week</h2>
+      <div className="weekNovelBox">
+        <div className="weekNovelImage">
+          <img src="https://res.cloudinary.com/allebd/image/upload/v1567031973/dahlia/weeklynovel.png" alt="weekly novel" />
+        </div>
+        <div className="weekNovelDescription">
+          <div>
+            <h3>One Way Trip</h3>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco
+              laboris nisi ut aliquip ex ea commodo consequat.
+              Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur.
+              Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum..
+              Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur.
+              Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laborum.
+              Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est
+              laborum upidatat non proident, sunt in culpa qui officia.
+            </p>
+            <button type="button" className="btnMedium">View Snippet</button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+);
+
+export default NovelOfTheWeek;
diff --git a/src/components/LandingPage/NovelOfTheWeek/novelOfTheWeek.scss b/src/components/LandingPage/NovelOfTheWeek/novelOfTheWeek.scss
@@ -0,0 +1,68 @@
+/*
+* novelOfTheWeek.scss 
+* 
+* Dahlia Frontend - Andela Simulations Challenge ©️ 2019
+* Andela Simulations Challenge ©️ 2019
+* https://github.com/andela/dahlia-ah-frontend
+*
+* SCSS Designed by TeamDahlia.
+*/
+
+$grey: #e5e5e5;
+$white: #ffffff;
+$black: #000008;
+
+/* Novel of the Week Section */
+#weekNovel {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-areas: "weekNovel-title"
+                          "weekNovel-box";
+  background: $grey;
+  align-self: center;
+  text-align: center;
+  width: 100%;
+  padding-top: 5px;
+  padding-bottom: 5%;
+
+  h2 {
+    grid-area: weekNovel-title;
+    font-weight: bold;
+    text-transform: uppercase;
+    font-size: 36px;
+  }
+}
+
+.weekNovelBox {
+  grid-area: weekNovel-box;
+  display: grid;
+  padding: 20px;
+  padding-top: 0;
+  grid-template-columns: auto auto;
+
+  .weekNovelImage {
+    padding: 20px;
+
+    img {
+      width: 300px;
+      height: 300px;
+    }
+  }
+
+  .weekNovelDescription {
+    text-align: left;
+    padding: 20px;
+
+    h3 {
+      font-size: 1.17em;
+    }
+  }
+}
+
+
+@media(max-width: 900px){
+  .weekNovelBox {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+}
diff --git a/src/components/LandingPage/__snapshots__/landingPage.spec.js.snap b/src/components/LandingPage/__snapshots__/landingPage.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App component renders correctly 1`] = `ReactWrapper {}`;