Manuel Peña

MPPDev – Soluciones digitales con lógica de negocio

🚀 VISITA EL PROYECTO LIVE

🚀 Landing Page Profesional - Proyecto Integral

📋 Resumen Ejecutivo

Landing Page de Alto Rendimiento desarrollada con tecnologías modernas, enfocada en conversión y optimización para ventas. El proyecto demuestra competencias en desarrollo frontend, integración de APIs, analytics, y mejores prácticas de seguridad y privacidad.

🎯 Objetivos del Proyecto

🛠️ Stack Tecnológico

Frontend Framework

Integraciones y APIs

Herramientas de Desarrollo

Deployment y Hosting

🏗️ Arquitectura y Estructura

Organización del Proyecto

myLandingPage/
├── src/
│   ├── components/
│   │   ├── landing/          # Componentes específicos de la landing
│   │   ├── navbar/           # Sistema de navegación
│   │   └── ui/               # Componentes reutilizables
│   ├── content/
│   │   └── blog/             # Sistema de blog con MDX
│   ├── layouts/              # Layouts base
│   ├── pages/                # Páginas y rutas
│   └── styles/               # Estilos globales y animaciones
├── public/                   # Assets estáticos
└── .env.example             # Variables de entorno documentadas

Componentes Principales

🔧 Implementaciones Técnicas Destacadas

1. Sistema de Lead Magnet Avanzado

Desafío: Integrar MailerLite con feedback visual personalizado sin dependencias externas.

Solución Implementada:

// Callback personalizado para MailerLite
function ml_webform_success_27660996() {
  // Ocultar mensaje predeterminado de MailerLite
  const mlSuccess = document.querySelector('.ml-form-successBody.row-success');
  if (mlSuccess) mlSuccess.style.display = 'none';
  
  // Mostrar feedback personalizado
  showCustomFeedback('success');
  
  // Tracking de conversión en Google Analytics
  if (typeof gtag !== 'undefined') {
    gtag('event', 'lead_magnet_download', {
      'event_category': 'engagement',
      'event_label': 'landing_page_analysis_pdf'
    });
  }
}

Características:

2. Botón Flotante de WhatsApp con Seguridad Avanzada

Desafío: Implementar contacto directo por WhatsApp protegiendo el número personal.

Solución Implementada:

---
// Variables de entorno para ofuscación
const WHATSAPP_COUNTRY = import.meta.env.WHATSAPP_COUNTRY || '56';
const WHATSAPP_AREA = import.meta.env.WHATSAPP_AREA || '9';
const WHATSAPP_NUMBER = import.meta.env.WHATSAPP_NUMBER || '12345678';
---

<script define:vars={{ WHATSAPP_COUNTRY, WHATSAPP_AREA, WHATSAPP_NUMBER }}>
  function initWhatsAppButton() {
    // Construcción dinámica del enlace
    var fullNumber = WHATSAPP_COUNTRY + WHATSAPP_AREA + WHATSAPP_NUMBER;
    var message = encodeURIComponent('Hola, vengo de tu landing page y necesito asesoría');
    var whatsappUrl = 'https://wa.me/' + fullNumber + '?text=' + message;
    
    // Aplicación después de 30 segundos
    setTimeout(() => {
      document.getElementById('whatsapp-float-btn').style.display = 'block';
    }, 30000);
  }
</script>

Características de Seguridad:

3. Sistema de Analytics Avanzado

Implementación Dual:

Eventos Tracked:

// Lead Magnet
gtag('event', 'lead_magnet_download', {
  'event_category': 'engagement',
  'event_label': 'landing_page_analysis_pdf'
});

// Clicks en Planes
gtag('event', 'plan_click', {
  'event_category': 'engagement',
  'event_label': planName,
  'value': 1
});

// Formulario de Contacto
gtag('event', 'contact_form_submit', {
  'event_category': 'engagement',
  'event_label': 'contact_form'
});

// WhatsApp
gtag('event', 'whatsapp_click', {
  'event_category': 'engagement',
  'event_label': 'floating_button'
});

4. Optimización de Rendimiento

Técnicas Implementadas:

/* Optimización de rendimiento */
img {
  content-visibility: auto;
}

📊 Métricas y Resultados

Rendimiento Web

SEO y Accesibilidad

Conversiones Trackiadas

🔒 Seguridad y Privacidad

Medidas Implementadas

Compliance

🚀 DevOps y Deployment

Pipeline de CI/CD

  1. Desarrollo local con hot reload
  2. Git workflow con ramas por features
  3. Deploy automático en Vercel al hacer push
  4. Variables de entorno configuradas en producción
  5. Monitoreo automático de errores

Comandos de Desarrollo

# Desarrollo local
npm run dev

# Build de producción
npm run build

# Preview del build
npm run preview

📈 Escalabilidad y Mantenimiento

Código Mantenible

Facilidad de Extensión

🎓 Aprendizajes y Desafíos Superados

Desafíos Técnicos Resueltos

  1. Integración MailerLite: Personalización completa del feedback sin SDK
  2. Seguridad WhatsApp: Protección de datos personales en código público
  3. Analytics Dual: Implementación de dos sistemas de analytics
  4. Rendimiento: Optimización para Lighthouse 95+
  5. Responsive Design: Compatibilidad móvil completa

Habilidades Demostradas

🔗 Enlaces y Recursos

💼 Valor para el Negocio

ROI Técnico

Impacto Comercial

Conclusión

Este proyecto demuestra competencias completas en desarrollo frontend moderno, desde la arquitectura técnica hasta la implementación de funcionalidades avanzadas de negocio, con especial énfasis en rendimiento, seguridad y experiencia de usuario. La landing page no solo cumple con los estándares técnicos más altos, sino que también implementa estrategias de conversión y analytics que la convierten en una herramienta de negocio efectiva.

Desarrollado por Manuel Peña
Full Stack Developer
Stack Principal: Astro, TypeScript, Tailwind CSS, MailerLite API
Período de Desarrollo: 2024-2025

🚀 VISITA EL PROYECTO LIVE

¿Querés hablar sobre un proyecto o una oportunidad laboral?