src/features/search/views/SearchResultsView.vue

@@ -9,6 +9,15 @@ searchQueryModel.value = props.searchQuery;
 
 <template>
     <Searchbar class="search-bar" v-model="searchQueryModel" auto-submit />
+
+    <div class="search-results-error-message-container">
+        <div class="search-results-error-message">
+            <p>Search is not available right now.</p>
+            <p>Please try again to another time.</p>
+        </div>
+    </div>
+    <div class="search-results-container">
+    </div>
 </template>
 
 <style scoped>
@@ -21,4 +30,41 @@ searchQueryModel.value = props.searchQuery;
         width: 100%;
     }
 }
+
+.search-results-container {
+    margin-top: 56px;
+}
+
+.search-results-error-message-container {
+    --error-message-height: 100px;
+    --error-message-padding: 2em;
+    display: flex;
+    justify-content: center;
+    width: calc(100% - 2 * var(--main-content-padding-x));
+    position: absolute;
+    top: calc(50vh - 0.5 * var(--error-message-height) - var(--error-message-padding));
+}
+
+.search-results-error-message {
+    padding: var(--error-message-padding);
+    font-size: 18px;
+    box-shadow: 0px 0px 42px #cdcdcdb3;
+    border-radius: 28px;
+    text-align: center;
+    background-color: #f7f7f7;
+    height: var(--error-message-height);
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+@media (max-width: 48rem) {
+    .search-results-error-message-container {
+        --error-message-height: 150px;
+    }
+    .search-results-error-message {
+        padding: 1em;
+        width: 100%;
+    }
+}
 </style>