> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tariqdev.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# General Configuration

> Understand the main project structure and core configuration files in Sonata.

# General Configuration

Most Sonata customization starts in a small number of files.

<Info>
  Start with config and data files before editing components. Sonata is designed so common storefront changes do not require layout rewrites.
</Info>

## Important Files

| File                                | Purpose                                                                                |
| ----------------------------------- | -------------------------------------------------------------------------------------- |
| `lib/config/site.ts`                | Brand, SEO, social links, billing URLs, panel URL, locations, and metadata.            |
| `app/globals.css`                   | Theme tokens, colors, light mode, depth, buttons, cards, and border beam.              |
| `lib/data/game-hosting.ts`          | Game hosting products, plans, tiers, locations, software variants, and billing params. |
| `lib/data/product-config.ts`        | Web hosting, app hosting, VPS, domains, and private node data.                         |
| `components/ProductCatalogPage.tsx` | Shared catalog UI for app hosting, VPS, and private nodes.                             |
| `app/game-host/ProductCard.tsx`     | Game hosting plan card UI.                                                             |
| `LICENSE`                           | Commercial license terms.                                                              |

## Folder Structure

```txt theme={null}
app/
  api/
  app-host/
  domain/
  game-host/
  home/
  nodes/
  status/
  support/
  vps/
  web-host/
components/
content/
hooks/
lib/
public/
```

## Site Config

Edit:

```txt theme={null}
lib/config/site.ts
```

Common fields:

* `name`
* `fullName`
* `logo`
* `description`
* `url`
* `billing.url`
* `billing.panel`
* `social`
* `seo`
* `icons`
* `nav.banner`
* `locations`

## Billing URL

Most product order links use:

```ts theme={null}
siteConfig.billing.url
```

Then product data appends a product path.

Example:

```ts theme={null}
billingUrl: `${B}/products/vps/starter-s1`
```

Change the suffix to match your billing panel.

## Navigation

Main navigation is in:

```txt theme={null}
components/Navbar.tsx
```

Footer is in:

```txt theme={null}
components/Footer.tsx
```

When adding a new public page, update navigation only if the page needs to be discoverable from the header or footer.

## Configuration Priority

For a new brand, update files in this order:

1. `lib/config/site.ts`
2. `app/globals.css`
3. `lib/data/game-hosting.ts`
4. `lib/data/product-config.ts`
5. `public/asset/`
6. `components/Navbar.tsx`
7. `components/Footer.tsx`

This keeps identity, colors, pricing, and navigation aligned before deeper customization.

## Locations

Location data should stay consistent across the website, billing panel, and Pterodactyl.

Example:

```ts theme={null}
{
  id: "sg",
  label: "Singapore",
  region: "Asia",
}
```

Use the same naming style for:

* Location selectors.
* Game hosting plans.
* Billing configurable options.
* Pterodactyl location or node mapping.

## Copy Guidelines

* Use short labels in navigation.
* Use concise plan card text.
* Put longer explanations in FAQ or docs pages.
* Keep button labels action-oriented.
* Avoid unsupported claims in product copy.

## Final Check

After changing configuration:

* Run `pnpm build`.
* Click every header and footer link.
* Check all product categories.
* Confirm checkout links point to production billing.
* Test light mode and dark mode.