Skip to main content

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.

Product Data

Sonata product content is mostly data-driven.
If a plan, price, feature, badge, or checkout URL looks wrong, the fix is usually in a data file rather than a React component.

Product Data Files

lib/data/game-hosting.ts
lib/data/product-config.ts
Use game-hosting.ts for game hosting pages. Use product-config.ts for:
  • Web hosting.
  • App hosting.
  • VPS.
  • Domains.
  • Private nodes.

Billing Base

Most product URLs use:
const B = siteConfig.billing.url;
Then each product appends a path:
billingUrl: `${B}/products/vps/starter-s1`

Non-Game Plan Shape

Example:
{
  id: "s1",
  name: "Starter S1",
  price: "Rp 49.000",
  cpu: "1 vCPU",
  ram: "1 GB",
  storage: "20 GB NVMe",
  bandwidth: "500 GB",
  billingUrl: `${B}/products/vps/starter-s1`,
}

Tiers

Tiers group plans by category. Examples:
  • Starter.
  • Standard.
  • Pro.
  • Node Lite.
  • Node Elite.
  • Node.js.
  • Python.
  • Database.

Config Groups

App hosting, VPS, and private node pages can show selectable config groups. Examples:
  • Operating system.
  • Runtime.
  • Deployment method.
  • Management level.
  • Region.
By default, these selectors are visual. If you want them to change billing URLs, extend the page logic to append query parameters.

Product Copy Tips

  • Keep plan names short.
  • Keep spec labels consistent.
  • Use real resource values.
  • Avoid long text inside cards.
  • Test mobile layout after adding new content.

Data Editing Rules

  • Keep every id unique inside its product group.
  • Keep every slug URL-safe.
  • Keep prices formatted consistently.
  • Keep billing URLs production-ready before launch.
  • Keep spec labels short enough for mobile cards.
  • Avoid adding empty features just to fill space.

Common Product Fields

FieldPurpose
idStable internal identifier.
nameDisplay name shown to customers.
taglineShort card subtitle or selling point.
priceDisplay price.
billingUrlCheckout or order link.
featuresBullet list shown in cards or detail sections.
popularHighlights a recommended plan.
badgeOptional label such as Best Value.

Game Hosting Data

Game hosting data can include:
  • Game slug and route.
  • Hero copy.
  • Game images.
  • Plans and tiers.
  • Locations.
  • Software options.
  • Billing query parameters.
  • Stock mapping.
Keep each game plan structure consistent so cards remain aligned.

Pricing Cycles

If a product has monthly and yearly pricing, confirm:
  • The yearly price is accurate.
  • The discount badge matches the actual difference.
  • The billing cycle parameter matches the billing provider.
  • The default cycle is the one you want buyers to see first.

Testing Product Changes

After editing product data:
  1. Restart the dev server if the data file does not refresh.
  2. Open every affected product page.
  3. Test tier tabs and config selectors.
  4. Click checkout links.
  5. Check mobile card layout.
  6. Run pnpm build.