Skip to main content
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 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:
TypeDisplayUse Case
textJust textSimple, clean look
imageJust imageIcon-based branding
bothImage + textFull 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:
StyleAppearanceUse Case
primaryColored (brand color)Main CTA
ghostTransparentSecondary actions
iconIcon onlyUtility links
Available Icons: BookOpen, User, Settings, CreditCard, Server, ExternalLink Find more at lucide.dev/icons

​
Complete Navbar Example

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