fix: init stuff

2025-12-09 12:57:48 +00:00 · 2024-02-19 12:45:28 +01:00
parent c11c8b8d35
commit 1d19ca305d
21 changed files with 602 additions and 250 deletions
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
        "download-contributors": "node ./scripts/download-contributor-data.js"
    },
    "devDependencies": {
-        "@melt-ui/pp": "^0.1.4",
-        "@melt-ui/svelte": "^0.65.0",
+        "@melt-ui/pp": "^0.3.0",
+        "@melt-ui/svelte": "^0.74.0",
        "@playwright/test": "^1.40.0",
        "@sveltejs/adapter-node": "^1.3.1",
        "@sveltejs/adapter-static": "^2.0.3",
@@ -47,7 +47,6 @@
        "svelte": "^4.2.7",
        "svelte-check": "^3.6.0",
        "svelte-markdoc-preprocess": "^1.1.3",
-        "svelte-sequential-preprocessor": "^2.0.1",
        "sveltekit-search-params": "^1.0.16",
        "svgo": "^3.0.4",
        "svgtofont": "^4.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,11 +53,11 @@ dependencies:

 devDependencies:
  '@melt-ui/pp':
-    specifier: ^0.1.4
-    version: 0.1.4(@melt-ui/svelte@0.65.2)(svelte@4.2.10)
+    specifier: ^0.3.0
+    version: 0.3.0(@melt-ui/svelte@0.74.1)(svelte@4.2.10)
  '@melt-ui/svelte':
-    specifier: ^0.65.0
-    version: 0.65.2(svelte@4.2.10)
+    specifier: ^0.74.0
+    version: 0.74.1(svelte@4.2.10)
  '@playwright/test':
    specifier: ^1.40.0
    version: 1.41.2
@@ -133,9 +133,6 @@ devDependencies:
  svelte-markdoc-preprocess:
    specifier: ^1.1.3
    version: 1.2.0
-  svelte-sequential-preprocessor:
-    specifier: ^2.0.1
-    version: 2.0.1
  sveltekit-search-params:
    specifier: ^1.0.16
    version: 1.1.1(@sveltejs/kit@1.30.0)(svelte@4.2.10)
@@ -1113,20 +1110,21 @@ packages:
      '@types/markdown-it': 12.2.3
    dev: true

-  /@melt-ui/pp@0.1.4(@melt-ui/svelte@0.65.2)(svelte@4.2.10):
-    resolution: {integrity: sha512-zR+Kl3CZJPJBHW8V7YcdQCMI/dVcnW9Ct3yGbVaIywYVStVRS7F9uEDOea3xLLT2WTGodQePzPlUn53yKFu87g==}
+  /@melt-ui/pp@0.3.0(@melt-ui/svelte@0.74.1)(svelte@4.2.10):
+    resolution: {integrity: sha512-b07Bdh8l2KcwKVCXOY+SoBw1dk9eWvQfMSi6SoacpRVyVmmfpi0kV4oGt3HYF0tUCB3sEmVicxse50ZzZxEzEA==}
    engines: {pnpm: '>=8.6.3'}
    peerDependencies:
      '@melt-ui/svelte': '>= 0.29.0'
      svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1
    dependencies:
-      '@melt-ui/svelte': 0.65.2(svelte@4.2.10)
+      '@melt-ui/svelte': 0.74.1(svelte@4.2.10)
      estree-walker: 3.0.3
+      magic-string: 0.30.7
      svelte: 4.2.10
    dev: true

-  /@melt-ui/svelte@0.65.2(svelte@4.2.10):
-    resolution: {integrity: sha512-BpsSl9Bjp1++8U3+LaDOFUoX/PFQ9N7QWFhlFdUEZduhrbVyU70v9A459SKrQ+esFSjvh1AvqJYkMAUJXJlAmQ==}
+  /@melt-ui/svelte@0.74.1(svelte@4.2.10):
+    resolution: {integrity: sha512-5A6QrPGLKIr4s1kI0FZrD5QoZ+wnACF2MR77DvBo8icVyFmpY+WiwpnA3cAl+zEce9Er2Uj8KxPBEF8NSMdnqw==}
    peerDependencies:
      svelte: '>=3 <5'
    dependencies:
@@ -1135,7 +1133,7 @@ packages:
      '@internationalized/date': 3.5.1
      dequal: 2.0.3
      focus-trap: 7.5.4
-      nanoid: 4.0.2
+      nanoid: 5.0.5
      svelte: 4.2.10
    dev: true

@@ -4502,9 +4500,9 @@ packages:
    hasBin: true
    dev: true

-  /nanoid@4.0.2:
-    resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==}
-    engines: {node: ^14 || ^16 || >=18}
+  /nanoid@5.0.5:
+    resolution: {integrity: sha512-/Veqm+QKsyMY3kqi4faWplnY1u+VuKO3dD2binyPIybP31DRO29bPF+1mszgLnrR2KqSLceFLBNw0zmvDzN1QQ==}
+    engines: {node: ^18 || >=20}
    hasBin: true
    dev: true

@@ -5826,14 +5824,6 @@ packages:
      typescript: 5.3.3
    dev: true

-  /svelte-sequential-preprocessor@2.0.1:
-    resolution: {integrity: sha512-N5JqlBni6BzElxmuFrOPxOJnjsxh1cFDACLEVKs8OHBcx8ZNRO1p5SxuQex1m3qbLzAC8G99EHeWcxGkjyKjLQ==}
-    engines: {node: '>=16'}
-    dependencies:
-      svelte: 4.2.10
-      tslib: 2.6.2
-    dev: true
-
  /svelte@4.2.10:
    resolution: {integrity: sha512-Ep06yCaCdgG1Mafb/Rx8sJ1QS3RW2I2BxGp2Ui9LBHSZ2/tO/aGLc5WqPjgiAP6KAnLJGaIr/zzwQlOo1b8MxA==}
    engines: {node: '>=16'}
