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

# Branding Configuration

> Configure your website's visual identity, logo, colors, and navigation

<Callout icon="link-horizontal" color="#2fbe1f">**Configuration File:** `config/branding.ts`</Callout>

<Info>
  **Working with Icons?** See [Icons Guide](../help/icons) for detailed instructions on adding and configuring Lucide icons in navbar and other components.
</Info>

## Brand Colors

Edit `config/branding.ts` at the top:

```typescript theme={null}
export const brandConfig = {
  color: "#a855f7",   // Your brand color (buttons, accents, highlights)
  text: "#ffffff",    // Text color on brand buttons
};
```

### Choosing Your Colors

**Step 1: Pick your brand color**

* Visit [coolors.co](https://coolors.co/a855f7) or [color.adobe.com](https://color.adobe.com)
* Copy the hex code (e.g., `#a855f7`)

**Step 2: Set your text color**

* **Dark brand color** (purple, blue, green, red) → Use `text: "#ffffff"` (white)
* **Light brand color** (yellow, lime, cyan, pink) → Use `text: "#000000"` (black)

<Callout type="tip">
  Not sure which text color to use? If your brand color looks dark, use white text. If it looks bright/light, use black text.
</Callout>

### Examples

```typescript theme={null}
// Purple brand (dark) - white text
{ color: "#a855f7", text: "#ffffff" }

// Blue brand (dark) - white text
{ color: "#3b82f6", text: "#ffffff" }

// Yellow brand (light) - black text
{ color: "#eab308", text: "#000000" }

// Lime brand (light) - black text
{ color: "#84cc16", text: "#000000" }
```

## Site Information

Basic company info:

```typescript theme={null}
export const siteConfig = {
  name: "Latch",
  copyright: `© ${new Date().getFullYear()} Latch. All rights reserved.`,

  // Email addresses (used in footer, jobs, and partners pages)
  emails: {
    contact: "contact@latch.gg",      // Footer contact email
    careers: "careers@latch.gg",      // Jobs page email
    partners: "partners@latch.gg",    // Partners page email
  },
};
```

**Customization:**

* Replace "Latch" with your company name
* Change email addresses to your domains

## Social Media Links

Add your social media profiles:

```typescript theme={null}
export const socialLinks = [
  {
    name: "Discord",
    url: "https://discord.gg/latch",
    icon: "discord",  // Built-in icon OR custom URL
  },
  {
    name: "Twitter",
    url: "https://twitter.com/latchgg",
    icon: "twitter",
  },
  {
    name: "GitHub",
    url: "https://github.com/latch",
    icon: "github",
  },
];
```

### Built-in Icons

Available social icons (no setup needed):

* `discord`
* `twitter`
* `github`
* `facebook`
* `instagram`
* `youtube`
* `linkedin`
* `tiktok`
* `twitch`

### Custom Icons

Use your own icon image:

```typescript theme={null}
{
  name: "Custom Platform",
  url: "https://example.com",
  icon: "/icons/custom.svg"  // Path to your icon file
}
```

**Icon requirements:**

* Place in `public/icons/` folder
* Format: SVG or PNG
* Size: 24x24px minimum
* Color: White/monochrome (for dark backgrounds)

### Full Example

```typescript theme={null}
export const socialLinks = [
  { name: "Discord", url: "https://discord.gg/yourserver", icon: "discord" },
  { name: "Twitter", url: "https://twitter.com/yourhandle", icon: "twitter" },
  { name: "YouTube", url: "https://youtube.com/@yourchannel", icon: "youtube" },
  { name: "TikTok", url: "https://tiktok.com/@yourhandle", icon: "tiktok" },
  { name: "Instagram", url: "https://instagram.com/yourhandle", icon: "instagram" },
  { name: "Twitch", url: "https://twitch.tv/yourchannel", icon: "twitch" },
  { name: "LinkedIn", url: "https://linkedin.com/company/yourcompany", icon: "linkedin" },
  { name: "Facebook", url: "https://facebook.com/yourpage", icon: "facebook" },
  { name: "GitHub", url: "https://github.com/yourorg", icon: "github" },
];
```

## Navbar Configuration

Configure your website's navigation bar in `config/branding.ts`.

### Logo Configuration

Choose how your logo appears:

```typescript theme={null}
export const navbarConfig = {
  logo: {
    type: "text",          // "text" | "image" | "both"
    text: "Latch",         // Your brand name
    image: "/logo.svg",    // Logo file (put in /public folder)
    imageSize: 40,         // Logo size in pixels
  },
  // ...
};
```

**Logo Type Options:**

| Type    | Display      | Use Case            |
| ------- | ------------ | ------------------- |
| `text`  | Just text    | Simple, clean look  |
| `image` | Just image   | Icon-based branding |
| `both`  | Image + text | Full brand display  |

### Navigation Links

Add simple links or dropdown menus:

```typescript theme={null}
links: [
  // Simple link
  { name: "About", href: "/about" },
  
  // Link with dropdown
  { 
    name: "Game Servers", 
    href: "/games",
    dropdown: [
      { name: "Minecraft", href: "/games/minecraft", popular: true },
      { name: "FiveM", href: "/games/fivem", popular: true },
      { name: "Rust", href: "/games/rust" },
    ],
  },
  
  // Dropdown without parent link
  { 
    name: "More", 
    dropdown: [
      { name: "FAQ", href: "/faq" },
      { name: "Contact", href: "/contact" },
    ],
  },
]
```

**Options:**

* `name` - Display text
* `href` - Link URL (optional for dropdown-only)
* `dropdown` - Array of sub-items (optional)
* `popular: true` - Shows a "Popular" badge

### Right Side Buttons

Add 1, 2, or 3 buttons - whatever you need!

```typescript theme={null}
buttons: [
  // ... your buttons here
]
```

**Single Button (no dropdown):**

```typescript theme={null}
buttons: [
  { name: "Login", href: "https://billing.example.com", style: "primary" },
]
```

**Two Buttons:**

```typescript theme={null}
buttons: [
  { name: "Docs", href: "/docs", style: "ghost" },
  { name: "Login", href: "/login", style: "primary" },
]
```

**Button with Dropdown:**

```typescript theme={null}
buttons: [
  { 
    name: "Login", 
    style: "primary", 
    dropdown: [
      { name: "Billing Panel", href: "https://billing.example.com", icon: "CreditCard" },
      { name: "Game Panel", href: "https://panel.example.com", icon: "Server" },
    ],
  },
]
```

**Icon Button:**

```typescript theme={null}
buttons: [
  { name: "Docs", href: "/knowledgebase", style: "icon", icon: "BookOpen" },
]
```

**Button Styles:**

| Style     | Appearance            | Use Case          |
| --------- | --------------------- | ----------------- |
| `primary` | Colored (brand color) | Main CTA          |
| `ghost`   | Transparent           | Secondary actions |
| `icon`    | Icon only             | Utility links     |

**Available Icons:** `BookOpen`, `User`, `Settings`, `CreditCard`, `Server`, `ExternalLink`

Find more at [lucide.dev/icons](https://lucide.dev/icons)

### Complete Navbar Example

```typescript theme={null}
export const navbarConfig = {
  logo: {
    type: "both",
    text: "YourCompany",
    image: "/logo.svg",
    imageSize: 40,
  },

  links: [
    { name: "FiveM", href: "/games/fivem" },
    { 
      name: "Games", 
      href: "/games",
      dropdown: [
        { name: "Minecraft", href: "/games/minecraft", popular: true },
        { name: "FiveM", href: "/games/fivem", popular: true },
        { name: "Rust", href: "/games/rust" },
      ],
    },
    { 
      name: "Hosting", 
      dropdown: [
        { name: "VPS", href: "/vps" },
        { name: "Dedicated", href: "/dedicated" },
      ],
    },
  ],

  buttons: [
    { name: "Docs", href: "/knowledgebase", style: "icon", icon: "BookOpen" },
    { 
      name: "Login", 
      style: "primary", 
      dropdown: [
        { name: "Billing", href: "https://billing.example.com", icon: "CreditCard" },
        { name: "Panel", href: "https://panel.example.com", icon: "Server" },
      ],
    },
  ],
};
```

## Mobile Menu Configuration

Organize mobile navigation into collapsible sections:

```typescript theme={null}
export const mobileMenuConfig = {
  sections: [
    {
      title: "Games",
      links: [
        { name: "FiveM", href: "/games/fivem" },
        { name: "Minecraft", href: "/games/minecraft" },
        { name: "View All Games", href: "/games", featured: true },
      ],
    },
    {
      title: "Hosting",
      links: [
        { name: "VPS Hosting", href: "/vps" },
        { name: "Dedicated Servers", href: "/dedicated" },
      ],
    },
  ],

  // Action buttons at bottom of mobile menu
  buttons: [
    { name: "Billing Panel", href: "https://billing.example.com" },
    { name: "Game Panel", href: "https://panel.example.com" },
  ],
};
};
```

**Featured items** get highlighted styling (good for "View All" links).

### Mobile Menu Best Practices

**Do:**

* Keep sections under 5 items each
* Use `featured: true` for "View All" links
* Group related pages together
* Put most important items first

**Don't:**

* Create too many sections (3-5 is ideal)
* Use long section titles
* Mix unrelated pages in one section

## Footer Configuration

Configure your website footer in `config/branding.ts`.

### Footer Logo

```typescript theme={null}
export const footerConfig = {
  logo: {
    type: "text",          // "text" | "image" | "both" | "none"
    text: "Latch",
    image: "/logo.svg",
    imageSize: 36,
    gradient: true,        // true = gradient text, false = solid color
  },
  
  description: "Lightning-fast game server hosting powered by enterprise-grade infrastructure.",
  // ...
}
```

**Logo Types:**

* `text` - Company name only
* `image` - Image only
* `both` - Image + text
* `none` - No logo (minimalist footers)

### Footer Link Columns

Organize footer links into columns:

```typescript theme={null}
columns: [
  {
    title: "Products",
    links: [
      { name: "Game Servers", href: "/games" },
      { name: "VPS Hosting", href: "/vps" },
      { name: "Web Hosting", href: "/web-hosting" },
    ],
  },
  {
    title: "Company",
    links: [
      { name: "About Us", href: "/about" },
      { name: "Partners", href: "/partners" },
      { name: "Contact", href: "/contact" },
    ],
  },
  {
    title: "Legal",
    links: [
      { name: "Terms", href: "/terms" },
      { name: "Privacy", href: "/privacy" },
    ],
  },
]
```

### Footer Bottom Bar

```typescript theme={null}
bottomLinks: [
  { name: "Terms", href: "/terms" },
  { name: "Privacy", href: "/privacy" },
  { name: "Status", href: "https://status.example.com" },
],
disclaimer: "All game content, logos, and trademarks are the property of their respective owners.",
```

### Complete Footer Example

```typescript theme={null}
export const footerConfig = {
  logo: {
    type: "text",
    text: "YourCompany",
    image: "/logo.svg",
    imageSize: 36,
    gradient: true,
  },

  description: "Professional game server hosting with 99.9% uptime.",

  columns: [
    {
      title: "Products",
      links: [
        { name: "Minecraft", href: "/games/minecraft" },
        { name: "FiveM", href: "/games/fivem" },
        { name: "VPS", href: "/vps" },
      ],
    },
    {
      title: "Company",
      links: [
        { name: "About", href: "/about" },
        { name: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Support",
      links: [
        { name: "Docs", href: "/knowledgebase" },
        { name: "FAQ", href: "/faq" },
      ],
    },
    {
      title: "Legal",
      links: [
        { name: "Terms", href: "/terms" },
        { name: "Privacy", href: "/privacy" },
      ],
    },
  ],

  bottomLinks: [
    { name: "Terms", href: "/terms" },
    { name: "Privacy", href: "/privacy" },
  ],
  disclaimer: "All trademarks are property of their respective owners.",
};
```