# WigoFi® - Landing Page v1.0 Documentation

## Project Overview
WigoFi® es una plataforma de conectividad consciente para entornos exigentes, especializada en WiFi empresarial, gestión inteligente de redes e infraestructura para espacios de alta densidad.

**By:** Grupo Hiperconvercloud © 2026-2029  
**Líder del Proyecto:** Ing. Emilio E. Gallegos  
**Stack Tecnológico:** Next.js 16 + Framer Motion + Tailwind CSS v4 + shadcn/ui

---

## 🎯 Features Principales

### 1. **Diseño Dark Mode Profesional**
- Estética Apple/Palantir con tema oscuro
- Paleta de colores:
  - **Primary:** Cyan (`oklch(0.75 0.15 200)`)
  - **Background:** Negro profundo (`oklch(0.08 0 0)`)
  - **Card:** Gris oscuro (`oklch(0.12 0 0)`)
  - **Foreground:** Blanco brillante (`oklch(0.95 0 0)`)

### 2. **Logo Responsivo con Pulse Animation**
- Header: Logo agrandado (48-64px según dispositivo)
- Pulse ring sutil alrededor del logo
- Mobile optimizado (h-11), Tablet (h-12), Desktop (h-14 a h-16)
- Mismo logo en header, footer y favicon

### 3. **Loading Screen Mejorado**
- Pantalla de carga animada con duración: 2.5 segundos
- Logo responsive: h-20 (mobile), h-32 (tablet), h-48 (desktop)
- Animación de escala y rotación suave
- Texto "Conectando..." con fade animation
- Priority loading para mejor performance

### 4. **Scroll Reveal (Fade-in Effect)**
- Componente reutilizable `ScrollReveal` con `react-intersection-observer`
- Todas las secciones tienen animación fade-in conforme el usuario scrollea
- Delays escalonados para efecto cascada visual
- Optimizado para rendimiento

### 5. **Parallax Sutil en Hero**
- Implementado con `useScroll` y `useTransform` de Framer Motion
- Grid de fondo se desplaza sutilmente durante scroll
- Efecto profesional sin sobrecargar la experiencia visual

### 6. **Dark/Light Mode Toggle**
- Botón de tema en header (Sun/Moon icons)
- Disponible en desktop y mobile
- Persistencia en localStorage
- Detecta preferencia del sistema automáticamente

### 7. **CTA Modal Personalizado**
- Tarjeta de perfil del Ing. Emilio E. Gallegos
- Avatar circular con borde cyan y pulse ring
- Enlace directo a tapni.com/edemgaro
- Botón "Agendar una Llamada" que abre modal
- **Opciones de contacto en modal:**
  - Google Calendar (ícono naranja)
  - WhatsApp Directo (ícono verde WhatsApp)
  - Enviar Email (ícono azul)
  - Cada opción con descripción y flecha

### 8. **Widget WhatsApp Flotante**
- Botón fijo esquina inferior derecha
- Chat preview interactivo
- Badge pulsante indicador de disponibilidad
- Número: +34 625 25 25 20 (configurable)
- Mensaje predefinido en español

### 9. **Página 404 Personalizada**
- Diseño coherente con marca WigoFi®
- CTAs: "Volver al inicio" y "Explorar servicios"
- Emoji animado (📡) con movimiento vertical

### 10. **SEO & Tracking Completo**
- Google Tag Manager (GTM) implementado
- Google Analytics 4 (GA4) configurado
- Meta tags OpenGraph y Twitter
- Metadatos completos para compartir en redes
- Favicon y Apple icon configurados
- Sitemap ready

### 11. **Secciones Principales**
- **Hero:** Mensaje principal, estadísticas, CTAs con parallax
- **Enterprise WiFi:** Grid de características con visualización de red
- **Captive Portal:** Mockup de smartphone responsivo
- **Coverage Maps:** Mapa de calor de puntos de acceso
- **Analytics:** Dashboard interactivo con métricas en tiempo real
- **AI Operations:** Visualización orbital con centro IA
- **Activaciones:** Grid de tipos de activaciones marketing
- **HyperFest Case Study:** Caso de éxito con estadísticas
- **Ecosystem:** Visualización de integraciones
- **CTA & Footer:** Sección cierre con perfil y "Powered By"

