Refactor Slider component to include zoom functionality and improve h…

…andle movement and size calculation

apps/team/app.vue

@@ -1,5 +1,71 @@
+<script setup lang="ts">
+import '@nobel/core/styles/main.scss'
+import { umbra } from '@umbrajs/core'
+import type { Accent } from '@umbrajs/core'
+
+const warningAccent: Accent = {
+  name: 'warning',
+  color: '#ff0000'
+}
+
+const successAccent: Accent = {
+  name: 'success',
+  color: '#00ff00'
+}
+
+const theme = umbra({
+  background: '#ffffff',
+  foreground: '#000000',
+  accents: ['#8888ff', warningAccent, successAccent]
+})
+</script>
+
 <template>
   <div>
     <NuxtPage />
   </div>
 </template>
+
+<style>
+header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+nav {
+  display: flex;
+  gap: var(--space-3);
+  justify-content: center;
+  margin-bottom: var(--space-3);
+}
+
+nav a {
+  text-decoration: none;
+  color: var(--base-120);
+}
+
+nav a:hover {
+  color: var(--accent-50);
+}
+
+nav a.router-link-active {
+  color: var(--accent-60);
+}
+
+body {
+  background: var(--base);
+  padding: var(--space-1);
+  height: 100%;
+}
+
+#app {
+  height: 100%;
+}
+
+main {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+</style>

apps/team/package.json

@@ -9,6 +9,13 @@
   },
   "dependencies": {
     "@nuxt/content": "^2.13.4",
-    "nuxt": "^3.13.2"
+    "nuxt": "^3.13.2",
+    "@nobel/core": "workspace:*",
+    "@umbrajs/core": "workspace:*",
+    "@vueuse/components": "^11.0.3",
+    "@vueuse/core": "^11.0.3",
+    "colord": "^2.9.3",
+    "gsap": "^3.12.5",
+    "gsap-trial": "^3.12.5"
   }
 }

packages/nobel/styles/base.css

@@ -72,3 +72,13 @@ button {
   outline: none;
   padding: 0;
 }
+
+a {
+  color: var(--accent-60);
+  text-decoration: none;
+  transition: var(--time);
+}
+
+a:hover {
+  color: var(--accent-100);
+}