Landing Page
Ruta: / (Astro SSR) · Auth: Ninguna (publica) · Layout: LandingLayout
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
Section titled “Secciones”1. Header (fijo)
Section titled “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
Section titled “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
Section titled “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
Section titled “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:
- 10pm admin marathons
- Tool chaos (5 herramientas)
- Awkward payment chasing
- Lost student data
- Zero visibility
Cursor animado al final: ”$ There has to be a better way…“
5. How It Works (3 pasos)
Section titled “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)
Section titled “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)
Section titled “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
Section titled “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).
9. Footer
Section titled “9. Footer”Logo + tagline + newsletter signup. 4 columnas de links: Product, Resources, Company, Legal. Social links: Twitter/X, LinkedIn, Instagram, YouTube. Copyright 2024.
Referencia tecnica
Section titled “Referencia tecnica”Archivos clave
Section titled “Archivos clave”| Archivo | Proposito |
|---|---|
apps/web/src/pages/index.astro | Pagina principal |
apps/web/src/layouts/LandingLayout.astro | Layout wrapper (BaseHead + main) |
apps/web/src/components/landing/Header.astro | Nav fijo con glassmorphism |
apps/web/src/components/landing/Hero.astro | Hero + dashboard preview interactivo |
apps/web/src/components/landing/TrustBar.astro | Stats + tool replacement flow |
apps/web/src/components/landing/ProblemSection.astro | Terminal simulado con problemas |
apps/web/src/components/landing/HowItWorks.astro | 3 pasos + mockup de alumno |
apps/web/src/components/landing/Features.astro | 6 tabs interactivos con preview |
apps/web/src/components/landing/AntiMarketplace.astro | Comparativa vs marketplaces |
apps/web/src/components/landing/CtaSection.astro | CTA final + trust badges |
apps/web/src/components/landing/LandingFooter.astro | Footer con newsletter + links |
Tipografia y colores
Section titled “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)
Section titled “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
Variables de entorno
Section titled “Variables de entorno”APP_URL (default: http://localhost:3737) — usado en links de auth y CTAs.