hide backdrop option and smooth scroll down

layouts/landing.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden">
+  <div v-if="!hide_backdrop" class="relative h-[calc(100svh-6rem)] max-h-[calc(100svh-6rem)] w-full overflow-hidden">
     <NuxtPicture
       loading="lazy"
       class="w-full h-full object-cover object-center"
@@ -7,6 +7,11 @@
       :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
     />
     <img class="absolute p-4 max-sm:w-full sm:h-40 bottom-5" :src="baseUrl + navbar.logo.url" />
+    <img
+      class="absolute h-5 w-5 left-1/2 -translate-y-1/2 bottom-5 text-gray-400 cursor-pointer"
+      src="/chevrons-down.svg"
+      @click="scroll()"
+    />
   </div>
   <Header />
   <slot />
@@ -28,5 +33,9 @@ const { data: global } = await useAsyncData("global", () => findOne<Global>("glo
 const { navbar } = global.value?.data as unknown as Global;
 
 const { data: homepage } = await useAsyncData("homepage", () => findOne<Homepage>("homepage"));
-const { backdrop } = homepage.value?.data as unknown as Homepage;
+const { backdrop, hide_backdrop } = homepage.value?.data as unknown as Homepage;
+
+function scroll() {
+  window.scrollTo({ top: window.innerHeight - 96, behavior: "smooth" });
+}
 </script>

public/chevrons-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-down"><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>

types/single/homepage.ts

@@ -9,5 +9,6 @@ export default interface Homepage {
   publishedAt: string;
   locale: string;
   backdrop: BaseImage;
+  hide_backdrop: boolean;
   content: Array<ComponentTypes>;
 }