Configuration

Where content lives

All site content is stored in the data/ folder as JSON files. You never need to edit any .tsx file to change text.

data/
├── configuration.json     → site name, navbar, footer, home, contact
├── about.json             → about page
├── products/
│   ├── index.json         → products page settings
│   └── *.md               → individual product pages
├── blog/
│   ├── index.json         → blog page settings
│   └── *.md               → individual blog posts
└── docs/
    └── index.json         → docs sidebar and metadata

Change the site name and tagline

Open data/configuration.json and edit the site block:

{
  "site": {
    "name": "Your Brand",
    "title": "Your Brand — AI SaaS Landing Kit",
    "description": "A short description used for SEO and social sharing.",
    "url": "https://yourbrand.com"
  }
}

What each field does:

Save the file. The browser updates automatically.

Change the navbar

In the same file, edit the navbar block:

{
  "navbar": {
    "logo": "Your Brand.",
    "links": [
      { "label": "About", "href": "/about" },
      { "label": "Products", "href": "/products" },
      { "label": "Blog", "href": "/blog" },
      { "label": "Contact", "href": "/contact" }
    ],
    "cta": { "label": "Get the Kit — $49", "href": "/contact" }
  }
}

To add a new link: copy any line inside links and change label and href.

To remove a link: delete the line.

The `cta` is the highlighted button on the right side of the navbar.

Change the footer

Edit the footer block:

{
  "footer": {
    "tagline": "A landing kit for AI founders who ship.",
    "copyright": "© 2026 Your Brand. All rights reserved.",
    "columns": [
      {
        "title": "Product",
        "links": [
          { "label": "Features", "href": "/products" }
        ]
      }
    ]
  }
}

To add a column: copy a { "title": ..., "links": [...] } block and paste it inside columns.

To add a link to a column: copy a { "label": ..., "href": ... } line.

Best practice: keep 3 columns max for a clean layout.

Change the home page

In data/configuration.json, edit the pages.home block:

{
  "pages": {
    "home": {
      "seo": {
        "title": "Your Brand — Landing Kit",
        "description": "Launch your AI landing page in hours."
      },
      "hero": {
        "badge": "Built with Next.js 16",
        "title": "Ship your landing page in hours.",
        "desc": "A production-ready kit for AI founders.",
        "cta1": "Get the Kit",
        "cta2": "See Live Demo",
        "image": {
          "src": "/images/banner.avif",
          "alt": "Homepage preview",
          "width": 1200,
          "height": 675
        }
      },
      "bentoSection": {
        "eyebrow": "What's Inside",
        "title": "Everything you need",
        "desc": "Built for founders who care about conversion."
      },
      "proofSection": {
        "metric1": { "value": "28", "label": "Static pages" },
        "metric2": { "value": "100/100", "label": "Lighthouse score" },
        "metric3": { "value": "3 min", "label": "Setup time" }
      },
      "pricingTeaser": {
        "eyebrow": "Launch Price",
        "title": "Buy once. Use forever.",
        "desc": "One-time payment. No subscription.",
        "cta": "Get the Kit — $49"
      }
    }
  }
}

Section-by-section:

Change the hero image

The hero image is referenced in pages.home.hero.image:

"image": {
  "src": "/images/banner.avif",
  "alt": "Homepage preview",
  "width": 1200,
  "height": 675
}

To use your own image:

1. Save your image inside public/images/

2. Update src to /images/your-file.avif

To use an image from the web:

"src": "https://images.unsplash.com/photo-xxx?w=1200"

You must whitelist the domain in next.config.js:

images: {
  remotePatterns: [
    { protocol: "https", hostname: "images.unsplash.com", pathname: "/**" }
  ]
}

Change the contact page

In data/configuration.json, edit pages.contact:

{
  "pages": {
    "contact": {
      "title": "Get in touch",
      "desc": "Questions about the kit?",
      "formspreeId": "your_formspree_id_here",
      "info": {
        "email": "team@yourbrand.com",
        "office": "Your City",
        "response": "Under 4 hours"
      }
    }
  }
}

To make the contact form actually send emails:

1. Sign up at https://formspree.io (free, 50 submissions/month)

2. Create a new form

3. Copy the ID (looks like xrbjqkdo)

4. Replace "your_formspree_id_here" with your ID

If you leave it as your_formspree_id_here, the form runs in demo mode — it shows a success message but doesn't send anything.

Change the favicon

The favicon is referenced in data/configuration.json, in the site block:

{
  "site": {
    "name": "Your Brand",
    "icon": "/images/favicon.svg"
  }
}

To use your own favicon:

1. Save your favicon inside public/images/ (.svg, .png, or .ico)

2. Update icon to /images/your-favicon.svg

The favicon is automatically applied to every page through app/layout.tsx. No other file needs to change.

Recommended sizes:

Search engine settings

SEO settings live in the seo block in data/configuration.json:

{
  "seo": {
    "baseUrl": "https://yourbrand.com",
    "robots": {
      "userAgent": "*",
      "allow": ["/"],
      "disallow": ["/api/", "/_next/"]
    },
    "verification": {
      "google": "your-google-verification-code"
    },
    "sitemap": {
      "staticRoutes": [
        { "path": "/", "changeFrequency": "weekly", "priority": 1.0 },
        { "path": "/about", "changeFrequency": "monthly", "priority": 0.7 },
        { "path": "/products", "changeFrequency": "weekly", "priority": 0.9 },
        { "path": "/blog", "changeFrequency": "weekly", "priority": 0.9 },
        { "path": "/contact", "changeFrequency": "monthly", "priority": 0.6 },
        { "path": "/docs", "changeFrequency": "weekly", "priority": 0.8 }
      ],
      "dynamicPriority": {
        "product": 0.7,
        "blogPost": 0.7
      }
    }
  }
}

What each field does:

When you change baseUrl, the sitemap, robots.txt, and Open Graph URLs all update automatically. You only edit it in one place.

Google Search Console verification

To verify your site with Google:

1. Go to https://search.google.com/search-console

2. Click Add Property → URL prefix

3. Enter your site URL

4. Choose HTML tag verification

5. Copy the content value from the meta tag (looks like abc123xyz)

6. Paste it into seo.verification.google in data/configuration.json

7. Deploy your site

8. Back in Search Console, click Verify

Once verified, submit your sitemap:

https://yourbrand.com/sitemap.xml

Google will begin crawling your site within a few days.

Sitemap and robots.txt

Two files are generated automatically at build time:

• ―/sitemap.xml — a list of every page on your site
• ―/robots.txt — instructions for search engine crawlers

Both are built from app/sitemap.ts and app/robots.ts, which read from data/configuration.json. You never edit those files directly unless you're adding new dynamic routes.

To add a new static page to the sitemap: edit seo.sitemap.staticRoutes in data/configuration.json:

{ "path": "/pricing", "changeFrequency": "monthly", "priority": 0.8 }

To change a priority: edit the priority value (range: 0.0 to 1.0).

Dynamic pages (blog posts, products) are added automatically from the data/blog/ and data/products/ folders. You don't need to list them.

Verify your SEO setup

After deploying, check these URLs:

If any of these are missing, check that seo.baseUrl matches your actual domain.

Change colors and fonts

Colors are defined in app/globals.css. Search for hex values:

Fonts are loaded in app/layout.tsx:

const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-luxury" });
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });

To swap fonts, import a different one from next/font/google and update the variables.

Save and refresh

Every change you make to a .json file takes effect automatically. Just save the file and refresh your browser.

No restart required.