Bella Vista

Bella Vista is a fine-dining restaurant template for trattorias, bistros, and chef-led kitchens. Eight routes cover the homepage, a full menu with four courses and sixteen dishes, a filterable photo gallery with lightbox, the story page, contact with a tabbed reservation form, a 404, and two live theme-preview routes. Three complete color themes, Classic burgundy, Coastal navy and terracotta, Urban charcoal and olive, swap through a single theme prop on the layout, with a dark mode on top. The hero runs a twenty-second Ken Burns loop under a three-stop gradient with staggered entrance animations. Built on Astro 5 and React 19 with CSS Modules and a full design-token system, no animation library required, and fifty-four real photos optimized to WebP via sharp.

What’s inside

• 8 routes, Home, Menu, Gallery, About, Contact, 404, plus /demo/coastal and /demo/urban live theme previews
• 3 complete color themes switched by one theme prop, Classic burgundy #8B2635, Coastal terracotta #D4755E, Urban olive #6B8E4E
• Dark mode layered on top via data-mode=“dark”, overrides backgrounds to #1A1A1A / #242424 without touching the theme
• Ken Burns hero, 20s infinite-alternate CSS keyframe scaling the background 1 → 1.1 under a three-stop dark gradient
• Full menu section, 4 courses (Antipasti, Pasta, Secondi, Dolci), 16 dishes with prices, photos and V/GF dietary badges
• Filterable gallery, 12 captioned images with All / Interior / Food / Team filters and a lightbox with wrap-around prev/next navigation

The signature

The hero pairs a slow Ken Burns loop with a choreographed entrance. A 20-second infinite-alternate CSS keyframe scales the background photo from 1 to 1.1 while translating it -1% on both axes, so the image never sits still, all under a three-stop dark gradient (0.4 → 0.6 → 0.7 black) that keeps the type readable. On top, one fadeInUp keyframe cascades through the block: the content wrapper at 0.3s, the tagline at 0.5s, the Playfair headline with its Great Vibes accent line at 0.7s, the subtitle at 0.9s and the CTA pair at 1.1s, pure CSS, no animation library shipped to the browser.

See it live

The demo is public: https://fpsjago.github.io/restaurant-template-pro/. 8 pages, built with Astro 5, React 19, TypeScript, CSS Modules.