feat: website release v2 (#616)

* feat: upgrade to svelte 5 & tailwind v4 + add navigation menu to ui package

* feat: website navigation with nav menu from shadcn

* chore: refactor navigation menu storybook

* fix: responsiveness bug

* chore: remove tailwind config file

* chore:
- remove carbon icons from repo
- add Geist font family

* refactor website

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/website/src/lib/features/tools/tic-tac-toe/winning-line.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  export let winner: Winner | null = null;
+
+  interface Winner {
+    direction: 'horizontal' | 'vertical' | 'diagonal';
+    row?: number;
+    column?: number;
+    diagonal?: 'top-left-to-bottom-right' | 'top-right-to-bottom-left';
+  }
+
+  $: if (winner) {
+    if (winner.direction === 'vertical' && winner.column !== undefined) {
+      document.documentElement.style.setProperty('--col-index', winner.column.toString());
+    } else if (winner.direction === 'horizontal' && winner.row !== undefined) {
+      document.documentElement.style.setProperty('--row-index', winner.row.toString());
+    }
+  }
+</script>
+
+{#if winner}
+  <div
+    transition:fade={{ delay: 500, duration: 2 }}
+    class="winning-line absolute bg-[#ffc300] z-[100]"
+    class:horizontal-line={winner.direction === 'horizontal'}
+    class:vertical-line={winner.direction === 'vertical'}
+    class:diagonal-line-1={winner.direction === 'diagonal' &&
+      winner.diagonal === 'top-left-to-bottom-right'}
+    class:diagonal-line-2={winner.direction === 'diagonal' &&
+      winner.diagonal === 'top-right-to-bottom-left'}
+  ></div>
+{/if}
+
+<style>
+  .horizontal-line {
+    top: calc(var(--row-index) * 100px + 50px - 5px);
+    left: 0;
+    width: 100%;
+    height: 10px;
+  }
+
+  .vertical-line {
+    top: 0;
+    left: calc(var(--col-index) * 100px + 50px - 5px);
+    width: 10px;
+    height: 100%;
+  }
+
+  .diagonal-line-1 {
+    top: 0;
+    left: 0;
+    width: 140%;
+    height: 100%;
+    background: none;
+    border-top: 10px solid #ffc300;
+    transform: rotate(45deg);
+    transform-origin: top left;
+  }
+
+  .diagonal-line-2 {
+    top: 0;
+    right: 0;
+    width: 140%;
+    height: 100%;
+    background: none;
+    border-top: 10px solid #ffc300;
+    transform: rotate(-45deg);
+    transform-origin: top right;
+  }
+
+  @media (max-width: 600px) {
+    .horizontal-line {
+      top: calc(var(--row-index) * 16vw + 8vw - 5px);
+    }
+
+    .vertical-line {
+      left: calc(var(--col-index) * 16vw + 8vw - 5px);
+    }
+  }
+</style>