add features page

src/app/layout/Menu.svelte

@@ -3,7 +3,7 @@
   import MenuSignup from '@assets/img/menu-signup.webp';
   import MenuRules from '@assets/img/menu-rules.webp';
   import MenuFaq from '@assets/img/menu-faq.webp';
-  import MenuFeedback from '@assets/img/menu-feedback.webp';
+  import MenuFeature from '@assets/img/menu-features.webp';
   import MenuAdmins from '@assets/img/menu-admins.webp';
   import MenuButton from '@assets/img/menu-button.webp';
   import MenuInventoryBar from '@assets/img/menu-inventory-bar.webp';
@@ -41,6 +41,12 @@
       href: 'faq',
       active: false
     },
+    {
+      name: 'Features',
+      sprite: MenuFeature.src,
+      href: 'features',
+      active: false
+    },
     {
       name: 'Admins',
       sprite: MenuAdmins.src,

src/app/website/features/ImageCarousel.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import cat1 from '@assets/img/cat1.jpg';
+  import cat2 from '@assets/img/cat2.jpg';
+  import { onMount } from 'svelte';
+
+  // html bindings
+  let imageContainer: HTMLDivElement;
+
+  // types
+  interface Props {
+    images?: { path: string; text?: string }[];
+  }
+
+  // states
+  const { images = [{ path: cat1.src }, { path: cat2.src }] }: Props = $props();
+
+  let currentImage = $state<HTMLDivElement | null>(null);
+
+  // lifecycle
+  onMount(() => {
+    currentImage = imageContainer.children.item(0) as HTMLDivElement | null;
+  });
+
+  // callback
+  function scrollPrev() {
+    if (!currentImage!.previousElementSibling) return;
+    currentImage!.previousElementSibling.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    currentImage = currentImage!.previousElementSibling as HTMLDivElement;
+  }
+
+  function scrollNext() {
+    if (!currentImage!.nextElementSibling) return;
+    currentImage!.nextElementSibling.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    currentImage = currentImage!.nextElementSibling as HTMLDivElement;
+  }
+</script>
+
+<div class="relative">
+  <div class="carousel w-full aspect-video rounded items-center" bind:this={imageContainer}>
+    {#each images as image (image.path)}
+      <div class="carousel-item w-full">
+        <img src={image.path} class="w-full object-cover" alt={image.text ?? image.path} />
+      </div>
+    {/each}
+  </div>
+  {#if currentImage}
+    <div class="absolute top-0 left-2 h-full flex items-center">
+      <button
+        class="backdrop-invert-75 w-10 h-10 rounded-full flex justify-center items-center"
+        aria-label="previous"
+        onclick={scrollPrev}><span class="iconify iconify-[heroicons--chevron-left] w-2/5 h-2/5"></span></button
+      >
+    </div>
+    <div class="absolute top-0 right-2 h-full flex items-center">
+      <button
+        class="backdrop-invert-75 w-10 h-10 rounded-full flex justify-center items-center"
+        aria-label="next"
+        onclick={scrollNext}><span class="iconify iconify-[heroicons--chevron-right] w-2/5 h-2/5"></span></button
+      >
+    </div>
+  {/if}
+</div>