Documentation

1. Overview

2. Project structure

src/app/templates/fisterra/
├── demo/
│   ├── page.tsx          // the live site (hero, menu, reservations, contact)
│   ├── translations.ts   // all UI text + menu data, in ES and EN
│   └── layout.tsx        // loads the Cinzel / Playfair Display / Montserrat fonts
└── docs/
    └── page.tsx          // this page

public/templates/fisterra/
├── hero_dish.png
├── chef_plating.png
└── restaurant_interior.png

3. Editing text & menus

All copy lives in one file: demo/translations.ts. It exports two objects:

• UI — short interface strings (nav labels, section titles, form labels), each with an es and en version.
• MENUS — the tasting-menu dishes, grouped by language and then by tab (alborada / fisterra / bodega).

// demo/translations.ts
export const MENUS = {
  es: {
    alborada: {
      price: "£125",
      dishes: [
        ["Vieiras de la Isla de Skye", "Entrante", "Láminas finas..."],
        // add or edit dishes here ↑
      ],
    },
  },
  en: { /* same structure, English copy */ },
};

4. Styling

This port uses Tailwind utility classes with inline hex colors (e.g. bg-[#090c10], text-[#c5a880]) directly in demo/page.tsx — there is no central CSS variables file like the original HTML version.

The palette used throughout:

To rebrand, find-and-replace these hex values inside demo/page.tsx.

5. Booking form

Open demo/page.tsx and find the handleSubmit function. The simplest option is Formspree:

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const form = new FormData(e.currentTarget);
  await fetch("https://formspree.io/f/YOUR_FORM_ID", {
    method: "POST",
    body: form,
    headers: { Accept: "application/json" },
  });
  setSummary({ name: ..., guests: ..., date: ... });
  setShowModal(true);
};