Customization

Everything visible on the site: copy, links, sections, navigation: is driven by typed config files under src/config/. Change config, don't grep strings.

Brand

src/config/brand.ts: the single source of truth for product name, company, contact emails, and social links.

export const BRAND = {
  productName: "SaaSForge Starter",
  companyName: "Your Company",
  supportEmail: "support@yourcompany.com",
  privacyEmail: "privacy@yourcompany.com",
  legalEmail: "legal@yourcompany.com",
  dpoEmail: "dpo@yourcompany.com",
  social: {
    linkedin: "https://www.linkedin.com/company/yourcompany",
    twitter: "https://x.com/yourcompany",
    github: "https://github.com/yourcompany",
  },
  footer: {
    copyrightText: `© ${new Date().getFullYear()} Your Company. All rights reserved.`,
  },
  marketing: {
    trustLine: "One-time purchase · Lifetime updates · Full source code",
  },
};

Header, footer, legal pages, OG images, and more pull from this object.

Marketing copy

src/config/marketing-copy.ts: SEO titles, meta descriptions, footer tagline, OG copy.

export const SITE_META_DESCRIPTION = "...";
export const FOOTER_TAGLINE = "...";
export const HOME_PAGE_METADATA_TITLE = "...";
export const HOME_PAGE_DESCRIPTION = "...";
// ...

Per-section UI config

Each homepage section has its own typed config under src/config/ui/:

File	Controls
`hero2.ts`	Hero headline, subtitle, CTA buttons, stats, trust logos
`features.ts`	Features grid items, badge, section header
`cta.ts`	Bottom CTA banner
`faq.ts`	FAQ items + contact block
`testimonials.ts`	Testimonial cards
`integrations2.ts`	"Works with your stack" band
`process-home.ts`	"How it works" steps
`header.ts`	Top nav links
`footer.ts`	Footer link groups
`blog.ts`	Blog index page copy
`login.ts`	Login page copy (if you wire auth)
`branding.ts`	Logo paths, user avatar fallback, AI label

All files are typed: TypeScript will error if you delete a required field.

Navigation

src/config/ui/header.ts:

export const headerConfig: HeaderConfig = {
  navLinks: [
    { label: "Products", href: "/" },
    { label: "Blog", href: "/blog" },
    { label: "Docs", href: "/docs" },
  ],
  ctaText: "Get Started",
  signInText: "Sign in",
  dashboardText: "Dashboard",
};

Footer link groups

src/config/ui/footer.ts:

export const footerConfig: FooterConfig = {
  description: FOOTER_TAGLINE,
  socialLinks: [
    { icon: "github", href: BRAND.social.github, label: "GitHub" },
    { icon: "twitter", href: BRAND.social.twitter, label: "Twitter" },
    // ...
  ],
  linkGroups: [
    {
      title: "Product",
      links: [
        { label: "Home", href: "/" },
        { label: "Docs", href: "/docs" },
      ],
    },
    // Add more groups
  ],
};

Removing a homepage section

Edit src/app/page.tsx and delete the section's JSX + its import. Example: remove testimonials:

// Remove these lines:
import { TestimonialsSection } from "@/components/testimonials/testimonials-section";
<TestimonialsSection />

Adding a homepage section

Build a new component under src/components/your-section/
Create a config file src/config/ui/your-section.ts with the copy + items
Import both into src/app/page.tsx and render where you want

Use the existing sections as reference: features/, process/, and integrations2/ are good templates.

Routes

src/config/routes.ts: centralized URL constants. Add your new routes here so the whole app links consistently:

export const ROUTES = {
  HOME: "/",
  LOGIN: "/login",
  BLOG: "/blog",
  DOCS: "/docs",
  TERMS: "/terms",
  PRIVACY: "/privacy",
  LICENSE: "/license",
  // Add your routes:
  PRICING: "/pricing",
  ABOUT: "/about",
} as const;

SEO: metadata + OG
Troubleshooting: common issues