GAC Caribbean — User Manual

For: Content managers and administrators System: Admin Panel (at /admin) Skill level required: No technical experience needed

Setting Up a New Instance

If you are setting up a new dealer website (a separate instance for a different country or territory), an onboarding guide is available to help you collect all the information the development team will need.

👉 Open the New Instance Onboarding Guide (opens in a new tab)

The guide walks through everything required: dealership identity, contact details, branding, vehicle catalog, page content, and the go-live checklist. It also includes a Download (.pdf) button to export a fillable version you can complete offline and send to the team.

Table of Contents

1. Getting Started
2. Admin Panel Overview
3. Site Configuration
   • 3a. Cache Refresh
   • 3b. Global WhatsApp Button
   • 3c. Favicon
   • 3d. Custom Price Display Format
4. Navigation
5. Home Page Banners
6. Vehicle Catalog
7. Vehicles
   • Duplicating a vehicle
   • Tab 5 — Interior & Safety
   • 7a. International Dealers
8. Articles (News & Publications)
   • 8a. Lead Pages
9. Exterior Colors
10. Interior Colors
11. About Us
12. Warranty Page
    • 12a. Translations
13. Tips & Common Tasks
14. Sync
    • 14a. Form Protection
15. Troubleshooting
16. Transactional Emails
17. GDPR & Cookie Consent
18. Analytics
    • 18a. Dashboard
    • 18b. Data Source Toggle
    • 18c. Data Retention
19. Application Architecture (Developer Reference)
    • 19a. Layer Overview
    • 19b. Example — Contact Form Submission
    • 19c. Example — Vehicle Model Page
    • 19d. Adding a New Feature

1. Getting Started

Accessing the Admin Panel

The Admin Panel is the control centre for all website content. To access it:

1. Open your web browser
2. Navigate to your website address followed by /admin Example: https://gac.sx/admin
3. You will be redirected to the login page automatically

Logging In

Login page

1. Enter your Email address
2. Enter your Password
3. Click Sign In

If you do not have login credentials, contact your system administrator to have an account created for you in Auth0.

Resetting Your Password

If you have forgotten your password:

1. Click "Forgot password?" on the login page
2. Enter your email address and click "Send Reset Link"
3. Check your inbox for a password reset email
4. Follow the link in the email to set a new password

Signing Out

Click Sign out in the top-right corner of the admin panel (in the top bar, next to your name). It is visible on every admin page.

2. Admin Panel Overview

Once logged in, you will see the Admin Panel. It has two main areas:

Admin panel layout

Dashboard

Settings

Site Config

Navigation

Catalog

Banners

Warranty

About Us

Content

Articles

Vehicles

Colors

Exterior

Interior

Tools

Analytics

Sync

Manual

A

Edit

Edit

Edit

Key concepts

The Save Changes button

Every editable page has a Save Changes button. Changes only go live after you click it.

There is no "Draft" step. Clicking Save Changes publishes your edits immediately.

3. Site Configuration

What it controls: Contact details, currency, SEO settings, site name, and maintenance mode.

How to open it

1. Click "Site Config" in the left sidebar under Settings

Fields explained

Localisation

Changing this setting affects every place a price is displayed — the vehicle model hero banner and any price labels on the site. The available currencies are:

If you need a currency not in this list, ask your developer to add it to src/lib/currencies.ts — all other parts of the site pick it up automatically.

Contact Information

What is a hex color code? It is a # followed by 6 characters (letters A–F and numbers 0–9). You can find hex codes at htmlcolorcodes.com.

Site Identity

Maintenance Mode

Global WhatsApp Button

Controls the floating WhatsApp button shown across all public pages. See Section 3b for full instructions.

How to update Site Configuration

1. Click into any field and type the new value
2. Click Save Changes

3a. Cache Refresh

The Refresh Content Cache panel sits at the top of the Site Config page. Use it whenever uploaded images, logos, or other media are not appearing on the live website.

When to use it

How to refresh the cache

1. Click Site Config in the left sidebar
2. Find the Refresh Content Cache panel at the top of the page
3. Click the Refresh Cache button
4. Wait for the spinner to finish — this usually takes 5–15 seconds
5. A green confirmation message shows how many pages were refreshed (e.g. Cache cleared and 12/12 pages pre-warmed)
6. Reload the live website — the updated content should now appear

Note: The cache refreshes automatically when you click Save Changes on most pages. You only need to manually refresh if changes are not appearing after saving, or after uploading assets directly through Sanity Studio.

3b. Global WhatsApp Button

What it controls: A floating green WhatsApp button that appears in the bottom-right corner of every public page (except vehicle model pages). Visitors can tap it to open a WhatsApp conversation with a pre-filled message.

Fields explained

Number format tip: Do not use spaces, dashes, or brackets in the number — use digits only with a + country code prefix, e.g. +17215550100 not +1 (721) 555-0100.

Enabling the button

1. Open Site Config from the left sidebar
2. Scroll down to the Global WhatsApp Button section
3. Click the Disabled button — it turns green and reads Enabled
4. Optionally enter a custom WhatsApp number (leave blank to use the Contact Telephone number)
5. Optionally enter a custom pre-filled message (leave blank for the default message)
6. Click Save Changes

Disabling the button

1. Open Site Config
2. Scroll to Global WhatsApp Button
3. Click the Enabled button — it turns grey and reads Disabled
4. Click Save Changes

Where the button appears

The vehicle-specific WhatsApp button on each model page is separate and is not affected by this setting. It uses the vehicle model name in its message and is always active regardless of the global toggle.

3c. Favicon

What it controls: The small icon shown in the browser tab, browser bookmarks, and on mobile home screens when a visitor saves the site.

How to upload a favicon

1. Open Site Config from the left sidebar
2. Scroll to the Site Identity section
3. Click Upload next to the Favicon field
4. Select a PNG, ICO, or SVG file from your computer
5. The image must be 512 KB or smaller — if it is larger, the upload will be blocked with an error message
6. A 32 × 32 px preview appears immediately
7. Click Save Changes — the new favicon becomes active within a few seconds

Replacing or removing a favicon

• Replace: Click Replace next to the current favicon preview and select a new file
• Remove: Click Remove to clear it — the site falls back to its built-in default icon

Best practice

Tip: If you have a square logo, export it at 32 × 32 px as a PNG with a transparent background.

3d. Custom Price Display Format

What it controls: How vehicle prices appear in the price label on vehicle model pages and the home page slider. By default the site shows Starting from $45,000 using the selected currency symbol. When Custom Price Format is enabled you can replace the currency portion with your own prefix and suffix text.

How to enable it

