Masonry grid styling and add carousel dots

components/Block/Carousel/Carousel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Carousel from '@/components/Carousel/Carousel.vue';
 import CarouselControls from '@/components/Carousel/CarouselControls.vue';
+import CarouselDots from '~/components/Carousel/CarouselDots.vue';
 import ClassNames from 'embla-carousel-class-names';
 
 const { $directus, $readItem } = useNuxtApp();
@@ -48,6 +49,7 @@ onMounted(async () => {
 						aria-label="Previous slide"
 						@click="scrollPrev"
 					/>
+					<CarouselDots />
 					<BaseButton
 						color="secondary"
 						outline
@@ -107,6 +109,7 @@ onMounted(async () => {
 		justify-content: center;
 		gap: 60px;
 		margin-top: 65px;
+		align-items: center;
 	}
 
 	&__button {

components/Block/MasonryGrid/MasonryGridCard.vue

@@ -84,11 +84,11 @@ const isExternal = computed(() => !!cardData.value?.external_url);
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
-		filter: grayscale(100%);
+		filter: grayscale(100%) opacity(40%);
 		transition: filter 0.3s ease-in-out;
 
 		&:hover {
-			filter: grayscale(0%);
+			filter: grayscale(0%) opacity(100%);
 		}
 	}
 

components/Carousel/CarouselDots.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel';
+
+const { scrollTo, selectedIndex, scrollSnaps } = useCarousel();
+</script>
+
+<template>
+	<div class="carousel__dots">
+		<button
+			v-for="(snap, index) in scrollSnaps"
+			:key="index"
+			class="carousel__dot"
+			:class="{ 'carousel__dot--active': index === selectedIndex }"
+			aria-label="'Go to slide ' + (index + 1)"
+			@click="scrollTo(index)"
+		></button>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.carousel__dots {
+	display: flex;
+	gap: 8px;
+}
+
+.carousel__dot {
+	width: 10px;
+	height: 10px;
+	background-color: #f1f3f7;
+	border: none;
+	border-radius: 50%;
+	cursor: pointer;
+	transition: background-color 0.3s;
+}
+
+.carousel__dot--active {
+	background-color: #42566e;
+}
+</style>

components/Carousel/useCarousel.ts

@@ -22,12 +22,20 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
 			emblaApi.value?.scrollNext();
 		}
 
+		function scrollTo(index: number) {
+			emblaApi.value?.scrollTo(index);
+		}
+
 		const canScrollNext = ref(false);
 		const canScrollPrev = ref(false);
+		const selectedIndex = ref(0);
+		const scrollSnaps = ref<number[]>([]);
 
 		function onSelect(api: CarouselApi) {
 			canScrollNext.value = api?.canScrollNext() || false;
 			canScrollPrev.value = api?.canScrollPrev() || false;
+			selectedIndex.value = api?.selectedScrollSnap() || 0;
+			scrollSnaps.value = api?.scrollSnapList() || [];
 		}
 
 		const totalCount = ref(0);
@@ -62,6 +70,9 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
 			scrollPrev,
 			scrollNext,
 			orientation,
+			scrollTo,
+			scrollSnaps,
+			selectedIndex,
 			current,
 			totalCount,
 		};