# Buda Digital - Agencia de Marketing Digital

> Tu solución digital para crecer en ventas. Donde la ingeniería del marketing transforma tu negocio.

## Sobre Nosotros

Buda Digital no es simplemente una agencia de marketing digital. Somos tu compañero de batalla en el mundo digital, especialistas en catapultar tus ventas con publicidad en Google Ads, Meta Ads (Facebook/Instagram) y LinkedIn.

Las PYMES son el corazón de la economía chilena, pero enfrentan el gigantesco desafío de competir con corporaciones más grandes en línea. Los presupuestos suelen ser ajustados y el tiempo escaso. Precisamente por ello, hemos moldeado un enfoque diseñado a la medida para negocios como el tuyo.

En Buda Digital, reconocemos que cada negocio es único y tiene sus propias necesidades y desafíos. Nos especializamos en publicidad pagada y análisis de datos para ofrecerte un retorno de inversión rápido, para que puedas concentrarte en lo que mejor sabes hacer: crecer tu negocio.

## Servicios Principales

### Configuración de Cuentas
Gestionamos la configuración de Google (Ads, Analytics, Tag Manager), Meta Ads (Facebook/Instagram) y LinkedIn Ads para maximizar tu visibilidad online. Tu marca estará donde debe estar: frente a tus clientes ideales.

### Implementación de Campañas
Diseñamos e implementamos campañas personalizadas basadas en tus objetivos y presupuesto, y las monitoreamos para asegurar los mejores resultados.

### Monitoreo Continuo
Revisión constante del rendimiento de tus campañas para garantizar que siempre alcances a tu público objetivo de manera efectiva.

### Sistema de Reportería
Creamos un sistema de reportería para que puedas tomar las mejores decisiones basadas en datos, utilizando sistemas gratuitos como Looker Studio. Con dashboards intuitivos que te ofrecen una visión clara de tu negocio.

## Planes y Precios

### Plan Buda Starter - $500.000 + IVA (pago único)
Para negocios que están iniciando su travesía en línea.

Incluye:
- Diagnóstico inicial de cuentas Google Ads y Meta Ads
- Configuración Tag Manager y Google Analytics
- Configuración de Google Ads o Meta Ads
- Implementar hasta 2 campañas según la necesidad de tu negocio
- Reunión entregable final

No incluye:
- Implementar más de 2 campañas
- Creación y optimización de nuevas campañas
- Seguimiento y optimización constante de campañas
- Creación de reportes en Looker Studio

### Plan Buda PYME - Desde $300.000 + IVA/mes (mínimo 3 meses)
Para negocios buscando escalar y expandirse en internet.

Incluye:
- Diagnóstico inicial de cuenta Google Ads y Meta Ads
- Configuración Tag Manager, Google Analytics, Meta Ads o LinkedIn Ads
- Configuración de Google Ads o Meta Ads
- Implementar hasta 3 campañas según la necesidad de tu negocio
- Creación y optimización de nuevas campañas
- Realizar seguimiento y optimización constante de campañas
- Reuniones periódicas (1 vez por mes)
- Creación de reportes en Looker Studio

### Plan Buda Enterprise - Consultar precio
Para grandes empresas que requieren soluciones avanzadas en línea.

Incluye:
- Diagnóstico inicial de cuenta Google Ads y Meta Ads
- Configuración Tag Manager, Google Analytics, Meta Ads y LinkedIn Ads
- Configuración de Google Ads, Meta Ads y LinkedIn Ads
- Implementar campañas según la necesidad del negocio (sin límite)
- Creación y optimización de nuevas campañas
- Realizar seguimiento y optimización constante de campañas
- Reuniones periódicas (hasta 2 veces por mes)
- Creación de reportes en Looker Studio

**Nota**: Los precios no incluyen el gasto en campañas digitales (presupuesto de publicidad en las plataformas).

## ¿Por Qué Elegir Buda Digital?

### Enfoque en ROI
Enfocados en recuperar y maximizar tu inversión. No esperes 6 meses. Verás cambios significativos en pocas semanas.

### Presupuesto Flexible
Nos adecuamos a tu presupuesto. Excelente servicio no implica romper tu alcancía. Nuestros precios te permitirán crecer sin preocupaciones.

### Transparencia Total
Transparencia total en los resultados. Gracias a Looker Studio, siempre estarás al tanto de cómo avanzan tus campañas y dónde se requiere afinar.

### Experiencia Comprobada
Sabemos cómo diseñar campañas exitosas. Llevamos años en ello.

### Cómplices en tu Viaje
También somos una PYME. Entendemos tus retos y necesidades. Nos adaptamos porque caminamos en tus zapatos.

## Plataformas con las que Trabajamos

