Perfil publico

Ruta Astro: /profesores/:slug (SSR) · Ruta React legacy: /:slug (redirects to Astro) · Auth: Ninguna (publica)

Migrado a Astro SSR

El perfil publico fue migrado de la SPA React a Astro SSR (apps/pinteach-web/) para SEO completo (Open Graph, Schema.org, sitemap dinamico). La ruta React /$slug ahora redirige automaticamente a /profesores/$slug en Astro.

Pagina publica del profesor visible para cualquier visitante. El layout es configurable por el profesor via el editor de perfil con grid de 4 columnas y drag-and-drop.

---

Que hay

Grid dinamico de secciones

Layout de 4 columnas (responsive a 1 en movil). Cada seccion puede ocupar 1-4 columnas segun la configuracion del profesor (profileLayout). Las secciones se renderizan en el orden definido en layout.sections y solo las marcadas como visible: true.

Secciones disponibles

Seccion	Contenido
Hero	Avatar, nombre, badge Super Tutor, headline, anos de experiencia, bio
Video	Iframe responsive de YouTube/Vimeo
Especialidades	Grid de badges con color y descripcion
Idiomas	Badges con nivel CEFR (A1-C2)
Certificaciones	Cards verticales con badge de verificacion
Educacion	Cards con titulo, universidad, especializacion
Experiencia	Cards con puesto, empresa, fechas
Hobbies	Pills inline flex-wrapped
Booking Widget	Formulario de reserva de trial (full width)
Reviews	Resenas publicas con paginacion y distribucion de estrellas
Storefront	Tarjetas de servicios con tabs por estructura

Booking Widget embebido

Formulario de reserva de trial integrado en el perfil:

• Tab bar multi-servicio (si hay mas de 1 trial)
• Calendario semanal con slots (4 semanas)
• Agrupacion por periodo (manana/tarde/noche)
• Formulario: nombre, email, telefono, nivel CEFR, objetivos
• Exito: checkmark + mensaje (sin redirect, embed-safe)

Storefront embebido

Grid de tarjetas de servicios con:

• Tabs automaticos por estructura (Trial, Clases, Paquetes, Cursos, Suscripciones)
• Barra de contexto del alumno (si logueado): saludo + creditos
• Auth gate para compras (magic link)

Reviews publicas

• Barra resumen: rating grande + contador + distribucion de estrellas
• Cards con avatar, nombre, rating, verificacion, source, quick tags
• Respuesta del profesor (si existe)
• Reviews destacadas con borde ambar
• Paginacion (10 por pagina)

Floating CTA

Boton “Reservar” flotante bottom-right que aparece via IntersectionObserver cuando la seccion de booking sale del viewport.

Atribucion de referral

El perfil soporta el parametro ?ref=direct para distinguir entre alumnos propios del profesor y leads generados por PinTeach:

URL	referralSource	Significado
/profesores/maria-garcia?ref=direct	direct	Alumno propio del profesor (sin comision)
/profesores/maria-garcia	directory	Lead de PinTeach (via directorio u organico)

El parametro ref se propaga automaticamente a los CTAs de booking y a las tarjetas de servicio, y llega hasta la API que lo almacena en students.referralSource.

Cadena: [slug].astro → BookingCta / ServicesSection → React /book/$slug → API → students.referralSource

Analytics tracking

Eventos automaticos: page_view, service_click, booking_started, section_view. Enviados via useProfileTracking(slug) a /public/:slug/analytics-events.

---

Que falta

Feature	Descripcion	Estado	Implementado
Links sociales	Nueva seccion con iconos de redes sociales (LinkedIn, Instagram, YouTube, X, sitio web). Datos desde teachers.socialLinks JSONB	✅	Batch 4
FAQ del profesor	Seccion de preguntas frecuentes con accordion colapsable. Datos desde teachers.faq JSONB	✅	Batch 4
Badge de disponibilidad	Indicador de disponibilidad proxima junto al hero del perfil	✅	Batch 4
CTA personalizable	El profesor puede personalizar el texto del boton flotante de reserva	✅	Batch 4
Testimonios en video	Permitir a los alumnos subir video-reviews ademas de texto	Aplazado

---

Que falla

Bug	Descripcion	Estado	Corregido
Video iframe sin sandbox	El embed de YouTube/Vimeo ya tiene sandbox="allow-scripts allow-same-origin allow-presentation" en el iframe. No era un bug real	✅	Batch 4
Bio renderizada sin sanitizar	React JSX auto-escaping previene XSS. No se usa dangerouslySetInnerHTML. No era un bug real	✅	Batch 4

---

Que cambiaria

Mejora	Descripcion	Dificultad	Estado	Implementado
Agregar links sociales	Seccion con iconos de redes sociales, datos desde teachers.socialLinks JSONB	Facil	✅	Batch 4
Seccion FAQ	Accordion colapsable con preguntas/respuestas, datos desde teachers.faq JSONB	Facil	✅	Batch 4
Badge de disponibilidad	Indicador de disponibilidad proxima junto al hero	Medio	✅	Batch 4

---

Referencia tecnica

Archivos clave

Archivo	Proposito
apps/pinteach-web/src/pages/profesores/[slug].astro	Pagina principal del perfil (Astro SSR)
apps/pinteach-web/src/components/profile/	20 componentes de seccion (hero, video, services, reviews, FAQ, etc.)
apps/pinteach-web/src/components/BaseHead.astro	SEO meta tags, OG, Twitter
apps/pinteach-web/src/components/ProfileHead.astro	Schema.org structured data
apps/web/src/routes/public/profile.tsx	Redirect legacy /$slug → Astro /profesores/$slug
apps/web/src/components/storefront/	5 componentes (card, grid, booking, auth gate, context bar) — usados en booking
apps/web/src/components/reviews/public-reviews-section.tsx	Reviews publicas en React (legacy, usado en widgets)

API

Endpoint	Metodo	Proposito
/public/:slug	GET	Perfil completo del profesor
/public/:slug/reviews	GET	Reviews paginadas
/public/:slug/service-availability	GET	Slots disponibles
/public/:slug/trial	POST	Reservar trial (acepta referralSource)
/public/:slug/enroll	POST	Comprar servicio (acepta referralSource)
/public/:slug/analytics-events	POST	Tracking de eventos

SEO (Astro SSR)

Elemento	Detalle
<title>	{Name} — {Headline} | PinTeach
<meta description>	Primeros 160 chars del bio
Open Graph	type=profile, image=avatar
Twitter Card	summary_large_image
Canonical	https://pinteach.com/profesores/{slug}
Schema.org	Service + Person + Offer (precio minimo) + AggregateRating
Cache-Control	public, s-maxage=300, stale-while-revalidate=600