Tourism Website Template

About this tourism website template

The 8 pages you get

Home /

The ascent: the haul-rope set-piece, the line in numbers, the seasons, and the ticket close.

Timetable & operating status /timetable/

Departures and current running state — the page riders check before they leave the house. Driven by typed arrays.

Tickets & booking /tickets/

Fares by type and season, with a working enquiry form. The commercial page.

Safety & wind holds /safety/

Why the line stops, what a hold means, and what happens next. The page that turns a cancelled ride into a returning visitor.

Line journal /blog/

A wired content collection for operating notes — add an .mdx file and it appears here and in the sitemap.

Two worked articles /blog/…

The autumn rope scan, and what a wind hold actually is — long-form posts carrying the full editorial component set.

404 /404

"Not on the rope" — designed in the same language, carrying the navigation.

What is in the build

• Continuous haul-rope path with six cabins positioned by arc length, swaying at each tower — one GSAP-driven set-piece behind the whole document
• Scroll-linked altimeter reading valley-to-summit height as you read
• Departures, routes, cabins, seasons, tickets, timetable and wind holds — nine typed arrays in src/data, so operations change without touching a layout
• A working enquiry form on the tickets route
• Painted-valley imagery with the cableway composited in, applied to all six images so the photography reads as one commission
• Familjen Grotesk self-hosted as the single family — one voice, no font request
• Vitest and Playwright suites included in the repository

The design decision

Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.

The world

An alpine cableway operator, valley 1,046 m to Firnjoch 2,864 m. It talks in spans, rope diameter, grip tests and wind holds.

The mechanic

The page is the cable. One continuous haul-rope path sits fixed behind the document with six cabins placed on it by arc length, so they hang at fixed intervals and move as one, swaying at each tower. Scroll is ascent, and the altimeter reads it.

Loud channel

Moving set-piece

Imagery. Painted valley, cableway composited

Type & palette

Familjen Grotesk

#eef1f4 #1e2b38 #d2541f

Who it is for

Built for cableways, funiculars, mountain railways, chairlifts and lift-served attractions — and the agencies serving alpine tourism. It suits an operator whose credibility rests on engineering and safety as much as on the view. A generic tourism template makes you look like a booking widget; this one makes you look like infrastructure.

Under the hood

• Astro 7 · static output, zero client framework
• Tailwind 4 · one @theme block holds the palette
• MDX content collections for the blog
• GSAP + Lenis for the scroll work, reduced-motion aware
• Self-hosted woff2 — no Google Fonts request
• Sitemap, canonicals and per-route meta wired
• Vitest + Playwright suites in the repository
• Zero third-party requests · strict CSP-ready

How to get started

1. 01 Accept the repository invite and clone it.
2. 02 Run npm install, then npm run dev.
3. 03 Replace the content in src/data/ with your own — that is where the brand, the copy and every list live.
4. 04 Swap the images in public/images/ and the palette in the @theme block.
5. 05 Run npm run build and deploy dist/ anywhere static.

Questions