update

src/routes/(init)/init/(components)/day.svelte

@@ -56,7 +56,7 @@
 </script>
 
 {#if hasReleased}
-    <div class="scroll-mt-10 space-y-4 pb-20" id="day-{index}">
+    <div class="scroll-mt-10 space-y-4 pb-8" id="day-{index}">
         <Window>
             <div slot="title" class="text-micro flex items-center gap-1 text-white">
                 Day {index} <span class="text-accent">/</span>

src/routes/(init)/init/(components)/event-carousel.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
-    import EmblaCarousel, {
+    import embla from 'embla-carousel-svelte';
-        type EmblaCarouselType,
+    import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
-        type EmblaOptionsType,
-        type EmblaPluginType
-    } from 'embla-carousel';
 
     let emblaApi: EmblaCarouselType;
 
@@ -18,6 +15,14 @@
 
     let plugins: EmblaPluginType[] = [];
 
+    const onPrev = () => {
+        emblaApi.scrollPrev();
+    };
+
+    const onNext = () => {
+        emblaApi.scrollNext();
+    };
+
     const togglePrevNextBtnsState = () => {
         if (emblaApi.canScrollPrev()) hasPrev = true;
         else hasPrev = false;
@@ -25,4 +30,51 @@
         if (emblaApi.canScrollNext()) hasNext = true;
         else hasNext = false;
     };
+
+    const onEmblaInit = (event: CustomEvent<EmblaCarouselType>) => {
+        emblaApi = event.detail;
+
+        emblaApi
+            .on('init', togglePrevNextBtnsState)
+            .on('select', togglePrevNextBtnsState)
+            .on('reInit', togglePrevNextBtnsState);
+    };
 </script>
+
+<div class="border-offset relative min-h-[45vh] border-y-2 border-dashed bg-black/14 py-24">
+    <div class="container flex w-full items-center justify-between">
+        <h2 class="font-aeonik-pro text-primary text-label">Upcoming Events</h2>
+        <nav class="flex gap-1">
+            <button
+                class="bg-smooth size-8 cursor-pointer rounded-xl transition active:scale-95"
+                on:click={onPrev}
+                disabled={!hasPrev}
+            >
+                <span class="web-icon-arrow-left" aria-hidden="true"></span>
+            </button>
+            <button
+                class="bg-smooth size-8 cursor-pointer rounded-xl transition active:scale-95"
+                on:click={onNext}
+                disabled={!hasNext}
+            >
+                <span class="web-icon-arrow-right" aria-hidden="true"></span>
+            </button>
+        </nav>
+    </div>
+
+    <div class="embla overflow-hidden pl-36">
+        <div
+            class="embla__viewport pt-8"
+            use:embla={{ options, plugins }}
+            on:emblaInit={onEmblaInit}
+        >
+            <div class="embla__container flex gap-4">
+                {#each Array.from({ length: 8 }) as _}
+                    <div
+                        class="embla__slide h-[180px] min-w-0 [flex:0_0_33%] rounded-lg bg-white shadow-lg"
+                    />
+                {/each}
+            </div>
+        </div>
+    </div>
+</div>

src/routes/(init)/init/(components)/pre-release-card.svelte

@@ -16,7 +16,7 @@
     const { days, hours, minutes, seconds } = createCountdown(release);
 </script>
 
-<div class="relative h-fit pb-20">
+<div class="relative h-fit pb-8">
     <Window class="aspect-[4/1]">
         <div slot="title" class="text-micro flex items-center gap-1 text-white">
             Day {index} <span class="text-accent">/</span>

src/routes/(init)/init/(components)/window.svelte

@@ -15,8 +15,7 @@
 >
     <div class="flex items-center justify-between pt-1 px-1.5 pb-2">
         {#if $$slots.link}
-            <span
+            <span class="font-aeonik-fono tracking-loose text-micro text-primary pl-2 uppercase"
-                class="font-aeonik-fono tracking-loose text-micro text-primary flex-1 pl-2 uppercase"
                 ><slot name="link" /></span
             >
         {:else}
@@ -26,7 +25,6 @@
                 viewBox="0 0 20 20"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
-                class="flex-1"
             >
                 <path
                     fill-rule="evenodd"
@@ -38,37 +36,34 @@
         {/if}
 
         <span
-            class="font-aeonik-fono tracking-loose text-micro text-primary mx-auto block flex-1 text-center uppercase"
+            class="font-aeonik-fono tracking-loose text-micro text-primary mx-auto block text-center uppercase"
             ><slot name="title" /></span
         >
 
-        <div class="flex-1">
+        <svg
-            <svg
+            width="20"
-                width="20"
+            height="20"
-                height="20"
+            viewBox="0 0 20 20"
-                viewBox="0 0 20 20"
+            fill="none"
-                fill="none"
+            xmlns="http://www.w3.org/2000/svg"
-                xmlns="http://www.w3.org/2000/svg"
+        >
-                class="mr-0 ml-auto"
+            <rect
-            >
+                x="5.5498"
-                <rect
+                y="4.64645"
-                    x="5.5498"
+                width="14"
-                    y="4.64645"
+                height="1"
-                    width="14"
+                transform="rotate(45 5.5498 4.64645)"
-                    height="1"
+                fill="#E4E4E7"
-                    transform="rotate(45 5.5498 4.64645)"
+            />
-                    fill="#E4E4E7"
+            <rect
-                />
+                x="4.5498"
-                <rect
+                y="14.6465"
-                    x="4.5498"
+                width="14"
-                    y="14.6465"
+                height="1"
-                    width="14"
+                transform="rotate(-45 4.5498 14.6465)"
-                    height="1"
+                fill="#E4E4E7"
-                    transform="rotate(-45 4.5498 14.6465)"
+            />
-                    fill="#E4E4E7"
+        </svg>
-                />
-            </svg>
-        </div>
     </div>
 
     <slot />

src/routes/(init)/init/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-    const base = new Date('2025-02-24T13:00:00.000Z');
+    const base = new Date('2025-02-12T13:00:00.000Z');
 
     export const isStarted = new Date() >= base;
     export const initDates = `${format(base, 'MMM d')} - ${format(addDays(base, 4), 'd')}`;
@@ -19,6 +19,7 @@
     import Day, { type DayProps } from './(components)/day.svelte';
     import Hero from './(components)/hero.svelte';
     import Giveaway from './(components)/giveaway.svelte';
+    import EventCarousel from './(components)/event-carousel.svelte';
 
     const title = 'Init - Appwrite';
     const description = 'The start of something new.';
@@ -180,5 +181,6 @@
         {/each}
     </div>
 
+    <EventCarousel />
     <Giveaway />
 {/if}