From ab18403eb1d6bab2c9431707f1c63435a79f2d43 Mon Sep 17 00:00:00 2001
From: Bruce Allan Makaaru <brucemakallan@MacBook-Pro-29.local>
Date: Mon, 17 Dec 2018 10:19:28 +0300
Subject: [PATCH] chore (beautify homepage): Make a better first impression on
 the homepage

- Add homepage carousel below the navigation bar
- Show actual article images in the footer (remove placeholder images)
- Centre the "Read More" button for each article
- Add the theme colour (turquoise) where appropriate

[Starts #162693578]
---
 src/__snapshots__/index.test.js.snap          |   2 +-
 src/commons/initialStates.js                  |   6 +
 src/components/App/index.js                   |   4 +-
 src/components/Articles/Articles.scss         |  27 +-
 .../Footer/__snapshots__/footer.test.js.snap  | 235 -----------
 src/components/Footer/footer.test.js          |  23 --
 src/components/Footer/index.js                |  84 ----
 src/components/Home/Home.scss                 |  17 +-
 src/components/Home/index.js                  |   8 +-
 .../__snapshots__/index.test.js.snap          | 367 ++++++++++++++++++
 src/containers/CarouselBanner/carousel.scss   |  15 +
 src/containers/CarouselBanner/index.js        |  48 +++
 src/containers/CarouselBanner/index.test.js   |  16 +
 .../Footer/__snapshots__/footer.test.js.snap  | 208 ++++++++++
 src/containers/Footer/footer.test.js          |  39 ++
 src/containers/Footer/index.js                |  68 ++++
 .../Footer/index.scss                         |  14 +-
 src/containers/LoginPage/LoginPage.test.js    |  13 +-
 src/containers/LoginPage/index.js             |   2 +-
 19 files changed, 832 insertions(+), 364 deletions(-)
 delete mode 100644 src/components/Footer/__snapshots__/footer.test.js.snap
 delete mode 100644 src/components/Footer/footer.test.js
 delete mode 100644 src/components/Footer/index.js
 create mode 100644 src/containers/CarouselBanner/__snapshots__/index.test.js.snap
 create mode 100644 src/containers/CarouselBanner/carousel.scss
 create mode 100644 src/containers/CarouselBanner/index.js
 create mode 100644 src/containers/CarouselBanner/index.test.js
 create mode 100644 src/containers/Footer/__snapshots__/footer.test.js.snap
 create mode 100644 src/containers/Footer/footer.test.js
 create mode 100644 src/containers/Footer/index.js
 rename src/{components => containers}/Footer/index.scss (85%)

diff --git a/src/__snapshots__/index.test.js.snap b/src/__snapshots__/index.test.js.snap
index 7a1b01f..705b893 100644
--- a/src/__snapshots__/index.test.js.snap
+++ b/src/__snapshots__/index.test.js.snap
@@ -26,7 +26,7 @@ exports[`Provider and App renders <App/> correctly 1`] = `
       path="/article/:articleId"
     />
   </Switch>
-  <Footer />
+  <Connect(Footer) />
 </BrowserRouter>
 `;
 
diff --git a/src/commons/initialStates.js b/src/commons/initialStates.js
index 74c3a0b..98fbcae 100644
--- a/src/commons/initialStates.js
+++ b/src/commons/initialStates.js
@@ -70,4 +70,10 @@ export const initialStateWithSample2 = {
   article: sampleArticle2,
 };
 
+export const sampleListOfArticles = [
+  sampleArticle, { ...sampleArticle, id: 2 }, { ...sampleArticle, id: 3 },
+  { ...sampleArticle, id: 4 }, { ...sampleArticle, id: 5 }, { ...sampleArticle, id: 6 },
+  { ...sampleArticle, id: 7 }, { ...sampleArticle, id: 8 }, { ...sampleArticle, id: 9 },
+];
+
 export default initialState;
diff --git a/src/components/App/index.js b/src/components/App/index.js
index 09b4473..5173cdf 100644
--- a/src/components/App/index.js
+++ b/src/components/App/index.js
@@ -5,7 +5,7 @@ import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import Home from '../Home';
 import Login from '../Login/index';
 import Header from '../Header';
-import { Footer } from '../Footer';
+import FooterConnected from '../../containers/Footer';
 import SignUpPageConnected from '../../containers/SignUpPage';
 import Articles from '../../containers/Articles';
 import ArticlePageConnected from '../../containers/ArticlePage';
@@ -23,7 +23,7 @@ const App = () => (
         <Route path="/articles" component={Articles} />
         <Route path="/article/:articleId" component={ArticlePageConnected} />
       </Switch>
-      <Footer />
+      <FooterConnected />
     </React.Fragment>
   </BrowserRouter>
 );
diff --git a/src/components/Articles/Articles.scss b/src/components/Articles/Articles.scss
index 7f88492..0c32696 100644
--- a/src/components/Articles/Articles.scss
+++ b/src/components/Articles/Articles.scss
@@ -1,3 +1,7 @@
+$primaryLight: #40e0d0;
+$primaryDark: #20c0b0;
+$primaryDarker: #345F5B;
+
 .articles-body {
   display: flex;
   flex-flow: row wrap;
@@ -48,15 +52,22 @@
     .date-section {
     }
     .read-more {
-      border-radius: 5px;
-    //   border: 1px solid red;
-      width: 40%;
-	  background: #47d79f;
-	  color: white;
+      text-align: center;
+      padding-top: 20px;
 
-	  a{
-		  color: #efefef;
-	  }
+      a {
+        border-radius: 5px;
+        background: $primaryLight;
+        color: #efefef;
+        text-align: center;
+        padding: 5px 10px;
+      }
+      a:hover {
+        text-decoration: none;
+        border: 1px solid $primaryLight;
+        background: white;
+        color: $primaryDark;
+      }
     }
   }
 }
