Partners Configuration

Configuration File: config/pages/partners.ts

Partner Icons? See the Icons Guide to learn how to configure icons for benefits, requirements, and platform types.

Overview

The partners page lets you:

Showcase partner program benefits
Define eligibility requirements
Include affiliate program details
Add partner FAQs
Customize application CTA

Configuration file: config/pages/partners.ts

Quick Start

Edit the config file

Open config/pages/partners.ts:

export const partnersConfig = {
  hero: {
    title: "Partner with",
    highlight: "Latch",
    subtitle: "Join our partner program and earn rewards",
    backgroundImage: "https://images.pexels.com/photos/9072216.jpeg"
  },
  // ... more config
};

Customize benefits and requirements

Update partner benefits and eligibility criteria

Test it

npm run dev

Visit: http://localhost:3000/partners

Configuration Structure

Hero Section

hero: {
  title: "Partner with",
  highlight: "Latch",           // Highlighted word
  subtitle: "Join our partner program and earn rewards while providing your community with premium hosting services.",
  backgroundImage: "https://images.pexels.com/photos/9072216.jpeg"
}

Benefits Section

benefits: [
  {
    icon: "headphones",
    title: "Priority Support",
    description: "Get dedicated 24/7 priority support from our team with faster response times and direct access to senior staff.",
    color: "blue" as const
  },
  {
    icon: "link",
    title: "Affiliate Link",
    description: "Receive a custom affiliate link with competitive commission rates on every sale you refer to our platform.",
    color: "purple" as const
  },
  {
    icon: "gift",
    title: "Free Services",
    description: "Access complimentary game servers and hosting services to test, review, and create content for your audience.",
    color: "green" as const
  },
  {
    icon: "coins",
    title: "Giveaway Coins",
    description: "Receive monthly giveaway coins to host exclusive giveaways for your community and boost engagement.",
    color: "yellow" as const
  },
]

Available colors: blue, purple, green, yellow, cyan, orange, red

Requirements Section

requirements: {
  title: "Who Can Apply?",
  subtitle: "Meet any of these criteria to become a partner",
  items: [
    {
      platform: "YouTube Creator",
      metric: "5,000+",
      label: "Subscribers",
      icon: "youtube",
      color: "red"
    },
    {
      platform: "Twitch Streamer",
      metric: "2,000+",
      label: "Followers",
      icon: "twitch",
      color: "purple"
    },
    {
      platform: "Popular Website",
      metric: "50K+",
      label: "Monthly Visits",
      icon: "globe",
      color: "blue"
    },
    {
      platform: "Script Developer",
      metric: "1,000+",
      label: "Active Users",
      icon: "code",
      color: "green"
    },
    {
      platform: "Community Leader",
      metric: "3,000+",
      label: "Discord Members",
      icon: "messageCircle",
      color: "indigo"
    },
  ]
}

FAQ Section

faq: [
  {
    question: "How do I apply to become a partner?",
    answer: "Fill out the application form below with your channel/community details. Our team reviews applications weekly and will reach out if you're a good fit for our program."
  },
  {
    question: "What commission rates do you offer?",
    answer: "We offer competitive commission rates starting at 20% for all referred sales. High-performing partners can earn up to 30% commission based on volume and performance."
  },
  {
    question: "When do I get paid?",
    answer: "Commissions are paid monthly via PayPal, bank transfer, or account credit. Minimum payout threshold is $50. Payments are processed on the 15th of each month."
  },
]

Call to Action

Flexible CTA that supports email (mailto) or direct links (Google Forms, Typeform, custom pages)

The CTA section allows two action types:

Option 1: Email (mailto)

cta: {
  title: "Ready to Join Us?",
  subtitle: "Send us an email with your platform details, audience size, and why you'd like to partner with us.",
  button: {
    text: "Apply via Email",
    icon: "Mail",  // Mail, ExternalLink, FileText
    action: {
      type: "mailto",
      email: "partners@latch.gg",
      subject: "Partner Program Application",
      body: "Hi Team,%0D%0A%0D%0AI'd like to apply for the partner program.%0D%0A%0D%0AName:%0D%0APlatform:%0D%0AChannel/Profile URL:%0D%0AFollowers/Subscribers:%0D%0A%0D%0AWhy I want to partner:%0D%0A"
    }
  }
}

Use %0D%0A for line breaks in mailto URLs. Test the email link before deploying!

Option 2: Direct Link (Google Form, Typeform, etc.)

