Skip to main content
Configuration Files: config/shared/sections.ts & config/games/common.ts

​
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

1

Edit the config file

Open config/shared/sections.ts:
export const discordBannerConfig = {
  title: "Join Our Community",
  description: "Connect with thousands of gamers",
  buttonText: "Join Discord",
};
2

Add to your pages

import DiscordBanner from "@/components/sections/shared/DiscordBanner";

<DiscordBanner />
3

Test it

npm run dev

​
Discord Banner

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

​
Configuration

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

FieldTypeDescription
titlestringMain heading text
descriptionstringSupporting text explaining community benefits
buttonTextstringText 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

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

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

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

// 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: 
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 exactly (case-sensitive): 
// 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: 
// Correct
color: "blue-400"

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