Vineyard and Winery Estate Website Template

Verane is a private vineyard estate and winery retreat, established 1874, rendered as a single dark editorial page. It sells three things in sequence: a place, a room, and an experience — and the layout is arranged so a visitor can decide about all three without leaving the page.

The palette is near-black with champagne-gold accents, which is an unusual choice for hospitality and a deliberate one. Most estate sites are bright and sunlit; this one reads like an evening, which suits a property whose product is a stay rather than a day visit.

It ships as a Next.js 15 project and is forkable on the Pro and Max plans. The live preview is public, so you can scroll the real thing before deciding.

Six anchors, in the order a guest decides

The page is composed in src/app/page.tsx as six anchored sections, each with a section id so the navigation can jump between them: hero, about, rooms, experience, journeys, contact.

The hero is a video that clip-path expands on load, opening from a shape into the full frame — the visual equivalent of a door swinging open. About establishes the estate and the year. Rooms is the commercial heart of the page: an attribute-card carousel of stays and villas, each with tags, a badge, and hard details like bed count, bath count and square footage. Experience covers the cellar and spa amenities. Journeys presents curated vineyard experiences as reveal cards — harvest at dawn, blending your own vintage — and contact closes with a booking call to action.

What makes this useful as a starting point is that the rooms section is structured data, not decorative text. Each room carries a title, a tag string, an optional badge such as a guest favorite marker, and an array of icon-labelled details. Swapping in your own inventory is filling that array, and the layout absorbs it.

What is in the section list

The template keeps its structure in a small number of reusable, prop-driven components rather than one component per section, which is why the same layout can hold four rooms or eight:

• Hero — a clip-path expanding video with the estate wordmark
• About — the estate story and its founding year
• Rooms — attribute cards for stays and villas with beds, baths and square footage
• Experience — cellar, spa and amenity presentation
• Journeys — a bento of reveal cards for curated vineyard experiences
• Contact — the booking call to action and enquiry details
• Grid or carousel component — the same content renders as a grid or a swipeable rail depending on the section
• Parallax scroll and text animation wrappers shared across all of the above

Design notes

Near-black backgrounds with champagne-gold accents give the page its evening character. Gold is used sparingly — rules, small caps labels, hover states — so it stays a highlight rather than becoming a theme. Section headings pair a small tag word with a large title and a supporting paragraph, a rhythm that repeats down the page and makes each section feel like a chapter opening.

Motion is restrained but constant: Lenis smooth scrolling, parallax on the section imagery, and Motion (the Framer Motion 12 line) driving reveals. Embla powers the room and journey carousels, and controls are exposed through a shared carousel hook so the arrows behave the same way everywhere.

A StyleProvider component centralizes the theme, which means the gold and the black are token decisions. Changing the estate from evening to daylight is a token edit plus new photography, not a rebuild.

The stack under the hood

Standard modern Next.js, with a Tailwind v4 theme and a small set of shared primitives that most sections reuse.

• Next.js 15 with the App Router
• React 19 and TypeScript
• Tailwind CSS v4
• Motion (Framer Motion 12) for reveals and parallax
• Lenis for smooth scrolling
• Embla Carousel for rooms and journeys
• lucide-react for the detail icons

Adapting it with a Siteglade prompt

The fastest path is to keep the six-section skeleton and replace the inventory. Give the agent your rooms, your experiences and your story, and let it fill the existing components.

Try something like: "Rebuild this for Hollow Oak Farm, a restored 1920s farmhouse retreat in the Hudson Valley with four rooms and a barn suite. Keep the six sections. Rewrite the about section around the restoration rather than a vineyard, change Journeys to four experiences: foraging walk, wood-fired supper, cider pressing and a winter fire circle. Replace the champagne gold with a deep copper and keep the dark background."

Once the content is in, refine with follow-ups: ask for a rate line on each room card, for the contact section to collect arrival and departure dates, or for the journeys bento to become a simple three-column grid if you only have three experiences. Clicking directly into the preview with the visual style editor is often faster than describing a spacing change.

What to change first

Hospitality pages live or die on whether a guest can picture the stay, so start with the concrete things:

• The room inventory — names, tags, badges, beds, baths and size
• The hero video, which sets the entire mood before a word is read
• The journeys, which are what separate an estate page from a hotel listing
• The contact section: make it obvious how a booking actually happens
• The founding date and the story in about — if the estate is new, say something else true rather than borrowing a heritage line

Last updated: 2026-08-16