1. Open Site Config from the left sidebar
2. Scroll to the Localisation section
3. Click the Disabled button next to Custom Price Format — it turns green and reads Enabled
4. Two new fields appear: Prefix and Suffix
5. Fill in your desired text (see examples below)
6. Check the Preview row to see exactly how a price of 45,000 will look
7. Click Save Changes

Fields explained

How the label is built

The price label always starts with Starting from or Only (controlled per vehicle in the Catalog), followed by the formatted price:

Starting from  {Prefix}{number}{Suffix}

Example with Prefix = $ and Suffix = USD:

Starting from $45,000 USD

Example with Prefix = NAf. and Suffix = `` (empty):

Starting from NAf. 45,000

Example with Prefix = `` (empty) and Suffix = ANG:

Starting from 45,000 ANG

Tip: When this setting is off, prices use the standard currency symbol and placement set by the Currency field above (e.g. Starting from $45,000 for USD). Turn it on only when you need a format the currency registry does not produce by default.

Disabling the custom format

1. Click the Enabled button next to Custom Price Format — it turns grey and reads Disabled
2. Click Save Changes — prices revert to the standard currency symbol formatting

4. Navigation

What it controls: The top navigation menu links visible on every page of the website.

How to open it

1. Click "Navigation" in the left sidebar under Settings

The navigation editor

You will see a list of your current nav items. Each row shows the link label and its URL.

Desktop

ModelsAbout GACServiceTechnologyContact

Mobile

Home

Models

About GAC

Service

Technology

Contact

Adding a new nav item

1. Click "Add Nav Item" at the bottom of the list
2. Fill in the fields (see table below)
3. Click Save

Editing a nav item

1. Click "Edit" on the row you want to change
2. Update the fields in the dialog that opens
3. Click Save

Removing a nav item

1. Click the ✕ button on the right of the item
2. Click Save Changes to confirm

Reordering nav items

Click the ↑ or ↓ arrows on the left of each row to move it up or down. Click Save Changes when done.

Nav item fields explained

Adding child links

Each nav item can have sub-links that appear in mobile dropdowns and the desktop hover bar:

1. Click Edit on the parent nav item
2. In the dialog, scroll to the Children section
3. Click "Add Child" and fill in the same fields
4. Click Save

5. Home Page Banners

What it controls: The large hero images and videos that rotate on the home page, plus the main CTA (Call-to-Action) image.

How to open it

1. Click "Home Page Banners" in the left sidebar under Settings

The banner list

You will see a list of existing banners and an Add Banner button:

Desktop — 1920 × 1080 px / resolution 150 dpi

Mobile — 1000 x 1667 px / resolution 72 dpi

Adding a new banner

1. Click "Add Banner"
2. A dialog opens — fill in the fields (see table below)
3. Click Save
4. Click Save Changes on the main page to publish

Editing an existing banner

1. Click "Edit" on the banner row
2. Update the fields in the dialog
3. Click Save, then Save Changes

Removing a banner

1. Click the ✕ button on the banner row
2. Click Save Changes to confirm

Reordering banners

Banners display in the order shown in the list. Click the ↑ or ↓ arrows to move a banner, then click Save Changes.

Banner fields explained

Required fields

Image banner fields

Video banner fields

Optional styling fields

CTA Image

At the bottom of the Banners page there is a CTA Image section. This is the decorative photo shown in the Call-to-Action section on the home page. Click Replace image to upload a new one, then click Save Changes.

6. Vehicle Catalog

What it controls: Which vehicles appear on the website, in what order, and at what price.

Important: A vehicle must first be created in the Vehicles section before it can be added to the catalog.

How to open it

1. Click "Catalog" in the left sidebar under Settings

The catalog list

You will see a list of vehicles currently in the catalog, each showing the vehicle name and its price.

Adding a vehicle to the catalog

1. Click "Add Vehicle"
2. In the dialog, select the vehicle from the dropdown
3. Enter the Price (optional — leave empty to hide the price on the website)
4. Click Save, then Save Changes

Setting or updating a price

1. Click "Edit" on the vehicle row
2. Update the price field (numbers only — no currency symbol or commas)
3. Click Save, then Save Changes

The currency symbol shown next to the price (e.g. $, NAf., €) is controlled by the Currency setting in Site Config, not here.

Removing a vehicle from the catalog

1. Click the ✕ button on the vehicle row
2. Click Save Changes

Removing a vehicle from the catalog does not delete the vehicle. It only removes it from the website listing. You can re-add it at any time.

Reordering the catalog

The vehicles display on the website in the same order as this list. Click the ↑ or ↓ arrows to reorder, then click Save Changes.

Series grouping follows catalog order. The series tabs in the home page vehicle slider and the series sections in the mobile navigation menu are ordered by the first vehicle of each series that appears in this catalog list. For example, if the first Tiggo model appears before the first Himla model, the Tiggo series tab will appear first. To change the series order, move vehicles in the catalog so the desired series appears first.

7. Vehicles

What it controls: Full detail pages for each vehicle model — images, specs, performance data, interior, exterior gallery, banners, colors, and spec sheet downloads.

How to open it

1. Click "Vehicles" in the left sidebar under Content
2. You will see a table of all existing vehicles

The vehicles table

Creating a new vehicle

1. Click "New Vehicle" in the top-right of the page
2. A tabbed form opens — fill in the fields across all tabs
3. Click Save Vehicle when finished
4. Then go to the Catalog section to add the vehicle to the website listing

Editing an existing vehicle

1. Click the ✏ (edit) button on the vehicle row
2. The tabbed form opens with the existing data loaded
3. Edit the desired fields
4. Click Save Vehicle

Deleting a vehicle

⚠️ Warning: Deleting a vehicle is permanent and cannot be undone. First remove it from the Catalog, then delete it here.

1. Click the 🗑 (delete) button on the vehicle row
2. Confirm the deletion in the dialog that appears

Duplicating a vehicle

Use this when you need to create a new vehicle that is similar to an existing one — for example, adding a new trim level or annual refresh that shares most of the same content.

How to duplicate a vehicle:

1. In the Vehicles table, find the vehicle you want to copy
2. Click the ⧉ (copy) button on the right side of the row
3. A confirmation dialog appears — read the message and click Create Copy
4. The new vehicle appears at the top of the table with a modified slug (e.g. tiggo-9-copy-07)
5. Click ✏ Edit on the new vehicle to rename it and update any fields that differ
6. Once ready, go to the Catalog section to add it to the website listing

After duplicating: The copied vehicle is not visible on the website until you add it to the Catalog (Section 6). The slug is automatically set to avoid conflicts — update it in the Basics tab if needed (do this before adding to catalog, since the slug becomes the URL).