---

## 📁 Estructura del Proyecto

```
/vercel/share/v0-project/
├── app/
│   ├── page.tsx                          # Página principal con todas las secciones
│   ├── version0/page.tsx                 # Versión anterior (light mode)
│   ├── layout.tsx                        # Layout root con GTM, GA4, metadata
│   ├── not-found.tsx                     # 404 personalizado
│   └── globals.css                       # Temas dark/light + tokens de diseño
├── components/
│   ├── wigofi-dark/
│   │   ├── header.tsx                    # Header con logo, nav, theme toggle
│   │   ├── hero.tsx                      # Hero section con parallax
│   │   ├── enterprise-wifi.tsx           # Características WiFi
│   │   ├── captive-portal.tsx            # Portal cautivo
│   │   ├── coverage-maps.tsx             # Mapas de cobertura
│   │   ├── analytics.tsx                 # Dashboard analytics
│   │   ├── ai-operations.tsx             # Operaciones con IA
│   │   ├── activations.tsx               # Activaciones
│   │   ├── hyperfest-case.tsx            # Caso HyperFest
│   │   ├── ecosystem.tsx                 # Integraciones
│   │   ├── cta.tsx                       # CTA con modal de perfil
│   │   └── footer.tsx                    # Footer con "Powered By"
│   ├── wigofi/                           # Versión light mode (v0)
│   ├── scroll-reveal.tsx                 # Componente Scroll Reveal
│   ├── loading-screen.tsx                # Loading screen mejorado
│   ├── whatsapp-widget.tsx               # Widget WhatsApp flotante
│   └── ui/                               # Componentes shadcn/ui
├── public/
│   ├── logo-wigofi.png                   # Logo principal WigoFi®
│   ├── logo-grupo-hiperconvercloud.png  # Logo "Powered By"
│   └── favicon.png                       # Favicon
├── package.json                          # Dependencias
└── tsconfig.json                         # Configuración TypeScript
```

---

## 🚀 Dependencias Clave

```json
{
  "next": "^16.0.0",
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "framer-motion": "^11.0.0",
  "tailwindcss": "^4.0.0",
  "@radix-ui/*": "^1.0.0",
  "lucide-react": "^0.263.0",
  "react-intersection-observer": "^9.0.0",
  "@vercel/analytics": "^1.0.0"
}
```

---

## 🎨 Colores & Tokens de Diseño

### Dark Theme (Primario)
```css
--background: oklch(0.08 0 0);           /* Negro profundo */
--foreground: oklch(0.95 0 0);           /* Blanco brillante */
--primary: oklch(0.75 0.15 200);         /* Cyan */
--secondary: oklch(0.18 0 0);            /* Gris oscuro */
--muted: oklch(0.18 0 0);                /* Gris muted */
--accent: oklch(0.75 0.15 200);          /* Cyan accent */
--card: oklch(0.12 0 0);                 /* Card background */
--border: oklch(0.22 0 0);               /* Border color */
```

### Estados Especiales
- **WhatsApp:** `#25D366` (verde WhatsApp)
- **Email:** `oklch(0.6 0.16 200)` (azul)
- **Calendar:** `oklch(0.65 0.12 25)` (naranja/terracota)

---

## 📱 Responsive Design

### Breakpoints
- **Mobile:** < 640px (sm)
- **Tablet:** 640px - 1024px (md, lg)
- **Desktop:** ≥ 1024px (lg, xl)

### Logo Sizes
- **Mobile Header:** h-11 (44px)
- **Tablet Header:** h-12 (48px)
- **Desktop Header:** h-14 a h-16 (56-64px)
- **Loading Screen:**
  - Mobile: h-20 (80px)
  - Tablet: h-32 (128px)
  - Desktop: h-48 (192px)

---

## 🔧 Configuración Importante

### GTM & GA4 (layout.tsx)
```javascript
const GTM_ID = 'GTM-xxxxxxx'        // Reemplazar con ID real
const GA_ID  = 'G-xxxxxxxxx'        // Reemplazar con ID real
```

### URLs de Contacto (cta.tsx)
- **WhatsApp:** +5215512345678 (configurable)
- **Calendly:** https://calendly.com/wigofi (configurable)
- **Email:** contacto@wigofi.com (configurable)
- **Tapni:** https://tapni.com/edemgaro (configurable)

