Shared Sections

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

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

Add to your pages

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

<DiscordBanner />

Test it

npm run dev

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

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

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

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

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)

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

Overview

Quick Start

Discord Banner

Configuration

Fields

Example

Where It Appears

Styling

Best Practices

Common Includes (Game Plans)

Configuration File

Feature Object

Available Colors

Icon Names

Grid Layout

Complete Example

Best Practices

Where It Appears

Usage Examples

Adding Discord Banner

Adding Common Includes

Troubleshooting

Discord banner not linking correctly

Icons not showing in Common Includes

Colors not applying

​Overview

​Quick Start

​Discord Banner

​Configuration

​Fields

​Example

​Where It Appears

​Styling

​Best Practices

​Common Includes (Game Plans)

​Configuration File

​Feature Object

​Available Colors

​Icon Names

​Grid Layout

​Complete Example

​Best Practices

​Where It Appears

​Usage Examples

​Adding Discord Banner

​Adding Common Includes

​Troubleshooting

​Discord banner not linking correctly

​Icons not showing in Common Includes

​Colors not applying

Overview

Quick Start

Discord Banner

Configuration

Fields

Example

Where It Appears

Styling

Best Practices

Common Includes (Game Plans)

Configuration File

Feature Object

Available Colors

Icon Names

Grid Layout

Complete Example

Best Practices

Where It Appears

Usage Examples

Adding Discord Banner

Adding Common Includes

Troubleshooting

Discord banner not linking correctly

Icons not showing in Common Includes

Colors not applying