cta: {
  title: "Ready to Join Us?",
  subtitle: "Fill out our application form and we'll get back to you within 24-48 hours.",
  button: {
    text: "Apply Now",
    icon: "ExternalLink",  // Mail, ExternalLink, FileText
    action: {
      type: "link",
      url: "https://forms.google.com/your-form-id",
      openInNewTab: true,  // Open in new tab (recommended)
    }
  }
}

Link Examples:

action: {
  type: "link",
  url: "https://forms.google.com/your-form-id",
  openInNewTab: true,
}

Action Type Options:

Field	Type	Required	Description
`type`	`"mailto"` or `"link"`	Yes	Action type

Mailto Action:

Field	Type	Required	Description
`email`	string	Yes	Recipient email address
`subject`	string	Yes	Pre-filled subject line
`body`	string	Yes	Pre-filled email body (use `%0D%0A` for line breaks)

Link Action:

Field	Type	Required	Description
`url`	string	Yes	Destination URL (internal or external)
`openInNewTab`	boolean	No	Open in new tab (default: false)

Available Icons:

Icon	Description	Best For
`Mail`	Email envelope	mailto actions
`ExternalLink`	External link arrow	External forms/links
`FileText`	Document icon	Application forms

Complete Example

export const partnersConfig = {
  hero: {
    title: "Partner with",
    highlight: "YourBrand",
    subtitle: "Join our partner program and earn rewards",
    backgroundImage: "https://images.pexels.com/photos/9072216.jpeg"
  },
  
  benefits: [
    {
      icon: "headphones",
      title: "Priority Support",
      description: "24/7 dedicated support with faster response times",
      color: "blue" as const
    },
    {
      icon: "link",
      title: "Affiliate Link",
      description: "Custom tracking links with competitive commissions",
      color: "purple" as const
    },
    {
      icon: "gift",
      title: "Free Services",
      description: "Complimentary hosting for testing and content creation",
      color: "green" as const
    },
  ],
  
  requirements: {
    title: "Who Can Apply?",
    subtitle: "Meet any of these criteria",
    items: [
      {
        platform: "YouTube Creator",
        metric: "5,000+",
        label: "Subscribers",
        icon: "youtube",
        color: "red"
      },
      {
        platform: "Twitch Streamer",
        metric: "2,000+",
        label: "Followers",
        icon: "twitch",
        color: "purple"
      },
    ]
  },
  
  faq: [
    {
      question: "How do I apply?",
      answer: "Fill out the form below with your details."
    },
    {
      question: "What are the commission rates?",
      answer: "We offer 20-30% commission based on volume."
    },
  ],
  
  cta: {
    title: "Ready to Join?",
    subtitle: "Apply now and start earning",
    button: {
      text: "Apply via Email",
      icon: "mail",
      action: {
        type: "mailto",
        email: "partners@yourbrand.com",
        subject: "Partner Application",
        body: "I'd like to apply for the partner program."
      }
    }
  },
  
  partners: [
    {
      name: "TechCraft Studios",
      description: "Content Creator",
      avatar: "https://api.dicebear.com/7.x/adventurer/svg?seed=TechCraftStudios",
      socials: {
        website: "https://techcraft.com",
        youtube: "https://youtube.com",
        twitter: "https://twitter.com",
      },
    },
    {
      name: "GamingWithAlex",
      description: "Gaming Streamer",
      avatar: "https://api.dicebear.com/7.x/adventurer/svg?seed=GamingWithAlex",
      socials: {
        youtube: "https://youtube.com",
        twitch: "https://twitch.tv",
      },
    },
  ],
};

Best Practices

Benefits

Be specific - Show exact perks (commission %, support level)
Use icons - Visual appeal for each benefit
4-6 benefits - Focus on most valuable perks

Requirements

Realistic thresholds - Don’t set too high or too low
Multiple platforms - Cast a wider net
Show metrics clearly - “5,000+ Subscribers” is clear

FAQ

Answer common questions - Payment, rates, application process
Be transparent - Clear commission structure
5-8 questions - Enough info, not overwhelming

CTA

Clear instructions - Tell them exactly what to do
Pre-filled email - Makes applying easier
Response time - Set expectations (24-48 hours)

Troubleshooting

Benefits not showing

Check all required fields: icon, title, description, color (with as const)

Requirements layout broken

Each requirement needs: platform, metric, label, icon, color

Email button not working

Ensure mailto format is correct:

action: {
  type: "mailto",
  email: "partners@domain.com",
  subject: "Subject Here",
  body: "Body text with %0D%0A for line breaks"
}