Vehicle form tabs

The vehicle form is split into tabs. Click each tab name to switch between sections.

Tab 1 — Basics

Identity and core images.

PDF tip: Only .pdf files are accepted. If your file is larger than 5 MB, compress it first at ilovepdf.com.

Tab 2 — Banners

Hero images and videos shown at the top of this vehicle's detail page. Works the same as Home Page Banners.

1. Click "Add Banner" to add a new hero slide
2. Fill in the fields (same as Home Page Banners — see Section 5)
3. Use the ↑↓ buttons to reorder banners
4. Click ✕ to remove a banner

Tab 3 — Performance

Data displayed in the Performance section of the vehicle page.

Appearance text

Performance figures

Drive Modes

Select which driving modes are available for this vehicle. Each mode appears as a labelled button — click to toggle it on (highlighted) or off. Only the selected modes are shown in the Drive Modes panel on the live vehicle page.

Tip: For most models enable ECO, NORMAL, and SPORT. Add SNOW, MUD, and OFF-ROAD only for AWD or off-road variants (e.g. Tiggo 8, Tiggo 9).

Tab 4 — Design

Side-profile image with interactive hotspot callouts and dimension information.

Appearance text

Main Design Image

Upload the side-profile image of the vehicle. Once uploaded, you can place hotspots directly on it by clicking the image — a numbered pin is placed at the exact point you click.

Adding a design hotspot

1. Upload the design image first
2. Click anywhere on the image to place a new hotspot at that position
3. An edit dialog opens automatically — fill in:
   • Title — e.g. Panoramic Sunroof
   • Description — text shown when the hotspot is clicked
   • Image — optional close-up photo of the feature
4. Click Save
5. Existing hotspots appear as numbered blue pins on the image — click Edit or ✕ to change or remove them

What you see is what visitors see. The editor image uses the same crop and zoom as the live vehicle page, so the pin positions you place here match exactly where they appear on the website.

Removing all hotspots at once

If you need to clear all hotspots and start fresh, click the Clear all button (shown in red next to "Add Hotspot" when at least one hotspot exists). A confirmation dialog will ask you to confirm before removing them all. Click Save Vehicle afterward to apply the change.

Dimensions (all measurements in millimetres)

Tab 5 — Interior & Safety

Appearance / Description Block

This controls the large text overlay that appears on the interior section of the vehicle page — the eyebrow label, the main heading, and an optional subtitle.

If you leave these fields empty, the vehicle page will use built-in fallback text.

Interior Image & Features

Adding an interior feature:

1. Click "Add Feature"
2. Enter the Label and Value
3. Repeat for each feature

Adding interior slider images:

1. Click "Add Slide"
2. Upload an image for that slide
3. Optionally fill in Alt Text (image description for accessibility) and Title (caption displayed on the slide)
4. Repeat for each slide
5. Use the ↑↓ arrows to reorder slides
6. Click ✕ to remove a slide

Safety

Safety Image: Upload the image for the Safety section of the vehicle page.

Safety Features: A text area for listing safety features.

Tab 6 — Colors

Assign which paint and interior trim options are available for this vehicle.

Exterior Colors

1. Click "Add Exterior Color"
2. Select from the dropdown (colors must already exist — see Section 9)
3. Click ✕ next to a color to remove it

Interior Colors

Same process as exterior colors.

If a color you need does not appear in the dropdown, go to Exterior Colors or Interior Colors to create it first.

7a. International Dealers

The International Dealers section powers the public GAC International page (/dealers) — a directory of authorised GAC dealers across the region. Each dealer has its own card with contact details and a View catalog button that opens that dealer's vehicles and prices. Prices can be pulled automatically from the dealer's own website (their Sanity project) or entered by hand.

Note: This section only appears when the international dealer network is enabled for your site (NEXT_PUBLIC_GAC_INTERNATIONAL_ENABLED=true). If you do not see International Dealers in the sidebar, contact your system administrator.

How to open it

Click International Dealers under the Content section in the sidebar.

The International Dealers page: map style, directory settings and the dealer list

The page has four parts, top to bottom:

What visitors see

The public page opens with a hero showing the total number of dealers and countries, followed by the Dealer Directory.

Public dealer page: hero with dealer and country counts, then the directory

Each dealer is a card:

A dealer card with country, name, address, contact links and the View catalog button

Clicking View catalog opens the dealer's vehicles. Each tile shows the vehicle image and name from this site, and the price in that dealer's currency and format. Clicking a tile opens the vehicle's model page on this site.

A dealer's catalog opened as an overlay, prices in the dealer's own currency

Map style

Map style options

Click an option to select it — the choice saves immediately.

Note: The map block on the public page is currently switched off in the site code, so this setting has no visible effect until the development team re-enables it. Dealers without coordinates are still listed in the directory.

Dealer directory settings

Dealer directory settings

Use the Desktop / Mobile tabs at the top to set each device size separately. Every change saves immediately.

The dealer list

The dealer list

Deleting a dealer cannot be undone.

Adding or editing a dealer

Click Add Dealer, or the pencil on an existing row. The same form is used for both.

The Edit Dealer form

Click Save Changes (or Add Dealer) to store the dealer. Cancel discards everything, including any unsaved catalog edits.

Tip: After Get from address finds a location, the result is shown under the buttons. If it picks the wrong spot, adjust the address and try again, or type the coordinates manually.

The dealer's catalog

The Catalog block at the bottom of the form decides which vehicles and prices appear behind the card's View catalog button. Use the Synced / Manual toggle in the top-right of the block to pick the source:

• Synced — prices and price format are pulled from the dealer's own website (their Sanity project). Best when the dealer runs a GAC site built on this same platform.
• Manual — you pick vehicles from this site and type the prices yourself.

Both sets of data are kept. Switching from Manual back to Synced (or the other way) does not delete what you entered in the other mode — it only changes which one the public page uses.

Vehicle names and images always come from this site's own Vehicles, matched by the vehicle's slug (for example aion-es). The dealer only supplies prices.

Synced mode

Catalog block in Synced mode after a successful pull

Pulling the catalog

1. Enter Project ID, Dataset and API Token, then click Save Changes (a new dealer must be saved once before it can pull).
2. Reopen the dealer and click Pull catalog. The button first saves any changes to the three fields above, then connects to the dealer's project.
3. When it finishes, the status line shows when it synced, how many vehicles are shown, and the dealer's currency and format, e.g. Synced 1h ago · 5/5 vehicles shown · GYD · "$ # GYD" · + Duty Free.

