✨ Adds photo carousel for both cities

app/layouts/default.vue

@@ -11,7 +11,7 @@
         <UNavigationMenu :items="items"/>
 
         <template #right>
-            <UTooltip text="Otvor Instagram">
+            <UTooltip text="Otvor Instagram Bratislavskej bunky">
                 <UButton
                     color="neutral"
                     variant="ghost"
@@ -21,6 +21,16 @@
                     aria-label="Instagram"/>
             </UTooltip>
 
+            <UTooltip text="Otvor Instagram Košickej bunky">
+                <UButton
+                    color="neutral"
+                    variant="ghost"
+                    to="https://www.instagram.com/foodnotbombs_kosice/"
+                    target="_blank"
+                    icon="i-simple-icons-instagram"
+                    aria-label="Instagram"/>
+            </UTooltip>
+
             <UTooltip text="Otvor na Gitea">
                 <UButton
                     color="neutral"

app/pages/index.vue

@@ -22,22 +22,38 @@
         vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.
         Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos
         himenaeos.<br/><br/>
+    </p>
 
-        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
+    <!-- taken from https://www.instagram.com/p/DKSO0BvssTQ -->
-        placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar
+    <h3 class="font-bold text-2xl">Bratislava</h3>
-        vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.
+    <UCarousel v-slot="{ item }" :items="examplesBa" :ui="{ item: 'basis-1/3' }" arrows autoplay loop>
-        Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos
+        <NuxtImg :src="item" width="256" class="rounded-lg"/>
-        himenaeos.<br/><br/>
+    </UCarousel>
 
-        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
+    <!-- taken from https://www.instagram.com/p/DJrNlPvKWQR -->
-        placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar
+    <h3 class="font-bold text-2xl mt-4">Košice</h3>
-        vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.
+    <UCarousel v-slot="{ item }" :items="examplesKe" :ui="{ item: 'basis-1/3' }" arrows autoplay loop>
-        Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos
+        <NuxtImg :src="item" width="256" class="rounded-lg"/>
-        himenaeos.<br/><br/>
+    </UCarousel>
-
-        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
-        placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar
-        vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.
-        Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos
-        himenaeos.</p>
 </template>
+
+<script lang="ts" setup>
+const examplesBa = [
+    "/images/ba-example-1.jpg",
+    "/images/ba-example-2.jpg",
+    "/images/ba-example-3.jpg",
+    "/images/ba-example-4.jpg",
+    "/images/ba-example-5.jpg",
+    "/images/ba-example-6.jpg",
+    "/images/ba-example-7.jpg",
+];
+const examplesKe = [
+    "/images/ke-example-1.jpg",
+    "/images/ke-example-2.jpg",
+    "/images/ke-example-3.jpg",
+    "/images/ke-example-4.jpg",
+    "/images/ke-example-5.jpg",
+    "/images/ke-example-6.jpg",
+    "/images/ke-example-7.jpg",
+];
+</script>