Add Heading

src/lib/components/layout/Navbar.svelte

@@ -3,9 +3,9 @@
 	import gecko_code from "$lib/assets/logos/gecko-code.svg";
 
 	const current_path = $derived($page.url.pathname);
-	
+
 	let menuOpen = $state(false);
-	
+
 	const LINKS = [
 		{ text: "Inicio", href: "/" },
 		{ text: "Eventos", href: "/events" },
@@ -21,7 +21,6 @@
 	const closeMenu = () => {
 		menuOpen = false;
 	};
-
 </script>
 
 <nav class="nav-background flex items-center justify-between p-4">
@@ -32,7 +31,7 @@
 		<span class="line"></span>
 		<span class="line"></span>
 	</button>
-	<div class="links relative z-10 flex gap-x-8 text-lg links {menuOpen ? 'open' : ''}">
+	<div class="links links relative z-10 flex gap-x-8 text-lg {menuOpen ? 'open' : ''}">
 		{#each LINKS as { href, text } (href)}
 			<a {href} class="relative font-fira hover:underline" on:click={closeMenu}>
 				<span
@@ -62,7 +61,6 @@
 	.nav-background {
 		background-image: url("$lib/assets/forms/line.svg");
 		background-repeat: no-repeat;
-		background-position: left;
 		top: 20px;
 		background-size: 97% auto;
 	}
@@ -85,10 +83,10 @@
 		background-color: white;
 	}
 
-/* Estilos para pantallas pequeñas */
+	/* Estilos para pantallas pequeñas */
 	@media (max-width: 768px) {
 		.links {
-			position: fixed; /* Posición fija para que el menú cubra toda la pantalla */
+			position: fixed;
 			inset: 0; /* El menú ocupará toda la pantalla */
 			background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro para mayor visibilidad */
 			z-index: 50; /* Asegurar que esté por delante de otros elementos */
@@ -100,13 +98,17 @@
 			width: 100%;
 		}
 
+		nav img {
+			margin-bottom: 5rem;
+		}
 		.links.open {
 			display: flex; /* Mostrar el menú cuando esté abierto */
 		}
 
 		.hamburger {
 			display: flex;
 			margin-right: 20px;
+			margin-bottom: 5rem;
 		}
 	}
 

src/routes/events/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import Event from "$lib/components/Event.svelte";
-
+	import Heading from "$lib/components/layout/Heading.svelte";
+ 
 	let { data } = $props();
 </script>
-
+<Heading title="EVENTOS" />
 <div class="flex flex-col items-center px-8">
 	{#each data.events as event}
 		<Event

src/routes/projects/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import CommonCard from "$lib/components/CommonCard.svelte";
+	import Heading from "$lib/components/layout/Heading.svelte";
 
 	let { data } = $props();
 </script>
-
+<Heading title="PROYECTOS" />
 <p class="font-medium">{data.description}</p>
 <div class="mt-8 flex flex-col items-center sm:flex sm:flex-row sm:flex-wrap">
 	{#each data.projects as project}