Making it yours — Ciketo AI Prompts

After the last prompt you have the Ciketo 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
Company name, browser title, description, site address	src/content/site.json → site
Menu, header button, the clock’s language, contact details, social links, footer	src/content/site.json
Sections several pages share: the client intro, the facts, How it works, Industries, the quote form, the call to action	src/content/site.json (clientsIntro, facts, howItWorks, industries, quoteForm, cta)
The copy of each page	src/content/pages/<page>.json (home.json, about.json, …)
Services, trade lanes, posts, testimonials, clients, legal pages	src/content/collections/<name>.json

Change the text between the quotes and keep the field names. Or ask your tool: “Change the company name to Northline Freight and the contact email to hello@northline.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-mails (hello@example.com, support@example.com), phone number and address are placeholders: replace them all, and the number behind “Call Customer Service” in the call to action (cta.secondary.href, a tel: link) too.

In the footer, {year} in the copyright line becomes the current year. The footer’s Services column (footer.services.links) is its own list: update it when you rename, add or remove a service.

The header clock shows each visitor’s own time; clock.locale sets how the date is written ("en-US": “October 3, 2026”, "en-GB": “3 October 2026”).

Services and trade lanes

Each service in collections/services.json has:

• slug — its address (/services/ocean-freight), unique; title, summary (the lists, next to the title on its page, and its search description) and image (the wide photo at the top of its page, also in the lists);
• about — the block under the photo: a title, a text and four facts (a value and a label each);
• benefits — “Our solutions”: a title and four items, each with a title and a description;
• lanes — a title, a text and items, the slugs of the trade lanes to show, in that order.

Each lane in collections/lanes.json has a slug, a title (“Jebel Ali → Rotterdam”), departure and arrival ports, transit (the chip on its card), average (the chip in the Home hero), frequency, a description and an image. A lane has no page of its own: it shows on every service that lists it, and the first lane is the “New Lane” card in the Home hero.

To add a service, copy one, give it a new slug and change the fields; it appears on Home, on the Services page and gets its own page. Add it to the quote form’s shipping methods (quoteForm.fields.method.options in site.json) and the footer if you want it listed there. If you delete a lane, take its slug out of the services’ lanes.items too.

Posts, testimonials, clients and legal pages

• Posts (collections/posts.json): slug, title, excerpt, image, category (any words — posts with the same category are listed under each other as “Other Posts”), date (2026-08-26, shown as “Aug 26, 2026”) and the article body as blocks (see below). The Blog shows six at a time as you scroll; Home shows the first three.
• Testimonials (collections/testimonials.json): slug, title (the quote’s headline), quote, name, role, company, photo (a square portrait) and rating out of 5. Home shows them all; keep to a handful.
• Clients (collections/clients.json): slug, name and logo (an SVG). Their logos move across Home and About; the first four names appear in the Home hero.
• Legal pages (collections/legal.json): slug (/legal/privacy-policy), title, updated (the “Last Updated” date) and the body. Link a new one from the footer (footer.legal in site.json).

Blocks are { "type": "paragraph", "text": "…" } and { "type": "heading", "level": 2, "text": "…" } (level 2 or 3): the posts use paragraphs, the legal pages headings and paragraphs. Ask your tool if you prefer: “Add a post about customs paperwork 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 2400 × 1600). Put your photos in public/images/ with the same file names — home-hero.jpg, service-ocean-freight.jpg, lane-singapore-rotterdam.jpg, post-how-to-choose-the-right-shipping-method.jpg … — and they replace the placeholders. Keep the proportions close to the placeholder’s so the crops look right. Good free sources: Unsplash, Pexels.

The client logos are SVG files in public/images/ (client-northvale.svg …): replace them with your clients’ logos, or remove the clients you don’t want.

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

Logo and icon

The logo is drawn 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 over 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-orange, --color-soft …), the font, text styles and spacing. Orange is the accent of labels, the current menu item, step numbers and button hovers, so changing it gives the site your brand colour: “Change –color-orange to #1F6FEB.” Keep text readable on its background — a slightly darker accent works better for the small orange labels. 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 Section label and title, then Post cards in three columns”) — so it matches the rest.