Torque

Sobre Este Template

Torque es una plantilla dark de taller para detailers, talleres de performance y garajes especializados. Catorce páginas cubren un catálogo de diez servicios con páginas de detalle, galería de antes/después, precios en tres niveles, formulario de reserva, equipo, testimonios, blog en Markdown, about, FAQ, careers y 404. Arranca con un preloader de tacómetro — un medidor SVG con trece marcas, zona de redline, aguja que barre y un arco que se llena hasta 100% — que da paso al hero: la fotografía del taller se abre como un diafragma desde circle(0%) hasta circle(150%) y luego hace parallax mientras una marca de agua PRECISION sube por detrás con scrub. El rojo de competición #CC2210 corta el gris cromo #C8D0DC sobre un fondo #09090D, más los skins Chrome (claro) y Carbon (teal), que se activan con un solo atributo data-skin en el layout. Cursor custom, smooth scroll con Lenis, 48 imágenes optimizadas a WebP y Astro View Transitions.

Firma

Torque arranca con un medidor, no con un spinner. Un tacómetro SVG dibuja trece marcas con zona de redline en rojo, barre la aguja por el dial y llena un arco #CC2210 mientras un contador sube hasta 100%. Al terminar marca el body, y un MutationObserver en el hero dispara la apertura: la fotografía del taller se abre desde clip-path circle(0% at 50% 50%) hasta circle(150%) en 1.3s de power3.inOut y luego se asienta en un parallax con scrub, con una marca de agua gigante PRECISION subiendo por detrás.

Características

• 14 páginas — Inicio, Servicios, Detalle de Servicio, Galería, Precios, Reservas, Equipo, Testimonios, Blog, Post, About, FAQ, Careers, 404
• Preloader de tacómetro — medidor SVG con 13 marcas, zona de redline, aguja que barre, arco que se llena y contador 0–100%
• Hero con revelado tipo diafragma — clip-path circle(0%) se expande a circle(150%) cuando el preloader avisa vía MutationObserver
• Marca de agua PRECISION que sube hasta 4.5% de opacidad con scrub mientras la imagen del hero hace parallax a yPercent -20
• Galería de antes/después — la foto after va arriba y la before aparece en hover, con botones de filtro por categoría (all, detailing, body, performance, mechanical)
• 5 colecciones validadas con Zod — 10 servicios, 8 pares de galería, 5 miembros del equipo, 5 testimonios (JSON) y 6 posts de blog (Markdown)
• Páginas de detalle de servicio con precio, duración, descripción extendida, lista detallada de qué incluye y servicios relacionados
• Formulario de reserva con selector de servicio, fecha preferida y franja horaria, más estados de loading y success
• Página de precios en 3 niveles con nivel recomendado destacado y copy detallado sin costes ocultos
• Página de FAQ con 10 preguntas agrupadas en 4 categorías, con un acordeón accesible en React
• 3 skins de color que se activan con un atributo data-skin en el layout — Midnight Workshop (#09090D), Chrome (#F4F2EF claro) y Carbon (#0D1117 con teal #00C4A0)
• Cursor custom de dos piezas — punto instantáneo más un anillo con lerp que reacciona a los elementos interactivos
• Página de equipo con retrato a sangre, bio, etiqueta de especialidad y badges de certificación por técnico; página de careers con 3 vacantes abiertas
• Las 48 imágenes se optimizan a WebP en build vía getImage() e import.meta.glob — sin URLs externas
• Smooth scroll con Lenis sobre el ticker de GSAP + Astro View Transitions vía ClientRouter con teardown limpio de ScrollTrigger
• Listo para SEO — datos estructurados JSON-LD, URLs canónicas, tags de Open Graph, @astrojs/sitemap y TypeScript en modo estricto

Despliegue