add news, tools and index components

src/components/landingpage/Index.vue

 <template>
   <div class="index-container">
-      <div class="panel search"><SearchPanel/></div>
+      <div class="panel search"><Search/></div>
       <div class="panel"><Resource/></div>
+      <div class="panel"><Statistics/></div>
+      <div class="panel"><Tools/></div>
+      <div class="panel"><News/></div>
   </div>
 </template>
 
 <script>
-  import SearchPanel from '@/components/landingpage/SearchPanel'
+  import Search from '@/components/landingpage/Search'
   import Resource from '@/components/landingpage/Resource'
+  import Statistics from '@/components/landingpage/Statistics'
+  import Tools from '@/components/landingpage/Tools'
+  import News from '@/components/landingpage/News'
   export default {
     name: 'index',
     data(){
@@ -19,8 +25,11 @@
     
     },
     components: {
-      SearchPanel,
-      Resource
+      Search,
+      Resource,
+      Statistics,
+      Tools,
+      News
     },
     mounted: function(){
       

src/components/landingpage/News.vue

+<template>
+  <div class="news-container">
+    <Row class="row">
+        <Col span="6">
+            <div class="item-container">
+                <div class="item">
+                    <div class="title">Repository</div>
+                    <div class="content">200</div>
+                </div>
+            </div>
+        </Col>
+        <Col span="6">
+            <div class="item-container">
+                <div class="item">
+                    <div class="title">Repository</div>
+                    <div class="content">200</div>
+                </div>
+            </div>
+        </Col>
+        <Col span="6">
+            <div class="item-container">
+                <div class="item">
+                    <div class="title">Repository</div>
+                    <div class="content">200</div>
+                </div>
+            </div>
+        </Col>
+        <Col span="6">
+            <div class="item-container">
+                <div class="item">
+                    <div class="title">Repository</div>
+                    <div class="content">200</div>
+                </div>
+            </div>
+        </Col>
+    </Row>
+  </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                value1: 0,
+                setting: {
+                    dots: 'none',
+                }
+            }
+        }
+    }
+</script>
+<style scoped>
+    .news-container{
+        width:100%;
+        height: 100%;
+        position: relative;
+    }
+    .row{
+        height: 300px;
+        width: 80%;
+        margin:0 auto;
+        display: flex;
+        align-items: center;
+    }
+    .item-container{
+        text-align: center;
+        margin: 50px 10px;
+    }
+    .item{
+        display: flex;
+        flex-direction:column;
+        padding: 50px 0;
+        background: red;
+       
+    }
+</style>

src/components/landingpage/Tools.vue

+<template>
+    <div class="tools-container">
+        <div class="title"></div>
+        <Button class="tools-button">Submit Data</Button>
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                keyword:'',
+                selected: 'archive',
+                value12: '',
+                value13: '',
+                select1: 'http',
+                select2: 'com',
+                select3: 'day'
+            }
+        }
+    }
+</script>
+<style scoped>
+    .tools-container{
+        width:100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #F0F0F0;
+    }
+    .search-input{
+        width:500px;
+    }
+    .tools-button{
+        padding: 12px 30px 14px 30px;
+        font-size: 18px;
+        margin: 0 30px;
+    }
+</style>