Skip to content
VortexNext.js
Get Vortex

Make it yours

Text & content

Edit headings, paragraphs, services, prices, team members and articles.

Text on your website comes from two places:

  • Content lists in src/data: things that repeat, like services, prices, team members, articles, FAQs and reviews.
  • Page text in src/app and src/components/sections: headings and paragraphs written for one specific spot.

Edit a content list

Each file in src/data holds a list of items. In the Spa template, treatments.ts holds the treatment menu:

src/data/treatments.ts
{  id: "radiance-facial",  name: "Radiance Facial",  category: "facials",  type: "signature",  duration: 75,  price: 115,  description: "Our personalised facial: consultation, double cleanse…",},

Change the name, price, duration or description and save. The menu, filters and prices update everywhere. Numbers (like price and duration) are written without quotes.

Add an item

  1. Copy an existing item

    Select one whole item, from its opening { to its closing },, copy it and paste it right below.

  2. Give it a unique id

    Change id (or slug) to something new, lowercase with dashes, like "hydrating-facial". No two items can share the same id.

  3. Edit the details and save

    Update the text and numbers. The new item appears in the list straight away.

Remove an item

Delete the whole item, from { to },. If other items mention it (for example in a “related” list), remove it from there too. Search the project for the item's id with Ctrl + Shift + F to find every mention. VS Code also underlines many leftover references in red.

Items with their own page

Some items have a full detail page, such as each team member at /our-team/camille-laurent or each article in the journal. These pages are created automatically from the list: add a team member or article and its page exists; remove it and the page is gone. The slug becomes the end of the web address.

Edit text on a page

Headings and paragraphs that appear once are written directly in the page files. To find them:

  1. Copy a few words of the text from your browser.
  2. In VS Code, press Ctrl + Shift + F (⌘ + Shift + F on Mac) and paste.
  3. Open the result and edit the words.

Text inside a page file looks like this:

src/app/facials/page.tsx
<p className="mt-8 max-w-lg text-[1.1rem] leading-relaxed text-ink/85">  Our skincare facials are calm, personalised treatments shaped by a short consultation.</p>

Change only the words between the tags (between > and </p>). Leave the parts inside the angle brackets alone; they control the styling.

The privacy policy and terms pages are starting points with placeholders in square brackets, like [Business legal name]. Search for [ in those files and replace each placeholder.