feat: V2 landing page

src/components/SectionIntro.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+  eyebrow: string;
+  title: string;
+  body: string;
+  className?: string;
+  titleId?: string;
+}
+
+const { eyebrow, title, body, className = "", titleId } = Astro.props;
+---
+
+<div class:list={["section-intro", className]} data-reveal>
+  <p class="eyebrow">{eyebrow}</p>
+  <h2 id={titleId}>{title}</h2>
+  <p>{body}</p>
+</div>

src/components/SiteFooter.astro

@@ -0,0 +1,13 @@
+<footer class="site-footer">
+  <div class="container site-footer__inner">
+    <div>
+      <p class="site-footer__brand">Slaksis Chile SpA</p>
+      <p class="site-footer__copy">Desarrollo, infraestructura administrada y operación técnica para empresas y organizaciones.</p>
+    </div>
+
+    <div class="site-footer__meta">
+      <a href="mailto:contacto@slaksis.com">contacto@slaksis.com</a>
+      <span>Modalidad remota con coordinación directa</span>
+    </div>
+  </div>
+</footer>

src/pages/index.astro

@@ -1,145 +1,219 @@
 ---
+import SectionIntro from "../components/SectionIntro.astro";
+import SiteFooter from "../components/SiteFooter.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 
+const valuePoints = [
+  {
+    title: "Menos fragmentación técnica",
+    description:
+      "Desarrollo, infraestructura y operación se abordan como un solo frente técnico."
+  },
+  {
+    title: "Control técnico directo",
+    description:
+      "Existe criterio técnico continuo desde el diseño hasta la operación."
+  },
+  {
+    title: "Continuidad operativa real",
+    description:
+      "La solución considera despliegue, soporte, seguridad base y operación posterior."
+  },
+  {
+    title: "Proporción y criterio",
+    description:
+      "Cada arquitectura se define según el problema real, sin complejidad innecesaria."
+  }
+];
+
 const services = [
   {
-    title: "Desarrollo de software",
+    title: "Desarrollo de software a medida",
     description:
-      "Diseño y construcción de sistemas internos, plataformas de gestión y aplicaciones web con foco en continuidad operativa, rendimiento y mantenimiento."
+      "Sistemas internos, plataformas de gestión, portales operativos y aplicaciones web construidas para resolver procesos concretos."
   },
   {
     title: "Infraestructura administrada",
     description:
-      "Despliegue y operación de entornos controlados con administración directa de servidores, contenedores, correo y componentes críticos."
+      "Servidores, contenedores, despliegues, hosting, monitoreo base y componentes de soporte administrados con continuidad técnica."
+  },
+  {
+    title: "Correo corporativo y operación digital",
+    description:
+      "Configuración y soporte de correo, dominios, flujos operativos y herramientas necesarias para una operación ordenada."
   },
   {
     title: "Automatización e integración",
     description:
-      "Integración entre procesos físicos y digitales mediante controladores, sensores, flujos automáticos y soluciones conectadas."
+      "Integración entre software, dispositivos, sensores y procesos físicos cuando la operación requiere más que una interfaz web."
-  },
-  {
-    title: "Cobros recurrentes y operación digital",
-    description:
-      "Implementación de cobros, suscripciones y flujos operativos que simplifican la administración comercial y reducen fricción."
   }
 ];
 
