Hero y Secciones de Landing
Componentes de showcase usados en la pagina principal: hero, perfiles, como funciona, CTA y tipos de mascota.
HomeHero
Seccion hero principal con fondo oscuro, orbs animados con GSAP, tarjetas flotantes B2B/B2C y CTAs. Ocupa min-h-[90vh] con logo rotando de fondo.
Detalles: Animaciones GSAP (orbs flotantes, parallax en scroll, tarjetas con efecto back.out). Muestra estado de autenticacion: si el usuario esta logueado, cambia el CTA secundario a "Ir a la App".
HomeProfileCards
Dos tarjetas de perfil lado a lado: una para veterinarias (gradiente navy) y otra para propietarios (gradiente teal). Incluyen animacion de emojis de animales que aparecen al hacer scroll.
Digitaliza tu clínica
Que te descubran, gestiona tu agenda, tu equipo y tus pacientes desde un solo lugar.
Todo sobre tu mascota
Encuentra veterinarias cerca de ti, agenda citas y lleva el historial de salud de quien más quieres.
Detalles: Cada tarjeta tiene un screenshot de fondo (dashboard / expediente) con opacidad baja, badge destacado, emoji de animal con animacion de pop-out al entrar en viewport (GSAP ScrollTrigger) y CTA al final.
HomeHowItWorks
Seccion de 3 pasos: Busca, Agenda y Cuida. Cada paso con icono, titulo, descripcion y screenshot con lightbox al hacer clic.
¿Cómo funciona?
Simple, rápido, sin complicaciones.
Busca
Encuentra veterinarias por ubicación, tipo de mascota o servicio.
Agenda
Reserva cita con horarios reales, sin llamadas ni esperas.
Cuida
Registra vacunas, peso y cada visita de tu mascota en un solo lugar.
Detalles: Grid de 3 columnas en desktop. Cada paso tiene screenshot clickeable que abre un ShikoLightbox. Animacion stagger de entrada con GSAP.
HomePioneerCTA
Call-to-Action del programa piloto. Fondo oscuro con blobs de gradiente, badge destacado y boton principal.
Sé parte de Shiko
desde el inicio
Estamos buscando las primeras 10 clínicas veterinarias que usarán Shiko. Acceso completo, gratis por 1 año (renovables), sin compromiso. A cambio solo pedimos tu feedback honesto.
* Plazas limitadas para asegurar atención personalizada.
¿Tienes una mascota? Para ti Shiko es siempre gratis →Detalles: Componente sin props. Texto centrado con badge "Solo 10 clinicas", screenshot del dashboard como textura de fondo con opacidad 0.03 y blobs decorativos de gradiente. Enlace secundario para duenos de mascotas.
HomePetTypes
Grid de tipos de mascota soportados: Perro, Gato, Conejo, Cuyo, Ave, Reptil, Caballo y Otro. Cada uno con emoji y nombre.
Shiko es para todas las mascotas
¿A quién cuidas tú?
Detalles: Grid de 8 columnas en desktop, 3 en movil. Animacion pop-out con scale y back.out easing. Componente sin props - datos hardcoded internamente.
LandingFeatureGrid
Grid reutilizable de tarjetas de funcionalidades para paginas de landing.
Ejemplo de Feature Grid
Grid reutilizable con tarjetas de funcionalidades
Agenda Online
Tus pacientes reservan citas directamente, sin llamadas.
Expediente Clinico
Historial completo de cada paciente en un solo lugar.
Gestion de Equipo
Roles y permisos para tu equipo veterinario.
Reportes
Metricas de tu clinica en tiempo real.
Inventario
Control de medicamentos y productos.
Notificaciones
Recordatorios automaticos a tus clientes.
Props:
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
| title | String | requerido | Titulo de la seccion |
| subtitle | String | '' | Subtitulo |
| badge | String | '' | Badge encima del titulo |
| features | Array | requerido | { icon, title, desc, to? } |
| columns | Number | 3 | 2, 3 o 4 columnas |
| dark | Boolean | false | Fondo gris en vez de blanco |
LandingFeatureDetail
Seccion de detalle de funcionalidad con layout alternado imagen/texto.
Agenda y Citas
Gestiona todo tu calendario de consultas desde un solo lugar. Los duenos pueden reservar citas online 24/7.
- ✓Booking online 24/7
- ✓Reagendar con drag & drop
- ✓Recordatorios automaticos
Dashboard de citas
Props:
| Prop | Tipo | Descripcion |
|---|---|---|
| icon | String | Emoji del icono |
| title | String | Titulo de la funcionalidad |
| description | String | Parrafo descriptivo |
| highlights | Array | Lista de bullet points |
| imageRight | Boolean | Imagen a la derecha (true) o izquierda |
| imageSrc | String | URL de la imagen. Si vacio, muestra placeholder |
| dark | Boolean | Fondo gris |