Torque

About This Template

Torque is a dark-workshop template for auto detailers, performance shops, and specialist garages. Fourteen pages cover a ten-service catalog with detail pages, a before/after gallery, three-tier pricing, a booking form, team, testimonials, a Markdown blog, about, FAQ, careers, and 404. It opens on a tachometer preloader — an SVG gauge with thirteen tick marks, a redline zone, a sweeping needle, and an arc that fills to 100% — which hands off to the hero: the workshop photograph irises open from circle(0%) to circle(150%), then parallaxes while a PRECISION watermark rises behind it on scrub. Race red #CC2210 cuts through chrome grey #C8D0DC on a #09090D background, plus Chrome (light) and Carbon (teal) skins that swap in via a single data-skin attribute on the layout. Custom cursor, Lenis smooth scroll, 48 images optimized to WebP, and Astro View Transitions.

Signature

Torque starts on a gauge, not a spinner. An SVG tachometer draws thirteen tick marks with a red redline zone, sweeps its needle across the dial and fills a #CC2210 arc while a counter climbs to 100%. When it finishes it flags the body, and a MutationObserver in the hero fires the aperture: the workshop photograph opens from clip-path circle(0% at 50% 50%) to circle(150%) in 1.3s of power3.inOut, then settles into a scrubbed parallax with a giant PRECISION watermark rising behind it.

Features

• 14 pages — Home, Services, Service Detail, Gallery, Pricing, Booking, Team, Testimonials, Blog, Post, About, FAQ, Careers, 404
• Tachometer preloader — an SVG gauge with 13 tick marks, redline zone, sweeping needle, filling arc, and a 0–100% counter
• Aperture hero reveal — clip-path circle(0%) expands to circle(150%) once the preloader signals done via MutationObserver
• PRECISION watermark that rises to 4.5% opacity on scrub while the hero image parallaxes at yPercent -20
• Before/after gallery — the after shot sits on top and the before fades in on hover, with category filter buttons (all, detailing, body, performance, mechanical)
• 5 Zod-validated collections — 10 services, 8 gallery pairs, 5 team members, 5 testimonials (JSON) and 6 blog posts (Markdown)
• Service detail pages with price, duration, long description, an itemized includes list, and related services
• Booking form with service selector, preferred date and time-window fields, plus loading and success states
• 3-tier pricing page with a highlighted recommended tier and itemized, no-hidden-fees copy
• FAQ page with 10 questions grouped into 4 categories, powered by an accessible React accordion
• 3 color skins driven by a data-skin attribute on the layout — Midnight Workshop (#09090D), Chrome (#F4F2EF light) and Carbon (#0D1117 with teal #00C4A0)
• Two-part custom cursor — instant dot plus a lerping ring that reacts to interactive elements
• Team page with a full-bleed portrait, bio, specialty label and certification badges per technician; careers page with 3 open roles
• All 48 images optimized to WebP at build time via getImage() and import.meta.glob — no external URLs
• Lenis smooth scroll on the GSAP ticker + Astro View Transitions via ClientRouter with clean ScrollTrigger teardown
• SEO ready — JSON-LD structured data, canonical URLs, Open Graph tags, @astrojs/sitemap, and TypeScript strict mode

Deployment