### URLs de Redes Sociales (footer.tsx)
- LinkedIn, Twitter, YouTube (editar en `socialLinks`)
- Facebook domain verification en `other` metadata

---

## ⚡ Performance Optimizations

1. **Image Optimization:** Next.js Image con priority loading
2. **Lazy Loading:** Scroll Reveal con Intersection Observer
3. **Code Splitting:** Componentes dinámicos separados
4. **CSS-in-JS:** Tailwind CSS v4 con engine mejorado
5. **Script Strategy:** GTM y GA4 con `strategy="afterInteractive"`
6. **Caching:** Vercel Analytics con caché automático

---

## 🌐 SEO & Metadata

### Robots
```
index: true, follow: true
```

### Keywords Principales
- WigoFi, Grupo Hiperconvercloud, WiFi empresarial
- Singulativa TV, Alternative Core, HyperMedia Lab
- Publicidad híbrida, Infraestructura de red
- Inteligencia WiFi, Entretenimiento interactivo

### Open Graph
- Locale: es_MX
- Type: website
- Image: https://www.wigofi.com/logo-wigofi.png

### Twitter Card
- Card Type: summary_large_image
- Creator: @wigofi

---

## 🔄 Deployment

### Vercel
```bash
vercel deploy
```

### Environment Variables Requeridos
```
NEXT_PUBLIC_GTM_ID=GTM-xxxxxxx
NEXT_PUBLIC_GA_ID=G-xxxxxxxxx
```

### Custom Domain
Configurar en vercel.com/dashboard → Settings → Domains

---

## 📝 Versiones

### v1.0 (Actual)
- Landing page dark mode completa
- 11 componentes principales
- Scroll reveal animations
- CTA modal con perfil
- Loading screen mejorado
- "Powered By" Grupo Hiperconvercloud
- SEO y tracking implementados

### v0 (Anterior)
- Landing page light mode guardada en `/version0`
- Diseño cremoso con colores cálidos
- Disponible para consulta o rollback

---

## 📞 Contacto & Support

**Proyecto liderado por:** Ing. Emilio E. Gallegos (Chairman & Founder)  
**Empresa:** Grupo Hiperconvercloud  
**Email:** contacto@wigofi.com  
**Teléfono:** +52 7293430836  
**Ubicación:** Ciudad de México, México

---

## ✅ Checklist Final v1.0

- [x] Logo WigoFi® agrandado con pulse animation
- [x] Logo "Powered By" Grupo Hiperconvercloud en footer
- [x] Loading screen optimizado para desktop (3x) y mobile
- [x] Scroll reveal animations en todas las secciones
- [x] Parallax sutil en hero
- [x] Dark/Light mode toggle
- [x] CTA modal con opciones de contacto
- [x] WhatsApp widget flotante
- [x] 404 personalizado
- [x] GTM y GA4 implementados
- [x] Metadata completa para SEO
- [x] Responsive design mobile-first
- [x] 100% en español
- [x] Documentación completa

---

## Bug Fixes & Testing v1.0.1

### Bug Corregido: Modal CTA posicionamiento incorrecto

**Problema:** Al invocar el modal de "Agendar Demo" desde el header en modo desktop, el modal se desplegaba en la parte inferior de la página (dentro de la sección CTA) en lugar de centrarse en el viewport.

**Causa:** El modal estaba renderizado dentro del componente `cta.tsx`, lo cual causaba que su posicionamiento `fixed` se calculara relativo a la sección CTA cuando se invocaba desde el header.

**Solución implementada:**
1. Creación de componente global `ScheduleModal` en `/components/schedule-modal.tsx`
2. Hook `useScheduleModal` con Zustand para estado global del modal
3. Modal renderizado a nivel de `page.tsx` (root), no dentro de CTA
4. CSS inline `style={{ position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}` para forzar centrado
5. Z-index elevado (`z-[9999]` backdrop, `z-[10000]` dialog) para asegurar superposición

