Docs Pages & Modules Hero Module

Hero Module

3 min read

The Hero is the first thing visitors see. It spans the full width and typically the full viewport height.


Settings

SettingDescriptionDefault
HeadlineMain title textYour server name
SubheadlineShort description below the titleYour tagline
Background typeImage, Video, Gradient, or ParticlesGradient
Background mediaUpload URL for image or video
Overlay opacityDarkness of the overlay over background60%
HeightFull viewport, Large (75vh), or Medium (60vh)Full
Show server statusLive player count and online indicatorOn
Primary CTA labelText for the main button"Connect Now"
Primary CTA actionCopy IP, Discord link, or custom URLCopy IP
Secondary CTA labelText for second button"Apply Now"
Secondary CTA URLLink for second button/applications

Background options

Image: Upload a JPG or PNG. Recommended minimum: 1920×1080. The image is cropped to fill the hero area. Use a dark image or increase the overlay opacity for readable text.

Video: Upload an MP4. Max 50MB. The video loops silently. Tip: a short 5-10 second loop works best.

Gradient: Generates an atmospheric gradient using your template's color palette. No upload needed.

Particles: Animated floating particle effect. Subtle and professional. No upload needed.


CTA actions

  • Copy IP — copies your server IP to the user's clipboard with a confirmation toast
  • Discord — opens your Discord invite URL (set in Settings → Social)
  • Custom URL — link to any internal page or external URL

Template variants

The Hero module renders differently in each template:

TemplateHero style
LOS_SANTOSPalm silhouette layers with parallax, sunset overlay
EMPIREFull-bleed dark image, gold typographic treatment
VICENeon glow effects, diagonal composition
WEAZELBreaking news banner style, ticker at top
GROVEGraffiti texture overlay, spray-on title reveal