landing-2pi/README.md

2piDev Landing Page

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:

1. Instala dependencias con Bun.
2. Ejecuta bun run build.
3. Copia _site/ a Nginx.
4. 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.