diff --git a/src/components/Footer/__snapshots__/footer.test.js.snap b/src/components/Footer/__snapshots__/footer.test.js.snap
deleted file mode 100644
index 6b3c965..0000000
--- a/src/components/Footer/__snapshots__/footer.test.js.snap
+++ /dev/null
@@ -1,235 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Footer tests testing create image 1`] = `
-<div
-  className="image-card"
-  key="[object Object]"
->
-  <img
-    alt="article image1"
-    src={Object {}}
-  />
-  <div
-    className="carousel-caption d-none d-md-block"
-  />
-</div>
-`;
-
-exports[`Footer tests testing footer 1`] = `
-<div
-  className="footer"
->
-  <div
-    className="carousel"
-  >
-    <div
-      className="carousel slide"
-      data-ride="carousel"
-      id="carouselExampleIndicators"
-    >
-      <ol
-        className="carousel-indicators"
-      >
-        <li
-          className="active"
-          data-slide-to="0"
-          data-target="#carouselExampleIndicators"
-        />
-        <li
-          data-slide-to="1"
-          data-target="#carouselExampleIndicators"
-        />
-        <li
-          data-slide-to="2"
-          data-target="#carouselExampleIndicators"
-        />
-      </ol>
-      <div
-        className="carousel-inner"
-      >
-        <div
-          className="carousel-item active"
-        >
-          <div
-            className="row"
-          >
-            <div
-              className="image-card"
-              key="https://picsum.photos/200"
-            >
-              <img
-                alt="article image1"
-                src="https://picsum.photos/200"
-              />
-              <div
-                className="carousel-caption d-none d-md-block"
-              />
-            </div>
-            <div
-              className="image-card"
-              key="https://picsum.photos/201"
-            >
-              <img
-                alt="article image1"
-                src="https://picsum.photos/201"
-              />
-              <div
-                className="carousel-caption d-none d-md-block"
-              />
-            </div>
-            <div
-              className="image-card"
-              key="https://picsum.photos/202"
-            >
-              <img
-                alt="article image1"
-                src="https://picsum.photos/202"
-              />
-              <div
-                className="carousel-caption d-none d-md-block"
-              />
-            </div>
-            <div
-              className="image-card"
-              key="https://picsum.photos/203"
-            >
-              <img
-                alt="article image1"
-                src="https://picsum.photos/203"
-              />
-              <div
-                className="carousel-caption d-none d-md-block"
-              />
-            </div>
-            <div
-              className="image-card"
-              key="https://picsum.photos/204"
-            >
-              <img
-                alt="article image1"
-                src="https://picsum.photos/204"
-              />
-              <div
-                className="carousel-caption d-none d-md-block"
-              />
-            </div>
-            <div
-              className="image-card"
-              key="https://picsum.photos/205"
-            >
-              <img
-                alt="article image1"
-                src="https://picsum.photos/205"
-              />
-              <div
-                className="carousel-caption d-none d-md-block"
-              />
-            </div>
-            <div
-              className="image-card"
-              key="https://picsum.photos/206"
-            >
-              <img
-                alt="article image1"
-                src="https://picsum.photos/206"
-              />
-              <div
-                className="carousel-caption d-none d-md-block"
-              />
-            </div>
-            <div
-              className="image-card"
-              key="https://picsum.photos/207"
-            >
-              <img
-                alt="article image1"
-                src="https://picsum.photos/207"
-              />
-              <div
-                className="carousel-caption d-none d-md-block"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <a
-        className="carousel-control-prev"
-        data-slide="prev"
-        href="#carouselExampleIndicators"
-        role="button"
-      >
-        <span
-          aria-hidden="true"
-          className="carousel-control-prev-icon"
-        />
-        <span
-          className="sr-only"
-        >
-          Previous
-        </span>
-      </a>
-      <a
-        className="carousel-control-next"
-        data-slide="next"
-        href="#carouselExampleIndicators"
-        role="button"
-      >
-        <span
-          aria-hidden="true"
-          className="carousel-control-next-icon"
-        />
-        <span
-          className="sr-only"
-        >
-          Next
-        </span>
-      </a>
-    </div>
-  </div>
-  <div
-    className="footer-bottom"
-  >
-    <div
-      className="copyright"
-    >
-      <span>
-        © 2018 Authors Haven
-      </span>
-    </div>
-    <div
-      className="go-to-top"
-    >
-      <span>
-        Top
-      </span>
-    </div>
-    <div
-      className="nav-bottom"
-    >
-      <ul>
-        <li>
-          <a
-            href="/"
-          >
-            HOME
-          </a>
-        </li>
-        <li>
-          <a
-            href="/article"
-          >
-            ARTICLE
-          </a>
-        </li>
-        <li>
-          <a
-            href="/contact"
-          >
-            CONTACT
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/Footer/footer.test.js b/src/components/Footer/footer.test.js
deleted file mode 100644
index 1e38ca0..0000000
--- a/src/components/Footer/footer.test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { Footer, CreateImage } from './index';
-
-describe('Footer tests', () => {
-  test('testing footer', () => {
-    const footer = shallow(
-      <Footer />,
-    );
-    expect(footer).toMatchSnapshot();
-  });
-
-  test('testing create image', () => {
-    const createImageFooter = shallow(
-      <CreateImage />,
-    );
-    expect(createImageFooter).toMatchSnapshot();
-  });
-  test('testing div', () => {
-    const wrapper = mount(<Footer />);
-    expect(wrapper.find('.footer').hasClass('row'));
-  });
-});
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
deleted file mode 100644
index de691cf..0000000
--- a/src/components/Footer/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react';
-import './index.scss';
-
-const images = [
-  'https://picsum.photos/200',
-  'https://picsum.photos/201',
-  'https://picsum.photos/202',
-  'https://picsum.photos/203',
-  'https://picsum.photos/204',
-  'https://picsum.photos/205',
-  'https://picsum.photos/206',
-  'https://picsum.photos/207',
-];
-
-export const CreateImage = image => (
-  <div className="image-card" key={image}>
-    <img src={image} alt="article image1" />
-    <div className="carousel-caption d-none d-md-block">
-      {/* <p>Article title 1</p> */}
-    </div>
-  </div>
-);
-
-export const FooterNextPrevious = (classname, icon, slidedata, buttonState) => (
-  <a
-    className={classname}
-    href="#carouselExampleIndicators"
-    role="button"
-    data-slide={slidedata}
-  >
-    <span className={icon} aria-hidden="true" />
-    <span className="sr-only">{buttonState}</span>
-  </a>
-);
-
-export const Footer = () => (
-  <div className="footer">
-    <div className="carousel">
-      <div
-        id="carouselExampleIndicators"
-        className="carousel slide"
-        data-ride="carousel"
-      >
-        <ol className="carousel-indicators">
-          <li
-            data-target="#carouselExampleIndicators"
-            data-slide-to="0"
-            className="active"
-          />
-          <li data-target="#carouselExampleIndicators" data-slide-to="1" />
-          <li data-target="#carouselExampleIndicators" data-slide-to="2" />
-        </ol>
-        <div className="carousel-inner">
-          <div className="carousel-item active">
-            <div className="row">{images.map(image => CreateImage(image))}</div>
-          </div>
-        </div>
-        {FooterNextPrevious('carousel-control-prev', 'carousel-control-prev-icon', 'prev', 'Previous')}
-        {FooterNextPrevious('carousel-control-next', 'carousel-control-next-icon', 'next', 'Next')}
-      </div>
-    </div>
-    <div className="footer-bottom">
-      <div className="copyright">
-        <span>&copy; 2018 Authors Haven</span>
-      </div>
-      <div className="go-to-top">
-        <span>Top</span>
-      </div>
-      <div className="nav-bottom">
-        <ul>
-          <li>
-            <a href="/">HOME</a>
-          </li>
-          <li>
-            <a href="/article">ARTICLE</a>
-          </li>
-          <li>
-            <a href="/contact">CONTACT</a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-);
diff --git a/src/components/Home/Home.scss b/src/components/Home/Home.scss
index fdc3922..522d1dc 100644
--- a/src/components/Home/Home.scss
+++ b/src/components/Home/Home.scss
@@ -1,6 +1,19 @@
-.header-img {
-  flex-flow: row wrap;
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+@import url('https://fonts.googleapis.com/css?family=Raleway:300');
+
+$bodyFontFamily: 'Montserrat', sans-serif;
+$headingFontFamily: 'Raleway', sans-serif;
+$primaryLight: #40e0d0;
+$primaryDark: #20c0b0;
+$primaryDarker: #345F5B;
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $headingFontFamily !important;
 }
