TapCar — Sitio web
Landing comercial de TapCar: los documentos de tus vehículos a un toque. Cada vehículo guarda sus papeles (Permiso de Circulación, Revisión Técnica, SOAP, etc.), abre su ficha pública desde un chip NFC —pegado al parabrisas o de llavero— y, en el plan Flotas, registra quién lo usa con un PIN.
Uso particular es gratis con 1 vehículo, con TapCar+, el plan de pago por vehículo al año; Flotas se cobra por vehículo en UF. Hay perfiles aparte para automotoras, aseguradoras y gestorías.
Sitio estático en HTML/CSS/JS, implementado a partir de un diseño de Claude Design.
Páginas
| Página | Archivo | Contenido |
|---|
| Inicio | index.html | Hero con la insignia "Gratis con 1 auto", el titular con rotor de palabra, un solo CTA ("Crear cuenta gratis") más "Ver planes", y la escena Tap; franja de prueba social con el contador (+600 vehículos); "Así de simple" (3 pasos con mini escenas); "¿Para quién es?" (Uso particular, Flotas, empresas del rubro); 4 beneficios; CTA final |
| ¿Cómo funciona? | como-funciona/index.html | Paso a paso en dos fases (puesta en marcha 01–04, día a día 05–08), con los pasos de Flotas marcados; bloque compacto "Con conductores, el mismo Tap controla la operación" (6 ítems de Flotas); enlace a ¿Es legal?; FAQ de 9 preguntas; CTA |
| Planes | planes/index.html | Pills de plan (Uso particular / Flotas). Uso particular: dos tarjetas (Gratis, $0 con 1 vehículo; TapCar+, $5.000 al año por vehículo), franja "Calcula tu TapCar+" con slider 1–10, el total anual y un botón secundario "Empezar con TapCar+", nota de chips con el "desde" del despacho. Bajo las dos pestañas, un desplegable "Ver precios de despacho por región" con la tabla de las 16 regiones (1–50 y 51–100 chips). /planes/#flotas abre directo la pestaña Flotas (¿Cómo funciona? enlaza ahí). Flotas: toggle mensual/anual con el ahorro, sliders de vehículos y cuentas de conductor, formulario sobre 100 vehículos. Franja de empresas del rubro, FAQ de 7 preguntas, CTA |
| Empresas del rubro | socios/index.html | Los tres perfiles en tarjetas cortas (automotoras y aseguradoras con Convenio, gestorías con Envíos), tres pasos para empezar (el tercero, las condiciones, se conversa), FAQ de 4 preguntas y formulario de contacto. Enlazada desde el nav ("Socios"), la tarjeta de empresas del rubro del inicio, la franja de Planes y el footer |
| Términos de uso y privacidad | terminos/index.html | Términos del sitio y cómo trata los datos que se dejan en él; las secciones 6 (datos) y 7 (cookies, ancla #cookies, a la que enlaza el banner) describen Google Analytics y el consentimiento. El servicio tiene sus propios términos, que la app pide aceptar al crear la cuenta según el tipo de cuenta. Enlazada solo desde el footer, no desde el nav |
| ¿Es legal? | legal/index.html | Tabla documento por documento, las cuatro bases normativas, los tres requisitos de validez, qué pasa en un control, referencias oficiales y FAQ de 8 preguntas. Es la página pensada para captar búsqueda: "¿es legal mostrar los documentos del auto en digital?" es una consulta real y poco respondida |
Estructura
.
├── index.html # Home / Landing (autónoma, CSS incrustado)
├── como-funciona/index.html
├── planes/index.html
├── socios/index.html
├── legal/index.html
├── terminos/index.html
├── styles.css # Design system compartido (fuente editable)
├── assets/ # Imágenes publicadas y el script de analítica
│ ├── analitica.js # Google Analytics 4: consentimiento, banner de cookies y eventos
│ ├── chip-llavero.webp # Foto del llavero NFC
│ ├── impulse-ai.webp # Lockup de la matriz, para el footer (3x)
│ └── og-tapcar.png # Tarjeta 1200×630 al compartir el link
├── favicon.svg
├── robots.txt # Bloquea /_design_src/, apunta al sitemap
├── sitemap.xml
├── llms.txt # Resumen del sitio para motores generativos
├── precios.json # Fuente única de las tarifas (publicada, es contrato con la app)
├── api/contacto.js # Función serverless: formularios de flota y de socios -> Resend
├── tools/precios.py # Revisa las cifras del sitio contra precios.json; --generar escribe la calculadora
├── tools/schema.py # Regenera el JSON-LD desde el contenido visible
├── tools/test_contacto.js # Pruebas de la función de contacto, sin red
├── tools/test_analitica.js # Pruebas de assets/analitica.js, con un DOM falso
├── tools/test_html.js # Pruebas del HTML de las seis páginas para la analítica
└── _design_src/ # Archivos originales del diseño y fotos sin procesar
_design_src/ está versionado pero no es parte del sitio: si lo publicas tal cual, esas rutas quedan accesibles. Por eso robots.txt las excluye.
CSS: fuente única e incrustada
styles.css es la fuente editable. El mismo CSS va incrustado dentro del <style> de cada .html para que las páginas funcionen de forma autónoma (abrir con doble clic, sin servidor).
Tras editar styles.css hay que volver a incrustarlo en las seis páginas:
python -c "import io; css=io.open('styles.css',encoding='utf-8').read().rstrip(); [io.open(f,'w',encoding='utf-8',newline='').write(h[:h.index('<style>')+7]+'\n'+css+'\n'+h[h.index(' </style>'):]) for f in ['index.html','planes/index.html','legal/index.html','como-funciona/index.html','terminos/index.html','socios/index.html'] for h in [io.open(f,encoding='utf-8').read()]]"
Editar el <style> de un .html a mano hace que ese cambio se pierda en la siguiente sincronización.
Uso
Abre index.html en el navegador, o sirve la carpeta con cualquier servidor estático:
python -m http.server 4310
This is the beginning of the README. Read the rest at the original. Read the full README ↗
