- search input on home view component

src/views/home-view/home-view-component.scss

@@ -13,7 +13,39 @@ h6 {
     margin-top: 1.5rem;
 }
 
-
+.search-box {
+    background-image: url(./../../assets/site/img/white-pixel.png);
+    background-repeat: repeat;
+    padding: 1.8em;
+    width: 28em;
+}
+.mx-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+}
+.mt-3 {
+    margin-top: 1rem !important;
+}
+.button {
+  background-color: #33cccc;    
+    // border-color: #dbdbdb;
+    border-width:0;
+    color: #363636;
+    cursor: pointer;
+    justify-content: center;
+    padding-bottom: 0; 
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-top: 0;
+    text-align: center;
+    white-space: nowrap;
+}
+input{
+    border-width:0;
+}
+.search-button-icon {
+    color: white;
+}
 
 //contact apge
 .page-breaker {

src/views/home-view/home-view-component.ts

@@ -1,16 +1,12 @@
 import { Options, Vue } from "vue-class-component";
-// import VsInput from "@/components/vs-input/vs-input.vue";
-// import VsResult from "@/components/vs-result/vs-result.vue";
-// import FacetCategory from "@/components/face-category/facet-category.vue";
-// import ActiveFacetCategory from "@/components/active-facet-category/active-facet-category.vue";
 
 @Options({
     name: "HomeViewComponent",
-    // components: {
-    //     VsInput,
-    //     VsResult,
-    //     FacetCategory,
-    //     ActiveFacetCategory,
-    // },
 })
-export default class HomeViewComponent extends Vue {}
+export default class HomeViewComponent extends Vue {
+    public display = "";
+
+    search(): void {
+        this.$router.push({ name: "Search", params: { display: this.display } });
+    }
+}

src/views/home-view/home-view-component.vue

@@ -46,15 +46,30 @@
         <!-- <figure class="image is-128x128">
             <img src="https://bulma.io/images/placeholders/256x256.png" />
         </figure> -->
-        <section data-sr id="help" class="help u-full-width featured-bg-image"></section>
+        <!-- class="columns help u-full-width featured-bg-image"> -->
+        <section data-sr id="help" class="columns header-image align-items-center h-100">
+            <div class="column is-one-third mx-auto">
+                <!-- <img src="site/img/Main-banner-homepage-1280.jpg" class="img-fluid""> -->
 
-        <!-- <div class="columns">
-            <div class="column text-center">
-                <h1>ÜBER TETHYS</h1>
-                <p class="lead">Was sind unsere Schwerpunkte</p>
-                <hr class="center-line" />
+                <div class="search-box mt-3 mx-auto">
+                    <!-- <form class="my-2 my-lg-0 main-search-from-bg d-flex d-row">
+                        <input class="form-control mr-sm-2 border-0" type="text" placeholder="Search" aria-label="Search" />
+                        <button class="btn btn-secondary m-0" type="submit"><i class="fas fa-search text-white"></i></button>
+                    </form> -->
+                    <div class="field has-addons">
+                        <div class="control is-expanded">
+                            <input id="search_query" class="input is-medium" type="text" name="q" autocomplete="off" v-model="display" />
+                            <!-- <p>Message is: {{ display }}</p>  v-on:input="searchChanged"-->
+                        </div>
+                        <div class="control">
+                            <button class="button input is-medium search-button-icon" @click="search()">
+                                <img src="../../assets/fa/search.svg" style="height: 22px; width: 22px" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
             </div>
-        </div> -->
+        </section>
 
         <div class="container">
             <section class="section">