Skip to content
codexa

Websites · React

Family winery

Elegant winery site with the current releases and prices, the vineyard year, tastings, cellar door hours and bookings.

Family winery starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A site for a vineyard or small winery: current wines with bottle prices, the story of the vineyard, a year in the vines, tasting experiences, cellar door hours and a tasting booking form. All content lives in src/site.ts.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/site-winery

src/types.ts
src/types.ts
/** The shape of src/site.ts: every word, colour and section of this site lives there. */import type { IconName } from "./Icon"; export type Link = { label: string; href: string }; export type Visual =  | { type: "tiles"; tones: string[]; caption?: string }  | { type: "mock"; title: string; rows: { label: string; value: string; tone?: string }[]; footer?: string }  | { type: "card"; tone: string; title: string; lines: string[] }  | { type: "none" }; export type Section =  | { kind: "hero"; variant: "split" | "center" | "editorial"; eyebrow?: string; title: string; text: string; primary: Link; secondary?: Link; visual: Visual; note?: string }  | { kind: "features"; id?: string; eyebrow?: string; title: string; text?: string; columns?: 2 | 3 | 4; items: { title: string; text: string; icon: IconName }[] }  | { kind: "split"; id?: string; eyebrow?: string; title: string; text: string; bullets: string[]; visual: Visual; reverse?: boolean }  | { kind: "menu"; id?: string; eyebrow?: string; title: string; text?: string; groups: { name: string; items: { name: string; text?: string; price: string }[] }[] }  | { kind: "pricing"; id?: string; eyebrow?: string; title: string; text?: string; plans: { name: string; price: string; period?: string; text: string; features: string[]; featured?: boolean; cta: Link }[] }  | { kind: "gallery"; id?: string; eyebrow?: string; title: string; text?: string; items: { title: string; caption?: string; tone: string }[] }  | { kind: "projects"; id?: string; eyebrow?: string; title: string; items: { title: string; tag: string; year: string; tone: string }[] }  | { kind: "quotes"; id?: string; eyebrow?: string; title: string; items: { quote: string; name: string; role: string }[] }  | { kind: "stats"; id?: string; items: { value: string; label: string }[] }  | { kind: "steps"; id?: string; eyebrow?: string; title: string; items: { title: string; text: string }[] }  | { kind: "team"; id?: string; eyebrow?: string; title: string; items: { name: string; role: string; tone: string }[] }  | { kind: "timeline"; id?: string; eyebrow?: string; title: string; items: { period: string; title: string; text: string }[] }  | { kind: "faq"; id?: string; eyebrow?: string; title: string; items: { q: string; a: string }[] }  | { kind: "products"; id?: string; eyebrow?: string; title: string; text?: string; currency: string; items: { name: string; price: number; category: string; tone: string; text: string; badge?: string }[] }  | { kind: "hours"; id?: string; eyebrow?: string; title: string; text?: string; rows: { day: string; time: string }[]; address: string; phone?: string; email?: string }  | { kind: "cta"; id?: string; title: string; text: string; primary: Link; secondary?: Link }  | { kind: "contact"; id?: string; eyebrow?: string; title: string; text: string; fields: ("name" | "email" | "phone" | "date" | "guests" | "company" | "message")[]; button: string }; export type Site = {  brand: string;  nav: Link[];  navCta?: Link;  sections: Section[];  footer: { text: string; columns?: { title: string; links: string[] }[]; legal: string };};

Remix

Remix this template

Describe what to change and the agent starts from Family winery's files. The box is already started for you: finish “Start from Family winery and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

All templates

Build on Family winery

Create a free account, start from this template, and ask the AI agent to turn it into your app.