Branding Configuration

Configuration File: config/branding.ts

Working with Icons? See Icons Guide for detailed instructions on adding and configuring Lucide icons in navbar and other components.

Brand Colors

Edit config/branding.ts at the top:

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 or 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)

Not sure which text color to use? If your brand color looks dark, use white text. If it looks bright/light, use black text.

Examples

// 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:

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

Add your social media profiles:

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:

{
  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

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" },
];

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

Logo Configuration

Choose how your logo appears:

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

Add simple links or dropdown menus:

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!

buttons: [
  // ... your buttons here
]

Single Button (no dropdown):

buttons: [
  { name: "Login", href: "https://billing.example.com", style: "primary" },
]

Two Buttons:

buttons: [
  { name: "Docs", href: "/docs", style: "ghost" },
  { name: "Login", href: "/login", style: "primary" },
]

Button with Dropdown:

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:

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

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" },
      ],
    },
  ],
};

Organize mobile navigation into collapsible sections:

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

Configure your website footer in config/branding.ts.

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)

Organize footer links into columns:

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" },
    ],
  },
]

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.",

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.",
};

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

Brand Colors

Choosing Your Colors

Examples

Site Information

Built-in Icons

Custom Icons

Full Example

Navbar Configuration

Logo Configuration

Navigation Links

Right Side Buttons

Complete Navbar Example

Mobile Menu Configuration

Mobile Menu Best Practices

Footer Configuration

Footer Logo

Footer Link Columns

Footer Bottom Bar

Complete Footer Example

​Brand Colors

​Choosing Your Colors

​Examples

​Site Information

​Social Media Links

​Built-in Icons

​Custom Icons

​Full Example

​Navbar Configuration

​Logo Configuration

​Navigation Links

​Right Side Buttons

​Complete Navbar Example

​Mobile Menu Configuration

​Mobile Menu Best Practices

​Footer Configuration

​Footer Logo

​Footer Link Columns

​Footer Bottom Bar

​Complete Footer Example

Brand Colors

Choosing Your Colors

Examples

Site Information

Social Media Links

Built-in Icons

Custom Icons

Full Example

Navbar Configuration

Logo Configuration

Navigation Links

Right Side Buttons

Complete Navbar Example

Mobile Menu Configuration

Mobile Menu Best Practices

Footer Configuration

Footer Logo

Footer Link Columns

Footer Bottom Bar

Complete Footer Example