--- a/src/app.html
+++ b/src/app.html
@@ -33,6 +33,8 @@
                        document.body.classList.add(`theme-${systemTheme}`);
                    } else {
                        document.body.classList.add(`theme-${theme}`);
+                        // Color scheme in html
+                        document.documentElement.style.setProperty('color-scheme', theme);
                    }
                }
            }
--- a/src/lib/components/Select.svelte
+++ b/src/lib/components/Select.svelte
@@ -33,7 +33,6 @@
        preventScroll,
        positioning: {
            sameWidth: true,
-            fitViewport: true,
            placement
        },
        forceVisible: true,
@@ -45,7 +44,9 @@
            dispatch('change', next?.value);

            return next;
-        }
+        },
+        portal: null,
+        scrollAlignment: 'center'
    });

    $: selectedOption = options.find((o) => o.value === value);
--- a/src/lib/utils/console.ts
+++ b/src/lib/utils/console.ts
@@ -37,10 +37,7 @@ export function getAppwriteUser(): Promise<AppwriteUser | null> {
    return account
        .get()
        .then((res) => res)
-        .catch((e) => {
-            console.error(e);
-            return null;
-        });
+        .catch((e) =>  null);
 }

 function createAppwriteUser() {
--- a/src/lib/utils/random.ts
+++ b/src/lib/utils/random.ts
@@ -1,3 +1,7 @@
+export function randomPick<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
 export const deterministicRandom = <T>(options: T[], seed: string): T => {
    const index = Math.floor((parseInt(seed, 36) / 36 ** 4) * options.length);

--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,6 +7,7 @@
            store.set(value);
            if (browser) {
                localStorage.setItem('theme', value);
+                document.documentElement.style.setProperty('color-scheme', value);
            }
        };

@@ -96,6 +97,10 @@
 <slot />

 <style lang="scss">
+    :global(html) {
+        color-scheme: dark;
+    }
+
    .skip {
        position: absolute;
        inset-block-start: 0;
--- a/src/routes/init/(animations)/(assets)/grid.svg
+++ b/src/routes/init/(animations)/(assets)/grid.svg
@@ -0,0 +1,49 @@
+<svg viewBox="0 0 279 229" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_bd_399_1519)">
+    <rect x="5" y="3" width="269" height="219" rx="8" fill="white" fill-opacity="0.04" shape-rendering="crispEdges" />
+  </g>
+  <g clip-path="url(#clip0_399_1519)">
+    <mask id="mask0_399_1519" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-73" y="3" width="427" height="222">
+      <rect x="-73" y="3" width="427" height="222" fill="url(#paint0_radial_399_1519)" fill-opacity="0.77" />
+    </mask>
+    <g mask="url(#mask0_399_1519)">
+      <path d="M38.1934 -3L38.1934 217.995" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+      <path d="M71.916 -3L71.916 217.995" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+      <path d="M105.639 -3L105.639 217.995" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+      <path d="M139.361 -3L139.361 217.995" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+      <path d="M173.084 -3L173.084 217.995" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+      <path d="M206.807 -3L206.807 217.995" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+      <path d="M240.529 -3L240.529 217.995" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+      <path d="M413 36.915L-14 36.915" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+      <path d="M413 72.207L-14 72.207" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+      <path d="M413 107.498L-14 107.498" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+      <path d="M413 142.789L-14 142.789" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+      <path d="M413 178.08L-14 178.08" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+      <path d="M413 213.371L-14 213.371" stroke="white" stroke-width="0.392123" stroke-linecap="round" />
+    </g>
+  </g>
+  <defs>
+    <filter id="filter0_bd_399_1519" x="-20.0959" y="-22.0959" width="319.192" height="269.192"
+      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="12.5479" />
+      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_399_1519" />
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha" />
+      <feOffset dy="2.09868" />
+      <feGaussianBlur stdDeviation="2.09868" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0" />
+      <feBlend mode="normal" in2="effect1_backgroundBlur_399_1519" result="effect2_dropShadow_399_1519" />
+      <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_399_1519" result="shape" />
+    </filter>
+    <radialGradient id="paint0_radial_399_1519" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(124.777 124.545) rotate(142.804) scale(188.811 184.302)">
+      <stop stop-color="#FED367" />
+      <stop offset="1" stop-color="#FED367" stop-opacity="0" />
+    </radialGradient>
+    <clipPath id="clip0_399_1519">
+      <rect width="269" height="222" fill="white" transform="translate(5 3)" />
+    </clipPath>
+  </defs>
+</svg>
--- a/src/routes/init/(animations)/(assets)/lock.svg
+++ b/src/routes/init/(animations)/(assets)/lock.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" viewBox="0 0 43 43" fill="none">
+  <mask id="path-1-inside-1_428_1453" fill="white">
+    <path
+      d="M15.1907 15.2029V10.555C15.1907 9.01411 15.8518 7.53635 17.0285 6.44679C18.2052 5.35723 19.8012 4.74512 21.4653 4.74512C23.1295 4.74512 24.7254 5.35723 25.9022 6.44679C27.0789 7.53635 27.74 9.01411 27.74 10.555V15.2029" />
+  </mask>
+  <path
+    d="M15.1907 10.555H13.7963H15.1907ZM16.585 15.2029V10.555H13.7963V15.2029H16.585ZM16.585 10.555C16.585 9.42006 17.071 8.30773 17.9758 7.46992L16.0811 5.42365C14.6325 6.76496 13.7963 8.60815 13.7963 10.555L16.585 10.555ZM17.9758 7.46992C18.8843 6.62875 20.1378 6.13948 21.4653 6.13948V3.35075C19.4645 3.35075 17.5261 4.0857 16.0811 5.42365L17.9758 7.46992ZM21.4653 6.13948C22.7928 6.13948 24.0464 6.62875 24.9548 7.46992L26.8495 5.42365C25.4045 4.0857 23.4661 3.35075 21.4653 3.35075V6.13948ZM24.9548 7.46992C25.8597 8.30773 26.3456 9.42006 26.3456 10.555H29.1343C29.1343 8.60815 28.2981 6.76496 26.8495 5.42365L24.9548 7.46992ZM26.3456 10.555V15.2029H29.1343V10.555H26.3456Z"
+    fill="#E4E4E7" mask="url(#path-1-inside-1_428_1453)" />
+  <path
+    d="M10.078 15.9003H32.8526C34.1116 15.9003 35.409 17.2878 35.409 19.3862V34.0271C35.409 36.1255 34.1116 37.513 32.8526 37.513H10.078C8.81906 37.513 7.52165 36.1255 7.52165 34.0271V19.3862C7.52165 17.2878 8.81906 15.9003 10.078 15.9003Z"
+    stroke="#E4E4E7" stroke-width="1.39437" />
+  <mask id="path-4-inside-2_428_1453" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M23.5659 27.4048C24.6606 26.7091 25.387 25.4856 25.387 24.0926C25.387 21.9267 23.6312 20.1709 21.4654 20.1709C19.2995 20.1709 17.5437 21.9267 17.5437 24.0926C17.5437 25.4858 18.2702 26.7093 19.3651 27.405L18.1975 33.2429H24.7336L23.5659 27.4048Z" />
+  </mask>
+  <path
+    d="M23.5659 27.4048L22.8181 26.228L22.0112 26.7407L22.1987 27.6782L23.5659 27.4048ZM19.3651 27.405L20.7323 27.6784L20.9199 26.7408L20.1128 26.2281L19.3651 27.405ZM18.1975 33.2429L16.8302 32.9694L16.4966 34.6372H18.1975V33.2429ZM24.7336 33.2429V34.6372H26.4344L26.1009 32.9694L24.7336 33.2429ZM23.9926 24.0926C23.9926 24.9888 23.5271 25.7773 22.8181 26.228L24.3138 28.5816C25.7941 27.6408 26.7814 25.9825 26.7814 24.0926H23.9926ZM21.4654 21.5653C22.8611 21.5653 23.9926 22.6968 23.9926 24.0926H26.7814C26.7814 21.1566 24.4013 18.7765 21.4654 18.7765V21.5653ZM18.9381 24.0926C18.9381 22.6968 20.0696 21.5653 21.4654 21.5653V18.7765C18.5294 18.7765 16.1493 21.1566 16.1493 24.0926H18.9381ZM20.1128 26.2281C19.4037 25.7775 18.9381 24.9889 18.9381 24.0926H16.1493C16.1493 25.9826 17.1367 27.6411 18.6173 28.5818L20.1128 26.2281ZM19.5648 33.5163L20.7323 27.6784L17.9978 27.1315L16.8302 32.9694L19.5648 33.5163ZM24.7336 31.8485H18.1975V34.6372H24.7336V31.8485ZM22.1987 27.6782L23.3663 33.5163L26.1009 32.9694L24.9332 27.1313L22.1987 27.6782Z"
+    fill="#E4E4E7" mask="url(#path-4-inside-2_428_1453)" />
+</svg>
--- a/src/routes/init/(animations)/(assets)/safety.svg
+++ b/src/routes/init/(animations)/(assets)/safety.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="35" viewBox="0 0 32 35" fill="none">
+  <path
+    d="M14.7599 33.7133C14.6466 33.7725 14.548 33.8232 14.4653 33.8651C14.3827 33.8232 14.284 33.7725 14.1708 33.7133C13.7868 33.5123 13.2357 33.2128 12.5732 32.8213C11.2467 32.0375 9.48158 30.8897 7.72004 29.4325C4.16124 26.4884 0.783121 22.4195 0.783121 17.6491V8.78506L14.4653 1.44641L28.1476 8.78506V17.6491C28.1476 22.4195 24.7694 26.4884 21.2106 29.4325C19.4491 30.8897 17.6839 32.0375 16.3574 32.8213C15.695 33.2128 15.1439 33.5123 14.7599 33.7133Z"
+    stroke="#E4E4E7" stroke-width="1.39437" />
+  <g filter="url(#filter0_b_428_1448)">
+    <circle cx="22.8315" cy="23.9258" r="8.3662" fill="#424242" fill-opacity="1" />
+    <circle cx="22.8315" cy="23.9258" r="7.66901" stroke="#E4E4E7" stroke-width="1.39437" />
+  </g>
+  <path d="M18.9099 25.4941L21.5243 27.5856L26.7532 20.7881" stroke="#E4E4E7" stroke-width="1.39437"
+    stroke-linecap="round" />
+  <defs>
+    <filter id="filter0_b_428_1448" x="-32.9431" y="-31.8489" width="111.549" height="111.549"
+      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feGaussianBlur in="BackgroundImageFix" stdDeviation="23.7042" />
+      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_428_1448" />
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_428_1448" result="shape" />
+    </filter>
+  </defs>
+</svg>
--- a/src/routes/init/(assets)/logo-short.svg
+++ b/src/routes/init/(assets)/logo-short.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224 96" fill="none">
+  <path d="M169.521 96V84.8145H223.6V96H169.521Z" fill="#FD366E" />
+  <path
+    d="M152.912 81.6652C141.874 81.6652 134.623 76.6697 134.623 64.6154V36.0543H124.775V24.7602H135.381V8.79638H147.501V24.7602H163.517V36.0543H147.501V64.5068C147.501 68.5249 149.124 70.2624 153.02 70.2624H162.868V81.6652H152.912Z"
+    fill="white" />
+  <path
+    d="M109.647 15.9638C104.993 15.9638 101.53 12.4887 101.53 7.9276C101.53 3.47511 104.993 0 109.647 0C114.3 0 117.763 3.47511 117.763 7.9276C117.763 12.4887 114.3 15.9638 109.647 15.9638ZM103.154 81.6652V36.0543H93.1975V24.7602H115.923V81.6652H103.154Z"
+    fill="white" />
+  <path
+    d="M36.3068 81.6652V24.7602H49.0766V31.276H50.0506C52.5396 26.9321 57.734 23.3484 65.3093 23.3484C77.7544 23.3484 85.6543 32.6878 85.6543 44.4163V81.6652H72.8846V47.457C72.8846 40.3982 67.9066 35.5113 61.4135 35.5113C54.3793 35.5113 49.0766 40.9412 49.0766 48.1086V81.6652H36.3068Z"
+    fill="white" />
+  <path
+    d="M16.8496 15.9638C12.1962 15.9638 8.73319 12.4887 8.73319 7.9276C8.73319 3.47511 12.1962 0 16.8496 0C21.5029 0 24.9659 3.47511 24.9659 7.9276C24.9659 12.4887 21.5029 15.9638 16.8496 15.9638ZM10.3565 81.6652V36.0543H0.400391V24.7602H23.1262V81.6652H10.3565Z"
+    fill="white" />
+</svg>
--- a/src/routes/init/(components)/DayCard.svelte
+++ b/src/routes/init/(components)/DayCard.svelte
@@ -1,7 +1,6 @@
 <script lang="ts" context="module">
    export type DayType = {
        title: string;
-
        release: Date;
    };
 </script>
@@ -42,7 +41,7 @@
                    />
                {/if}
            </div>
-            <button class="aw-button is-secondary">Remind me</button>
+            <a href="/init/ticket" class="aw-button is-secondary">Register</a>
        </div>
    </div>
 {/if}
@@ -78,7 +77,7 @@
            max-width: 50%;
        }

