> ## 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.

# Web Hosting

> Customize the Sonata web hosting page, pricing cycles, apps, features, stats, and FAQ.

# Web Hosting

Web hosting has a custom page because the buying flow differs from simple catalog pages.

<Info>
  Web hosting buyers usually compare support, panel access, storage, backups, SSL, and app installs before tiny resource details.
</Info>

Main files:

```txt theme={null}
app/web-host/page.tsx
lib/data/product-config.ts
```

## Data Used

```ts theme={null}
webHostCycles
webHostPlans
webHostFeatures
webHostApps
webHostFaqs
webHostStats
webHostBgFiles
```

## Pricing Cycles

Cycles control monthly and yearly display.

Example:

```ts theme={null}
export const webHostCycles = [
  { key: "monthly", label: "Monthly" },
  { key: "yearly", label: "Yearly", badge: "-20%" },
];
```

## Plans

Each web hosting plan includes:

* Name.
* Tagline.
* Monthly and yearly price.
* Popular state.
* Billing URL.
* Feature list.
* CTA label.

Example plan structure:

```ts theme={null}
{
  name: "Starter",
  tagline: "For small websites and landing pages",
  monthly: "Rp 25.000",
  yearly: "Rp 240.000",
  popular: false,
  billingUrl: `${B}/products/web-hosting/starter`,
  features: ["1 website", "10 GB NVMe", "Free SSL"],
}
```

## Feature Groups

Useful feature groups:

* Performance.
* Security.
* Backups.
* Control panel.
* Email.
* Developer tools.
* Support.

Keep features specific. `NVMe storage` is clearer than `fast hosting`.

## Apps

The app list is used to show common one-click install options.

Examples:

* WordPress.
* WooCommerce.
* Joomla.
* Laravel.
* Ghost.
* Node.js.

Only show apps that your platform actually supports.

## FAQ

Keep web hosting FAQ focused on buyer questions:

* WordPress support.
* SSL.
* Backups.
* Domain usage.
* Control panel.
* Staging.

## Stats

Stats can be used for trust signals.

Good examples:

* Uptime target.
* Websites hosted.
* Average support response.
* Data center regions.
* Backup retention.

Avoid inflated claims unless you can support them.

## Visual Notes

The web hosting hero uses background file labels and a softer hero CTA shadow. If the CTA glow covers nearby content, tune `.hero-cta-soft` in `app/globals.css`.

## Launch Checklist

* Monthly and yearly prices are correct.
* Billing links use production URLs.
* Features match the real hosting package.
* App list matches available installers.
* FAQ matches support policy.
* SSL, backup, and migration claims are accurate.
* Mobile pricing cards do not overflow.