# demo-builder

> Create professional landing page demos for clients with Tailwind CSS and GitHub Pages deployment. Generates complete HTML landing pages with all sections (logo, nav, hero, services, advantages, gallery, testimonials, CTA, WhatsApp contact form, footer), initializes git repos, configures GitHub Pages, and maintains client.json linking. Use when creating new demo landing pages for clients or prospects.

- Author: Christopher Flores
- Repository: furbox/clawd
- Version: 20260129231822
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/furbox/clawd
- Web: https://mule.run/skillshub/@@furbox/clawd~demo-builder:20260129231822

---

---
name: demo-builder
description: Create professional landing page demos for clients with Tailwind CSS and GitHub Pages deployment. Generates complete HTML landing pages with all sections (logo, nav, hero, services, advantages, gallery, testimonials, CTA, WhatsApp contact form, footer), initializes git repos, configures GitHub Pages, and maintains client.json linking. Use when creating new demo landing pages for clients or prospects.
---

# Demo Builder

Crea landing pages profesionales para demos de clientes con Tailwind CSS y despliegue automático en GitHub Pages.

## Flujo de Trabajo

### 1. Recibir Información del Cliente

El cliente te proporcionará:
- **Nombre del negocio** (ej: "Hotdogs de Dogs")
- **Número de WhatsApp** (ej: +5219999095087)
- **Logo** (archivo de imagen vía WhatsApp)
- **Información del negocio** (servicios, ventajas, etc.)

### 2. Crear Estructura del Demo

Usa el script `create_demo.py`:

```bash
python3 scripts/create_demo.py "Nombre del Negocio" "+5219999095087"
```

El script:
- Crea estructura de carpetas (`assets/`, `assets/images/`)
- Genera `cliente.json` con la información
- Inicializa git
- Crea repositorio en GitHub (público)
- Configura GitHub Pages
- Crea workflow para deploy automático

### 3. Personalizar el HTML

1. Copia `assets/landing-template.html` a `index.html`
2. Reemplaza todos los placeholders `{{VARIABLE}}` con la información real
3. Agrega el logo a `assets/logo.png`
4. Agrega 3 imágenes a `assets/images/imagen{1,2,3}.jpg`

### 4. Commitear y Desplegar

```bash
git add .
git commit -m "Add landing page for [CLIENTE]"
git push origin main
```

GitHub Pages desplegará automáticamente en:
```
https://furbox.github.io/[reponame]/
```

## Plantilla de Landing Page

La plantilla incluye TODAS las secciones obligatorias:

1. **Navigation** - Barra fija con logo y enlaces ancla
2. **Hero** - Título, subtítulo, 2 CTAs (WhatsApp + Contacto)
3. **Servicios** - 3 servicios con iconos SVG
4. **Ventajas** - 4 ventajas con checkmarks verdes
5. **Galería** - 3 imágenes en grid
6. **Opiniones** - 3 testimonios con 5 estrellas
7. **CTA** - Banner con call-to-action
8. **Contacto** - Formulario que envía a WhatsApp
9. **Footer** - Logo, enlaces, información de contacto

## Placeholders a Reemplazar

Ver `references/landing-structure.md` para lista completa de placeholders.

### Principales:
- `{{CLIENT_NAME}}` - Nombre del negocio
- `{{HERO_TITLE}}` - Título principal del hero
- `{{SERVICIO_X_TITULO}}` - Títulos de servicios
- `{{VENTAJA_X_TITULO}}` - Títulos de ventajas
- `{{OPINION_X}}` - Texto de testimonios
- `{{WHATSAPP_LINK}}` - Link wa.me/ sin + al inicio

## Integración con Cliente

### Archivo cliente.json

Creado automáticamente con:
```json
{
  "nombre": "Nombre del Negocio",
  "whatsapp": "+5219999095087",
  "demo": "nombre-del-demo",
  "fecha_creacion": "2026-01-29"
}
```

### Vincular con Carpeta de Cliente

Si el cliente tiene carpeta en `clientes/`, actualiza su info para referenciar el demo.

## GitHub Pages

### Workflow Automático

El script crea `.github/workflows/pages.yml` que:
- Se activa en cada push a `main`
- Deploy automático a GitHub Pages
- URL: `https://furbox.github.io/[repo]/`

### Verificar Deploy

1. Ve al repo en GitHub
2. Settings → Pages
3. Verifica que esté activo

## Tailwind CSS

### Clases Principales

Ver `references/tailwind-classes.md` para guía completa.

### Comunes:
- `max-w-7xl mx-auto px-4` - Contenedor principal
- `bg-white p-8 rounded-lg shadow-md` - Card
- `text-3xl font-bold` - Título sección
- `bg-blue-600 text-white px-6 py-2 rounded-full` - Botón

## Comandos Útiles

### Verificar Deploy
```bash
gh repo view --json url,homepageUrl
```

### Ver Workflow Status
```bash
gh run list --workflow=pages.yml
```

### Actualizar Demo
```bash
# Editar index.html
git add . && git commit -m "Update content" && git push
```

## Ejemplo Completo

### Crear Demo para "Hotdogs de Dogs"

1. **Ejecutar script:**
   ```bash
   python3 scripts/create_demo.py "Hotdogs de Dogs" "+5219999095087"
   ```

2. **Editar index.html:**
   - Reemplazar `{{CLIENT_NAME}}` → "Hotdogs de Dogs"
   - Reemplazar `{{HERO_TITLE}}` → "Los Mejores Hotdogs de la Ciudad"
   - Agregar servicios (Hotdogs Especiales, Bebidas, Postres)
   - Agregar ventajas (Calidad, Rapidez, Sabor, Precio)
   - Personalizar opiniones y galería

3. **Agregar Assets:**
   - Logo: `assets/logo.png`
   - Imágenes: `assets/images/imagen{1,2,3}.jpg`

4. **Deploy:**
   ```bash
   git add .
   git commit -m "Add landing page for Hotdogs de Dogs"
   git push origin main
   ```

5. **Resultado:**
   - Repo: `github.com/furbox/hotdogs-de-dogs`
   - Site: `furbox.github.io/hotdogs-de-dogs`
   - Release: `v1.0.0` creado

## Buenas Prácticas

1. **Siempre crear release** después del primer commit
2. **Footer obligatorio**: Todos los demos deben incluir "Desarrollado por Social Business" con link a https://socialbusiness.com.mx
3. **Versionado**: Usar etiquetas semánticas (v1.0.0, v1.1.0, v2.0.0)
4. **Usar imágenes de calidad** (mínimo 800x600px)
5. **Optimizar logo** en formato PNG con transparencia
6. **Probar formulario** antes de deploy
7. **Verificar responsive** en móvil y desktop
8. **Mantener estructura** de carpetas tal como se crea

## Footer Obligatorio

Todos los demos deben incluir en el footer:

```html
<p class="mt-2">Desarrollado por <a href="https://socialbusiness.com.mx" target="_blank" class="text-blue-400 hover:text-blue-300 transition">Social Business</a></p>
```

Esto se agrega automáticamente en la plantilla `assets/landing-template.html`.

## Referencias

- `references/landing-structure.md` - Estructura completa de la landing
- `references/tailwind-classes.md` - Clases de Tailwind más usadas
- `references/github-commands.md` - Comandos de gh CLI
- `assets/landing-template.html` - Plantilla HTML completa