Landing institucional de 2piDev construida con Eleventy y Tailwind CSS. El sitio es completamente estático: se genera en _site/ y se puede servir desde Nginx, Dokploy o cualquier hosting de archivos estáticos.

Stack

Eleventy para generar HTML estático.
Tailwind CSS para estilos utilitarios y componentes.
Bun como runtime/package manager.
Nginx en producción vía Docker.

Estructura

.
├── src/
│   ├── index.njk              # Landing principal
│   ├── css/
│   │   ├── tailwind.css       # CSS fuente con directivas Tailwind
│   │   └── styles.css         # CSS compilado que Eleventy copia al build
│   └── images/                # Logos, screenshots, retratos y favicon
├── _site/                     # Build local generado, ignorado por Git
├── .eleventy.js               # Configuración de Eleventy
├── tailwind.config.js         # Configuración de Tailwind
├── postcss.config.js          # PostCSS + Tailwind + Autoprefixer
├── Dockerfile                 # Build estático + runtime Nginx
└── package.json               # Scripts y dependencias

Desarrollo Local

Instalar dependencias:

bun install

Generar el sitio:

bun run build

Levantar servidor de desarrollo:

bun run dev

Por defecto, Eleventy sirve el sitio en http://localhost:8080/.

Scripts

{
  "build:css": "tailwindcss -i ./src/css/tailwind.css -o ./src/css/styles.css --minify",
  "build": "bun run build:css && eleventy",
  "dev": "bun run build:css && eleventy --serve --watch"
}

Notas:

src/css/tailwind.css es el archivo que se edita.
src/css/styles.css es generado por Tailwind y se mantiene versionado para que Eleventy pueda copiarlo como asset estático.
_site/ no se versiona.

Deploy con Dokploy

La forma recomendada para Dokploy es usar el Dockerfile incluido. El contenedor:

Instala dependencias con Bun.
Ejecuta bun run build.
Copia _site/ a Nginx.
Sirve la landing desde el puerto 80.

En Dokploy:

Tipo de deploy: Dockerfile.
Puerto interno: 80.
No requiere variables de entorno.
No requiere base de datos ni servicios externos.

Build manual de la imagen:

docker build -t 2pidev-landing-page .

Ejecución local con Docker:

docker run --rm -p 8080:80 2pidev-landing-page

Luego abrir http://localhost:8080/.

Assets

Los assets viven en src/images/ y se copian automáticamente a _site/images/.

Incluye:

Logo principal y favicon.
Imágenes generadas/originales para hero, resultados y casos de éxito.
Retratos ficticios generados para testimonios.
Logos SVG de tecnologías: .NET, TypeScript, React, PostgreSQL y AWS.

Para reemplazar una imagen, conservar el mismo nombre de archivo evita cambios en el HTML. Si se cambia el nombre, actualizar la referencia en src/index.njk.

Contenido Principal

Toda la landing está en src/index.njk. Las secciones actuales son:

Header con navegación y CTA.
Hero principal.
Problemas frecuentes de empresas en crecimiento.
Soluciones digitales.
Resultados y métricas.
Método de trabajo.
Stack tecnológico.
Casos de éxito.
Testimonios.
Formulario de contacto.
Footer.

Algunas listas, como servicios, pasos, tecnologías, casos y testimonios, están definidas como arrays dentro del template para facilitar edición rápida.

Convenciones

Mantener textos visibles con tildes y ortografía en español.
Mantener assets locales siempre que sea posible para evitar dependencias externas.
Usar SVG para logos e íconos de marca cuando exista una fuente confiable.
Antes de commitear, correr:

bun run build

Git

Repositorio remoto:

git remote -v

Debe apuntar a:

https://git.2pidev.com/jselesan/landing-2pi.git

Flujo sugerido:

git status
bun run build
git add .
git commit -m "Describe el cambio"
git push

Mantenimiento

Si se agregan nuevas tecnologías, sumar el SVG a src/images/ y actualizar el array techs en src/index.njk.

Si se agregan nuevas secciones o componentes visuales, preferir mantenerlos en el mismo template mientras la landing siga siendo simple. Crear layouts/includes de Eleventy solo cuando haya repetición real o más páginas.

Licencias y Uso de Imágenes

Los retratos de testimonios son ficticios y generados para este proyecto. Los logos de tecnologías pertenecen a sus respectivas marcas. Las imágenes de producto/interfaz usadas como visuales de la landing deben mantenerse como assets locales del proyecto para que el deploy sea reproducible.