+body, p {
+  font-family: $bodyFontFamily !important;
+}
+
 .home-body {
   display: flex;
   flex-flow: row wrap;
diff --git a/src/components/Home/index.js b/src/components/Home/index.js
index 138f6ea..847a392 100644
--- a/src/components/Home/index.js
+++ b/src/components/Home/index.js
@@ -2,22 +2,22 @@ import React from 'react';
 import './Home.scss';
 import { BrowserRouter, Route } from 'react-router-dom';
 import Articles from '../../containers/Articles';
+import CarouselBanner from '../../containers/CarouselBanner';
 
 const Home = () => (
   <BrowserRouter>
     <div>
       <div className="header-img">
-        <img src="https://picsum.photos/1440/300" alt="banner" />
+        <CarouselBanner />
       </div>
       <div className="home-body">
         <div className="lefter">
-          <div className="lefter-title">Recent Articles</div>
-
+          <div className="lefter-title"><h3>Recent Articles</h3></div>
           <hr />
           <Route path="/" component={Articles} />
         </div>
         <div className="righter">
-          <div className="righter-title">Popular Tags</div>
+          <div className="righter-title"><h3>Popular Tags</h3></div>
         </div>
       </div>
     </div>
diff --git a/src/containers/CarouselBanner/__snapshots__/index.test.js.snap b/src/containers/CarouselBanner/__snapshots__/index.test.js.snap
new file mode 100644
index 0000000..359235a
--- /dev/null
+++ b/src/containers/CarouselBanner/__snapshots__/index.test.js.snap
@@ -0,0 +1,367 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CarouselBanner /> container should render 1`] = `
+<CarouselBanner
+  articles={
+    Array [
+      Object {
+        "audio_url": "http://test.mp3",
+        "author": Object {
+          "email": "janedoe@gmail.com",
+          "id": 2,
+          "username": "janedoe",
+        },
+        "body": "body",
+        "created_at": "12-12-2018",
+        "description": "desc",
+        "dislikes": 2,
+        "id": 1,
+        "image_url": "http://test.png",
+        "likeDislikeStatus": "dislike",
+        "likes": 12,
+        "rating": 0,
+        "read_time": "0 min",
+        "slug": "title-sample",
+        "tag_list": Array [
+          "tag",
+        ],
+        "title": "title sample",
+        "updated_at": "12-12-2018",
+        "views_count": 0,
+      },
+      Object {
+        "audio_url": "http://test.mp3",
+        "author": Object {
+          "email": "janedoe@gmail.com",
+          "id": 2,
+          "username": "janedoe",
+        },
+        "body": "body",
+        "created_at": "12-12-2018",
+        "description": "desc",
+        "dislikes": 2,
+        "id": 2,
+        "image_url": "http://test.png",
+        "likeDislikeStatus": "dislike",
+        "likes": 12,
+        "rating": 0,
+        "read_time": "0 min",
+        "slug": "title-sample",
+        "tag_list": Array [
+          "tag",
+        ],
+        "title": "title sample",
+        "updated_at": "12-12-2018",
+        "views_count": 0,
+      },
+      Object {
+        "audio_url": "http://test.mp3",
+        "author": Object {
+          "email": "janedoe@gmail.com",
+          "id": 2,
+          "username": "janedoe",
+        },
+        "body": "body",
+        "created_at": "12-12-2018",
+        "description": "desc",
+        "dislikes": 2,
+        "id": 3,
+        "image_url": "http://test.png",
+        "likeDislikeStatus": "dislike",
+        "likes": 12,
+        "rating": 0,
+        "read_time": "0 min",
+        "slug": "title-sample",
+        "tag_list": Array [
+          "tag",
+        ],
+        "title": "title sample",
+        "updated_at": "12-12-2018",
+        "views_count": 0,
+      },
+      Object {
+        "audio_url": "http://test.mp3",
+        "author": Object {
+          "email": "janedoe@gmail.com",
+          "id": 2,
+          "username": "janedoe",
+        },
+        "body": "body",
+        "created_at": "12-12-2018",
+        "description": "desc",
+        "dislikes": 2,
+        "id": 4,
+        "image_url": "http://test.png",
+        "likeDislikeStatus": "dislike",
+        "likes": 12,
+        "rating": 0,
+        "read_time": "0 min",
+        "slug": "title-sample",
+        "tag_list": Array [
+          "tag",
+        ],
+        "title": "title sample",
+        "updated_at": "12-12-2018",
+        "views_count": 0,
+      },
+      Object {
+        "audio_url": "http://test.mp3",
+        "author": Object {
+          "email": "janedoe@gmail.com",
+          "id": 2,
+          "username": "janedoe",
+        },
+        "body": "body",
+        "created_at": "12-12-2018",
+        "description": "desc",
+        "dislikes": 2,
+        "id": 5,
+        "image_url": "http://test.png",
+        "likeDislikeStatus": "dislike",
+        "likes": 12,
+        "rating": 0,
+        "read_time": "0 min",
+        "slug": "title-sample",
+        "tag_list": Array [
+          "tag",
+        ],
+        "title": "title sample",
+        "updated_at": "12-12-2018",
+        "views_count": 0,
+      },
+      Object {
+        "audio_url": "http://test.mp3",
+        "author": Object {
+          "email": "janedoe@gmail.com",
+          "id": 2,
+          "username": "janedoe",
+        },
+        "body": "body",
+        "created_at": "12-12-2018",
+        "description": "desc",
+        "dislikes": 2,
+        "id": 6,
+        "image_url": "http://test.png",
+        "likeDislikeStatus": "dislike",
+        "likes": 12,
+        "rating": 0,
+        "read_time": "0 min",
+        "slug": "title-sample",
+        "tag_list": Array [
+          "tag",
+        ],
+        "title": "title sample",
+        "updated_at": "12-12-2018",
+        "views_count": 0,
+      },
+      Object {
+        "audio_url": "http://test.mp3",
+        "author": Object {
+          "email": "janedoe@gmail.com",
+          "id": 2,
+          "username": "janedoe",
+        },
+        "body": "body",
+        "created_at": "12-12-2018",
+        "description": "desc",
+        "dislikes": 2,
+        "id": 7,
+        "image_url": "http://test.png",
+        "likeDislikeStatus": "dislike",
+        "likes": 12,
+        "rating": 0,
+        "read_time": "0 min",
+        "slug": "title-sample",
+        "tag_list": Array [
+          "tag",
+        ],
+        "title": "title sample",
+        "updated_at": "12-12-2018",
+        "views_count": 0,
+      },
+      Object {
+        "audio_url": "http://test.mp3",
+        "author": Object {
+          "email": "janedoe@gmail.com",
+          "id": 2,
+          "username": "janedoe",
+        },
+        "body": "body",
+        "created_at": "12-12-2018",
+        "description": "desc",
+        "dislikes": 2,
+        "id": 8,
+        "image_url": "http://test.png",
+        "likeDislikeStatus": "dislike",
+        "likes": 12,
+        "rating": 0,
+        "read_time": "0 min",
+        "slug": "title-sample",
+        "tag_list": Array [
+          "tag",
+        ],
+        "title": "title sample",
+        "updated_at": "12-12-2018",
+        "views_count": 0,
+      },
+      Object {
+        "audio_url": "http://test.mp3",
+        "author": Object {
+          "email": "janedoe@gmail.com",
+          "id": 2,
+          "username": "janedoe",
+        },
+        "body": "body",
+        "created_at": "12-12-2018",
+        "description": "desc",
+        "dislikes": 2,
+        "id": 9,
+        "image_url": "http://test.png",
+        "likeDislikeStatus": "dislike",
+        "likes": 12,
+        "rating": 0,
+        "read_time": "0 min",
+        "slug": "title-sample",
+        "tag_list": Array [
+          "tag",
+        ],
+        "title": "title sample",
+        "updated_at": "12-12-2018",
+        "views_count": 0,
+      },
+    ]
+  }
+>
+  <div
+    className="carousel slide"
+    data-ride="carousel"
+    id="carouselExampleIndicators"
+  >
+    <ol
+      className="carousel-indicators"
+    >
+      <li
+        className="active"
+        data-slide-to="0"
+        data-target="#carouselExampleIndicators"
+      />
+      <li
+        data-slide-to="1"
+        data-target="#carouselExampleIndicators"
+      />
+      <li
+        data-slide-to="2"
+        data-target="#carouselExampleIndicators"
+      />
+    </ol>
+    <div
+      className="carousel-inner"
+    >
+      <div
+        className="carousel-item carousel-image-item active"
+        key="1"
+      >
+        <img
+          alt="slide"
+          className="d-block w-100"
+          src="http://test.png"
+        />
+        <div
+          className="carousel-caption d-none d-md-block carousel-article-desc"
+        >
+          <h5>
+            <a
+              href="article/1"
+            >
+              title sample
+            </a>
+          </h5>
+          <p>
+            desc
+          </p>
+        </div>
+      </div>
+      <div
+        className="carousel-item carousel-image-item "
+        key="2"
+      >
+        <img
+          alt="slide"
+          className="d-block w-100"
+          src="http://test.png"
+        />
+        <div
+          className="carousel-caption d-none d-md-block carousel-article-desc"
+        >
+          <h5>
+            <a
+              href="article/2"
+            >
+              title sample
+            </a>
+          </h5>
+          <p>
+            desc
+          </p>
+        </div>
+      </div>
+      <div
+        className="carousel-item carousel-image-item "
+        key="3"
+      >
+        <img
+          alt="slide"
+          className="d-block w-100"
+          src="http://test.png"
+        />
+        <div
+          className="carousel-caption d-none d-md-block carousel-article-desc"
+        >
+          <h5>
+            <a
+              href="article/3"
+            >
+              title sample
+            </a>
+          </h5>
+          <p>
+            desc
+          </p>
+        </div>
+      </div>
+    </div>
+    <a
+      className="carousel-control-prev"
+      data-slide="prev"
+      href="#carouselExampleIndicators"
+      role="button"
+    >
+      <span
+        aria-hidden="true"
+        className="carousel-control-prev-icon"
+      />
+      <span
+        className="sr-only"
+      >
+        Previous
+      </span>
+    </a>
+    <a
+      className="carousel-control-next"
+      data-slide="next"
+      href="#carouselExampleIndicators"
+      role="button"
+    >
+      <span
+        aria-hidden="true"
+        className="carousel-control-next-icon"
+      />
+      <span
+        className="sr-only"
+      >
+        Next
+      </span>
+    </a>
+  </div>
+</CarouselBanner>
+`;
diff --git a/src/containers/CarouselBanner/carousel.scss b/src/containers/CarouselBanner/carousel.scss
new file mode 100644
index 0000000..b7e62d6
--- /dev/null
+++ b/src/containers/CarouselBanner/carousel.scss
@@ -0,0 +1,15 @@
+.carousel-article-desc {
+  background: #77777744;
+}
+.carousel-image-item {
+  width: 100%;
+  height: 40rem;
+  overflow: hidden;
+
+  a {
+    color: white;
+  }
+  a:hover {
+    color: white;
+  }
+}
diff --git a/src/containers/CarouselBanner/index.js b/src/containers/CarouselBanner/index.js
new file mode 100644
index 0000000..572c7fd
--- /dev/null
+++ b/src/containers/CarouselBanner/index.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import './carousel.scss';
+
+const getCssClasses = (firstArticle, article) => {
+  const cssClasses = (article.id === firstArticle.id) ? 'active' : '';
+  return cssClasses;
+};
+
+export const CarouselBanner = ({ articles }) => (
+  <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
+    <ol className="carousel-indicators">
+      <li data-target="#carouselExampleIndicators" data-slide-to="0" className="active" />
+      <li data-target="#carouselExampleIndicators" data-slide-to="1" />
+      <li data-target="#carouselExampleIndicators" data-slide-to="2" />
+    </ol>
+    <div className="carousel-inner">
+      {articles && articles.length > 2 && articles.slice(0, 3).map(article => (
+        <div className={`carousel-item carousel-image-item ${getCssClasses(articles[0], article)}`} key={article.id}>
+          <img className="d-block w-100" src={article.image_url} alt="slide" />
+          <div className="carousel-caption d-none d-md-block carousel-article-desc">
+            <h5><a href={`article/${article.id}`}>{article.title}</a></h5>
+            <p>{article.description}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+    <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+      <span className="carousel-control-prev-icon" aria-hidden="true" />
+      <span className="sr-only">Previous</span>
+    </a>
+    <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+      <span className="carousel-control-next-icon" aria-hidden="true" />
+      <span className="sr-only">Next</span>
+    </a>
+  </div>
+);
+
+CarouselBanner.propTypes = {
+  articles: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+};
+
+const mapStateToProps = ({ articleReducer }) => ({
+  articles: articleReducer.articles,
+});
+
+export default connect(mapStateToProps)(CarouselBanner);
diff --git a/src/containers/CarouselBanner/index.test.js b/src/containers/CarouselBanner/index.test.js
new file mode 100644
index 0000000..077ffff
--- /dev/null
+++ b/src/containers/CarouselBanner/index.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { CarouselBanner } from '.';
+import { sampleListOfArticles } from '../../commons/initialStates';
+
+describe('<CarouselBanner /> container', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(<CarouselBanner articles={sampleListOfArticles} />);
+  });
+
+  it('should render', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/src/containers/Footer/__snapshots__/footer.test.js.snap b/src/containers/Footer/__snapshots__/footer.test.js.snap
new file mode 100644
index 0000000..23a6090
--- /dev/null
+++ b/src/containers/Footer/__snapshots__/footer.test.js.snap
@@ -0,0 +1,208 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer tests testing create image 1`] = `
+<div
+  className="image-card"
+>
+  <a
+    href="/article/undefined"
+  >
+    <img
+      alt="article image1"
+    />
+  </a>
+</div>
+`;
+
+exports[`Footer tests testing footer 1`] = `
+<div
+  className="footer"
+>
+  <div
+    className="carousel"
+  >
+    <div
+      className="carousel slide"
+      data-ride="carousel"
+      id="carouselExampleIndicatorsFooter"
+    >
+      <div
+        className="carousel-inner"
+      >
+        <div
+          className="carousel-item active"
+        >
+          <div
+            className="row"
+          >
+            <div
+              className="image-card"
+              key="1"
+            >
+              <a
+                href="/article/1"
+                title="title sample"
+              >
+                <img
+                  alt="article image1"
+                  src="http://test.png"
+                />
+              </a>
+            </div>
+            <div
+              className="image-card"
+              key="2"
+            >
+              <a
+                href="/article/2"
+                title="title sample"
+              >
+                <img
+                  alt="article image1"
+                  src="http://test.png"
+                />
+              </a>
+            </div>
+            <div
+              className="image-card"
+              key="3"
+            >
+              <a
+                href="/article/3"
+                title="title sample"
+              >
+                <img
+                  alt="article image1"
+                  src="http://test.png"
+                />
+              </a>
+            </div>
+            <div
+              className="image-card"
+              key="4"
+            >
+              <a
+                href="/article/4"
+                title="title sample"
+              >
+                <img
+                  alt="article image1"
+                  src="http://test.png"
+                />
+              </a>
+            </div>
+            <div
+              className="image-card"
+              key="5"
+            >
+              <a
+                href="/article/5"
+                title="title sample"
+              >
+                <img
+                  alt="article image1"
+                  src="http://test.png"
+                />
+              </a>
+            </div>
+            <div
+              className="image-card"
+              key="6"
+            >
+              <a
+                href="/article/6"
+                title="title sample"
+              >
+                <img
+                  alt="article image1"
+                  src="http://test.png"
+                />
+              </a>
+            </div>
+            <div
+              className="image-card"
+              key="7"
+            >
+              <a
+                href="/article/7"
+                title="title sample"
+              >
+                <img
+                  alt="article image1"
+                  src="http://test.png"
+                />
+              </a>
+            </div>
+            <div
+              className="image-card"
+              key="8"
+            >
+              <a
+                href="/article/8"
+                title="title sample"
+              >
+                <img
+                  alt="article image1"
+                  src="http://test.png"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className="footer-bottom"
+  >
+    <div
+      className="copyright"
+    >
+      <span>
+        © 2018 Authors Haven
+      </span>
+    </div>
+    <div
+      className="go-to-top"
+    >
+      <span>
+        <button
+          className="btTop"
+          id="btTop"
+          onClick={[Function]}
+          type="button"
+        >
+          Top
+        </button>
+      </span>
+    </div>
+    <div
+      className="nav-bottom"
+    >
+      <ul>
+        <li>
+          <a
+            href="/"
+          >
+            HOME
+          </a>
+        </li>
+        <li>
+          <a
+            href="/article"
+          >
+            ARTICLE
+          </a>
+        </li>
+        <li>
+          <a
+            href="/contact"
+          >
+            CONTACT
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/containers/Footer/footer.test.js b/src/containers/Footer/footer.test.js
new file mode 100644
index 0000000..b10aa5b
--- /dev/null
+++ b/src/containers/Footer/footer.test.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { Footer, CreateImage } from '.';
+import { sampleListOfArticles } from '../../commons/initialStates';
+
+describe('Footer tests', () => {
+  let wrapper;
+  let toTop;
+
+  beforeEach(() => {
+    toTop = jest.fn();
+    wrapper = mount(<Footer articles={sampleListOfArticles} toTop={toTop} />);
+  });
+
+  test('testing footer', () => {
+    const footer = shallow(
+      <Footer articles={sampleListOfArticles} />,
+    );
+    expect(footer).toMatchSnapshot();
+  });
+
+  test('testing create image', () => {
+    const createImageFooter = shallow(
+      <CreateImage />,
+    );
+    expect(createImageFooter).toMatchSnapshot();
+  });
+
+  test('testing div', () => {
+    expect(wrapper.find('.footer').hasClass('row'));
+  });
+
+  test('click go to top button', () => {
+    const fakeEvent = jest.fn();
+    const spy = jest.spyOn(wrapper.instance(), 'toTop');
+    wrapper.instance().toTop(fakeEvent);
+    expect(spy).toHaveBeenCalled();
+  });
+});
diff --git a/src/containers/Footer/index.js b/src/containers/Footer/index.js
new file mode 100644
index 0000000..c662337
--- /dev/null
+++ b/src/containers/Footer/index.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import './index.scss';
+
+export const CreateImage = article => (
+  <div className="image-card" key={article.id}>
+    <a href={`/article/${article.id}`} title={article.title}>
+      <img src={article.image_url} alt="article image1" />
+    </a>
+  </div>
+);
+
+export class Footer extends Component {
+  toTop = () => {
+    window.scrollTo(0, 0);
+  };
+
+  render() {
+    const { articles } = this.props;
+    return (
+      <div className="footer">
+        {articles && articles.length > 7 && (
+          <div className="carousel">
+            <div id="carouselExampleIndicatorsFooter" className="carousel slide" data-ride="carousel">
+              <div className="carousel-inner">
+                <div className="carousel-item active">
+                  <div className="row">{articles.slice(0, 8).map(article => CreateImage(article))}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        <div className="footer-bottom">
+          <div className="copyright">
+            <span>&copy; 2018 Authors Haven</span>
+          </div>
+          <div className="go-to-top">
+            <span><button type="button" className="btTop" id="btTop" onClick={this.toTop}>Top</button></span>
+          </div>
+          <div className="nav-bottom">
+            <ul>
+              <li>
+                <a href="/">HOME</a>
+              </li>
+              <li>
+                <a href="/article">ARTICLE</a>
+              </li>
+              <li>
+                <a href="/contact">CONTACT</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Footer.propTypes = {
+  articles: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+};
+
+const mapStateToProps = ({ articleReducer }) => ({
+  articles: articleReducer.articles,
+});
+
+export default connect(mapStateToProps)(Footer);
diff --git a/src/components/Footer/index.scss b/src/containers/Footer/index.scss
similarity index 85%
rename from src/components/Footer/index.scss
rename to src/containers/Footer/index.scss
index 9b082da..02ee603 100644
--- a/src/components/Footer/index.scss
+++ b/src/containers/Footer/index.scss
@@ -15,11 +15,12 @@ $lightgrey: #eaeaea;
       max-height: 200px;
       overflow: hidden;
       margin: 0;
+      text-align: center;
 
       img {
         display: block;
-        margin: 0 -30%;
-        width: 177.777%;
+        height: 100%;
+        z-index: 1;
       }
     }
   }
@@ -45,6 +46,13 @@ $lightgrey: #eaeaea;
       border-right: 1px solid $lightgrey;
       min-width: 5rem;
       justify-content: center;
+
+      .btTop {
+        border: none;
+        background: none;
+        color: white;
+        cursor: pointer;
+      }
     }
     .nav-bottom {
       ul {
@@ -61,4 +69,4 @@ $lightgrey: #eaeaea;
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/containers/LoginPage/LoginPage.test.js b/src/containers/LoginPage/LoginPage.test.js
index 99ef8d1..3593cb7 100644
--- a/src/containers/LoginPage/LoginPage.test.js
+++ b/src/containers/LoginPage/LoginPage.test.js
@@ -4,15 +4,18 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
 import { Login } from '../../components/Login';
-import { LoginPage } from './index';
+import { LoginPage, mapDispatchToProps } from './index';
 
 let store;
+let mockStore;
 
 describe('<Login />', () => {
   global.___loader = { // eslint-disable-line no-underscore-dangle
     enqueue: jest.fn(),
   };
   test('renders the component', () => {
+    mockStore = configureMockStore([thunk]);
+    store = mockStore({});
     const LoginComponent = shallow(
       <Provider store={store}>
         <Login onChange={jest.fn()} onSubmit={jest.fn()} />
@@ -26,6 +29,8 @@ describe('testing dispatch', () => {
 
 });
 describe('tesing login container', () => {
+  mockStore = configureMockStore([thunk]);
+  store = mockStore({});
   const wrapper = shallow(<Provider store={store}><LoginPage /></Provider>);
   it('should mount view all component', () => {
     expect(wrapper.find(LoginPage)).toHaveLength(1);
@@ -52,4 +57,10 @@ describe('handle Invoke email for password reset', () => {
     wrapper.instance().handleChange({ target: { id: 'email', value: 'richard@gmail.com' } });
     expect(wrapper.state('email')).toBe('richard@gmail.com');
   });
+
+  it('should trigger login user dispatch', () => {
+    const dispatch = jest.fn();
+    mapDispatchToProps(dispatch).loginUser({});
+    expect(dispatch.mock.calls[0][0]).toBeDefined();
+  });
 });
diff --git a/src/containers/LoginPage/index.js b/src/containers/LoginPage/index.js
index bb6f148..bff7ad0 100644
--- a/src/containers/LoginPage/index.js
+++ b/src/containers/LoginPage/index.js
@@ -47,7 +47,7 @@ LoginPage.defaultProps = {
 
 const mapStateToProps = state => ({ data: state.loginReducer });
 
-const mapDispatchToProps = dispatch => ({
+export const mapDispatchToProps = dispatch => ({
   loginUser: user => dispatch(loginThunk(user)),
 });