adding more things

src/app.css

@@ -1,8 +1,11 @@
 :root {
     /* Brand Colors */
-  --color-primary: #0056b3; /* Deep Blue - Trust & Engineering */
+    --color-primary: #0056b3;
-  --color-secondary: #00a8e8; /* Light Blue - Technology & Innovation */
+    /* Deep Blue - Trust & Engineering */
-  --color-accent: #ffc107; /* Amber - Energy & Attention */
+    --color-secondary: #00a8e8;
+    /* Light Blue - Technology & Innovation */
+    --color-accent: #ffc107;
+    /* Amber - Energy & Attention */
     --color-dark: #1a1a1a;
     --color-light: #f8f9fa;
     --color-white: #ffffff;
@@ -46,7 +49,12 @@ body {
     overflow-x: hidden;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     font-family: var(--font-heading);
     color: var(--color-dark);
     line-height: 1.2;
@@ -87,6 +95,7 @@ img {
 }
 
 .btn-primary {
+    border: 2px solid var(--color-primary);
     background-color: var(--color-primary);
     color: var(--color-white);
 }

src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '../app.css';
+  import logo from '$lib/assets/logo2.png'
 	let { children } = $props();
 	
 	let isMenuOpen = $state(false);
@@ -15,7 +16,7 @@
 
 <svelte:head>
 	<link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
 	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;700&display=swap" rel="stylesheet">
 	<title>EITS - Engineering Integral Tech Solutions</title>
 </svelte:head>
@@ -23,7 +24,9 @@
 <div class="app">
 	<header class="header">
 		<div class="container header-content">
-			<a href="/" class="logo" onclick={closeMenu}>EITS</a>
+			<a href="/"  onclick={closeMenu}>
+        <img src={logo} style="width:  80px;" alt="logo.png" />
+      </a>
 			
 			<button class="menu-toggle" onclick={toggleMenu} aria-label="Toggle menu">
 				<span class="bar"></span>
@@ -33,11 +36,11 @@
 
 			<nav class="nav {isMenuOpen ? 'active' : ''}">
 				<a href="/" onclick={closeMenu}>Inicio</a>
-				<a href="/about" onclick={closeMenu}>Nosotros</a>
+				<a href="/acerca" onclick={closeMenu}>Nosotros</a>
-				<a href="/services" onclick={closeMenu}>Servicios</a>
+				<a href="/servicios" onclick={closeMenu}>Servicios</a>
-				<a href="/portfolio" onclick={closeMenu}>Portafolio</a>
+				<a href="/portafolio" onclick={closeMenu}>Portafolio</a>
 				<a href="/blog" onclick={closeMenu}>Blog</a>
-				<a href="/contact" class="btn btn-primary btn-sm" onclick={closeMenu}>Contacto</a>
+				<a href="/contacto" onclick={closeMenu}>Contacto</a>
 			</nav>
 		</div>
 	</header>

src/routes/+page.svelte

@@ -5,11 +5,20 @@
 <svelte:head>
 	<title>Inicio | EITS</title>
 </svelte:head>
+<!-- font-family: var(--font-heading); -->
+<!--     color: var(--color-dark); -->
+<!--     line-height: 1.2; -->
+<!--     margin-bottom: 1rem; -->
 
 <section class="hero">
 	<div class="container hero-content">
 		<h1>Soluciones Integrales de Ingeniería y Tecnología</h1>
-		<p>Impulsamos el crecimiento sostenible de la industria con automatización, energía y tecnología avanzada.</p>
+    <span class="eits">
+        <span class="first-letter">E</span>ngineering 
+        <span class="first-letter">I</span>ntegral 
+        <span class="first-letter">T</span>ech
+        <span class="first-letter">S</span>olutions</span>
+		<p style="margin-top: 15px">Impulsamos el crecimiento sostenible de la industria con automatización y tecnología avanzada</p>
 		<div class="hero-btns">
 			<a href="/contact" class="btn btn-primary">Contáctanos</a>
 			<a href="/services" class="btn btn-outline">Nuestros Servicios</a>
@@ -137,4 +146,17 @@
 	.feature h3 {
 		color: var(--color-secondary);
 	}
+
+  .eits {
+    font-size: 1.3rem;
+    line-height: 1.2;
+    color: black;
+    margin-bottom: 100px;
+  }
+
+  .first-letter {
+      font-weight: bold;
+      font-size: 1.4rem;
+      color: black;
+  }
 </style>