What gets copied from the dealer's site:

• Every vehicle in their Catalog, with its price, secondary price, "Starting from" flag and duty-label flag
• Their Currency, Custom Price Format (prefix / suffix) and Secondary Price settings from their Site Configuration

Under the status line each pulled vehicle is listed with this site's image, its name, and the price exactly as it will appear on the card.

Click Save Changes after hiding or showing vehicles — the eye toggles are stored with the dealer.

Note: Pulling replaces the previous synced prices with whatever the dealer's site holds right now. It never changes anything on the dealer's site — the token is read-only.

Manual mode

Click Manual in the toggle. The block changes to a price-format editor and a vehicle table.

Catalog block in Manual mode: price format, Add Vehicle and the vehicle table

Price format works exactly like Site Configuration → Localisation (see 3d. Custom Price Display Format), but applies only to this dealer:

Manual price format fields

Adding vehicles

Click Add Vehicle to open the picker. It lists every vehicle on this site; type in the search box to filter by name, type or series. Click Add on a vehicle to append it to the table. Vehicles already in the table show an In catalog badge.

The Add Vehicle picker

The vehicle table

Manual vehicle table with prices entered

Nothing in Manual mode is stored until you click Save Changes at the bottom of the form.

Dealer-specific model pages

Every vehicle page can be opened in a dealer's context by adding the dealer's slug after the model:

/models/aion-es              → the normal page, this site's price and contacts
/models/aion-es/gac-guyana   → the same page as GAC Guyana's visitors see it

Every tile in a dealer's catalog links to that dealer's page automatically, as long as the dealer has a Slug saved. This applies whether the catalog is synced, manual, or falling back to the site catalog. Dealers created before slugs existed link to the normal model page until you open them and click Save Changes once. On a dealer page:

An unknown dealer slug shows the standard page not found.

How prices appear on the card

• Main price: From $25,990 when Starting from is on, otherwise $25,990
• Secondary price: a lighter second line under the main price when secondary prices are enabled for the dealer and ticked for that vehicle
• Formatting follows the dealer's own currency and prefix / suffix — not this site's

Troubleshooting

Tip: Keep one dealer on Synced and one on Manual in mind as examples: the list's Catalog column tells you at a glance which mode each dealer uses and how fresh its data is.

8. Articles (News & Publications)

What it controls: The news section of the website. Each article can be categorised as News or a Publication.

How to open it

1. Click "Articles" in the left sidebar under Content

The articles table

Creating a new article

1. Click "New Article"
2. Fill in all required fields (marked ✅ below)
3. Write the content using the rich text editor
4. Click Save Article

Editing an article

1. Click the ✏ (edit) button on the article row
2. Make your changes
3. Click Save Article

Deleting an article

1. Open the article by clicking ✏
2. Scroll to the bottom and click Delete Article
3. Confirm the deletion

Article fields explained

Writing article content

The Content field uses a rich text editor with a toolbar:

Toolbar guide:

Toggling "Featured"

Click the star (☆/★) icon in the articles table to toggle featured status directly without opening the article.

8a. Lead Pages

Lead Pages are campaign landing pages at /lp/{slug} — for example /lp/test-drive-week. Each page has its own hero banners, text sections and a custom form. Every submission is stored as a lead and emailed to the addresses configured on that page. Create as many pages as you have campaigns.

How to open it

Click Lead Pages under the Content section in the sidebar.

The Lead Pages list

New Lead Page creates a draft with a starter form (name, email, phone, message) and opens the editor.

Sharing a page

Click the QR icon on a row to open the share dialog.

Share dialog with QR code and public link

• QR code in the house style (GAC badge in the centre). Download QR (PNG, 2400px) saves a print-ready 2400 px version — flyers, showroom stands, event banners.
• Public link with a one‑click Copy button for ads, social posts and emails.
• A yellow note warns when the page is still a draft; publish it before printing anything.

Quick start — launch a campaign in six steps

1. Lead Pages → New Lead Page. A draft opens with a starter form (name, email, phone, message).
2. Settings tab: give it a title and check the slug — this becomes the public address, e.g. /lp/test-drive-week. Add the consent wording.
3. Content tab: add one or two hero banners and a text section that explains the offer.
4. Form tab: adjust the fields. Add a Vehicle picker if the campaign is about a model, a Date for bookings, a Checkbox marked as consent. Watch the live preview.
5. Delivery tab: add the recipient address(es). Turn on the confirmation email and write a short message if you want visitors to get an acknowledgement.
6. Save Changes, switch Published on in Settings, save again, and open the URL from the header to check it. Share the link in your ads, posts and emails.

Duplicate a finished page for the next campaign instead of starting from scratch — everything is copied as a new draft with a -copy slug.

The editor

The editor has four tabs. The header shows the public address, the Published/Draft badge and a red Leads → button that opens this page's leads. Nothing is stored until you click Save Changes in the top-right; the header shows Unsaved changes while edits are pending, and the browser warns if you try to leave without saving. If the server rejects a save (for example a slug already in use), the message appears in the header and the editor jumps to the tab that needs fixing.

Content tab

Content tab: hero banners and text sections

• Hero banners work exactly like Home Page Banners: add, edit, reorder, remove, image or video, call‑to‑action. Up to 12. A page with no banners simply starts with the first text section.
• Text sections appear between the banners and the form, in order. Each has an eyebrow (small red label), heading, a rich-text body (the same editor as About Us: paragraphs, headings, bold, italic, lists), an optional image on the left or right, and a light or dark background.

Form tab

Form tab with the live preview

Top box: the form heading, intro line, submit button label, success heading and message, and an optional redirect URL (when set, the visitor is sent there after submitting instead of seeing the success message).

Fields table: pick a type from the dropdown and click Add field. Each row shows the label, its machine key (used as the column name in emails and CSV), type, a click‑to‑toggle Required / Optional pill and a Width dropdown (Full, 1/2, 1/3, 1/4 of the row on desktop; every field is full width on phones). Arrows reorder; the pencil opens the field editor; the bin removes it. Up to 30 fields.

The field editor

The Live preview on the right renders the real form as visitors will see it. It validates when you press its button but never sends.

Delivery tab

Delivery tab

Settings tab

Settings tab

• Slug — the public address /lp/{slug}. Lowercase letters, digits and dashes; must be unique. Changing it changes the URL, so avoid changing it once a campaign is running. Leads stay attached to the page.
• Published — the on/off switch for visitors.
• SEO title / description — what Google and link previews show.
• Consent text — the sentence next to the consent checkbox.
• Delete this page — takes the page offline. Leads already collected are kept.