-        .circle {
+        /* .circle {
            content: '';
            background: radial-gradient(
                hsl(var(--aw-color-accent)) 0%,
@@ -96,7 +95,7 @@
            translate: 60% -60%;
            z-index: 0;
            pointer-events: none;
-        }
+        } */

        .slot-wrapper {
            position: absolute;
--- a/src/routes/init/(components)/Ticket.svelte
+++ b/src/routes/init/(components)/Ticket.svelte
@@ -12,6 +12,7 @@

    type $$Props = Omit<TicketData, '$id' | 'contributions'> & {
        contributions?: Promise<ContributionsMatrix> | ContributionsMatrix;
+        disableEffects?: boolean;
    };
    $: ({
        name,
@@ -20,7 +21,8 @@
        tribe = null,
        contributions,
        variant = 'default',
-        show_contributions = true
+        show_contributions = true,
+        disableEffects = false
    } = $$props as $$Props);

    $: bg = {
@@ -79,6 +81,7 @@
    }

    function mouse(node: HTMLElement) {
+        if (disableEffects) return;
        const mouseMove = (e: MouseEvent) => {
            const clientX = isTouchEvent(e) ? e.touches[0].clientX : e.clientX;
            const clientY = isTouchEvent(e) ? e.touches[0].clientY : e.clientY;
@@ -123,6 +126,8 @@
            hovering = true;
        };
        const mouseLeave = () => {
+            if (disableEffects) return;
+
            const snapStiff = 0.05;
            const snapDamp = 0.5;

@@ -179,7 +184,7 @@
 </script>

 <div class="wrapper">
-    {#if variant === 'pink'}
+    {#if variant === 'pink' && !disableEffects}
        <img class="glow" src={Glow} alt="" />
    {/if}
    <div class="ticket" data-variant={variant} use:mouse style={styles}>
--- a/src/routes/init/(components)/Video.svelte
+++ b/src/routes/init/(components)/Video.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { melt } from '@melt-ui/svelte';
+    import VideoDialog from './VideoDialog.svelte';
+    import { videoCtx } from './VideoWrapper.svelte';
+
+    type $$Props = {
+        thumbnail: string;
+        '--p-aspect-ratio'?: string;
+        '--p-border-radius'?: string;
+        src?: string; // TODO: This should be required
+    };
+
+    export let thumbnail: $$Props['thumbnail'];
+    export let src: string = 'https://www.youtube.com/embed/XxbJw8PrIkc?si=kOEzUREP0KZoFDY7'; // TODO: REMOVE THIS BEFORE MERGING, THIS IS MOCK DATA
+
+    const dialog = videoCtx.get();
+    const {
+        elements: { trigger }
+    } = dialog;
+</script>
+
+<button class="wrapper" use:melt={$trigger}>
+    <img class="img" src={thumbnail} alt="" />
+    <div class="play">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="19"
+            viewBox="0 0 16 19"
+            fill="none"
+        >
+            <path
+                d="M15.9565 9.11814L-0.000196062 18.2363L-0.000195265 -6.97491e-07L15.9565 9.11814Z"
+                fill="#EDEDF0"
+            />
+        </svg>
+    </div>
+    <slot />
+</button>
+
+<VideoDialog {src} {dialog} />
+
+<style lang="scss">
+    .wrapper {
+        position: relative;
+        overflow: hidden;
+        max-height: 100%;
+
+        display: flex;
+        justify-content: flex-end;
+        aspect-ratio: var(--p-aspect-ratio, 1.6);
+
+        cursor: pointer;
+    }
+
+    .img {
+        border-radius: var(--p-border-radius, 0.5rem);
+        object-fit: cover;
+        inline-size: 100%;
+    }
+
+    .play {
+        @include border-gradient;
+        --m-border-radius: 100%;
+        --m-border-gradient-before: linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0.12) 0%,
+            rgba(255, 255, 255, 0) 125.11%
+        );
+
+        background: linear-gradient(
+            218deg,
+            rgba(255, 255, 255, 0.1) -0.29%,
+            rgba(255, 255, 255, 0) 127.21%
+        );
+        backdrop-filter: blur(16.71428680419922px);
+        width: 2.625rem;
+        height: 2.625rem;
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        translate: -50% -50%;
+
+        display: grid;
+        place-items: center;
+
+        transition: transform 150ms ease;
+
+        .wrapper:hover & {
+            transform: scale(1.05);
+        }
+
+        .wrapper:active & {
+            transform: scale(0.95);
+        }
+
+        svg {
+            translate: 1px;
+        }
+    }
+</style>
--- a/src/routes/init/(components)/VideoDialog.svelte
+++ b/src/routes/init/(components)/VideoDialog.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+    import { browser } from '$app/environment';
+    import { melt, type Dialog } from '@melt-ui/svelte';
+    import { fade, scale } from 'svelte/transition';
+
+    export let src: string = 'https://www.youtube.com/embed/XxbJw8PrIkc?si=kOEzUREP0KZoFDY7'; // TODO: REMOVE THIS BEFORE MERGING, THIS IS MOCK DATA
+
+    export let dialog: Dialog;
+
+    const {
+        elements: { portalled, content, overlay },
+        states: { open }
+    } = dialog;
+
+    let key = 0;
+
+    function increment() {
+        key++;
+    }
+
+    let timeout: number;
+    $: if (!$open && browser) {
+        clearTimeout(timeout);
+        timeout = window.setTimeout(increment, 200);
+    }
+</script>
+
+<div use:melt={$portalled}>
+    <div use:melt={$overlay} class="overlay" transition:fade={{ duration: 150 }} />
+
+    <div
+        class="aw-media content"
+        use:melt={$content}
+        transition:scale={{ duration: 250, start: 0.95 }}
+    >
+        {#key key}
+            <iframe
+                {src}
+                title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen
+            />
+        {/key}
+    </div>
+</div>
+
+<style lang="scss">
+    .overlay {
+        position: fixed;
+        inset: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1000;
+
+        opacity: 0;
+        pointer-events: none;
+        transition: 200ms ease;
+
+        &[data-state='open'] {
+            opacity: 1;
+            pointer-events: all;
+        }
+    }
+
+    .content {
+        position: fixed;
+        left: 50%;
+        top: 50%;
+        translate: -50% -50%;
+
+        display: block;
+        object-fit: contain;
+
+        max-height: 75vh;
+        width: calc(80%);
+        aspect-ratio: 16 / 9;
+
+        z-index: 1000;
+
+        opacity: 0;
+        transform: scale(0.975);
+        pointer-events: none;
+        transition: 200ms ease;
+
+        &[data-state='open'] {
+            opacity: 1;
+            transform: scale(1);
+            pointer-events: all;
+        }
+
+        iframe {
+            display: block;
+            inline-size: 100%;
+            block-size: 100%;
+        }
+    }
+</style>
--- a/src/routes/init/(components)/VideoWrapper.svelte
+++ b/src/routes/init/(components)/VideoWrapper.svelte
@@ -1,66 +1,39 @@
-<script lang="ts">
-    import Rick from '../(assets)/rick.webp';
+<script lang="ts" context="module">
+    const CTX_KEY = Symbol('video-wrapper');
+
+    export const videoCtx = {
+        get: () => {
+            return (
+                getContext<Dialog>(CTX_KEY) ??
+                createDialog({
+                    preventScroll: false,
+                    forceVisible: true
+                })
+            );
+        },
+        set: (dialog: Dialog) => {
+            setContext(CTX_KEY, dialog);
+        }
+    };
 </script>

-<div class="wrapper">
-    <img class="img" src={Rick} alt="Video thumbnail" />
-    <div class="play">
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="19"
-            viewBox="0 0 16 19"
-            fill="none"
-        >
-            <path
-                d="M15.9565 9.11814L-0.000196062 18.2363L-0.000195265 -6.97491e-07L15.9565 9.11814Z"
-                fill="#EDEDF0"
-            />
-        </svg>
-    </div>
-</div>
+<script lang="ts">
+    import { createDialog, type Dialog } from '@melt-ui/svelte';
+    import { getContext, setContext } from 'svelte';

-<style lang="scss">
-    .wrapper {
-        position: relative;
-        overflow: hidden;
-        max-height: 100%;
+    const dialog = createDialog({
+        preventScroll: false,
+        forceVisible: true
+    });
+    videoCtx.set(dialog);

-        display: flex;
-        justify-content: flex-end;
-        aspect-ratio: 1.6;
+    const {
+        states: { open }
+    } = dialog;
+
+    function openVideo() {
+        open.set(true);
    }
+</script>

-    .img {
-        border-radius: 0.5rem;
-        object-fit: cover;
-        inline-size: 100%;
-    }
-
-    .play {
-        @include border-gradient;
-        --m-border-radius: 100%;
-        --m-border-gradient-before: linear-gradient(
-            180deg,
-            rgba(255, 255, 255, 0.12) 0%,
-            rgba(255, 255, 255, 0) 125.11%
-        );
-
-        background: linear-gradient(
-            218deg,
-            rgba(255, 255, 255, 0.1) -0.29%,
-            rgba(255, 255, 255, 0) 127.21%
-        );
-        backdrop-filter: blur(16.71428680419922px);
-        width: 2.625rem;
-        height: 2.625rem;
-
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        display: grid;
-        place-items: center;
-    }
-</style>
+<slot {openVideo} />
--- a/src/routes/init/(days)/Day.svelte
+++ b/src/routes/init/(days)/Day.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import CountdownCard from '../(components)/CountdownCard.svelte';
+
+    export let day: string;
+    export let release: Date;
+
+    const today = new Date();
+    $: hasReleased = today >= release;
+</script>
+
+<h2 class="aw-eyebrow aw-u-color-text-primary">
+    <div class="aw-dot" />
+    {day}<span class="aw-u-color-text-accent">_</span>
+</h2>
+
+<div class="u-margin-block-start-16">
+    {#if hasReleased}
+        <slot />
+    {:else}
+        <CountdownCard date={release} />
+    {/if}
+</div>
--- a/src/routes/init/+page.svelte
+++ b/src/routes/init/+page.svelte
@@ -1,41 +1,82 @@
 <script lang="ts">
-    import { FooterNav, MainFooter } from '$lib/components';
+    import { Carousel, FooterNav, MainFooter } from '$lib/components';
    import { Main } from '$lib/layouts';
    import EventCard from '$routes/community/EventCard.svelte';
    import ShinesSvg from './(assets)/shines.svg';
-    import CountdownCard from './(components)/CountdownCard.svelte';
    import DayCard, { type DayType } from './(components)/DayCard.svelte';

    import { events } from '$routes/community/+page.svelte';
    import { Animations } from './(animations)';
-    import VideoWrapper from './(components)/VideoWrapper.svelte';
+    import Ticket from './(components)/Ticket.svelte';
+    import { getMockContributions } from './helpers';
+    import { randomPick } from '$lib/utils/random';
+    import { tribes } from './ticket/customize/form.svelte';
+    import type { TicketVariant } from './ticket/constants';
+    import CountdownCard from './(components)/CountdownCard.svelte';

-    const days: DayType[] = [
+    const base = new Date('2024-02-21 15:00:00 GMT+0000');
+    const addDays = (date: Date, days: number) => {
+        return new Date(date.getTime() + days * 24 * 60 * 60 * 1000);
+    };
+    const toReleaseDate = (date: Date) => {
+        return date.toLocaleDateString('en-US', {
+            weekday: 'long',
+            month: 'short',
+            day: 'numeric'
+        });
+    };
+
+    $: days = [
        {
-            title: 'Day 1',
-            release: new Date(Date.now())
+            title: 'XXX',
+            release: base
        },
        {
-            title: 'Day 2',
-            // Half a day from today
-            release: new Date(Date.now() + 1000 * 60 * 60 * 24 * 0.5)
+            title: 'XXX',
+            release: addDays(base, 1)
        },
        {
-            title: 'Day 3',
-            // 1.5 days from today
-            release: new Date(Date.now() + 1000 * 60 * 60 * 24 * 1.5 - 30 * 60 * 1000 - 36 * 1000)
+            title: 'XXX',
+            release: addDays(base, 2)
        },
        {
-            title: 'Day 4',
-            // 2.5 days from today
-            release: new Date(Date.now() + 1000 * 60 * 60 * 24 * 2.5 - 30 * 60 * 1000 - 36 * 1000)
+            title: 'XXX',
+            release: addDays(base, 3)
        },
        {
-            title: 'Day 5',
-            // 3.5 days from today
-            release: new Date(Date.now() + 1000 * 60 * 60 * 24 * 3.5 - 30 * 60 * 1000 - 36 * 1000)
+            title: 'XXX',
+            release: addDays(base, 4)
        }
+    ] as DayType[];
+
+    const users = [
+        { name: 'Eldad', user: 'eldadfux' },
+        { name: 'Thomas', user: 'tglide' },
+        { name: "Walter O'Brien", user: 'walterob' },
+        { name: 'Sara Kaandorp', user: 'sarak' },
+        { name: 'Carla', user: 'carla' },
+        { name: 'Chen Parnasa', user: 'chenp' },
+        { name: 'Caio Arias', user: 'caioarias' },
+        { name: 'Bradley Schofield', user: '.ionic' },
+        { name: 'Dylan', user: 'dylan' },
+        { name: 'Emma Carpagnano', user: 'emmacarpagnano' },
+        { name: 'Torsten Dittmann', user: 'torstendittmann' },
+        { name: 'Arman Nik', user: 'ArmanNik' }
    ];
+
+    const getRandomTicket = () => {
+        const user = randomPick(users);
+        const tribe = randomPick(tribes);
+
+        return {
+            name: user.name,
+            gh_user: user.user,
+            tribe,
+            variant: randomPick(['default', 'rainbow', 'pink']) as TicketVariant,
+            id: Math.floor(Math.random() * 100000),
+            contributions: getMockContributions()
+        };
+    };
 </script>

 <svelte:head>
@@ -45,11 +86,10 @@
 <Main>
    <div class="hero">
        <h1>
+            <span class="sr-only">Init</span>
            <Animations.Logo />
        </h1>
-        <p class="aw-description">
-            Appwrite is unveiling new features over a week of exciting announcements
-        </p>
+        <p class="aw-description">The start of something new.</p>
        <div class="buttons">
            <a href="/init/ticket" class="aw-button">Claim your ticket</a>
            <button class="aw-button is-secondary">
@@ -63,8 +103,8 @@

    <div class="aw-container">
        <div class="day-cards">
-            {#each days as day, i}
-                <DayCard {day} number={i + 1}>
+            {#each days as day, i (day.release.toISOString())}
+                <DayCard {day} number={i}>
                    {#if i === 0}
                        <Animations.Messaging />
                    {/if}
@@ -74,34 +114,12 @@
        <hr />

        <div class="days">
+            {#each days as day, i}
                <h2 class="aw-eyebrow aw-u-color-text-primary">
                    <div class="aw-dot" />
-                init<span class="aw-u-color-text-accent">_</span>1.5
-            </h2>
-
-            <div class="aw-card is-normal has-border-gradient kickoff">
-                <h3 class="aw-title aw-u-color-text-primary">
-                    Init kickoff<span class="aw-u-color-text-accent">_</span>
-                </h3>
-                <VideoWrapper />
-            </div>
-
-            <h2 class="aw-eyebrow aw-u-color-text-primary">
-                <div class="aw-dot" />
-                Day 1 - Monday, Dec 5<span class="aw-u-color-text-accent">_</span>
-            </h2>
-
-            <div class="mosaic">
-                <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-                {#each { length: 10 } as _, i}
-                    <div class="aw-card is-normal has-border-gradient">{i + 1}</div>
-                {/each}
-            </div>
-
-            {#each days.slice(1) as day, i}
-                <h2 class="aw-eyebrow aw-u-color-text-primary">
-                    <div class="aw-dot" />
-                    DAY {i + 2} - TUESDAY, DEC 6<span class="aw-u-color-text-accent">_</span>
+                    DAY {i} - {toReleaseDate(day.release)}<span class="aw-u-color-text-accent"
+                        >_</span
+                    >
                </h2>

                <CountdownCard date={day.release} />
@@ -111,9 +129,10 @@

    <div class="events">
        <div class="aw-container">
+            <Carousel size="big">
+                <svelte:fragment slot="header">
                    <h2 class="aw-label aw-u-color-text-primary">Upcoming Events</h2>
-
-            <ul class="aw-grid-articles">
+                </svelte:fragment>
                {#each events as event}
                    <li>
                        <EventCard
@@ -128,11 +147,13 @@
                        />
                    </li>
                {/each}
-            </ul>
+            </Carousel>
        </div>
    </div>

    <div class="tickets-preview">
+        <div class="aw-container">
+            <div>
                <h2 class="aw-label aw-u-color-text-primary">
                    Get a ticket and enter our special Init giveaway
                </h2>
@@ -140,17 +161,21 @@
                    Create, customize, and share your Init ticket to enter our general giveaway.
                </p>
                <a href="/init/ticket" class="aw-button is-secondary">Claim your ticket</a>
+            </div>
+
+            <div class="aw-card is-normal has-border-gradient" />
+        </div>

        <div class="tickets">
            <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
            {#each { length: 10 } as _}
-                <enhanced:img class="ticket" src="./(assets)/ticket.png" alt="" />
+                <Ticket {...getRandomTicket()} disableEffects --base-width="14rem" />
            {/each}
        </div>
        <div class="tickets">
            <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
            {#each { length: 9 } as _}
-                <enhanced:img class="ticket" src="./(assets)/ticket.png" alt="" />
+                <Ticket {...getRandomTicket()} disableEffects --base-width="14rem" />
            {/each}
        </div>
    </div>
@@ -158,12 +183,13 @@
    <div class="pre-footer">
        <div class="aw-container">
            <div class="text">
-                <h2 class="aw-label aw-u-color-text-primary">Start building with Appwrite today</h2>
+                <h2 class="aw-label aw-u-color-text-primary">Start building with Appwrite</h2>
                <p class="aw-main-body-500">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ultrices
-                    lacus.
+                    Appwrite's open-source platform lets you add Auth, DBs, Functions and Storage to
+                    your product and build any application at any scale, own your data, and use your
+                    preferred coding languages and tools.
                </p>
-                <a href="/init/ticket" class="aw-button">Claim your ticket</a>
+                <a href="https://cloud.appwrite.io" class="aw-button">Get started</a>
            </div>

            <enhanced:img class="console" src="./(assets)/console.png" alt="" />
@@ -177,6 +203,18 @@
 </Main>

 <style lang="scss">
+    .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+    }
+
    .hero {
        min-height: 500px;
        height: 70vh;
@@ -188,6 +226,7 @@
        gap: 1rem;

        position: relative;
+        overflow-x: clip;

        h1 {
            img {
@@ -205,6 +244,15 @@
            gap: 0.5rem;

            padding-block-start: 1rem;
+
+            @media screen and (max-width: 1023px) {
+                flex-direction: column;
+                align-items: center;
+
+                .aw-button {
+                    width: 300px;
+                }
+            }
        }

        .shines {
@@ -230,6 +278,10 @@
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
+
+        @media screen and (max-width: 1023px) {
+            --day-min-w: 100%;
+        }
    }

    .days {
@@ -254,7 +306,7 @@
            );
        }

-        h2 {
+        :global(h2) {
            position: relative;
            margin-block-end: 1rem;

@@ -262,7 +314,7 @@
                margin-block-start: 5rem;
            }

-            .aw-dot {
+            :global(.aw-dot) {
                position: absolute;
                left: -40px;
                top: 50%;
@@ -291,74 +343,15 @@
            padding-block-start: 1.5rem;
            padding-inline-start: 1.5rem;
        }
-    }
-
-    [class*='mosaic'] {
-        margin-block-start: 1rem;
-    }
-
-    .mosaic {
-        display: grid;
-        grid-template-columns: repeat(12, 1fr);
-        grid-template-rows: repeat(9, 1fr);
-        gap: 2rem;
-
-        min-height: 660px;
-
-        :nth-child(1) {
-            grid-column: 1 / span 3;
-            grid-row: 1 / span 3;
-        }
-
-        :nth-child(2) {
-            grid-column: 1 / span 3;
-            grid-row: 4 / span 3;
-        }
-
-        :nth-child(3) {
-            grid-column: 4 / span 6;
-            grid-row: 1 / span 6;
-        }
-
-        :nth-child(4) {
-            grid-column: 10 / span 3;
-            grid-row: 1 / span 3;
-        }
-
-        :nth-child(5) {
-            grid-column: 10 / span 3;
-            grid-row: 4 / span 3;
-        }
-
-        :nth-child(6) {
-            grid-column: 1 / span 3;
-            grid-row: 7 / span 2;
-        }
-
-        :nth-child(7) {
-            grid-column: 4 / span 3;
-            grid-row: 7 / span 2;
-        }
-
-        :nth-child(8) {
-            grid-column: 7 / span 3;
-            grid-row: 7 / span 2;
-        }
-
-        :nth-child(9) {
-            grid-column: 10 / span 3;
-            grid-row: 7 / span 2;
-        }
-
-        :nth-child(10) {
-            grid-column: 1 / span 12;
-            grid-row: 9 / span 1;
-        }

        @media screen and (max-width: 1023px) {
-            display: flex;
            flex-direction: column;
            gap: 1rem;
+            height: unset;
+
+            h3 {
+                padding-inline-start: 1.25rem;
+            }
        }
    }

@@ -386,12 +379,41 @@
        padding-block-end: 0rem;
        overflow: hidden;

-        h2,
-        p,
-        a {
+        .aw-container {
+            display: flex;
+            justify-content: space-between;
+
+            > :first-child {
+                max-inline-size: 360px;
+                text-wrap: balance;
+            }
+
+            .aw-card {
+                width: 480px;
+                height: 200px;
+            }
+
+            @media screen and (max-width: 1023px) {
+                flex-direction: column-reverse;
+                align-items: center;
+                gap: 2rem;
+
+                > :first-child {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
                    text-align: center;
-            margin-inline: auto;
-            max-inline-size: 21.5625rem;
+
+                    .aw-button {
+                        width: 100%;
+                    }
+                }
+
+                .aw-card {
+                    width: 100%;
+                    height: 200px;
+                }
+            }
        }

        p {
@@ -412,13 +434,6 @@
            left: 50%;
            transform: translateX(-50%);

-            .ticket {
-                flex-shrink: 0;
-                height: 20rem;
-                width: auto;
-                object-fit: contain;
-            }
-
            &:nth-last-child(2) {
                margin-block-start: 5rem;
            }
@@ -432,7 +447,7 @@
    }

    .pre-footer {
-        padding-block-start: 10rem;
+        padding-block-start: 0rem;
        padding-block-end: 0;
        overflow: hidden;

@@ -440,12 +455,19 @@
            position: relative;
            height: 43.75rem;

+            @media screen and (max-width: 1023px) {
+                height: 36.4375rem;
+            }
+
            .text {
-                position: absolute;
-                inset-inline-start: 0;
+                position: relative;
                inset-block-start: 10rem;
                max-inline-size: 25rem;

+                @media screen and (max-width: 1023px) {
+                    inset-block-start: 3rem;
+                }
+
                p {
                    margin-block-start: 0.75rem;
                }
@@ -459,6 +481,16 @@
                position: absolute;
                inset-inline-end: -50%;
                inset-block-end: -10rem;
+
+                @media screen and (max-width: 1023px) {
+                    inset-inline-end: -100px;
+                    inset-block-end: 3rem;
+
+                    max-block-size: unset;
+                    block-size: 275px;
+                    max-inline-size: unset;
+                    inline-size: auto;
+                }
            }

            &::before {
--- a/src/routes/init/ticket/constants.ts
+++ b/src/routes/init/ticket/constants.ts
@@ -12,7 +12,7 @@ export type TicketVariant = 'default' | 'pink' | 'rainbow';

 export type TicketData = Pick<Models.Document, '$id'> & {
    name: string;
-    tribe?: string;
+    tribe?: string | null
    gh_user?: string;
    aw_email?: string;
    id: number;
--- a/src/routes/init/ticket/customize/form.svelte
+++ b/src/routes/init/ticket/customize/form.svelte
@@ -1,3 +1,25 @@
+<script lang="ts" context="module">
+    export const tribes = [
+        null,
+        'Appwrite',
+        'Flutter',
+        'Svelte',
+        'React',
+        'Vue',
+        'Angular',
+        'Next',
+        'Apple',
+        'Android',
+        'Windows',
+        'Linux',
+        'Python',
+        'Dart',
+        'php',
+        'Ruby',
+        'NET'
+    ];
+</script>
+
 <script lang="ts">
    import { browser, dev } from '$app/environment';
    import { goto } from '$app/navigation';
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,9 +1,8 @@
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 import { vitePreprocess } from '@sveltejs/kit/vite';
-import { preprocessMeltUI } from '@melt-ui/pp';
+import { preprocessMeltUI, sequence } from '@melt-ui/pp';
 import { markdoc } from 'svelte-markdoc-preprocess';
-import sequence from 'svelte-sequential-preprocessor';
 import nodeAdapter from '@sveltejs/adapter-node';

 function absolute(path) {