💄 Improve landing page

frontend/package.json

@@ -46,7 +46,7 @@
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"svelte-sonner": "^1.0.5",
-		"tailwind-merge": "^3.0.2",
+		"tailwind-merge": "^3.3.1",
 		"tailwind-variants": "^1.0.0",
 		"tailwindcss": "^4.0.0",
 		"tw-animate-css": "^1.3.4",
@@ -63,6 +63,7 @@
 	"dependencies": {
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@tanstack/svelte-query": "^5.81.2",
+		"cobe": "^0.6.4",
 		"jwt-decode": "^4.0.0",
 		"openapi-fetch": "^0.14.0"
 	}

frontend/src/lib/components/landing/Globe.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import createGlobe from 'cobe';
+	import { Spring } from 'svelte/motion';
+	import { cn } from '$lib/utils';
+
+	const x = new Spring(0, {
+		stiffness: 0.04,
+		damping: 0.4,
+		precision: 0.005
+	});
+
+	const { class: className = '' }: { class?: string } = $props();
+	let pointerInteracting: number | null = $state(null);
+	let pointerInteractionMovement = $state(0);
+	let canvas: HTMLCanvasElement;
+
+	let phi = 0;
+	let width = 0;
+
+	let onResize = () => {
+		width = canvas.offsetWidth;
+	};
+
+	// eslint-disable-next-line  @typescript-eslint/no-explicit-any
+	let onRender = (state: any) => {
+		if (!pointerInteracting) {
+			phi += 0.005;
+		}
+		state.phi = phi + x.current;
+		state.width = width * 2;
+		state.height = width * 2;
+	};
+
+	onMount(() => {
+		// Adds the resize event listener when the component is mounted
+		window.addEventListener('resize', onResize);
+		onResize();
+
+		// eslint-disable-next-line  @typescript-eslint/no-unused-vars
+		const globe = createGlobe(canvas, {
+			devicePixelRatio: 2,
+			width: width,
+			height: width,
+			phi: 0,
+			theta: 0.3,
+			dark: 1,
+			diffuse: 0.4, // 1.2
+			mapSamples: 16000,
+			mapBrightness: 1.2, // 6
+			baseColor: [0.3, 0.3, 0.3],
+			markerColor: [251 / 255, 100 / 255, 21 / 255],
+			glowColor: [1, 1, 1],
+			markers: [
+				{ location: [14.5995, 120.9842], size: 0.03 },
+				{ location: [19.076, 72.8777], size: 0.03 },
+				{ location: [23.8103, 90.4125], size: 0.05 },
+				{ location: [30.0444, 31.2357], size: 0.07 },
+				{ location: [39.9042, 116.4074], size: 0.08 },
+				{ location: [-23.5505, -46.6333], size: 0.05 },
+				{ location: [19.4326, -99.1332], size: 0.04 },
+				{ location: [40.7128, -74.006], size: 0.1 },
+				{ location: [34.6937, 135.5022], size: 0.05 },
+				{ location: [41.0082, 28.9784], size: 0.06 }
+			],
+			onRender: onRender
+		});
+
+		// Removes the resize event listener when the component is unmounted to prevent memory leaks
+		return () => {
+			window.removeEventListener('resize', onResize);
+		};
+	});
+</script>
+
+<main class={cn('absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px]', className)}>
+	<canvas
+		class="h-full w-full [contain:layout_paint_size]"
+		bind:this={canvas}
+		onpointerdown={(e) => {
+			pointerInteracting = e.clientX - pointerInteractionMovement;
+			canvas.style.cursor = 'grabbing';
+		}}
+		onpointerup={() => {
+			pointerInteracting = null;
+			canvas.style.cursor = 'grab';
+		}}
+		onpointerout={() => {
+			pointerInteracting = null;
+			canvas.style.cursor = 'grab';
+		}}
+		onmousemove={(e) => {
+			if (pointerInteracting !== null) {
+				const delta = e.clientX - pointerInteracting;
+				pointerInteractionMovement = delta;
+				x.set(delta / 200);
+			}
+		}}
+	></canvas>
+</main>

frontend/src/lib/components/landing/GlobeCard.svelte

@@ -0,0 +1,18 @@
+<script>
+	import Globe from './Globe.svelte';
+	import WordRotate from './WordRotate.svelte';
+</script>
+
+<div
+	class="bg-background relative flex h-fit w-full max-w-[32rem] items-center justify-center overflow-hidden rounded-lg border px-40 pt-8 pb-40 md:pb-60 md:shadow-xl"
+>
+	<span
+		class="pointer-events-none bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl leading-none font-semibold whitespace-pre-wrap text-transparent select-none dark:from-white dark:to-slate-900/10"
+	>
+		<WordRotate words={['Explore', 'Discover', 'Collaborate', 'Connect', 'Build', 'Launch']} />
+	</span>
+	<Globe class="top-28" />
+	<div
+		class="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]"
+	/>
+</div>