-const pillars = [
+const projectTypes = [
-  "Diagnóstico técnico claro, sin complejidad innecesaria.",
+  "Sistemas internos para operación, inventario, atención o gestión.",
-  "Arquitecturas proporcionales al tamaño real del proyecto.",
+  "Migración desde procesos manuales o herramientas dispersas.",
-  "Operación continua con énfasis en seguridad y disponibilidad.",
+  "Infraestructura para alojar y operar servicios con mayor control.",
-  "Acompañamiento posterior al lanzamiento, no solo entrega inicial."
+  "Correo corporativo y ordenamiento técnico base para empresas.",
+  "Automatización de tareas, suscripciones, pagos o flujos operativos.",
+  "Integración de hardware, controladores o automatización física."
 ];
 
-const metrics = [
+const principles = [
-  { value: "Software", label: "para operación, gestión y experiencia digital" },
+  {
-  { value: "Infraestructura", label: "administrada con control técnico directo" },
+    step: "01",
-  { value: "Automatización", label: "para procesos, dispositivos e integración" }
+    title: "Levantamiento y criterio inicial",
+    description:
+      "Se define el problema real, el impacto operativo y el alcance necesario antes de elegir herramientas o arquitectura."
+  },
+  {
+    step: "02",
+    title: "Diseño proporcional",
+    description:
+      "La solución se plantea según tamaño, riesgo y continuidad requerida, evitando sobrediseño y decisiones difíciles de mantener."
+  },
+  {
+    step: "03",
+    title: "Implementación con orden",
+    description:
+      "Desarrollo, despliegue, configuración e integración se ejecutan con trazabilidad y foco en estabilidad técnica."
+  },
+  {
+    step: "04",
+    title: "Operación y continuidad",
+    description:
+      "Se considera soporte, mantenimiento, ajustes y seguimiento para que lo entregado siga siendo útil durante la operación."
+  }
+];
+
+const coverage = [
+  "Desarrollo web y sistemas internos",
+  "Infraestructura administrada y despliegue",
+  "Correo corporativo y dominios",
+  "Automatización de procesos",
+  "Integración con servicios externos",
+  "Operación técnica y mantenimiento",
+  "Monitoreo base y continuidad",
+  "Coordinación directa en modalidad remota"
+];
+
+const whenFits = [
+  "Cuando el proyecto requiere desarrollo y también operación posterior.",
+  "Cuando hoy existen varios proveedores sin una responsabilidad técnica clara.",
+  "Cuando se necesita infraestructura, correo o automatización además del software.",
+  "Cuando conviene resolver bien el problema sin sobredimensionar la solución."
+];
+
+const avoids = [
+  "Fragmentación entre desarrollo, infraestructura y soporte.",
+  "Improvisación técnica durante implementación y despliegue.",
+  "Dependencias dispersas entre múltiples actores sin contexto.",
+  "Falta de continuidad después de la entrega inicial."
 ];
 ---
 
 <BaseLayout
-  title="Slaksis Chile SpA | Desarrollo, infraestructura y automatización"
+  title="Slaksis Chile SpA | Desarrollo, infraestructura y continuidad operativa"
-  description="Slaksis desarrolla soluciones digitales, infraestructura administrada y automatización para empresas y organizaciones."
+  description="Slaksis Chile SpA desarrolla, implementa y opera soluciones digitales e infraestructura para empresas y organizaciones."
 >
-  <main class="page-shell">
+  <main class="landing">
-    <section class="hero">
+    <section class="hero" id="inicio">
       <div class="container hero__inner">
-        <header class="topbar" data-reveal>
+        <header class="site-header" data-reveal>
-          <div class="brand">
+          <a class="brand" href="#inicio" aria-label="Ir al inicio de Slaksis Chile SpA">
             <span class="brand__mark">SL</span>
-            <div>
+            <span class="brand__text">
-              <p>Slaksis Chile SpA</p>
+              <strong>Slaksis Chile SpA</strong>
-              <span>Soluciones digitales e infraestructura</span>
+              <small>Soluciones digitales e infraestructura</small>
-            </div>
+            </span>
-          </div>
+          </a>
 
-          <nav class="topbar__nav" aria-label="Secciones principales">
+          <nav class="site-nav" aria-label="Navegación principal">
             <a href="#servicios">Servicios</a>
             <a href="#enfoque">Enfoque</a>
+            <a href="#cobertura">Cobertura</a>
             <a href="#contacto">Contacto</a>
           </nav>
 
-          <a class="button button--ghost topbar__cta" href="mailto:contacto@slaksis.com?subject=Consulta%20Slaksis">
+          <a class="header-mail" href="mailto:contacto@slaksis.com">contacto@slaksis.com</a>
-            contacto@slaksis.com
-          </a>
         </header>
 
-        <div class="hero__content">
+        <div class="hero__grid">
-          <div class="hero__copy" data-reveal>
+          <div class="hero__content" data-reveal>
-            <p class="eyebrow">Desarrollo, infraestructura y automatización para empresas y organizaciones</p>
+            <p class="eyebrow">Desarrollo, infraestructura y operación técnica para empresas y organizaciones</p>
-            <h1>Soluciones tecnológicas con estándar empresarial y ejecución técnica integral.</h1>
+            <h1>Una solución bien implementada también debe estar bien operada.</h1>
-            <p class="lead">
+            <p class="hero__lead">
-              Slaksis Chile SpA diseña, implementa y opera soluciones digitales para organizaciones que requieren orden,
+              Slaksis Chile SpA diseña, implementa y sostiene soluciones digitales con criterio técnico directo. El
-              confiabilidad y control técnico real. Cada proyecto se estructura para responder a necesidades concretas, con
+              alcance incluye desarrollo, infraestructura, correo, automatización y continuidad operativa.
-              decisiones proporcionales y foco en continuidad.
             </p>
 
             <div class="hero__actions">
-              <a class="button button--primary" href="mailto:contacto@slaksis.com?subject=Solicitud%20de%20reuni%C3%B3n">
+              <a class="button button--primary" href="mailto:contacto@slaksis.com?subject=Solicitud%20de%20propuesta">
-                Solicitar reunión
-              </a>
-              <a class="button button--secondary" href="#servicios">Ver capacidades</a>
-              <a class="button button--ghost" href="mailto:contacto@slaksis.com?subject=Solicitud%20de%20propuesta">
                 Solicitar propuesta
               </a>
-            </div>
+              <a class="button button--secondary" href="mailto:contacto@slaksis.com?subject=Agendar%20reuni%C3%B3n">
-          </div>
+                Agendar reunión
-
-          <aside class="hero__panel" aria-label="Contacto institucional" data-reveal>
-            <p class="hero__panel-label">Contacto institucional</p>
-            <a class="hero__mail" href="mailto:contacto@slaksis.com">contacto@slaksis.com</a>
-            <p class="hero__panel-copy">
-              Canal directo para evaluación de proyectos, requerimientos de infraestructura, continuidad operativa y
-              automatización.
-            </p>
-
-            <div class="contact-list">
-              <div class="contact-item">
-                <span>Canal principal</span>
-                <strong>Correo corporativo</strong>
-              </div>
-              <div class="contact-item">
-                <span>Cobertura</span>
-                <strong>Desarrollo, hosting y operación</strong>
-              </div>
-              <div class="contact-item">
-                <span>Modalidad</span>
-                <strong>Atención remota y coordinación directa</strong>
-              </div>
-            </div>
-
-            <div class="hero__panel-actions">
-              <a class="button button--primary button--full" href="mailto:contacto@slaksis.com?subject=Consulta%20general">
-                Enviar correo
               </a>
             </div>
+
+            <p class="hero__microcopy">
+              Modalidad remota con coordinación directa, alcance claro y ejecución ordenada.
+            </p>
+          </div>
+
+          <aside class="hero__aside" aria-label="Resumen institucional" data-reveal>
+            <p class="aside__label">Contacto institucional</p>
+            <a class="aside__mail" href="mailto:contacto@slaksis.com">contacto@slaksis.com</a>
+            <p class="aside__body">
+              Canal para evaluación de requerimientos, propuesta y coordinación inicial.
+            </p>
+
+            <dl class="aside__details">
+              <div>
+                <dt>Modalidad</dt>
+                <dd>Trabajo remoto con coordinación directa</dd>
+              </div>
+              <div>
+                <dt>Alcance</dt>
+                <dd>Desarrollo, infraestructura y operación</dd>
+              </div>
+              <div>
+                <dt>Enfoque</dt>
+                <dd>Soluciones proporcionales y continuidad real</dd>
+              </div>
+            </dl>
           </aside>
         </div>
       </div>
     </section>
 
-    <section class="metrics" data-reveal>
+    <section class="section section--light" aria-labelledby="propuesta-title">
-      <div class="container metrics__grid">
+      <div class="container">
-        {metrics.map((metric) => (
+        <SectionIntro
-          <article class="metric-card">
+          eyebrow="Propuesta de valor"
-            <strong>{metric.value}</strong>
+          titleId="propuesta-title"
-            <span>{metric.label}</span>
+          title="Cuando el desarrollo y la operación técnica quedan separados, la solución pierde continuidad."
-          </article>
+          body="Slaksis aborda el proyecto como un sistema completo: diseño, implementación, despliegue y soporte técnico alineados en un mismo frente de trabajo."
-        ))}
+        />
+
+        <div class="value-grid">
+          {valuePoints.map((item) => (
+            <article class="info-card" data-reveal>
+              <h3>{item.title}</h3>
+              <p>{item.description}</p>
+            </article>
+          ))}
+        </div>
       </div>
     </section>
 
-    <section class="section" id="servicios">
+    <section class="section" id="servicios" aria-labelledby="servicios-title">
       <div class="container">
-        <div class="section__intro" data-reveal>
+        <SectionIntro
-          <p class="eyebrow">Servicios</p>
+          eyebrow="Servicios principales"
-          <h2>Capacidades orientadas a resolver operación, crecimiento y soporte tecnológico continuo.</h2>
+          titleId="servicios-title"
-          <p>
+          title="Capacidades para resolver desarrollo, infraestructura y operación sin fragmentar la responsabilidad técnica."
-            El portafolio combina desarrollo, infraestructura y operación para evitar fragmentación técnica y reducir la
+          body="El objetivo es que la solución funcione durante la operación diaria, no solo durante la entrega."
-            dependencia de múltiples proveedores sin coordinación.
+        />
-          </p>
-        </div>
 
         <div class="service-grid">
           {services.map((service) => (
@@ -152,70 +226,151 @@ const metrics = [
       </div>
     </section>
 
-    <section class="section section--accent" id="enfoque">
+    <section class="section section--tint" aria-labelledby="proyectos-title">
       <div class="container">
-        <div class="section__intro" data-reveal>
+        <SectionIntro
-          <p class="eyebrow">Enfoque de trabajo</p>
+          eyebrow="Qué tipo de proyectos atendemos"
-          <h2>Decisiones claras, implementación formal y foco constante en seguridad y continuidad.</h2>
+          titleId="proyectos-title"
-          <p>
+          title="Proyectos donde se necesita criterio técnico, orden de implementación y responsabilidad operativa."
-            La prioridad no está en complejizar la solución, sino en definir una arquitectura adecuada al problema real y
+          body="La cobertura incluye iniciativas puntuales y entornos donde hace falta ordenar componentes técnicos que hoy funcionan de forma dispersa."
-            sostenerla correctamente durante la operación.
+        />
-          </p>
-        </div>
 
-        <div class="pillars">
+        <div class="project-grid">
-          {pillars.map((pillar, index) => (
+          {projectTypes.map((project) => (
-            <div class="pillar" data-reveal>
+            <article class="project-item" data-reveal>
-              <span class="pillar__index">0{index + 1}</span>
+              <p>{project}</p>
-              <p>{pillar}</p>
+            </article>
-            </div>
           ))}
         </div>
       </div>
     </section>
 
-    <section class="section">
+    <section class="section" id="enfoque" aria-labelledby="enfoque-title">
-      <div class="container two-column">
+      <div class="container">
-        <article class="story-card" data-reveal>
+        <SectionIntro
-          <p class="eyebrow">Perfil institucional</p>
+          eyebrow="Forma de trabajo"
-          <h2>Participación técnica directa desde la definición hasta la operación.</h2>
+          titleId="enfoque-title"
+          title="Implementación ordenada, decisiones claras y continuidad después de la entrega."
+          body="Cada proyecto se aborda con una secuencia simple y defendible, para mantener control técnico durante todo el proceso."
+        />
+
+        <ol class="process-grid">
+          {principles.map((principle) => (
+            <li class="process-card" data-reveal>
+              <span class="process-card__step">{principle.step}</span>
+              <h3>{principle.title}</h3>
+              <p>{principle.description}</p>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+
+    <section class="section section--light" aria-labelledby="cuando-title">
+      <div class="container">
+        <SectionIntro
+          eyebrow="Cuándo Tiene Sentido Trabajar Con Slaksis"
+          titleId="cuando-title"
+          title="Encaja especialmente cuando el proyecto necesita ejecución técnica y continuidad en un mismo frente."
+          body="No es un servicio pensado solo para publicar una página. Aplica mejor cuando hay operación, infraestructura o soporte que resolver con criterio."
+        />
+
+        <div class="simple-grid">
+          {whenFits.map((item) => (
+            <article class="simple-card" data-reveal>
+              <p>{item}</p>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <section class="section section--tint" aria-labelledby="evitamos-title">
+      <div class="container">
+        <SectionIntro
+          eyebrow="Lo que evitamos"
+          titleId="evitamos-title"
+          title="Una solución sólida también se define por los problemas técnicos que evita."
+          body="La implementación busca reducir desorden operativo, pérdida de contexto y dependencia innecesaria de múltiples actores."
+        />
+
+        <div class="simple-grid">
+          {avoids.map((item) => (
+            <article class="simple-card simple-card--strong" data-reveal>
+              <p>{item}</p>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+
+    <section class="section section--light" id="cobertura" aria-labelledby="cobertura-title">
+      <div class="container coverage">
+        <div class="coverage__content" data-reveal>
+          <p class="eyebrow">Cobertura técnica</p>
+          <h2 id="cobertura-title">No solo se desarrolla software. También se implementa, se configura y se sostiene.</h2>
           <p>
-            Slaksis asume responsabilidad sobre arquitectura, despliegue, correo, seguridad, monitoreo y evolución del
+            Slaksis puede participar en los componentes que normalmente quedan dispersos entre varios actores. Eso reduce
-            sistema. La entrega no se limita a publicar una aplicación: incluye criterio técnico para sostenerla en el tiempo.
+            pérdida de contexto y mejora la continuidad técnica.
           </p>
+        </div>
+
+        <ul class="coverage__list">
+          {coverage.map((item) => (
+            <li class="coverage__item" data-reveal>{item}</li>
+          ))}
+        </ul>
+      </div>
+    </section>
+
+    <section class="section" aria-labelledby="institucional-title">
+      <div class="container institutional">
+        <article class="institutional__block" data-reveal>
+          <p class="eyebrow">Perfil institucional</p>
+          <h2 id="institucional-title">Un solo frente técnico para proyectos que necesitan continuidad, seguridad y criterio.</h2>
+          <p>
+            La propuesta de Slaksis es trabajar con responsabilidad sobre lo implementado: revisar alcance, diseñar con
+            proporción, ejecutar con orden y mantener capacidad de respuesta durante la operación.
+          </p>
+          <p class="institutional__note">El proyecto no queda bloqueado. El código es del cliente.</p>
         </article>
 
-        <article class="story-card story-card--accent" data-reveal>
+        <article class="institutional__block institutional__block--accent" data-reveal>
           <p class="eyebrow">Dirección</p>
           <h2>Gabriel Rojas</h2>
           <p>
             Gerente General de Slaksis Chile SpA. Formación en Ingeniería Civil en Computación y experiencia aplicada en
             desarrollo de software, infraestructura administrada y ciberseguridad.
           </p>
+          <p class="institutional__note">
+            Modalidad de trabajo principalmente remota, con coordinación directa y foco en requerimientos bien definidos.
+          </p>
         </article>
       </div>
     </section>
 
-    <section class="section cta" id="contacto">
+    <section class="section section--cta" id="contacto" aria-labelledby="contacto-title">
-      <div class="container cta__grid">
+      <div class="container cta">
-        <div data-reveal>
+        <div class="cta__intro" data-reveal>
           <p class="eyebrow">Contacto</p>
-          <h2>Disponibilidad para evaluar requerimientos, estructurar propuestas y coordinar próximas etapas.</h2>
+          <h2 id="contacto-title">Si el proyecto requiere evaluación técnica seria, el siguiente paso es revisar alcance y contexto operativo.</h2>
+          <p>
+            La primera conversación sirve para entender requerimientos, riesgos y nivel de soporte necesario.
+          </p>
         </div>
 
-        <div class="cta__content" data-reveal>
+        <div class="cta__panel" data-reveal>
+          <a class="cta__mail" href="mailto:contacto@slaksis.com">contacto@slaksis.com</a>
           <p>
-            Para consultas comerciales o técnicas, el canal institucional es
+            Correo institucional para evaluación de proyecto, propuesta inicial y coordinación de reunión.
-            <a class="cta__mail" href="mailto:contacto@slaksis.com"> contacto@slaksis.com</a>. Desde ahí se puede iniciar
-            evaluación de proyecto, solicitud de propuesta o coordinación de reunión.
           </p>
 
           <div class="cta__actions">
-            <a class="button button--light" href="mailto:contacto@slaksis.com?subject=Consulta%20comercial">
+            <a class="button button--light" href="mailto:contacto@slaksis.com?subject=Solicitud%20de%20propuesta">
-              Contacto comercial
+              Solicitar evaluación de proyecto
             </a>
-            <a class="button button--light-outline" href="mailto:contacto@slaksis.com?subject=Solicitud%20de%20cotizaci%C3%B3n">
+            <a class="button button--light-outline" href="mailto:contacto@slaksis.com?subject=Agendar%20reuni%C3%B3n">
-              Solicitar cotización
+              Agendar reunión
             </a>
           </div>
         </div>
@@ -223,6 +378,8 @@ const metrics = [
     </section>
   </main>
 
+  <SiteFooter />
+
   <script is:inline>
     document.documentElement.classList.add("js");
 
@@ -237,8 +394,8 @@ const metrics = [
         }
       },
       {
-        threshold: 0.16,
+        threshold: 0.14,
-        rootMargin: "0px 0px -8% 0px"
+        rootMargin: "0px 0px -10% 0px"
       }
     );