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

# Shared Sections

> Configure reusable sections that appear across multiple pages

<Callout icon="link-horizontal" color="#2fbe1f">**Configuration Files:** `config/shared/sections.ts` & `config/games/common.ts`</Callout>

## Overview

Shared sections are reusable components that appear on multiple pages:

* **Discord Banner** - Call-to-action to join your Discord community
* **Common Includes** - Features included in all game server plans

Configuration file: `config/shared/sections.ts`

## Quick Start

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

    ```typescript theme={null}
    export const discordBannerConfig = {
      title: "Join Our Community",
      description: "Connect with thousands of gamers",
      buttonText: "Join Discord",
    };
    ```
  </Step>

  <Step title="Add to your pages">
    ```tsx theme={null}
    import DiscordBanner from "@/components/sections/shared/DiscordBanner";

    <DiscordBanner />
    ```
  </Step>

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

***

## Discord Banner

A prominent call-to-action banner encouraging visitors to join your Discord server.

### Configuration

```typescript theme={null}
export const discordBannerConfig = {
  title: "Join Our Community",
  description: "Connect with thousands of gamers, get support, and stay updated with the latest news",
  buttonText: "Join Discord",
};
```

### Fields

| Field         | Type   | Description                                   |
| ------------- | ------ | --------------------------------------------- |
| `title`       | string | Main heading text                             |
| `description` | string | Supporting text explaining community benefits |
| `buttonText`  | string | Text on the Discord button                    |

**Note:** The Discord URL is automatically pulled from your `socialLinks` in `config/branding.ts`. Make sure you have a Discord link configured there.

### Example

```typescript theme={null}
export const discordBannerConfig = {
  title: "Join 10,000+ Gamers",
  description: "Get instant support, exclusive giveaways, and connect with our community",
  buttonText: "Join Our Discord",
};
```

### Where It Appears

The Discord Banner is commonly used on:

* Bottom of product pages (games, VPS, dedicated)
* After contact form submission
* Partner program page
* Knowledge base articles

### Styling

The banner features:

* **Gradient background** - Purple to indigo gradient
* **White button** - High contrast for visibility
* **Auto-scales** - Responsive on mobile
* **Discord icon** - Built-in Discord logo

### Best Practices

**Do:**

* Keep title under 5 words
* Highlight community size ("Join 10K+ gamers")
* Mention benefits (support, giveaways, updates)
* Use action-oriented button text

**Don't:**

* Write long descriptions (2 lines max)
* Use generic text ("Click here")
* Forget to set Discord URL in branding config
* Place on every single page (too repetitive)

***

## Common Includes (Game Plans)

Displays features included in all game server plans. Shown on individual game pages below pricing.

### Configuration File

`config/games/common.ts`

```typescript theme={null}
export const gamesCommonConfig = {
  title: "Included in All Plans",
  features: [
    {
      icon: "Shield",
      title: "DDoS Protection",
      color: "blue-400"
    },
    {
      icon: "Zap",
      title: "Instant Setup",
      color: "purple-400"
    },
    {
      icon: "HardDrive",
      title: "NVMe Storage",
      color: "cyan-400"
    },
    {
      icon: "LifeBuoy",
      title: "24/7 Support",
      color: "green-400"
    },
    {
      icon: "Database",
      title: "Auto Backups",
      color: "orange-400"
    },
    {
      icon: "Lock",
      title: "Full FTP Access",
      color: "pink-400"
    },
    {
      icon: "Globe",
      title: "Custom Domain",
      color: "blue-400"
    },
    {
      icon: "Gauge",
      title: "99.9% Uptime",
      color: "purple-400"
    }
  ]
};
```

### Feature Object

Each feature has:

```typescript theme={null}
{
  icon: "Shield",        // Icon name from lucide.dev
  title: "DDoS Protection",  // Feature name (2-3 words)
  color: "blue-400"      // Tailwind color for icon
}
```

### Available Colors

Use Tailwind color classes:

