frontend/src/app.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="scrollbar-stable">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />

frontend/src/lib/components/Footer.svelte

@@ -1,11 +1,8 @@
-<footer class="border-t border-white/5 py-8">
+<footer class="border-t border-white/10 py-8">
 	<div
-		class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-6 text-sm text-neutral-500 sm:flex-row"
+		class="flex flex-col items-center justify-between gap-4 px-8 text-sm text-neutral-500 sm:flex-row"
 	>
 		<p>© {new Date().getFullYear()} Musify · Streaming de música.</p>
-		<div class="flex gap-6">
+		<p class="text-neutral-600">Tu música, siempre contigo.</p>
-			<a href="/explore" class="transition hover:text-neutral-300">Explorar</a>
-			<a href="/login" data-sveltekit-reload class="transition hover:text-neutral-300">Entrar</a>
-		</div>
 	</div>
 </footer>

frontend/src/lib/components/Navbar.svelte

@@ -6,27 +6,15 @@
 	}
 
 	let { user }: Props = $props();
-
-	const links = [
-		{ href: '/', label: 'Inicio' },
-		{ href: '/explore', label: 'Explorar' }
-	];
 </script>
 
-<header class="sticky top-0 z-50 border-b border-white/5 bg-neutral-950/80 backdrop-blur">
+<header class="sticky top-0 z-50 border-b border-white/10 bg-neutral-950/80 backdrop-blur">
-	<nav class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
+	<nav class="flex items-center justify-between gap-4 px-8 py-4">
-		<a href="/" class="flex items-center gap-2 text-lg font-bold tracking-tight">
+		<a href="/" class="text-lg tracking-tight text-neutral-100 transition hover:text-white">
-			<span class="grid h-8 w-8 place-items-center rounded-lg bg-emerald-500 text-neutral-950">♪</span>
 			Musify
 		</a>
 
-		<div class="hidden items-center gap-8 md:flex">
+		<div class="flex items-center gap-6">
-			{#each links as link (link.href)}
-				<a href={link.href} class="text-sm text-neutral-300 transition hover:text-white">{link.label}</a>
-			{/each}
-		</div>
-
-		<div class="flex items-center gap-3">
 			{#if user}
 				<a href="/explore" class="flex items-center gap-2 text-sm text-neutral-200">
 					{#if user.picture}
@@ -42,7 +30,7 @@
 				</a>
 				<form method="POST" action="/logout">
 					<button
-						class="rounded-full border border-white/15 px-4 py-2 text-sm font-semibold text-white transition hover:bg-white/5"
+						class="rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white backdrop-blur-md transition hover:bg-white/5"
 					>
 						Salir
 					</button>
@@ -58,7 +46,7 @@
 				<a
 					href="/login?mode=register"
 					data-sveltekit-reload
-					class="rounded-full bg-emerald-500 px-4 py-2 text-sm font-semibold text-neutral-950 transition hover:bg-emerald-400"
+					class="rounded-full bg-[var(--mf-accent)] px-4 py-2 text-sm font-semibold text-neutral-950 backdrop-blur-md transition hover:brightness-110"
 				>
 					Registrarse
 				</a>