frontend/src/lib/components/landing/WordRotate.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { onMount } from 'svelte';
+
+	const {
+		words,
+		duration = 2100,
+		class: className = ''
+	}: {
+		words: string[];
+		duration?: number;
+		class?: string;
+	} = $props();
+
+	let index = $state(0);
+	const changeIndex = () => {
+		index = (index + 1) % words.length;
+	};
+	onMount(() => {
+		let interval = setInterval(changeIndex, duration);
+		return () => clearInterval(interval);
+	});
+</script>
+
+<div class="overflow-hidden py-2">
+	{#key index}
+		<h1 class={cn(className, 'text-center')}>
+			{words[index]}
+		</h1>
+	{/key}
+</div>

frontend/src/routes/+page.svelte

@@ -17,6 +17,7 @@
 		Star,
 		Github
 	} from '@lucide/svelte';
+	import GlobeCard from '@/components/landing/GlobeCard.svelte';
 </script>
 
 <div class="flex min-h-screen flex-col">
@@ -83,13 +84,14 @@
 					</div>
 					<div class="flex items-center justify-center">
 						<div class="relative">
-							<img
-								src={placeholder}
-								width="600"
-								height="400"
-								alt="Platform Dashboard"
-								class="aspect-video overflow-hidden rounded-xl object-cover shadow-2xl"
-							/>
+							<!--							<img-->
+							<!--								src={placeholder}-->
+							<!--								width="600"-->
+							<!--								height="400"-->
+							<!--								alt="Platform Dashboard"-->
+							<!--								class="aspect-video overflow-hidden rounded-xl object-cover shadow-2xl"-->
+							<!--							/>-->
+							<GlobeCard />
 							<div
 								class="from-background/20 absolute inset-0 rounded-xl bg-gradient-to-t to-transparent"
 							/>

frontend/src/routes/app/(components)/ChooseRoleDialog.svelte

@@ -17,31 +17,31 @@
 			label: 'Viewer',
 			description: 'Browse and explore content',
 			icon: Eye,
-			color: 'bg-blue-50 border-blue-200 hover:bg-blue-100',
+			color: 'bg-blue-50/10 border-blue-200 hover:bg-blue-100/50',
 			iconColor: 'text-blue-600'
 		},
 		{
 			value: 'FOUNDER' as UserRole,
 			label: 'Founder',
 			description: 'Build and manage your startup',
 			icon: Rocket,
-			color: 'bg-purple-50 border-purple-200 hover:bg-purple-100',
+			color: 'bg-purple-50/10 border-purple-200 hover:bg-purple-100/50',
 			iconColor: 'text-purple-600'
 		},
 		{
 			value: 'DEVELOPER' as UserRole,
 			label: 'Developer',
 			description: 'Create and contribute to projects',
 			icon: Code,
-			color: 'bg-green-50 border-green-200 hover:bg-green-100',
+			color: 'bg-green-50/10 border-green-200 hover:bg-green-100/50',
 			iconColor: 'text-green-600'
 		},
 		{
 			value: 'INVESTOR' as UserRole,
 			label: 'Investor',
 			description: 'Discover investment opportunities',
 			icon: TrendingUp,
-			color: 'bg-orange-50 border-orange-200 hover:bg-orange-100',
+			color: 'bg-orange-50/10 border-orange-200 hover:bg-orange-100/50',
 			iconColor: 'text-orange-600'
 		}
 	];
@@ -82,13 +82,13 @@
 						isSelected ? 'border-primary bg-primary/5 ring-primary/20 ring-2' : role.color
 					)}
 				>
-					<div class={cn('rounded-lg p-2', isSelected ? 'bg-primary/10' : 'bg-white')}>
+					<div class={cn('rounded-lg p-2', isSelected ? 'bg-primary/10' : 'bg-background')}>
 						<Icon class={cn('h-5 w-5', isSelected ? 'text-primary' : role.iconColor)} />
 					</div>
 
 					<div class="flex-1">
 						<div class="flex items-center gap-2">
-							<h3 class="text-foreground font-medium">{role.label}</h3>
+							<h3 class="font-medium">{role.label}</h3>
 							{#if isSelected}
 								<Badge variant="default" class="h-5 px-2">
 									<Check class="h-3 w-3" />