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

# Quick Tips

> Small but useful tips for common Latch tasks

Small but useful tips for common tasks when working with Latch.

***

## Removing a Page

To remove an entire page from your website:

<Steps>
  <Step title="Delete the page folder">
    Find the page folder in `app/` and delete it:

    ```
    app/
    ├── about/           ← Delete to remove /about page
    ├── changelogs/
    ├── contact/
    ├── dedicated/
    ├── faq/
    ├── games/
    ├── jobs/            ← Delete to remove /jobs page
    ├── knowledgebase/
    ├── partners/        ← Delete to remove /partners page
    ├── privacy/
    ├── terms/
    ├── vps/
    └── web-hosting/
    ```
  </Step>

  <Step title="Remove navigation links">
    Search your codebase for links to the removed page and remove them.

    **Common places to check:**

    * `components/layout/Footer.tsx` - Footer links
    * `components/layout/Header.tsx` - Navigation menu
    * `config/pages/*.ts` - Page configuration files

    **Quick search:** Press `Ctrl + Shift + F` and search for:

    ```
    /jobs
    href="/jobs"
    link: "/jobs"
    ```

    Replace `jobs` with the page you removed.
  </Step>
</Steps>

<Warning>Make sure no other pages link to the removed page, or users will see 404 errors!</Warning>

***

## Removing a Component

To remove a component from a page (like Sale Banner, Discord Banner, etc.):

<Steps>
  <Step title="Find the page file">
    Open the page's `page.tsx` file. For homepage:

    ```
    app/page.tsx
    ```
  </Step>

  <Step title="Remove the component">
    Find the component and delete both:

    1. The import statement at the top
    2. The component tag in the JSX

    **Example: Removing SaleBanner from homepage**

    ```tsx theme={null}
    // BEFORE
    import SaleBanner from "@/components/sections/shared/SaleBanner";

    export default function Home() {
      return (
        <main className="min-h-screen">
          <Hero />
          <SaleBanner />  {/* ← Remove this */}
          <Pricing />
          ...
        </main>
      );
    }
    ```

    ```tsx theme={null}
    // AFTER
    export default function Home() {
      return (
        <main className="min-h-screen">
          <Hero />
          <Pricing />
          ...
        </main>
      );
    }
    ```
  </Step>
</Steps>

**Common components you might remove:**

| Component           | Location       | What it does             |
| ------------------- | -------------- | ------------------------ |
| `<SaleBanner />`    | `app/page.tsx` | Sale countdown banner    |
| `<DiscordBanner />` | `app/page.tsx` | Discord invite section   |
| `<Testimonials />`  | `app/page.tsx` | Customer reviews section |
| `<Comparison />`    | `app/page.tsx` | Feature comparison table |
| `<Hardware />`      | `app/page.tsx` | Server hardware specs    |

***

## Adding External Images

When you add an image from an external URL, you may see this error:

```
Error: Invalid src prop (https://example.com/image.png) on `next/image`, 
hostname "example.com" is not configured under images in your `next.config.ts`
```

<Warning>Next.js blocks external images for security. You need to whitelist the image domain.</Warning>

### How to Fix

<Steps>
  <Step title="Open next.config.ts">
    Find the file at the root of your project.
  </Step>

  <Step title="Add the image domain">
    Find the `remotePatterns` array and add your domain:

    ```typescript theme={null}
    // next.config.ts
    const nextConfig: NextConfig = {
      images: {
        remotePatterns: [
          // ... existing domains ...
          
          // Add your new domain here:
          {
            protocol: 'https',
            hostname: 'example.com',  // ← Your image domain
          },
        ],
      },
    };
    ```
  </Step>

  <Step title="Restart the dev server">
    Stop the server (`Ctrl + C`) and restart:

    ```bash theme={null}
    npm run dev
    ```
  </Step>
</Steps>

### Full Example

If your image URL is:

```
https://cdn.myimages.com/photos/hero-banner.jpg
```

Add this to `next.config.ts`:

```typescript theme={null}
{
  protocol: 'https',
  hostname: 'cdn.myimages.com',
}
```

### Common Image Domains

```typescript theme={null}
remotePatterns: [
  // Discord avatars
  { protocol: 'https', hostname: 'cdn.discordapp.com' },
  
  // Imgur
  { protocol: 'https', hostname: 'i.imgur.com' },
  
  // Unsplash
  { protocol: 'https', hostname: 'images.unsplash.com' },
  
  // Cloudflare Images
  { protocol: 'https', hostname: 'imagedelivery.net' },
  
  // AWS S3
  { protocol: 'https', hostname: 'your-bucket.s3.amazonaws.com' },
  
  // YouTube thumbnails
  { protocol: 'https', hostname: 'yt3.googleusercontent.com' },
  
  // Gravatar
  { protocol: 'https', hostname: 'www.gravatar.com' },
],
```

<Tip>Use local images in `public/assets/` to avoid needing to configure external domains. Reference them as `/assets/your-image.png`.</Tip>

***

## Using Local Images

For images you control, store them locally:

<Steps>
  <Step title="Add image to public folder">
    ```
    public/
    └── assets/
        └── your-image.png
    ```
  </Step>

  <Step title="Reference in code">
    ```tsx theme={null}
    import Image from "next/image";

    <Image 
      src="/assets/your-image.png" 
      alt="Description" 
      width={500} 
      height={300} 
    />
    ```
  </Step>
</Steps>

**Benefits of local images:**

* No need to configure `next.config.ts`
* Faster loading (served from your domain)
* Won't break if external host goes down
* Better for SEO

***

## Translating Your Site

Latch does not ship with a built-in i18n system. Instead, **all display text lives inside the `config/` directory** as TypeScript files. To translate the site into any language, edit the values in those files.