What visitors see

The public form

Required fields are marked with a red asterisk; problems are shown under the field. After a successful submission the visitor sees the success message (or is redirected).

Success message

Behind the scenes:

1. The answers are checked on the server against the field list — required fields, email/phone/number/date formats, dropdown options, file type and size. Nothing the visitor sends can change where the email goes.
2. The lead is saved first, with any uploaded files.
3. The lead email goes to the recipients (and CC). The confirmation email goes to the visitor when enabled.
4. The email result is recorded on the lead (sent, or failed with the reason), so a delivery problem never loses a lead.
5. Hidden spam traps and a per‑visitor rate limit run silently. Suspicious submissions are dropped without an error.

What the lead email contains

The lead email

• Subject: {Subject prefix} · {Page title} · {visitor name or email}, e.g. New lead · Test Drive Week · Ana Example.
• Body: page title, submission time, then every answer as a label/value row in form order. Uploaded files appear as links; when the files are small (under 5 MB together) they are also attached.
• Reply‑to: the visitor's email address, so replying from your inbox goes straight to them.
• CC addresses receive an identical copy.
• The confirmation email to the visitor carries your subject and message exactly as typed in the Delivery tab.

Leads

Click the red N leads → button in the list (or the inbox icon under Actions), or Leads → in the editor header.

Leads list

• Search matches any answer; the date pickers filter by submission day. 50 leads per page.
• Email status pill: sent, failed (hover for the reason), pending, skipped.
• Verified pill: Verified means the submission passed the invisible form protection check; Legacy marks leads stored before the check existed; Check off only appears on development sites.
• Click a row (or the eye icon) to open the detail dialog: every answer, file links, consent, locale, referrer, verification, and both email statuses. Delete lead sits at the bottom of the dialog.

Lead detail

• Export CSV downloads every lead for the page. Columns follow the form's field order (plus any field that existed on older leads), then Consent and Email status. Opens directly in Excel.
• Delete removes a lead permanently.

Campaign recipes

* = required.

CSV export columns

Export gives one row per lead:

Submitted at · one column per form field, in the form's current order, headed by the field label · any field that existed on older leads but was later removed · Consent (Yes / No) · Email status (sent / failed / pending / skipped) · Verification (Verified / Legacy / Check disabled).

File fields contain the file link. Times are in UTC (ISO 8601). The file opens directly in Excel and Google Sheets.

Limits

Privacy and data

• Every lead stores the answers, files, the language the visitor used, the referring page, and the consent answer.
• Consent wording is yours to set per page (Settings → Consent text). Make sure it matches your privacy policy and keep the consent checkbox required for marketing follow‑up.
• Uploaded files are stored with the site's media and are reachable by anyone who has the exact link (the link is only in the lead and the email). Delete the lead to remove the reference; ask the development team to purge the file itself if required.
• Deleting a page keeps its leads; deleting a lead is permanent.
• Leads never leave this site's own database except by email and by CSV export.

Before you publish — checklist

• Slug is short, lowercase and final
• At least one recipient in Delivery, and it is monitored
• Consent checkbox present and required; consent text approved
• Form tested in the live preview: every required field makes sense
• Banners have alt text; text sections read well on mobile
• SEO title and description filled in
• A test submission from your own phone arrived by email and shows in Leads
• Redirect URL (if used) opens the right page

FAQ

Can visitors see other people's leads? No. Leads are only visible in the admin panel.

Can I edit a page that is already live? Yes. Changes apply the moment you save. Consider unpublishing first for large rework.

Can two pages share a form? Not directly — duplicate the page and adjust.

What happens if the recipient address bounces? The provider reports the failure and the lead shows failed with the reason. Fix the address and follow up manually.

Can I translate a page? UI labels (Send, error messages, "optional") follow the visitor's language automatically. Your own headings and texts are shown as typed. Create one page per language if needed, e.g. /lp/test-drive-week and /lp/semaine-essai.

Does a page appear in Google? Published pages are listed in the sitemap and can be indexed. Unpublish when the campaign ends.

Troubleshooting

Note: Leads are not included in Sync to other projects. Uploaded files are stored with the site's media and reachable by link.

9. Exterior Colors

What it controls: The available exterior paint color options that can be assigned to vehicle models.

How to open it

1. Click "Exterior Colors" in the left sidebar under Colors

The colors table

Adding a new color

1. Click "Add Color"
2. Fill in:
   • Name (required) — Color name shown on the website (e.g. Pearl White)
   • Hex Code (required) — 6-character color code starting with # (e.g. #FFFFFF)
3. Click Save

Finding a hex code: Use htmlcolorcodes.com to pick a color and copy the code. Or search online for the color name + "hex code".

Editing a color

1. Click "Edit" on the color row
2. Update the Name or Hex Code in the dialog
3. Click Save

Changes to a color name or swatch will update everywhere it appears across all vehicle pages.

Deleting a color

1. Click ✕ on the color row
2. Confirm the deletion

⚠️ First remove this color from all vehicles that use it, otherwise it will disappear from those vehicle pages.

10. Interior Colors

What it controls: The available interior color and trim options for vehicle models.

The process is identical to Section 9 — Exterior Colors:

1. Click "Interior Colors" in the left sidebar
2. Click "Add Color" to create a new option
3. Enter the Name (e.g. Black Leather) and Hex Code (e.g. #1A1A1A)
4. Click Save

Interior colors are assigned to vehicles in the Colors tab of the vehicle form.

11. About Us

What it controls: The content of the About GAC page on the website — main image and body text.

How to open it

1. Click "About Us" in the left sidebar under Settings

Editing the content

The About Us page has two sections:

Content (Rich Text)

Edit the page text using the rich text editor. The toolbar works the same as the Article editor — see Section 8 for the toolbar guide.

Desktop layout

Mobile layout

• Click the upload area (or "Replace image") to upload a new photo
• Click ✕ on the image to remove it

Click Save Changes when finished.

12. Warranty Page

What it controls: All content on the warranty page — the hero banner, the warranty coverage cards, and the partner logos.

How to open it

1. Click "Warranty Page" in the left sidebar under Settings

Hero Section

Leave the background image empty for a plain-color background.

Warranty Items

Each entry produces one coverage card on the page.

Adding a new warranty type:

1. Click "Add Warranty Item"
2. Fill in the fields:

1. Click Save, then Save Changes

Editing a warranty item:

1. Click "Edit" on the item row
2. Update the fields
3. Click Save, then Save Changes

Removing a warranty item:

1. Click ✕ on the item row
2. Click Save Changes

Reordering warranty items:

Click the ↑ or ↓ buttons to move items up or down, then click Save Changes.

Our Partners

Each entry produces one partner logo tile in the grid.

Adding a partner logo:

1. Click "Add Partner"
2. Fill in:

1. Click Save, then Save Changes

Removing a partner:

1. Click ✕ on the partner row
2. Click Save Changes

12a. Translations

The website can be shown in English, French, and Spanish. English is the master copy: it is what you type on every other page of the admin panel. French and Spanish are overlays — you fill in only the words you want changed, and anything you leave blank automatically shows the English text instead.

That fallback is the single most important rule on this page:

A blank field is not an error. It means "show the English words here." You can translate the site a little at a time and the public website never breaks or shows an empty space.

Step 1 — Turn the languages on

Nothing you translate appears to visitors until the language is enabled in Site Config.

1. Click Site Config in the left sidebar
2. Scroll to the Localisation group
3. Click Français and/or Español so they turn green
4. Choose a Default Language — this is what a first-time visitor sees before they pick anything
5. Click Save Changes

Note: If only English is enabled, the globe menu is hidden from the website completely.

Step 2 — Open the Translations page

Click Translations in the left sidebar, under Settings. The page is split into six sections, each covering a different part of the website.

Each section also has an Open in Studio ↗ link in its top-right corner. You only need it for the rare cases noted further down — the admin panel handles everyday translating.

Step 3 — How the side-by-side editor works

Navigation, Home Page, and Warranty all use the same side-by-side layout: an English column you cannot edit, next to a Français column and an Español column.

Things to know:

• The grey placeholder text inside an empty box is a preview of the English fallback, not a saved value
• The bar at the bottom shows "You have unsaved changes" until you click Save Changes
• Rows are matched to the English item behind the scenes. If you rename or reorder items on the original page, the translations stay attached correctly
• On the Navigation section, dropdown children are indented under their parent menu item

Warning: If you clear every field for one language and save, that language's translation is deleted and the site falls back to English everywhere for it. A confirmation box appears first — read it before clicking OK.

Navigation, Home Page, and Warranty

These three are edited directly on the Translations page — no dialog, no extra clicks.

Each section has its own Save Changes button. Saving one does not save the others.

Note: The Why GAC Body and Bullets fields are plain text boxes, not a formatting toolbar. Separate body paragraphs with a blank line, and put one bullet per line. Bold, italic, and list formatting from the English version is not carried over — use Open in Studio ↗ for a translation that needs formatting.

Articles and Vehicles

These have too many fields for a flat list, so each one gets a row in a table and opens in a dialog.

1. Find the article or vehicle in the table (vehicles have a search box — search by name or series)
2. Read the FR and ES pills: green Translated means a translation exists, grey Missing means it does not
3. Click Edit translations
4. Fill in the French and Spanish columns
5. Click Save Changes

Note: "Translated" only means something has been filled in — not that every field is done. A vehicle with one translated banner still shows the green pill.

Inside the vehicle dialog, the fields are grouped into collapsible sections: Banners, Design, Exterior, Performance, Interior, Safety Features, Contact. Click a heading to open it. Sections the vehicle has no English content for are hidden, so a shorter dialog simply means a shorter vehicle. Each Safety Feature has its own English/French/Spanish description panels, since safety descriptions use rich text rather than plain fields.

The article dialog has a Title and Summary box per language, then the article body underneath in the same rich-text editor described below.

Translating rich text (About Us, article bodies, and Safety Features)

Long-form text uses a different editor with a formatting toolbar.

1. Read the English (reference) panel — it is read-only, purely so you can see what you are working from
2. Type the translation into the French and Spanish panels below it
3. Use the toolbar for bold, italic, headings, and lists (Safety Feature descriptions omit headings — bold, italic, and lists only)
4. Click Save Changes

Warning: This editor handles text only. Links and images in the English version are not copied across and cannot be added here. If the text you are translating contains a link or an inline image, use Open in Studio ↗ for that piece instead.

What visitors see

Once a language is enabled, a globe icon appears in the website header.

What the visitor sees

ModelsServiceContact Us

English

Français

Español

• Clicking it opens the language list, with a tick beside the current language
• The choice is remembered for one year, so returning visitors stay in their language
• On mobile, the same list appears inside the hamburger menu
• Any text you have not translated shows in English — the page never comes up blank

Worked example — translating one menu item

1. Go to Site Config → Localisation and turn on Français, then Save Changes
2. Go to Translations
3. In the Navigation section, find the row where the English column reads Models
4. Type Modèles in the Français box
5. Click Save Changes — the bar turns green and reads Changes saved
6. Open the public website, click the globe, choose Français
7. The menu now reads Modèles. Every other menu item is still English, because you have not translated those yet — exactly as intended

Troubleshooting

13. Tips & Common Tasks

How to upload an image

Every image field works the same way:

1. Click the upload area or "Click to upload image" button
2. Either:
   • Click "Browse files" and select a file from your computer, or
   • Drag and drop the image file onto the upload area
3. Wait for the upload to complete (a progress bar is shown)
4. After uploading, the image preview is displayed

• Click ✕ to remove the image
• Click "Replace image" to swap it with a different file
• Accepted formats: JPG, PNG, WEBP, GIF

How to generate a slug

The Slug is the URL-friendly version of a title (e.g. the slug for "Tiggo 9" is tiggo-9).

• Slugs are auto-generated when you enter a title — you do not need to type them
• Click "Generate" next to the slug field if it does not auto-fill
• Do not edit slugs after a page is live — changing a slug changes the URL, which breaks existing links and bookmarks

How to find a hex color code

A hex color code is a # followed by 6 characters, e.g. #BE8751.

• Go to htmlcolorcodes.com and use the color picker
• Or search online: pearl white hex code

How to quickly check what is on the website

The Dashboard (click "Dashboard" in the sidebar) shows:

• Total article count and featured article count
• Total vehicle count
• Color counts
• Recent articles and vehicles
• Login activity for the last 7 days

14. Sync

The Sync page lets you copy all published content from this project (the source) to one or more other Sanity projects (destinations). This is useful for keeping a staging site, a regional copy, or any connected project up to date without manual exports or developer involvement.

Where to find it

Click Sync under the Tools section in the sidebar.

What you see on the page

Source card — shows the project ID and dataset this admin panel is connected to, the total number of published documents, and a breakdown by content type.

Destination cards — one card per connected destination. Each card shows:

Syncing content

Sync a single destination

1. Find the destination card you want to update
2. Click Sync Now
3. A progress indicator appears below the button showing the current phase (e.g. Checking assets…, Uploading assets 3/12, Writing documents 45/142)
4. When complete, the button area shows how many documents were synced (e.g. 142 synced) or lists any errors

Sync all destinations at once

Click the Sync All button in the top-right of the page. This runs a sync to every configured destination in sequence and shows a summary when done.

What gets synced

• All published documents (drafts are never synced)
• Images and files — any image or file assets referenced by your documents are copied to the destination project first, before the documents are written
• Content types in the Whitelist (if configured for a destination) — when a whitelist is set, only those types are synced; all others are skipped for that destination

The following internal types are always excluded:

• Analytics events
• System documents (system.group, system.retention)
• Raw asset records (sanity.imageAsset, sanity.fileAsset) — assets are re-uploaded rather than copied as raw records

Reading the progress bar

While a sync is running, a small progress bar appears under the Sync Now button:

The sync happens in two phases:

1. Assets — images and files are uploaded to the destination (skipped if already present)
2. Documents — all content documents are written to the destination

After syncing

• The destination card badges and counts refresh automatically after each sync without needing a full page reload
• If the sync shows errors, an error log expands below the button listing the affected document IDs and the reason each failed
• Only documents that are new or have changed content are written — if everything is already identical, the sync completes instantly with nothing written

Errors

Note: The Sync page is a Tools feature intended for administrators. Content managers do not need to use it during normal day-to-day work.

14a. Form Protection

Every public form — contact, call‑back, service request, test drive, model inquiry, lead pages, dealer onboarding — and the chat assistant are protected by an invisible proof‑of‑work check. There is nothing for visitors to click or solve: while they type, their browser quietly performs a small computation and attaches the result to the submission. The server verifies it in a fraction of a millisecond.

Why it works: a human submits one form; a spam script tries to submit thousands. The check costs a second on a phone once, but the price doubles with every extra submission from the same connection within ten minutes, so automated floods grind to a halt while real visitors never notice.

What visitors may see:

Nothing changes in the admin panel. Rejected attempts are recorded in the server logs, not in Sanity.

Developer note: POW_SECRET must be set in production (openssl rand -hex 32); without it protected endpoints refuse all submissions. POW_BASE_BITS tunes the base difficulty (default 16). POW_DISABLED=true switches the check off in development only.

15. Troubleshooting

The Save Changes button is greyed out

There are no unsaved changes — your content is already up to date.

An error message appears after clicking Save Changes

My changes are not showing on the website

1. Make sure you clicked Save Changes (not just edited the form)
2. Vehicle and content pages are cached for fast loading. After saving, the cache is automatically cleared — changes typically appear within a few seconds.
3. Hard-refresh your browser: Ctrl + Shift + R (Windows) or Cmd + Shift + R (Mac)
4. If the change still does not appear after 30 seconds, contact your system administrator — the automatic cache update (webhook) may not be configured correctly.

I cannot log in

• Check that Caps Lock is off
• Click "Forgot password?" on the login page to reset your password
• Contact your system administrator if the issue persists

A color I created is not appearing in the vehicle color dropdown

Colors must be created and saved before they appear in the vehicle form dropdowns. Go to Exterior Colors or Interior Colors, create the color, then return to the vehicle form.

I accidentally deleted something

Contact your system administrator as soon as possible. Sanity keeps a history of all content — deleted items can often be recovered within a short period.

16. Transactional Emails

The website sends automated emails in response to visitor actions — contact form submissions, service requests, vehicle inquiries, and dealer onboarding submissions. This section describes each email, who receives it, and what information it contains.

All emails share the same visual style: a blue header, gold-accented section titles, and a light footer. The active email provider (Resend, SMTP, or Mailgun) is configured in the server environment and is transparent to the templates — the emails look and behave the same regardless of provider.

Note: Email delivery requires the EMAIL_PROVIDER environment variable and the corresponding API key to be configured by your system administrator.

Contact Form Email

Sent when a visitor submits the Contact Us form found on the main contact page.

Received by: The contact email address configured in CONTACT_EMAIL, with copies sent to the admin email (ADMIN_EMAIL) and any sales CC addresses (NEXT_PUBLIC_SALES_EMAIL_CCS).

Reply-to: Automatically set to the visitor's email address — replying to the email opens a reply directly to the visitor.

Service Request Email

Sent when a visitor submits the Service Request form.

Received by: The service department email address configured in NEXT_PUBLIC_SERVICE_EMAIL, with a copy sent to the admin email (ADMIN_EMAIL).

Reply-to: Automatically set to the visitor's email address.

Model Inquiry Email

Sent when a visitor submits the contact form on a vehicle model page (e.g. the Tiggo 9 page).

Received by: The contact email address (CONTACT_EMAIL), with copies to the admin email and any sales CC addresses.

Reply-to: Automatically set to the visitor's email address.

This email includes a Vehicle of Interest section at the bottom containing the vehicle's hero image, model name, price (if pricing is enabled), and direct links to the model page and spec sheet PDF.

Model Inquiry Confirmation Email

Sent automatically to the visitor immediately after they submit a model inquiry. This confirms their submission was received and gives them a reference of what they sent.

Received by: The visitor who submitted the form (their email address from the form).

This email is sent in addition to the admin notification — both emails are sent at the same time when the form is submitted.

17. GDPR & Cookie Consent

Manage cookie consent banner settings for the site. Changes stored in Sanity and take effect on the next page load for new visitors.

Admin location: Admin Panel → Settings → GDPR & Cookies (/admin/gdpr)

Consent Banner

Company name shown in the banner is pulled from Site Config → Company Name — update it there.

Cookie Categories

Controls which optional categories appear in the Cookie Preferences modal.

Toggle Analytics and Marketing on or off from the admin panel. The other two categories are always present in the modal.

Turning off a category in the admin hides it from the modal entirely — visitors can no longer opt in to that category.

How Consent Works

1. First visit — banner appears at the bottom of the screen with three equal-weight buttons: Reject All, Cookie Settings, Accept All.
2. Cookie Settings — opens the preferences modal where visitors can toggle individual categories.
3. Consent stored — choice is saved to localStorage (gac-consent) and a first-party session cookie (gac-consent-given).
4. Version mismatch — if the stored consent version differs from the current policy version, the banner reappears and the visitor must consent again.
5. Google Analytics — only loads after the visitor consents to the Analytics category.

Privacy Policy Page

A full privacy policy page lives at /privacy-policy. It includes:

• Detailed explanation of all cookie categories and what they track
• A cookie table listing specific cookies set by the site
• An inline Cookie Settings button that opens the preferences modal directly from the page

The page content is hardcoded in src/app/privacy-policy/PrivacyPolicySections.tsx. Update that file to reflect any changes to your actual cookie or data processing practices.

18. Analytics

What it controls: Visitor traffic, page engagement, device and country breakdown, and model-specific interaction data collected from the live website.

How to open it

1. Click "Analytics" in the left sidebar under Tools

18a. Dashboard

The dashboard header shows the total event count and date range for the current view. Use the date range selector (top-right) to switch between the last 7, 30, 60, or 90 days.

KPI cards

Four summary cards appear at the top of the page:

Charts

Data tables

The lower half of the dashboard shows breakdowns across multiple dimensions:

Each row shows a horizontal bar for quick visual comparison.

18b. Data Source Toggle

The File / Sanity / Both toggle at the top of the analytics page controls where event data is read from.

When to change it: Leave it on Both for normal use — this gives the most complete picture. Switch to File or Sanity only when you want to verify one source in isolation (e.g. after a migration).

18c. Data Retention

The Data Retention panel appears at the bottom of the analytics page. It helps you manage storage by archiving old events to files and removing them from Sanity, keeping usage below Sanity's 10,000-document limit.

Usage indicator

A colour-coded bar shows how many analytics event documents are currently stored in Sanity:

Cutoff setting

The Cutoff field sets how many days of recent events to keep. Events older than this threshold are the ones archived or pruned.

• Accepted range: 1–365 days
• The default is set by the ANALYTICS_RETAIN_DAYS server environment variable (ask your system administrator)
• Automatic run: Archive + prune runs automatically every Sunday at 03:00 — you only need to trigger it manually if you want to run it outside that schedule

Action buttons

Recommended sequence: Click Archive to Files first, verify the result message, then click Prune from Sanity to free up document quota.

Archive files list

Below the action buttons, every existing archive file is listed:

Legacy migration (one-time)

If a banner appears saying "Legacy per-event docs in Sanity", the account still has old-style individual event records that predate the current monthly archive structure. Two buttons are shown:

Run either migration once — the banner disappears when no legacy records remain.

19. Application Architecture (Developer Reference)

Audience: This section is for developers building or extending the site. Content managers do not need to read it.

The application follows a strict layered architecture. Each layer has one responsibility. All new features must follow the same pattern.

19a. Layer Overview

┌─────────────────────────────────────────────────────────┐
│  UI Layer  (src/components/, src/app/**/page.tsx)        │
│  React components — renders data, fires user events      │
├─────────────────────────────────────────────────────────┤
│  Page / Server Component Layer  (src/app/**/page.tsx)    │
│  Fetches data server-side, passes props to components    │
├─────────────────────────────────────────────────────────┤
│  API Routes  (src/app/api/**/route.ts)                   │
│  REST endpoints for mutations and client-initiated sends │
├─────────────────────────────────────────────────────────┤
│  Service Layer  (src/lib/)                               │
│  email/, sanity/, auth/, templates, currencies, …        │
├─────────────────────────────────────────────────────────┤
│  Data Layer  (Sanity CMS, Auth0, Email providers)        │
│  Sanity GROQ queries, IEmailProvider, IAuthProvider      │
└─────────────────────────────────────────────────────────┘

19b. Example — Contact Form Submission

A user fills in the contact form and clicks Send Message.

Step 1 — UI Component (src/components/forms/contact-form.tsx)

The component fires a fetch to the mail API. It does not know or supply the recipient address — it passes audience: 'sales' so the server resolves who receives it.

const response = await fetch("/api/mail/send", {
  method: "POST",
  body: JSON.stringify({
    audience: 'sales',          // recipient resolved server-side
    subject: "Message from Alice",
    template: "contact",        // maps to src/email-templates/contact.hbs
    variables: { name, email, telephone, message },
  }),
});

Step 2 — API Route (src/app/api/mail/send/route.ts)

// 1. Validates the request body.
// 2. Detects audience === 'sales'.
const { salesEmail, salesEmailCCs } = await getCorrespondenceConfig();
// 3. Renders the Handlebars template.
const html = renderTemplate(template, variables);
// 4. Sends via the active email provider.
await sendMail({ to: [salesEmail, ...salesCCs], subject, html, replyTo: variables.email });

Step 3 — Service: Correspondence Config (src/lib/sanity/getCorrespondenceConfig.ts)

Reads correspondence.salesEmail from the Sanity siteConfiguration document. Validates it looks like a real email address (looksLikeEmail). Falls back to NEXT_PUBLIC_SALES_EMAIL env var if Sanity is empty or invalid.

Step 4 — Service: Email (src/lib/email/index.ts)

Reads the EMAIL_PROVIDER env var. Instantiates the correct provider (Resend, SMTP, or Mailgun). Calls provider.send(input) — the rest of the app never touches provider-specific APIs.

Step 5 — Data Layer

Sanity returns the configured email address. The email provider delivers the message.

19c. Example — Vehicle Model Page

A user navigates to /models/tiggo-7-pro.

Step 1 — Page (Server Component) (src/app/models/[slug]/page.tsx)

// Runs on the server — no client bundle cost.
const [vehicleRes, siteConfigRes] = await Promise.all([
  sanityFetch({ query: getVehicleBySlug, params: { slug } }),
  sanityFetch({ query: getSiteConfiguration }),
]);
const currency = enrichCurrency(
  getCurrency(siteConfigRes.data?.currency),
  siteConfigRes.data?.priceDisplay
);

Step 2 — Service: Sanity Queries (src/lib/sanity/queries.ts)

A GROQ query returns vehicle fields, image URLs, variants, and spec sheets. The result is cached by Next.js ISR and only re-fetched when Sanity fires the /api/revalidate webhook on publish.

Step 3 — Service: Currency (src/lib/currencies.ts)

enrichCurrency() merges the site config custom price format into the CurrencyConfig so PricePill renders "Starting from TTD 249,900" — or a custom prefix/suffix if configured in the Admin → Site Config.

Step 4 — UI Component (src/components/layout/price-pill.tsx)

// Receives the enriched CurrencyConfig as a prop — no Sanity knowledge.
<PricePill price={vehicle.price} currency={currency} />

Step 5 — Data Layer

Sanity CDN serves the cached GROQ result. The page is statically cached by Next.js ISR and only re-rendered when Sanity fires the /api/revalidate webhook.

19d. Adding a New Feature

Scenario: Add a "Finance Calculator" page that reads interest rates from Sanity and renders a client-side form.

Rule: The server component owns data fetching. The client component owns interactivity. The API route owns mutation. The service layer owns the external call. Never skip a layer.

Last updated: July 2026 — added Application Architecture section (19), updated Table of Contents