Customize your template with config.ts

Every LandingKit template ships with a single source of truth for copy, links, images, and section toggles: templates/saas-landing/config.ts. Edit this file to tailor the template to your brand without touching UI code.

Where to find it

The configuration lives at templates/saas-landing/config.ts in the purchased template. It exports a pageConfig object that the page and all sections read from at build/runtime.

// file: templates/saas-landing/config.ts
export const pageConfig = {
  name: "Synapse",
  seo: {
    title: "Synapse",
    description: "",
  },
  brand: {
    logoLetter: "S",
    tagline: "Building the future of web development.",
    social: {
      twitter: "#",
      github: "#",
      linkedin: "#",
    },
    copyright: "© 2025 Synapse. All rights reserved.",
  },
  // ...more sections (hero, features, pricing, faq, footer, etc.)
} as const

What you can change

• Brand: logo letter, tagline, social links, copyright
• Navigation: labels and hrefs shown in the header
• Hero: badge, headline, subheading, primary/secondary CTAs
• Sections: stats, features, collaboration, benefits, social proof
• How it works: step titles, descriptions, and images
• Pricing: plan names, prices, features, popularity flag, CTAs
• FAQ: question–answer pairs
• Footer: link groups and items

Quick edits

Update brand and SEO

// templates/saas-landing/config.ts
export const pageConfig = {
  name: "Acme",
  seo: {
    title: "Acme Cloud",
    description: "Deploy, scale, and observe in minutes.",
  },
  brand: {
    logoLetter: "A",
    tagline: "Ship faster with confidence.",
    social: {
      twitter: "https://x.com/acme",
      github: "https://github.com/acme",
      linkedin: "https://linkedin.com/company/acme",
    },
    copyright: "© 2025 Acme Inc.",
  },
  // ...
}

Edit navigation

nav: [
  { label: "Features", href: "#features" },
  { label: "How It Works", href: "#how-it-works" },
  { label: "Pricing", href: "#pricing" },
  { label: "FAQs", href: "#faq" },
]

Section anchors (like #pricing) should match the section ids used by the template components.

Hero and CTAs

hero: {
  badge: "Now in public beta — Join 10,000+ teams",
  heading: { pre: "Ship faster with the", highlighted: "complete platform" },
  subheading: "Build, deploy, and scale with zero config.",
  primaryCta: { label: "Start building for free", href: "/signup" },
  secondaryCta: { label: "Watch demo", href: "/demo" },
}

Features

featuresSection: {
  titleBadge: "Features",
  title: "Everything you need to succeed",
  subtitle: "Powerful features designed to help your team ship faster.",
  features: [
    { title: "Lightning Fast", description: "Deploy in seconds with our edge network." },
    { title: "Enterprise Security", description: "SOC 2 Type II certified." },
    // ...
  ],
}

Images

Steps and sections may reference images under /public. Ensure the files exist, e.g. /analytics-dashboard-with-performance-metrics.jpg.

howItWorks: {
  steps: [
    { title: "Connect Your Repository", image: "/code-repository-connection-interface.jpg" },
    { title: "Deploy Instantly", image: "/deployment-dashboard-with-progress.jpg" },
    // ...
  ]
}

Pricing and FAQ

pricing: {
  title: "Simple, transparent pricing",
  plans: [
    { name: "Starter", price: "0", cta: "Start for free", features: ["Up to 3 projects", "100GB bandwidth"] },
    { name: "Pro", price: "29", popular: true, cta: "Start 14-day trial", features: ["Unlimited projects", "1TB bandwidth"] },
  ],
}

faq: {
  items: [
    { question: "How long does it take to get started?", answer: "Under 5 minutes." },
    { question: "Can I use my own domain?", answer: "Yes, with automatic SSL." },
  ]
}

Preview your changes

• Run pnpm dev and open /templates/saas-landing/preview to see a live preview powered by your pageConfig.
• If you deploy the main marketing page, the template reads the samepageConfig without extra wiring.

Tips and gotchas

• Keep paths valid: images should live in /public and be referenced with leading slash. Broken paths will render empty placeholders.
• Anchor links: make sure nav hrefs (like #pricing) correspond to section ids.
• Safe edits: only change values, not the overall object shape, unless you also update the consuming components.

Want deeper customization? You can extend pageConfig with new fields and thread them into the section components. Start by adding the field inconfig.ts, then pass it into the relevant component props.