- **Google Ads**: Campañas de búsqueda, display y shopping
- **Meta Ads**: Publicidad en Facebook e Instagram
- **LinkedIn Ads**: Publicidad B2B y profesional
- **Google Analytics 4 (GA4)**: Análisis web y seguimiento de conversiones
- **Google Tag Manager (GTM)**: Implementación de etiquetas y tracking
- **Looker Studio**: Dashboards y reportes personalizados

## Portal de Clientes

Los clientes de Buda Digital tienen acceso a un dashboard privado donde pueden:
- Ver sus reportes de rendimiento de campañas
- Acceder a métricas y estadísticas en tiempo real
- Revisar el historial de optimizaciones
- Comunicarse con el equipo

## Páginas del Sitio Web

- **Inicio** (https://www.budadigital.cl): Página principal con información general
- **Planes** (https://www.budadigital.cl/planes): Detalle de planes y precios
- **Nosotros** (https://www.budadigital.cl/nosotros): Información sobre el equipo y la agencia
- **Contacto** (https://www.budadigital.cl/contacto): Formulario de contacto
- **Dashboard** (https://www.budadigital.cl/dashboard): Portal privado para clientes
- **Login** (https://www.budadigital.cl/login): Acceso al portal de clientes

## Redes Sociales

- Facebook: https://facebook.com/budadigital.cl
- Instagram: https://instagram.com/budadigital.cl
- WhatsApp: https://wa.me/56992898420

## Información de Contacto

- **Email**: contacto@budadigital.cl
- **Teléfono/WhatsApp**: +56 9 9289 8420
- **Sitio Web**: https://www.budadigital.cl
- **Dirección**: Dr Manuel Borgoño 110, Providencia, Región Metropolitana, Chile

## Horario de Atención

Lunes a Viernes: 09:00 - 18:00 hrs (Hora Chile)

## Tecnología del Sitio

El sitio web de Buda Digital está construido con:
- **Nuxt 3.15.2**: Framework de Vue.js con Server-Side Rendering (SSR)
- **Tailwind CSS + DaisyUI**: Sistema de diseño moderno y responsive
- **PocketBase**: Backend y autenticación para el portal de clientes (https://budadigital.datadiego.dev)
- **Looker Studio**: Integración para reportería de clientes
- **@nuxt/image**: Optimización automática y responsive images
- **@nuxtjs/web-vitals**: Monitoreo de Core Web Vitals
- **PrimeVue**: Componentes UI (Carousel para testimonios)
- **Pinia**: State management
- **vue-recaptcha**: Protección del formulario de contacto

### Stack Técnico Completo

**Frontend**
- Vue 3 (Composition API con `<script setup>`)
- Nuxt 3.15.2 (SSR enabled)
- Tailwind CSS 3.x + DaisyUI
- TypeScript support
- Auto-imports habilitado

**Backend & Data**
- PocketBase para autenticación y base de datos
- Colecciones: users, reports, contacts, terms
- Cookie-based authentication
- SMTP configurado para emails (contacto)

**Performance & SEO**
- Imágenes optimizadas a WebP (95.9% reducción: 69.4MB → 2.87MB)
- Lazy loading en imágenes below-fold
- Preconnect hints para dominios externos
- Core Web Vitals tracking
- XML sitemap automático
- robots.txt configurado
- Schema.org structured data (JSON-LD)
- Mobile-first responsive design

**Deployment & Build**
- Commands: `pnpm dev`, `pnpm build`, `pnpm generate`, `pnpm preview`
- Dev server con acceso de red habilitado (--host flag)
- SSR para SEO óptimo
- Static site generation disponible

## Preguntas Frecuentes

### ¿Cuánto tiempo toma ver resultados?
No esperes 6 meses. Con nuestro enfoque verás cambios significativos en pocas semanas.

### ¿Puedo cancelar en cualquier momento?
El plan PYME requiere un mínimo de 3 meses de compromiso para poder optimizar correctamente las campañas.

### ¿El precio incluye el gasto en publicidad?
No, los precios de los planes son por gestión y no incluyen el presupuesto de publicidad que se invierte directamente en las plataformas (Google, Meta, LinkedIn).

### ¿Cómo puedo ver el rendimiento de mis campañas?
Creamos dashboards personalizados en Looker Studio y los clientes tienen acceso a un portal privado con sus reportes.

### ¿Trabajan solo con empresas de Chile?
Nuestro enfoque principal es Chile, pero podemos trabajar con empresas de otros países de habla hispana.

## Contacto Rápido

¿Listo para transformar tu negocio? Trabajaremos hombro a hombro para comprender tu negocio y desplegar las campañas perfectas.

- WhatsApp: https://wa.me/56992898420
- Email: contacto@budadigital.cl
- Formulario: https://www.budadigital.cl/contacto

---

# Technical Documentation

## Project Structure

```
/components      # Reusable Vue components (organized by feature)
  /card          # Plan cards, testimonial cards
  /home          # Homepage sections (hero, servicios, elegirnos, reviews, stats)
  /navBar.vue    # Main navigation
  /footerBuda.vue # Footer with social links
  /whatsapp.vue  # Floating WhatsApp button
  /testimonios.vue # Testimonials component

/pages           # File-based routing
  /index.vue     # Homepage
  /nosotros.vue  # About page
  /planes.vue    # Pricing page
  /contacto.vue  # Contact form
  /terminos-y-condiciones.vue # Terms
  /login.vue     # Login page
  /recuperar-contrasena.vue # Password recovery
  /dashboard/**  # Protected dashboard pages

/layouts         # Page layouts
  /default.vue   # Main layout with nav + footer

/middleware      # Route guards
  /auth.js       # Authentication middleware

/plugins         # Nuxt plugins
  /pb.js         # PocketBase client
  /notifications.ts # Notiwind setup

/stores          # Pinia stores
  /auth.js       # Authentication state
  /user.js       # User data

/composables     # Reusable composition functions
  /chain-stream.js # LangChain integration

/assets          # CSS, images, fonts
  /css/global.css # Tailwind imports
  /img/          # Image assets
    /budas/      # Hero images
    /budas2/     # Additional images

/public          # Static files served at root
  /circleless.png # Logo
  /circleless_white.png # Logo white version
  /robots.txt    # Robots file (auto-generated)
  /sitemap.xml   # Sitemap (auto-generated)
  /llms.txt      # LLM-readable project summary
  /llms-full.txt # Complete documentation

/audit           # Website audit documentation
  /phase-1-performance.md
  /phase-2-seo.md
  /phase-3-schema.md
  /phase-4-cro.md
  /phase-5-mobile.md
  /phase-6-technical-seo.md
  /PHASE-X-COMPLETED.md # Completion reports
```

## Coding Conventions

### Vue Components
- Use `<script setup>` syntax (Composition API)
- Props with `defineProps()` and type validation
- Reactive state with `ref()` and `computed()`
- Scoped styles with `<style scoped>`

### File Naming
- Components: PascalCase (`NavBar.vue`, `CardPlan.vue`)
- Pages: kebab-case (`recuperar-contrasena.vue`)
- Composables: kebab-case (`chain-stream.js`)
- Middleware/plugins: lowercase

### Styling
- Use Tailwind utility classes
- Brand colors: `brand`, `brand-orange`, `brand-yellow`, `brand-darkblue`, `brand-blue`, `brand-lightblue`, `brand-gray`
- Custom viewports: `10v` to `100v` for vh/vw units
- DaisyUI components available

## PocketBase Integration

### Access PocketBase
```javascript
const { $pb } = useNuxtApp()
```

### Authentication
```javascript
// Login
await $pb.collection('users').authWithPassword(email, password)

// Check auth
$pb.authStore.isValid

// Get current user
$pb.authStore.baseModel
```

### Collections Schema

**users**
- id (auto)
- email (email, unique)
- password (password)
- name (text)
- created (datetime, auto)
- updated (datetime, auto)

**reports**
- id (auto)
- user (relation to users)
- title (text)
- content (editor/json)
- period (text)
- created (datetime, auto)
- updated (datetime, auto)

**contacts**
- id (auto)
- name (text)
- email (email)
- phone (text)
- website (url, optional)
- message (text)
- created (datetime, auto)

**terms**
- id (auto)
- content (editor)
- version (text)
- active (bool)
- created (datetime, auto)

## Protected Routes

Use `definePageMeta({ middleware: 'auth' })` to protect pages.

Example:
```vue
<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>
```

## Notifications System

```javascript
import { notify } from 'notiwind'

notify({
  group: "toasts",
  type: 'success', // or 'error', 'delete'
  title: "Title",
  text: "Message"
}, 3500) // duration in ms
```

## Image Optimization

All images use @nuxt/image for automatic optimization:

```vue
<NuxtImg
  src="/budas2/10.webp"
  alt="Description"
  width="1920"
  height="650"
  sizes="100vw sm:100vw md:100vw lg:1920px"
  fetchpriority="high"
  loading="eager"
  format="webp"
/>
```

**Lazy loading for below-fold images:**
```vue
<NuxtImg
  src="/image.webp"
  alt="Description"
  loading="lazy"
/>
```

## SEO Configuration

### Meta Tags (Page Level)
```vue
<script setup>
useHead({
  title: 'Page Title | Buda Digital',
  meta: [
    { name: 'description', content: 'Page description' },
    { property: 'og:title', content: 'OG Title' },
    { property: 'og:description', content: 'OG Description' },
    { property: 'og:image', content: 'https://www.budadigital.cl/og-image.png' }
  ]
})
</script>
```

### Schema Markup (JSON-LD)
Global schemas are in `nuxt.config.ts`. Page-specific schemas:

```vue
<script setup>
useHead({
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [...]
      })
    }
  ]
})
</script>
```

## Environment Variables

Create `.env` file in root:

```env
SMTP_HOST=smtp.example.com
SMTP_PORT=587
SMTP_USER=user@example.com
SMTP_PASS=password
COMPANY_EMAIL=contacto@budadigital.cl
```

Access in server routes:
```javascript
const config = useRuntimeConfig()
const smtpHost = config.smtpHost
```

## Development Commands

```bash
# Install dependencies
pnpm install

# Development server (with network access)
pnpm dev

# Production build
pnpm build

# Preview production build
pnpm preview

# Generate static site
pnpm generate
```

## Performance Optimizations Applied

### Phase 1: Images (2026-02-20)
- Compressed all images to WebP format
- Total reduction: 69.4MB → 2.87MB (95.9%)
- Implemented @nuxt/image for responsive images
- Added lazy loading to below-fold images

### Phase 2: SEO On-Page (2026-02-20)
- Added comprehensive meta tags to all pages
- Fixed OG image URLs and properties
- Added hreflang tags for es-CL
- Improved page-specific descriptions
- Excluded auth pages from sitemap

### Phase 3: Schema Markup (2026-02-20)
- Organization schema with full contact details
- WebSite schema for sitelinks search box
- BreadcrumbList on all subpages
- Offer/ProfessionalService schema on pricing page
- Consolidated schemas using @graph pattern

### Phase 4: CRO (2026-02-20)
- Added stats bar with social proof (+50 Campañas, +10 Clientes, +$50M)
- Implemented floating WhatsApp button
- Improved CTA button copy
- Added trust signals throughout site

### Phase 5: Mobile Optimization (2026-02-20)
- Fixed tap target sizes to 48x48px minimum
- Form inputs at 16px to prevent iOS zoom
- Prevented horizontal scroll with overflow-x: hidden
- Mobile-optimized hero image serving
- Responsive grid layouts for all sections

### Phase 6: Technical SEO (2026-02-20)
- Added @nuxtjs/web-vitals for Core Web Vitals tracking
- Implemented preconnect hints for external domains
- Verified HTTPS schema.org protocol
- Optimized robots.txt and sitemap generation

## Contact Form Implementation

Located in `/pages/contacto.vue`:

```vue
<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="form.name" required />
    <input type="email" v-model="form.email" required />
    <input type="tel" v-model="form.phone" required />
    <input type="url" v-model="form.website" />
    <textarea v-model="form.message" required></textarea>
    <VueRecaptcha v-model="captchaToken" />
    <button type="submit">Enviar</button>
  </form>
</template>
```

Form submits to PocketBase `contacts` collection and sends email via server route.

## Dashboard Access

Protected routes in `/pages/dashboard/`:
- Requires authentication via middleware
- Users can view their campaign reports
- Reports fetched from PocketBase `reports` collection
- Real-time updates via PocketBase realtime subscriptions

## Brand Colors (Tailwind Config)

```javascript
colors: {
  'brand': '#FF6B35',
  'brand-orange': '#f97316',
  'brand-yellow': '#FFC857',
  'brand-darkblue': '#004E89',
  'brand-blue': '#0066CC',
  'brand-lightblue': '#00A5E0',
  'brand-gray': '#E5E5E5'
}
```

## Google Fonts Configuration

```javascript
googleFonts: {
  families: {
    Roboto: true,
    Rubik: true,
    Outfit: true
  },
  display: 'swap'
}
```

## Sitemap Configuration

Auto-generated at `/sitemap.xml`. Excludes:
- /dashboard/** (protected pages)
- /login
- /recuperar-contrasena
- /redirect

## Robots.txt Configuration

Disallows `/dashboard` for all bots. Allows GPTBot, CCBot, and Google-Extended for AI training.

## Core Web Vitals Tracking

Enabled via @nuxtjs/web-vitals. Tracks:
- LCP (Largest Contentful Paint)
- FID (First Input Delay) / INP (Interaction to Next Paint)
- CLS (Cumulative Layout Shift)

Data sent to analytics for monitoring.

## For Technical Support

- Documentation: See `/audit` folder for phase-by-phase improvements
- Contact: contacto@budadigital.cl
- Repository: (if applicable)