update hero and map

src/app.css

@@ -311,6 +311,9 @@
     --text-display: clamp(3rem, 7vw, 4rem);
     --text-display--line-height: clamp(3.125rem, 7.5vw, 4.25rem);
     --text-display--letter-spacing: var(--tracking-compressed);
+    --text-hero: clamp(3.25rem, 7vw, 4.5rem);
+    --text-hero--line-height: clamp(3.125rem, 7.5vw, 4.25rem);
+    --text-hero--letter-spacing: var(--tracking-compressed);
     --text-headline: clamp(3.5rem, 8vw, 5.5rem);
     --text-headline--line-height: clamp(3.5rem, 8.5vw, 5.75rem);
     --text-headline--letter-spacing: var(--tracking-compressed);

src/lib/actions/mouse-position.ts

@@ -1,4 +1,4 @@
-import { inView } from 'motion';
+import { hover, inView } from 'motion';
 import { type Writable, writable } from 'svelte/store';
 
 export const useMousePosition = () => {
@@ -9,19 +9,19 @@ export const useMousePosition = () => {
 
     const action = (node: HTMLElement) => {
         const handleMouseMove = (event: MouseEvent) => {
+            // Get the bounding rectangle of the element
+            const rect = node.getBoundingClientRect();
+
+            // Calculate position relative to the element
             position.set({
-                x: event.clientX,
-                y: event.clientY
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top
             });
         };
 
-        inView(
-            node,
-            () => {
+        hover(node, () => {
             node.addEventListener('mousemove', handleMouseMove);
-            },
-            { amount: 'any' }
-        );
+        });
 
         return {
             destroy() {

src/lib/components/appwrite-network/map-tooltip.svelte

@@ -27,8 +27,9 @@
 {#if $tooltipData.city}
     <div
         class="pointer-events-none absolute"
-        style:left="{coords.x - 50}px"
-        style:top="{coords.y - 50}px"
+        style:left="{coords.x + 100}px"
+        style:top="{coords.y - 20}px"
+        style:transform="translate(-50%, -100%)"
     >
         <div
             class={classNames(

src/lib/components/appwrite-network/map.svelte

@@ -16,12 +16,6 @@
     import { useAnimateInView } from '$lib/actions/animate-in-view';
     import { pins, type PinSegment } from './data/pins';
     import MapTooltip from './map-tooltip.svelte';
-    import { dev } from '$app/environment';
-
-    let dimensions = $state({
-        width: 0,
-        height: 0
-    });
 
     let activeRegion = $state<string | null>(null);
     let activeMarker: HTMLElement | null = null;
@@ -92,8 +86,6 @@
         >
             <div
                 class="relative w-full origin-bottom transform-[perspective(25px)_rotateX(1deg)_scale3d(1.4,_1.4,_1)] transition-all [scrollbar-width:none]"
-                bind:clientWidth={dimensions.width}
-                bind:clientHeight={dimensions.height}
             >
                 <div
                     class="absolute inset-0 mask-[image:url('/images/appwrite-network/map.svg')] mask-contain mask-no-repeat"

src/lib/components/fancy/gradient-text.svelte

@@ -13,7 +13,7 @@
 
 <span
     class={classNames(
-        '-mb-1 block bg-[linear-gradient(6deg,_#f8a1ba,_#fff_35%)] bg-clip-text pb-1 text-transparent',
+        '-mb-1 block bg-linear-145 from-[#f8a1ba] to-white to-50% bg-clip-text pb-1 text-transparent',
         className
     )}
     {...rest}

src/routes/(marketing)/(components)/hero.svelte

@@ -20,7 +20,7 @@
             class="animate-blur-in flex flex-col gap-4 [animation-delay:150ms] [animation-duration:1000ms]"
         >
             <GradientText class="animate-fade-in">
-                <h1 class="text-display font-aeonik-pro text-pretty">
+                <h1 class="font-aeonik-pro text-hero text-pretty">
                     Build like a team of hundreds<span class="text-accent">_</span>
                 </h1>
             </GradientText>