From 34272d07fd1d232bf2efcecf33664ff0bc35067c Mon Sep 17 00:00:00 2001
From: luis cespedes <lxluxo23@gmail.com>
Date: Wed, 14 May 2025 13:16:58 -0400
Subject: [PATCH] arreglos landing

---
 src/app/app.module.ts                  |   3 +
 src/app/pages/home/home.component.html | 545 +++++++++++++------------
 2 files changed, 290 insertions(+), 258 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8467a4a..6f092b9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -13,6 +13,8 @@ import { CommonModule } from '@angular/common';
 import { InputTextModule } from 'primeng/inputtext';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import { HomeComponent } from './pages/home/home.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
 @NgModule({
   declarations: [
     AppComponent,
@@ -31,6 +33,7 @@ import { HomeComponent } from './pages/home/home.component';
     CommonModule,
     InputTextModule,
     InputTextareaModule,
+    TranslateModule.forRoot()
 
   ],
   providers: [],
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index e8cde39..7386637 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -1,277 +1,264 @@
-
-<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
-    <div class="font-bold mr-8">🔥 Hot Deals!</div>
-    <div class="align-items-center hidden lg:flex">
-        <span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
-    </div>
-    <a class="flex align-items-center ml-2 mr-8">
-        <span class="underline font-bold">Learn More</span>
-    </a>
-    <a class="flex align-items-center no-underline justify-content-center border-circle text-gray-100 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150" style="width:2rem; height: 2rem">
-        <i class="pi pi-times"></i>
-    </a>
-</div>
 <div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between relative lg:static">
-    <img src="assets/images/blocks/logos/hyper.svg" alt="Image" height="50">
-    <a class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
+    <img src="assets/images/logo.svg" alt="Web Gen" height="50">
+    <a class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden"
+        [hideOnOutsideClick]="true">
         <i class="pi pi-bars text-4xl"></i>
     </a>
-    <div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full surface-overlay left-0 top-100 px-6 lg:px-0 z-2 shadow-2 lg:shadow-none">
+    <div
+        class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full surface-overlay left-0 top-100 px-6 lg:px-0 z-2 shadow-2 lg:shadow-none">
         <section></section>
-        <ul class="list-none p-0 m-0 flex lg:align-items-center text-900 select-none flex-column lg:flex-row cursor-pointer">
+        <ul
+            class="list-none p-0 m-0 flex lg:align-items-center text-900 select-none flex-column lg:flex-row cursor-pointer">
+            <li>
+                <a pRipple
+                    class="flex px-0 lg:px-5 py-3 hover:text-blue-600 font-medium transition-colors transition-duration-150">
+                    <span>Inicio</span>
+                </a>
+            </li>
             <li class="relative">
-                <a pRipple class="flex px-0 lg:px-5 py-3 align-items-center hover:text-blue-600 font-medium transition-colors transition-duration-150" 
-                    pStyleClass="@next" enterClass="hidden" enterActiveClass="scalein" leaveToClass="hidden" leaveActiveClass="fadeout" [hideOnOutsideClick]="true">
-                    <span>Products</span>
+                <a pRipple
+                    class="flex px-0 lg:px-5 py-3 align-items-center hover:text-blue-600 font-medium transition-colors transition-duration-150"
+                    pStyleClass="@next" enterClass="hidden" enterActiveClass="scalein" leaveToClass="hidden"
+                    leaveActiveClass="fadeout" [hideOnOutsideClick]="true">
+                    <span>Servicios</span>
                     <i class="pi pi-chevron-down ml-auto lg:ml-3"></i>
                 </a>
-                <ul class="list-none p-0 m-0 border-round shadow-0 lg:shadow-2 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem">
+                <ul
+                    class="list-none p-0 m-0 border-round shadow-0 lg:shadow-2 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem">
                     <li>
-                        <a pRipple class="flex p-3 align-items-center hover:surface-50 transition-colors transition-duration-150">
-                            <i class="pi pi-list text-2xl mr-2 text-blue-600"></i>
-                            <span>Features</span>
+                        <a pRipple
+                            class="flex p-3 align-items-center hover:surface-50 transition-colors transition-duration-150">
+                            <i class="pi pi-desktop text-2xl mr-2 text-blue-600"></i>
+                            <span>Desarrollo Web</span>
                         </a>
                     </li>
                     <li>
-                        <a pRipple class="flex p-3 align-items-center hover:surface-50 transition-colors transition-duration-150">
+                        <a pRipple
+                            class="flex p-3 align-items-center hover:surface-50 transition-colors transition-duration-150">
+                            <i class="pi pi-server text-2xl mr-2 text-blue-600"></i>
+                            <span>Infraestructura TI</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a pRipple
+                            class="flex p-3 align-items-center hover:surface-50 transition-colors transition-duration-150">
                             <i class="pi pi-shield text-2xl mr-2 text-blue-600"></i>
-                            <span>Solutions</span>
+                            <span>Ciberseguridad</span>
                         </a>
                     </li>
                     <li>
-                        <a pRipple class="flex p-3 align-items-center hover:surface-50 transition-colors transition-duration-150">
-                            <i class="pi pi-users text-2xl mr-2 text-blue-600"></i>
-                            <span>Customers</span>
+                        <a pRipple
+                            class="flex p-3 align-items-center hover:surface-50 transition-colors transition-duration-150">
+                            <i class="pi pi-chart-line text-2xl mr-2 text-blue-600"></i>
+                            <span>Consultoría TI</span>
                         </a>
                     </li>
-                    <li class="relative">
-                        <a pRipple class="flex p-3 align-items-center hover:surface-50 transition-colors transition-duration-150"
-                            pStyleClass="@next" enterClass="hidden" enterActiveClass="scalein" leaveToClass="hidden" leaveActiveClass="fadeout" [hideOnOutsideClick]="true">
-                            <i class="pi pi-question-circle text-2xl mr-2 text-blue-600"></i>
-                            <span>Support</span>
-                            <i class="pi pi-chevron-down ml-auto lg:-rotate-90"></i>
-                        </a>
-                        <ul class="list-none py-3 pl-3 pr-0 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer left-100 top-0">
-                            <li>
-                                <a pRipple class="flex p-3 align-items-center hover:surface-50 transition-colors transition-duration-150">
-                                    <i class="pi pi-cloud mr-2"></i>
-                                    <span class="font-medium">Help Center</span>
-                                </a>
-                            </li>
-                            <li class="relative">
-                                <a pRipple class="flex p-3 align-items-center hover:surface-50 transition-colors transition-duration-150">
-                                    <i class="pi pi-question-circle mr-2"></i>
-                                    <span class="font-medium">Faq</span>
-                                </a>
-                            </li>
-                        </ul>
-                    </li>
                 </ul>
             </li>
             <li>
-                <a pRipple class="flex px-0 lg:px-5 py-3 hover:text-blue-600 font-medium transition-colors transition-duration-150">
-                    <span>Corporate</span>
+                <a pRipple
+                    class="flex px-0 lg:px-5 py-3 hover:text-blue-600 font-medium transition-colors transition-duration-150">
+                    <span>Proyectos</span>
                 </a>
             </li>
             <li>
-                <a pRipple class="flex px-0 lg:px-5 py-3 hover:text-blue-600 font-medium transition-colors transition-duration-150">
-                    <span>Resources</span>
+                <a pRipple
+                    class="flex px-0 lg:px-5 py-3 hover:text-blue-600 font-medium transition-colors transition-duration-150">
+                    <span>Mercado Público</span>
                 </a>
             </li>
             <li>
-                <a pRipple class="flex px-0 lg:px-5 py-3 hover:text-blue-600 font-medium transition-colors transition-duration-150">
-                    <span>Pricing</span>
+                <a pRipple
+                    class="flex px-0 lg:px-5 py-3 hover:text-blue-600 font-medium transition-colors transition-duration-150">
+                    <span>Contacto</span>
                 </a>
             </li>
         </ul>
-        <div class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
-            <button pButton pRipple label="Login" class="p-button-text font-bold"></button>
-            <button pButton pRipple label="Register" class="ml-3 p-button-outlined font-bold"></button>
+        <div
+            class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
+            <button pButton pRipple label="Cotización rápida" class="p-button-outlined font-bold"></button>
         </div>
     </div>
 </div>
 <div class="relative p-6 overflow-hidden">
-    <img src="assets/images/blocks/hero/hero-2.jpg" alt="Image" class="absolute top-0 left-0 w-auto h-full block md:w-full">
+    <img src="assets/images/blocks/hero/hero-tech.jpg" alt="Servicios informáticos"
+        class="absolute top-0 left-0 w-auto h-full block md:w-full">
 
     <div class="text-center my-6 relative">
-        <div class="text-6xl text-white font-bold mb-1">The Platform For</div>
-        <div class="text-6xl text-primary font-bold mb-4">Today's Generation</div>
-        <p class="mt-0 mb-4 line-height-3 text-center mx-auto text-white" style="max-width:500px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-        
-        <button pButton pRipple label="Learn More" type="button"></button>
+        <div class="text-6xl text-white font-bold mb-1">Soluciones Informáticas</div>
+        <div class="text-6xl text-primary font-bold mb-4">Para el Sector Público y Privado</div>
+        <p class="mt-0 mb-4 line-height-3 text-center mx-auto text-white" style="max-width:600px">Desarrollamos e
+            implementamos soluciones tecnológicas de alto nivel para empresas y organismos públicos. Expertos en
+            licitaciones y proyectos de Mercado Público a medida.</p>
 
-        <p class="text-sm mt-4 mb-4 line-height-3 text-white">Available for MacOS, Web and Google accounts only</p>
-        <div class="flex justify-content-center align-items-center">
-            <a href="https://www.apple.com" class="text-white mr-3">
-                <i class="pi pi-apple text-2xl"></i>
-            </a>
-            <a href="https://play.google.com" class="text-white mr-3">
-                <i class="pi pi-android text-2xl"></i>
-            </a>
-            <a href="https://www.facebook.com" class="text-white">
-                <i class="pi pi-facebook text-2xl"></i>
-            </a>
+        <div class="flex justify-content-center">
+            <button pButton pRipple label="Servicios TI" type="button" class="mr-3 font-bold"></button>
+            <button pButton pRipple label="Mercado Público" type="button"
+                class="p-button-outlined p-button-secondary font-bold"></button>
         </div>
+
+        <p class="text-sm mt-4 mb-4 line-height-3 text-white">Servicios disponibles en todo Chile - Talca, Maule y
+            Región Metropolitana</p>
     </div>
 </div>
 <div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
     <div class="mb-3 font-bold text-3xl">
-        <span class="text-900">One Product, </span>
-        <span class="text-blue-600">Many Solutions</span>
+        <span class="text-900">Soluciones Tecnológicas </span>
+        <span class="text-blue-600">a la Medida</span>
     </div>
-    <div class="text-700 mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
+    <div class="text-700 mb-6">Nuestro equipo de profesionales cuenta con las certificaciones y experiencia para
+        desarrollar e implementar soluciones de alto nivel.</div>
     <div class="grid">
         <div class="col-12 md:col-4 mb-4 px-5">
             <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
                 <i class="pi pi-desktop text-4xl text-blue-500"></i>
             </span>
-            <div class="text-900 text-xl mb-3 font-medium">Built for Developers</div>
-            <span class="text-700 line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
+            <div class="text-900 text-xl mb-3 font-medium">Desarrollo Web</div>
+            <span class="text-700 line-height-3">Sitios web, aplicaciones y plataformas a medida usando las últimas
+                tecnologías. Soluciones responsive, seguras y escalables para su negocio.</span>
         </div>
         <div class="col-12 md:col-4 mb-4 px-5">
             <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
-                <i class="pi pi-lock text-4xl text-blue-500"></i>
+                <i class="pi pi-server text-4xl text-blue-500"></i>
             </span>
-            <div class="text-900 text-xl mb-3 font-medium">End-to-End Encryption</div>
-            <span class="text-700 line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
+            <div class="text-900 text-xl mb-3 font-medium">Infraestructura TI</div>
+            <span class="text-700 line-height-3">Instalación, configuración y mantenimiento de servidores, redes, cloud
+                computing y sistemas de respaldo para empresas de todos los tamaños.</span>
         </div>
         <div class="col-12 md:col-4 mb-4 px-5">
-            <span class="p-3 sh1adow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
-                <i class="pi pi-check-circle text-4xl text-blue-500"></i>
-            </span>
-            <div class="text-900 text-xl mb-3 font-medium">Easy to Use</div>
-            <span class="text-700 line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
-        </div>
-        <div class="col-12 md:col-4 mb-4 px-5">
-            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
-                <i class="pi pi-globe text-4xl text-blue-500"></i>
-            </span>
-            <div class="text-900 text-xl mb-3 font-medium">Fast & Global Support</div>
-            <span class="text-700 line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
-        </div>
-        <div class="col-12 md:col-4 mb-4 px-5">
-            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
-                <i class="pi pi-github text-4xl text-blue-500"></i>
-            </span>
-            <div class="text-900 text-xl mb-3 font-medium">Open Source</div>
-            <span class="text-700 line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
-        </div>
-        <div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
             <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
                 <i class="pi pi-shield text-4xl text-blue-500"></i>
             </span>
-            <div class="text-900 text-xlmb-3 font-medium">Trusted Securitty</div>
-            <span class="text-700 line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
+            <div class="text-900 text-xl mb-3 font-medium">Ciberseguridad</div>
+            <span class="text-700 line-height-3">Protección de datos, evaluación de vulnerabilidades, auditorías de
+                seguridad y planes de contingencia para proteger su información más valiosa.</span>
+        </div>
+        <div class="col-12 md:col-4 mb-4 px-5">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-briefcase text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 text-xl mb-3 font-medium">Mercado Público</div>
+            <span class="text-700 line-height-3">Especialistas en licitaciones públicas. Asesoramos, desarrollamos e
+                implementamos proyectos tecnológicos para el sector público.</span>
+        </div>
+        <div class="col-12 md:col-4 mb-4 px-5">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-chart-line text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 text-xl mb-3 font-medium">Consultoría TI</div>
+            <span class="text-700 line-height-3">Asesoramiento estratégico en tecnología, transformación digital,
+                migración a la nube y optimización de procesos TI para mejorar su competitividad.</span>
+        </div>
+        <div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
+            <span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
+                <i class="pi pi-users text-4xl text-blue-500"></i>
+            </span>
+            <div class="text-900 text-xl mb-3 font-medium">Soporte Técnico</div>
+            <span class="text-700 line-height-3">Servicio técnico permanente, mesa de ayuda, mantenimiento preventivo y
+                correctivo para mantener su infraestructura operativa 24/7.</span>
         </div>
     </div>
 </div>
 <div class="surface-section px-4 pb-8 md:px-6 lg:px-8">
-    <div class="p-6 shadow-2 flex flex-column md:flex-row align-items-center justify-content-between" style="border-radius: 1rem; background: linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1C80CF 47.88%, #FFFFFF 100.01%)">
+    <div class="p-6 shadow-2 flex flex-column md:flex-row align-items-center justify-content-between"
+        style="border-radius: 1rem; background: linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1C80CF 47.88%, #FFFFFF 100.01%)">
         <div class="pr-6">
-            <div class="text-blue-100 font-medium text-xl mb-3">TAKE THE NEXT STEP</div>
-            <div class="text-white font-medium text-5xl">Enpower your customer experience</div>
+            <div class="text-blue-100 font-medium text-xl mb-3">SECTOR PÚBLICO</div>
+            <div class="text-white font-medium text-5xl">Expertos en Mercado Público</div>
         </div>
         <div class="mt-4 mr-auto md:mt-0 md:mr-0">
-            <button pButton pRipple label="Get Started" class="font-bold px-5 py-3 p-button-warning p-button-rounded p-button-raised white-space-nowrap"></button>
+            <button pButton pRipple label="Solicitar Asesoría"
+                class="font-bold px-5 py-3 p-button-warning p-button-rounded p-button-raised white-space-nowrap"></button>
         </div>
     </div>
 </div>
 <div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
     <div>
-        <div class="text-900 font-bold text-4xl line-height-3 mb-3 text-center">Continue Breaking Records</div>
-        <p class="text-600 line-height-3 text-lg m-0 mb-6 text-center">Excepteur sint occaecat cupidatat non proident,
-            sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <div class="text-900 font-bold text-4xl line-height-3 mb-3 text-center">Nuestros Resultados</div>
+        <p class="text-600 line-height-3 text-lg m-0 mb-6 text-center">Indicadores clave de nuestros proyectos
+            implementados en el último año</p>
 
         <div class="grid surface-card shadow-2" style="border-radius: 10px">
             <div class="col-12 md:col-3 px-5 py-5">
-                <i class="pi pi-users text-4xl text-blue-600 mb-3"></i>
-                <div class="text-900 font-bold text-4xl mb-3 line-height-3">83M</div>
-                <p class="text-700 m-0">Nostrum laborum accusamus quia iste facere possimus.</p>
+                <i class="pi pi-briefcase text-4xl text-blue-600 mb-3"></i>
+                <div class="text-900 font-bold text-4xl mb-3 line-height-3">+50</div>
+                <p class="text-700 m-0">Proyectos implementados exitosamente en organismos públicos y privados.</p>
             </div>
             <div class="col-12 md:col-3 px-5 py-5">
-                <i class="pi pi-chart-line text-4xl text-orange-500 mb-3"></i>
-                <div class="text-900 font-bold text-4xl mb-3 line-height-3">$256K</div>
-                <p class="text-700 m-0">Nostrum laborum accusamus quia iste facere possimus.</p>
+                <i class="pi pi-check-circle text-4xl text-orange-500 mb-3"></i>
+                <div class="text-900 font-bold text-4xl mb-3 line-height-3">98%</div>
+                <p class="text-700 m-0">Tasa de satisfacción de nuestros clientes en proyectos completados.</p>
             </div>
             <div class="col-12 md:col-3 px-5 py-5">
                 <i class="pi pi-globe text-4xl text-cyan-600 mb-3"></i>
-                <div class="text-900 font-bold text-4xl mb-3 line-height-3">1,453</div>
-                <p class="text-700 m-0">Nostrum laborum accusamus quia iste facere possimus.</p>
+                <div class="text-900 font-bold text-4xl mb-3 line-height-3">15+</div>
+                <p class="text-700 m-0">Comunas atendidas a lo largo del país con soluciones tecnológicas completas.</p>
             </div>
             <div class="col-12 md:col-3 px-5 py-5">
-                <i class="pi pi-map text-4xl text-purple-500 mb-3"></i>
-                <div class="text-900 font-bold text-4xl mb-3 line-height-3">45 km</div>
-                <p class="text-700 m-0">Nostrum laborum accusamus quia iste facere possimus.</p>
+                <i class="pi pi-users text-4xl text-purple-500 mb-3"></i>
+                <div class="text-900 font-bold text-4xl mb-3 line-height-3">+20</div>
+                <p class="text-700 m-0">Profesionales certificados en diversas tecnologías y metodologías.</p>
             </div>
         </div>
     </div>
 </div>
 <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
     <div>
-        <div class="text-900 mb-3 font-bold text-4xl text-center">Trusted By</div>
-        <div class="text-600 mb-6 line-height-3 text-xl text-center">We provide many of the Planet Earth’s most powerful companies with extraordinary infrastructural capabilities.</div>
+        <div class="text-900 mb-3 font-bold text-4xl text-center">Nuestros Clientes</div>
+        <div class="text-600 mb-6 line-height-3 text-xl text-center">Instituciones y empresas que confían en nuestros
+            servicios para sus proyectos tecnológicos.</div>
 
         <div class="grid">
-            <div class="col-12 md:col-6 lg:col-3">
+            <div class="col-6 md:col-3 lg:col-2">
                 <div class="flex align-items-center justify-content-center p-3">
-                    <img src="assets/images/blocks/logos/alfred-500.svg" alt="Image">
+                    <img src="assets/images/clients/client1.svg" alt="Cliente" class="w-full">
                 </div>
             </div>
-            <div class="col-12 md:col-6 lg:col-3">
+            <div class="col-6 md:col-3 lg:col-2">
                 <div class="flex align-items-center justify-content-center p-3">
-                    <img src="assets/images/blocks/logos/hyper-500.svg" alt="Image">
+                    <img src="assets/images/clients/client2.svg" alt="Cliente" class="w-full">
                 </div>
             </div>
-            <div class="col-12 md:col-6 lg:col-3">
+            <div class="col-6 md:col-3 lg:col-2">
                 <div class="flex align-items-center justify-content-center p-3">
-                    <img src="assets/images/blocks/logos/bastion-500.svg" alt="Image">
+                    <img src="assets/images/clients/client3.svg" alt="Cliente" class="w-full">
                 </div>
             </div>
-            <div class="col-12 md:col-6 lg:col-3">
+            <div class="col-6 md:col-3 lg:col-2">
                 <div class="flex align-items-center justify-content-center p-3">
-                    <img src="assets/images/blocks/logos/peak-500.svg" alt="Image">
+                    <img src="assets/images/clients/client4.svg" alt="Cliente" class="w-full">
                 </div>
             </div>
-            <div class="col-12 md:col-6 lg:col-3">
+            <div class="col-6 md:col-3 lg:col-2">
                 <div class="flex align-items-center justify-content-center p-3">
-                    <img src="assets/images/blocks/logos/charot-500.svg" alt="Image">
+                    <img src="assets/images/clients/client5.svg" alt="Cliente" class="w-full">
                 </div>
             </div>
-            <div class="col-12 md:col-6 lg:col-3">
+            <div class="col-6 md:col-3 lg:col-2">
                 <div class="flex align-items-center justify-content-center p-3">
-                    <img src="assets/images/blocks/logos/shodan-500.svg" alt="Image">
-                </div>
-            </div>
-            <div class="col-12 md:col-6 lg:col-3">
-                <div class="flex align-items-center justify-content-center p-3">
-                    <img src="assets/images/blocks/logos/hodly-500.svg" alt="Image">
-                </div>
-            </div>
-            <div class="col-12 md:col-6 lg:col-3">
-                <div class="flex align-items-center justify-content-center p-3">
-                    <img src="assets/images/blocks/logos/franki-500.svg" alt="Image">
+                    <img src="assets/images/clients/client6.svg" alt="Cliente" class="w-full">
                 </div>
             </div>
         </div>
     </div>
 </div>
 <div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
-    <div class="font-bold text-5xl text-900 mb-5 text-center">Featured Articles</div>
+    <div class="font-bold text-5xl text-900 mb-5 text-center">Proyectos Destacados</div>
     <div class="grid nogutter">
         <div class="col-12 lg:col-4 p-3">
             <div class="shadow-2 border-round h-full surface-card">
-                <img src="assets/images/blocks/blog/blog-1.jpg" alt="Image" class="block w-full border-round-top">
+                <img src="assets/images/projects/project1.jpg" alt="Proyecto" class="block w-full border-round-top">
                 <div class="p-4">
-                    <span class="block font-medium text-blue-600 mb-3">Crime</span>
-                    <div class="text-xl text-900 font-medium mb-3 line-height-3 ">Fugitive flamingo spotted in Florida</div>
-                    <div class="line-height-3 mb-3 text-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                    <span class="block font-medium text-blue-600 mb-3">Municipalidad</span>
+                    <div class="text-xl text-900 font-medium mb-3 line-height-3">Sistema de Gestión Documental Municipal
+                    </div>
+                    <div class="line-height-3 mb-3 text-700">Implementación de plataforma para digitalización y gestión
+                        de documentos con firma electrónica avanzada para optimizar procesos municipales.</div>
                     <div class="flex">
-                        <p-avatar image="assets/images/blocks/avatars/circle/avatar-f-1.png" shape="circle"></p-avatar>
                         <div class="ml-2">
-                            <div class="text-sm font-bold text-900 mb-1">Anna Lane</div>
-                            <div class="text-sm flex align-items-center text-700">
-                                <i class="pi pi-calendar mr-1 text-sm"></i>
-                                <span>Apr 5, 2021</span>
+                            <div class="text-sm flex align-items-center text-700 mt-2">
+                                <i class="pi pi-tag mr-1 text-sm"></i>
+                                <span>Desarrollo | Mercado Público</span>
                             </div>
                         </div>
                     </div>
@@ -280,18 +267,17 @@
         </div>
         <div class="col-12 lg:col-4 p-3">
             <div class="shadow-2 border-round h-full surface-card">
-                <img src="assets/images/blocks/blog/blog-2.jpg" alt="Image" class="block w-full border-round-top">
+                <img src="assets/images/projects/project2.jpg" alt="Proyecto" class="block w-full border-round-top">
                 <div class="p-4 flex flex-column">
-                    <span class="block font-medium text-pink-600 mb-3">Wildlife</span>
-                    <div class="text-xl text-900 font-medium mb-3 line-height-3 ">Journey to the Ends of the Earth</div>
-                    <div class="line-height-3 mb-3 text-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                    <span class="block font-medium text-blue-600 mb-3">Empresa Privada</span>
+                    <div class="text-xl text-900 font-medium mb-3 line-height-3">Migración a Infraestructura Cloud</div>
+                    <div class="line-height-3 mb-3 text-700">Proyecto de migración completa a la nube, incluyendo
+                        servidores, bases de datos y aplicaciones, con alta disponibilidad y seguridad.</div>
                     <div class="flex">
-                        <p-avatar image="assets/images/blocks/avatars/circle/avatar-f-2.png" shape="circle"></p-avatar>
                         <div class="ml-2">
-                            <div class="text-sm font-bold text-900 mb-1">Arlene McCoy</div>
-                            <div class="text-sm flex align-items-center text-700">
-                                <i class="pi pi-calendar mr-1 text-sm"></i>
-                                <span>Apr 6, 2021</span>
+                            <div class="text-sm flex align-items-center text-700 mt-2">
+                                <i class="pi pi-tag mr-1 text-sm"></i>
+                                <span>Infraestructura | Cloud</span>
                             </div>
                         </div>
                     </div>
@@ -300,18 +286,17 @@
         </div>
         <div class="col-12 lg:col-4 p-3">
             <div class="shadow-2 border-round h-full surface-card">
-                <img src="assets/images/blocks/blog/blog-3.jpg" alt="Image" class="block w-full border-round-top">
+                <img src="assets/images/projects/project3.jpg" alt="Proyecto" class="block w-full border-round-top">
                 <div class="p-4">
-                    <span class="block font-medium text-orange-600 mb-3">Marine</span>
-                    <div class="text-xl text-900 font-medium mb-3 line-height-3 ">'Real and imminent' extinction risk</div>
-                    <div class="line-height-3 mb-3 text-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                    <span class="block font-medium text-blue-600 mb-3">Servicio Público</span>
+                    <div class="text-xl text-900 font-medium mb-3 line-height-3">Portal de Atención Ciudadana</div>
+                    <div class="line-height-3 mb-3 text-700">Desarrollo e implementación de plataforma web para gestión
+                        de solicitudes ciudadanas, integrada con sistemas internos y con accesibilidad web.</div>
                     <div class="flex">
-                        <p-avatar image="assets/images/blocks/avatars/circle/avatar-f-3.png" shape="circle"></p-avatar>
                         <div class="ml-2">
-                            <div class="text-sm font-bold text-900 mb-1">Diane Miles</div>
-                            <div class="text-sm flex align-items-center text-700">
-                                <i class="pi pi-calendar mr-1 text-sm"></i>
-                                <span>Apr 9, 2021</span>
+                            <div class="text-sm flex align-items-center text-700 mt-2">
+                                <i class="pi pi-tag mr-1 text-sm"></i>
+                                <span>Desarrollo Web | Mercado Público</span>
                             </div>
                         </div>
                     </div>
@@ -322,108 +307,115 @@
 </div>
 <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
     <div>
-        <div class="text-blue-600 text-2xl mb-4 text-center">Save up to 25% today</div>
-        <div class="text-900 font-bold text-4xl text-center mb-4">Pricing Plans</div>
-        <div class="flex align-items-center justify-content-center text-900">
-            <span class="font-semibold mr-3">Monthly</span>
-            <p-inputSwitch></p-inputSwitch>
-            <span class="ml-3">Yearly</span>
-        </div>
+        <div class="text-blue-600 text-2xl mb-4 text-center">Planes adaptados a cada necesidad</div>
+        <div class="text-900 font-bold text-4xl text-center mb-4">Nuestros Servicios</div>
 
         <div class="flex flex-column md:flex-row mt-6">
             <div class="mb-6 md:mb-0 mr-0 md:mr-4 flex flex-column flex-grow-1">
                 <div class="bg-bluegray-100 text-center p-3" style="border-radius: 6px 6px 0 0">
-                    <div class="text-2xl font-bold text-bluegray-900 mb-3">Basic</div>
+                    <div class="text-2xl font-bold text-bluegray-900 mb-3">Mantenimiento TI</div>
                     <div class="flex align-items-center justify-content-center">
-                        <span class="font-bold text-bluegray-900 text-5xl mr-2">10$</span>
-                        <span class="text-2xl text-bluegray-400"> / month</span>
+                        <span class="font-bold text-bluegray-900 text-5xl mr-2">Base</span>
                     </div>
                 </div>
-                <div class="bg-bluegray-50 p-4 flex flex-column flex-grow-1" style="box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.1); border-radius: 0 0 6px 6px">
-                    <div class="text-bluegray-500 font-bold line-height-3 mb-4">Ut enim ad minim veniam, quis nostrud exercitation.</div>
+                <div class="bg-bluegray-50 p-4 flex flex-column flex-grow-1"
+                    style="box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.1); border-radius: 0 0 6px 6px">
+                    <div class="text-bluegray-500 font-bold line-height-3 mb-4">Soporte técnico y mantenimiento para
+                        empresas pequeñas y medianas.</div>
                     <ul class="list-none p-0 m-0 mb-5 text-bluegray-600">
                         <li class="flex align-items-center mb-3">
-                            <i class="pi pi-circle-on mr-2 text-sm"></i>
-                            <span>Arcu vitae elementum</span>
+                            <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                            <span>Soporte remoto</span>
                         </li>
-                        <li class="flex align-items-center">
-                            <i class="pi pi-circle-on mr-2 text-sm"></i>
-                            <span>Dui faucibus in ornare</span>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                            <span>Mantenimiento preventivo</span>
+                        </li>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                            <span>Respaldos básicos</span>
                         </li>
                     </ul>
 
-                    <button pButton pRipple class="p-button-secondary w-full mt-auto" label="Try Free"></button>
+                    <button pButton pRipple class="p-button-secondary w-full mt-auto"
+                        label="Solicitar Cotización"></button>
                 </div>
             </div>
 
             <div class="mb-6 md:mb-0 mr-0 md:mr-4 flex flex-column flex-grow-1">
-                <div class="bg-bluegray-800 text-center p-3 border-3 border-green-500 border-bottom-none" style="border-radius: 6px 6px 0 0">
-                    <div class="bg-green-500 text-0 font-bold text-sm inline-block p-2 mb-3" style="border-radius: 20px">MOST POPULAR</div>
-                    <div class="text-2xl font-bold text-white mb-3">Premium</div>
+                <div class="bg-bluegray-800 text-center p-3 border-3 border-blue-500 border-bottom-none"
+                    style="border-radius: 6px 6px 0 0">
+                    <div class="bg-blue-500 text-0 font-bold text-sm inline-block p-2 mb-3" style="border-radius: 20px">
+                        MÁS SOLICITADO</div>
+                    <div class="text-2xl font-bold text-white mb-3">Desarrollo e Infraestructura</div>
                     <div class="flex align-items-center justify-content-center">
-                        <span class="font-bold text-white text-5xl mr-2">20$</span>
-                        <span class="text-2xl text-bluegray-400"> / month</span>
+                        <span class="font-bold text-white text-5xl mr-2">Avanzado</span>
                     </div>
                 </div>
-                <div class="bg-bluegray-900 p-4 flex flex-column flex-grow-1 border-3 border-green-500 border-top-none" style="box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.1); border-radius: 0 0 6px 6px">
-                    <div class="text-bluegray-400 font-bold line-height-3 mb-4">Ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+                <div class="bg-bluegray-900 p-4 flex flex-column flex-grow-1 border-3 border-blue-500 border-top-none"
+                    style="box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.1); border-radius: 0 0 6px 6px">
+                    <div class="text-bluegray-400 font-bold line-height-3 mb-4">Solución completa para desarrollo de
+                        aplicaciones e infraestructura TI empresarial.</div>
                     <ul class="list-none p-0 m-0 mb-5 text-bluegray-100">
                         <li class="flex align-items-center mb-3">
-                            <i class="pi pi-circle-on mr-2 text-sm"></i>
-                            <span>Arcu vitae elementum</span>
+                            <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                            <span>Desarrollo a medida</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <i class="pi pi-circle-on mr-2 text-sm"></i>
-                            <span>Dui faucibus in ornare</span>
+                            <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                            <span>Infraestructura Cloud</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <i class="pi pi-circle-on mr-2 text-sm"></i>
-                            <span>Morbi tincidunt augue</span>
+                            <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                            <span>Ciberseguridad avanzada</span>
                         </li>
-                        <li class="flex align-items-center">
-                            <i class="pi pi-circle-on mr-2 text-sm"></i>
-                            <span>Duis ultricies lacus sed</span>
+                        <li class="flex align-items-center mb-3">
+                            <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                            <span>Soporte 24/7</span>
                         </li>
                     </ul>
 
-                    <button pButton pRipple class="p-button-success w-full mt-auto" label="Buy Now"></button>
+                    <button pButton pRipple class="p-button-success w-full mt-auto"
+                        label="Solicitar Cotización"></button>
                 </div>
             </div>
 
             <div class="mb-6 md:mb-0 flex flex-column flex-grow-1">
                 <div class="bg-blue-800 text-center p-3" style="border-radius: 6px 6px 0 0">
-                    <div class="text-2xl font-bold text-white mb-3">Enterprise</div>
+                    <div class="text-2xl font-bold text-white mb-3">Mercado Público</div>
                     <div class="flex align-items-center justify-content-center">
-                        <span class="font-bold text-white text-5xl mr-2">30$</span>
-                        <span class="text-2xl text-blue-400"> / month</span>
+                        <span class="font-bold text-white text-5xl mr-2">Premium</span>
                     </div>
                 </div>
-                <div class="bg-blue-900 p-4 flex flex-column flex-grow-1" style="box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.1); border-radius: 0 0 6px 6px">
-                    <div class="text-blue-400 font-bold line-height-3 mb-4">Duis aute irure dolor in reprehenderit in voluptate velit.</div>
+                <div class="bg-blue-900 p-4 flex flex-column flex-grow-1"
+                    style="box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.1); border-radius: 0 0 6px 6px">
+                    <div class="text-blue-400 font-bold line-height-3 mb-4">Servicio especializado para licitaciones y
+                        proyectos del sector público.</div>
                     <ul class="list-none p-0 m-0 mb-5 text-blue-100">
                         <li class="flex align-items-center mb-3">
-                            <i class="pi pi-circle-on mr-2 text-sm"></i>
-                            <span>Arcu vitae elementum</span>
+                            <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                            <span>Asesoría en licitaciones</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <i class="pi pi-circle-on mr-2 text-sm"></i>
-                            <span>Dui faucibus in ornare</span>
+                            <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                            <span>Desarrollo de proyectos</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <i class="pi pi-circle-on mr-2 text-sm"></i>
-                            <span>Morbi tincidunt augue</span>
+                            <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                            <span>Implementación</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <i class="pi pi-circle-on mr-2 text-sm"></i>
-                            <span>Duis ultricies lacus sed</span>
+                            <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                            <span>Capacitación</span>
                         </li>
                         <li class="flex align-items-center mb-3">
-                            <i class="pi pi-circle-on mr-2 text-sm"></i>
-                            <span>Imperdiet proin</span>
+                            <i class="pi pi-check-circle mr-2 text-green-500"></i>
+                            <span>Soporte especializado</span>
                         </li>
                     </ul>
 
-                    <button pButton pRipple class="p-button-outlined w-full mt-auto" label="Contact Us"></button>
+                    <button pButton pRipple class="p-button-outlined p-button-info w-full mt-auto"
+                        label="Contactar Especialista"></button>
                 </div>
             </div>
         </div>
@@ -431,47 +423,62 @@
 </div>
 <div class="surface-ground">
     <div class="grid grid-nogutter">
-        <div class="col-12 md:col-6 bg-no-repeat bg-cover p-8" style="background-image: url('assets/images/blocks/contact/contact-2.jpg')">
-            <div class="text-white text-2xl font-medium mb-6">Contact Us</div>
-            <div class="text-gray-300 line-height-3 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
+        <div class="col-12 md:col-6 bg-no-repeat bg-cover p-8"
+            style="background-image: url('assets/images/contact-bg.jpg')">
+            <div class="text-white text-2xl font-medium mb-6">Contáctanos</div>
+            <div class="text-gray-300 line-height-3 mb-6">Estamos listos para asesorarte en tu próximo proyecto
+                informático. Nuestro equipo de profesionales te brindará la mejor solución adaptada a tus necesidades.
+            </div>
             <a class="inline-flex align-items-center text-blue-300 font-bold no-underline cursor-pointer">
-                <span class="mr-3">View Address on Google Maps</span>
+                <span class="mr-3">Ver nuestra ubicación en Google Maps</span>
                 <i class="pi pi-arrow-right"></i>
             </a>
             <ul class="list-none p-0 m-0 mt-6 text-white">
                 <li class="flex align-items-center mb-3">
                     <i class="pi pi-phone mr-2"></i>
-                    <span>+123456789</span>
+                    <span>+56 9 1234 5678</span>
                 </li>
                 <li class="flex align-items-center mb-3">
-                    <i class="pi pi-twitter mr-2"></i>
-                    <span>&#64;webgen_cl</span>
+                    <i class="pi pi-map-marker mr-2"></i>
+                    <span>1 Norte 953, Piso 3, Talca, Región del Maule</span>
                 </li>
                 <li class="flex align-items-center">
                     <i class="pi pi-inbox mr-2"></i>
-                    <span>contact&#64;webgen.cl</span>
+                    <span>contacto&#64;tuempresa.cl</span>
                 </li>
             </ul>
         </div>
         <div class="col-12 md:col-6">
             <div class="p-fluid formgrid grid px-4 py-8 md:px-6 lg:px-8">
                 <div class="field col-12 lg:col-6 mb-4">
-                    <input id="firstname" type="text" class="py-3 px-2 text-lg" pInputText placeholder="First Name"> 
+                    <input id="firstname" type="text" class="py-3 px-2 text-lg" pInputText placeholder="Nombre">
                 </div>
                 <div class="field col-12 lg:col-6 mb-4">
-                    <input id="lastname" type="text"  class="py-3 px-2 text-lg" pInputText placeholder="Last Name"> 
+                    <input id="lastname" type="text" class="py-3 px-2 text-lg" pInputText placeholder="Apellido">
                 </div>
                 <div class="field col-12 mb-4">
-                    <input id="email" type="text" pInputText class="py-3 px-2 text-lg" placeholder="Email"> 
+                    <input id="email" type="text" pInputText class="py-3 px-2 text-lg" placeholder="Email">
                 </div>
                 <div class="field col-12 mb-4">
-                    <input id="phone" type="text" pInputText class="py-3 px-2 text-lg" placeholder="Phone"> 
+                    <input id="phone" type="text" pInputText class="py-3 px-2 text-lg" placeholder="Teléfono">
                 </div>
                 <div class="field col-12 mb-4">
-                    <textarea id="message" pInputTextarea rows="3" [autoResize]="true" class="py-3 px-2 text-lg" placeholder="Message"></textarea> 
+                    <select id="service" class="py-3 px-2 text-lg w-full border-1 border-gray-300 border-round">
+                        <option value="" disabled selected>Selecciona un servicio</option>
+                        <option value="web">Desarrollo Web</option>
+                        <option value="infra">Infraestructura TI</option>
+                        <option value="security">Ciberseguridad</option>
+                        <option value="mercado">Mercado Público</option>
+                        <option value="consultoria">Consultoría TI</option>
+                    </select>
+                </div>
+                <div class="field col-12 mb-4">
+                    <textarea id="message" pInputTextarea rows="3" [autoResize]="true" class="py-3 px-2 text-lg"
+                        placeholder="Describe tu proyecto o consulta"></textarea>
                 </div>
                 <div class="col-12 text-right">
-                    <button type="button" pButton pRipple label="Submit" icon="pi pi-envelope" class="px-5 py-3 w-auto"></button>
+                    <button type="button" pButton pRipple label="Enviar Solicitud" icon="pi pi-send"
+                        class="px-5 py-3 w-auto"></button>
                 </div>
             </div>
         </div>
@@ -481,28 +488,50 @@
     <div class="bg-gray-900">
         <div class="grid">
             <div class="col-12 md:col-3 flex flex-wrap justify-content-start md:mb-0 mb-3">
-                <img src="assets/images/blocks/footer/footer-2.png" alt="footer sections" width="50" height="50" class="mr-3">
-                <div class="text-gray-300 font-bold text-5xl">Bastion</div>
+                <img src="assets/images/logo-white.svg" alt="Logo" width="50" height="50" class="mr-3">
+                <div class="text-gray-300 font-bold text-5xl">TechSol</div>
             </div>
             <div class="col-12 md:col-3">
-                <div class="text-white text-lg mb-4 flex flex-wrap" style="max-width: 290px">Jacob Obrechtstraat 5, 1071 KC Amsterdam The Netherlands</div>
-                <div class="text-white mb-3"><i class="pi pi-phone surface-800 border-round p-1 mr-2"></i>(31) 20 779 8986</div>
-                <div class="text-white mb-3"><i class="pi pi-inbox surface-800 border-round p-1 mr-2"></i>hello&#64;bastion.co</div>
+                <div class="text-white text-lg mb-4 flex flex-wrap" style="max-width: 290px">1 Norte 953, Piso 3, Talca,
+                    Región del Maule, Chile</div>
+                <div class="text-white mb-3"><i class="pi pi-phone surface-800 border-round p-1 mr-2"></i>+56 9 1234
+                    5678</div>
+                <div class="text-white mb-3"><i
+                        class="pi pi-inbox surface-800 border-round p-1 mr-2"></i>contacto&#64;tuempresa.cl</div>
             </div>
             <div class="col-12 md:col-3 text-gray-200">
-                <div class="text-white font-bold line-height-3 mb-3">Company</div>
-                <a class="line-height-3 block cursor-pointer mb-2">About Us</a>
-                <a class="line-height-3 block cursor-pointer mb-2">News</a>
-                <a class="line-height-3 block cursor-pointer mb-2">Investor Relations</a>
-                <a class="line-height-3 block cursor-pointer mb-2">Careers</a>
-                <a class="line-height-3 block cursor-pointer">Media Kit</a>
+                <div class="text-white font-bold line-height-3 mb-3">Compañía</div>
+                <a class="line-height-3 block cursor-pointer mb-2">Nosotros</a>
+                <a class="line-height-3 block cursor-pointer mb-2">Equipo</a>
+                <a class="line-height-3 block cursor-pointer mb-2">Clientes</a>
+                <a class="line-height-3 block cursor-pointer mb-2">Proyectos</a>
+                <a class="line-height-3 block cursor-pointer">Blog</a>
             </div>
             <div class="col-12 md:col-3 text-gray-200">
-                <div class="text-white font-bold line-height-3 mb-3">Resourses</div>
-                <a class="line-height-3 block cursor-pointer mb-2">Get Started</a>
-                <a class="line-height-3 block cursor-pointer mb-2">Learn</a>
-                <a class="line-height-3 block cursor-pointer">Case Studies</a>
+                <div class="text-white font-bold line-height-3 mb-3">Servicios</div>
+                <a class="line-height-3 block cursor-pointer mb-2">Desarrollo Web</a>
+                <a class="line-height-3 block cursor-pointer mb-2">Infraestructura TI</a>
+                <a class="line-height-3 block cursor-pointer mb-2">Ciberseguridad</a>
+                <a class="line-height-3 block cursor-pointer mb-2">Consultoría</a>
+                <a class="line-height-3 block cursor-pointer">Mercado Público</a>
             </div>
         </div>
+        <div class="mt-8 pt-4 border-top-1 border-gray-800 text-gray-400 text-center">
+            <div class="flex justify-content-center align-items-center mb-4">
+                <a href="#" class="text-gray-400 mr-4 hover:text-white transition-colors transition-duration-150">
+                    <i class="pi pi-facebook text-2xl"></i>
+                </a>
+                <a href="#" class="text-gray-400 mr-4 hover:text-white transition-colors transition-duration-150">
+                    <i class="pi pi-twitter text-2xl"></i>
+                </a>
+                <a href="#" class="text-gray-400 mr-4 hover:text-white transition-colors transition-duration-150">
+                    <i class="pi pi-linkedin text-2xl"></i>
+                </a>
+                <a href="#" class="text-gray-400 hover:text-white transition-colors transition-duration-150">
+                    <i class="pi pi-instagram text-2xl"></i>
+                </a>
+            </div>
+            <div>© 2025 Web Gen. Todos los derechos reservados.</div>
+        </div>
     </div>
 </div>
\ No newline at end of file