Getting started

Folder structure

What each folder does, and which ones you will actually edit.

A Next.js project has a lot of files, but you will only work with a few of them. The ones marked you edit this are where nearly all your changes happen.

The full picture

This is the Spa template. Every Vortex template uses the same layout.

spa/your template folder
- public/you edit thisfiles you add: photos, logo image
  - fonts/font files used by the template
  - images/put your photos here
- src/the website itself
  - app/one folder per page
    - page.tsxthe home page
    - layout.tsxwraps every page: fonts, header, footer
    - icon.svgyou edit thisbrowser tab icon (favicon)
    - contact/the /contact page
    - treatments/the /treatments page and its detail pages
    - …the other pages
  - components/building blocks: header, footer, sections, buttons
    - layout/header, footer, logo (Wordmark.tsx)
    - sections/the big blocks pages are made of
    - ui/small pieces: buttons, icons, animations
  - config/you edit thisall main settings
    - site.tsbusiness name, contact, hours, social links
    - assets.tsevery image and its description
    - navigation.tsheader and footer menus
    - seo.tspage titles and descriptions for Google
    - theme.tscolors and fonts (reference)
    - features.tsswitch features on or off
  - data/you edit thisyour content lists
    - treatments.tsservices, prices and detail pages
    - team.tsteam members
    - journal.tsblog articles
    - faqs.tsquestions and answers
    - …other lists, depending on the template
  - lib/helper code (no need to edit)
  - styles/globals.cssyou edit thissite-wide styles and color values
- next.config.tsadvanced Next.js settings
- package.jsonlist of packages and commands
- README.mdshort technical summary
- node_modules/created by npm install. Never edit.

Where do I change…?

I want to change…	Open this file
Business name, phone, email, address	`src/config/site.ts`
Opening hours and social media links	`src/config/site.ts`
The logo	`src/config/site.ts` or `src/components/layout/Wordmark.tsx`
The browser tab icon	`src/app/icon.svg`
Colors	`src/styles/globals.css` and `src/config/theme.ts`
Fonts	`src/app/layout.tsx`
Photos	`src/config/assets.ts` (files go in `public/images`)
Services, prices, team, articles	The matching file in `src/data`
Menu links and the header button	`src/config/navigation.ts`
Page titles for Google	`src/config/seo.ts`
Text on a specific page	The page in `src/app` or a section in `src/components/sections`
Home page sections and their order	`src/app/page.tsx`

The fastest way to find any text

Want to change a sentence you can see on the website but do not know which file it is in? Use VS Code's search:

Press Ctrl + Shift + F (Windows) or ⌘ + Shift + F (Mac).
Type a few words of the sentence exactly as they appear on the website.
Click a result to open the file at the right line.