feat: add hero block

spa/src/App.vue

@@ -1,7 +1,44 @@
 <template>
+  <div
+      class="hero min-h-screen"
+      style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);"
+  >
+    <div class="hero-overlay"></div>
+    <div class="hero-content text-neutral-content text-center">
+      <div class="max-w-md">
+        <h1 class="mb-5 text-5xl font-bold">Товарняк</h1>
+        <p class="mb-5">
+          Магазин, который гордо продаёт то, что другие прячут.
+        </p>
+        <button class="btn btn-primary" @click="scrollToProducts">
+          Показать товар лицом
+        </button>
+        <div class="mt-4 flex justify-center">
+          <svg
+              class="w-6 h-6 text-white animate-bounce"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div ref="goodsRef">
     <ProductList/>
+  </div>
 </template>
 
 <script setup>
 import ProductList from "./components/ProductList.vue";
+import {ref} from "vue";
+
+const goodsRef = ref();
+function scrollToProducts() {
+  goodsRef.value?.scrollIntoView({ behavior: 'smooth' });
+}
 </script>