<Steps>
  <Step title="Locate the config file for the page you want to translate">
    Every page in `app/` has a matching config file:

    ```
    config/
    ├── home.ts              ← Homepage
    ├── faq.ts               ← FAQ page
    ├── changelogs.ts        ← Changelogs page
    ├── testimonials.ts      ← Testimonials section
    ├── hardware.ts          ← Hardware specs section
    ├── seo.ts               ← SEO meta titles & descriptions
    ├── hosting/
    │   ├── vps.ts           ← VPS Hosting page
    │   ├── web-hosting.ts   ← Web Hosting page
    │   └── dedicated.ts     ← Dedicated Servers page
    ├── games/
    │   └── *.ts             ← Individual game pages
    ├── pages/
    │   ├── about.ts         ← About page
    │   ├── contact.ts       ← Contact page
    │   ├── jobs.ts          ← Jobs page
    │   └── partners.ts      ← Partners page
    ├── knowledgebase/
    │   └── *.ts             ← Knowledge base articles
    ├── legal/
    │   └── *.ts             ← Privacy & Terms pages
    ├── promotions/
    │   └── *.ts             ← Sale banners & promotions
    └── shared/
        ├── sections.ts      ← Navbar & Footer text
        └── comparison.ts    ← Comparison table
    ```
  </Step>

  <Step title="Edit the string values">
    Open the config file and replace the English text with your translation. Only change the *values* — leave the property keys (left side) unchanged:

    ```typescript theme={null}
    // BEFORE
    export const homeConfig = {
      hero: {
        badge: "Trusted by 500+ Customers",
        title: "Premium Game Server Hosting",
        description: "High-performance hosting built for gamers.",
      },
    };

    // AFTER (Spanish example)
    export const homeConfig = {
      hero: {
        badge: "Con la confianza de más de 500 clientes",
        title: "Hosting Premium para Servidores de Juegos",
        description: "Hosting de alto rendimiento creado para jugadores.",
      },
    };
    ```
  </Step>

  <Step title="Translate UI text inside components (if needed)">
    Some labels, button text, and helper strings are hardcoded inside component files under `components/`. If you cannot find a piece of text in `config/`, search for it globally:

    1. Press `Ctrl + Shift + F` (Windows) or `Cmd + Shift + F` (Mac)
    2. Type the exact text you see on the page
    3. Open the file that contains it and update the string
  </Step>

  <Step title="Translate SEO metadata">
    Page titles and meta descriptions are separately controlled in `config/seo.ts`. Make sure to translate those too so search engines index your site in the correct language.
  </Step>
</Steps>

<Tip>
  To bulk-find all English strings at once, open `Ctrl + Shift + H`, set **"files to include"** to `config/**/*.ts`, and search/replace term by term.
</Tip>

***

## Quick Find & Replace

Use VS Code's global search to find and replace across all files:

**Keyboard shortcut:** `Ctrl + Shift + H` (Windows/Linux) or `Cmd + Shift + H` (Mac)

**Common replacements when setting up:**

| Find               | Replace With             |
| ------------------ | ------------------------ |
| `latch.gg`         | `yourdomain.com`         |
| `billing.latch.gg` | `billing.yourdomain.com` |
| `discord.gg/latch` | `discord.gg/yourserver`  |
| `contact@latch.gg` | `contact@yourdomain.com` |

<Tip>In the "files to include" field, enter `config/**/*.ts` to limit search to config files only.</Tip>

***

## Adding Purchase Links to Hosting Plans

All hosting plans (VPS, Web Hosting, Dedicated) support clickable purchase links via the `orderUrl` field.

<Steps>
  <Step title="Open your hosting config file">
    Navigate to the config file for the hosting type you want to edit:

    * **VPS:** `config/hosting/vps.ts`
    * **Web Hosting:** `config/hosting/web-hosting.ts`
    * **Dedicated:** `config/hosting/dedicated.ts`
  </Step>

  <Step title="Add orderUrl to each plan">
    Find the `plans` array and add `orderUrl` to each plan object:

    ```typescript theme={null}
    plans: [
      {
        name: "VPS-STARTER",
        vcpu: "2 vCPU",
        ram: "4GB",
        price: 9.99,
        orderUrl: "https://billing.yourdomain.com/cart.php?a=add&pid=1",
        features: [...],
      },
      {
        name: "VPS-STANDARD",
        vcpu: "4 vCPU",
        ram: "8GB",
        price: 19.99,
        orderUrl: "https://billing.yourdomain.com/cart.php?a=add&pid=2",
        features: [...],
      },
    ]
    ```
  </Step>

  <Step title="Customize the Contact Sales section">
    Each hosting page also has a customizable "Contact Sales" section at the bottom:

    ```typescript theme={null}
    customConfig: {
      title: "Need Custom Configuration?",
      description: "Contact our team for tailored solutions.",
      buttonText: "Contact Sales",
      buttonUrl: "/contact"
    }
    ```
  </Step>
</Steps>

<Tip>Use `#` as a placeholder URL during development, then replace with your actual billing/purchase URLs before going live.</Tip>

***

## Related Guides

<CardGroup cols={2}>
  <Card title="FAQ" icon="circle-question" href="/help/faq">
    Common questions answered
  </Card>

  <Card title="Examples" icon="code" href="/help/examples">
    Code examples and snippets
  </Card>

  <Card title="Sale Banner" icon="badge-percent" href="/configuration/sale-banner">
    Configure promotional banners
  </Card>

  <Card title="Configuration Basics" icon="gear" href="/configuration/configuration-basics">
    All configuration options
  </Card>
</CardGroup>