Icons not displaying

Use Lucide icon names in camelCase. Check available icons at lucide.dev

Partner Showcase

Showcase your current partners with avatars, descriptions, and social links:

partners: [
  {
    name: "TechCraft Studios",
    description: "Content Creator",
    avatar: "https://api.dicebear.com/7.x/adventurer/svg?seed=TechCraftStudios",
    socials: {
      website: "https://techcraft.com",
      youtube: "https://youtube.com",
      twitter: "https://twitter.com",
    },
  },
  {
    name: "GamingWithAlex",
    description: "Gaming Streamer",
    avatar: "https://api.dicebear.com/7.x/adventurer/svg?seed=GamingWithAlex",
    socials: {
      youtube: "https://youtube.com",
      twitch: "https://twitch.tv",
    },
  },
  {
    name: "PixelMaster",
    description: "Builder & Tutorials",
    avatar: "https://api.dicebear.com/7.x/adventurer/svg?seed=PixelMaster",
    socials: {
      website: "https://pixelmaster.com",
      youtube: "https://youtube.com",
    },
  },
]

Partner Fields

Field	Type	Description	Required
`name`	string	Partner name	Yes
`description`	string	Role/description (e.g., “Content Creator”)	Yes
`avatar`	string	Avatar URL (DiceBear or custom image)	Yes
`socials`	object	Social media links	Yes (at least one)

Available social platforms:

website - Personal or company website
youtube - YouTube channel URL
twitter - Twitter/X profile URL
twitch - Twitch channel URL
instagram - Instagram profile URL
discord - Discord server invite URL

Example with all socials:

{
  name: "ProGamerHQ",
  description: "Competitive Gaming",
  avatar: "https://api.dicebear.com/7.x/adventurer/svg?seed=ProGamerHQ",
  socials: {
    website: "https://progamerhq.com",
    youtube: "https://youtube.com/@progamerhq",
    twitch: "https://twitch.tv/progamerhq",
    twitter: "https://twitter.com/progamerhq",
    instagram: "https://instagram.com/progamerhq",
    discord: "https://discord.gg/progamerhq",
  },
}

Avatar Generation

Use DiceBear API to generate consistent avatars: Format:

https://api.dicebear.com/7.x/adventurer/svg?seed=YourName

Change the seed:

Use partner name as seed for consistency
Remove spaces or use URL encoding
Each unique seed generates a unique avatar

Examples:

seed=TechCraft → Specific avatar
seed=GamingWithAlex → Different avatar
seed=PixelMaster → Another unique avatar

Or use custom images:

avatar: "/images/partners/techcraft.jpg"  // Place in public/images/partners/

Best Practices

8-12 partners - Good showcase without overwhelming
Consistent descriptions - Keep them short (2-3 words)
Active links - Only include current social accounts
Real avatars - Use actual partner logos if available
Update regularly - Add new partners, remove inactive ones

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

Overview

Quick Start

Configuration Structure

Hero Section

Benefits Section

Requirements Section

FAQ Section

Call to Action

Option 1: Email (mailto)

Option 2: Direct Link (Google Form, Typeform, etc.)

Complete Example

Best Practices

Benefits

Requirements

FAQ

CTA

Troubleshooting

Benefits not showing

Requirements layout broken

Email button not working

Icons not displaying

Partner Showcase

Partner Fields

Avatar Generation

Best Practices

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

​Overview

​Quick Start

​Configuration Structure

​Hero Section

​Benefits Section

​Requirements Section

​FAQ Section

​Call to Action

​Option 1: Email (mailto)

​Option 2: Direct Link (Google Form, Typeform, etc.)

​Complete Example

​Best Practices

​Benefits

​Requirements

​FAQ

​CTA

​Troubleshooting

​Benefits not showing

​Requirements layout broken

​Email button not working

​Icons not displaying

​Partner Showcase

​Partner Fields

​Social Links

​Avatar Generation

​Best Practices

Overview

Quick Start

Configuration Structure

Hero Section

Benefits Section

Requirements Section

FAQ Section

Call to Action

Option 1: Email (mailto)

Option 2: Direct Link (Google Form, Typeform, etc.)

Complete Example

Best Practices

Benefits

Requirements

FAQ

CTA

Troubleshooting

Benefits not showing

Requirements layout broken

Email button not working

Icons not displaying

Partner Showcase

Partner Fields

Social Links

Avatar Generation

Best Practices