CK Travelers AU — Content Update Guide

Step-by-step instructions for updating every part of the website.

info Overview

All content changes are made by editing files in the src/ folder. After editing, rebuild and deploy the site to see changes live.

terminal Preview locally npm run dev

Opens at http://localhost:4321

build Build for production npm run build

Creates the dist/ folder ready to deploy

rocket_launch Deploy

Push to GitHub — Vercel / Netlify auto-deploys on every push

Quick Reference

What to change	File
Navigation menu	`src/components/Nav.astro`
Footer	`src/components/Footer.astro`
WhatsApp number	3 files — see WhatsApp section
Homepage	`src/pages/index.astro`
About page	`src/pages/about/index.astro`
Sri Lanka page	`src/pages/sri-lanka/index.astro`
Contact page	`src/pages/contact/index.astro`
Vista Vault / Gallery	`src/pages/gallery/index.astro`
Time-of-day hero images	`src/pages/index.astro` → script block
Global colours & fonts	`src/styles/global.css`

home Homepage

File: src/pages/index.astro

Hero Section

Search for const hero = near the top of the file.

const hero = {
  eyebrow:       "Based in Australia · Sri Lanka Specialists",
  headlineLine1: "The World Awaits",         // first line of heading
  headlineLine2: "You",                      // second line (italic gold)
  subtitle:      "Your subtitle here...",
  backgroundImageUrl: "https://...",         // default background photo
  cta1Label:     "View Packages",            // primary button text
  cta1Href:      "/sri-lanka/#packages",     // primary button link
  cta2Label:     "Chat on WhatsApp",
  cta2Href:      "https://wa.me/...",
};

Stats Strip (4 numbers below hero)

Search for const stats =

{ value: "5,000+", label: "Happy Travellers" },
{ value: "60+",    label: "Destinations" },

Service Cards

Search for const services =. Each card:

{ icon: "flight", title: "Flights to Sri Lanka", description: "..." },

Icon names from fonts.google.com/icons

Destination Cards

Search for const destinations =. Each card:

{
  imageUrl:  "https://images.unsplash.com/...",
  regionTag: "South Asia",
  name:      "Sri Lanka",
  priceFrom: "From A$1,299 per person",
  href:      "/sri-lanka/",   // link (optional)
  isWide:    true,            // spans 2 columns
  isFeatured: true            // gold badge style
},

Why Us Cards

Search for const whyUs =

{ icon: "groups", heading: "Community Trust", body: "..." },

info About Page

File: src/pages/about/index.astro

Hero

Search for const hero =

headlineLine1:      "Dedicated to Crafting",
headlineLine2:      "Meaningful Travel Experiences",
subtitle:           "Your subtitle...",
backgroundImageUrl: "https://...",

Story Paragraphs

Search for const storyParagraphs — add, edit or remove text strings in the array.

Feature Cards (2×2 grid)

Search for const stats =

{ value: "", label: "Personalized Travel Experiences", icon: "auto_awesome" },

Leave value: "" for text-only cards.

Global Offices

Search for const offices =

{ flag: "🇦🇺", country: "Australia", subtitle: "Head Office",
  address: "...", phone: "...", email: "..." },

Values & Awards

Search for const values = and const awards =

travel_explore Sri Lanka Page

File: src/pages/sri-lanka/index.astro

Highlight Cards (Why Sri Lanka)

Search for const highlights =

{ icon: "temple_buddhist", heading: "Ancient Culture", body: "..." },

Top Attraction Cards

Search for const attractions =

{
  imageUrl:    "https://...",
  regionTag:   "Cultural Triangle",
  name:        "Sigiriya Rock",
  description: "..."
},

Season Cards (Best Time to Visit)

Search for const seasons =

{
  icon:        "wb_sunny",
  title:       "December – March",
  badge:       "Peak Season",
  isPeak:      true,              // true = teal border, false = grey
  description: "...",
  highlights:  ["West & South beaches", "Whale watching"]
},

mail Contact Page

File: src/pages/contact/index.astro

Hero

Search for const hero =

Office Hours & Response Time

Search for cms?.officeHours ?? — change the text after ??

Other Global Offices

Search for const otherOffices =

{ flag: "🇱🇰", name: "Sri Lanka", details: "+94 76 139 8828 · Kandy" },

Contact Form Endpoint

Search for const formAction — replace with your live Formspree URL.

FAQ Fallback

Search for const hardcodedFaqs = — edit question/answer pairs.

photo_library Vista Vault (Gallery)

File: src/pages/gallery/index.astro

warning Each image must be added to both the frontmatter array (top of file) and the script array (bottom of file). They must stay in sync.

Add a new destination tab

Find the destinations array in the frontmatter:

{ id: 'dubai', label: 'Dubai' },

Add an image

Add the same line to both arrays:

{
  dest:    'sri-lanka',          // must match a destination id
  url:     'https://images.unsplash.com/photo-XXX?w=900&auto=format',
  caption: 'Sigiriya Rock',
  wide:    true                  // optional — spans 2 columns
},

Remove an image

Delete its line from both the frontmatter array and the script array.

Remove a destination

Delete its line from the destinations array
Delete all images with that dest value from both image arrays

menu Navigation Menu

File: src/components/Nav.astro

Find the nav array:

const nav = [
  { href: '/',              label: 'Home' },
  { href: '/#destinations', label: 'Destinations' },
  { href: '/#services',     label: 'Services' },
  { href: '/about/',        label: 'About Us' },
  { href: '/contact/',      label: 'Contact' },
  { href: '/gallery/',      label: 'Vista Vault' },
];

Add item — add a new { href, label } line
Remove item — delete its line
Rename item — change the label value
Reorder — move lines up or down

chat WhatsApp Number

Update in three files. Replace 61451777565 with your number (no +, no spaces):

1. Floating WhatsApp button

File: src/layouts/BaseLayout.astro

<WhatsAppButton number={settings?.whatsappNumber ?? "+61451777565"} />

2. Nav fallback link

File: src/components/Nav.astro

: `https://wa.me/61451777565?text=...`

3. Contact page display

File: src/pages/contact/index.astro

const displayNumber = "+61 451 777 565"; // human-readable display
// also update the wa.me/61451777565 fallback above it

schedule Time-of-Day Hero Images

File: src/pages/index.astro → search for timeImages in the <script> block.

Key	Hours	Mood
`morning`	6 am – 11:59 am	Golden sunrise, warm and fresh
`noon`	12 pm – 4:59 pm	Bright blue sky, vibrant destination
`evening`	5 pm – 8:59 pm	Warm sunset, romantic ocean
`night`	9 pm – 5:59 am	City lights, starry sky

Replace with an Unsplash photo

morning: 'https://images.unsplash.com/photo-XXXXXXXXXXXXXXXXX?w=1600&auto=format',

Go to unsplash.com and find your photo
Copy the photo ID from the URL (e.g. photo-1500534314209)
Build: https://images.unsplash.com/photo-XXXXXX?w=1600&auto=format
Paste it as the value for morning, noon, evening, or night

Use your own uploaded photo

Compress your photo to under 500 KB at squoosh.app (WebP, 80% quality)
Name it clearly: hero-morning.jpg, hero-evening.jpg, etc.
Copy it into public/images/
Use /images/hero-morning.jpg as the URL

tips_and_updates Photos should be landscape orientation, 1600×900 px minimum, with the main subject centred (text overlays the image).

image Uploading Images

Type	Folder	How to use
Logo	`public/logo.jpg`	Replaces nav & footer logo (overwrite the file)
General photos	`public/images/`	`<img src="/images/photo.jpg" />`
Optimised (Astro processes)	`src/assets/`	Import in frontmatter, use `<Image>` component

Using Unsplash (no upload needed)

Append ?w=900&auto=format to any Unsplash photo URL:

https://images.unsplash.com/photo-XXXXXX?w=900&auto=format

Change w=900 to w=1600 for full-screen hero images.

Recommended image sizes

Use	Width	Max file size
Hero / full-screen background	1600 px	500 KB
Destination / attraction cards	900 px	200 KB
Gallery thumbnails	600 px	150 KB
Logo	200 px	50 KB

rocket_launch Build & Deploy

Preview changes locally

npm run dev

Opens at http://localhost:4321

Build for production

npm run build

If successful, the dist/ folder is ready to deploy.

Push to GitHub (triggers auto-deploy)

git add .
git commit -m "Update content"
git push

check_circle Always run npm run build before pushing to catch any errors.

info Overview

Quick Reference

home Homepage

Hero Section

Stats Strip (4 numbers below hero)

Service Cards

Destination Cards

Why Us Cards

info About Page

Hero

Story Paragraphs

Feature Cards (2×2 grid)

Global Offices

Values & Awards

travel_explore Sri Lanka Page

Highlight Cards (Why Sri Lanka)

Top Attraction Cards

Season Cards (Best Time to Visit)

mail Contact Page

Hero

Office Hours & Response Time

Other Global Offices

Contact Form Endpoint

FAQ Fallback

photo_library Vista Vault (Gallery)

Add a new destination tab

Add an image

Remove an image

Remove a destination

menu Navigation Menu

web Footer

chat WhatsApp Number

1. Floating WhatsApp button

2. Nav fallback link

3. Contact page display

schedule Time-of-Day Hero Images

Replace with an Unsplash photo

Use your own uploaded photo

image Uploading Images

Using Unsplash (no upload needed)

Recommended image sizes

rocket_launch Build & Deploy

Preview changes locally

Build for production

Push to GitHub (triggers auto-deploy)