---
layout: false
title: 2piDev | Software a medida
description: Soluciones digitales de élite para empresas que necesitan operar, crecer y vender con sistemas a medida.
---
<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{{ description }}">
    <title>{{ title }}</title>
    <link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
    <link rel="stylesheet" href="/css/styles.css">
  </head>
  <body>
    <header class="sticky top-0 z-50 border-b border-line/70 bg-white/92 backdrop-blur">
      <nav class="section-shell flex h-16 items-center justify-between gap-5">
        <a href="#inicio" class="flex items-center gap-3" aria-label="2piDev inicio">
          <img src="/images/logo.svg" alt="" class="h-10 w-10">
          <span class="font-display text-xl font-bold text-ink">2piDev</span>
        </a>
        <div class="hidden items-center gap-8 md:flex">
          <a href="#servicios" class="nav-link">Servicios</a>
          <a href="#soluciones" class="nav-link">Soluciones</a>
          <a href="#tecnologias" class="nav-link">Tecnología</a>
          <a href="#contacto" class="nav-link">Contacto</a>
        </div>
        <a href="#contacto" class="btn-primary hidden px-4 py-2 text-xs sm:inline-flex">Agendar consulta</a>
      </nav>
    </header>

    <main id="inicio">
      <section class="overflow-hidden bg-[linear-gradient(115deg,#fff4ec_0%,#f7f8fc_43%,#eef6ff_100%)] pb-20 pt-14 lg:pb-28 lg:pt-20">
        <div class="section-shell grid items-center gap-12 lg:grid-cols-[0.95fr_1.05fr]">
          <div>
            <p class="mb-5 inline-flex items-center gap-2 rounded-full border border-orange-200 bg-white/70 px-3 py-1.5 text-xs font-bold uppercase tracking-[0.14em] text-ember">
              <span class="h-2 w-2 rounded-full bg-flame"></span>
              Software de alto rendimiento
            </p>
            <h1 class="max-w-2xl font-display text-5xl font-bold leading-[0.95] text-ink sm:text-6xl lg:text-7xl">
              Software que impulsa el crecimiento de tu empresa
            </h1>
            <p class="mt-7 max-w-xl text-lg leading-8 text-muted">
              Diseñamos y desarrollamos soluciones tecnológicas personalizadas que automatizan procesos y te otorgan una ventaja competitiva real en el mercado actual.
            </p>
            <div class="mt-8 flex flex-col gap-3 sm:flex-row">
              <a href="#contacto" class="btn-primary">Agendar una consulta</a>
              <a href="#casos" class="btn-secondary">Ver soluciones</a>
            </div>
            <div class="mt-9 grid max-w-xl grid-cols-1 gap-3 text-sm font-semibold text-slate-700 sm:grid-cols-2">
              <span class="flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-full bg-flame"></span>Proyectos a medida</span>
              <span class="flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-full bg-azure"></span>Arquitecturas escalables</span>
              <span class="flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-full bg-azure"></span>Tecnologías modernas</span>
              <span class="flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-full bg-flame"></span>Enfoque de negocio</span>
            </div>
          </div>

          <div class="relative mx-auto w-full max-w-2xl">
            <div class="overflow-hidden rounded-xl border border-white/60 bg-slate-900 shadow-panel">
              <img src="/images/hero-dashboard.png" alt="Dashboard empresarial premium en una pantalla de oficina" class="aspect-[16/9] h-full w-full object-cover">
            </div>
            <div class="absolute -bottom-8 left-6 rounded-lg border border-line bg-white p-5 shadow-soft sm:left-10">
              <p class="text-xs font-bold uppercase tracking-wide text-muted">Rendimiento operativo</p>
              <p class="mt-1 text-2xl font-black text-azure">+94%</p>
            </div>
          </div>
        </div>
      </section>

      <section class="py-20">
        <div class="section-shell">
          <div class="mx-auto max-w-3xl text-center">
            <h2 class="font-display text-4xl font-bold leading-tight text-ink sm:text-5xl">Muchas empresas crecen más lento por culpa de sus sistemas</h2>
            <p class="mt-4 text-muted">Identificamos cuellos de botella tecnológicos que están frenando tu escalabilidad.</p>
          </div>
          <div class="mt-12 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
            {% set pains = [
              ["P", "Procesos manuales", "Pérdida de tiempo en tareas repetitivas que podrían estar automatizadas.", "bg-orange-600"],
              ["I", "Información fragmentada", "Datos dispersos en diferentes hojas de cálculo y herramientas aisladas.", "bg-blue-600"],
              ["S", "Sistemas legados", "Software obsoleto que no permite integraciones ni nuevas funcionalidades.", "bg-orange-600"],
              ["A", "Falta de automatización", "Dependencia excesiva de la intervención humana para flujos críticos.", "bg-blue-600"],
              ["M", "Visibilidad de métricas", "Imposibilidad de tomar decisiones basadas en datos en tiempo real.", "bg-orange-600"],
              ["E", "Software estancado", "Herramientas que no se adaptan cuando el negocio necesita crecer.", "bg-blue-600"]
            ] %}
            {% for item in pains %}
              <article class="feature-card">
                <div class="mini-icon {{ item[3] }}">{{ item[0] }}</div>
                <h3 class="mt-4 text-lg font-bold text-ink">{{ item[1] }}</h3>
                <p class="mt-2 text-sm leading-6 text-muted">{{ item[2] }}</p>
              </article>
            {% endfor %}
          </div>
        </div>
      </section>

      <section id="servicios" class="bg-white py-20">
        <div class="section-shell">
          <div class="flex flex-col justify-between gap-5 sm:flex-row sm:items-end">
            <div>
              <p class="eyebrow">Nuestras capacidades</p>
              <h2 class="mt-2 font-display text-4xl font-bold text-ink sm:text-5xl">Soluciones Digitales de Élite</h2>
            </div>
            <a href="#contacto" class="text-sm font-bold text-flame hover:text-ember">Explorar portfolio completo</a>
          </div>
          <div id="soluciones" class="mt-10 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
            {% set services = [
              ["</>", "Custom Software", "Desarrollo desde cero adaptado 100% a las reglas de tu negocio y necesidades específicas.", "bg-orange-600"],
              ["W", "Enterprise Web Apps", "Plataformas robustas, seguras y escalables accesibles desde cualquier navegador.", "bg-blue-600"],
              ["M", "Mobile Apps", "Experiencias nativas e híbridas diseñadas para detallar al usuario final en iOS y Android.", "bg-slate-900"],
              ["O", "Process Automation", "Eliminamos la fricción operativa mediante flujos de trabajo inteligentes y automatizados.", "bg-orange-600"],
              ["A", "APIs & Integrations", "Conectamos tus herramientas para que tus datos fluyan sin interrupciones entre sistemas.", "bg-blue-600"],
              ["C", "IT Consulting", "Acompañamiento estratégico para definir tu roadmap tecnológico y arquitectura.", "bg-slate-900"]
            ] %}
            {% for item in services %}
              <article class="feature-card min-h-52">
                <div class="mini-icon {{ item[3] }}">{{ item[0] }}</div>
                <h3 class="mt-5 text-xl font-bold text-ink">{{ item[1] }}</h3>
                <p class="mt-3 text-sm leading-6 text-muted">{{ item[2] }}</p>
              </article>
            {% endfor %}
          </div>
        </div>
      </section>

      <section class="relative overflow-hidden bg-navy py-20 text-white">
        <div class="absolute inset-0">
          <img src="/images/results-dashboard.png" alt="" class="h-full w-full object-cover opacity-35">
          <div class="absolute inset-0 bg-gradient-to-r from-navy via-navy/90 to-navy/55"></div>
        </div>
        <div class="section-shell relative grid gap-10 lg:grid-cols-[0.9fr_1.1fr] lg:items-center">
          <div>
            <h2 class="font-display text-4xl font-bold leading-tight sm:text-5xl">Resultados que se traducen en valor real</h2>
            <p class="mt-5 max-w-xl text-blue-100">Nuestras implementaciones no solo resuelven procesos técnicos, sino que impactan directamente en el balance final de tu empresa.</p>
            <div class="mt-9 grid grid-cols-2 gap-5">
              <div class="border-l-2 border-flame pl-4">
                <p class="text-4xl font-black text-flame">+40%</p>
                <p class="mt-1 text-xs font-bold uppercase tracking-wide text-blue-100">Eficiencia operativa</p>
              </div>
              <div class="border-l-2 border-azure pl-4">
                <p class="text-4xl font-black text-azure">-60%</p>
                <p class="mt-1 text-xs font-bold uppercase tracking-wide text-blue-100">Tareas manuales</p>
              </div>
              <div class="border-l-2 border-flame pl-4">
                <p class="text-4xl font-black text-white">24/7</p>
                <p class="mt-1 text-xs font-bold uppercase tracking-wide text-blue-100">Disponibilidad</p>
              </div>
              <div class="border-l-2 border-azure pl-4">
                <p class="text-4xl font-black text-white">100%</p>
                <p class="mt-1 text-xs font-bold uppercase tracking-wide text-blue-100">Escalabilidad</p>
              </div>
            </div>
          </div>
          <div class="glass-panel rounded-lg p-6">
            <div class="mb-6 flex items-center justify-between">
              <h3 class="text-xl font-bold">Performance global</h3>
              <span class="text-flame">+8%</span>
            </div>
            <div class="space-y-5">
              <div>
                <div class="mb-2 flex justify-between text-sm font-semibold"><span>Automatización de procesos</span><span>92%</span></div>
                <div class="metric-bar"><span class="metric-fill w-[92%] bg-flame"></span></div>
              </div>
              <div>
                <div class="mb-2 flex justify-between text-sm font-semibold"><span>Reducción de latencia</span><span>76%</span></div>
                <div class="metric-bar"><span class="metric-fill w-[76%] bg-azure"></span></div>
              </div>
              <div>
                <div class="mb-2 flex justify-between text-sm font-semibold"><span>Integración de datos</span><span>100%</span></div>
                <div class="metric-bar"><span class="metric-fill w-full bg-azure"></span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="py-20">
        <div class="section-shell">
          <div class="text-center">
            <h2 class="font-display text-4xl font-bold text-ink sm:text-5xl">Nuestro Método de Trabajo</h2>
            <p class="mt-3 text-muted">Un proceso riguroso diseñado para el éxito del proyecto.</p>
          </div>
          <div class="mt-10 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {% set steps = [
              ["Diagnóstico", "Relevamos procesos, sistemas actuales y objetivos de negocio para detectar oportunidades concretas de mejora."],
              ["Estrategia", "Definimos alcance, prioridades técnicas y roadmap para construir una solución viable, escalable y medible."],
              ["Prototipo UX/UI", "Diseñamos flujos e interfaces iniciales para validar la experiencia antes de avanzar al desarrollo completo."],
              ["Desarrollo", "Construimos el software con entregas iterativas, código mantenible e integración continua con tus herramientas."],
              ["Lanzamiento", "Implementamos la solución en producción, acompañando la adopción del equipo y ajustando los últimos detalles."],
              ["Evolución", "Medimos resultados, incorporamos mejoras y escalamos la plataforma según nuevas necesidades del negocio."]
            ] %}
            {% for step in steps %}
              <div class="rounded-lg border border-line bg-white p-6 shadow-sm">
                <p class="font-display text-2xl font-bold text-flame/50">0{{ loop.index }}</p>
                <h3 class="mt-3 text-lg font-bold text-ink">{{ step[0] }}</h3>
                <p class="mt-3 text-sm leading-6 text-muted">{{ step[1] }}</p>
              </div>
            {% endfor %}
          </div>
        </div>
      </section>

      <section id="tecnologias" class="border-y border-line bg-[#eef2fa] py-10">
        <div class="section-shell">
          <p class="text-center text-xs font-bold uppercase tracking-[0.2em] text-muted">Stack tecnológico premium</p>
          <div class="mt-8 grid grid-cols-2 gap-4 text-center sm:grid-cols-3 lg:grid-cols-5">
            {% set techs = [
              [".NET", "tech-dotnet.svg"],
              ["TypeScript", "tech-typescript.svg"],
              ["React", "tech-react.svg"],
              ["Postgres", "tech-postgres.svg"],
              ["AWS", "tech-aws.svg"]
            ] %}
            {% for tech in techs %}
              <div class="{% if tech[0] == 'AWS' %}hidden sm:flex{% else %}flex{% endif %} min-h-32 flex-col items-center justify-center rounded-lg border border-white/70 bg-white/70 px-4 py-5 shadow-sm">
                <img src="/images/{{ tech[1] }}" alt="Logo {{ tech[0] }}" class="h-12 w-12 object-contain">
                <p class="mt-3 font-display text-xl font-bold text-slate-600">{{ tech[0] }}</p>
              </div>
            {% endfor %}
          </div>
        </div>
      </section>

      <section id="casos" class="bg-white py-20">
        <div class="section-shell">
          <div class="text-center">
            <h2 class="font-display text-4xl font-bold text-ink sm:text-5xl">Casos de Éxito</h2>
            <p class="mt-3 text-muted">Soluciones reales implementadas para empresas líderes.</p>
          </div>
          <div class="mt-10 grid gap-6 lg:grid-cols-3">
            {% set cases = [
              ["Industria", "ERP Empresarial a Medida", "Centralización de inventario y facturación para una distribuidora nacional.", "object-left"],
              ["Logística", "Plataforma SaaS de Tracking", "Sistema en tiempo real para el seguimiento de flotas internacionales.", "object-center"],
              ["Retail", "Automatización Operativa", "Workflow inteligente que redujo los tiempos de entrega en un 35%.", "object-right"]
            ] %}
            {% for item in cases %}
              <article class="overflow-hidden rounded-lg border border-line bg-white shadow-sm">
                <div class="h-48 overflow-hidden bg-navy">
                  <img src="/images/case-collage.png" alt="Interfaces digitales modernas para logística, analítica y arquitectura cloud" class="h-full w-full object-cover {{ item[3] }}">
                </div>
                <div class="p-5">
                  <p class="text-xs font-bold uppercase tracking-wide text-flame">{{ item[0] }}</p>
                  <h3 class="mt-2 text-xl font-bold text-ink">{{ item[1] }}</h3>
                  <p class="mt-3 text-sm leading-6 text-muted">{{ item[2] }}</p>
                </div>
              </article>
            {% endfor %}
          </div>
        </div>
      </section>

      <section class="bg-[#f0f4ff] py-14">
        <div class="section-shell grid gap-5 md:grid-cols-3">
          {% set quotes = [
            ["Ricardo Méndez", "CEO, Logística Global", "2piDev transformó nuestro sistema de turnos. Pasamos de hojas de cálculo a un software integrado que nos ahorra horas diarias.", "testimonial-alicia.png"],
            ["Sofía Larrea", "Directora Ops, TextilNova", "La capacidad técnica del equipo es impresionante, pero su entendimiento del negocio fue lo que realmente marcó diferencia.", "testimonial-sofia.png"],
            ["Alicia Vega", "CTO, Fintech Base", "Escalabilidad y seguridad desde el primer día. La nube tecnológica en el centro nos permitió crecer sin sobresaltos.", "testimonial-ricardo.png"]
          ] %}
          {% for item in quotes %}
            <figure class="rounded-lg border border-line bg-white p-6 shadow-sm">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <img src="/images/{{ item[3] }}" alt="Retrato de {{ item[0] }}" class="h-12 w-12 rounded-full object-cover ring-2 ring-blue-100">
                  <div>
                    <figcaption class="font-bold text-ink">{{ item[0] }}</figcaption>
                    <p class="text-xs text-muted">{{ item[1] }}</p>
                  </div>
                </div>
                <span class="font-display text-4xl font-bold text-blue-200">99</span>
              </div>
              <blockquote class="mt-5 text-sm leading-6 text-slate-700">"{{ item[2] }}"</blockquote>
            </figure>
          {% endfor %}
        </div>
      </section>

      <section id="contacto" class="bg-[linear-gradient(115deg,#9a3300_0%,#f97316_38%,#061832_39%,#062957_100%)] py-20 text-white">
        <div class="section-shell grid gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
          <div>
            <h2 class="font-display text-5xl font-bold leading-[0.95] sm:text-6xl">Tu próximo sistema puede convertirse en una ventaja competitiva</h2>
            <p class="mt-6 max-w-xl text-orange-50">Hablemos sobre cómo la tecnología puede acelerar tus objetivos de negocio hoy mismo.</p>
            <div class="mt-8 space-y-3 text-sm font-bold">
              <p class="flex items-center gap-3"><span class="h-2.5 w-2.5 rounded-full bg-white"></span>hola@2pidev.com</p>
              <p class="flex items-center gap-3"><span class="h-2.5 w-2.5 rounded-full bg-white"></span>Sede Central, Hub de Innovación Digital</p>
            </div>
          </div>
          <form class="rounded-xl border border-white/20 bg-white p-6 text-ink shadow-panel">
            <div class="grid gap-4 sm:grid-cols-2">
              <label class="text-sm font-bold">Nombre
                <input class="mt-2 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" type="text" name="nombre" placeholder="Juan Pérez">
              </label>
              <label class="text-sm font-bold">Empresa
                <input class="mt-2 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" type="text" name="empresa" placeholder="Nombre de tu empresa">
              </label>
            </div>
            <label class="mt-4 block text-sm font-bold">Email corporativo
              <input class="mt-2 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" type="email" name="email" placeholder="juan@empresa.com">
            </label>
            <label class="mt-4 block text-sm font-bold">Mensaje
              <textarea class="mt-2 min-h-32 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" name="mensaje" placeholder="Cuéntanos un poco sobre tu proyecto..."></textarea>
            </label>
            <button class="btn-primary mt-5 w-full" type="submit">Enviar mensaje</button>
          </form>
        </div>
      </section>
    </main>

    <footer class="bg-white py-12">
      <div class="section-shell grid gap-8 md:grid-cols-4">
        <div>
          <div class="flex items-center gap-3">
            <img src="/images/logo.svg" alt="" class="h-10 w-10">
            <span class="font-display text-xl font-bold">2piDev</span>
          </div>
          <p class="mt-4 text-sm leading-6 text-muted">Engineering elegance. Software de alto rendimiento diseñado para el futuro corporativo.</p>
        </div>
        <div>
          <h3 class="text-sm font-black uppercase tracking-wide text-ink">Compañía</h3>
          <div class="mt-4 space-y-2 text-sm text-muted">
            <p>Sobre nosotros</p>
            <p>Carreras</p>
            <p>Blog tech</p>
          </div>
        </div>
        <div>
          <h3 class="text-sm font-black uppercase tracking-wide text-ink">Legal</h3>
          <div class="mt-4 space-y-2 text-sm text-muted">
            <p>Privacidad</p>
            <p>Términos</p>
            <p>Seguridad</p>
          </div>
        </div>
        <div>
          <h3 class="text-sm font-black uppercase tracking-wide text-ink">Contacto</h3>
          <div class="mt-4 space-y-2 text-sm text-muted">
            <p>Hablemos de tu proyecto</p>
            <a class="font-bold text-azure" href="mailto:hola@2pidev.com">hola@2pidev.com</a>
          </div>
        </div>
      </div>
      <div class="section-shell mt-10 border-t border-line pt-6 text-xs text-muted">
        <p>(c) 2026 2piDev. Engineered Elegance.</p>
      </div>
    </footer>
  </body>
</html>