* `blue-400`
* `purple-400`
* `cyan-400`
* `green-400`
* `orange-400`
* `pink-400`
* `yellow-400`
* `red-400`

### Icon Names

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

Common hosting icons:

* `Shield` - Security/DDoS protection
* `Zap` - Speed/instant setup
* `HardDrive` - Storage (NVMe, SSD)
* `LifeBuoy` - Support
* `Database` - Backups
* `Lock` - Security/access control
* `Globe` - Domains/networking
* `Gauge` - Performance/uptime
* `Server` - Infrastructure
* `Cloud` - Cloud services

### Grid Layout

Features automatically display in a responsive grid:

* **Mobile:** 2 columns
* **Desktop:** 4 columns

**Recommended:** 8 features for perfect balance (2 rows of 4)

### Complete Example

```typescript theme={null}
export const gamesCommonConfig = {
  title: "Every Plan Includes",
  features: [
    {
      icon: "Shield",
      title: "DDoS Protection",
      color: "blue-400"
    },
    {
      icon: "Zap",
      title: "Instant Deploy",
      color: "purple-400"
    },
    {
      icon: "HardDrive",
      title: "NVMe SSD",
      color: "cyan-400"
    },
    {
      icon: "Headphones",
      title: "24/7 Support",
      color: "green-400"
    },
    {
      icon: "Database",
      title: "Daily Backups",
      color: "orange-400"
    },
    {
      icon: "Lock",
      title: "FTP & SFTP",
      color: "pink-400"
    },
    {
      icon: "Network",
      title: "Low Latency",
      color: "blue-400"
    },
    {
      icon: "Gauge",
      title: "99.9% SLA",
      color: "purple-400"
    }
  ]
};
```

### Best Practices

**Do:**

* Keep titles concise (2-3 words)
* Use 8 features for grid balance
* Pick contrasting colors
* Highlight genuine value-adds

**Don't:**

* List too many features (8 max)
* Use long feature names
* Repeat colors consecutively
* Include features specific to certain plans only

### Where It Appears

The Common Includes section shows on:

* Individual game pages (below pricing)
* After plan comparison tables
* Game template pages

This reassures customers what they get with every plan, reducing confusion and building trust.

***

## Usage Examples

### Adding Discord Banner

```tsx theme={null}
// app/games/[slug]/page.tsx
import DiscordBanner from "@/components/sections/shared/DiscordBanner";

export default function GamePage() {
  return (
    <>
      <GameHero />
      <GamePricing />
      <GameFeatures />
      <DiscordBanner />  {/* Add here */}
    </>
  );
}
```

### Adding Common Includes

```tsx theme={null}
// app/games/[slug]/page.tsx
import CommonIncludes from "@/components/sections/shared/CommonIncludes";

export default function GamePage() {
  return (
    <>
      <GamePricing />
      <CommonIncludes />  {/* Shows after pricing */}
      <GameFeatures />
    </>
  );
}
```

***

## Troubleshooting

### Discord banner not linking correctly

**Problem:** Button links to `#` instead of Discord

**Solution:** Add Discord to your `socialLinks` in `config/branding.ts`:

```typescript theme={null}
export const socialLinks = [
  {
    name: "Discord",
    url: "https://discord.gg/yourserver",
    icon: "discord",
  },
  // ... other socials
];
```

### Icons not showing in Common Includes

**Problem:** Icons display as question marks or don't render

**Solution:** Verify icon names match [lucide.dev](https://lucide.dev/icons) exactly (case-sensitive):

```typescript theme={null}
// Correct
icon: "Shield"

// Wrong
icon: "shield"      // lowercase
icon: "ShieldIcon"  // has "Icon" suffix
```

### Colors not applying

**Problem:** Icon colors are default gray instead of specified color

**Solution:** Use exact Tailwind color classes with shade number:

```typescript theme={null}
// Correct
color: "blue-400"

// Wrong
color: "blue"       // missing shade
color: "#3b82f6"    // hex code (not supported)
```