Project Structure

Understanding how the template is organized.

Directory Layout

├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── globals.css         # Global styles & CSS variables
│   │   ├── layout.tsx          # Root layout
│   │   └── page.tsx            # Home page
│   ├── components/
│   │   ├── sections/           # Page sections
│   │   │   ├── HeroSection.tsx
│   │   │   ├── ServerStatusSection.tsx
│   │   │   ├── StatsSection.tsx
│   │   │   ├── GameModesSection.tsx
│   │   │   ├── FeaturesSection.tsx
│   │   │   ├── CTASection.tsx
│   │   │   └── Footer.tsx
│   │   ├── ui/                 # Reusable UI components
│   │   │   ├── Button.tsx
│   │   │   ├── Card.tsx
│   │   │   ├── Container.tsx
│   │   │   └── StatusBadge.tsx
│   │   └── ThemeProvider.tsx   # Theme color injection
│   ├── config/
│   │   └── site.config.ts      # ⭐ MAIN CONFIGURATION FILE
│   ├── hooks/                  # Custom React hooks
│   │   ├── useServerStatus.ts  # Server status polling
│   │   └── useCopyIP.ts        # Copy to clipboard
│   └── lib/
│       └── utils.ts            # Utility functions
├── public/                     # Static assets
├── tailwind.config.ts          # Tailwind configuration
└── package.json

Key Files Explained

site.config.ts

The only file you need to edit. Contains all customizable options: server info, colors, content, and section toggles.

✓Focus Here

99% of customization happens in this single file. You rarely need to touch anything else.

components/sections/

Each page section is a separate component. They all read from site.config.tsand render accordingly. The sections are:

HeroSectionMain banner with server name, tagline, and CTA buttons

ServerStatusSectionLive player count and online status

StatsSectionKey statistics strip (uptime, players, etc.)

GameModesSectionCard grid showing available game modes

FeaturesSectionServer features and selling points

CTASectionCall-to-action with join button

FooterLinks, socials, and copyright

hooks/

Custom React hooks that handle functionality:

useServerStatusPolls mcsrvstat.us API for live server status

useCopyIPHandles copy-to-clipboard with success feedback

public/

Static files that get served directly. Put your images here:

favicon.pngBrowser tab icon

og-image.pngSocial media preview image

Files You Can Ignore

These files are pre-configured and work out of the box:

•next.config.js

•tailwind.config.ts

•tsconfig.json

•package.json

•postcss.config.js

○Advanced Users

If you want to modify component styles or add new pages, check out the components folder. Everything uses TailwindCSS for styling.