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

# Partners Configuration

> Configure your partner/affiliate program page with benefits, requirements, and application process

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

<Info>
  **Partner Icons?** See the [Icons Guide](../help/icons) to learn how to configure icons for benefits, requirements, and platform types.
</Info>

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

<Steps>
  <Step title="Edit the config file">
    Open `config/pages/partners.ts`:

    ```typescript theme={null}
    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
    };
    ```
  </Step>

  <Step title="Customize benefits and requirements">
    Update partner benefits and eligibility criteria
  </Step>

  <Step title="Test it">
    ```bash theme={null}
    npm run dev
    ```

    Visit: [http://localhost:3000/partners](http://localhost:3000/partners)
  </Step>
</Steps>

***

## Configuration Structure

### Hero Section

```typescript theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
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

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

The CTA section allows two action types:

#### Option 1: Email (mailto)

```typescript theme={null}
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"
    }
  }
}
```

<Note>Use `%0D%0A` for line breaks in mailto URLs. Test the email link before deploying!</Note>

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

```typescript theme={null}
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:**

<CodeGroup>
  ```typescript Google Form theme={null}
  action: {
    type: "link",
    url: "https://forms.google.com/your-form-id",
    openInNewTab: true,
  }
  ```

  ```typescript Typeform theme={null}
  action: {
    type: "link",
    url: "https://yourname.typeform.com/to/form-id",
    openInNewTab: true,
  }
  ```

  ```typescript Custom Page theme={null}
  action: {
    type: "link",
    url: "/partners/apply",  // Internal page
    openInNewTab: false,
  }
  ```
</CodeGroup>

**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

```typescript theme={null}
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

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

### Requirements

1. **Realistic thresholds** - Don't set too high or too low
2. **Multiple platforms** - Cast a wider net
3. **Show metrics clearly** - "5,000+ Subscribers" is clear

### FAQ

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

### CTA

1. **Clear instructions** - Tell them exactly what to do
2. **Pre-filled email** - Makes applying easier
3. **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:

```typescript theme={null}
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:

```typescript theme={null}
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) |

### Social Links

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

```typescript theme={null}
{
  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:**

```typescript theme={null}
avatar: "/images/partners/techcraft.jpg"  // Place in public/images/partners/
```

### Best Practices

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

***