Картинки категорий

src/App.vue

@@ -5,7 +5,7 @@
                 <img class="tiny-logo" src="@/assets/flag.png" v-bind:style='{ "transform": tinyOffset }'>
             </span>
             <span id="links">
-                <router-link to="/">Главная</router-link>
+                <router-link to="/" exact>Главная</router-link>
                 <router-link to="/goods">Ассортимент</router-link>
                 <router-link to="/order">Заказ</router-link>
                 <router-link to="/contact-us">Контакты</router-link>
@@ -94,7 +94,7 @@ h1 {
     color: black;
 }
 
-#nav a.router-link-exact-active {
+#nav a.router-link-active {
     color: black;
     text-decoration: underline;
 }

src/views/Goods.vue

@@ -1,28 +1,28 @@
 <template>
     <div class="goods">
         <div id="sneakpeek">
-            <div href="#pastry">
+            <a href="#pastry">
-                <img src="@/assets/bread-tab.png">
+                <img src="@/assets/pastry-tab.png">
                 <h4>Кондитерские изделия</h4>
-            </div>
+            </a>
-            <div href="#singles">
+            <a href="#singles">
-                <img src="@/assets/bread-tab.png">
+                <img src="@/assets/singles-tab.png">
                 <h4>Мелкоштучные изделия</h4>
-            </div>
+            </a>
-            <div href="#pies">
+            <a href="#pies">
-                <img src="@/assets/bread-tab.png">
+                <img src="@/assets/pies-tab.png">
                 <h4>Пироги</h4>
-            </div>
+            </a>
-            <div href="#bread">
+            <a href="#bread">
                 <img src="@/assets/bread-tab.png">
                 <h4>Хлеба и багеты</h4>
-            </div>
+            </a>
-            <div href="#drinks">
+            <a href="#drinks">
-                <img src="@/assets/bread-tab.png">
+                <img src="@/assets/drinks-tab.png">
                 <h4>Напитки</h4>
-            </div>
+            </a>
         </div>
-        <h2>Кондитерские изделия:</h2>
+        <h2 id="pastry">Кондитерские изделия:</h2>
         <div class="category">
             <div class="col">
                 <Card v-for="item in itemsSubset(1, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item />
@@ -34,7 +34,7 @@
                 <Card v-for="item in itemsSubset(3, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item />
             </div>
         </div>
-        <h2>Мелкоштучные изделия:</h2>
+        <h2 id="singles">Мелкоштучные изделия:</h2>
         <div class="category">
             <div class="col">
                 <Card v-for="item in itemsSubset(1, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item />
@@ -46,7 +46,7 @@
                 <Card v-for="item in itemsSubset(3, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item />
             </div>
         </div>
-        <h2>Пироги:</h2>
+        <h2 id="pies">Пироги:</h2>
         <div class="category">
             <div class="col">
                 <Card v-for="item in itemsSubset(1, 'Пироги')" v-bind:key=item.nameEng :item=item />
@@ -58,7 +58,7 @@
                 <Card v-for="item in itemsSubset(3, 'Пироги')" v-bind:key=item.nameEng :item=item />
             </div>
         </div>
-        <h2>Хлеба и багеты:</h2>
+        <h2 id="bread">Хлеба и багеты:</h2>
         <div class="category">
             <div class="col">
                 <Card v-for="item in itemsSubset(1, 'Хлеба, багеты')" v-bind:key=item.nameEng :item=item />
@@ -70,7 +70,7 @@
                 <Card v-for="item in itemsSubset(3, 'Хлеба, багеты')" v-bind:key=item.nameEng :item=item />
             </div>
         </div>
-        <h2>Напитки:</h2>
+        <h2 id="drinks">Напитки:</h2>
         <div class="category">
             <div class="col">
                 <Card v-for="item in itemsSubset(1, 'Напитки')" v-bind:key=item.nameEng :item=item />
@@ -120,29 +120,33 @@ export default {
     padding-bottom: 80px;
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
     background: rgb(255,255,255);
-    background: linear-gradient(0deg, rgba(255,255,255,0.49763655462184875) 0%, rgba(255,255,255,0) 100%);
+    background: linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
 }
 
 #sneakpeek h4 {
     font-family: 'Playfair Display', serif;
     font-size: 17px;
     font-weight: 100;
+    color: #3a3a3a;
 }
 
-#sneakpeek div {
+#sneakpeek a {
     width: 20%;
     transition: transform .2s;
     cursor: pointer;
+    text-decoration: none;
+}
+
+#sneakpeek a:hover {
+    transform: scale(1.05);
 }
 
 #sneakpeek img {
     width: 70%;
-    /*border: white solid;
+    border: rgb(253, 253, 253) solid;
-    border-radius: 100%;*/
+    border-radius: 100%;
-}
+    border-width: 8px;
-
+    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4));
-#sneakpeek div:hover {
-    transform: scale(1.05);
 }
 
 h2 {
@@ -160,6 +164,15 @@ h2 {
     padding-right: 20px;
 }
 
+h2::before { 
+  display: block; 
+  content: " "; 
+  margin-top: -100px; 
+  height: 100px; 
+  visibility: hidden; 
+  pointer-events: none;
+}
+
 .col {
     width: 33.33%;
     padding: 30px;

src/views/Home.vue

@@ -153,7 +153,7 @@ export default {
                 layout: 'default#image',
                 imageHref: 'https://radner.ru/files/marker.png',
                 imageSize: [48, 48],
-                imageOffset: [0, -48]
+                imageOffset: [-10, -48]
             }
         }
     },