347 lines
21 KiB
Plaintext
347 lines
21 KiB
Plaintext
---
|
|
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>
|