Landing Page

Ruta: / en pinteach.com · Auth: Ninguna (publica)

Pagina de marketing principal de PinTeach. Construida con Astro 5 (zero client-side JS framework), animaciones CSS puras, y datos hardcodeados en componentes. Idioma: ingles.

Secciones

1. Header (fijo)

Navegacion fija con efecto glassmorphism al scroll (>20px). Logo con badge dorado “P”. Links: Features, How it works, Pricing. Auth links: Log in, Start free trial. Menu hamburguesa en movil con iconos animados.

2. Hero

Badge: “Built for language teachers”
Headline: “Run your teaching business. Not your admin.” (acento dorado en “Not your admin”)
CTA primario: “Start for free” (dark button)
CTA secundario: “Watch demo” (outline + play icon)
Trust indicators: No credit card, free plan, 5 min setup (con dot verde pulsante)

Dashboard preview interactivo: Mockup de navegador con 4 tabs que rotan automaticamente cada 3 segundos:

Schedule — calendario semanal con alumnos de ejemplo
Students — lista de alumnos con creditos
Payments — grafico de barras con ingresos ($2,340) y badge +18%
Analytics — 4 KPIs + insight callout

Tarjetas flotantes con animacion bounce: “Payment received +$25” y “New booking - Tomorrow 11:00”. Contador animado de $0 a $2,340 en la tab de pagos.

3. Trust Bar

Stats: 500+ Teachers, 12K+ Students, 50K+ Lessons, 4.9 Rating (grid 4 columnas).

Herramientas reemplazadas: 5 tarjetas con emoji que muestran strike-through al hover: Calendly, Stripe, Google Drive, WhatsApp, Excel → flecha → badge “PinTeach — All-in-one platform”.

4. Problem Section

Dos columnas:

Izquierda: “You didn’t become a teacher to do [admin work]” + avatar group “Join 2,400+ teachers”
Derecha: Terminal simulado (“your_daily_struggle.log”) con 5 problemas animados:
1. 10pm admin marathons
2. Tool chaos (5 herramientas)
3. Awkward payment chasing
4. Lost student data
5. Zero visibility

Cursor animado al final: “$ There has to be a better way…”

5. How It Works (3 pasos)

Students book themselves (azul) — Calendar + availability + auto Meet link
You get paid. Directly. (verde) — Stripe Connect, dinero directo al banco
Your business runs itself. (dorado) — Perfiles completos, historial, creditos

Mockup de perfil de alumno centrado debajo: avatar, progreso de pack (barra dorada 80%), ultimas sesiones, stats.

6. Features (6 tabs interactivos)

Columna izquierda con 6 botones pill, columna derecha con preview sticky:

Tab	Acento	Bullet points
Scheduling	Azul	Calendar sync, buffer times, reminders, self-service rescheduling
Payments	Verde	Direct payouts, invoices, multi-currency, packs
Students	Dorado	Profiles, notes, credit tracking, GDPR
Offerings	Dark	Single, packs, subscriptions, groups
Materials	Amarillo	Auto-create folders, auto-share, Drive, no manual uploads
Analytics	Rojo	Revenue, retention, growth insights, at-risk alerts

Click en tab → swap de preview + descripcion. Tab activo: fondo blanco + borde + sombra.

7. Anti-Marketplace (comparativa)

“This isn’t a marketplace. It’s your platform.” Tabla de 5 filas comparando marketplaces vs PinTeach:

Marketplaces (X rojo)	PinTeach (check dorado)
Students belong to platform	Students belong to you
15-30% commission	You keep 100% (minus Stripe)
Compete with thousands	Your own branded page
Limited formats	Any: packs, subs, courses
Students can leave	Direct relationship

CTA dorado: “Start building your platform”.

8. CTA Section

“Ready to simplify your teaching business?” CTA primario + secundario “Book a demo”. Trust line: no credit card, free plan, cancel anytime. 5 badges de certificaciones (TEFL, CELTA, IELTS, Cambridge, Goethe).

Referencia tecnica

Tipografia y colores

Serif: Noto Serif (headlines)
Sans: Noto Sans (body, UI)
Paleta: Gold (primario), Dark navy, Green (success), Red, Blue, Cream

Interacciones (CSS puro)

Header glassmorphism al scroll (>20px)
Tab rotation cada 3s en hero (reset manual al click)
Animated counter en payments tab ($0 → $2,340)
Staggered slide-up (0-400ms delays)
Floating card bounce animation
Tool cards con strike-through al hover
Feature tabs con swap de preview