Avanceserviciossociales

AVANCE WEB

Actúa como un desarrollador experto en React, Tailwind CSS y UI/UX de alta gama. Crea una Landing Page institucional premium para “Avance Servicios Sociales”. El diseño debe transmitir solidez, confianza y vanguardia tecnológica en salud.

REGLAS DE DISEÑO:

• Paleta de colores estricta: Azul Marino (#0b2240), Azul Rey (#1d4ed8), Blanco puro (#ffffff) y fondos grises ultra claros (#f8fafc) para separar secciones.

• Usa abundante espacio en blanco (whitespace) para que el diseño respire.

• Interfaz orientada a “Venta Consultiva”: NO muestres precios ni planes armados. Todos los botones de acción (CTAs) deben abrir URLs de WhatsApp (https://wa.me/5493547632766?text=Hola,%20quiero%20asesoramiento...).

• Utiliza la imagen adjunta como el logotipo principal en el Header.

ESTRUCTURA DE LA PÁGINA (Un solo layout vertical fluid):

1. NAVBAR (Sticky Header):

• Izquierda: El logo proporcionado.

• Centro: Enlaces limpios (Servicios, Especialidades, Sistema Touch, Comercios).

• Derecha: Botón secundario outline “Acceso Afiliados”.

1. HERO SECTION (Impacto y Autoridad):

• Título principal (H1, grande y audaz): “Tranquilidad y respaldo para todo tu grupo familiar.”

• Subtítulo: “Combinamos previsión, atención médica de excelencia y tecnología para acompañarte cuando más lo necesitás en Alta Gracia.”

• Botón CTA Principal (Azul Rey, Icono WhatsApp): “Solicitar Asesoramiento Personalizado”.

• Debajo del botón, un texto pequeño: “Respuesta rápida • Atención personalizada”.

1. SECCIÓN: SERVICIOS INTEGRALES (Grid de 4 Tarjetas Minimalistas):

• Tarjeta 1 (Sepelio): “Seguro de Sepelio”. Cobertura completa y contención familiar.

• Tarjeta 2 (Salud): “Atención Primaria”. Acceso a profesionales de primer nivel. (Agrega un “Badge” destacado en esta tarjeta que diga: “Hasta 60% de descuento en Farmacias”).

• Tarjeta 3 (Ambulancia): “Ambulancia 24hs”. Traslados y médico a domicilio.

• Tarjeta 4 (Telemedicina): “Consultas Virtuales”. Médicos a distancia, rápidos y seguros.

1. SECCIÓN: CARTILLA MÉDICA (Grid de Especialidades):

• Título: “Especialidades a tu disposición”.

• Crea un grid compacto (ej. 3 o 4 columnas) con iconos de Lucide y texto breve para: Cardiología, Odontología, Clínica Médica, Kinesiología, EMMAC, Fonoaudiología, Psicología, Laboratorio y Pediatría.

1. SECCIÓN DE INNOVACIÓN: “TOUCH OMESIS” (Feature Asimétrico):

• Diseño de dos columnas (texto de un lado, espacio para imagen/ilustración del otro).

• Título destacado: “Únicos en Córdoba: Sistema Touch”.

• Descripción: “Un botón que salva. Monitorización 24/7 diseñada para brindar seguridad y asistencia inmediata a adultos mayores, embarazadas y personas con discapacidad.”

• Botón CTA: “Conocer más sobre Touch”.

1. SECCIÓN CORPORATIVA: ÁREA PROTEGIDA B2B (Banner de ancho completo):

• Fondo Azul Marino (#0b2240) con texto en blanco.

• Título: “Área Protegida para tu Comercio”.

• Beneficios en viñetas: Cobertura de ambulancia 24hs y Control de Ausentismo exclusivo.

• Botón CTA (Blanco con texto azul): “Proteger mi negocio”.

1. FOOTER:

• Misión/Visión breve: “Ser referentes en servicios integrales, destacándonos por la innovación y la excelencia.”

• Contacto: Avda. España 241/243, Alta Gracia (Córdoba)

  Tel: 3547-632766.

• Botón flotante permanente de WhatsApp en la esquina inferior derecha.

This project was built with Lovable.

Live app: https://avanceserviciossociales.lovable.app

Build with Lovable

Continue developing this project in the Lovable editor.

• Ship faster: describe what you want to build and Lovable handles the code.
• Stay in sync: every change made in Lovable is committed straight to this repository.
• Full ownership: this code is yours. Push to main on GitHub and your changes sync back into Lovable, ready for your next prompt.

Development

Prefer working locally? You need Node.js and npm — install with nvm.

git clone <this-repository-url>
cd <repository-name>
npm i
npm run dev