Making it yours — Titen AI Prompts

After the last prompt you have the Titen site with its demo text and grey placeholder photos. Everything a visitor reads lives in src/content/, so most changes are edits to text files — or a sentence to your AI tool.

Text

What	Where
Studio name, browser title, description, site address	`src/content/site.json` → `site`
Menu, header button, search labels, contact details, social links, footer, the project form	`src/content/site.json`
The copy of each page	`src/content/pages/<page>.json` (`home.json`, `about.json`, …)
Sectors, projects, services, posts, testimonials	`src/content/collections/<name>.json`
Team and awards	`src/content/pages/about.json` → `team`, `awards`

Change the text between the quotes and keep the field names. Or ask your tool: “Change the studio name to Northgate Architects and the contact email to hello@northgate.com in site.json.” Set site.url to your domain before you publish — the sitemap and share links are built from it. The demo’s e-mail (contact@example.com), phone and addresses are placeholders; “Book a call” points to https://calendly.com/ — use your own booking link.

In the footer, {year} in the copyright line becomes the current year. In pages/category.json, {category} becomes the sector’s name (“Residential Projects”).

Projects and sectors

Each project in collections/projects.json has:

slug — its address (/projects/urban-wellness-spa), unique; title, location, year;
category — the slug of its sector in collections/categories.json (residential, hospitality, commercial);
image (cards and the cover) and summary (cards, the cover and the search);
the story, top to bottom: intro (a text, an image and a gallery of three), story (an image, a text and a wide image), details (two texts and a gallery of three) and closing (one or two parts, each a text and a wide image).

To add a project, copy one, give it a new slug and change the fields. It appears on Projects and its sector’s page, gets its own page, joins “Other Projects” under the projects of the same sector, the header search and the sitemap. The first seven projects show on Home; the seventh is the large featured card.

A sector is a slug and a title. Its page sits at the top level (/residential), and the footer’s Work column lists every sector. To add one, add it to categories.json and give some projects its slug.

Services, posts and testimonials

Services (collections/services.json): slug, number (“01”), title, overview, image, points (the key points), about, and included — the “What’s included” text as blocks (see below). The first four show on Home.
Posts (collections/posts.json): slug, title, excerpt, image, category (a label), author, date (2024-03-12), and the article body as blocks. Under a post, “More posts” shows others of the same category.
Testimonials (collections/testimonials.json): quote, name, photo and an optional rating (4.4); without a rating only the star shows. The first five play in the Home hero.

Blocks are { "type": "heading", "text": "…" }, { "type": "paragraph", "text": "…" } (with an optional bold "highlight" before the text) and { "type": "list", "items": [[…blocks…], …] }. Ask your tool if you prefer: “Add a post about adaptive reuse to posts.json, with the same fields as the others.”

Photos

The pack uses placeholders; each shows the size its photo is designed for (for example 1920 × 1080). Put your photos in public/images/ with the same file names — project-urban-wellness-spa.jpg, service-architectural-design.jpg, team-elliot-carter.jpg … — and they replace the placeholders. Keep the proportions close to the placeholder’s so the crops look right. Good free sources: Unsplash, Pexels.

In a chat builder, upload the photos and tell the tool which file names to give them.

Videos

Two videos play on the site, each with a src and a poster (the picture shown before it plays):

Home hero: hero.video in pages/home.json — /videos/home-hero.mp4 under a dark cover. The demo’s clip is a free Magnific video that can’t be passed on, so it isn’t in the pack: until you add a file at public/videos/home-hero.mp4, the poster shows. Its credit (“Designed by Magnific”) is what Magnific’s free license asks for — delete credit when you use your own clip.
About: video in pages/about.json — a Pexels clip, played from Pexels’ servers.

Replace src with your own clip (a file in public/ or a link to an MP4) and poster with its first frame. Keep them short and small: they play muted and in a loop.

The brochure

“Download our brochure” (Home) and “Download Brochure” (every service page) link to /brochure.pdf. Put your own PDF in public/brochure.pdf, or change the links in pages/home.json and pages/service.json.

Logo and icon

The logo is one SVG path in the Logo component (header and footer, in the current text colour). Ask your tool to replace it with your own SVG: “Use public/my-logo.svg as the Logo, white on the dark covers and in the footer.” The browser tab icon is public/icon.svg.

Colours, fonts and sizes

Prompt 1 set up the design tokens: colours (--color-ink, --color-background, --color-accent, --color-orange …), the font, text styles and spacing. The accent is the clay colour of buttons and hovers, so changing it gives the site your brand colour: “Change –color-accent to #2F6BFF.” Keep the text styles’ sizes per breakpoint unless you want a different rhythm.

Pages

To remove a page, delete it and ask your tool to take it out of the menu, the footer and the sitemap. To add one, write a prompt in the style of the page prompts — list its sections and reuse the components (“a Page title, then Project cards in three columns”) — so it matches the rest.