📋 Documentación - Asisvital

Agencia de Cuidado de Personas Adultas Mayores y Asistencia Personal

Versión: 1.0.0 | Fecha: Enero 2025

🎯 Descripción General

Asisvital es una landing page moderna y responsiva diseñada para una agencia especializada en el cuidado de personas adultas mayores y servicios de asistencia personal. La página está optimizada para convertir visitantes en clientes potenciales, destacando los servicios de cuidado compasivo y profesional.

🏗️ Estructura de la Página

1. Header (Encabezado)

Componente components/header.tsx

Logo: Asisvital con icono de corazón
Navegación: Enlaces a Servicios, Testimonios, Planes, y Contacto
CTA: Botón "Consulta Gratuita" destacado
Características: Sticky header que permanece visible al hacer scroll

2. Hero Section (Sección Principal)

Componente components/hero.tsx

Headline: "Cuidado Compasivo para Tus Seres Queridos"
Descripción: Mensaje sobre servicios profesionales de cuidado
CTAs: Botones primario y secundario para conversión
Imagen: Fotografía profesional de cuidadora con persona mayor
Diseño: Layout de dos columnas responsivo

3. Features Section (Características)

Componente components/features.tsx

Servicios destacados:

🏥 Cuidado Profesional

Personal certificado y capacitado

🏠 Atención Domiciliaria

Servicios en la comodidad del hogar

📋 Planes Personalizados

Adaptados a necesidades específicas

📞 Disponibilidad 24/7

Soporte y emergencias siempre

4. Testimonials Section (Testimonios)

Componente components/testimonials.tsx

Cantidad: 3 testimonios de familias satisfechas
Contenido: Experiencias reales con el servicio
Elementos: Foto, nombre, relación, y testimonio
Diseño: Grid responsivo de 3 columnas

5. Pricing Section (Planes)

Componente components/pricing.tsx

Tres niveles de servicio:

Plan	Precio	Características
Básico	$899/mes	Visitas diarias, asistencia básica, 8 horas/día
Completo ⭐	$1,499/mes	Atención 12 horas, cuidado médico, plan personalizado
Premium	$2,299/mes	Atención 24/7, enfermera dedicada, servicios especializados

6. Contact Form Section (Formulario de Contacto)

Componente components/contact-form.tsx

API app/api/contact/route.ts

Campos: Nombre completo, Email, Teléfono, Mensaje
Validación: Campos requeridos con validación HTML5
Envío: Formulario envía datos a juanmelendez.pe@gmail.com
Feedback: Mensajes de éxito/error al usuario
API: Endpoint POST /api/contact usando Resend
Estados: Loading, success, error con indicadores visuales

7. Final CTA Section

Componente components/final-cta.tsx

Objetivo: Última oportunidad de conversión
Mensaje: "Comienza Hoy con el Mejor Cuidado"
Acción: Botón para agendar consulta gratuita

8. Footer (Pie de Página)

Componente components/footer.tsx

Columnas: Servicios, Empresa, Recursos, Contacto
Redes Sociales: Enlaces a Facebook, Instagram
Teléfono: Enlace funcional tel:+34613620890
WhatsApp: Botón flotante fijo (bottom-right) que abre chat
Copyright: Información legal y derechos reservados

📞 Funcionalidades Interactivas

Formulario de Contacto

Ubicación: Sección dedicada antes del CTA final
Destino: juanmelendez.pe@gmail.com
Tecnología: API Route de Next.js + Resend
Validación: Cliente y servidor
UX: Estados de carga, éxito y error

Botón de WhatsApp

Ubicación: Flotante en esquina inferior derecha
Número: +34 613 620 890
Comportamiento: Abre WhatsApp Web o app móvil
Diseño: Color verde oficial de WhatsApp (#25D366)
Interacción: Efecto hover con scale y shadow
Accesibilidad: aria-label descriptivo

Botón de Llamada

Ubicación: Header (escritorio) y CTA final
Número: +34 613 620 890
Funcionalidad: Enlace tel: que marca automáticamente en móviles
Desktop: Abre aplicación de teléfono predeterminada
Mobile: Inicia llamada directamente
Icono: Lucide Phone icon

🎨 Sistema de Diseño

Paleta de Colores

Background
#0a0a0a

Foreground
#fafafa

Primary
#6366f1

Card
#1a1a1a

Muted
#2a2a2a

Tipografía

Font Principal: Geist (sans-serif)
Font Monospace: Geist Mono
Tamaños: Sistema de escala responsivo con Tailwind
Line Height: 1.5-1.6 para legibilidad óptima

Espaciado y Layout

Contenedor máximo: 1200px (max-w-7xl)
Padding de secciones: py-16 a py-24
Gap entre elementos: Sistema de espaciado de Tailwind (4, 6, 8, 12)
Border radius: Redondeado suave (rounded-lg, rounded-xl)

🔄 Interactividad

Hover Effects: Transiciones suaves en botones y cards
Smooth Scroll: Navegación fluida entre secciones
Sticky Header: Navegación siempre accesible
Animaciones: Sutiles y profesionales
Formulario Dinámico: Validación en tiempo real y feedback
WhatsApp Flotante: Siempre visible para contacto rápido
Llamadas Directas: Enlaces tel: funcionales en móviles

🎯 Objetivos de Conversión

CTAs Principales:

Botón "Consulta Gratuita" en header (siempre visible)
Botones en hero section (primera impresión)
Botones en cada plan de pricing
Formulario de contacto completo (captura de leads)
Botón de WhatsApp flotante (contacto inmediato)
Botones de llamada directa (conversión telefónica)
CTA final antes del footer (última oportunidad)

⚙️ Implementación Técnica

API de Contacto

Endpoint: POST /api/contact

Servicio de Email: Resend (requiere RESEND_API_KEY)

Configuración:

Variable de entorno: RESEND_API_KEY
Email destino: juanmelendez.pe@gmail.com
Email remitente: Asisvital <onboarding@resend.dev>
Reply-to: Email del usuario que envía el formulario

Enlaces de Comunicación

Tipo	Formato	Ejemplo
Teléfono	`tel:[número]`	`tel:+34613620890`
WhatsApp	`https://wa.me/[número]`	`https://wa.me/34613620890`
Email	`mailto:[email]`	`mailto:info@asisvital.com`

📊 Métricas Recomendadas

Tasa de clics en botones CTA
Tiempo de permanencia en la página
Scroll depth (profundidad de scroll)
Conversiones de formulario de contacto
Clics en botón de WhatsApp
Clics en botones de llamada
Tasa de rebote
Dispositivo de origen (móvil vs desktop)

🔮 Futuras Mejoras

Sistema de reservas online
Chat en vivo para consultas inmediatas
Blog con artículos sobre cuidado de ancianos
Portal de clientes para seguimiento de servicios
Integración con CRM
Testimonios en video
Calculadora de costos personalizada
Notificaciones por SMS/Email automáticas
Sistema de citas online

📞 Información de Contacto

Datos de la empresa:

Teléfono: +34 613 620 890
WhatsApp: +34 613 620 890
Email: juanmelendez.pe@gmail.com
Horario: Disponibilidad 24/7