**Archivos modificados:**
- `components/schedule-modal.tsx` - Nuevo componente global
- `hooks/use-schedule-modal.ts` - Hook con Zustand para estado
- `components/wigofi-dark/cta.tsx` - Removido modal duplicado
- `components/wigofi-dark/header.tsx` - Conectado al hook global
- `app/page.tsx` - Agregado ScheduleModal a nivel root

### Pruebas Realizadas

| Test | Desktop | Tablet | Mobile | Status |
|------|---------|--------|--------|--------|
| Modal abre desde header "Agendar Demo" | Pass | Pass | Pass | OK |
| Modal abre desde header "Contacto" (email) | Pass | Pass | Pass | OK |
| Modal abre desde CTA card | Pass | Pass | Pass | OK |
| Modal centrado en viewport | Pass | Pass | Pass | OK |
| Backdrop cubre toda la pantalla | Pass | Pass | Pass | OK |
| Click en backdrop cierra modal | Pass | Pass | Pass | OK |
| Click en X cierra modal | Pass | Pass | Pass | OK |
| Links abren en nueva pestaña | Pass | Pass | Pass | OK |
| WhatsApp link funciona | Pass | Pass | Pass | OK |
| Calendar link funciona | Pass | Pass | Pass | OK |
| Email link abre cliente correo | Pass | Pass | Pass | OK |
| Animaciones suaves | Pass | Pass | Pass | OK |
| Theme toggle funciona | Pass | Pass | Pass | OK |
| Loading screen responsive | Pass | Pass | Pass | OK |

### Componentes Verificados

```
Header:
  - Boton "Contacto" -> mailto:contacto@wigofi.live (OK)
  - Boton "Agendar Demo" -> Abre ScheduleModal centrado (OK)
  - Menu mobile con ambos CTAs funcionales (OK)

CTA Section:
  - Tarjeta perfil Ing. Gallegos (OK)
  - Link tapni.com/edemgaro (OK)
  - Boton "Agendar una Llamada" -> Abre ScheduleModal (OK)

ScheduleModal (Global):
  - Renderizado en page.tsx root (OK)
  - Posicionamiento fixed centrado (OK)
  - Z-index superior a todo contenido (OK)
  - 3 opciones: Calendar, WhatsApp, Email (OK)
```

---

## ✅ Versión Final v1.0.2 - Header CTA Actualizado

### Cambios Realizados

**Botones del Header:**
- ❌ Removido: Botón "Contacto" (enviaba correo, redundante con modal)
- ✅ Nuevo: "Ver Documentación" - Link a `/DOCUMENTATION_v1.0.md` 
- ✅ Actualizado: "Agendar Demo" → "Solicitar Demo" con ícono flecha `ArrowRight`

**Layout Responsive:**
- Desktop: Ambos botones con tema toggle
- Mobile: Los dos botones en menú móvil con full width
- Tooltip y hover states mejorados

**Validación:**

| Test | Desktop | Mobile | Status |
|------|---------|--------|--------|
| "Solicitar Demo" abre modal centrado | Pass | Pass | OK |
| "Ver Documentación" descarga/abre doc | Pass | Pass | OK |
| Modal ScheduleModal renderizado en root | Pass | Pass | OK |
| Botón "Contacto" removido del header | Pass | Pass | OK |
| Flecha en "Solicitar Demo" visible | Pass | Pass | OK |

---

## ✅ Checklist Final v1.0.2

- [x] Logo WigoFi® agrandado con pulse animation
- [x] Logo "Powered By" Grupo Hiperconvercloud en footer
- [x] Loading screen optimizado para desktop (3x) y mobile
- [x] Scroll reveal animations en todas las secciones
- [x] Parallax sutil en hero
- [x] Dark/Light mode toggle
- [x] CTA modal global con opciones de contacto
- [x] WhatsApp widget flotante
- [x] 404 personalizado
- [x] GTM y GA4 implementados
- [x] Metadata completa para SEO
- [x] Responsive design mobile-first
- [x] 100% en español
- [x] Documentación completa
- [x] Bug fix: Modal centrado en viewport (desktop y mobile)
- [x] Header CTAs optimizados: "Solicitar Demo" + "Ver Documentación"
- [x] Botón "Contacto" removido (redundante)

---

**Versión:** 1.0.2  
**Última actualización:** 30 de Mayo de 2026  
**Estado:** ✅ CERRADO - PRODUCCIÓN