create static homepage,

create VideoPlayer and Title Components

src/App.js

@@ -7,6 +7,7 @@ import TopicsList from './containers/TopicsList';
 import store from './store/configureStore';
 import Header from "./components/Header";
 import Footer from "./components/Footer";
+import Search from "./components/Search";
 
 class App extends Component {
   render() {
@@ -15,6 +16,7 @@ class App extends Component {
 
         <div className="App">
           <Header/>
+          <Search/>
           <Route exact={true} path="/" component={Home}/>
           <Route path="/topics" component={TopicsList}/>
           <Footer/>

src/components/RandomDate.js

@@ -1,9 +1,25 @@
 import React from 'react';
+import Grid from 'react-css-grid';
+import VideoItem from "./VideoItem";
+import SectionHeading from "./SectionHeading";
+
 class RandomDate extends React.Component {
   render() {
+
     return (
-   'hello Dandom Date!'
+      <section>
+        <SectionHeading title="Random Date"/>
+        <Grid
+          width={450}
+          gap={24}>
+          <VideoItem/>
+          <VideoItem/>
+          <VideoItem/>
+          <VideoItem/>
+        </Grid>
+      </section>
     )
   }
 }
+
 export default (RandomDate);

src/components/RandomLocation.js

@@ -1,22 +1,20 @@
 import React from 'react';
 import VideoItem from "./VideoItem";
 import Grid from 'react-css-grid'
+import SectionHeading from "./SectionHeading";
 
 class RandomLocation extends React.Component {
   render() {
-    const Location =()=>{
+
-    return 'Location Name';
-    }
     return (
       <section>
-        <Location/>
+        <SectionHeading title="Random Location"/>
         <Grid
-          width={320}
+          width={225}
           gap={24}>
           <VideoItem/>
           <VideoItem/>
           <VideoItem/>
-          <VideoItem/>
         </Grid>
       </section>
     )

src/components/RandomTopic.js

@@ -1,18 +1,25 @@
 import Grid from 'react-css-grid'
 import React from 'react';
 import VideoItem from "./VideoItem";
+import SectionHeading from "./SectionHeading";
 
 class RandomTopic extends React.Component {
+
   render() {
     return (
+      <section>
+        <SectionHeading title="Topic Name"/>
         <Grid
-        width={320}
+          width={450}
-        gap={24}>
+          gap={16}>
           <VideoItem/>
           <VideoItem/>
           <VideoItem/>
           <VideoItem/>
         </Grid>
+        <a href="/topics">See All videos</a>
+
+      </section>
 
     )
   }

src/components/SectionHeading.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+/**
+ * a section heading is any heading that needs the style of having a horizontal line underneath it.
+ * it could be the Topics Heading/Title, Date..etc.
+ */
+class SectionHeading extends React.Component {
+  render() {
+    return (
+      <h2 className="section-title">{this.props.title}</h2>
+    )
+  }
+}
+
+export default (SectionHeading);

src/components/VideoItem.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {getThumbnail} from '../utils/video';
+
 class VideoItem extends React.Component {
 
   render() {
     return (
       <section className="video-item">
+        <section className="video-thumbnail-container">
           <img className="video-thumbnail" src={require('../assets/images/img2.png')} alt=""/>
+        </section>
         <h3 className="video-title">Random Title</h3>
       </section>
     )

src/components/VideoPlayer.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+class VideoPlayer extends React.Component {
+  render() {
+
+    return (
+      <section>
+        <video>
+        </video>
+      </section>
+    )
+  }
+}
+
+export default (VideoPlayer);

src/containers/Home.js

@@ -16,7 +16,6 @@ class Home extends React.Component {
   render() {
     return (
       <div>
-        <Search/>
         <RandomTopic/>
         <RandomLocation/>
         <RandomDate/>

src/containers/TopicsList.js

@@ -1,11 +1,22 @@
-import React, { Component } from 'react';
+import React from 'react';
+import VideoItem from "../components/VideoItem";
+import Grid from "react-css-grid";
+import SectionHeading from "../components/SectionHeading";
 
 class TopicsList extends React.Component {
   render() {
     return (
-      <div>
+      <section>
-        This is topics list.
+        <SectionHeading title="Random Topic"/>
-      </div>
+        <Grid
+          width={450}
+          gap={24}>
+          <VideoItem/>
+          <VideoItem/>
+          <VideoItem/>
+          <VideoItem/>
+        </Grid>
+      </section>
     );
   }
 }

src/stylesheets/style.css

@@ -45,6 +45,12 @@
     --858-light-gray-color: #ebebeb;
 }
 
+/* App */
+.App {
+    max-width: 960px;
+    margin: 0 auto;
+}
+
 /* header */
 header {
     padding-top: 1em;
@@ -65,6 +71,8 @@ header {
 /* search */
 .search-button {
     background: white;
+    bottom: -18px;
+    position: relative;
 }
 
 .search-button img {
@@ -73,12 +81,45 @@ header {
 
 .search-box {
     padding: 1em;
+    width: 50%;
     background: var(--858-light-gray-color);
 }
 
 .search-box::placeholder {
     color: black;
+    text-align: center;
+    font-size: 1.5em;
+    color: gray;
 }
+@media screen and (max-width: 700px){
+    .search-box::placeholder {
+        font-size: 1em;
+    }
+}
+@media screen and (max-width: 400px){
+    .search-box::placeholder {
+        font-size: .75em;
+    }
+}
+/* Video item*/
 .video-thumbnail {
     max-width: 300px;
+    transition: all .4s ease-in-out;
+}
+
+.video-thumbnail:hover {
+    transform: scale(1.1);
+}
+
+.video-thumbnail-container {
+    position: relative;
+    overflow: hidden;
+}
+
+/* section heading*/
+.section-title {
+    border-bottom: 2px dotted black;
+    padding: 1em;
+    margin-bottom: 1em;
+    position: relative;
 }